Front-end development: Libraries, frameworks και άλλα εργαλεία

H εποχή που με έναν απλό και ταπεινό text editor ξεκινάγαμε να γράφουμε από την αρχή τα πάντα έχει τελειώσει εδώ και πολύ καιρό. Πλέον για την δημιουργία ακόμα και του πιο απλού HTML template είναι σχεδόν υποχρεωτικό να χρησιμοποιήσουμε τουλάχιστον ένα CSS-reset καθώς και αρκετά javascript files, έτσι ώστε να προσθέσουμε συμβατότητα σε παλιότερους browsers, να ελέγξουμε τι υποστηρίζει ο κάθε browser κτλ κτλ. Παρακάτω περιγράφω τι διαδικασία, και φυσικά τα εργαλεία, libraries, scripts και snippets που χρησιμοποιώ σχεδόν σε κάθε νέο project, από το πιο μικρό μέχρι το πιο μεγάλο…

Markup

Ίσως το πιο εύκολο κομμάτι του puzzle. Μέχρι και πέρσι, συνήθως χρησιμοποιούσα ένα δικό μου template (βασισμένο σε Strict XHTML), ωστόσο μιας και προσπαθώ να το γυρίσω σε HTML5, πιάνω τον εαυτό μου να χρησιμοποιεί όλο και πιο συχνά το HTML5 boilerplate του Paul Irish. Το μόνο κακό που του βρίσκω είναι πως δεν μου φαίνεται και τόσο “boilerplate”, και συνήθως μου παίρνει αρκετή ώρα στο να διαγράφω αρχεία και κώδικα έτσι ώστε να το φέρω στα μέτρα μου. Σιγά-σιγά θέλω να φτιάξω και την δική μου λύση, ωστόσο μέχρι τότε το HTML5 boilerplate κάνει μια χαρά την δουλειά του.

CSS

Το πρώτο πράγμα που χρειάζομαι είναι ένα καλό CSS-reset. Αν η markup μου είναι HTML5, χρησιμοποιώ το HTML5 reset του HTML5 Doctor, αν όχι χρησιμοποιώ το παλιό καλό HTML reset του Eric Meyer . Πολλές φορές αν το project “βιάζεται”, χρησιμοποιώ και σαν βάση την τυπογραφία κάποιου έτοιμου CSS framework, συνήθως του Blueprint ή του HTML5 boilerplate. Τέλος, αν το project βιάζεται απελπιστικά ή θέλω κάποιο γρήγορο prototype εδώ και τώρα, χρησιμοποιώ και το grid system του Blueprint (είναι και το μόνο που έχω μάθει!). Τέλος, συνήθως περνάω και τα media queries του Andy Clarke αλλά και ένα print-only style που περιέχει όλη την βασική τυπογραφία για εκτύπωση, για να υπάρχουν (αργά ή γρήγορα θα χρειαστούν)…

Javascript

Και εφόσον κλείσαμε από markup και CSS το μόνο που μας μένει είναι η Javascript μας. Εάν το project έχει HTML5 markup, το html5shiv είναι το πρώτο “must” script που πρέπει να φορτώσουμε. Από εκεί και πέρα συνήθως περνάω το modernizr και το jQuery γιατί όλο και κάπου θα χρειαστούν. Τώρα τελευταία μου αρέσει πολύ σαν ιδέα και το selectivizr μιας και σε βοηθάει πολύ στο να κρατάς την markup σου ακόμα πιο καθαρή, ωστόσο μπορώ να ζήσω και χωρίς αυτό. Τέλος, υπάρχει πιθανότητα (πάντα ανάλογα το project και εάν ο πελάτης είναι περίεργος/φανατικός χρήστης IE) να χρησιμοποιήσω και το Respond.js, έτσι ώστε τα media queries να παίζουν και σε IE 6-7-8…

Αυτά τα λίγα σχετικά με το front-end κομμάτι των site. Όπως καταλαβαίνεται, ακόμα και μικρά projects μπορεί να θέλουν όλα τα παραπάνω και ακόμα περισσότερα για να στηθούν και να λειτουργήσουν όπως πρέπει. Τέλος αν κάποιος χρησιμοποιεί φανατικά κάποιο εργαλείο/library που δεν αναφέρω παραπάνω, ας αφήσει ένα σχόλιο έτσι ώστε το τεστάρουμε και εμείς…

Γράψτε HTML5 χρησιμοποιώντας XHTML…

Πολλοί είναι αυτοί που παραπονιούνται πως ενώ θέλουν να χρησιμοποιήσουν την καινούργια markup (HTML5), και όλα τα ωραία semantics που περιέχει, δυστυχώς είναι ακόμα κάπως νωρίς για μια τέτοια αλλαγή, ιδιαίτερα σε μεγάλα sites. Ευτυχώς για όλους εμάς όμως, κάποιοι άνθρωποι είναι ιδιαίτερα δημιουργικοί και βρήκαν μια πολύ εύκολη και πρακτική λύση. Χρησιμοποιώντας απλά την υπάρχον XHTML μαζί με κάποιες συγκεκριμένες και προκαθορισμένες κλάσεις, μπορούμε να προσφέρουμε τα semantics της HTML5 στην (X)HTML μας. Το μόνο που χρειάζεται να κάνετε, είναι να προσθέσετε στα elements σας κάποιες κλάσεις όπως article, section, header κτλ.

Ακολουθώντας τους παραπάνω κανόνες λοιπόν, αν και συνεχίζουμε να γράφουμε την παλιά, καλή και δοκιμασμένη XHTML, κερδίζουμε δύο πράγματα: Πρώτον μαθαίνουμε να σκεφτόμαστε και να χρησιμοποιούμε την HTML5, η οποία έχει αρκετές διαφορές και ιδιαιτερότητες από την (X)HTML. Τέλος, το δεύτερο και πιο σημαντικό είναι πως το site μας θα είναι κατά 99% έτοιμο (σε markup επίπεδο τουλάχιστον) όταν αποφασίσουμε να το αναβαθμίσουμε σε πραγματική HTML5. Το μόνο που θα χρειαστεί να κάνουμε, είναι να αντικαταστήσουμε τα παλιομοδίτικα divs με τα καινούργια πιο semantic elements.

Προσωπικά θα προσπαθήσω να εισάγω αυτό τον τρόπο συγγραφής markup σε καινούργια projects, μιας και μόνο κερδισμένος μπορώ να βγω από αυτήν την διαδικασία. Όσοι ενδιαφέρεστε και θέλετε να ξεκινήσετε, ρίξτε μια ματιά στα παραπάνω links τα οποία περιέχουν τις πιο τεχνικές λεπτομέρειες.

Εύκολα στην υλοποίηση accessibility tips : Χρησιμοποιήστε (σωστά) labels στις φόρμες σας.

Ένα πανεύκολο και πολύ απλό στην υλοποίηση accessibility tip που δυστυχώς δεν το συντάω συχνά σε ελληνικά site. Τα πράγματα είναι εξαιρετικά απλά σε αυτό το θέμα. Ο μοναδικός σκοπός του label (ετικέτα) element είναι να “συνδέεται” και να περιγράφει όσο καλύτερα μπορεί ένα και μοναδικό form control, όπως για παράδειγμα checkbox, radio button, text input κτλ. (εκτός από τα buttons φυσικά). Αντιθέτως, κάθε form control μπορεί “συνδεθεί” με πολλά label elements, έτσι ώστε να παρουσιάσει μηνύματα βοήθειας, λάθους κτλ. Οι δύο παρακάτω τρόποι κάνουν σωστή χρήση του label element. Προσωπικά προτιμώ τον πρώτο γιατί σου αφήνει περισσότερα περιθώρια ελευθερίας τόσο σε markup όσο και σε styling επίπεδο…

<label for="name">Όνομα:</label>
<input id="name" name="name" type="text" />

<label>Όνομα:
<input id="name" name="name" type="text" />
</label>

Τα accessibility οφέλη που παίρνουμε είναι πως τα παραπάνω labels ενεργοποιούν κατευθείαν τα controls που περιγράφουν, κάτι πολύ σημαντικό για την ευκολότερη συμπλήρωση φορμών. Πολλά controls είναι μικρά, δυσδιάκριτα και δύσκολα στο να επιλεχθούν (ειδικά τα radio buttons), οπότε επιλέγοντας το κείμενο της ετικέτας μας (label) επιλέγουμε αυτόματα και το ανάλογο control. Τέλος ας μην ξεχνάμε πως βοηθάμε πολύ και τους χρήστες text browser και screen readers…

Εύκολα στην υλοποίηση accessibility tips : Χρησιμοποιήστε option groups στις φόρμες σας.

Ένα πανεύκολο tip που θα ωφελήσει όλες τις κατηγορίες χρηστών σας και θα κάνει τις φόρμες σας ομορφότερες αλλά και ευκολότερες στο να συμπληρωθούν. Εάν λοιπόν έχετε κάποιο select element  με πολλά option elements, καλό θα ήταν να τα κατηγοριοποιήσετε χρησιμοποιώντας τα option groups.

Η χρήση τους είναι εξαιρετικά απλή, απλά ονομάζεται το group δίνοντας του ένα όνομα (label) και στην συνέχεια του προσθέτεται τα option elements που θέλετε. Ρίξτε μια ματιά παρακάτω και προσπαθήστε να το χρησιμοποιήσετε την επόμενη φορά που θα έχετε μια λίστα με πολλές επιλογές…

<label for="bestepisode">Διάλεξε το καλύτερο επεισόδιο τριλογίας!</label>
<select name="bestepisode" id="bestepisode">
<optgroup label="Star Wars">
<option value="starwars4">The Star Wars</option>
<option value="starwars5">The Empire Strikes Back</option>
<option value="starwars6">Return of the Jedi</option>
</optgroup>
<optgroup label="Indiana Jones">
<option value="ij1">Raiders of the Lost Ark</option>
<option value="ij2">The Temple of Doom</option>
<option value="ij3">The Last Crusade</option>
</optgroup>
<optgroup label="Matrix">
<option value="matrix1">The Matrix</option>
<option value="matrix2">The Matrix Reloaded</option>
<option value="matrix3">The Matrix Revolutions</option>
</optgroup>
</select>

Εύκολα στην υλοποίηση accessibility tips : Οδηγείστε τους χρήστες screen readers / text browsers κατευθείαν στο περιεχόμενο ή όπου αλλού θέλετε.

Ένα πανεύκολο στην υλοποίηση accessibility feature, που θα βοηθήσει αφάνταστα τους screen readers και τους χρήστες που χρησιμοποιούν text-browsers. Το μόνο που πρέπει να κάνετε είναι στην αρχή κάθε document, να προσθέσετε τα links που θα οδηγούν τον χρήστη κατευθείαν στο σημείο που έχετε ορίσει. Έτσι για παράδειγμα, σε αυτό το site, το πρώτο πράγμα που “εμφανίζεται” στην markup μου είναι μια λίστα με αυτά τα links (μέσα σε ένα div).

<div id="accessibilitylinks">
<ul>
<li><a title="Go to content" href="#content">Skip to content</a></li>
<li><a title="Go to main navigation" href="#navigation">Skip to main navigation</a></li>
<li><a title="Go to Search form" href="#search">Skip to Search form</a></li>
</ul>
</div>

Με τον παραπάνω κώδικα, οι χρήστες screen reader μπορούν πολύ εύκολα – στην κυριολεξία με ένα κλικ – να μετακινηθούν στο περιεχόμενο της σελίδας μου, στο navigation ή στην search form. Φυσικά μπορούμε να εφαρμόσουμε και όλους τους γνωστούς styling κανόνες στην λίστα έτσι ώστε να την διαμορφώσουμε όπως θέλουμε. Καλό θα είναι εάν θέλουμε να την κρύψουμε, να μην χρησιμοποιήσουμε τον κανόνα display:none αλλά να την κρύψουμε με κάποιο άλλο τρόπο (πχ. absolute position), και αυτό γιατί πολλοί screen readers/text browsers δεν διαβάζουν τα elements με display:none. Για παράδειγμα, εγώ κρύβω την συγκεκριμένη λίστα links με τον παρακάτω κώδικα:

#accessibilitylinks {
position:absolute;
top:-1000px;
}

Είναι πραγματικά το πιο εύκολο αλλά και πρακτικό usability χαρακτηριστικό που μπορείτε να έχετε στην σελίδα σας!

Εύκολα στην υλοποίηση accessibility tips : Extra navigation για text browsers / screen readers (και όχι μόνο)

Η αλήθεια είναι πως όσο καλός και ενημερωμένος να είσαι στο χώρο του web, πάντα υπάρχει κάτι καινούργιο να μάθεις. Επειδή λοιπόν και εγώ πρόσφατα (πριν από έναν χρόνο για την ακρίβεια, αλλά ας μείνουμε στο πρόσφατα), ανακάλυψα μερικά ενδιαφέροντα και πολύ εύκολα στην υλοποίηση accessibility tips, θα τα παρουσιάσω σε αυτή την μίνι σειρά post.

Οι περισσότεροι γνωρίζετε το link element που βάζουμε στο head κομμάτι του κώδικα μας, και δηλώνει πως το εν λόγω document έχει κάποια σχέση (relationship – rel) με κάποιο άλλο document ή πηγή. Ο πιο κλασικός τρόπος χρήσης του είναι η εισαγωγή κάποιου εξωτερικού stylesheet (CSS), όπως για παράδειγμα :

<link rel="stylesheet" href="default.css" type="text/css" media="screen" />

Αυτό που δεν γνωρίζουν οι περισσότεροι, είναι πως με το εν λόγω element μπορούμε να προσφέρουμε επιπλέον navigation χαρακτηριστικά στους χρήστες screen readers, text browsers αλλά και σε κάποιους κανονικούς browsers (όπως Opera) οι οποίοι αρχίζουν να υποστηρίζουν και αυτήν την ιδιότητα του link element. Μερικά παραδείγματα και τρόπους χρήσης του μπορείτε να δείτε παρακάτω :

<link rel="home" title="Home" href="http://www.tsevdos.com/" />
<link rel="prev" title="Title of previous page" href="http://www.tsevdos.com/</code><code>previous-page" />
<link rel="next" title="Title of next page" href="http://www.tsevdos.com/</code><code>next-page" />

Όπως βλέπεται η χρήση του είναι πανεύκολη και τα πλεονεκτήματα αρκετά, έτσι ώστε να το χρησιμοποιήσουμε.

Τέλος το συγκεκριμένο tag μπορεί να χρησιμοποιηθεί και για άλλους σκοπούς, όπως για παράδειγμα στο να ενημερώσει τις μηχανές αναζήτησης εάν το περιεχόμενο της σελίδας μας υπάρχει και σε άλλες γλώσσες ή σε άλλη μορφή. Παρακάτω μπορείτε να βρείτε τα ανάλογα παραδείγματα, ωστόσο δεν θα σταθώ πολύ σε αυτά μιας και θέλω στο συγκεκριμένο post να συγκεντρωθώ κυρίως στο θέμα προσβασημότητας/accessibility. Όπως και να έχει ρίξτε οπωσδήποτε μια πιο λεπτομερή ματιά στο link element και δεν θα χάσετε.

<link lang="fr" title="La documentation en Fran&ccedil;ais" type="text/html" rel="alternate" hreflang="fr" href="http://someplace.com/manual/french.html">
<link media="print" title="The manual in postscript" type="application/postscript" rel="alternate" href="http://someplace.com/manual/postscript.ps">
<link rel="Start" title="The first page of the manual" type="text/html" href="http://someplace.com/manual/start.html">

Μείνετε συντονισμένοι και για τα επόμενα!

XHTML tags που ξεχνάμε να χρησιμοποιήουμε (ενώ δεν θα έπρεπε)…

Αποφάσισα να γράψω αυτό το post για να διαφημίσω λίγο τα πιο “παρεξηγημένα”, κατά την γνώμη μου πάντα, XHTML tags. Δεν είναι λίγες οι φορές που θέλουμε να περιγράψουμε σημασιολογικά (semantically) κάποιο κομμάτι του περιεχομένου μας, αλλά δυστυχώς δεν γνωρίζουμε τον σωστό τρόπο. Πολλοί μάλιστα δεν έχουν τον χρόνο ή την διάθεση να ψάξουν, με αποτέλεσμα να μην χρησιμοποιούνται τα σωστότερα tags για την κάθε δουλειά. Με αυτό το post λοιπόν, θα προσπαθήσω να παρουσιάσω κάποια πολύ βολικά XHTML elements τα οποία δεν χρησιμοποιούνται όσο θα έπρεπε στο ελληνικό web. Έχουμε και λέμε λοιπόν :

Definition Lists

Οι συγκεκριμένες λίστες αποτελούνται από ένα ζευγάρι, όρου και περιγραφής. Με αυτόν το απλό τρόπο, μπορούμε να περιγράψουμε ένα κομμάτι περιεχομένου που περιέχει όρους και τις περιγραφές τους. Παρακάτω ακολουθεί και ένα πολύ απλό παράδειγμα.

<dl>
<dt>Tsevdos.com</dt>
<dd>Blog για το web design και development</dd>
</dl>

Fieldset και legend

Το Fieldset καθώς και το legend, είναι δύο από τα πιο σημαντικά tags που σπανίως συναντάω σε ελληνικά sites. Μία φόρμα μπορεί να χωριστεί, ανάλογα με τα δεδομένα που συλλέγει, σε διάφορα fieldsets, ενώ το κάθε fieldset μπορεί να έχει και ένα περιγραφικό legend. Έτσι πχ. μπορούμε να έχουμε ένα fieldset για προσωπικά δεδομένα, ένα για θέματα επικοινωνίας, κοκ.

<form>
<fieldset>
<legend>Personal Info:</legend>
<label for="name">Name: <input type="text" id="name" /></label>
<label for="surname">Surname: <input type="text" id="surname" /></label>
</fieldset>
<fieldset>
<legend>Address:</legend>
<label for="street">Sreet : <input type="text" id="street" /></label>
<label for="city">City: <input type="text" id="city" /></label>
<label for="zip">Zip Code: <input type="text" size="30" /></label>
</fieldset>
</form>

Caption και Summary

Το caption element μας δίνει την δυνατότητα να περιγράψουμε τι περιέχει ο πίνακας (table) μας. Το summary attribute πάει ακόμα ένα βήμα παραπέρα, και μας επιτρέπει να περιγράψουμε ακόμα πιο αναλυτικά τον πίνακα, για τους χρήστες που χρησιμοποιούν screen readers και text-only browsers.

<table summary="Ο παρακάτω πίνακας δίνει το character entity κωδικό
για όλα τα σύμβολα της HTML4.">
<caption>Σύμβολα της HTML4</caption>
...</table>

Βlockquote, abbr, cite και acronym

Ακόμα 4 πολύ χρήσιμα tags… Εάν το κείμενο σας περιέχει κάποιο quote, abbreviation, αναφορά (cite) σε κάποιο άλλο site/έγγραφο, ή είναι ακρώνυμο, απλά χρησιμοποιήστε τα ανάλογα tags! Με αυτόν τον τρόπο και κάνετε πιο semantic το κείμενο σας, ενώ ταυτόχρονα έχετε και πολύ περισσότερα elements για να δημιουργήσετε ενδιαφέροντα εφε στα styles και την Javascript σας (και να κάνετε το site σας ομορφότερο φυσικά). Το ξέρω πως κάθε αρχή είναι και δύσκολη, αλλά με λίγη υπομονή θα σας γίνει συνήθεια…

<blockquote cite="http://www.tsevdos.com/2009/04/28/mobifyme/">
<p>Η υπηρεσία ονομάζεται Mobify και σου επιτρέπει να δημιουργήσεις
σχετικά εύκολα μια custom mobile έκδοση του site σου.</p>
</blockquote>
<abbr title="Limited">Ltd.</abbr>
<cite cite="http://www.tsevdos.com/2009/05/22/maka-site/">Το πιο
τραγικό site που έχει φτιαχτεί!</cite>
<acronym title="Web Content Accessibility Guidelines">WCAG</acronym>

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

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

Θάψτε άφοβα… με attribute :-)

Πολλές φορές μου έχει τύχει να θέλω να παρουσιάσω κάποιο site αλλά ταυτόχρονα να μην θέλω να του δώσω backlink, είτε γιατί το παρουσιάζω ως παράδειγμα προς αποφυγή, είτε επειδή κλέβει κάποιο άλλο site (οπότε γιατί να του δώσω και εύσημα) είτε για κάποιον άλλο, σοβαρό πάντα, λόγο.

Όπως όλοι γνωρίζεται τα backlinks παίζουν μεγάλο ρόλο στο SEO κομμάτι ενός site, μιας και με κάθε backlink, ενισχύεται η φήμη του site, με την λογική πως όσα πιο πολλά τα backlinks, τόσο πιο έγκυρο, χρήσιμο, ποιοτικό, κτλ κτλ. είναι το site.

Για να επανέλθω στο θέμα μας τώρα, έστω πως θέλω να παρουσιάσω σε όλους σας ένα site, χωρίς να του δώσω backlink. Αυτό γίνεται πολύ εύκολα, προσθέτοντας στο link ένα relationship attribute, με την τιμή “nofollow”. Και για όσους μπερδεύτηκαν ας ρίξουν μια ματιά στον παρακάτω κώδικα.

<a rel="nofollow" href="http://www.some-site.com/">site που δεν εγκρίνω</a>

Με αυτόν τον απλό τρόπο δηλώνω στα Google (αλλά και Yahoo/MSN) bots να μην κατοχυρώσουν το εν λόγω link ως backlink. Έτσι το site που παρουσιάζω, αλλά δεν εγκρίνω, δεν επωφελείται καθόλου από το link μου. Έχετε την εν λόγω λειτουργία υπόψη σας, ποτέ δεν ξέρετε πότε θα σας χρειαστεί…

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

Από αυτή την εβδομάδα ξεκινάω ένα νέο εγχείρημα, το οποίο θα είναι ένα εβδομαδιαίο post που θα καταγράφει τα πιο ενδιαφέροντα – κατά την γνώμη μου φυσικά – άρθρα και νέα από τον χώρο του web design, development και του internet γενικότερα. Αυτά τα post θα απευθύνονται κυρίως σε επαγγελματίες (ή μερακλήδες ερασιτέχνες) του χώρου  που θέλουν να ρίχνουν μια γρήγορη ματιά στο τι έχει γίνει τελευταία στο χώρο μας (internet), τόσο σε ελληνικό όσο και σε διεθνή επίπεδο.

Το εν λόγω εγχείρημα, θα μπορούσα θεωρητικά να το κάνω και με microblogging ή με άλλες ανάλογες υπηρεσίες, αλλά πραγματικά ποτέ δεν μου άρεσε η ιδέα του να postαρεις links και κείμενα μέσα σε 140 μόνο χαρακτήρες (ο λογαριασμός μου στο twitter έχει μόλις 1 twit!!!). Και μετά από αυτήν την μικρή εισαγωγή, ας περάσουμε και κυρίως θέμα :

Αυτά λοιπόν από αυτήν την εβδομάδα. Τα ξαναλέμε την επόμενη και εάν δεν σας κάνει κόπο αφήστε κάποιο comment για το πως σας φαίνεται αυτή η προσπάθεια… Προσωπικά δεν μαρέσει καθόλου ο τίτλος της, οπότε περιμένω βοήθεια στο συγκεκριμένο θέμα!!!