Είχα υποσχεθεί πως θα παρουσιάσω μερικά features του νέου μου theme για τα οποία αισθάνομαι περήφανος, όχι επειδή είναι πολύπλοκα, αλλά ακριβώς επειδή δεν είναι 😉. Μάλλον μπέρδεψα αρκετούς ήδη, οπότε ας ρίξουμε μια ματιά στα σχόλια/comments του blog που διαβάζεται, αλλά και τους στόχους που ήθελα να πετύχω.
Τα σχόλια/comments στο blog μου λοιπόν, ήθελα να είναι απλά, μινιμαλιστικά (όπως και το υπόλοιπο design άλλωστε), ευανάγνωστα και σημασιολογικά σωστά! Ας ξεκινήσουμε από το τελευταίο λοιπόν, το οποίο έχει να κάνει μόνο με την ταπεινή μας markup (XHTML). Για να βάλουμε τα πράγματα σε μία σειρά λοιπόν, τα σχόλια δεν είναι τίποτα παραπάνω από μια (μεγάλη πολλές φορές) λίστα. Επειδή η συγκεκριμένη λίστα λοιπόν, έχει και κάποια σειρά (1ο σχόλιο, 2ο σχόλιο, κτλ.), αποφάσισα να χρησιμοποιήσω σαν βάση της markup μια αριθμημένη λίστα (ή αλλιώς ordered list)! Από εκεί και πέρα το κάθε στοιχείο της λίστας (list item) μπορεί να χωριστεί σε περαιτέρω κομμάτια όπως το όνομα του σχολιαστή, το κείμενο/σχόλιο του καθώς και οποιαδήποτε extra πληροφορία θέλουμε να συμπεριλάβουμε, όπως πχ. ημερομηνία και ώρα. Στο παρακάτω markup snippet λοιπόν, μπορείτε να δείτε την λίστα των σχολίων/comments σε όλο της το μεγαλείο! Όπως βλέπετε το κάθε list item είναι και ένα σχόλιο, ενώ μέσα σε αυτό υπάρχουν divisions (divs) με συγκεκριμένες κλάσεις (classes), για τον σχολιαστή (author_meta), το κείμενο του σχολίου (comment_body) καθώς και κάποιες extra πληροφορίες για το σχόλιο όπως ημερομηνία και ώρα ανάρτησης του (comment_meta). Τέλος, όλα αυτά είναι τοποθετημένα μέσα σε ένα div με το γενικό id “comments”.
<div id="comments">
<ol>
<li>
<div class="author_meta"><a href="http://www.tsevdos.com">John Tsevdos</a> :</div>
<div class="comment_body">
<p>Comment body goes here.</p>
</div>
<div class="comment_meta">
<a href="#comment-937">May 14th, 2008 at 10:10 am</a>
</div>
</li>
<li class="alt">
<div class="author_meta"><a href="http://www.tsevdos.com">John Tsevdos</a> :</div>
<div class="comment_body">
<p>Comment body goes here.</p>
</div>
<div class="comment_meta">
<a href="#comment-938">May 14th, 2008 at 10:10 am</a>
</div>
</li>
</ol>
</div>
Εφόσον λοιπόν έχουμε την βάση μας (markup) έτοιμη και σημασιολογικά σωστή, θα προσπαθήσουμε να παρουσιάσουμε το περιεχόμενο της όσο καλύτερα γίνεται, έτσι ώστε να ταιριάζει με το υπάρχον design μας, αλλά και χωρίς να αναγκαστούμε να χαλάσουμε την markup μας για χάρη του design… Έτσι με μερικούς απλούς και κατανοητούς CSS κανόνες, μπορούμε πολύ εύκολα να πετύχουμε τον στόχο μας.
a {
font-size: 0.8em;
font-family: Tahoma, Verdana, sans-serif;
}
a:link {
color: #2ea0c6;
}
a:visited {
color: #7d7f81;
text-decoration: underline;
}
a:hover,
a:active {
color: #ff6d1e;
text-decoration: none;
}
#comments {
margin: 2em 1em 1em;
}
#comments ol {
padding: 0;
list-style-type: none;
}
#comments ol li {
margin: 1em 0 0;
padding: 1em;
list-style-type: none;
border: 1px solid #ccc;
}
#comments ol li:hover {
border: 1px solid #333;
}
#comments ol li.alt {
background: #f0f0f0;
}
#comments ol li .author_meta {
font-size: 1.1em;
font-weight: bold;
}
#comments ol li .comment_body {
clear: right;
}
#comments ol li .comment_meta {
text-align: right;
}
Ο CSS κώδικας που μόλις παρουσίασα είναι πανεύκολος, ωστόσο θα ήθελα να σταθώ σε 2 σημεία.
- Το πρώτο είναι το hover state του list item (#comments ol li:hover). Όπως ξέρουμε τα επήσιμα standards διατυπώνουν πως οποιοδήποτε element μπορεί να έχει hover state (και γενικότερα οποιαδήποτε ψευδό-κλάση), ωστόσο ο Internet Explorer 6 (και οι παλιότερες εκδόσεις του), υποστηρίζουν την συγκεκριμένη ψευδό-κλάση μόνο στα anchor (a) elements. Το εφέ μας λοιπόν θα παίξει σε όλους τους browsers κανονικά, εκτός από τον ΙΕ6 και τις παλιότερες εκδόσεις του, κάτι που προσωπικά δεν με ενοχλεί και τόσο, μιας και οι συγκεκριμένοι χρήστες το μόνο που θα χάσουν είναι ένα απλό εφεδάκι και τίποτα παραπάνω.
- Το δεύτερο σημείο που θέλω να εστιάσω λίγο την προσοχή σας, είναι η κλάση alt (#comments ol li.alt) η οποία δίνει σε κάθε δεύτερο list item ένα διαφορετικό background color. Την συγκεκριμένη κλάση την προσθέτει εύκολα το WordPress, ωστόσο είναι πολύ εύκολο να κάνετε το ίδιο με οποιαδήποτε πλατφόρμα αλλά και server-side τεχνολογία.
Όπως μπορείτε να δείτε και από το παρακάτω screenshot, η λίστα με τα comments μας δεν είναι καθόλου άσχημη για τον κώδικα που γράψαμε, ωστόσο κάτι της λείπει…
Αυτό που έχασε η λίστα μας κατά το styling, ήταν η αριθμητική αίσθηση των comments (list-style-type: none;), κάτι που θα αρέσει σε πολλούς, ωστόσο προσωπικά θα ήθελα να δημιουργήσω κάτι ανάλογο. Γι’ αυτόν ακριβώς τον λόγο θα χρησιμοποιήσω το jQuery, την αγαπημένη μου Javascript library, έτσι ώστε να δώσω πίσω στην λίστα των comments μας αυτό που έχασε, την αριθμητική συνέχεια! Φορτώνουμε λοιπόν το jQuery (σημείωση στο παράδειγμα μας χρησιμοποιώ την έκδοση 1.2.6, ωστόσο δεν θα έχετε πρόβλημα ούτε με παλιότερες, ούτε με νεότερες εκδόσεις του) στην σελίδα μας και ξεκινάμε!
Ο παραπάνω Javascript κώδικας (λέμε τώρα), αν και θα παραξενέψει ακόμα και έμπειρους developers της Javascript στην πραγματικότητα είναι πανεύκολος, αρκεί να καταλάβεται λίγο πως λειτουργεί το jQuery. Όλος ο κώδικας του jQuery λοιπόν ξεκινάει όταν το DOM (Document Object Model) της web σελίδας μας είναι έτοιμο:
$(document).ready(function () {
//code goes here...
});
Μόλις ο browser φορτώσει όλο το DOM λοιπόν, πολύ απλά επιλέγω όλα τα list items ($("#comments ol li").each) και εκτελώ σε όλα, μία function. Αρχικά αυξάνω τον counter με το όνομα i (i++;) έτσι ώστε το πρώτο list item να έχει τον αριθμό 1, το δεύτερο τον αριθμό 2 κοκ., και στην συνέχεια δημιουργώ μία variable με το όνομα node, η οποία είναι ένα απλό string το οποίο περιέχει HTML κώδικα, και πιο συγκεκριμένα περιέχει τον αριθμό του counter μέσα σε ένα span element με την κλάση (class) “comment_number”. Τέλος και με την βοήθεια του jQuery απλά προσθέτω το node που μόλις δημιουργήσα στην αρχή κάθε list item.
i++;
var node = '<span class="comment_number">' + i + "</span>";
$(this).prepend(node);
Αυτές οι 3 γραμμές κώδικα θα αναλάβουν να ζωντανέψουν κι άλλο την λίστα μας! Η συγκεκριμένη web τεχνική ονομάζεται DOM injection, μιας και το νέο element που προσθέσαμε στην σελίδα μας, δεν υπάρχει πουθενά στην markup μας, αλλά το προσθέσαμε με την βοήθεια της Javascript και του DOM (DOM scripting).
Σαν τελική πινελιά, απλά θα δώσουμε κάποιους styling κανόνες και στα nodes που μόλις προσθέσαμε έτσι ώστε να δείχνουν και αυτά όμορφα, όπως η υπόλοιπη λίστα μας.
#comments ol li .comment_number {
color: #ccc;
font-size: 2.5em;
font-weight: bold;
line-height: 1em;
float: right;
}
#comments ol li.alt .comment_number {
color: #fff;
}
Το τελικό αποτέλεσμα μπορείτε να το δείτε παρακάτω, ενώ φυσικά υπάρχει διαθέσιμος και ολόκληρος ο κώδικας (γι’ αυτούς που βαριούνται να τον γράφουν από την αρχή)! Μην ξεχάσετε μόνο να κατεβάσετε το jQuery και να το προσθέσετε στον παρακάτω κώδικα (line 06).
<div id="comments">
<ol>
<li>
<div class="author_meta"><a href="http://www.tsevdos.com">John Tsevdos</a> :</div>
<div class="comment_body">
<p>Comment body goes here.</p>
</div>
<div class="comment_meta">
<a href="#comment-937">May 14th, 2008 at 10:10 am</a>
</div>
</li>
<li class="alt">
<div class="author_meta"><a href="http://www.tsevdos.com">John Tsevdos</a> :</div>
<div class="comment_body">
<p>Comment body goes here.</p>
</div>
<div class="comment_meta">
<a href="#comment-938">May 14th, 2008 at 10:10 am</a>
</div>
</li>
<li>
<div class="author_meta"><a href="http://www.tsevdos.com">John Tsevdos</a> :</div>
<div class="comment_body">
<p>Comment body goes here.</p>
</div>
<div class="comment_meta">
<a href="#comment-937">May 14th, 2008 at 10:10 am</a>
</div>
</li>
<li class="alt">
<div class="author_meta"><a href="http://www.tsevdos.com">John Tsevdos</a> :</div>
<div class="comment_body">
<p>Comment body goes here.</p>
</div>
<div class="comment_meta">
<a href="#comment-938">May 14th, 2008 at 10:10 am</a>
</div>
</li>
</ol>
</div>
Όπως είδατε, τα comments στο blog μου δεν κάνουν χρήση μαγικών ή περίεργων τεχνολογιών, αλλά αντίθετα είναι ένας απλός συνδυασμός markup, CSS και Javascript. Τώρα θα με ρωτήσει κάποιος, γιατί είμαι περήφανος για το συγκεκριμένο κομμάτι του blog και γιατί διάλεξα να παρουσιάσω αυτό και όχι κάτι πιο πολύπλοκο. Η απάντηση, είναι πως ο παραπάνω κώδικας είναι σημασιολογικά σωστός, δηλαδή κάνει χρήση των σωστών markup tags καθώς επίσης χρησιμοποιεί σωστά ονόματα στα ids και τις κλάσεις (classes) που περιέχει, ενώ ταυτόχρονα κάνει και χρήση της τεχνικής progressive enhancement. Το τελευταίο, με απλά λόγια σημαίνει πως το περιεχόμενο είναι προσβάσιμο από όλους χρήστες με οποιονδήποτε browser, screen reader, κτλ., ενώ όσο πιο προηγμένο browser έχει στην διάθεση του ο χρήστης, τόσο πιο όμορφο θα είναι το τελικό αποτέλεσμα. Έτσι κάποιος χρήστης με screen reader ή text-only browser θα διαβάσει μια καθαρή και κατανοητή λίστα η οποία βγάζει νόημα, κάποιος χρήστης με επιπλέον δυνατότητα stylesheets θα δει ένα όμορφο αποτέλεσμα στον browser του (και όσο πιο σύγχρονο browser έχει, τόσο πιο πολλά style-based εφέ θα δει), ενώ τέλος εάν υπάρχει και η Javascript διαθέσιμη στην μηχανή rendering, ο χρήστης θα καταφέρει να δει και τον αριθμό του κάθε σχολίου που υπάρχει! Όλοι θα είναι χαρούμενοι και το σημαντικότερο φυσικά είναι πως όλοι θα έχουν πρόσβαση στο περιεχόμενο των comments!
Ελπίζω να εξήγησα καλά τόσο το παραπάνω (απλό?) παράδειγμα όσο και την θεωρεία που κρύβεται πίσω από κάθε επιλογή που έκανα. Καθημερινά ο κάθε web designer πρέπει να πάρει άπειρες τέτοιες αποφάσεις, και πραγματικά στην αρχή είναι πολύ δύσκολο να ξεχωρίσεις τι είναι σωστό και τι όχι, αλλά και να εξηγήσεις σε κάποιον γιατί επέλεξες την συγκεκριμένη λύση έναντι κάποιας άλλης. Σιγά-σιγά όμως τα πράγματα ξεκαθαρίζουν, και η παραπάνω διαδικασία γίνεται δεύτερη φύση! Όσοι θέλετε και άλλα ανάλογα παραδείγματα απλά μείνετε συντονισμένοι και δεν θα χάσετε 😉.
Update: Το τελικό αποτέλεσμα μπορείτε να το δείτε ζωντανά εδώ.