css3.gr

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

Σε αυτό το δεύτερο μέρος θα ασχοληθούμε ίσως με το πιο δυνατό χαρακτηριστικό που μας προσφέρει η HTML5, το canvas element και το API του.

Το πολυδιαφημισμένο canvas element...

To canvas element, το οποίο υποστηρίζεται πλέον από τους περισσότερους μοντέρνους browsers, πρόκειται για ένα scriptable image tag (είναι ίσως η καλύτερη εξήγηση που έχω ακούσει για το συγκεκριμένο element), με το οποίο μπορούμε να σχεδιάσουμε δισδιάστατα - προς το παρόν τουλάχιστον - διανυσματικά γραφικά. Η καταχώρηση του μέσα μέσα στο DOM είναι πανεύκολη, όμως από εκεί και πέρα θα πρέπει να χρησιμοποιήσουμε το Javascript-based API του για να σχεδιάσουμε. Από θέμα markup λοιπόν, το canvas element δεν είναι τίποτα παραπάνω από μια απλούστατη γραμμή HTML5.

Ιδανικά καλό θα ήταν ο καμβάς μας να έχει και διαστάσεις (σε pixels), ένα μοναδικό id, και ίσως κάποιο μήνυμα ή ακόμα και κάποιο αρχείο εικόνας για τους browsers που δεν αναγνωρίζουν το εν λόγω tag. Αυτή είναι όλη η HTML5 που πρέπει να γράψουμε! Δυστυχώς όμως ο καμβάς δεν σχεδιάζει τίποτα από μόνος του. Κάποιος πρέπει να τον "προγραμματίσει"...

...και το API του

Όλος αυτός ο προγραμματισμός γίνεται μέσω της γνωστής μας Javascript, η οποία έρχεται εφοδιασμένη με ένα API μόνο γι αυτόν τον σκοπό (εάν φυσικά υποστηρίζει το canvas element ο browser μας). Τα πράγματα εδώ δυσκολεύουν λίγο (λίγο όμως), αλλά και η ελευθερία έκφρασης μεγαλώνει, μιας και στην διάθεση μας έχουμε ότι θα θέλαμε από ένα σχεδιαστικό πρόγραμμα, όπως paths, γραμμές (lines), strokes, fill colors, gradients, απλά σχήματα όπως κύκλους και τετράγωνα, κείμενο, σκιάσεις και πολλά ακόμα. Όσοι θέλουν να δουν πως είναι να σχεδιάζεις με κώδικα, και όχι με κάποιο drawing εργαλείο (όπως το Illustrator για παράδειγμα), ας ρίξουν μια ματιά στον κώδικα του παραδείγματος.

Όπως μπορείτε να δείτε σε αυτό το απλούστατο παράδειγμα (που σχεδιάζει το λογότυπο του CSS3.gr), απλά επιλέγουμε από το DOM το canvas element (γραμμή 2), και αφού σιγουρευτούμε πως ο browser υποστηρίζει το canvas element (γραμμή 4) του δίνουμε ένα context για να ξεκινήσουμε να σχεδιάζουμε πάνω σε αυτό, το οποίο προς το παρόν μπορεί να είναι μόνο δισδιάστατο (2D). Από εκεί και πέρα δημιουργούμε τα gradients που θα χρησιμοποιήσουμε στα σχήματα μας (γραμμές 9-22), το ορθογώνιο που χρησιμεύει ως background και τέλος τα κείμενα μας ("CSS" και "3") με την σκίαση και τα gradient τους (γραμμές 24-42).

Όπως βλέπετε το API δεν είναι ιδιαίτερα πολύπλοκο, ενώ η ονοματολογία των εντολών του βοηθάει πάρα πολύ, μιας και οι περισσότεροι καταλαβαίνουμε, ή έστω ξέρουμε τι να περιμένουμε από ονομασίες όπως, fillStyle, strokeStyle, addColorStop κτλ.

Πότε χρησιμοποιούμε SVG και πότε canvas;

Πολλοί θα αναρωτιέστε ήδη, μα καλά γιατί η HTML5 έχει 2 διαφορετικούς τρόπους/τεχνολογίες για το ίδιο ακριβώς πράγμα; Με αυτήν την λογική γιατί χρειαζόμαστε και χρησιμοποιούμε διαφορετικούς τύπους αρχείων γραφικών, όπως jpg, png και gif, και δεν κρατάμε απλά έναν. Κάνουν το ίδιο πράγμα διαφορετικά, οπότε καλό θα ήταν να γνωρίζουμε που είναι καλύτερο να χρησιμοποιούμε SVG και που canvas.

Η SVG τεχνολογία είναι ιδανική για την απεικόνιση λογοτύπων, γραφικών του interface, και γενικότερα πιο "στατικών" γραφικών τα οποία θέλουμε να προσαρμόζονται σε διάφορες αναλύσεις. Αντιθέτως εάν θέλουμε να δημιουργήσουμε γραφήματα από live δεδομένα, πολύπλοκα animation ή ακόμα και παιχνίδια, μέσα σε μια συγκεκριμένη περιοχή (μετρημένη σε pixels) τότε η χρήση του canvas είναι μάλλον αναπόφευκτη. Σαν γενική αρχή μπορούμε να έχουμε στο μυαλό μας πως το SVG πρόκειται για μια τεχνολογία διανυσματικών γραφικών σε πιο υψηλό επίπεδο από το canvas όπου πρέπει να βουτήξουμε σε χαμηλότερο (API, contexts, κώδικας, κτλ.).

Ένα πολύ καλό παράδειγμα που κάνει σωστή χρήση και των δύο τεχνολογιών, μπορείτε να δείτε στα real-time download στατιστικά του Firefox, ενώ περισσότερα demo για το canvas μπορείτε να βρείτε σε αυτήν την φοβερή συλλογή (με διαφορά το αγαπημένο μου είναι το Browser Ball).

Επίλογος

Ελπίζω να βρήκατε ενδιαφέρον και αυτό το άρθρο το οποίο παρουσιάζει το πιο διαφημισμένο χαρακτηριστικό της HTML5. Μην ξεχνάτε πως μπορείτε να χρησιμοποιήσετε εδώ και τώρα το canvas element, αφού υποστηρίζεται από όλους τους μοντέρνους browsers, ενώ με διάφορες αλχημείες μπορείτε να το χρησιμοποιήσετε και σε Internet Explorer. Οι πρώτες δύο τεχνολογίες που παρουσιάσαμε, σίγουρα θα χρησιμοποιούνται όλο και περισσότερο, μιας και εκτός από πανίσχυρες, λύνουν τα χέρια μας σε πολλά θέματα που έχουν να κάνουν με γραφικά στο web (από θέματα bandwidth, αναλύσεις οθονών, animation/δυναμικά γραφικά και γραφήματα κτλ.).

Τέλος, μείνετε συντονισμένοι στο CSS3 γιατί στο επόμενο μέρος του άρθρου θα μιλήσουμε για το video element και το API του.

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

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

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

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