Σύγκριση FLASH και HTML 5 HTML 5 σχετικά με την υποστήριξη πολυμέσων

Transcript

1 ΓΤΠ61 καθηγητής-σύμβουλος Δημήτριος Ζευγώλης Εργασία του Κ. Μακρόπουλου Σύγκριση FLASH και HTML 5 HTML 5 σχετικά με την υποστήριξη πολυμέσων 1

2 Εισαγωγή Το έτος 2009 υπολογίζεται ότι περισσότεροι από 1,5 δισεκατομμύρια άνθρωποι ειχαν πρόσβαση στο διαδίκτυο: Στις ΗΠΑ 220 εκατ., Στην Κίνα 338 εκατ., Στην Γερμανία 55 εκατ., στην Ρωσία 38 εκατ., Στην Βραζιλία 67 εκατ. Σύμφωνα με τα δεδομένα από το Google στα μέσα του 2008 ειχαν καταγραφεί 1 τρισεκατομμύριο ιστοσελίδες να υπάρχουν στον παγκόσμιο ιστό (World Wide Web). 2

3 Μέχρι το 1990 η ανταλλαγή δεδομένων μέσω Internet ήταν σχετικά δύσκολη. Ο Tim Berners-Lee (σημερινός πρόεδρος του W3C), βρήκε τον τρόπο να αναφέρει εύκολα παραπομπές κειμένου στο Διαδίκτυο μέσω συνδέσεων «υπερκειμένου.» Με μια απλή γλώσσα σήμανσης,την ΗΤML. Ο όρος «υπερκείμενο» σήμαινε αρχικά κείμενο αποθηκευμένο σε ηλεκτρονική μορφή με συνδέσεις παραπομπών μεταξύ των σελίδων. 3

4 Μέχρι το 1993 περίπου 100 υπολογιστές σε όλο τον κόσμο εξυπηρετούσαν HTML σελίδες. Αυτές οι διασυνδεμένες σελίδες έγιναν το World Wide Web (www) και γράφτηκαν προγράμματα Web Browser για την προβολή των ιστοσελίδων. Τώρα περισσότεροι από 110 εκατ. Web Διακομιστές απαντούν σε αιτήματα για περισσότερα από 25 δισεκατομμύρια αρχεία κειμένου και πολυμέσων. 4

5 Η αρχικά απλή γλώσσα Hypertext Markup Language (HTML) υιοθετήθηκε. Ήταν μια γλώσσα για την περιγραφή του τρόπου που οργανώνεται ένα κείμενο.αργότερα επεκτάθηκε στα γραφικά, σε αρχεία που περιέχουν άλλες πληροφορίες,και στον τρόπο που συνδέονται μεταξύ τους, ετσι ώστε τώρα ο όρος «υπερκείμενο» αναφέρεται σε πολλά διαφορετικά αντικείμενα όπως εικόνες, γραφικά, βίντεο, αρχεία ήχου κ.λπ. 5

6 Η HTML όταν ξεκίνησε υποστήριζε κυρίως επιστημονικά έγγραφα που αντάλλασσαν μεταξύ τους διάφοροι επιστήμονες. Όταν μετατράπηκε από μικρή καθαρή γλώσσα σήμανσης για τους ερευνητές, σε μια online γλωσσα δημοσίευσης, και καθορίστηκε ότι η HTML θα μπορούσε να βελτιωθεί για γραφική περιήγηση, οι δημιουργοί των Web Browser άρχισαν να προσθέτουν πολλές λειτουργίες στην γλώσσα, με αποτέλεσμα να εμφανίζονται ασυνέπειες από τους Browsers στην εμφάνιση των ιστοσελίδων,λόγω της αλλοίωσης της αρχικής σχεδίασης της HTML. 6

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

8 Ετσι δημιουργήθηκε η ανάγκη να επανακαθοριστεί ο σχεδιασμός της ΗTML. Σαν βασικός οδηγός χρησιμοποιήθηκε η γλώσσα σήμανσης XML (Extensible Markup Language) η οποία είναι μια γενική γλωσσα που παρέχει δομή και ένα σύνολο κανόνων με τους οποίους θα πρέπει να συμμορφώνεται οποιαδήποτε γλώσσα σήμανσης. 8

9 Η φυσική συγχώνευση των HTML και XML οδήγησε στην συμμόρφωση της HTML στην δομή και στους κανόνες της XML. Έτσι δημιουργήθηκε μια νέα έκδοση της HTML που είναι συμβατή με την XML ακολουθώντας τους κανόνες της, και είναι γνωστή σαν ΧΗTML. Για ακόμα καλύτερα αποτελέσματα, από το 2006 εχει αρχίσει μια προσπάθεια για σημαντική βελτίωση της XHTML που ονομάζεται HTML5 και θα είναι το επόμενο Web πρότυπο. 9

10 HTML 5 Η HTML 5 το νέο πρότυπο για HTML, XHTML, HTML DOM, είναι σε εξέλιξη, αλλά τα περισσότερα σύγχρονα προγράμματα περιήγησης της παρέχουν κάποια υποστήριξη. Η HTML 5 είναι προϊόν συνεργασίας μεταξύ του W3C (World Wide Web Consortium) και του WHATWG (Web Hypertext Application techonology Working Group). Το WHATWG δούλευε με Web φόρμες και εφαρμογές, ενώ το W3C με την HTML 2.0. To 2006 αποφάσισαν να συνεργαστούν και να δημιουργήσουν μια νέα έκδοση της HTML. 10

11 Θεσπίσθηκαν κάποιες προδιαγραφές για την HTML 5 που είναι: Οι νέες δυνατότητες θα πρέπει να βασίζονται στις HTML, CSS (Cascading Style Sheets), Java, Nα μειωθεί η ανάγκη για εξωτερικά plugins όπως το flash. Να γίνεται καλύτερος χειρισμός των σφαλμάτων Η διαδικασία ανάπτυξης θα πρέπει να είναι εμφανής στο κοινό. 11

12 Μερικά από τα νέα ενδιαφέροντα χαρακτηριστικά της HTML 5 είναι: 12

13 1. Το στοιχείο καμβάς για την σχεδίαση. To στοιχείο του καμβά χρησιμοποιείται για την σχεδίαση γραφικών σε μια σελίδα. Στην HTML5 χρησιμοποιείται η γλώσσα Java Script για την σχεδίαση. Ο καμβάς είναι μια ορθογώνια περιοχή που μπορεί να ασκηθεί έλεγχος σε κάθε εικονοστοιχείο (pixel). Διαθέτει αρκετές μεθόδους σχεδίασης. Το στοιχείο καμβάς δεν εχει δικές του σχεδιαστικές δυνατότητες, η σχεδίαση γίνεται σε περιβάλλον Java Script. 13

14 2.Τα στοιχεία βίντεο και ήχου για την αναπαραγωγή πολυμέσων Η HTML5 παρέχει ένα πρότυπο για προβολή βίντεο. Μέχρι σήμερα τα περισσότερα βίντεο προβάλλονται μέσα από plugin όπως το flash. Επί του παρόντος υπάρχουν 3 υποστηριζόμενες μορφές βίντεο: form at IE 8 FireFo x Opera Chro me Safari Ogg MPEG WebM

15 Για τον ήχο η HTML5 παρέχει ένα πρότυπο. Μέχρι σήμερα οι ήχοι συνήθως αναπαράγονταν μέσα από plugin όπως το flash. Επί του παρόντος υπάρχουν 3 υποστηριζόμενες μορφές ήχου: form at IE 8 FireFo x Opera Chro me Safari Ogg Vorbis ναι ναι ναι MP3 ναι ναι Wav ναι ναι ναι 15

16 Πίνακας νέων στοιχείων πολυμέσων Η HTML5 παρέχει νέα πρότυπα για πολυμέσα: Ετικέτα Περιγραφή <audio> Για το περιεχόμενο πολυμέσων, ήχους, μουσική, ή άλλα ηχητικά. <video> Για το περιεχόμενο βίντεο, όπως ένα κλίπ ταινίας, ή άλλες ροές βίντεο. <source> Για πόρους μέσων, για στοιχεία μέσων, για στοιχεία βίντεο ή ήχου που εχουν οριστεί. <embed> Για ενσωματωμένο περιεχόμενο, όπως είναι ένα plug in 16

17 Η HTML 5 δεν είναι ακόμη επίσημο πρότυπο και δεν έχει πλήρη υποστήριξη από τα προγράμματα περιήγησης, αλλά οι μεγαλύτερες μηχανές αναζήτησης όπως: Safari, Chrome, Firefox, Opera, Internet explorer, συνεχίζουν να προσθέτουν νέα HTML 5 χαρακτηριστικά στις ανανεωμένες εκδόσεις τους. 17

18 Flash Το Adobe Flash είναι μια πλατφόρμα εφαρμογών πολυμέσων, και χρησιμοποιείται ευρύτατα για την επεξεργασία σχεδιοκίνησης, την πρόσθεση βίντεο,ήχου, διαδραστικότητας, σε ιστοσελίδες του Διαδικτύου. Επίσης χρησιμοποιείται σε διαφημίσεις και παιχνίδια. 18

19 Το Adobe Flash χειρίζεται διανυσματικά και raster γραφικά. Το περιεχόμενο του Flash μπορεί να εμφανίζεται σε διάφορα συστήματα υπολογιστών και συσκευών μέσω του Adobe Flash Player το οποίο είναι διαθέσιμο δωρεάν σε κοινά προγράμματα περιήγησης στο Web, σε κινητά τηλ. Και σε άλλες ηλεκτρονικές συσκευές. Περιέχει την γλώσσα Action Script. 19

20 Σύγκριση Adobe flash και HTML 5 Στον ιστότοπο της η Apple πληροφορεί ότι κάθε νέα φορητή συσκευή της, και κάθε νέο Mac, μαζί με την τελευταία έκδοση του Safari Web Browser, υποστηρίζει τα Web standards όπως HTML 5, CSS 3, και Java Script. Αυτά επιτρέπουν στους σχεδιαστές να δημιουργήσουν προηγμένα γραφικά, animation, τυπογραφικά κ.λπ. 20

21 Ο διευθύνων σύμβουλος της Apple, Steeve Jobs τον Απρίλιο του 2010 δίνει την εκδοχή της εταιρείας για την HTML 5 και το Flash. Μεταξύ άλλων αναφέρει: Το Flash δημιουργήθηκε την εποχή του PC και την χρήση ποντικιού. Στην εποχή μας των κινητών συσκευών που απαιτούν χαμηλή ισχύ,των οθονών αφής και των ανοικτών προτύπων ιστού το Flash υπολείπεται. 21

22 Το ipod,το iphone, το ipad της Apple, υποστηρίζουν HTML 5, CSS, και Java Script, επίσης η Google εχει υιοθετήσει την HTML 5, με το σκεπτικό ότι οι προγραμματιστές που εργάζονται για να δημιουργήσουν γραφικά, σχεδιοκίνηση, κλπ. επιδιώκουν για τους χρήστες κατά την πλοήγηση στο Web, να μην βασίζονται σε προσθήκες εκ μέρους τρίτων (plugins, όπως το Flash). 22

23 Τα βίντεο που δεν ήταν διαθέσιμα σε διάφορες κινητές συσκευές επειδή ήταν σε Flash, (όπως στις συσκευές της Apple που λειτουργούν με HTML 5), είναι διαθέσιμα σε μια νέα μορφή: Η.264. Με αυτόν τον τρόπο προβάλλονται στις συσκευές αυτές. Όταν οι ιστοσελίδες επανακωδικοποιούν τα βίντεο τους με Η.264 μπορούν να τα προσφέρουν χωρίς την χρήση Flash. Παίζουν σε Browser όπως Safari, και Chrome χωρίς την χρήση κανενός plugin. 23

24 Το Flash εχει μεγάλη διάδοση στις εφαρμογές πολυμέσων, αλλά υστερεί στην υποστήριξη νέων κινητών συσκευών που απαιτούν μικρότερα αρχεία, οι οθόνες αφής δυνητικά θα υποστηρίζονται καλύτερα από την HTML 5, γιατί διεξάγονται έρευνες προς αυτήν την κατεύθυνση από μεγάλες εταιρείες όπως η Apple. Βέβαια και η Adobe προχωράει με την Open Screen Project,για εφαρμογές στο Web To Flash προς το παρόν υπερτερεί της HTML 5 ως προς τις σχεδιαστικές δυνατότητες γιατί εχει ενσωματωμένες γραμματοσειρές, καλύτερη ανάλυση εικόνας, σύστημα anti aliasing, σημαντικά εργαλεία σχεδιοκίνησης. 24

25 Η HTML 5 χρησιμοποιεί κώδικες βίντεο και ήχου που δίνουν μικρότερα αρχεία σε σχέση με το Flash για αυτό είναι κατάλληλη για δημοσιεύσεις που χρειάζονται μικρά αρχεία όπως δικτυακοί τόποι τύπου You Tube και κινητές συσκευές. Επίσης είναι αρκετά νωρίς για να προβλεφτεί η απήχησή της επειδή σε πολλά σημεία δεν εχει ολοκληρωθεί ακόμα, ενώ γίνονται συνεχώς δοκιμές για να εντοπίζονται ατέλειες και λάθη. Γενικά θεωρείται γλώσσα σήμανσης με μεγάλες δυνατότητες για διαχείριση πολυμέσων στο Διαδίκτυο και σε κινητές συσκευές. 25

26 Βιβλιογραφία, Διαδίκτυο Adobe Systems,2009, Flash CS4 Professional, Γκιούρδας, Αθήνα. Meloni J. & Morrison M., 2010,Μάθετε την HTML και CSS, Γκιούρδας. Αθήνα. Παπακωνσταντίνου, Γ. 2003, Παραγωγή και σχεδιασμός Πολυμέσων, Ε.Α.Π.,Πάτρα. Τερζίδης, Κ. 2004, Ηλεκτρονικοί Υπολογιστές στις Γραφικές Τέχνες, Ε.Α.Π.,Πάτρα. Δημητριάδης, Σ., Πομπόρτσης, Α. & Τριανταφύλλου, Ε. 2004, Τεχνολογία Πολυμέσων, Τζιόλα, Θεσσαλονίκη. e.html be-delivers-html5-video-support / sp

27 Παράρτημα XML (Extesimble Markup Language): Είναι ένα σύνολο κανόνων για τα έγραφα κωδικοποίησης, σε αναγνώσιμη μορφή από τα μηχανήματα. SVG (Scalable Vector Graphics): Είναι μια οικογένεια προδιαγραφών, αρχείων ΧML για την περιγραφή δισδιάστατων διανυσματικών γραφικών,τόσο στατικών όσο και δυναμικών. (Παρ. διαδραστικων ή σχεδιοκίνησης) W3C (World Wide Web Consortium): Είναι μια διεθνής κοινότητα, με σκοπό να αναπτύξει το Διαδίκτυο με συνεχή έρευνα. Ανοιχτή προς το κοινό. WHATWG (Web Hypertext Aplication Technology Working Group): Είναι μια ομάδα που ιδρύθηκε από συνεργάτες της Apple, Mozila, Opera to 2004.Η Microsoft προσκλήθηκε αλλά δεν προσχώρησε. CSS (Cascading Style Sheets): Αλλεπάλληλα φύλα στυλ, καθορίζουν την ιδιαίτερη εμφάνιση ενός Δικτυακού Τόπου. 27