Τα καλύτερα links – Δεκέμβρης 08

Έμπνευση

Web Design

  • Το Masked Input Plugin είναι ένα καταπληκτικό jQuery plug-in, το οποίο θα λύσει τα χέρια τόσο σε εσάς όσο και στους χρήστες σας. Με το Masked Input Plugin λοιπόν μπορείτε να υποδείξετε στους χρήστες σας την μορφή των δεδομένων που περημένετε από μία φόρμα. Απλά τέλειο!
  • Η γνωστή σε όλους μας (θέλω να πιστεύω) sIFR τεχνική τώρα και σε μορφή jQuery! Είμαι σίγουρος πως τo jQuery sIFR Plugin θα βολέψει αρκετούς από εσάς…
  • Το Oomph είναι ένα ενδιαφέρον microformats toolkit, το οποίο δεν με βοήθησε όσο θα ήθελα για πω την αλήθεια. Ίσως δεν ασχολήθηκα μαζί του όσο θα έπρεπε. Όποιος έχει project με microformats όμως, ας το έχει στα υπόψη του, μπορεί να είναι το αυτό που χρειάζεται!
  • Έχετε βαρεθεί να σχεδιάζετε και να ξανασχεδιάζεται φόρμες για το web? Εάν η απάντηση είναι ναι, το NiceForms είναι ένα έτοιμο πακετάκι που αναλαμβάνει όλο το styling των φορμών σας αυτόματα! Μπορείτε επίσης να κατεβάσετε και διάφορα έτοιμα themes φορμών πέρα από το κλασικό. Αρκετά βολικό για όσους βαριούνται 😉
  • Όσοι σχεδιάζουν site στο Photoshop και θέλουν να βλέπουν και το περίγραμμα των browser, μπορούν να κατεβάσουν τα Photoshop Browser Templates σε 3 διαφορετικές αναλύσεις! Κάπως παρατραβηγμένο, αλλά έτσι κι αλλιώς δωρεάν είναι!

Web Development

  • Το foxycart είναι πλέον το νέο αγαπημένο μου σύστημα cart/checkout! Σίγουρα αξίζει την μικρή συνδρομή που ζητάει (μπορείτε να το δοκιμάσετε και δωρεάν εάν θυμάμαι καλά), ενώ εάν τα προιόντα σας δεν ξεπερνάνε τα 50, έτσι ώστε να πάτε σε κάποια CMS cart λύση όπως το osCommerce, το foxycart είναι η ιδανικότερη και η πιο έυκολη στην υλοποίηση/παραμετροποίηση λύση!

Accessibility/Usability

  • Το userfly είναι η καλύτερη υπηρεσία για usability testing που έχω δει μέχρι στιγμής! Το installation της υπηρεσίας στο site σας είναι πανεύκολο, ενώ μετά μετά από αυτό θα έχετε την δυνατότητα να βλέπετε σε playback mode τις ακριβείς κινήσεις των χρηστών σας στο site σας (για να το καταλάβετε καλύτερα παίξτε οπωσδήποτε με το demo του)! Μπορείτε να το δοκιμάσετε και δωρεάν, σε 10 χρήστες την ώρα (μια χαρά ακούγεται), και καλό είναι να το κάνετε όσο προλαβένεται γιατί από ότι κατάλαβα οι δημιουργοί του δεν έχουν καταλάβει ακόμα πόσο φοβερή υπηρεσία έχουν, ούτε έχουν σκεφτεί πόσο θα την χρεώσουν!

Δωρεάν / Freebies!

  • To Songbird έφτασε επιτέλους μετά από πολύ καιρό την πρώτη έκδοση! Μου αρέσει γιατί θέλω ανταγωνισμό, ελευθερία αλλά και ευκολία σε τέτοιους είδους players, και το Songbird μου προσφέρει όλα τα παραπάνω και με το παραπάνω! Προσωπικά έχει γίνει το iTunes killer για εμένα, τώρα εάν θα τα καταφέρει και γενικότερα, ο χρόνος θα δείξει…

Διάφορα links

  • Μια πραγματικά πολύ έξυπνη, πρωτότυπη και χριστουγεννιάτικη ιδέα από το Τutorial 9! Το εν λόγω site λοιπόν, ξεκινάει το giveaway project στο οποίο καλεί όποιον ενδιαφέρεται να γράψει κάποιο tutorial ή άρθρο για κάποιες από τις πολλές κατηγορίες του. Εάν τελικά δημοσιεύθει το άρθρο που έχετε γράψει, κερδίζετε κάποια δωράκια, αλλά το ακόμα πιο συμαντικό είναι πως το Τutorial 9 δωρίζει 100 δολάρια σε παιδιά που έχουν ανάγκη. Μακάρι να βλέπαμε περισσότερες τέτοιες προσπάθειες…

Best of the rest – 38η εβδομάδα 2008

Αρκετή κινητικότητα αυτήν την εβδομάδα, με ιδιαίτερη έμφαση στα νέα που έχουν να κάνουν με web accessibility 😉

  • Το Adobe AIR είναι έτοιμο και για Linux (beta version). Με αυτήν την κίνηση λοιπόν, η Adobe καταφέρνει να έχει μια πολύ ώριμη RIA πλατφόρμα σε όλα τα λειτουργικά συστήματα! Για να δούμε λοιπόν εάν το AIR θα καταφέρει να γίνει συνώνυμο των RIA εφαρμογών…
  • Για πρώτη φορά στην Ευρώπη, δημιουργούνται οι πρώτες accessibility guidelines. Μας έρχονται από το Ηνωμένο Βασίλειο, και πιο συγκεκριμένα από το Central Office of Information (COI), και έχουν ιδιαίτερο ενδιαφέρον, γιατί είναι οι πρώτες επίσημες accessibility οδηγίες κάποιου ευρωπαϊκού κράτους. Από μια πρώτη ματιά που έριξα, συμφωνώ απόλυτα με το post του Web Standards Project, το οποίο εξηγεί πως το σκεπτικό που έχουν γραφτεί οι οδηγίες είναι λάθος, και πως θα δημιουργηθούν αρκετά προβλήματα εάν τελικά χρησιμοποιηθούν. Μείνετε συντονισμένοι γιατί έχω σκοπό να γράψω και την δικιά μου άποψη πάνω στο θέμα.
  • Και μιας και ανοίξαμε το θέμα accessibility στο web, το Digital Web Magazine δημοσίευσε ένα εξαιρετικό άρθρο με θέμα την προσβασημότητα (accessibility) στο web, αλλά και στο πως θα πρέπει να σχεδιάζουμε τα site μας για ανθρώπους με διάφορα προβλήματα και αναπηρίες. Είναι από τα καλύτερα και πιο ολοκληρωμένα άρθρα που έχω διαβάσει, με πολλές λεπτομέρειες και παραδείγματα. Απλά διαβάστε το!
  • Με το Fangs plug in για τον Firefox, μπορείτε να “διαβάσετε” την σελίδα σας, όπως θα την διάβαζε ένας screen reader. Ας ρίχνουμε λοιπόν μια ματιά στα site που κατασκευάζουμε με αυτό το plug in, έτσι ώστε να κάνουμε την ζωή κάποιων χρηστών μας ακόμα πιο εύκολη, γιατί πραγματικά το αξίζουν.
  • Το Status είναι κάτι σαν το Twitter, με βασική διαφορά πως επιλέγετε ποιοι χρήστες και group θα βλέπουν αυτά που γράφεται. Πολύ καλή λύση για να ομάδες και groups που θέλουν να μοιράζονται πληροφορίες, χωρίς ωστόσο να τις βλέπει ο καθένας…
  • H καινούργια release candidate version του jQuery UI είναι έτοιμη! Για όσους θέλουν να ρίξουν μια ματιά, μπορούν να την κατεβάσουν εδώ και τώρα (version 1.6rc2).
  • To SEOmoz είναι ένα blog που απλά πρέπει να παρακολουθείτε εάν δηλώνεται επαγγελματίες του χώρου. Ασχολείται με SEO θέματα όπως καταλαβαίνετε και από τον τίτλο του, ενώ κάθε Παρασκευή δημοσιεύει ένα πολύ ενδιαφέρον videocast, το οποίο ονομάζει Friday Whiteboard. Το ανακάλυψα από το blog About.SEO του Γιώργου.

Progressive enhancement : Tsevdos.com sidebar

Το δεύτερο και ίσως αγαπημένο μου feature στο Whitepress theme, είναι η AJAX-powered, αλλά ταυτόχρονα accessible sidebar του! Την τεχνική την δανείστηκα από το blog jQuery for designers και πιο συγκεκριμένα από το post jQuery Tabs, και ο λόγος που την λάτρεψα είναι επειδή χρησιμοποιεί σωστά αυτό που ονομάζουμε progressive enhancement. Progressive enhancement με πολύ απλά λόγια σημαίνει πως ο χρήστης έστω και εάν δεν έχει την javascript ενεργοποιημένη στον browser, η sidebar και ολόκληρο το περιεχόμενο της θα εμφανίζεται κανονικά! Το μόνο που θα χάσει ο χρήστης σε αυτήν την περίπτωση είναι το AJAX-like εφέ που δημιουργεί η Javascript (και πιο συγκεκριμένα το jQuery), ενώ θα βλέπει και όλα τα tabs ανοιχτά, το ένα κάτω από το άλλο. Όπως μπορείτε να παρατηρήσετε και από τις 2 παρακάτω εικόνες, ο χρήστης με ενεργοποιημένη Javascript έχει περισσότερο ελεύθερο χώρο στην sidebar του, και μπορεί να επιλέξει ποιο tab θα είναι ενεργοποιημένο. Αντίθετα κάποιος χρήστης με απενεργοποιημένη Javascript ή screen reader απλά βλέπει κανονικά και στην σειρά όλο το περιεχόμενο της sidebar με την σειρά που εμφανίζεται στην markup!

Tsevdos.com with Javascript on
Η sidebar όπως εμφανίζεται σε browser που έχει ενεργοποιημένη την Javascript.
Tsevdos.com with Javascript off
Η sidebar όπως εμφανίζεται σε browser που δεν έχει ενεργοποιημένη την Javascript.

Η markup (XHTML)

Ας δούμε όμως πως μπορούμε να φτιάξουμε το συγκεκριμένο εφέ εύκολα και γρήγορα. Εν αρχή λοιπόν (όπως πάντα) η markup μας.


Όπως βλέπεται ένα div με το id sidebar, περιέχει μια unordered list (ul), με τρία list items (li), τα οποία στην ουσία λειτουργούν ως navigation list για τα τρία divs που ακολουθούν και θα περιέχουν το περιεχόμενο μας. Φυσικά η navigation list μπορεί να έχει περισσότερα links, αρκεί να υπάρχουν και τα ανάλογα divs περιεχομένου από κάτω. Αυτό ήταν, η markup είναι έτοιμη! Το μόνο που θα πρέπει να προσέξει κάποιος (θα εξηγήσω παρακάτω το γιατί), είναι πως σε περίπτωση που θέλει να προσθέσει επιπλέον ζευγάρια links και divs (για να έχει επιπλέον tabs και περιεχόμενο δηλαδή), θα πρέπει το link μέσα στο list item, να έχει για href attribute ακριβώς το ίδιο string με το id του div που θα προσθέσει. Όπως ήδη μπορείτε να δείτε, όλα τα links έχουν για href attribute τα id των div που θα εμφανίζουν.

H CSS

To styling (CSS) της συγκεκριμένης markup δεν παίζει κανέναν απολύτως ρόλο στον κώδικα μας (όλη η δουλειά γίνεται μέσω Javascript/jQuery), ωστόσο γι αυτούς που θέλουν να δημιουργήσουν κάτι στα γρήγορα, ας αντιγράψουν τον παρακάτω κώδικα, τον οποίο χρησιμοποιώ και στο παράδειγμα που μπορείτε να δείτε και φυσικά να κατεβάσετε!

* {
margin: 0;
padding: 0;
}

#sidebar {
width: 500px;
margin: 20px;
margin-bottom: 15px;
border-left: 1px solid #999;
}

#navigation {
list-style-type: none;
}

a:link, a:visited {
color: #fff;
background: #ccc;
padding: 1px 5px 0;
text-decoration: none;
font-weight: bold;
}

a:hover, a:active, a.selected {
color: #fff;
background: #999;
}

#navigation li {
list-style-type: none;
float: left;
border: 1px solid #999;
border-width: 1px 1px 0 0;
}

#sidebar div {
clear: left;
padding: 10px;
border: 1px solid #999;
border-width: 1px 1px 1px 0;
}

Και τέλος η Javascript (jQuery)

Και επιτέλους περνάμε στην καρδιά αυτού του tutorial, δηλαδή στην Javascript και το jQuery πιο συγκεκριμένα! Για τους ανυπόμονους, ο κώδικας είναι ο παρακάτω, ωστόσο καλό θα είναι να τον εξηγήσουμε και λίγο, γιατί πολλά πράγματα γίνονται, μέσα σε πολύ λίγες γραμμές κώδικα…



Στην πρώτη γραμμή λοιπόν, δηλώνουμε στην markup πως θα κάνουμε χρήση της jQuery library. Η συγκεκριμένη library (όπως και οι περισσότερες άλλωστε) λειτουργεί όταν το DOM (Document Object Model) είναι έτοιμο. Αυτό ακριβώς κάνει ο παρακάτω κώδικας. Μέσα του θα προσθέσουμε όλον το Javascript κώδικα ο οποίος με την βοήθεια και της βιβλιοθήκης θα δημιουργήσει το εφέ μας.

$(document).ready(function(){
...
});

Επιλέγουμε λοιπόν τα links (anchor elements) που βρίσκονται μέσα στην unordered list με id navigation, και τους προσθέτουμε ένα απλό click event. Με άλλα όταν γίνει click σε κάποιο link της λίστας, τότε ο κώδικας που βρίσκεται ανάμεσα στις αγκύλες ενεργοποιήται.

$('#sidebar #navigation li a').click(function() {
...
});

Και πάμε πλέον στο τι γίνεται όταν πατηθεί κάποιο από τα παραπάνω links. Αρχικά επιλέγουμε όλα τα divs της sidebar (#sidebar > div) και τα κρύβουμε (hide()). Ταυτόχρονα εμφανίζουμε το div (με ένα απλό fadeIn εφέ) το οποίο έχει id ίδια τιμή με το string της href attribute του link (hash). Για τον λόγο αυτό σας προειδοποίησα παραπάνω πως πρέπει να προσέξουμε πολύ στην markup μας αυτήν την μικρή λεπτομέρεια. Εάν δεν έχουν ίδια τιμή ο κώδικας απλά δεν παίζει… Για να το κάνω ακόμα πιο κατανοητό (για αυτούς που κάνουν τώρα τα πρώτα τους βήματα σε jQuery), ας υποθέσουμε πως πατήθηκε το link Section 1, το οποίο έχει για href attribute την τιμή “#first_div”. Μόλις γίνει click λοιπόν, το jQuery θα κρύψει όλα τα divs της sidebar, και θα επιλέξει το div το οποίο έχει για id την τιμή #first_div. Αυτό γίνεται επειδή το this.hash εκείνη την στιγμή παίρνει την τιμή #first_div. Μόλις ολοκληρωθεί και αυτό, απλά εμφανίζουμε με fade in το συγκεκριμένο div. Και όλα αυτά γίνονται μόλις σε 1 γραμμή κώδικα!

$('#sidebar > div').hide().filter(this.hash).fadeIn();

Ευτυχώς ο υπόλοιπος κώδικας είναι πολύ πιο κατανοητός και εύκολος. Στις παρακάτω 3 γραμμές απλά επιλέγουμε όλα τα links και τους αφαιρούμε (εάν έχουν, όμως πάντα ένα link θα έχει) την κλάση “selected”, η οποία και δίνει το ανάλογο style στο επιλεγμένο link. Τέλος προσθέτουμε στο link που έχει γίνει το click την κλάση “selected”, έτσι ώστε να φαίνεται πως είναι επιλεγμένο (highlighted), και δηλώνουμε στον browser να σταματήσει την default ενέργεια του click event (return false;), μιας και έχουμε πετύχει το εφέ που θέλουμε!

$('#sidebar #navigation li a').removeClass('selected');
$(this).addClass('selected');
return false;

Τέλος σε όλο αυτό το click event προσθέτουμε ένα από τα αγαπημένα μου χαρακτηριστικά που έχει το jQuery. Φιλτράρουμε το πρώτο element που έχει επιλεχθεί, δηλαδή το πρώτο link της λίστας μας, και κάνουμε click πάνω του, μέσω κώδικα! Έτσι όταν στο τέλος εμφανίζεται η σελίδα το πρώτο link (ή tab ή όπως αλλιώς θέλετε να το πείτε), θα είναι πάντα επιλεγμένο!!! Αυτό ήταν, είναι έτοιμο, δουλεύει και πάνω από όλα, είναι φιλικό προς όλους τους χρήστες! Δοκιμάστε να απενεργοποιήσετε την Javascript και θα δείτε πως θα συνεχίζει να δουλεύει χωρίς κανένα πρόβλημα, απλά θα χάσει λίγη από την μαγεία του…

.filter(':first').click();

Επίλογος

To jQuery είναι πραγματικά μια φανταστική Javascript library η οποία κάνει τα δύσκολα πράγματα απλά! Όπως βλέπεται μέσα σε μόλις 6-7 γραμμές κώδικα έχουμε ένα πολύ όμορφο και accessible αποτέλεσμα το οποίο μπορεί να χρησιμοποιηθεί παντού! Η δυνατότητα του να κάνεις εύκολα και γρήγορα αυτά που έχεις στο μυαλό σου, χωρίς να σε απασχολούν οι μικρολεπτομέρειες τις Javascript (οι οποίες πιστέψτε με είναι πολλές και ενοχλητικές), είναι αυτό που κάνει το jQuery να ξεχωρίζει από τις άλλες libraries. Τέλος για όσους θέλουν μια ακόμα πιο εύκολη και φυσικά accessible λύση καλό θα είναι να ρίξουν και μια ματιά στο UI Tabs το οποίο είναι ένα επίσημο plug-in για το jQuery και κάνει με πολύ λιγότερο κόπο αυτό που δημιουργήσαμε παραπάνω ()…

Styling comments : Tsevdos.com way

Είχα υποσχεθεί πως θα παρουσιάσω μερικά 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”.


  1. Comment body goes here.

  2. Comment body goes here.

Εφόσον λοιπόν έχουμε την βάση μας (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 μας δεν είναι καθόλου άσχημη για τον κώδικα που γράψαμε, ωστόσο κάτι της λείπει…

comments screenshot 1

Αυτό που έχασε η λίστα μας κατά το 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 = '' + i + '<\/span>';
$(this).prepend(node);

Αυτές οι 3 γραμμές κώδικα θα αναλάβουν να ζωντανέψουν κι άλλο την λίστα μας! Η συγκεκριμένη web τεχνική ονομάζεται DOM injection, μιας και το νέο element που προσθέσαμε στην σελίδα μας, δεν υπάρχει πουθενά στην markup μας, αλλά το προσθέσαμε με την βοήθεια της Javascript και του DOM (DOM scripting).

Styling comments screenshot 2

Σαν τελική πινελιά, απλά θα δώσουμε κάποιους 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).

Styling comments screenshot 3





Styling comments : Tsevdos.com way






  1. Comment body goes here.

  2. Comment body goes here.

  3. Comment body goes here.

  4. Comment body goes here.

Όπως είδατε, τα 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 : Το τελικό αποτέλεσμα μπορείτε να το δείτε ζωντανά εδώ.

H Yahoo! UI Library προσθέτει selector utility

Η γνωστή effects, Ajax και γενικότερα UI (user interface) library της Yahoo! απέκτησε ένα ολοκαίνουργιο selector utility το οποίο αντιγράφει την μέθοδο επιλογής του jQuery στην Yahoo! UΙ library! Έτσι χρησιμοποιώντας κάποιος την library της Yahoo! μπορεί πλέον να επιλέξει κάποιο element με τον γνωστό jQuery τρόπο :

var p_nodes = YAHOO.util.Selector.query('p');

Όπως φαίνεται όλες οι Javascript/AJAX libraries έχουν αρχίσει να καταλαβαίνουν πόσο δυνατό είναι το jQuery στον συγκεκριμένο τομέα και προσπαθούν να το εντάξουν στην εκάστοτε library τους. Προσωπικά θα συνεχίσω να χρησιμοποιώ το jQuery γιατί εκτός από το ότι είναι απλό, με πολλές δυνατότητες και πολύ εύκολο στην εκμάθηση, είναι και πολύ πιο ελαφρύ σε file size συγκρινόμενο με άλλες libraries (ιδιαίτερα με την Yahoo! UΙ library).