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

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

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

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

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

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

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

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

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

HTML5 Canvas  Το στοιχείο HTML5 χρησιμοποιείται για το σχεδιασμό των γραφικών, on the fly, μέσω scripting (συνήθως JavaScript).  Ο Canvas έχει διάφορες μεθόδους για την πορεία σχεδίασης, κουτιά, κύκλους, το κείμενο και την προσθήκη των εικόνων.

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

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

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

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

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

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

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

  <polygon points="100,10 40, ,60 10,60 160,180"  style="fill:lime;stroke:purple;stroke-width:5;fill- rule:evenodd;" /> 

Σύγκριση του καμβά και SVG CanvasSVG Εξαρτώμενο από την ανάλυσηΜη εξαρτώμενο από την ανάλυση Χωρίς υποστήριξη χειρισμού συμβάντων Υποστήριξη χειρισμού συμβάντων Κακή απόδοση κειμένουΚαταλληλότερο για εφαρμογές με μεγάλες περιοχές rendering(Google Maps) Μπορείτε να αποθηκεύσετε την εικόνα που προκύπτει ως Png ή Jpg Είναι αργό αν σε εφαρμογές με μικρές περιοχές rendering(δεν είναι κατάλληλο για cross- Platform εφαρμογές) Κατάλληλη για γραφικά υψηλής έντασης παιχνίδια Δεν είναι κατάλληλη για εφαρμογές παιχνιδιών

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