Τα καλύτερα links – Απρίλιος 09

Έμπνευση

Web Design

  • To Glimmer είναι ένα δωρεάν desktop application – μόνο για Windows προς το παρόν – το οποίο σας βοηθάει να γράφεται jQuery κώδικα! Τι άλλο θα δούμε…
  • Μόλις τελειώσατε το καινούργιο web design σας στον αγαπημένο σας browser, και ανακαλύπτετε πως δεν παίζει σωστά στον IE6. Βαριέστε (όπως όλοι μας) να λύσετε όλα τα σπαστικά IE6-only bugs; Μην ανησυχείτε, υπάρχει λύση. Απλά επισκεφθείτε το ie6fixer επιλέξτε ποια γνωστά bugs θέλετε να διορθωθούν, ανεβάστε το CSS αρχείο σας, και αυτό ήταν όλο. To ie6fixer θα δημιουργήσει αυτόματα τον IE6 κώδικα που χρειάζεστε (καλά μην περιμένετε και θαύματα, ωστόσο λύνει αρκετά προβλήματα εύκολα και γρήγορα).
  • jsDraw2D : Ακόμα μία Javascript library για γραφήματα…

Web Development

  • Το OpenCart είναι ένα όμορφο, δυνατό και open source shopping cart.

Search Engine Optimization (SEO)

Τυπογραφία (Typography)

  • Cufón ονομάζεται η νέα τεχνική αντικατάστασης web safe fonts με custom. Η διαφορά του με το γνωστό sFIR, είναι πως δεν χρησιμοποιεί το Flash για να κάνει render τα custom fonts, αλλά απλή Javascript σε συνδυασμό με το canvas element και VML (Vector Markup Language). Η διαδικασία installation είναι πραγματικά εύκολη (όχι όπως το sFIR), παίζει σε όλους τους browsers, και μάλιστα χωρίς έξτρα plug ins, ενώ είναι και αρκετά γρήγορο. Το μόνο που πρέπει να κάνετε είναι να κατεβάσετε το Cufón και να κάνετε generate τα custom fonts στον Cufón generator. Η συνέχεια είναι πανεύκολη, απλά αντικαθιστάτε τα fonts που θέλετε με τα custom fonts σας! Το έχω ήδη χρησιμοποιήσει και είναι πραγματικά πολύ εύκολο στην χρήση, ωστόσο με προβληματίζει λίγο το θέμα επιλογής του text στα Cufón generated fonts. Εάν διορθωθεί και αυτό μιλάμε για πραγματικό διαμάντι στο θέμα web typography…

WordPress

  • Στo WPSeek.com μπορείτε να βρείτε όλα τα WordPress template tags και  functions μαζί με πολλά άλλα resources και σημειώσεις. Μπορείτε επίσης να συνεισφέρετε και τις δικές σας.

Διάφορα links

  • Δεν αντέχετε άλλο τον Internet Explorer 6; Ε τότε βοηθείστε να τον σκοτώσουμε!
  • Το Sex Shop TV είναι ένα αρκετά πρωτότυπο και περίεργο για τα ελληνικά δεδομένα web project. Είναι μια ταινία που θα διανέμεται αποκλειστικά από το διαδίκτυο και που θα παίζεται σε συνέχειες. Για να δούμε τι θα δούμε…
  • Έχετε πρόβλημα εθισμού με κάποια sites; Ξοδεύεται πολύ χρόνο σε αυτά παρά την θέληση σας; Μην ανησυχείτε η web υπηρεσία KeepMeOut είναι εδώ για να λύσει το πρόβλημα εθισμού σας. Απλά δηλώστε το site και την ώρα που θέλετε να μείνετε έξω από αυτό, και το KeepMeOut αναλαμβάνει όλα τα υπόλοιπα…

Τα καλύτερα links – Μάρτιος 09

Έμπνευση

Web Development

  • To RegExr είναι ένα φοβερό on-line tool για εκμάθηση και testing regular expressions.
  • Άλλη μια δωρεάν Javascript library με το περίεργο όνομα qooxdoo. Η library ενδείκνυται κυρίως για την δημιουργία UI.
  • Ένα δωρεάν και μάλιστα open source framework/μηχανή παιχνιδιών για Flash. To PushButton Engine δείχνει αρκετά δυνατό στον τομέα του, εάν φυσικά έχετε τις ανάλογες γνώσεις πάνω στο Flash.
  • Το Hastymail είναι ένας δωρεάν, open source, web email client, με πάρα πολλά χαρακτηριστικά και γραμμένος σε PHP. Συστήνεται ανεπιφύλακτα σε όσους θέλουν να στήσουν κάτι τέτοιο στην εταιρεία τους, μιας και υποστηρίζει άπειρους browsers, συσκευές, προσφέρει AJAX ευκολίες, ενώ είναι και πολύ παραμετροποιήσημος. Για περισσότερες λύσεις ρίξτε μια ματιά και στο άρθρο “10 AJAX-based & PHP WebMail Clients For a Great User Experience“.
  • Όσοι βέβαια ψάχνουν κάτι πιο ολοκληρωμένο, δηλαδή μια κανονική “communication platform” με email client, calendars, contacts και file managers, καλό είναι να ρίξουν μια ματιά στο επίσης δωρεάν και open source 6zap. Είναι κάπως πιο απαιτητικό σε απαιτήσεις, αλλά προσφέρει μια ολοκληρωμένη και Web 2.0 λύση επικοινωνίας…
  • Το Shopify είναι μια πολύ εύκολη και φθηνή υπηρεσία δημιουργίας e-shop.

Tools

  • Το Styleneat είναι φανταστικό εργαλειάκι για να κρατάτε τα CSS σας νοικοκυρεμένα 😉
  • Το νέο αγαπημένο μου εργαλείο ονομάζεται Texter! Είναι ένας text expander φτιαγμένος από το Lifehacker και θα σας σώσει άπειρες ώρες πληκτρολογήματος (δυστυχώς μόνο για Windows, αν και είμαι σίγουρος πως θα υπάρχει κάτι ανάλογο για Linux και OS X). Θα σας αλλάξει την ζωή, ήδη έχω αρχίσει να το συνηθίζω επικίνδυνα και να μην μπορώ να κάνω χωρίς αυτό…

WordPress

  • Ένα φανταστικό shopping cart για το WordPress, με το όχι και τόσο πρωτότυπο όνομα WP e-Commerce. Πολύ καλή λύση, με πολλά χαρακτηριστικά και εύκολο customization.

Plug ins

  • Ένα ελαφρύ jQuery image gallery plug in, με το περίεργο όνομα Pikachoose
  • Το ImageSwitch είναι άλλο ένα jQuery plug in με πολλές δυνατότητες , το οποίο μπορεί να κάνει τα δύσκολα, εύκολα! Ρίξτε του οπωσδήποτε μια ματιά…
  • Ακόμα ένα ενδιαφέρον plug in για jQuery, το οποίο έχει να κάνει με εμφάνιση tooltips.
  • Το Lightbox clone κάνει απλά και εύκολα αυτό που λέει το όνομα του…
  • Μεταφράστε το site σας σε άλλες γλώσσες εύκολα και γρήγορα, με την βοήθεια του Sunday Morning (υποστηρίζει και ελληνικά)! Προσωπικά δεν μου γέμισε το μάτι, ωστόσο δεν το έψαξα και πολύ…

Blogs

  • To DIY (Do It Yourself) είναι ένα νέο ελληνικό video-cast που ασχολείται με αρτίστικα θεματάκια.  Οι τύποι είναι φοβεροί και μάλιστα προσφέρουν το περιεχόμενο τους κάτω από άδεια Creative Commons. Καλή επιτυχία παιδιά!
  • Μια πολύ αξιόλογη ελληνίδα web designer/developer, η Lea Verou, γράφει πολλά και ενδιαφέροντα στο blog της (στα αγγλικά). Απορώ πως δεν την είχα πάρει χαμπάρι τόσο καιρό…
  • Για τους designers που δεν ξέρουν πως να ξεκινήσουν Javascript, καλό θα ήταν να περάσουν, και γρήγορα μάλιστα, από το Teach Me Javascript. To blog ξεκινάει από τα πάρα πολύ βασικά και υποθέτω πως σιγά-σιγά θα εμβαθύνει. Το καλό είναι πως δεν χρειάζεται να έχεις ιδέα από Javascript ή άλλη γλώσσα προγραμματισμού, γιατί πολύ απλά ξεκινάει από τα πάρα πολύ βασικά και εξηγεί πως λειτουργεί (και γιατί) η συγκεκριμένη γλώσσα. Εγώ πάντως θα ρίχνω μια ματιά για επανάληψη 😉
  • Άλλο ένα ελληνικό blog με θέμα το SEO και τίτλο Seotalk.gr. Προστέθηκε και αυτό στον reader μου…

Δωρεάν / Freebies

  • Το NVDA (NonVisual Desktop Access) είναι ένας δωρεάν και open source screen reader (μόνο για Windows OS προς το παρόν). Υποστηρίζει 20 γλώσσες (δεν είδα κάπου τα ελληνικά), είναι συμβατός με Firefox και υποστηρίζει και το πρότυπο  WAI-RIA.

Διάφορα links

  • Και τέλος το καλύτερο online πρωταπριλιάτικο ψέμα/αστείο. Save Internet Explorer 6! 865 άνθρωποι από όλη την γη έχουν υπογράψει ήδη την αίτηση διαμαρτυρίας. Εσείς?

Γρήγορο development : 5 συμβουλές για γρήγορα αποτελέσματα

Πολλοί δεν έχουν πίστη στο λαϊκό ρητό “το γοργό και χάριν έχει”, ωστόσο είναι πάρα πολλές οι φορές που απλά πρέπει να βγει κάτι στον αέρα γρήγορα! Οι πιο σκληροπυρηνικοί developers, ανήκα και εγώ κάποτε σε αυτήν την κατηγορία, θέλουν να ξεκινάνε τα πάντα από το μηδέν έτσι ώστε να ελέγχουν πλήρως τον κώδικα και γενικότερα να φτιάχνουν τα πάντα με τα χεράκια τους. Όπως καταλαβαίνεται, αυτές οι εποχές έχουν περάσει πλέον, και γενικότερα δεν εξυπηρετεί σε τίποτα να προσπαθείς να ξανά-ανακαλύψεις τον τροχό, όταν το έχει κάνει ήδη κάποιος άλλος… Παρακάτω δίνω 5 συμβουλές που πιστεύω πως εάν ακολουθηθούν, θα έχετε σε πολύ γρήγορο χρονικό διάστημα φοβερές βελτιώσεις στους development χρόνους σας, και θα σώσετε αρκετό χρόνο από κάθε σας project (και θεωρητικά θα έχετε περισσότερο χρόνο για την οικογένεια σας και τους φίλους σας, κάτι που φυσικά δεν ισχύει γιατί τα projects δεν σταματάνε ποτέ!). Έχουμε και λέμε λοιπόν :

1. Χρησιμοποιήστε frameworks και libraries

Η πιο απλή και χρήσιμη συμβουλή. Μην ξανά-ανακαλύπτετε τον τροχό όπως έγραψα και παραπάνω, το έχουν ήδη κάνει άλλοι για εσάς, εκμεταλλευθείτε το! Σε όλες τις server-side τεχνολογίες υπάρχουν frameworks που σας βοηθάνε να γράψετε ποιοτικότερο κώδικά πολύ πιο γρήγορα, πολύ πιο εύκολα και μάλιστα επαναχρησιμοποιήσιμο (σε αρκετές περιπτώσεις τουλάχιστον). Στις web εφαρμογές το pattern που έχει επικρατήσει πλέον, είναι το MVC (Model-View-Controller), και όλες οι server-side τεχνολογίες έχουν αναπτύξει πολλά και διάφορα frameworks γύρω από αυτό. Έτσι από την Ruby με το Rails ως και την PHP με το CakePHP, το αγαπημένο μου (αν και έχω καιρό να ασχοληθώ) CodeIgniter ή το πολύπλοκο Zend, δεν υπάρχει περίπτωση να μην βρείτε κάποιο framework που να κάνει την δουλειά σας πιο γρήγορα και παραγωγικά. Μέχρι και η Microsoft εισήγαγε MVC δυνατότητες στη ASP.ΝΕΤ, οπότε ποιος ο λόγος να μην εκμεταλλευθείτε το συγκεκριμένο pattern;

Στην client-side μεριά τώρα, αν δεν θέλετε να χρησιμοποιήσετε για διάφορους λόγους CSS frameworks/libraries, θα είσασταν αρκετά περίεργοι (για να μην γράψω κάτι πιο χοντρό), εάν προσπαθούσατε να κάνετε όλα αυτά τα ωραία Javascript animation/εφέ και AJAX κολπάκια χωρίς την χρήση κάποιας library… Και εδώ οι επιλογές είναι πάρα πολλές με σημαντικότερες το jQuery, MooTools, Prototype και YUI, οπότε δοκιμάζετε και κρατάτε αυτήν που σας ταιριάζει και που κάνει  γρηγορότερα την δουλειά!

2. Χρησιμοποιήστε έναν πολύ καλό text editor ή κάποιο IDE

Φυσικά και μπορείτε να κάνετε την δουλειά σας με το Notepad των Windows, το ερώτημα όμως είναι πόσο γρήγορα την κάνετε? Το θέμα text editor ή IDE είναι κάτι καθαρά προσωπικό και ο καθένας έχει τις προτιμήσεις του. Προσωπικά προτιμώ τους text editors μιας και είναι πιο ελαφριοί από τα IDE (επίσης δουλεύω ελάχιστα σε server-side επίπεδο πλέον), ενώ θέλω οπωσδήποτε να υποστηρίζουν και τα παρακάτω χαρακτηριστικά :

  • syntax highlighting
  • auto-fill
  • syntax suggestions

Τα IDE έχουν συνήθως και άλλα πιο εξεζητημένα χαρακτηριστικά, όπως FTP access, διαγνωστικά εργαλεία, εργαλεία για debugging και διάφορα άλλα που αν και χρήσιμα, συνήθως κάνουν αρκετά πιο βαριές τις εφαρμογές, κάτι που δεν μ’ αρέσει. Έτσι προτιμώ να χρησιμοποιώ τον Ε Τext Εditor (μοιάζει με το TextMate), Intype (project που δυστυχώς αργοπεθαίνει) και Notepad ++ από τα διάφορα IDE όπως Εclipse, NetBeans, Aptana Studio και Komodo IDE. Όπως και να έχει δοκιμάστε μερικά από αυτά, βρείτε πιο σας ταιριάζει και γράψτε πιο γρήγορα κώδικα!

3. Reusable code ή free code

Έχετε γράψει κάτι ανάλογο παλιότερα; Τότε απλά προσαρμόστε το στις καινούργιες απαιτήσεις σας και ξανά-χρησιμοποιήστε το! Επίσης, ρίχνετε πάντα μια ματιά σε code snippets που μπορείτε να χρησιμοποιήσετε. Το μόνο που πρέπει να προσέξετε πάρα πολύ σε αυτήν την περίπτωση είναι η άδεια χρήσης τους. Καλό είναι επίσης να δίνετε και credits στους δημιουργούς (έστω και εάν δεν το ζητάνε), αλλά να το αναφέρεται και στους υπόλοιπους εμπλεκόμενους στο project (εάν υπάρχουν).

4. Σωστά debugging tools

Το θέμα debugging είναι και αυτό αρκετά προσωπικό. Σε server-side επίπεδο μπορείτε να το κάνετε είτε μέσω των errors/warnings που παίρνεται κατευθείαν από τον server και την server-side γλώσσα που χρησιμοποιείται, είτε μέσω IDE εργαλείων που ανέφερα και πιο πάνω.

Σε client-side επίπεδο τώρα, απλά πρέπει να έχετε το Firebug! Ειλικρινά δεν μπορώ να καταλάβω πως μερικοί συνάδελφοι δεν το χρησιμοποιούν… Το Web Developer Toolbar είναι και αυτό ένα πολύ αξιόλογο εργαλείο, ωστόσο πιστεύω πως το Firebug κάνει τα πάντα και συμφέρει… Για Internet Explorer τώρα (και μόνο για να λύσετε προβλήματα που έχουν προκύψει στον συγκεκριμένο browser), μπορείτε να χρησιμοποιήσετε την Internet Explorer Toolbar, η οποία όμως δεν θα σας βοηθήσει και πολύ, ωστόσο κάτι είναι και αυτό. Τέλος περιμένω να δω και το Opera Dragonfly, αν και πιστεύω πως πολύ δύσκολα θα καταφέρει να κερδίσει τον συνδυασμό Firefox/Firebug. Δεν είναι άλλωστε τυχαία η επιλογή του συγκεκριμένου συνδιασμού από όλους σχεδόν τους web designers/developers…

5. On-line collaboration

Το θέμα συνεργασίας αλλά και γενικότερα project management, είναι ένα από τα πιο δύσκολα, ιδιαίτερα όταν οι εμπλεκόμενοι βρίσκονται σε διαφορετικές πόλεις, έχουν διαφορετικά time zones κτλ. Φυσικά με το πατροπαράδοτο e-mail μπορείτε να λύσετε τέτοια προβληματάκια, όταν όμως το project είναι μεγάλο και η ομάδα αποτελείτε από πολλά μέλη, τότε η χρήση e-mail πιο πολύ θα καθυστερεί παρά θα βοηθάει την κατάσταση… Αντιθέτως web collaboration εργαλεία, όπως το Basecamp για παράδειγμα, μπορούν να οργανώσουν καλύτερα ένα project σε όλα τα επίπεδα, όπως σε επίπεδο συνεργασίας, to do tasks, project status, ανταλλαγή αρχείων, ενημέρωση των μελών κτλ. Γιατί λοιπόν να σπαταλάτε πολύτιμο χρόνο στο παλιομοδίτικο e-mail; Προσωπικά εκτός από το Basecamp το οποίο χρησιμοποιώ για το CSS3.gr μου αρέσει πολύ και το Google Groups το οποίο χρησιμοποιώ σε μικρότερα projects αλλά πολλές φορές και μόνος μου!

Αυτά τα λίγα από εμένα. Όποιοι έχετε βάλει στόχο να κάνετε γρήγορα κάποια πράγματα ακολουθήστε μερικές από τις παραπάνω συμβουλές, όλο και πιο γρήγοροι θα γίνεται 😉

XHTMLME.com : η ελληνική PSD to XHTML υπηρεσία

Πολύ χαίρομαι όταν αξιόλογοι άνθρωποι του χώρου, και μάλιστα του ελληνικού χώρου, ξεκινάνε νέες φιλόδοξες προσπάθειες. Όχι μόνο μου δίνουν θάρρος, αλλά με κάνουν να αισθάνομαι και καλύτερα, ενώ μου υπενθυμίζουν πως υπάρχουν ακόμα κάποιοι αξιόλογοι άνθρωποι που ξέρουν πραγματικά τι κάνουν (στην ελληνική αγορά παρέχουμε μείνει λίγοι δυστυχώς)! Ο δικός μας Γεράσιμος λοιπόν, ο οποίος συντηρεί εδώ και καιρό και το αγγλικό του blog webtoolkit4.me, ξεκινάει την υπηρεσία  XHTMLME.com. H υπηρεσία είναι μια κλασική PSD to XHTML υπηρεσία, που στηρίζεται στον ποιοτικό κώδικα που προσφέρει σε πολύ καλές και ανταγωνιστικές τιμές. Θα ήθελα να ευχηθώ καλή επιτυχία και καλή συνέχεια στον συνάδελφο Γεράσιμο και κατά πάσα πιθανότητα θα γίνω και πελάτης του, μιας και ετοιμάζω κάτι και εγώ (περισσότερες πληροφορίες σύντομα)…

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

Πολύ λίγα τα links αυτής της εβδομάδας, ωστόσο ρίξτε τους μια ματιά…

  • Το A List Apart γιορτάζει τα 10 χρόνια του! Χρόνια πολλά!
  • To Formy είναι ένα απλό CSS framework για φόρμες. Εάν βαριέστε να βάζετε του ίδιους και ίδιους κανόνες στις φόρμες σας, ρίξτε του μια ματιά, μπορεί να σας σώσει αρκετό χρόνο…
  • Και ένα νέο ελληνικό blog που κέρδισε μια θέση στον RSS reader μου! Ονομάζεται Silverthan και ασχολείται με πολλά ενδιαφέροντα θεματάκια…

CSS frameworks : Αξίζουν ή όχι

Τώρα τελευταία τα CSS frameworks γίνονται όλο και περισσότερο της μόδας, με αρκετούς φανατικούς θαυμαστές αλλά και εξίσου φανατικούς επικριτές. Προσωπικά δεν είμαι και πολύ fun των περισσότερων framework (εξηγώ παρακάτω το γιατί), ωστόσο κατά καιρούς έχω χρησιμοποιήσει και μάλιστα με μεγάλη επιτυχία κάποια από αυτά. Στο παρακάτω αρθράκι λοιπόν, εξηγώ ποια ιδέα κρύβεται πίσω από τα framework, τα πλεονεκτήματα και μειονεκτήματα τους και τέλος ποια ξεχωρίζω και γιατί.

Η ιδέα πίσω από τα CSS frameworks είναι πως σε κάθε site/project που αναλαμβάνουμε, χρησιμοποιούμε πολλά κοινά στοιχεία, όπως για παράδειγμα το κλασικό CSS reset file (πάντα του Eric Meyer), κάποια default styles για τα σημαντικότερα elements (όπως headings, tables, φόρμες κτλ.), κάποια styles μόνο για print, ενώ πολλοί πάνε τα πράγματα ακόμα παραπέρα, χρησιμοποιώντας styles για να καθορίσουν την διάταξη του site (columns και rows), να χρησιμοποιήσουν εφέ στις λίστες/μενού τους, και πολλά άλλα. Η ιδέα λοιπόν που κρύβεται πίσω από ένα framework είναι πολύ απλή. Γιατί να ξαναγράφουμε όλους αυτούς τους κανόνες και κώδικα από την αρχή για κάθε site, όταν μπορούμε να τα γράψουμε μόνο μία φορά και να τα χρησιμοποιούμε ξανά και ξανά σε όλα μας τα project? Με τον παραπάνω τρόπο, θα γλιτώνουμε πολύ κόπο και χρόνο!

Φυσικά τα πράγματα δεν είναι και τόσο ρόδινα όπως ακούγονται. Και εγώ χρησιμοποιώ επαναλαμβανόμενο CSS κώδικα στα site μου, όμως προσπαθώ να αποφεύγω τα έτοιμα CSS frameworks, για τους παρακάτω λόγους :

  • Σε αναγκάζουν να χρησιμοποιείς κάποιο συγκεκριμένο, και πολλές φορές όχι semantic και accessible, στυλ στην markup, τις κλάσεις και τα id σου (πχ. class=”div-xyz”).
  • Συνήθως χρειάζεσαι πολύ λιγότερα πράγματα απ’ ότι σου προσφέρει ένα framework, με αποτέλεσμα να αναγκάζεις τον χρήστη να κατεβάζει άσκοπα κώδικα, που δεν χρησιμοποιεί!
  • Ακόμα και εάν είσαι έμπειρος στην CSS, αρκετά frameworks είναι πολύπλοκα στην εκμάθηση τους. Επίσης εάν δημιουργηθεί κάποιο πρόβλημα/bug είναι πολύ πιο δύσκολο να εντοπίσεις τι φταίει.

Από εκεί και πέρα δέχομαι πως τα CSS frameworks σου προσφέρουν αρκετά πράγματα σχετικά εύκολα και γρήγορα, μιας και δεν κάθεσαι να γράψεις από την αρχή όλους τους CSS κανόνες, ενώ τα περισσότερα υποστηρίζουν αμέσως τους περισσότερους browsers που υπάρχουν. Για όσους θέλουν να ρίξουν μια ματιά σε αυτά, η παρακάτω λίστα αναφέρει όλα τα frameworks που υπάρχουν διαθέσιμα αυτήν την στιγμή (αναφέρομαι στα γνωστά και αυτά που μπορεί να χρησιμοποιήσει κάποιος εδώ και τώρα, και όχι σε αυτά που είναι υπό development ή που βρίσκονται σε beta στάδιο).

Όπως ανέφερα και παραπάνω λοιπόν, έχω δοκιμάσει τα περισσότερα από αυτά, και λογικό είναι να έχω ξεχωρίσει κάποια από αυτά. Γενικότερα, απορρίπτω αμέσως 2 κατηγορίες framework. Αυτά που είναι πολύ μεγάλα σε μέγεθος και κώδικα, με αποτέλεσμα να αναγκάζουν τον χρήστη να περιμένει να φορτωθούν χίλια-δυο άχρηστα πράγματα, και σε αυτά που σε αναγκάζουν να χρησιμοποιείς non-semantic markup, κλάσεις και ids στον κώδικα σου. Με το παραπάνω σκεπτικό λοιπόν, έχω απορρίψει πολλά διάσημα frameworks, όπως YUI Grids CSS, 960, YAML, και πολλά άλλα, ενώ αντιθέτως έχω χρησιμοποιήσει αρκετές φορές το Boilerplate το οποίο δεν αντιμετωπίζει τα παραπάνω προβλήματα, ενώ το σκεπτικό του βασίζεται στην απλότητα τόσο του κώδικα του, όσο και της λειτουργίας του.

To Boilerplate λοιπόν είναι ένα πολύ απλό framework, το οποίο δεν περιέχει περίεργες κλάσεις και ids, αλλά προσφέρει μια πολύ ολοκληρωμένη βάση για τον CSS κώδικα σας. Έτσι κάθε φορά που το χρησιμοποιήτε σε κάποιο project, έχετε τον βασικό CSS κορμό έτοιμο, όπως για παράδειγμα ένα reset file, default styles για όλα τα elements (headings, παραγράφους, λίστες, κτλ.), ένα βασικό print-only style και κάποιες πάρα πολύ βασικές κλάσεις. Το δεύτερο χαρακτηριστικό που μου αρέσει στο συγκεκριμένο framework, είναι πως έχει χωρισμένα τα CSS αρχεία με έξυπνο τρόπο, όπως για παράδειγμα ένα αρχείο για την τυπογραφία (typography.css), άλλο για τις φόρμες (forms.css), άλλο για το UI της οθόνης (screen.css) κτλ., οργανώνοντας έτσι προκαταβολικά τον κώδικα σας! Από εκεί και πέρα, ότι extra θέλετε, το γράφεται μόνοι σας! Προσωπικά με έχει κερδίσει αυτή η μινιμαλιστική προσέγγιση που έχει, γιατί μέσα σε πολύ λίγη ώρα μπορώ να στίσω τον βασικό κορμό CSS ενός project, ενώ ταυτόχρονα για οτιδήποτε θέλω να προσθέσω ή να αλλάξω, γίνεται πολύ εύκολα και γρήγορα λόγο της έξυπνης κατηγοριοποίησης και ονοματολογίας των αρχείων του.

Αυτά τα λίγα λοιπόν για τα CSS Frameworks. Γενικότερα δοκιμάστε όσα περισσότερα γίνεται (όπως βλέπεται είναι πάρα πολλά) και προσπαθείστε να βρείτε αυτό που σας ταιριάζει! Εάν ξέχασα κάποιο framework που χρησιμοποιείτε ή που νομίζεται πως αξήζει να αναφερθεί, αφήστε μου ένα σχόλιο, για το κοιτάξω κι αυτό…

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 και κάνει με πολύ λιγότερο κόπο αυτό που δημιουργήσαμε παραπάνω ()…

Στρογγυλές γωνίες (rounded corners) χρησιμοποιώντας μόνο CSS και 1 γραφικό

Από καιρό ήθελα να γράψω ένα tutorial με θέμα τις στρογγυλές γωνίες (rounded corners) και την HTML/CSS που κρύβεται πίσω από ένα τέτοιο εγχείρημα, όμως πάντα κάτι τύχαινε και δεν το έγραφα. Σήμερα λοιπόν έχετε την ευκαιρία να διαβάσετε ένα πολύ ενδιαφέρον tutorial πάνω στο θέμα, στο οποίο χρησιμοποιώ και πολλές άλλες ενδιαφέρουσες τεχνικές σε CSS κυρίως επίπεδο.

Ας αρχίσουμε λοιπόν φτιάχνοντας ένα div (division) το οποίο θα περιέχει το κείμενο μας (του δίνω και μία κλάση/class έτσι ώστε να ξεχωρίσει από τα υπόλοιπα), και εφαρμόζω κάποια βασικά styles έτσι ώστε να φαίνεται καλύτερα.


Κείμενο...

* {
margin: 0;
padding: 0;
}

body {
padding: 20px;
}

div.rounded {
margin-bottom: 10px;
padding: 10px;
background: #999;
}

Αναγκαίο κακό εάν θέλουμε στρογγυλές γωνίες στο web, είναι η extra non-semantic markup (ούτε και εμένα μ αρέσει, αλλά δεν γίνεται αλλιώς), οπότε βάζουμε αναγκαστικά άλλα 4 span elements μέσα στο div μας, ένα για κάθε γωνία.

  Κείμενο...  

Και τώρα μπορούν να αρχίσουν τα ωραία ;-). Το γραφικό που χρησιμοποιώ είναι ένας κύκλος με διάμετρο 20px (width και height). Αυτό που θέλω να πετύχω είναι όλα τα span elements, να δείχνουν αυτόν τον κύκλο, αλλά διαφορετικό κομμάτι του κάθε φορά! Ας γράψουμε λοιπόν τους γενικούς κανόνες για τα span elements, αφού προσθέσουμε άλλον έναν σημαντικό κανόνα για το positioning στο div μας. (Το γραφικό που χρησιμοποιώ μπορείτε να το κατεβάσετε από εδώ circle )


div.rounded {
margin-bottom: 10px;
padding: 10px;
background: #999;
position: relative;
}

div.rounded span {
width: 10px;
height: 10px;
background-image: url(circle.gif);
background-repeat: no-repeat;
position: absolute;
}

Με τον κανόνα που πρόσθεσα στο div (position: relative;) θα μπορέσω στην συνέχεια να τοποθετήσω τα span elements ακριβώς εκεί που θέλω με absolute positioning. Τα span προς το παρόν, απλά δείχνουν πάντα την πάνω αριστερή μεριά του κύκλου. Μην ξεχνάτε πως τα span είναι 10px (ύψος-πλάτος) ενώ οι διαστάσεις του γραφικού είναι 20px! Επίσης ρυθμίζω να μην επαναλαμβάνεται το γραφικό στο background, αν και ο συγκεκριμένος κανόνας δεν χρειάζεται, τον έχω προσθέσει για σιγουριά.

Τέλος απλά τοποθετούμε το κάθε span στην σωστή γωνία με absolute positioning (το tl πάνω αριστερά – top left, το tr πάνω δεξιά – top right, κοκ.). Αυτό γίνεται πολύ εύκολα με τους positioning κανόνες top, left, right και bottom και τις ανάλογες τιμές τους (0 στο παράδειγμα μας, μιας και θέλουμε να βρίσκονται ακριβώς στις γωνίες του div). Είναι σχεδόν έτοιμο, το μόνο που πρέπει να κάνουμε τώρα είναι να παρουσιάζουμε το σωστό κομμάτι του κύκλου/γραφικού μας στο κάθε span. Αυτό γίνεται με background-positioning στο καθένα από τα span μας!


span.tl {
top: 0; left: 0;
background-position: top left;
}

span.tr {
top: 0; right: 0;
background-position: top right;
}

span.bl {
bottom: 0; left: 0;
background-position: bottom left;
}

span.br {
bottom: 0; right: 0;
background-position: bottom right;
}

Για όσους δεν έπιασαν το τελευταίο κομμάτι (μιας και οι προηγούμενοι κανόνες είναι πιο ξεκάθαροι) θα τους πρότεινα να βάλουν και τον παρακάτω κανόνα στον κώδικα τους και να παρατηρήσουν τις γωνίες τους! Όπως βλέπεται, το γραφικό που έχουν είναι πάντα το ίδιο, απλά το span με κλάση/class tl (top left), εμφανίζει την πάνω αριστερή μεριά του κύκλου, μιας και το span δείχνει μόνο 10px σε ύψος και πλάτος από τα 20px που έχει συνολικά το image μας. Έτσι εμφανίζουμε μόνο την μεριά του κύκλου που θέλουμε σε κάθε γωνία μας.


div.rounded span {
border: 1px solid red;
}

Τέλος για τους λάτρεις του jQuery αλλά και της καθαρής markup, στο παράδειγμα που έχω ανεβάσει, έχω φτιάξει άλλο ένα div, στο οποίο έχω προσθέσει μέσω DOM την απαραίτητα markup του παραπάνω παραδείγματος. Έτσι προσθέτοντας μία μόνο γραμμή Javascipt (και το jQuery φυσικά), μπορούμε να απολαύσουμε την πεντακάθαρη markup έχοντας το ίδιο φυσικά αποτέλεσμα! Δείτε τον παρακάτω κώδικα (ή το για όσους βαριούνται να πληκτρολογούν το δεύτερο div, απλά δείτε το δεύτερο div του παραδείγματος) και θα καταλάβετε τι εννοώ.

Κείμενο...

$(document).ready(function(){
$('.jquery').prepend('').append('');
});

Το μόνο πρόβλημα σε αυτήν την περίπτωση είναι πως εάν ο χρήστης δεν έχει ενεργοποιημένη την Javascript, δεν θα δει στρογγυλές τις γωνίες του div, μιας και αυτές “εισχωρούν” στο DOM μέσω Javascript. Το τελικό αποτέλεσμα μπορείτε να το δείτε αλλά και να το κατεβάσετε (σε zip format).

Η συγκεκριμένη τεχνική δουλεύει σε όλους τους μοντέρνους browsers, αλλά όχι στον IE6 (ο οποίος δεν είναι μοντέρνος, απλά πολλοί χρήστες τον χρησιμοποιούν ακόμα)! Εάν λοιπόν δεν σας ενδιαφέρει ο συγκεκριμένος browser (εδώ δεν ενδιαφέρει την 37signals) μπορείτε να χρησιμοποιήσετε την συγκεκριμένη τεχνική αμέσως! Εάν πάλι σας ενδιαφέρει και ο IE6 καλό θα είναι να δοκιμάσετε κάποια ανάλογη τεχνική με floats και 4 images (δυστυχώς)… Περιμένω σχόλια και προτάσεις για tutorials (yes, I’m on fire!!! 😉 )…

Accessibility test σε 10′ λεπτά

Είναι άπειρες οι φορές όπου φίλοι, γνωστοί ή ακόμα και άγνωστοι ζητάνε την γνώμη μου για το πόσο προσβάσιμο (accessible) είναι site τους. Οι περισσότεροι έχουν την αίσθηση πως εμείς (οι web designers/developers) είμαστε μάγοι ή έχουμε πολύ εξειδικευμένο εξοπλισμό και software για να κάνουμε κάτι τέτοιο. Στην πραγματικότητα το μόνο που χρειάζεται κάποιος, είναι ένας σύγχρονος browser (κατά προτίμηση Firefox με το web developer toolbar) και κάποιες εναλλακτικές ρυθμίσεις, έτσι ώστε να εντοπίσει γρήγορα τα διάφορα accessibility προβλήματα που πιθανόν να υπάρχουν. Στο παρακάτω post λοιπόν περιγράφω πολύ συνοπτικά πως μπορεί κάποιος, να κάνει ένα αξιόλογο web accessibility τεστ μέσα σε 10 μόλις λεπτά (όχι δεν σας κοροϊδεύω!). Για να μπορεί το post να διαβαστεί από όλους (και όχι μόνο από ειδικούς του χώρου), θα παρακάμψω την πολύ θεωρία πίσω από κάθε test, και θα εστιάσω την προσοχή στα παραδείγματα. Έχουμε και λέμε λοιπόν :

Απενεργοποιήστε τα images και δείτε πως φαίνεται το site σας χωρίς αυτά

Προσπαθείστε το site σας να δείχνει αξιοπρεπέστατο ακόμα και εάν δεν έχουν φορτωθεί τα γραφικά του (είτε γιατί ο χρήστης τα έχει απενεργοποιήσει, είτε επειδή κάποιο πρόβλημα στον server δεν τα αφήνει να κατέβουν, είτε επειδή ο χρήστης δεν έχει καλό bandwidth, κτλ.). Όποιος και να είναι ο λόγος το site σας θα πρέπει να δείχνει σωστά και χωρίς γραφικά. Απλό και κατανοητό νομίζω, και για τον λόγο αυτό δεν θα μακρηγορήσω περισσότερο, αλλά θα περάσω κατευθείαν σε 2 παραδείγματα.

Στο παρακάτω παράδειγμα λοιπόν, το blog του Γιάννη δεν “αλλοιώνεται” ούτε “χαλάει” όταν του απενεργοποιήσουμε τα images. Επίσης χρησιμοποιεί σωστά το alternative text περιγράφοντας τα γραφικά που δεν εμφανίζονται…

Porcupine blog - images on

Porcupine blog - images off

Αντιθέτως, το site Avopolis, δείχνει αρκετά άσχημο όταν απενεργοποιούμε τα images. Το χειρότερο από όλα είναι πως το κεντρικό μενού του site εξαφανίζετε, μιας και είναι όλο φτιαγμένο σε ένα image map!

Avopolis site - images on

Avopolis site - images off

Απενεργοποιείστε την Javascript

Ο κανόνας που ισχύει είναι αρκετά απλός : Δεν πρέπει να θεωρούμε πως ο χρήστης του site μας έχει την Javascript ενεργοποιημένη!

Στο blog το οποίο βρίσκεστε εάν απενεργοποιείστε την Javascript (η οποία χρησιμοποιείτε στην sidabar για τα διάφορα AJAX-like εφεδάκια), δεν θα χάσετε τίποτα από το περιεχόμενο του blog! Η τεχνική αυτή ονομάζεται Progressive enhancement, και το σκεπτικό πίσω από την τεχνική, είναι πως το site πρέπει να γίνεται σταδιακά πιο δυναμικό (interactive). Έτσι πρέπει πρώτα να έχουμε ένα καθαρό, σωστά δομημένο και σημασιολογικό (semantic) document (ή αλλιώς markup), μετά να τo εμπλουτίζουμε και να το παρουσιάσουμε κατάλληλα με τους ανάλογους styling κανόνες (CSS) και τέλος ότι extra interactivity θα θέλαμε να υπάρχει να κατασκευαστεί με σωστή χρήση της Javascript.

Tsevdos.com - Javascript on

Tsevdos.com - Javascript off

Αντίθετα στο site του Pop+Rock εάν δεν έχετε την Javascript ενεργοποιήμένη δεν δουλεύει το κεντρικό μενού του site! Το συγκεκριμένο λάθος προκαλεί και πολλά SEO προβλήματα που έχω αναφέρει σε παλιότερο post (Ποτέ μην χρησιμοποιείτε μενού φτιαγμένα από Flash ή Javascript).

Pop+Rock - Javascript on

Pop+Rock - Javascript off

Απενεργοποιείστε την CSS

Με αυτόν τον τρόπο θα καταλάβενετε πως φαίνεται πραγματικά το document σας, τόσο στους text-only browsers και στους screen readers, όσο και στα bots των μηχανών αναζήτησης! H παρακάτω εικόνα παρουσιάζει το blog μου, χωρίς καθόλου styles. Όπως παρατηρείτε, το document δεν έχει χάσει απολύτως τίποτα ούτε σε περιεχόμενο ούτε σε δομή, ενώ συνεχίζει να είναι προσβάσιμο σε όλους! Το μόνο που έχει χάσει είναι τα styles του, τα οποία του δίνουν την τελική μορφή του…

Tsevdos.com - CSS off

Αυξήστε το text-size από τον browser σας

Απλό αλλά σημαντικό τεστ. Απλά αυξήστε το text-size στον browser σας τουλάχιστον δύο φορές (πατώντας Ctrl + +). Εάν το site δεν αλλοιώνεται πολύ και γενικότερα το αποτέλεσμα είναι ικανοποιητικό τότε δεν υπάρχει κανένα πρόβλημα. Εάν το site παραμορφώνεται αρκετά, χάνεται κείμενο πίσω από άλλα elements, κτλ., τότε θα πρέπει να ξανασκεφτούμε κάποιες αποφάσεις που πήραμε κατά την δημιουργία του design μας…

Κάντε validate τον κώδικα σας

Σαν τελικό τεστ, και γενικότερα όποτε τελειώνετε κάποιο site ή template, όσο μεγάλο ή μικρό και να είναι, κάντε μια επίσκεψη στους (X)HTML και CSS validators, και διορθώστε τα προβλήματα που μπορεί να εμφανιστούν κατά το validation… Όσο πιο γρήγορα αποφασίσετε να το κάνετε, τόσο πιο εύκολα και γρήγορα θα επιλύσετε αυτά τα προβλήματα! Και μην ξεχνάτε, valid κώδικας σημαίνει πιο σταθερά και ποιοτικά site, τα οποία θα αντέχουν στον χρόνο!

Η παραπάνω διαδικασία θα σας βοηθήσει να εντοπίσετε πάρα πολύ γρήγορα σχεδόν όλα accessibility προβλήματα που μπορεί να έχει το site σας! Καθόλου άσχημα δηλαδή για τα μόλις 10 λεπτά χρόνου που θα ξοδέψετε! Από εκεί και πέρα μένει να επιλύσετε τα προβλήματα που εντοπίσατε, όπου φυσικά είναι και το δύσκολο αλλά απαραίτητο βήμα έτσι ώστε να κάνετε προσβάσιμο (accessible) το site σας. Ελπίζω τα παραδείγματα οπού ανέφερα να ήταν σαφή και κατανοητά, μιας και ο ελληνικός κυβερνοχώρος χρειάζεται αρκετή δουλειά ακόμα στο θέμα accessibility… Μείνετε συντονισμένοι λοιπόν για να κάνουμε το internet μια πιο σταθερή και λειτουργική πλατφόρμα!

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