MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Le basi di HTML5
Dato che l'avvento della nuova versione di HTML è sempre più vicino e dato che ne ho parlato spesso su questo blog senza trattarlo direttamente, eccovi un primo tutorial introduttivo su HTML5... in italiano!
Innanzitutto chiariamo un paio di concetti semplici, il linguaggio non è cambiato: alcuni tag sono stati deprecati e altri aggiunti, HTML è e rimarrà sempre un linguaggio di marcatura quindi tutte quelle cose che avete visto (o sentito dire) riguardo animazioni e interazioni semplificate, geolocalizzazione ecc.. ecc... non vengono realizzate in HTML5 ma dalle sue "costole" CSS3 e alcune nuove API di Javascript.
Quello che fa HTML5 è migliorare e semplificare il modo in cui definiamo le strutture delle pagine web sia logicamente che semanticamente.
Chiariti questi piccoli concetti passiamo al sodo!
1. Doctype e inclusione Script
La prima cosa che possiamo apprezzare riguarda proprio la prima riga delle pagine Html: il Doctype! Dopo anni di stringhe incomprensibili, difficili da ricordare e di copia-incolla finalmente finalmente questa dichiarazione è stata sintetizzata:<!DOCTYPE HTML>Incredibile ma vero è tutto qui! E la cosa bella è che questo Doctype viene già riconosciuto dal validatore del W3C quindi anche se non state scrivendo delle pagine totalmente in Html5 potete già usarlo. Anche l'inclusione di script è stata semplificata, ora il parametro "text/javascript" diventa sottinteso, quindi non è necessario definirlo. Per fare un'esempio, l'inclusione di jQuery in una pagina Html5 appare così:
<script src="jquery.js"></script>
2. Struttura semantica della pagina
Finora siamo stati abituati a gestire tutta la struttura delle nostre pagine Html principalmente con il tag <div> e vari ID, in situzioni simili a queste:<div id="testata"></div> <div id="navigazione"></div> <div id="barra"></div> <div id="contenuti"></div> <div id="footer"></div>Il tutto ha sempre funzionato, c'era solo un problema di fondo per il quale semanticamente significano tutti la stessa cosa, un motore di ricerca che scansiona la nostra pagina non è in grado di distinguere la testata dal footer... ma ora le cose cambiano! Html5 introduce così dei nuovi tag che in gran parte delle occasioni andranno a sostituire i div per la struttura delle pagine:
<header></header> <nav></nav> <aside></aside> <section id="contenuti"></section> <footer></footer>Ecco che ora abbiamo a disposizione tag dedicati a testate, navigazioni, barra laterali, sezioni e piede di pagina. A livello di rendering questi tag non offrono niente di nuovo, sono completamente neutri come i div ma permettono di differenziare le varie zone anche a livello semantico, oltre che avere anche abbastanza senso logico! A questo punto chiariamo che i tag div non devono a tutti i costi essere abbandonati, scopo di questi nuovi elementi è fornire un giusto tag per identificare alcune parti della pagina
3. Audio e Video
Uno degli aspetti più discussi di Html5 è la possibilità di inserire player video e audio nativamente senza passare da plugin di terze parti come Flash, QuickTime e Silverlight. Il tutto viene gestito (a livello basilare) con una sintassi molto semplice:<video width="320" height="240" src="mioVideo.mpg" controls="controls" poster="mioPoster.jpg"> Il tuo browser non supporta Html5! </video>Il tag video mi permette di contenere un testo al suo interno che verrà visualizzato solo nel caso in cui il browser in uso non sia in grando di elaborare l'elemento (un pò come l'attributo alt delle immagini), width e height di regolare le dimensioni del player, src per indicare il file da visualizzare, poster di caricare un'immagine di anteprima personalizzata e controls serve per specificare di visualizzare i controlli di riproduzione. Audio funziona in modo molto simile ma senza dimensioni e poster. [avviso] Con il tag <video> si entra in una questione spinosa che tratteremo (forse) in futuro riguardo i codec, non tutti i browser supportano nativamente gli stessi codec video quindi in alcuni casi può essere necessario ricodificare i video più volte in formati diversi. Intanto potete approfondire con questo articolo (in inglese) di NetTuts. [/avviso] Una cosa che viene spesso ignorata quando si parla di questa nuova possibilità offerta dal prossimo standard è il fatto che se vogliamo che i nostri contenuti multimediali siano fruibili in tempistiche ragionevoli resta sempre necessaria una tecnologia lato server di streaming o un buon piano di hosting, ricordatevi: Html5 fa solo il player, lato server è tutto invariato!