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

Πέρα από αυτό και για τις ανάγκες της ίδιας της παρουσίασης, η Λία δημιούργησε και το δικό της slideshow system το οποίο ακούει στο όνομα CSSS. Όπως εύκολα καταλαβαίνει κάποιος στηρίζεται κυρίως σε CSS3 χαρακτηριστικά (και Javascript φυσικά), ενώ μπορεί να το κατεβάσει και να το  χρησιμοποιήσει ο καθένας για τις παρουσιάσεις του (απορώ ποιοι χρησιμοποιούν ακόμα Powerpoint!). Και πάλι συγχαρητήρια και μακάρι να δούμε ανάλογου επιπέδου events και στην Ελλάδα (αν και το βλέπω πάρα πολύ δύσκολο)…

Το πρόβλημα που είχα, ήταν πως ενώ η HTML5 markup μου ήταν σωστή (και valid), elements όπως header, section, footer και aside, δεν καταλάβαιναν τους styling κανόνες που τους έβαζα! Οι μοντέρνοι και HTML5-ready browsers έδειχναν να μην κάνουν σωστό rendering τα καινούργια elements (ο Firefox και ο Chrome τουλάχιστον, αν και έχω την αίσθηση πως και οι υπόλοιποι θα έχουν ανάλογα προβλήματα). Η λύση τελικά είναι πανεύκολη, απλά δίνουμε στα καινούργια elements display:block.

header, section, footer, aside, nav, article, figure { display: block; }

Από ότι κατάλαβα για κάποιο περίεργο λόγο, οι browsers κάνουν τα παραπάνω στοιχεία rendering ως inline elements, οπότε με τον παραπάνω απλό κανόνα καθαρίσαμε. Μπορεί έχασα ένα ολόκληρο απόγευμα, ωστόσο πιστεύω πως άξιζε τον χρόνο. Άλωστε μόνο έτσι μαθαίνεις…

Η λύση είναι απλούστατη και θέμα θέμα απλής λογικής. Όποιο γραφικό είναι μέρος του περιεχομένου, όπως πχ. μια φωτογραφία, ένα διάγραμμα, κτλ., πρέπει να παρουσιάζεται με το HTML img tag και να περιέχει – εκτός φυσικά από το src attribute – και ένα περιγραφικό alt attribute. Αντιθέτως τα γραφικά που δεν είναι μέρος του περιεχομένου, δεν θα πρέπει να υπάρχουν καθόλου στην markup μας (ως img tags)! Τα συγκεκριμένα γραφικά θα πρέπει να παρουσιάζονται είτε μέσω CSS, είτε μέσω DOM injection χρησιμοποιώντας κάποια Javascript library. Εάν φυσικά τα πράγματα δεν γίνονται αλλιώς (δεν μπορούμε να κάνουμε και μαγικά σε μερικές περιπτώσεις), τότε μπορούμε να προσθέσουμε τα συγκεκριμένα γραφικά με img tags τα οποία θα έχουν κενή την alt attribute τους (<img src="logo.jpg" alt="" />). Εύκολο έτσι;