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

Transcript

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

2 Τι είναι η HTML???? Με απλά λόγια, μία ιστοσελίδα (HTML αρχείο) ) είναι ένα αρχείο κειμένου που δημιουργήθηκε χρησιμοποιώντας Hypertext Markup Language (HTML) ώστε να φαίνεται σε ένα Web browser. Τι σημαίνει λέξη λέξη: Hypertext (Υπερκείμενο) είναι η ενέργεια που μεταφέρεται από αρχείο σε αρχείο (σελίδα σελίδα). Ουσιαστικά είναι ο σύνδεσμος μεταξύ των σελίδων. Markup Tags (ετικέτες σήμανσης) που εφαρμόζουν αλλαγές σε απλό κείμενο. Το κείμενο «σημαίνεται» με ετικέτες. Language (Γλώσσα) διότι η HTML θεωρείται γλώσσα προγραμματισμού.

3 Τι είναι η σήμανση (Markup)? Ο κώδικας στην HTML αποτελείται από κείμενο που το περιβάλουν ετικέτες (tags).) Οι ετικέτες υποδεικνύουν που θα εφαρμοστεί η τροποποίηση, πως θα φαίνεται η σελίδα, ποιες εικόνες θα τοποθετηθούν και πολλά άλλα.. Για παράδειγμα εάν θέλαμε να αποτυπώσουμε το παρακάτω κείμενο στη σελίδα μας. Everything is on sale. Επειδή στην HTML, δεν υπάρχουν κουμπιά όπως σε έναν επεξεργαστή κειμένου πρέπει να σημανθεί το κείμενο που πρέπει να γίνει πλάγιο. Ο «κώδικας που θα χρησιμοποιηθεί είναι το <i>. Ετσι ο κώδικας για το παραπάνω κείμενο έχει ως εξής <i>everything</i> is on sale.

4 HTML Timeline

5 INTERNET

6 INTERNET

7 HTML 5 Τι είναι η HTML5? H HTML5 θα γίνει η επόμενη γενιά της HTML. Η προηγούμενη έκδοση της HTML, η HTML 4.01, δημιουργήθηκε το Η HTML5 ακόμα αναπτύσσεται. Οι πιο διαδεδομένοι browsers χρησιμοποιούν ήδη στοιχεία της 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 θα είναι ανεξάρτητη από τη συσκευή Η ανάπτυξη θα είναι εμφανής στο κοινό.

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

9 To στοιχείο Canvas To στοιχείο canvas παρέχει ένα API (application program interface) t f ) για δισδιάστατη δ ζωγραφική. (γραμμές, γεμίσματα, εικόνες, κείμενο κ.ο.κ.). Υπαρκτό παράδειγμα των δυνατοτήτων του ως στοιχείο είναι η κατασκευή του MS Paint καθώς και web based applications που δημιουργούν vector γραφικά. Ανάλογες εφαρμογές έχουν αναπτυχθεί και σε κινητές συσκευές όπως iphone και συσκευές android. To canvas έχει ήδη χρησιμοποιηθεί σε μεγάλο αριθμό εφαρμογών (κινούμενα φόντα, εφαρμογές πολυμέσων, παιχνίδια, κλπ.). Η εφαρμογή του ως στοιχείο φαίνεται να έχει απεριόριστες προς το παρόν δυνατότητες.

10 Canvas part II Ό φέ θ δί λίδ φά ό ύ δ ύ ά Όπως προαναφέρθηκε δίνει στις σελίδες μια επιφάνεια όπου μπορούν να σχεδιαστούν αρκετά σχήματα όπως, τετράγωνα, κύκλοι, ελλείψεις, καμπύλες, κείμενο, κλπ. Υποστηρίζεται από όλους τους σύγχρονους Browsers Οι σελίδες μπορούν να έχουν περισσότερα από ένα canvas. Tα περιεχόμενα του canvas δημιουργούνται on the fly χρησιμοποιώντας script Tα περιεχόμενα του canvas δημιουργούνται on the fly χρησιμοποιώντας script O canvas έχει ύψος και πλάτος και αρχικά είναι αόρατος. Οι ιδιότητές του μπορούν να οριστούν αλλα και να αλαχθούν

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

12 Άλλα γραφικά στοιχεία Σημαντική προσθήκη στην HTML5 είναι η δυνατότητα χρήσης Scalable Vector Graphics (.svg). Γραφικά που δημιουργούνται σε προγράμματα όπως το illustrator μπορούν να αποθηκευτούν σαν.svg αρχεία και να τοποθετηθούν στις ιστοσελίδες. Λόγω της φύσης τους τα αρχεία svg δεν παραμορφώνονται από την αυξομείωση όπως οι εικόνες. Το SVG δεν μπορεί να αποτελέσει στοιχείοcanvas αλλά μπορούν να συνεργαστούν. Η HTML5 μπορεί επίσης να διαχειριστεί αρκετές μορφές αρχείων εικόνων όπως GIF, JPG, PNG with layers κ.α. καθώς επίσης να τα παραμορφώσει, να τα περιστρέψει, κ.α.

13 Ήχος και Video Ήχος H προσθήκη ήχου στις ιστοσελίδες μπορεί να δημιουργήσει ελκυστικότερα sites. Με τον ήχο μπορούν να προστεθούν πληροφορίες, ηχητικά εφέ τα οποία προσθέτουν ενδιαφέρον. Ενδιαφέρον παρουσιάζει η ευκολία χρήσης όπως παρακάτω. Η πιο βασική μορφή αναπαραγωγής εμφανίζεται στον κώδικα που ακολουθεί. <audio src= jazz.mp3 ></audio> Video Επίσης η HTML5 έχει τη δυνατότητα να προσθέσει video. Έως τώρα συνήθης πρακτική ήταν να φορτώνει το βίντεο μέσω του φλας. Πλέον είναι εφικτό να φορτώνεται το βίντεο να προβάλλεται κατευθείαν σε μια ιστοσελίδα. Φορμά που υποστηρίζονται έως τώρα είναι : H.264:.mp4 and.mov OGG:.ogv WebM:.webm 3GP:.3gp

14 HTML5 + JavaScript = LFE L.F.E. Πώς κινούνται τα γραφικά που κατασκευάζονται με το canvas? Η απάντηση βρίσκεται στην προγραμματική γλώσσα που χρησιμοποιούν οι σύγχρονοι browsers την javascript. Με αυτή τη γλώσσα ότι κατασκευάζεται με το canvas σχεδιάζεται, κινείται παίρνει ζωή και καταστρέφεται Javascript Καταρχάς δεν είναι ούτε έχει σχέση με την Java. Χρησιμοποιείται ώστε να προσθέσει επιπλέον λειτουργικότητα στις ιστοσελίδες και τις εφαρμογές. Σχεδιάστηκε ώστε να προσθέσει λειτουργικότητα στις ιστοσελίδες, είναι μια γλώσσα scripting, Jείναι συνήθως ενσωματωμένη στις ιστοσελίδες, δεν χρειάζεται άδεια χρήσης Τι κάνει η JavaScript? Η JavaScript δίνει στους HTML designers ένα προγραμματιστικό εργαλείο JavaScript αντιδρά σε γεγονότα JavaScript διαβάζει και γράφει στοιχεία HTML JavaScript μπορεί να επικυρώσει δεδομένα JavaScript μπορεί να ανιχνεύσει τον browser του επισκέπτη JavaScript μπορεί να δημιουργήσει cookies

15

16 CSS Υπάρχει και αυτό.!! Τα Cascading Style Sheets (CSS) είναι μια γλώσσα που χρησιμοποιείται ώστε να περιγράψει την παρουσίαση Τα Cascading Style Sheets (CSS) είναι μια γλώσσα που χρησιμοποιείται ώστε να περιγράψει την παρουσίαση ενός αρχείου γραμμένου σε HTML, ή markup Language. Βασικά χωρίζει το περιεχόμενο του αρχείου με το στυλ του αρχείου που περιλαμβάνει, χρώματα, φόντα, γραμματοσειρές και θέση. Για την html5 χρησιμοποιείται η CSS3.

17 Εργαλεία δημιουργίας 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 Web. 10. Google Chrome, Firefox, Safari, Opera, Άντε και τον Internet Explorer. 11. Dreamweaver, (Όχι πλήρως).

18 HTML5 Example

19

20 Animation NOW!!!

21

22

23

24 HTML5 and WebGL WbGL(W WebGL (Web based bb dgraphics Library) ) είναι μια βιβλιοθήκη βλ που επεκτείνει τις ικανότητες της JavaScript, καθώς επιτρέπει την δημιουργία interactive τρισδιάστατων γραφικών σε κάθε συμβατό web browser. H WebGL χρησιμοποιεί τον επεξεργαστή του υπολογιστή οποίος πρέπει να κάνει shader hd rendering. H WebGL είναι περιεχόμενο του στοιχείου canvas της HTML που παρέχει τρισδιάστατα γραφικά χωρίς τη χρήση plug ins. Εμφανίστηκε πρώτα την 3 η Μάρτιου WebGL αναπτύσσεται από την khronos group.

25

26

27 Links / / html5 websites simply amazinghtml5 canvas and javascript animations

28 Βιβλιογραφία HTML5 Graphics and Animation with Canvas (c) ()Lynda.com (video tutorial) t Introducing HTML5 Bruce Lawson and Remy Sharp TheHTMLPocketGuide BruceByslop HTML5: 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