Δευτέρα 28 Απριλίου 2014

Οι νέες ετικέτες της HTML5


 Η HTML5 είναι μια markup γλώσσα η οποία χρησιμοποιείται στην δόμηση και την παρουσίαση περιεχομένου για τον Παγκόσμιο Ιστό (World Wide Web) και μια κύρια τεχνολογία του Internet. Είναι η Πέμπτη έκδοση της HTML standard, η οποία δημιουργήθηκε το 1990,καθιερώθηκε ως HTML4  το 1997 και χρησιμοποιείται ακόμη. Το internet έχει αλλάξει πολύ από τότε και έτσι η ανάγκη για πρότυπα και πλήρη συμβατότητα οδήγησε το World Wide Web Consortium (W3C) και το Web Hypertext Application Technology Working Group (WHATWG) στο να συνεργαστούν και να δημιουργήσουν την επόμενη έκδοση της HTML.


Οι βασικοί στόχοι της HTML5 είναι η βελτίωση της ήδη υπάρχουσας γλώσσας με πρόσθετη υποστήριξη για τα πρόσφατα multimedia, ενώ διατηρείται εύκολα κατανοητή από ανθρώπους, υπολογιστές και συσκευές (web browsers, parsers, κλπ.). Η HTML5 αναμένεται να αντικαταστήσει όχι μόνο την HTML4, αλλά επίσης την XHTML 1 και την DOM Level 2 HTML.


H HTML5 δεν αλλάζει μόνο τα ήδη υπάρχοντα στοιχεία της HTML4 όμως, αν και όντως έχει αλλάξει πολλά. Ένα ακόμη καινούριο χαρακτηριστικό της είναι τα νέα στοιχεία περιεχομένου (semantic tags/elements). Δείτε μερικά από αυτά:

<video> και <audio>

Μία από τις μεγαλύτερες χρησιμότητες των Flash, Silverlight και άλλων παρόμοιων τεχνολογιών είναι να καταφέρουν ένα στοιχείο πολυμέσων να παίξει. Η HTML5 υποστηρίζει τα καινούρια controls για βίντεο και ήχο και έτσι αυτές οι τεχνολογίες υποβιβάζονται σε εφεδρικό ρόλο. Ο browser μπορεί να παρουσιάσει εγγενώς αυτά τα controls και το περιεχόμενο τους μπορεί να χειριστεί μέσω της JavaScript. 

<canvas>

Η ετικέτα <canvas> δίνει στην HTML μία επιφάνεια σε bitmap για να εργαστεί, κάτι παρόμοιο με το αν χρησιμοποιούσατε GDI+ ή the .NET Image object. Και ενώ το <canvas> δεν είναι τέλειο, είναι ένας πολύ καλός τρόπος να σχεδιάσει κανείς διαγράμματα και γραφήματα, κάτι που ήταν ένα από τα αδύναμα σημεία στην HTML, αλλά και προσωπικά γραφικά.

<header> και <footer>

Οι ετικέτες <header> και <footer> είναι ακόμα δύο καινούρια semantic tags που είναι διαθέσιμα με την HTML5. Δεν είναι κάτι διαφορετικό από <div> στην πραγματικότητα. Αλλά, θα αποκομίσουν μακροπρόθεσμα οφέλη όσον αναφορά τις μηχανές αναζήτησης, αφού θα μπορούν να ξεχωρίσουν το κυρίως περιεχόμενο και στοιχεία σημαντικά στον χρήστη αλλά δεν είναι ακριβώς περιεχόμενο. 

<article> και <section>

Ακόμα δύο ετικέτες που θα ενισχύσουν την εμφάνιση στις μηχανές αναζήτησης είναι τα <article> και <section>. Τα <article> μπορεί να αποτελούνται από πολλά <section> και ένα <section> μπορεί να περιέχει πολλαπλά <article>. Μπερδεμένο; Βασικά, όχι. Ένα <article> αναπαριστά ένα πλήρες block περιεχομένου και το <section> είναι ένα κομμάτι του συνόλου. Για παράδειγμα, σε ένα blog, η αρχική σελίδα μπορεί να περιέχει ένα <section> όπου υπάρχουν όλες οι αναρτήσεις σε λίστα, και κάθε ανάρτηση είναι ένα <article> με ένα <section> για την πραγματική ανάρτηση και άλλο ένα για τα σχόλια.

<output>

Η ετικέτα <output> είναι μοναδική στο ότι περιμένει το περιεχόμενο της να παραχθεί δυναμικά από την JavaScript. Έχει ένα χαρακτηριστικό το οποίο μπορεί να μεταβληθεί μέσω DOM με την JavaScript για να αλλάξει το τι θα εμφανιστεί στην οθόνη. 

<details>

Κάθε ιστοσελίδα στο Web χρειάζεται ένα block κειμένου που επεκτείνεται και συμπτύσσεται. Και ενώ αυτό είναι αρκετά εύκολο να γίνει με JavaScript ή κώδικα server-side, η ετικέτα <details> το κάνει ακόμα πιο εύκολο. 

<figure> και <figcaption>

Η ετικέτα <figure> είναι ένα δοχείο για περιεχόμενο, τυπικά εικόνες αλλά μπορεί να είναι οτιδήποτε, και η <figcaption>, η οποία εμπεριέχεται στην <figure>, παρέχει έναν υπότιτλο ή μια λεζάντα για το περιεχόμενο του <figure>. Παραδείγματος χάριν,  θα μπορούσατε να έχετε τέσσερεις εικόνες που αναπαριστούν διαγράμματα πωλήσεων μέσα σε ένα <figure> και ένα <figcaption> με κείμενο «Πωλήσεις ανα χρόνο, 1989-1993». Οι εικόνες θα εμφανίζονταν η μία δίπλα στην άλλη και το κείμενο από κάτω τους.

<progress> και <meter>

Οι ετικέτες <progress> και <meter> είναι κάτι παρόμοιο. Η <progress> χρησιμοποιείται για μία εργασία ή για το σενάριο του πόσο ολοκληρωμένο είναι κάτι. Επίσης, έχει μία ασαφή λειτουργία για κάτι που έχει άγνωστη διάρκεια (π.χ. αναζήτηση σε βάση δεδομένων). Η ετικέτα <meter> είναι για μετρητές και μετρήσεις αξίας (θερμόμετρα, ποσότητα που χρησιμοποιήθηκε κ.α.). Παρόλο που μπορεί να εμφανίζονται ίδια στην οθόνη σε πολλές περιπτώσεις, έχουν διαφορετικές σημασιολογικές έννοιες.

<datalist>

Η ετικέτα <datalist> λειτουργεί σαν ένα combo box, όπου το σύστημα παρέχει μία προκατασκευασμένη λίστα προτάσεων, αλλά οι χρήστες μπορούν να εισάγουν και δικά τους στοιχεία ελεύθερα. Υπάρχουν πολλές χρήσεις για αυτό το στοιχείο, όπως ένα πλαίσιο αναζήτησης προ-συμπληρωμένο με προτάσεις βασισμένες στο ιστορικό του χρήστη.

<nav>

Το στοιχείο <nav> αναπαριστά κάποιο τμήμα της ιστοσελίδας, το οποίο συνδέεται και οδηγεί σε άλλες ιστοσελίδες ή σε ένα άλλο τμήμα μέσα την ίδια την ιστοσελίδα. Δεν χρειάζεται όλοι οι σύνδεσμοι μιας σελίδας να είναι ορισμένοι με το <nav> tag, παρά μόνο τα τμήματα που αποτελούνται από σημαντικά μπλοκ πλοήγησης. Συγκεκριμένα, είναι συνηθής στο footers μιας σελίδας να υπάρχουν λίστες συνδέσμων που οδηγούν σε κοινές σελίδες του ιστότοπου, όπως η αρχική σελίδα ή τους όρους χρήσης της υπηρεσίας.

<aside>

Το στοιχείο <aside> αναπαριστά ένα τμήμα της σελίδας, το οποίο αποτελείται από περιεχόμενο που είναι σχετικό με το περιεχόμενο που υπάρχει γύρω από το ίδιο το στοιχείο και θα μπορούσε να θεωρηθεί ξεχωριστό από αυτό. Τέτοια τμήματα συνήθως αναπαρίστανται  ως sidebars στην έντυπη τυπογραφία. Το στοιχείο μπορεί να χρησιμοποιηθεί για διαφήμιση, για ομάδες των στοιχείων <nav> και άλλο περιεχόμενο που θα μπορούσε να είναι ξεχωριστό από το κυρίως περιεχόμενο της σελίδας.

<hgroup>

Το στοιχείο <hgroup> αναπαριστά την επικεφαλίδα ενός τμήματος. Χρησιμοποιείται για την ομαδοποίηση ενός συνόλου αποτελούμενου από h1-h6 στοιχεία όταν η επικεφαλίδα έχει πολλαπλά επίπεδα, όπως εναλλακτικούς τίτλους ή σλόγκαν.





Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου