1 / 20

HTML5

HTML5. Λυμπούδης Μάτε. Η Ιστορία της HTML. Η Ιστορία της HTML5. Η ανάπτυξη της ξεκίνησε το 2004 από μέλη της Apple, της Mozilla Foundation και της Opera software

thiery
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Λυμπούδης Μάτε

  2. Η Ιστορία της HTML

  3. Η Ιστορία της HTML5 • Η ανάπτυξη της ξεκίνησε το 2004 από μέλη της Apple, της Mozilla Foundation και της Opera software • Το 2008 κυκλοφόρησε η πρώτη έκδοση της με τους ειδικούς να λένε πως πρόκειται για μια εξελισσόμενη γλώσσα που μπορεί να μην ολοκληρωθεί ποτέ

  4. Το 2011 πλέον το 34% των κορυφαίων ιστοσελίδων χρησιμοποιούν HTML5 • Το ίδιο έτος η Adobe σταματάει τη δημιουργία του Flashγια κινητά και επικεντρώνεται στην ανάπτυξη της HTML5

  5. Σήμερα: • Το μόνο αρνητικό που μπορεί να πει κάποιος είναι η συμβατότητα της HTML5 ως καινούργια σχετικά γλώσσα • Όλες όμως οι μεγάλες μηχανές αναζήτησης (Chrome, Firefox, Internet Explorer, Safari, Opera) υποστηρίζουν τα νέα στοιχεία HTML5 και APIs, και να συνεχίζουν να προσθέτουν νέα HTML5 χαρακτηριστικά στις τελευταίες εκδόσεις τους. • Η ομάδα εργασίας HTML 5 περιλαμβάνει AOL, Apple, η Google, η IBM, η Microsoft, Mozilla, Nokia, Opera, και εκατοντάδες άλλους προμηθευτές.

  6. Τι είναι η HTML5; • HTML5 είναι το τελευταίο πρότυπο για την HTML. • Η προηγούμενη έκδοση του HTML, HTML 4.01, ήρθε το 1999, και το Διαδίκτυο έχει αλλάξει σημαντικά από τότε. • Είναι ειδικά σχεδιασμένο για να προσφέρει πλούσιο περιεχόμενο χωρίς την ανάγκη για επιπλέον plugins.

  7. Η τρέχουσα έκδοση προσφέρει τα πάντα, από κινούμενα σχέδια με τα γραφικά, μουσική για ταινίες, και μπορεί επίσης να χρησιμοποιηθεί για την κατασκευή πολύπλοκων εφαρμογών web. • HTML5 είναι επίσης cross-platform. Είναι σχεδιασμένη για να λειτουργεί αν χρησιμοποιείτε έναν υπολογιστή ή ένα Tablet, ένα Smartphone, ή Smart TV.

  8. Γιατί αναπτύχτηκε η HTML5; • Νέες δυνατότητες θα πρέπει να βασίζονται σε HTML, CSS, DOM και JavaScript • Η ανάγκη για εξωτερικά plugins (όπως Flash) πρέπει να μειωθούν • Η αντιμετώπιση των λαθών θα πρέπει να είναι πιο εύκολη από ό, τι στις προηγούμενες εκδόσεις • HTML5 θα πρέπει να είναι ανεξάρτητηαπό τη συσκευή • Η διαδικασία της ανάπτυξης θα πρέπει να είναι ορατή στο κοινό

  9. Τι είναι καινούργιοστηνΗΤML5; • Νέα στοιχεία • Νέα Χαρακτηριστικά • Πλήρης υποστήριξη CSS3 • Βίντεο και ήχος • 2D/3D γραφικών • Τοπική αποθήκευση • Τοπική βάση δεδομένων SQL • Διαδικτυακές Εφαρμογές

  10. HTML5 Canvas • Το στοιχείο <canvas> HTML5 χρησιμοποιείται για το σχεδιασμό των γραφικών, onthefly, μέσω scripting (συνήθως JavaScript). • Ο Canvasέχει διάφορες μεθόδους για την πορεία σχεδίασης, κουτιά, κύκλους, το κείμενο και την προσθήκη των εικόνων.

  11. Υποστήριξη Browser Internet Explorer 9 +, Firefox, Opera, Chrome και Safari υποστηρίζουν το <canvas> στοιχείο. Σημείωση: Ο Internet Explorer 8 και παλαιότερες εκδόσεις, δεν υποστηρίζουν την <canvas> στοιχείο.

  12. Δημιουργία καμβά • <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

  13. Δημιουργία μιας γραμμικής κλίσης • var c = document.getElementById("myCanvas");varctx = c.getContext("2d");// Create gradientvargrd = ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80);

  14. Τι είναι τόσο ιδιαίτερο σχετικά με τους HTML5 καμβάδες; • Μεγάλες δυνατότητες. Τις εποχές προ-καμβά οι προγραμματιστές ήταν περιορισμένοι σε ορθογώνια, text-rendering και εικόνες. • Διαφημίσεις banner. Δεδομένου ότι το Flash δεν είναι ευπρόσδεκτο πια, ο καμβάς μπορεί να αντικαταστήσει αυτή την τεχνολογία. • Οι βιβλιοθήκες καμβά μπορούν να κάνουν ευκολότερο για τους προγραμματιστές να δημιουργήσουν χρήσιμα πράγματα. • Emulators/Simulators. Και τα δύο μπορούν τώρα να εφαρμοστούν πλήρως σε JS.

  15. Γραφικά απεικόνισης (Charts & Graphs). Είχαν εφαρμοστεί χρησιμοποιώντας Flash, SVG, και τις τεχνολογίες HTML / CSS. Αλλά με τον καμβά η κατάσταση άλλαξε, καθώς πλέον οι προγραμματιστές μπορούν να κάνουν ό, τι θέλουν με όποιον τρόπο μπορούν να σκεφτούν. • Ένας κλιμακούμενος τρόπος για να αποδίδεται η οπτικοποίηση δεδομένων. • Η δυνατότητα να κάνετε απίστευτα φόντα σελίδων με καμβά χωρίς να χρειάζεται να φορτώσετε μεγάλες εικόνες.

  16. Η SVG στην HTML5 • SVG σημαίνει ScalableVectorGraphics • Η SVG χρησιμοποιείται για να ορίσει φορέα με βάση τα γραφικά για το Web • SVG ορίζει τα γραφικά σε μορφή XML • Κάθε στοιχείο και κάθε χαρακτηριστικό σε αρχεία SVG μπορεί να είναι κινουμένων σχεδίων • Η SVG είναι ένα πρότυπο του W3C

  17. Τα γραφικά SVG δεν χάνουν καμία ποιότητα αν κάνουμε zoom ή αλλάξουμε το μέγεθος

  18. <!DOCTYPE html> • <html> • <body> • <svg width="300" height="200"> • <polygon points="100,10 40,180 190,60 10,60 160,180" • style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> • </svg> • </body> • </html>

  19. Σύγκριση του καμβά και SVG

  20. Τελικά…. • Μοιάζει με την τεχνολογία του μέλλοντος, έτσι δεν είναι; Τώρα ξέρετε ότι ο καμβάς HTML5 δεν είναι μόνο οπτικά ελκυστικό, αλλά και αποτελεσματικός για την περαιτέρω ανάπτυξη του όμορφου και φιλικό προς το χρήστη web που όλοι λαχταρούμε.

More Related