H Εξέλιξη της HTML και η ετικέτα. Εξέλιξη της Html 2 Internet Είναι ένα ξεχωριστό μέσο δημοσίευσης πληροφοριών... Είναι ένα ξεχωριστό μέσο δημοσίευσης.

Παρουσίαση με θέμα: "H Εξέλιξη της HTML και η ετικέτα. Εξέλιξη της Html 2 Internet Είναι ένα ξεχωριστό μέσο δημοσίευσης πληροφοριών... Είναι ένα ξεχωριστό μέσο δημοσίευσης."— Μεταγράφημα παρουσίασης:

1 H Εξέλιξη της HTML και η ετικέτα

2 Εξέλιξη της Html 2 Internet Είναι ένα ξεχωριστό μέσο δημοσίευσης πληροφοριών... Είναι ένα ξεχωριστό μέσο δημοσίευσης πληροφοριών • Γρήγορη επικοινωνία και πληροφόρηση • Συνεχής ανάπτυξη • Διείσδυση σε πολλούς τομείς • Πολυμεσικό περιεχόμενο • Κοινωνικό φαινόμενο • Ατελής προγραμματισμός... Internet

3 Εξέλιξη της Html 3 •Η τελευταία επίσημη έκδοση της γλώσσας HTML είναι η 4.01 και χρονολογείται από το Δεκέμβριο του 1999 !!! Html

4 Εξέλιξη της Html Πρόοδος •Για περισσότερη αλληλεπίδραση μεταξύ χρηστών και υπολογιστή προτάθηκε η Javascript. •Για περισσότερη αλληλεπίδραση μεταξύ χρηστών και υπολογιστή προτάθηκε η Javascript. •Το μείγμα των νέων τεχνολογιών οδήγησε στο Ajax για ακόμα πιο ευέλικτες ιστοσελίδες. •Τα Φύλλα στυλ (CSS) επιτρέπουν να αλλάξουμε εύκολα τη σχεδίαση του χώρου και τα RSS feeds ενημερώνουν για νέο περιεχόμενο. 4 Html

5 Εξέλιξη της Html 5 Η εξέλιξη της HTML Html Από κάτω προς τα πάνω Πρώτη έκδοση 1994, Ταχύτατες αλλαγές και βελτιώσεις Τελική έκδοση, 1999

6 Εξέλιξη της Html 6 Ανάγκες και τάσεις Τάσεις •Τα τελευταία 10 χρόνια η πρόοδος του Web δεν συμβαδίζει με την πρόοδο των άλλων κλάδων της πληροφορικής •Ο οργανισμός ο οποίος ρυθμίζει τα πρότυπα του Ιστού, το W3C χαρακτηρίζεται από μια σχετική αδράνεια •Αποτέλεσμα, οι προγραμματιστές να ενώσουν τις δυνάμεις τους και να δημιουργούν το Web Hypertext Application Technology Working Group ή WHATWG

7 Εξέλιξη της Html 7 Οι πιο εξελιγμένοι δικτυακοί τόποι παρουσιάζουν Προβλήματα σοβαρά προβλήματα πρόχειρα κατασκευασμένοι • πρόχειρα κατασκευασμένοι •με ψευδοστοιχεία διεπαφών • Τοποθεσίες οι οποίες υλοποιούν επεξεργασία δεδομένων δεν συνεργάζονται επεξεργασία δεδομένων δεν συνεργάζονται • μια απλή αντιγραφή και επικόλληση εμπλουτισμένου κείμενου μπορεί να προκαλέσει πανικό κείμενου μπορεί να προκαλέσει πανικό Προβληματισμοί οι οποίοι χρονολογούνται Προβληματισμοί οι οποίοι χρονολογούνται από τους προϊστορικούς χρόνους της πληροφορικής από τους προϊστορικούς χρόνους της πληροφορικής παραμένουν στην καθημερινή πρακτική παραμένουν στην καθημερινή πρακτική

8 Εξέλιξη της Html Προτεινόμενες λύσεις •Μέχρι τώρα οι σχεδιαστές των ιστοσελίδων έπρεπε να ήταν πολυμήχανοι για να απαλλαγούν από τους περιορισμούς της HTML. •Μέχρι τώρα οι σχεδιαστές των ιστοσελίδων έπρεπε να ήταν πολυμήχανοι για να απαλλαγούν από τους περιορισμούς της HTML. •Βέβαια, πολύ γρήγορα βρέθηκε λύση σε πολλά προβλήματα με τη βοήθεια των πρόσθετων στοιχείων (plug-ins), αλλά και αυτά δημιούργησαν νέα προβλήματα: και αυτά δημιούργησαν νέα προβλήματα: •ιδιόκτητες προδιαγραφές (formats), •μεταφορά και εγκατάσταση περίπλοκη και •ασύμβατη με ορισμένες διαμορφώσεις, κ.λπ.. •ασύμβατη με ορισμένες διαμορφώσεις, κ.λπ.. 8 Λύσεις

9 Εξέλιξη της Html Προτεινόμενες λύσεις •Αναπόφευκτα, •προσθήκη ενός νέου ψηφιακού χάσματος: •για να μη γίνεις χρήστης δεύτερης κατηγορίας πρέπει να γνωρίζεις πολλές τεχνικές οι οποίες θα έπρεπε να παραμένουν άγνωστες στον τελικό χρήστη •Με λίγα λόγια, πολλές οι αντιφάσεις στην καθολική αποστολή και αποδοχή του Web 9 Λύσεις

10 Εξέλιξη της Html XHTML 2 ή HTML 5 •Την Πέμπτη, 2 Ιουλίου 2009 το W3C ανακοινώνει ότι θα εγκαταλείψει την εργασία του σχετικά με τη γλώσσα XHTML 2 υπέρ της HTML 5 •Φυσικά, οι εκδόσεις XHTML 1.0 και XHTML 1.1 θα εξακολουθήσουν να υπάρχουν •Πηγή : http://www.w3.org/News/2009#entry-6601 http://www.w3.org/News/2009#entry-6601 10

11 Εξέλιξη της Html XHTML 2 ή HTML 5 •XHTML 2 και HTML 5 είναι στην πραγματικότητα 2 γλώσσες πολύ διαφορετικές και πολύ κοντά •Διαφορετικές, επειδή προσπαθούν να σχεδιάσουν μια ιστοσελίδα με διαφορετική φιλοσοφία, αλλά και κοντά, επειδή χρησιμοποιούν σχεδόν τις ίδιες ετικέτες που ήδη γνωρίζουμε καλά •Μερικές καλές ιδέες της XHTML 2 θα πρέπει να ενσωματωθούν στην HTML 5 11

12 Εξέλιξη της Html 12 Μια εξέλιξη περισσότερο από μια επανάσταση • Η νέα έκδοση, HTML 5, θα έχει ως στόχο να απαντήσει σε ορισμένα από τα θέματα, να απαντήσει σε ορισμένα από τα θέματα, διατηρώντας παράλληλα την προς τα πίσω διατηρώντας παράλληλα την προς τα πίσω συμβατότητα με τα προηγούμενα πρότυπα. συμβατότητα με τα προηγούμενα πρότυπα. • Όσον αφορά τη σελιδοποίηση ενός ιστοτόπου, το νέο πρότυπο θα απλουστεύει τα πράγματα το νέο πρότυπο θα απλουστεύει τα πράγματα με την εισαγωγή νέων ετικετών όπως : με την εισαγωγή νέων ετικετών όπως :,,,, κ.λπ.,,,,, κ.λπ., αντί των πολλαπλών ετικετών οι οποίες αντί των πολλαπλών ετικετών οι οποίες χρησιμοποιούνται σήμερα χρησιμοποιούνται σήμερα Εξέλιξη

13 Εξέλιξη της Html HTML 5 •Η HTML 5 αρχίζει να γίνεται γνωστή χάρη στις ετικέτες (επίδειξή της στη διεύθυνση http://www.dailymotion.com/openvideodemo ) και •Η HTML 5 αρχίζει να γίνεται γνωστή χάρη στις ετικέτες (επίδειξή της στη διεύθυνση http://www.dailymotion.com/openvideodemo ) και http://www.dailymotion.com/openvideodemo •Η έλευση της HTML 5 θα είναι ένα μεγάλο βήμα στην εξέλιξη του Web •Η HTML 5 θα διευκολύνει την ενσωμάτωση πολυμεσικού περιεχομένου σε μια ιστοσελίδα, παρέχοντας παράλληλα νέες ευκαιρίες για τη δημιουργία σύγχρονων εφαρμογών •Ήδη λειτουργεί και η υπηρεσία επικύρωσης του κώδικα γραμμένου σε HTML 5 ( http://html5.validator.nu/ ) http://html5.validator.nu/ 13

14 Εξέλιξη της Html Προσθήκες της HTML 5 •Απλοποιείται η δήλωση του doctype και γίνεται: •Απλοποιείται η δήλωση του doctype και γίνεται: •Προστίθενται οι ετικέτες και οι οποίες επιτρέπουν την ενσωμάτωση video και ήχου χωρίς τη ανάγκη του Flash •Προστίθεται η ετικέτα έτσι ώστε να μπορεί κανείς να προσδιορίσει μία χρονική στιγμή (ώρα, ημερομηνία, κλπ). •Προστίθεται η ετικέτα η οποία επιτρέπει τη δυναμική εμφάνιση των εικόνων bitmap μέσω scripts (συνήθως της JavaScript) 14

15 Εξέλιξη της Html 15 H νέα ετικέτα H νέα ετικέτα H ετικέτα θα εμφανίζει τις εικόνες δυναμικά • H ετικέτα θα εμφανίζει τις εικόνες δυναμικά επιτρέποντας τη δημιουργία διεπαφών επιτρέποντας τη δημιουργία διεπαφών (user interfaces), οι οποίες θα μπορούν να (user interfaces), οι οποίες θα μπορούν να ενσωματωθούν καλύτερα στις δυναμικές εφαρμογές ενσωματωθούν καλύτερα στις δυναμικές εφαρμογές Ένα παράδειγμα υπάρχει στη διεύθυνση: Ένα παράδειγμα υπάρχει στη διεύθυνση: http://www.whatwg.org/demos/2008- sept/color/color.html http://www.whatwg.org/demos/2008- sept/color/color.htmlhttp://www.whatwg.org/demos/2008- sept/color/color.htmlhttp://www.whatwg.org/demos/2008- sept/color/color.html Canvas

16 Εξέλιξη της Html H ετικέτα H ετικέτα •Η ετικέτα αναγνωρίζεται από τους ακόλουθους φυλλομετρητές: •Firefox •Safari •Chrome •Opera 16

17 Εξέλιξη της Html Χρήση των φυλλομετρητών 17 The usage share of web browsers. Source: Median values from summary table summary table Internet Explorer 64.64% Mozilla Firefox (25.30%) Safari (4.30%) Google Chrome (3.19%) Opera (1.50%) Other (1.12%) Browsers

18 Εξέλιξη της Html H ετικέτα H ετικέτα •Προς το παρόν η ετικέτα δεν αναγνωρίζεται από τον Internet Explorer •Πολλοί προγραμματιστές έχουν λάβει την πρωτοβουλία να γεφυρώσουν αυτό το χάσμα •Ένα παράδειγμα αποτελεί το plugin Active X, IECanvas που επιτρέπει τη χρήση της ετικέτας 18

19 Εξέλιξη της Html H ετικέτα H ετικέτα •Η ετικέτα επιτρέπει να προβληθούν διδιάστατα γραφικά στο πρόγραμμα περιήγησης •Η ετικέτα επιτρέπει να προβληθούν διδιάστατα γραφικά στο πρόγραμμα περιήγησης •Η ετικέτα έχει δύο βασικές ιδιότητες (εκτός από τα γενικά χαρακτηριστικά όπως η ταυτότητα, όνομα, κατηγορία... ): width και width και height height •Σκοπός της είναι να σηματοδοτήσει την τοποθεσία όπου θέλουμε να εισαγάγουμε μια επιφάνεια σχεδίασης 19

20 Εξέλιξη της Html •Το σώμα της ετικέτας δεν εμφανίζεται στα προγράμματα περιήγησης τα οποία την αναγνωρίζουν, αλλά μόνο από τους φυλλομετρητές οι οποίοι δεν την αναγνωρίζουν και θα πρέπει να παρέχεται ένα εναλλακτικό περιεχόμενο. Π.χ. Η ετικέτα δεν αναγνωρίζεται από το Η ετικέτα δεν αναγνωρίζεται από το φυλλομετρητή σας. φυλλομετρητή σας. •Με τη δήλωση αυτή έχει προσδιοριστεί μια τοποθεσία με διαστάσεις 400x100 pixels και όνομα test για να προστεθεί γραφικό περιεχόμενο 20

21 Εξέλιξη της Html •Για να προστεθεί περιεχόμενο στο πλαίσιο αυτό πρέπει να καλέσουμε τη μέθοδο getContext(apiName) με τιμή της παραμέτρου apiName το '2d‘ Π.χ. αν γράψουμε: var canvas = document.getElementById(test); var canvas = document.getElementById(test); if (canvas.getContext) { if (canvas.getContext) { var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d'); ctx.fillRect(100,0,80,70); } ctx.fillRect(100,0,80,70); } •Θα εμφανιστεί ένα ορθογώνιο που θα έχει αρχή των συντεταγμένων το σημείο 100,0 και πλάτος 80 pixels ενώ ύψος 70 pixels 21

22 Εξέλιξη της Html •Η αρχή των συντεταγμένων (0,0) είναι η άνω αριστερή γωνία της οθόνης •Η έξοδος του γραφικού γίνεται με τη βοήθεια ενός συνόλου γραφικών συναρτήσεων έγκλειστων (encapsulated ) στη κλάση Graphics •Υπάρχει μόνο μια αρχική μορφή (shape) η οποία ορίζεται από τον προγραμματιστή, αυτή του ορθογωνίου 22

23 Εξέλιξη της Html •Η μορφή αυτή έχει τρεις κατασκευαστές (constructors): •clearRect (x, y, πλάτος, ύψος), για τον καθαρισμό του ορθογωνίου •fillRect (x, y, πλάτος, ύψος), για τη συμπλήρωση του ορθογωνίου •strokeRect (x, y, πλάτος, ύψος) για τον ορισμό του περιγράμματος του ορθογωνίου 23

24 Εξέλιξη της Html •Για να ξεκινήσει η δράση της συνάρτησης (script) μπορούμε να χρησιμοποιήσουμε το γεγονός onload μαζί με την ετικέτα ή να καλέσουμε το στοιχείο window: window.onload=όνομα_συνάρτησης; window.onload=όνομα_συνάρτησης; •Ένα παράδειγμα με τη χρήση του γεγονότος onload μαζί με την ετικέτα : 24

25 Εξέλιξη της Html • • • Canvas • Canvas • • • function draw(){ • var canvas = document.getElementById('protograph'); • if (canvas.getContext){ • var ctx = canvas.getContext('2d'); • } • • • canvas { border: 1px solid black; } • •

26 Εξέλιξη της Html

27 Το ίδιο αποτέλεσμα θα εμφανίσει και το ακόλουθο πρόγραμμα με τη χρήση του στοιχείου window • • • Canvas • Canvas • • • function draw(){ • var canvas = document.getElementById('protograph'); • if (canvas.getContext){ • var ctx = canvas.getContext('2d'); • } •window.onload=draw; • • • canvas { border: 1px solid black; } • •

28 Εξέλιξη της Html •Η συνάρτηση draw μπορεί να εμπλουτιστεί και να εμφανίσει επικαλυπτόμενα σχήματα όπως εμφανίζονται στην ακόλουθη εικόνα: function draw(){ var canvas=document.getElementBy Id("canvas"); if(!canvas.getContext){return;} var ctx=canvas.getContext("2d"); ctx.fillStyle="rgb(200,0,0)"; ctx.fillRect(10,10,70,70); ctx.fillStyle="rgba(0,0,200,0.5)"; ctx.fillRect(50,50,45,45); }

29 Εξέλιξη της Html Πολύπλοκα σχήματα •Για πιο πολύπλοκα σχήματα χρησιμοποιούνται οι κατασκευαστές: •beginPath (), για τον ορισμό του αρχικού σημείου εκκίνησης •moveTo (x, y), για την μετακίνηση της πέννας στο σημείο x, y, •lineTo (x, y), για τη χάραξη γραμμής μέχρι το σημείο x, y •closePath (),για τον ορισμό του τελικού σημείου του σχήματος •stroke(), για τον ορισμό του περιγράμματος •fill(), για τη συμπλήρωση του σχήματος 29

30 Εξέλιξη της Html •Για το σχηματισμό τόξων κύκλου χρησιμοποιείται ο κατασκευαστής: •arc(x,y,ακτίνα, sγωνία, eγωνία, rotFlag). Όπου: • sγωνία και eγωνία εκφράζονται σε ακτίνια ( radians) και •rotFlag είναι μια τιμή τύπου Boolean (true για να γίνει κύκλος και false για τόξο) •Σημείωση. Για τη μετατροπή των μοιρών (degrees ) σε ακτίνια μια χρήσιμη εντολή είναι var radians=(Math.PI/180)*degrees) var radians=(Math.PI/180)*degrees) 30

31 Εξέλιξη της Html •Για τη συμπλήρωση του περιεχομένου ενός σχήματος χρησιμοποιείται η γενική έκφραση Fill ακολουθούμενη από το χαρακτηριστικό γνώρισμα της συμπλήρωσης. •Π.χ. για το χρώμα χρησιμοποιείται το fillStyle = τιμή χρώματος και το strokeStyle = τιμή χρώματος. Η τιμή του χρώματος έχει διάφορες μορφές: •Δεκαεξαδική (π.χ. # rrggbb), •με το όνομα του χρώματος στα αγγλικά (π.χ. red), •με τη δήλωση RGB (π.χ. rgb(r, g, b)) και •alphaTransparency (διαφανές) (π.χ. rgba(r, g, b, a). 31

32 Εξέλιξη της Html •Η χάραξη μιας γραμμής (Line) μπορεί να οριστεί με διάφορους τρόπους. •Οι ιδιότητες μιας γραμμής είναι: •lineWidth [ακέραιος], •lineCap [butt|round|square] και •lineJoin [round|bevel|mitre]. •Η παράμετρος mitreLimit μπορεί να ρυθμιστεί και αν υπερβεί το όριο μετατρέπεται σε bevel 32

33 Εξέλιξη της Html •Η κλήση (Gradient) μιας καμπύλης ορίζεται με τις μεθόδους: •createLinearGradient (x1, y1, x2, y2) •createRadialGradient (x1, y1, r1, x2, y2, r2). •Τα χρώματα προστίθενται με την addColorStop (θέση, τιμή χρώματος). Η θέση μπορεί να είναι από 0 έως 1. •Π.χ. η συνάρτηση draw5() θα μας αποδώσει το ακόλουθο σχήμα: 33

34 Εξέλιξη της Html 34 function draw5() { var canvas=document.getElementById('canvas5') if(!canvas.getContext){return;} var ctx=canvas.getContext('2d'); var lingrad=ctx.createLinearGradient(0,0,0,150); lingrad.addColorStop(0,'#00ABEB'); lingrad.addColorStop(0.5,'#fff'); lingrad.addColorStop(0.5,'#26C000'); lingrad.addColorStop(1,'#fff'); var lingrad2=ctx.createLinearGradient(0,50,0,95); lingrad2.addColorStop(0.5,'#000'); lingrad2.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle=lingrad; ctx.strokeStyle=lingrad2; ctx.fillRect(10,10,130,130); ctx.strokeRect(50,50,50,50); }

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

36 Εξέλιξη της Html function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'backdrop.png'; img.onload = function() { ctx.drawImage(img, 0, 0); ctx.beginPath(); ctx.moveTo(30, 96); ctx.lineTo(70, 66); ctx.lineTo(103, 76); ctx.lineTo(170, 15); ctx.stroke(); ctx.stroke(); } } 36

37 Εξέλιξη της Html Video και Audio •Για να ενσωματώσουμε video πρέπει να κάνουμε χρήση του στοιχείου video : Download movie Download movie </video> 37

38 Εξέλιξη της Html •Για να ενσωματώσουμε audio πρέπει να κάνουμε χρήση του στοιχείου audio : Download song Download song 38

39 Εξέλιξη της Html •Αν θέλουμε να γίνει η εμφάνιση πιο εύγλωττη και εύκολη στη χρήση μπορούμε να χρησιμοποιήσουμε τις μεθόδους ελέγχου : play(), pause(), και setting currentTime (για το γνωστό rewind) •Π.χ. 39

40 Εξέλιξη της Html <script> var video = document.getElementById("video"); var video = document.getElementById("video"); Play Play Pause Pause <button type="button" <button type="button" onclick="video.currentTime = 0;"> onclick="video.currentTime = 0;"> 40

41 Εξέλιξη της Html Το πρόβλημα της HTML 5 •Το πρόβλημα είναι ότι θα χρειαστούν 5 έως 10 χρόνια για να ολοκληρωθεί η HTML 5 •Υπάρχουν πολλοί περιορισμοί οι οποίοι θα πρέπει να υπερνικηθούν, •π.χ. η επισημοποίηση ενός κωδικοποιητή (codec) για βίντεο και ήχο, θα μπορούσε να εμποδίσει την πρόοδο. •Ωστόσο οι νέες εκδόσεις των φυλλομετρητών (browsers) έχουν αρχίσει να εφαρμόζουν επιλεκτικά τις προδιαγραφές οι οποίες έχουν ήδη συνταχθεί 41 Html 5

42 Εξέλιξη της Html •Δεν αρκεί όμως μόνο οι διάφοροι φυλλομετρητές για να κάνουν το ίδιο, αλλά και οι τελικοί χρήστες να ενημερώνονται για να επωφεληθούν. •Αυτό οδηγεί σε ένα φαύλο κύκλο: •χωρίς τους ενημερωμένους χρήστες, οι ιστοσελίδες δεν θα χρησιμοποιήσουν τη νέα τεχνολογία και χωρίς περιεχόμενο, οι χρήστες δεν θα έχουν κίνητρα για να αλλάξουν το πρόγραμμα περιήγησης που χρησιμοποιούν (browser) 42 Html 5