Animation με χρήση HTML 5Στέλιος Σκουρλής

Τι είναι η HTML????Τι είναι η HTML????Μ λά λό ί λίδ (HTML ί ) ί έ ί έΜε απλά λόγια, μία ιστοσελίδα (HTML αρχείο) είναι ένα αρχείο κειμένου που 

δημιουργήθηκε χρησιμοποιώντας Hypertext Markup Language (HTML) ώστε να φαίνεται σε έναWeb browser. Τι σημαίνει λέξη λέξη:

• Hypertext  (Υπερκείμενο) είναι η ενέργεια που μεταφέρεται από αρχείο σε αρχείο (σελίδα σελίδα). Ουσιαστικά είναι ο σύνδεσμος μεταξύ των σελίδων.

• Markup Tags (ετικέτες σήμανσης) που εφαρμόζουν αλλαγές σε απλό κείμενο. Το κείμενο «σημαίνεται» με ετικέτες.

• Language (Γλώσσα) διότι η HTML θεωρείται γλώσσα προγραμματισμού.Language (Γλώσσα) διότι η HTML θεωρείται γλώσσα προγραμματισμού.

Τι είναι η σήμανση (Markup)?Τι είναι η σήμανση (Markup)?

Ο ώδ HTML λ ί ό ί βάλ έ (t ) Ο έΟ κώδικας στην HTML αποτελείται από κείμενο που το περιβάλουν ετικέτες (tags). Οι ετικέτες υποδεικνύουν που θα εφαρμοστεί η τροποποίηση, πως θα φαίνεται η σελίδα, ποιες εικόνες θα τοποθετηθούν και πολλά άλλα..

Για παράδειγμα εάν θέλαμε να αποτυπώσουμε το παρακάτω κείμενο στη σελίδα μαςΓια παράδειγμα εάν θέλαμε να αποτυπώσουμε το παρακάτω κείμενο στη σελίδα μας.

Everything is on sale.

Επειδή στην HTML δεν υπάρχουν κουμπιά όπως σε έναν επεξεργαστή κειμένου πρέπει ναΕπειδή στην HTML, δεν υπάρχουν κουμπιά όπως σε έναν επεξεργαστή κειμένου πρέπει να σημανθεί το κείμενο που πρέπει να γίνει πλάγιο. Ο «κώδικας που θα χρησιμοποιηθεί είναι το <i>. Ετσι ο κώδικας για το παραπάνω κείμενο έχει ως εξής

<i>Everything</i> is on sale.y g /

HTML TimelineHTML Timeline

INTERNET

INTERNET

HTML 5HTML 5Τ ί HTML5?Τι είναι η HTML5?• H HTML5 θα γίνει η επόμενη γενιά της HTML.• Η προηγούμενη έκδοση της HTML, η HTML 4.01, δημιουργήθηκε το 1999.• Η HTML5 ακόμα αναπτύσσεται. Οι πιο διαδεδομένοι browsers χρησιμοποιούν ήδη στοιχεία 

HTML5της HTML5.

Πως ξεκίνησε η  HTML5?• H HTML5 είναι αποτέλεσμα της συνεργασίας του World Wide Web Consortium (W3C) και του 

Web Hypertext Application Technology Working Group (WHATWG).• WHATWG εργαζόταν σε φόρμες web και εφαρμογές και η W3C εργαζόταν με την XHTML 2.0. 

το 2006, αποφάσισαν να συνεργαστούν για τη δημιουργία της νέας HTML.

ή έ όΔημιουργήθηκαν νέοι κανόνες για το HTML5 :• Νέες λειτουργίες βασισμένες στην HTML, CSS, DOM (Document Object Model), και την 

JavaScript• Μείωση των εξωτερικών plugins (like Flash)• Καλύτερος έλεγχος λαθών.• More markup to replace scripting• HTML5 θα είναι ανεξάρτητη από τη συσκευή• Η ανάπτυξη θα είναι εμφανής στο κοινό.

Εισαγωγή στην HTML 5Εισαγωγή στην HTML 5

Νέα στοιχεία HTML5:• Tο στοιχείο <canvas> για δισδιάστατα γραφικά• Τα στοιχεία <video> και <audio> για αναπαραγωγή βίντεο και ήχου• Καλύτερη υποστήριξη για τοπική offline storage• Νέα στοιχεία περιεχομένου όπως, <article>, <footer>, <header>, <nav>, <section>• Νέες φόρμες ελέγχου όπως calendar, date, time, email, url, search• Υποστήριξη από Browser• Η HTML5 δεν είναι ακόμα επίσημη σταθερά οπότε δεν έχουν όλοι browsers πλήρη υποστήριξη HTML5.• Οι μεγαλύτεροι browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) προσθέτουν διαρκώς νέα στοιχείαHTML5.

To στοιχείο CanvasTo στοιχείο CanvasT ί έ έ API ( li ti i t f ) δ δ ά ζ φ ήTo στοιχείο canvas παρέχει ένα API (application program interface) για δισδιάστατη ζωγραφική. 

(γραμμές, γεμίσματα, εικόνες, κείμενο κ.ο.κ.). Υπαρκτό παράδειγμα των δυνατοτήτων του ως στοιχείο είναι η κατασκευή του MS Paint καθώς και web based applications που δημιουργούν vector γραφικά.

Ανάλογες εφαρμογές έχουν αναπτυχθεί και σε κινητές συσκευές όπως iphone και συσκευές android.To canvas έχει ήδη χρησιμοποιηθεί σε μεγάλο αριθμό εφαρμογών (κινούμενα φόντα, εφαρμογές 

πολυμέσων, παιχνίδια, κλπ.). Η εφαρμογή του ως στοιχείο φαίνεται να έχει απεριόριστες προς το παρόν δυνατότητες.ρ η ς

Canvas part IICanvas part IIΌ φέ θ δί λίδ φά ό ύ δ ύ ά• Όπως προαναφέρθηκε δίνει στις σελίδες μια επιφάνεια όπου μπορούν να σχεδιαστούν αρκετά σχήματα όπως, τετράγωνα, κύκλοι, ελλείψεις, καμπύλες, κείμενο, κλπ.

• Υποστηρίζεται από όλους τους σύγχρονους Browsers• Οι σελίδες μπορούν να έχουν περισσότερα από ένα canvas.• Tα περιεχόμενα του canvas δημιουργούνται on the fly χρησιμοποιώντας script• Tα περιεχόμενα του canvas δημιουργούνται on‐the‐fly χρησιμοποιώντας script• O canvas  έχει ύψος και πλάτος και αρχικά είναι αόρατος.• Οι ιδιότητές του μπορούν να οριστούν αλλα και να αλαχθούν

Στοιχεία του canvasΣτοιχεία του canvas

Άλλα γραφικά στοιχείαΆλλα γραφικά στοιχείαΣ ή θή HTML5 ί δ ό ή S l bl V t G hi ( )Σημαντική προσθήκη στην HTML5 είναι η δυνατότητα χρήσης Scalable Vector Graphics (.svg) .

Γραφικά που δημιουργούνται σε προγράμματα όπως το illustrator μπορούν νααποθηκευτούν σαν .svg αρχεία και να τοποθετηθούν στις ιστοσελίδες. Λόγω της φύσηςτους τα αρχεία svg δεν παραμορφώνονται από την αυξομείωση όπως οι εικόνες.

Το SVG δεν μπορεί να αποτελέσει στοιχείο canvas αλλά μπορούν να συνεργαστούν.

Η HTML5 μπορεί επίσης να διαχειριστεί αρκετές μορφές αρχείων εικόνων όπως GIF, JPG, PNGwith layers κ.α. καθώς επίσης να τα παραμορφώσει, να τα περιστρέψει, κ.α.

Ήχος και VideoΉχος και VideoΉΉχοςH προσθήκη ήχου στις ιστοσελίδες μπορεί να δημιουργήσει ελκυστικότερα sites. Με τον ήχο 

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

εμφανίζεται στον κώδικα που ακολουθείεμφανίζεται στον κώδικα που ακολουθεί.

• <audio src=”jazz.mp3”></audio>

VideoVideoΕπίσης η HTML5 έχει τη δυνατότητα να προσθέσει video. Έως τώρα συνήθης πρακτική ήταν να 

φορτώνει το βίντεο μέσω του φλας. Πλέον είναι εφικτό να φορτώνεται το βίντεο να προβάλλεται κατευθείαν σε μια ιστοσελίδα.

Φορμά που υποστηρίζονται έως τώρα είναι :

• H.264: .mp4 and .mov• OGG: .ogv• WebM: .webm• 3GP: .3gp

HTML5 + JavaScript = L F EHTML5 + JavaScript = L.F.E.Πώ ύ φ ά άζ ? Η ά β ίΠώς κινούνται τα γραφικά που κατασκευάζονται με το canvas? Η απάντηση βρίσκεται στην 

προγραμματική γλώσσα που χρησιμοποιούν οι σύγχρονοι browsers την javascript. Με αυτή τη γλώσσα ότι κατασκευάζεται με το canvas  σχεδιάζεται, κινείται παίρνει ζωή και καταστρέφεται

JavascriptJavascript• Καταρχάς δεν είναι ούτε έχει σχέση με την Java. Χρησιμοποιείται ώστε να προσθέσει επιπλέον 

λειτουργικότητα στις ιστοσελίδες και τις εφαρμογές.• Σχεδιάστηκε ώστε να προσθέσει λειτουργικότητα στις ιστοσελίδες, είναι μια γλώσσα scripting, Jείναι 

συνήθως ενσωματωμένη στις ιστοσελίδες, δεν χρειάζεται άδεια χρήσης

Τι κάνει η JavaScript?

• Η JavaScript δίνει στους HTML designers ένα προγραμματιστικό εργαλείο• JavaScript αντιδρά σε γεγονόταp ρ• JavaScript διαβάζει και γράφει στοιχεία HTML• JavaScript μπορεί να επικυρώσει δεδομένα• JavaScript μπορεί να ανιχνεύσει τον browser του επισκέπτη• JavaScript μπορεί να δημιουργήσει cookies

CSS Υπάρχει και αυτό !CSS… Υπάρχει και αυτό.!Τα Cascading Style Sheets (CSS) είναι μια γλώσσα που χρησιμοποιείται ώστε να περιγράψει την παρουσίασηΤα Cascading Style Sheets (CSS) είναι μια γλώσσα που χρησιμοποιείται ώστε να περιγράψει την παρουσίαση 

ενός αρχείου γραμμένου σε HTML, ή markup Language. Βασικά χωρίζει το περιεχόμενο του αρχείου με το στυλ του αρχείου που περιλαμβάνει, χρώματα, φόντα, γραμματοσειρές και θέση. Για την html5 χρησιμοποιείται η CSS3.

Εργαλεία δημιουργίας HTML 5Εργαλεία δημιουργίας HTML 5

1. Notepad….!!! Ή επεξεργαστή κειμένου.2. Adobe Dreamweaver.3. Hype debuts (Mac).4. Adobe Edge.5. Online software (Mercury, Aloha Editor, Alpha editor, rendera, Maqetta, κλπ).6. Flux 3 (Mac).7. Textmate (Mac).8. Coda (Mac).9 Aptana Web9. Aptana Web.10. Google Chrome, Firefox, Safari, Opera, Άντε και τον Internet Explorer.11. Dreamweaver,  (Όχι πλήρως).

HTML5 ExampleHTML5 Example

Animation NOW!!!Animation… NOW!!!

HTML5 and WebGLHTML5 and WebGLW bGL (W b b d G hi Lib ) ί β βλ θή ί• WebGL (Web‐based Graphics Library) είναι μια βιβλιοθήκη που επεκτείνει τις ικανότητες της JavaScript, καθώς επιτρέπει την δημιουργία interactive τρισδιάστατων γραφικών σε κάθε συμβατό web browser. H WebGLχρησιμοποιεί τον επεξεργαστή του υπολογιστή οποίος πρέπει να ά h d d iκάνει  shader rendering.

• H WebGL είναι περιεχόμενο του  στοιχείου canvas της HTML που παρέχει τρισδιάστατα γραφικά χωρίς τη χρήση plug‐ins. Εμφανίστηκε πρώτα την 3ηΜάρτιου 2011. WebGL αναπτύσσεται από την khronos group.

LinksLinksh // 3 /• http://www.w3.org/

• http://www.w3schools.com/html5/default.asp• http://forums.pinstack.com/f214/html5_animation_examples‐

118598/• http://www.ebizmba.com/articles/best‐html5‐websites• http://html5gallery.com/http://html5gallery.com/• http://www.queness.com/post/3885/8‐simply‐amazing‐

html5‐canvas‐and‐javascript‐animations

ΒιβλιογραφίαΒιβλιογραφίαHTML5 G hi d A i ti ith C ( ) L d ( id t t i l)• HTML5 Graphics and Animation with Canvas (c) Lynda.com (video tutorial)

• Introducing HTML5 ‐ Bruce Lawson and Remy Sharp• The�HTML�Pocket�Guide ‐ Bruce�Byslop• HTML5: The Missing Manual ‐ by Matthew MacDonaldHTML5: The Missing Manual  by Matthew MacDonald• HTML5 Canvas ‐ by Steve Fulton and Jeff Fulton• HTML5 Multimedia: Develop and Design ‐ Ian Devlin• HTML5 for web designers – Jeremy Keith