Στο πρώτο μέρος της σειράς άρθρων για την responsive σχεδίαση, μιλήσαμε για τον έλεγχο της responsive σχεδίασης και παρουσιάσαμε τα σημαντικότερα εργαλεία και πρόσθετα που κάνουν τη ζωή του προγραμματιστή ευκολότερη!
Σε αυτό το άρθρο θα ξεκινήσουμε την ανάλυση των βασικών συστατικών της responsive σχεδίασης, παρουσιάζοντας την HTML5 και τις νέες ετικέτες της.
Η HTML5 δίνει έμφαση στη βελτιστοποίηση της (πραγματικής) σήμανσης που απαιτείται για την ανάπτυξη ιστοσελίδων που ικανοποιούν τα standards της W3C και για τη σύνδεση όλων των απαιτούμενων αρχείων CSS και Javascript που απαιτούνται. Για τους χρήστες κινητών συσκευών (smartphones), που πιθανόν πλοηγούνται στην ιστοσελίδα με περιορισμένο bandwidth και είναι αυτοί στους οποίους απευθύνεται κυρίως η τεχνική της responsive σχεδίασης, θα πρέπει η ιστοσελίδα όχι μόνο να ανταποκρίνεται στον περιορισμένο «χώρο» της οθόνης τους, αλλά και να την φορτώνει όσο το δυνατόν ταχύτερα. Μολονότι η απομάκρυνση περιττών στοιχείων σήμανσης αντιπροσωπεύει πολύ μικρό κομμάτι στην εξοικονόμηση δεδομένων προς λήψη (μέγεθος ιστοσελίδας), κάθε βελτίωση στον συγκεκριμένο τομέα είναι ευπρόσδεκτη.
Η HTML5, λοιπόν, προσφέρει πρόσθετα πλεονεκτήματα και χαρακτηριστικά σε σχέση με την προκάτοχό της (HTML 4.01). Μεγάλο ενδιαφέρον για τους frontend προγραμματιστές παρουσιάζει η προσθήκη νέων ετικετών (tags) στην HTML5 που παρέχουν πιο ουσιαστικό κώδικα στις μηχανές αναζήτησης.
Επίσης, η HTML5, δίνει τη δυνατότητα αλληλεπίδρασης με το χρήστη, για παράδειγμα μέσω μίας φόρμας επικοινωνίας, αναιρώντας την ανάγκη χρήσης πόρων από διάφορα «βαριά» Javascripts. Tα παραπάνω στοιχεία της HTML5, αποτελούν εξαιρετική εξέλιξη της responsive σχεδίασης, δεδομένου ότι επιτρέπουν τη δημιουργία περισσότερο λιτού, απλοποιημένου και γρήγορου στη φόρτωση, κώδικα.
Νέες ετικέτες της HTML5
Οι προδιαγραφές HTML5 περιλαμβάνουν μια σειρά νέων σημασιολογικών στοιχείων, η αξιοποίηση των οποίων προσφέρει συγκεκριμένο νόημα στα διάφορα τμήματα μιας ιστοσελίδας, όπως μια κεφαλίδα (header), ένα υποσέλιδο (footer), γραμμές εργαλείων πλοήγησης κ.τ.λ.
Σε προηγούμενες εκδόσεις της HTML, για τη δημιουργία τέτοιων στοιχείων χρησιμοποιούνταν ετικέτες <div> και με κατάλληλη χρήση ιδιοτήτων id ή/και class γινόταν η διάκριση μεταξύ τους. Το πρόβλημα που προκύπτει είναι ότι οι ετικέτες <div> δεν έχουν καμία σημασιολογική έννοια καθώς δεν υπάρχουν αυστηροί κανόνες που να ορίζουν πως και που χρησιμοποιούνται οι ιδιότητες id και class, γεγονός που καθιστά εξαιρετικά δύσκολο για τον περιηγητή να προσδιορίσει και να αναλύσει τη σημασιολογική δομή του κώδικα της ιστοσελίδας.
Στη συνέχεια, παρουσιάζονται ενδεικτικά οι σημαντικότερες νέες ετικέτες με μια σύντομη περιγραφή της χρήσης τους:
<header>: Η ετικέτα «header» ορίζει την επικεφαλίδα ενός εγγράφου. Το περιεχόμενο της επικεφαλίδας αποτελείται συνήθως από γραφικά (πχ. Λογότυπο), κείμενο ή μενού πλοήγησης.
<footer>: Η ετικέτα «footer» ορίζει το υποσέλιδο ενός εγγράφου. Το υποσέλιδο, χρησιμοποιείται συνήθως για την παροχή πληροφοριών, στοιχείων επικοινωνίας, copyrights κ.τ.λ.
<nav>: Η ετικέτα «nav» ορίζει μια περιοχή που περιέχει το μενού πλοήγησης του εγγράφου (navigation menu).
<section>: Η ετικέτα «section» χρησιμοποιείται για την θεματική ομαδοποίηση ίδιου περιεχόμενου, συνήθως κάτω από μία κεφαλίδα.
<article>: Η ετικέτα «article» ορίζει ένα αυτοτελές μέρος του εγγράφου (πχ. ένα άρθρο), το οποίο μπορεί να ξαναχρησιμοποιηθεί μόνο του.
<aside>: Η ετικέτα «aside» ορίζει ένα τμήμα με μικρότερη σχέση με το υπόλοιπο έγγραφο και διαφορετική ροή. Το περιεχόμενο του μπορεί να τοποθετηθεί για παράδειγμα σαν πλάγια μπάρα.
<hgroup>: H ετικέτα «hgroup» ομαδοποιεί ένα σύνολο από επικεφαλίδες ενός εγγράφου. Συχνά, ερχόμαστε αντιμέτωποι με μια επικεφαλίδα κάτω από την οποία εμφανίζεται μια άλλη με μικρότερα γράμματα για να δηλώσει ότι είναι υποσύνολο ή παιδί της πρώτης.
<details>: Η ετικέτα «details» ορίζει επιπλέον πληροφορίες για ένα έγγραφο, τις οποίες ο επισκέπτης μπορεί να τις εμφανίζει ή να τις αποκρύπτει. Η επικεφαλίδα είναι πάντα ορατή, ενώ το κείμενο που βρίσκεται μέσα στην ετικέτα «details» εμφανίζεται μόνο όταν ο χρήστης πατήσει πάνω στην επικεφαλίδα.
<figure>: Η ετικέτα «figure» αναπαριστά ένα αυτοδύναμο κομμάτι κειμένου που αντιμετωπίζετε ως ένα κομμάτι στη ροή του εγγράφου.
<canvas>: Η ετικέτα «canvas« χρησιμοποιείται για την απεικόνιση γραφικών με την χρήση scripts, για την απεικόνιση γραφημάτων κ.α.
<video>, <audio>: Οι ετικέτες «video» και «audio» χρησιμοποιούνται για την αναπαραγωγή των αντίστοιχων πολυμέσων, χωρίς την χρήση βοηθητικών προγραμμάτων (plug-ins).
Κερδίζοντας χρόνο προγραμματίζοντας με την HTML5
Η πρώτη γραμμή ενός αρχείου HTML, ξεκινάει πάντα με τη δήλωση του τύπου αρχείου (doctype). Συνήθως αυτή η γραμμή κώδικα προστίθεται αυτόματα από τον πρόγραμμα επεξεργασίας κώδικα που χρησιμοποιεί ο προγραμματιστής, αλλά φυσικά μπορεί να προστεθεί και χειροκίνητα. Στη συνέχεια, μπορούν να αλλάξουν όσες ετικέτες της σελίδας χρειάζεται με τις νέες ετικέτες που εισάγει η HTML5. Πριν την HTML5 το doctype είχε την εξής μορφή:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Στην HTML5, η παραπάνω γραμμή κώδικα απλοποιείται ως εξής:
<!DOCTYPE html>Στην html 4.01 η σωστή διαδικασία σύνδεσης ενός αρχείου Javascript, πραγματοποιούνταν με τον εξής τρόπο:
<script src="js/scriptname.js" type="text/javascript"></script>Με την HTML5, η διαδικασία είναι πολύ ευκολότερη και ο κώδικας πιο απλός και λιτός:
<script src="js/scriptname.js"></script>Επίσης, η HTML5 θεωρείται περισσότερο ευέλικτη όσον αφορά στη σύνταξη της, καθώς η παραπάνω γραμμή κώδικα είναι το ίδιο «έγκυρη» με τη γραμμή <sCRipt SrC=js/scriptname.js></script>, στην οποία έχουν παραληφθεί τα εισαγωγικά που περικλείουν το js/scriptname.js (πηγή αρχείου και όνομα αρχείου), καθώς και η γραφή της είναι αρκετά πιο ελεύθερη, χωρίς να παίζουν ρόλο τα κεφαλαία γράμματα που έχουν αντικαταστήσει τα μικρά στη φράση «script src» (not case sensitive).
Προηγουμένως, αναφέρθηκαν επιγραμματικά οι νέες ετικέτες καθορισμού της δομής και εισαγωγής πολυμέσων της HTML5. Ακολούθως, παρουσιάζεται ένα παράδειγμα χρήσης της:
Πριν την HTML5 η δομή του κώδικα θα ήταν κάπως έτσι:
<div class="header">
<div class="navigation">
<ul class="nav-list">
<li><a href="#" title="Αρχική">Αρχική</a></li>
<li><a href="#" title="Σχετικά">Σχετικά</a></li>
</ul>
</div> <!—τέλος κλάσης navigation -->
</div> <!—τέλος κλάσης header -->
Χρησιμοποιώντας τις νέες ετικέτες δομής της HTML5, το παραπάνω κομμάτι κώδικα, διαμορφώνεται ως εξής:
<header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Αρχική">Αρχική</a></li>
<li><a href="#" title="Σχετικά">Σχετικά</a></li>
</ul>
</nav>
</header>
Αφήστε το σχόλιο σας