css3.gr

Όλο και περισσότερος κόσμος αρχίζει και ασχολείται με την HTML5, τις νέες δυνατότητες που προσφέρει, καθώς και τις λύσεις που θα δώσει - μαζί με τo CSS3 - στα καθημερινά προβλήματα και περιορισμούς που αντιμετωπίζουν οι web desiners/developers ανά την υφήλιο. Οι περισσότεροι ρίχνουν μια γρήγορη ματιά στα νέα tags έτσι ώστε να ξέρουν τι τους περιμένει, ενώ συνήθως δεν εμβαθύνουν στις νέες παράπλευρες τεχνολογίες και API τα οποία δίνουν απίστευτες δυνατότητες στην νέα markup.

H καινούργια έκδοση της HTML έχει φτιαχτεί έτσι ώστε να βοηθήσει τους developers να χτίσουν καλύτερες και πιο δομημένες web εφαρμογές και όχι μόνο έγγραφα (documents), ενώ η δύναμη της πηγάζει κυρίως από τις προσθήκες API και τεχνολογιών που προσφέρουν ελευθερία και έλεγχο στους developers, και όχι τόσο από τα νέα tags, τα οποία είναι και το ευκολότερο μέρος εκμάθησης της νέας markup.

Στην σειρά άρθρων που θα ακολουθήσει λοιπόν, θα προσπαθήσω να παρουσιάσω τις πιο ενδιαφέρουσες νέες δυνατότητες και τεχνολογίες που εμφανίζονται στην HTML5. Όσοι θέλετε να δείτε πως δουλεύουν τα νέα tags/attributes, καλύτερα να ρίξετε μια ματιά σε άλλα άρθρα, γιατί  δυστυχώς δεν έχω σκοπό να ασχοληθώ πολύ με αυτά (ίσως σε κάποιο μελλοντικό άρθρο). Αντιθέτως στην σειρά άρθρων που ακολουθεί θα παρουσιάσω τεχνολογίες και APIs που ξεχωρίζουν στην HTML5 και που με έχουν εντυπωσιάσει.

Γι' αυτούς που γκρινιάζουν πως βιαζόμαστε κάπως και πως όλα αυτά θα αργήσουν πολύ να χρησιμοποιηθούν σε κανονικά sites, απλά τους ενημερώνω πως τα παραδείγματα που θα παρουσιαστούν θα παίζουν σε όλους τους μοντέρνους browsers (ναι σωστά διαβάσετε), πράγμα που σημαίνει πως η HTML5 είναι πολύ πιο κοντά από ότι πολλοί νομίζουν. Επίσης μην ξεχνάτε πως μεγάλα sites και web applications, όπως το Google Wave, το επίσημο site της Apple, αλλά και πολλά ακόμα που ετοιμάζονται, κάνουν αρκετά εκτεταμένη χρήση της HTML5 και των νέων τεχνολογιών που έρχονται μαζί της. Μετά λοιπόν από αυτήν την βαρετή αλλά αναγκαία εισαγωγή, ας δούμε το πρώτο εντυπωσιακό χαρακτηριστικό που μας φέρνει η HTML5.

Vector γραφικά και web

Η αλήθεια είναι πως ποτέ μέχρι σήμερα δεν είχαμε την πολυτέλεια να προσθέσουμε πραγματικά vector γραφικά στο web site/εφαρμογή μας. Τώρα πολλοί θα ρωτήσουν τι είναι τα vector γραφικά και τι παραπάνω μπορούν να μας προσφέρουν, ενώ άλλοι θα σπεύσουν να συμπληρώσουν πως τα παλιά καλά και συμβατά JPEG, GIF και PNG μπορούν να καλύψουν άνετα τις ανάγκες μιας σύγχρονης web εφαρμογής.

Η αλήθεια είναι πως μέχρι και την HTML4/XHTML, δεν μπορούσαμε με κάποιον προγραμματιστικό τρόπο να σχεδιάσουμε κάτι στον browser. Οι παραπάνω τύποι αρχείων που υποστηρίζονται από τους browsers, κάνουν απλά embed (και τίποτα παραπάνω) κάποιο αρχείο γραφικού/εικόνας που έχει ήδη παραχθεί με κάποιον τρόπο. Έτσι τα γραφικά στο web μέχρι τώρα δεν ήταν αρκετά interactive, μιας και δεν ήταν μέρος της markup - δεν ήταν φτιαγμένα με markup - αλλά απλά ένα ενσωματωμένο εξωτερικό αρχείο. Φυσικά υπάρχουν πολλές μη web standard τεχνολογίες (όπως Flash, Silverlight κτλ.) που δημιουργήθηκαν και μεγάλωσαν λόγω αυτής της αδυναμίας του web, αλλά όπως προανέφερα οι συγκεκριμένες τεχνολογίες δεν είναι web standards, αλλά εμπορικές λύσεις οι οποίες στηρίζονται σε browser plug ins.

Η HTML5 μας δίνει για πρώτη φορά την δυνατότητα να έχουμε γραφικά που δημιουργούνται κατευθείαν από την markup μας, κατευθείαν με κώδικα δηλαδή, τα οποία είναι μέρος της HTML και του DOM (πράγμα που σημαίνει πως θα αλληλεπιδρούν πολύ καλύτερα με τα υπόλοιπα elements της σελίδας μας, καθώς και με τα υπόλοιπα standards όπως για παράδειγμα CSS/Javascript) και που φυσικά είναι web standard.

Scalable Vector Graphics ή απλά SVG

Η πρώτη και πιο απλή τεχνολογία που μας προσφέρει η HTML5 ονομάζεται SVG (Scalable Vector Graphics), και στην ουσία πρόκειται για ένα καινούργιο tag (svg), το οποίο μπορεί να χρησιμοποιηθεί για να σχεδιάσουμε vector σχήματα κατευθείαν στον browser. Στο παρακάτω παράδειγμα σχεδιάζω ένα παραλληλόγραμμο με στρογγυλεμένες γωνίες, και το κείμενο "CSS3.gr" το οποίο είναι και αυτό μέρος του SVG γραφικού.

Το μεγαλύτερο πλεονέκτημα του SVG, σε σύγκριση με τους κλασικούς τύπους αρχείων που έχουμε αυτήν την στιγμή, είναι πως τα vector γραφικά δεν έχουν να κάνουν με pixels, μιας και σχεδιάζονται με μαθηματικές συναρτήσεις, οπότε δεν επηρεάζονται από τις αναλύσεις των οθονών. Το παραπάνω γραφικό είτε το δούμε στην οθόνη ενός iPhone, είτε σε κάποιο monitor υψηλής ανάλυσης, θα φαίνεται και στις δύο περιπτώσεις ακριβώς το ίδιο. Φανταστείτε πόσο βολικό θα είναι κάτι τέτοιο στο λογότυπο του site μας, το οποίο είναι σίγουρα είναι vector-based (όπως και τα περισσότερα άλλωστε interface γραφικά, όπως σχήματα με gradients, στρογγυλεμένες γωνίες, κτλ.). Εκτός από αυτό το πλεονέκτημα, το γραφικό θα γίνεται πολύ πιο γρήγορα render από τον browser λόγο του μικρότερου μεγέθους του (πρόκειται απλά για κώδικα και όχι για φόρτωμα κάποιου εξωτερικού αρχείου εικόνας), ενώ ο server μας θα δέχεται λιγότερα hits για τον ίδιο ακριβώς λόγο.

Η υποστήριξή αυτή την στιγμή βρίσκεται σε πολύ καλό επίπεδο μιας και οι περισσότεροι μοντέρνοι browsers (εκτός από τον Internet Explorer 8) υποστηρίζουν εγγενώς το συγκεκριμένο tag, αν και με ορισμένες παραξενιές. Προς το παρόν λοιπόν κανείς δεν υποστηρίζει κατευθείαν SVG markup μέσα στο document, πράγμα που σημαίνει πως πρέπει να κάνουμε embed τον SVG κώδικα. Ο Opera, ο Safari και ο Chrome μπορούν να κάνουν render SVG κώδικα μέσω του γνωστού μας image tag (img), ωστόσο ο Firefox - μέχρι αυτήν την στιγμή τουλάχιστον - "καταλαβαίνει" τον SVG κώδικα μόνο όταν γίνεται embed είτε μέσω του object tag (object) είτε μέσω iframe (iframe) (ρίξτε μια ματιά στο παράδειγμα). Οι browsers της Microsoft τώρα μπορούν να κάνουν render SVG κώδικα μόνο με την βοήθεια κάποιου εξωτερικού plug in, όπως του Adobe SVG Viewer.

Προσωπικά πιστεύω πως πολύ σύντομα οι περισσότεροι browsers θα μπορούν να κάνουν και κατευθείαν rendering SVG γραφικών, αν και γενικά το embed μέσω του image tag είναι ίσως σωστότερο τόσο σημασιολογικά όσο και πρακτικά (το ξεχωρίζουμε από την markup). Είναι λοιπόν θέμα χρόνου να δούμε τις νέες δυνατότητες που μας προσφέρει το SVG και στα site.

Επίλογος

Σε αυτό το πρώτο άρθρο, παρουσιάστηκε το πως λειτουργεί το SVG tag, σε τι χρησιμεύει και ποια είναι η μέχρι τώρα υποστήριξη από τους γνωστότερους browsers. Τα γραφικά καθώς και ο τρόπος που δημιουργούνται στην HTML5 είναι ένα αρκετά ριζοσπαστικό θέμα, μιας και για πρώτη φορά οι developers έχουν στην διάθεση τους κάτι περισσότερο από απλά αρχεία εικόνων, κάτι που αλλάζει τα μέχρι τώρα δεδομένα. Μείνετε συντονισμένοι, γιατί στο επόμενο άρθρο θα παρουσιάσουμε μια πολύ περίπλοκη αλλά και πολύ δυνατή τεχνολογία που έρχεται μαζί με την HTML5 και δεν είναι άλλη από το canvas - την δεύτερη τεχνολογία που έχει να κάνει με vector γραφικά στην HTML5.

Γιάννης Τσεβδός

Ο Γιάννης θεωρεί τον εαυτό του ευαγγελιστή των web standards και κάνει ότι περνάει από το χέρι του για να τα διαδώσει στο ελληνικό κοινό! Πιστεύει πως κάποτε θα τα καταφέρει…

Θέλεις το επόμενο κείμενο να είναι το δικό σου;

ΜΑΘΕ ΠΕΡΙΣΣΟΤΕΡΑ