H παρουσίαση μου στο DrupalCamp 2010

Ξεκινάω να μιλάω στο 24′ λεπτό, ωστόσο στα πρώτα 24 λεπτά μπορείτε να μάθετε πολλά πραγματάκια για το Drupal από τον συνάδελφο και Drupal ninja Μιχάλη Μαυρομμάτη!

Επίσης επειδή τα slides δεν φαίνονται καλά στο παραπάνω video, have a look here 😉

Athens Drupalcamp 2010

Αυτό το Σαββατοκύριακο πραγματοποιείτε το δεύτερο DrupalCamp Athens στο Microsoft Innovation Center. Το πρόγραμμα περιλαμβάνει πολλές και ενδιαφέρουσες παρουσιάσεις που σίγουρα αξίζει να παρακολουθήσετε… Αν θέλετε μπορούμε να τα πούμε και από κοντά την Κυριακή στις 12:00, μιας και θα παρουσιάσω μαζί με τον Μιχάλη Μαυρομάτη διάφορα  tips ‘n tricks πάνω στο Drupal (modules, τεχνικές, best practices, κτλ.), που μας έχουν λύσει τα χέρια στη Wedia!

Οι οθόνες του iPhone μου

Συνεχίζω και εγώ το παιχνίδι του Πάνου, με 3 οθόνες ωστόσο! Στην home έχω τα βασικά εργαλεία και ρυθμίσεις, ωστόσο τον περισσότερο χρόνο τον περνάω στην 2η και 3η οθόνη όπου έχω τις mobile office (!) και social εφαρμογές μου 😉



CSS : Κληρονομικότητα (inheritance) και cascade

Εάν θα μπορούσα να δηλώσω expert σε κάτι, αυτό θα ήταν σίγουρα το CSS. Δουλεύω με αυτό από την πρώτη του version και γενικά είναι μέρος της καθημερινότητας μου. Έχω γράψει άπειρες γραμμές σε πολύ μεγάλα αλλά και πολύ μικρά sites, και με ενθουσιάζει το γεγονός πως ένα τόσο φαινομενικά απλό πρότυπο, ζωντανεύει την markup μας. Στην προηγούμενη πρόταση γράφω “φαινομενικά απλό” γιατί το “γράφω CSS” από το “γνωρίζω CSS” έχει τεράστια διαφορά. Ένας γνώστης μπορεί να γράψει μέσα σε ελάχιστες γραμμές, αυτό που κάποιος newbie γράφει και ξαναγράφει! Το όλο μυστικό κρύβεται σε 2 χαρακτηριστικά του CSS που θέλουν λίγο χρόνο για να εξοικειωθείτε, η κληρονομικότητα (inheritance) και το cascade.

Στο παρακάτω αρθράκι λοιπόν, θα προσπαθήσω να εξηγήσω όσο καλύτερα γίνεται αυτά τα δύο χαρακτηριστικά του CSS, τα οποία ποτέ δεν μου εξήγησε κανείς και τελικά τα έμαθα με τον δύσκολο τρόπο (hard way που λένε και οι Εγγλέζοι). Το περίεργο είναι πως και ολόκληρα βιβλία αφιερωμένα στο θέμα, αποφεύγουν να τα εξηγήσουν αναλυτικά – μάλλον δεν θέλουν να γίνουν όλοι experts ;-). Ας ξεκινήσουμε λοιπόν.

Κληρονομικότητα (Inheritance)

Γενικά δουλεύει όπως μπορείτε να φανταστείτε και όπως έχετε συνηθίσει και σε γλώσσες προγραμματισμού (αν έχετε ασχοληθεί τέλος πάντων). Είναι ο μηχανισμός με τον οποίο συγκεκριμένες ιδιότητες (properties) μεταφέρονται από το parent element στα “παιδιά” του. Είναι αρκετά εύκολο στην κατανόηση, και στην ουσία το μόνο πράγμα που προκαλεί μπέρδεμα είναι ποιες ιδιότητες (properties) κληρονομούνται τελικά, μιας και δεν κληρονομούνται όλες. Σε αυτόν τον πίνακα (κοιτάξτε την 5η στήλη) μπορείτε να δείτε ποιες από αυτές κληρονομούνται και ποιες όχι. Προσωπικά δεν τον θυμάμαι απέξω, άλλωστε δεν έχει και πολύ νόημα μιας και γιαυτό υπάρχουν οι DOM inspectros (όπως πχ. το firebug), ωστόσο κρατήστε πως ότι έχει να κάνει με fonts κληρονομείτε (γι’ αυτό και το declaration του font στο body είναι ο πιο σημαντικός CSS κανόνας ενός site).

Cascade

Η κληρονομικότητα όπως είδατε είναι αρκετά εύκολη στην κατανόηση. Ας εξηγήσουμε όμως και το Cascade το οποίο είναι κάπως πιο πολύπλοκο. Το Cascade (δεν νομίζω να μπορεί μεταφραστεί κάπως αξιόλογα στα ελληνικά) είναι ίσως το πιο δυσνόητο κομμάτι του CSS γιατί κρύβει αρκετή θεωρία από πίσω του, ωστόσο είναι και το πιο σημαντικό και γι αυτόν τον λόγο αποτελεί και την πρώτη λέξη του ακρώνυμου CSS (Cascading Style Sheets). To Casade λοιπόν αποτελείται από 3 βασικές έννοιες οι οποίες καθορίζουν πως το CSS θα εφαρμόσει τελικά τους κανόνες των style sheets μας. Οι 3 έννοιες είναι οι παρακάτω :

  • Importance (σπουδαιότητα)
  • Specificity (ειδικότητα)
  • Η σειρά που εμφανίζονται μέσα στον κώδικα

Και για να μην μπερδευτούμε ας τα πάρουμε ένα-ένα.

Importance (Σπουδαιότητα)

Η σπουδαιότητα έχει να κάνει με το που δηλώθηκε ο CSS κανόνας. Οι κανόνες που θα κάνουν conflict μεταξύ τους θα εφαρμοστούν με την παρακάτω σειρά, με τις νεότερες να υπερισχύσουν :

  1. User agent style sheets
  2. Κανονικοί style sheet κανόνες συγγραφέα (author)
  3. Κανονικοί style sheet κανόνες χρήστη (user)
  4. Σημαντικοί style sheet κανόνες συγγραφέα (author)
  5. Σημαντικοί style sheet κανόνες χρήστη (user)

Αλλά ας εξηγήσουμε λίγο τι είναι τα παραπάνω style sheets και από που έρχονται!

Λέγοντας user agent style sheets εννοούμε όλα τα ενσωματωμένα (default) style sheet του browser (πχ. margin/padding σε headers, παραγράφους, λίστες, χρώματα link, κτλ.).

Οι style sheet κανόνες συγγραφέα (author), είναι τα κλασικά style sheets που γράφουν οι web designers του εκάστοτε site.

Οι style sheet κανόνες χρήστη (user), είναι κάποιοι ειδικοί κανόνες που μπορεί να θέσει ο ίδιος ο χρήστης. Οι περισσότεροι browsers δεν επιτρέπουν τέτοιου είδους κανόνες, ωστόσο πιο ειδικοί browsers (πχ. για δυσλεκτικούς ή screen readers οι οποίοι επιτρέπουν κυρίως aural style sheets) δίνουν αρκετές επιλογές και δυνατότητες στον ίδιο χρήστη (και μάλιστα υπερτερούν!).

Τέλος, τα δύο τελευταία είδη style sheet, μπορούν να εφαρμοστούν είτε ως κανονικοί (normal) κανόνες, είτε ως σημαντικοί (important) κανόνες (πχ. p { font-size: 1em !important; }), με τους δεύτερους να είναι ισχυρότεροι από τους πρώτους.

Γενικότερα εμείς που ασχολούμαστε με την κατασκευή web sites δεν έχουμε να κάνουμε και πολλά πράγματα με την σπουδαιότητα, γιατί πολύ απλά δεν είναι στο χέρι μας, ωστόσο θα πρέπει να έχουμε στο μυαλό μας τι style sheets δέχεται ένα document, τι είναι τα user agent style sheets, ή πως λειτουργεί ο !important κανόνας.

Specificity (ειδικότητα)

Η ειδικότητα είναι το πιο σημαντικό κομμάτι του cascade, και αυτό που πρέπει να κατανοήσει ο κάθε web designer. Ο γενικός κανόνας είναι σχετικά απλός, όσο πιο συγκεκριμένος (ειδικός) είναι o selector ενός κανόνα, ο συγκεκριμένος κανόνας υπερισχύει! Αν και είναι εύκολο και λογικό, κάποιος νέος στον χώρο μπορεί να χάσει πολύ εύκολα την μπάλα σε ένα πολύπλοκο έγγραφο (document), και να καταντήσει να γράφει ξανά και ξανά τα ίδια πράγματα.

Ο πιο συγκεκριμένος selector, ο οποίος αναιρεί όλους τους άλλους, αλλά δεν πρέπει να χρησιμοποιούμε ποτέ, είναι το style attribute σε οποιοδήποτε element. Δεν το χρησιμοποιούμε για να μην μπλέκουμε την markup με τα styles, και για πολλούς άλλους λόγους που έχουμε εξηγήσει σε άλλα posts. Από εκεί και πέρα έχουμε ένα περίεργο point system για το κάθε selector, το οποίο παίζει ως εξής:

  • Το κάθε element (ή pseudo-element) που εμφανίζεται στον selector μας παίρνει 1 βαθμό
  • Η κάθε κλάση (class) που που εμφανίζεται στον selector μας παίρνει 10 βαθμούς
  • Το κάθε id που εμφανίζεται στον selector μας παίρνει 100 βαθμούς

Εδώ μπορείτε να βρείτε και μια πιο χιουμοριστική εξήγηση του point system που περιγράφω, ωστόσο με τα παρακάτω παραδείγματα του πίνακα, πιστεύω πως θα καταλάβετε καλύτερα το πως δουλεύει.

Το Point system της ειδικότητας (specificity)
Selector id class element Specificity
p 0 0 1 001
.class 0 1 0 010
p.class 0 1 1 011
#id 1 0 0 100
#id .class 1 1 0 110
#id p.class 1 1 1 111
p a 0 0 1+1 002
.classa .classb 0 1+1 0 020

Κάπως έτσι υπολογίζεται το specificity και ο selector με τον μεγαλύτερο αριθμό υπερτερεί.

Η σειρά που εμφανίζονται μέσα στον κώδικα

Τι γίνεται όμως όταν 2 κανόνες έχουν ακριβώς το ίδιο specifity; Για παράδειγμα :

.nav a { color:green; }
.nav a { color:red; }

Και οι 2 παραπάνω selectors έχουν 011, ωστόσο όλοι οι browsers θα κάνουν rendering τα links με κόκκινο χρώμα για τον πολύ απλό λόγο πως ήταν ο πιο πρόσφατος κανόνας που συναντήθηκε. Το μόνο που πρέπει να έχουμε υπόψη μας εδώ είναι πως εάν έχουμε πολλά style sheets η σειρά που φορτώνονται έχει σημασία, οπότε το προσέχουμε και αυτό.

Αυτά τα λίγα για την κληρονομικότητα (inheritance) και το cascade. Ελπίζω να ξεκαθαρίσατε κάποια πράγματα που έχουν να κάνουν με την θεωρία που κρύβεται πίσω από το CSS, η οποία πολλές φορές δεν αναφέρεται και δεν εξηγείτε όπως θα έπρεπε.

CSS3 και CSSS

Δεν ξέρω πόσοι από εσάς το πείραν χαμπάρι, αλλά η “δική” μας Λία ήταν ομιλήτρια στο τελευταίο Front-Trends Conference, το οποίο έγινε στην Βαρσοβία. Περισσότερα για τo θέμα μπορείτε να διαβάσετε στο post της (πάντα στα αγγλικά), ωστόσο εάν ασχολείστε έστω και λίγο με το web – και για να διαβάζετε αυτό το blog μάλλον ασχολείστε – πρέπει οπωσδήποτε να παρακολουθήσετε την παρουσίαση της ή ακόμα καλύτερα να την κατεβάσετε! Προσωπικά πιστεύω πως είναι μια από τις καλύτερες και πιο επεξηγηματικές παρουσιάσεις για το τι είναι το CSS3, τι λύσεις δίνει και τι νέες δυνατότητες παρέχει σε όλους εμάς. Καιρό είχα να παρακολουθήσω μια τόσο καλοφτιαγμένη και δομημένη παρουσίαση, και για να πω την αλήθεια στεναχωρήθηκα που δεν κατάφερα να την δω live, ωστόσο ελπίζω ακόμα σε κάποιο video της παρουσίασης…

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

Καλή επιτυχία cssigniter

Για να μην λέτε πως συνέχεια γκρινιάζω για το πόσο πίσω βρισκόμαστε στην Ελλάδα, αποφάσισα να γράψω για κάτι πιο αισιόδοξο. Να γράφουμε τα άσχημα (και να προσπαθούμε να τα διορθώνουμε), αλλά να γράφουμε και για τα σωστά. Ο συνάδελφος και φίλος Γεράσιμος Τσιάμαλος ξεκίνησε μια καινούργια υπηρεσία δημιουργίας WordPress themes. Αυτό που τον διαφοροποιεί από τον ανταγωνισμό, πέρα από τα καλοσχεδιασμένα themes του, είναι το απλό συνδρομητικό μοντέλο του, όπου με 79 δολάρια τον χρόνο έχεις πρόσβαση σε όλα τα themes που έχουν φτιαχτεί! Αν ενδιαφέρεστε για WordPress themes λοιπόν, ρίξτε μια ματιά στο cssigniter.

Web ειδικότητες και Ελλάδα…

Διάβαζα τις προάλλες την διαμάχη που ξέσπασε ανάμεσα στον Ryan Carson (από το Carsonified) και στον Andy Budd για το αν τελικά είναι ή δεν είναι κανονικός τίτλος δουλειάς ο user experience expert. Η πρώτη μου σκέψη και αντίδραση στο θέμα δεν ήταν ποιος έχει δίκιο ή άδικο, ή έστω ποιος είχε τα καλύτερα επιχειρήματα, αλλά πόσο πίσω είμαστε εμείς στην Ελλάδα!

Άλλοι έχουν φτάσει το web στα άκρα, και από εκεί που είχες έναν web designer και έναν web developer που έκαναν όλη την δουλειά, έχουν εξειδικεύσει τρελά τα πράγματα με Information Architectures, Accessibility experts, Database gurus, UX experts, Security experts, back-end και front-end specialists, κτλ. κτλ., ενώ εμείς στο Ελλαδιστάν απλά ακούμε τους τίτλους, τους αντιγράφουμε, τους βάζουμε στις κάρτες μας, νομίζοντας πως είμαστε στο ίδιο επίπεδο!

Μάλλον έχουμε την ποζεριά στο αίμα μας και μας αρέσει να δουλευόμαστε μεταξύ μας, δεν εξηγείτε αλλιώς… Όποιοι συμφωνείτε με το παραπάνω ρίξτε και μια ματιά στο πολύ καλό post του φίλου PanosJee , ο οποίος εξηγεί γιατί δεν πρόκειται να γίνουμε ποτέ Silicon Valley (γιατί να γίνουμε άλλωστε;)!

HTML5 σκέψεις

Αυτό το καλοκαίρι το έριξα – όπως και πολλοί άλλοι φαντάζομαι – στην HTML5 η οποία έχει ήδη αρχίσει να κάνει δειλά-δειλά την εμφάνιση σε αρκετά sites, σε μικρότερο ή μεγαλύτερο βαθμό. Τα βιβλία που διάβασα ήταν το “HTML5 for web designers” του Jeremy Keith και το “Introducing HTML5” των Bruce Lawson και Remy Sharp. Καταρχάς όποιος σκέφτεται να αγοράσει κάποιο βιβλίο αυτήν την στιγμή, του προτείνω το δεύτερο (Introducing HTML5), μιας και το πρώτο με απογοήτευσε αρκετά για “A book apart” βιβλίο. Γενικότερα δεν θα το περιέγραφα καν ως βιβλίο, αλλά σαν μια γενική, θεωρητική εισαγωγή για το τι είναι η HTML5. Αντίθετα, το Introducing HTML5 με ξάφνιασε ευχάριστα τόσο με τα πολλά θέματα που καλύπτει όσο και με τον τρόπο που τα καλύπτει, μιας και δεν μένει μόνο στην θεωρία, αλλά προχωράει και στην πράξη (ρίξτε οπωσδήποτε και μια ματιά στα παραδείγματα του βιβλίου).

Μετά από αυτήν την μικρή εισαγωγή λοιπόν, και με την ελάχιστη εμπειρία που έχω στο θέμα, θέλω να καταγράψω κάποιες σκέψεις, προβληματισμούς, και γενικότερα να ξεκινήσω μια συζήτηση με τα πιο ανήσυχα μυαλά… Θα προσπαθήσω να είμαι σαφής και γρήγορος, έτσι ώστε να μην μπερδέψω  και να μην κουράσω. Επίσης σε αυτό το post γράφοντας HTML5 εννοώ και τα APIs ή τις τεχνολογίες οι οποίες δεν είναι μέρος του επίσημου HTML5 specification (είναι από μόνα τους ξεχωριστά specifications), ωστόσο θα χρησιμοποιηθούν κυρίως με αυτήν την markup και την ίδια περίοδο. Ας δούμε λοιπόν τι μας επιφυλάσσει το μέλλον, ε, το παρόν ήθελα να πω!

Markup

Ας ξεκινήσουμε με το πιο απλό μέρος της HTML5 – θεωρητικά πάντα – την markup και τα semantics. Τα semantics λοιπόν έχουν αλλάξει αρκετά και πλέον γίνεται ακόμα πιο δύσκολο το να γράψεις σημασιολογική markup. Παρακάτω περιγράφω αυτά που μου φάνηκαν πιο περίεργα, σημαντικά ή παράξενα!

  • Το outline – το οποίο δεν έχει υλοποιηθεί ακόμα από κανέναν browser (!!!) – αλλάζει τελείως τον νόημα των headings (h1-h6). Πλέον ένα h3 heading μπορεί να είναι πιο σημαντικό από ένα h1 heading! Στην ουσία στην HTML5 θα μπορούσαμε να είχαμε ένα και μοναδικό τύπο heading (h για παράδειγμα), ωστόσο υπάρχουν ακόμα έξι (h1-6) για compatibility θέματα. Μένει να δούμε πως θα επηρεάσει και το SEO αυτό το θέμα.
  • Τα sections και τα articles είναι αρκετά δύσκολα στην κατανόηση, μιας και το ένα μπορεί να υπάρχει μέσα στο άλλο αρκετές φορές! Θέλει αρκετή μελέτη έτσι ώστε να τα χρησιμοποιήσει κάποιος σωστά.
  • Τέλος είμαι πραγματικά περίεργος να δω πως θα φτιάξουν τους WYSIWYG web editors (Dreamweaver για παράδειγμα) έτσι ώστε να γράφουν semantic HTML5. Παλιότερα τα πράγματα ήταν πανεύκολα, απλά πετούσαν παντού ένα div και το θέμα τελείωνε, τώρα τι λύση θα βρουν άραγε;

Φόρμες (forms)

Οι φόρμες επιτέλους δεν θα σπάνε τα νεύρα σε αυτούς που τις φτιάχνουν. Μερικά attributes στην markup μας και θα αφήνουμε τον browser να κάνει όλη την “βρόμικη” δουλειά. Οι περισσότεροι browsers υποστηρίζουν λίγα πράγματα προς το παρόν (ο πιο ολοκληρωμένος browser στο θέμα είναι ο Opera) ωστόσο σιγά-σιγά θα τον φτάσουν και οι υπόλοιποι.

  • Πολύ έξυπνο compatibility μιας και όλες οι φόρμες εμφανίζονται σαν απλά text inputs σε παλιότερους browsers που δεν καταλαβαίνουν τα νέα HTML5 attributes.
  • Δυστυχώς θα γράφουμε για πολύ καιρό ακόμα Javascript validation scripts (ιδιαίτερα στην Ελλάδα, με τους αρχαιοελληνικούς browsers που κυκλοφορούν)!
  • Πρέπει οπωσδήποτε να υπάρξει μια επίσημη γραμμή για το πως θα εμφανίζονται/φαίνονται τα διάφορα widgets (πχ. επιλογή ημερομηνίας) και τα λάθη (validation errors), καθώς και για το πως θα διαγράφουμε αυτά τα default browser styles, γιατί προβλέπω να γίνεται χαμός σε αυτό το θέμα.
  • Ακόμα λιγότερη Javascript χάρις τα autofocus, placeholder, autocomplete και required attributes.
  • Το pattern attribute απλά τα σπάει! Ελέγχει κατευθείαν στον browser το regular expression που έχει δηλωθεί στο pattern!

Video και Audio

Εδώ πέρα τα πράγματα ξεκίνησαν καλά και απλά, αλλά μια (τραγική;) παράληψη στο specification έκανε τα εύκολα δύσκολα! Όπως όλοι ξέρουμε ο κάθε κατασκευαστής browser αποφάσισε (ή θα αποφασίσει) να υποστηρίξει τον video codec που τον συμφέρει.

  • Χρησιμοποιώντας πολλαπλά source elements μπορούμε να φορτώσουμε πολλά διαφορετικά φορμάτ. Πολύ χρήσιμο για την κατάσταση που θα επικρατήσει.
  • Χρησιμοποιώντας το video element με codec Ogg Theora (.ogg), H.264 (mp4) και webM (βασισμένο στον VP8 codec της Google), είμαστε καλυμμένοι στους μοντέρνους browsers, ωστόσο 3 διαφορετικές κωδικοποιήσεις είναι πολλές για το ίδιο video.
  • Και μην ξεχνάτε πως πρέπει να το κωδικοποιήσουμε και σε Flash video για να παίζει σε παλιότερους browsers!
  • Στο audio τα πράγματα είναι αρκετά πιο απλά, μιας και με ένα mp3 έχουμε τελειώσει.
  • Στα θετικά είναι πως το API του video και audio tag είναι ακριβώς το ίδιο (αν θυμάμαι καλά το audio element έχει κανα-δυο λιγότερες methods και attributes – όπως πχ. width και height).

Canvas

Με το Canvas API μπορείς να κάνεις πραγματικά τρελά πράγματα, ωστόσο το θέμα accessibility είναι τεράστιο! Στην ουσία ότι “ζωγραφίζεται” πάνω στον καμβά, δεν μπορεί να διαβαστεί από screen readers. Είναι δηλαδή (προς το παρόν) ένα καθαρά οπτικό (visual) element/API, χωρίς μάλιστα να έχει προβλεφθεί κάποια εναλλακτική λύση για την προβολή περιεχομένου (όπως στο video tag για παράδειγμα)!

Client-side Data storage

Και εδώ δεν γνώριζα αρκετά πράγματα. Οι 2 σοβαρές τεχνολογίες ονομάζονται Web Storage και Web SQL Database (υπάρχει και μια τρίτη από την Mozilla η οποία μάλλον θα σβήσει – δεν θυμάμαι καν το όνομα της), με αρκετή υποστήριξη από τους browsers.

  • Το Web Storage είναι κάτι σαν cookies on steroids. Επίσης η τεχνολογία υποστηρίζετε από όλους (!!!) τους μοντέρνους browsers.
  • H Web SQL υποστηρίζεται σε Opera, Chrome και Safari ενώ η SQL μηχανή που χρησιμοποιούν είναι η SQLite (δεν γνωρίζω εάν το αναφέρει πουθενά το specification, ωστόσο αυτή την έκδοση SQL έχουν οι παραπάνω browsers).
  • Και πάλι θα συνεχίσουμε να γράφουμε για πολύ καιρό cookies για να υποστηρίξουμε τους παλιότερους browsers (fallback κώδικας).

Offline Application Caching

Μια τεχνολογία που δεν είχα ιδέα πως λειτουργούσε, η οποία αν και εντυπωσιακή για κάποιο λόγο δεν μου αρέσει ο τρόπος λειτουργίας της (ωστόσο θα ενθουσιάσει αυτούς που ασχολούνται με web servers, .htaccess files κτλ.). Πολύ απλά δηλώνουμε σε ένα “μανιφέστο” ποια αρχεία θέλουμε να cachαριστούν (αλήθεια πως θα το μεταφράζατε αυτό;) στον browser, έτσι ώστε το site/web app μας να συνεχίζει να λειτουργεί ακόμα και εάν πάψει να λειτουργεί η σύνδεση μας.

  • Η χρήση είναι σχετικά απλή, απλά δημιουργούμε ένα .manifest αρχείο στο οποίο αναφέρουμε τα αρχεία που θέλουμε να cashaρηστούν, και το δηλώνουμε στην markup μας (<html manifest="demo.manifest">). Για κάποιο λόγο ωστόσο δεν μου αρέσει αυτός ο τρόπος λειτουργίας… Με κάνει να αισθάνομαι κάπως έξω από τα νερά μου, μιας και όπως εξήγησα και πιο πάνω μοιάζει πιο πολύ με την δημιουργία κάποιου .htaccess αρχείου, κάτι που δεν κάνει συχνά κάποιος web designer (ή έστω front-end developer).

Geolocation

Ένα από τα πιο εύκολα και αγαπημένα μου χαρακτηριστικά. Το Geolocation API δεν είναι μέρος της HTML5, ωστόσο το αναφέρω για τους λόγους που εξήγησα στην εισαγωγή. Είναι σχετικά απλό (με 2 methods έχετε καθαρίσει – getCurrentPosition και watchPosition), και πιστεύω πως όλο και περισσότερα sites θα το χρησιμοποιούν για να μας δείχνουν πιο “ντόπια” προϊόντα, διαφημίσεις, νέα, προσφορές, κτλ. κτλ. Με λίγα λόγια, “θα φορεθεί πολύ”…

Web Messaging API, Web Workers API και Web Sockets API

Τα παραπάνω APIs τα αναφέρω και τα 3 μαζί μιας και είναι φτιαγμένα για καθαρά Web εφαρμογές (δεν είναι ούτε και αυτά μέρος της HTML5). Με τα παραπάνω APIs μας δίνονται οι παρακάτω δυνατότητες:

  • Το Web Messanging υποστηρίζεται από πολλούς browsers (και IE) και μας επιτρέπει να κάνουμε διάφορα ωραία, όπως να στέλνουμε μηνύματα σε άλλα domains κτλ. Φανταστείτε το κάτι σαν AJAX on steroids και αυτό.
  • Χρησιμοποιώντας Web Workers μπορούμε να κάνουμε την web εφαρμογή μας να τρέχει την Javascript σε διαφορετικά threads! Από μια γρήγορη ματιά που έριξα, η λογική είναι αρκετά πολύπλοκη και πιστεύω πως αυτήν την στιγμή είναι πολύ κακό για το τίποτα, ωστόσο οφείλω να ομολογήσω πως σε μια πολύπλοκη web εφαρμογή (φανταστείτε κάτι σε Photoshop στο web) μπορεί να κάνει τρελή διαφορά (πχ. να χρησιμοποιεί ένα φίλτρο, και ενώ ο web worker κάνει τους υπολογισμούς του, ο χρήστης να συνεχίζει να χρησιμοποιεί την εφαρμογή, χωρίς αυτή να φαίνεται σαν να έχει κολλήσει).
  • Τα Web Sockets ανοίγουν μια αμφίδρομη επικοινωνία μεταξύ του server και του client χρησιμοποιώντας τον browser σαν “μεσάζοντα”. Αρκετά βολικό και χρήσιμο…
Αυτές είναι οι πρώτες εντυπώσεις/σκέψεις μου για την HTML και όλα τα άλλα ωραία καλούδια που έρχονται μαζί της. Έχετε στο μυαλό σας πως  υπολογίζουν πως η HTML5 θα είναι 100% ολοκληρωμένη (σε browser επίπεδο τουλάχιστον) γύρω στο 2020 (!!!) ωστόσο δεν χάνουμε τίποτα με το να χρησιμοποιούμε και να μαθαίνουμε τα νέα χαρακτηριστικά της. Πολλά από αυτά άλλωστε υποστηρίζονται και από τους σημερινούς μοντέρνους browsers ενώ λογικά με την έλευση του IE9 θα δούμε ακόμα πιο πολλές HTML5-based εφαρμογές. Μην φοβάστε λοιπόν να την χρησιμοποιήσετε εδώ και τώρα, απλή HTML είναι άλλωστε 😉 Τα υπόλοιπα τα λέμε στα σχόλια!

Phrappe.com : Περάστε για ένα φραπεδάκι…

Έχει περάσει αρκετός καιρός από τότε που σκεφτόμουν να αλλάξω γλώσσα στο tsevdos.com, κάτι που τελικά δεν έγινε, μιας και οι περισσότεροι προτιμούν το ελληνικό περιεχόμενο (και καλά κάνουν). Η διάθεση να δημιουργήσω και αγγλόφωνο περιεχόμενο όμως, δεν μου έφυγε, και επιτέλους μπορώ να σας παρουσιάσω το Phrappe, το αγγλόφωνο blog μου! Όπως μπορείτε να διαπιστώσετε και μόνοι σας, σκοπός του site είναι να δίνει γρήγορες λύσεις σε διάφορα θέματα που αντιμετωπίζει καθημερινά ο web designer/developer. Το blog ανανεώνεται κυρίως από εμένα, ωστόσο δεν θα είχα κανένα πρόβλημα να συνεισφέρουν και άλλοι εφόσον το θέλουν και έχουν να γράψουν κάτι που θα βοηθήσει όλους εμάς. Όποιος ενδιαφέρεται λοιπόν ας αφήσει ένα comment ή γενικότερα ας επικοινωνήσει μαζί μου (έχω κάνει και εγώ κάποιες κινήσεις πάνω σε αυτό το θέμα)…

Αυτά τα λίγα προς το παρόν. Περιμένω σχόλια, προτάσεις και ιδέες για το νέο blog, και φυσικά μην ξεχάσετε να γραφτείτε και στο PhrappeRSS feed!

Base tag, ή αλλιώς το client-side debuging tag

Είναι αρκετές οι φορές όπου κάποιος συνάδελφος ή φίλος, μου στέλνει ένα url προς κάποια σελίδα με την γνωστή ατάκα – “Γιατί δεν παίζει;”. Συνήθως η δομή της σελίδας είναι αρκετά πολύπλοκη με πολλά elements και διάφορα πραγματάκια να γίνονται εδώ και εκεί… Φυσικά το πρώτο πράγμα που ζητάω είναι πρόσβαση στα αρχεία, ωστόσο πολλές φορές αυτό δεν είναι εφικτό.

Έχω βρει εναλλακτική λύση όμως! Η δεύτερη καλύτερη λύση είναι η χρήση του base tag. Το μόνο που έχετε να κάνετε είναι να αντιγράψετε την markup από το site που θέλετε (copy-paste του source code), και μετά να προσθέσετε το παρακάτω tag στο head μέρος της markup σας.

<base href="http://domain.com" />

Με αυτόν τον πολύ απλό τρόπο, δηλώνουμε στην markup πoιο url είναι η προεπιλογή μας για όλα τα links της σελίδας μας! Έτσι μπορούμε να δούμε και να επεξεργαστούμε την στατική σελίδα που μόλις κατεβάσαμε, με όλα τα stylesheets και javascripts να παίζουν κανονικότατα, και από εκεί και πέρα να προσθέσουμε ότι θέλουμε χρησιμοποιώντας inline CSS ή Javascript (για test/development καταστάσεις μόνο 😉 ). Πολύ βολικό έτσι;