Risulta decisamente ostico racchiudere in un post, per quanto lungo e dettagliato sia, il significato, i benefici e le attuali applicazioni dell’Html 5.

Ci provo, avendo comunque a disposizione fonti autorevoli che vi riporterò alla fine. Anche in questo caso, tratterò l’argomento senza scendere nel dettaglio del codice, ma cercando di fornirvi alcune nozioni importanti per capire le potenzialità di questo rinnovato linguaggio.

Premessa

Un primo articolo che trattava di risorse utili per approcciare all’Html 5 lo avevo pubblicato mesi fà premettendo come un aggiornamento dell’html non avveniva da oltre dieci anni. Il che era inaccettabile per un linguaggio di base, soprattutto in considerazione dell’evoluzione del web verso il sociale, verso i portali di video e audio sharing e verso il mondo dei blog in crescita esponenziale. Troppo distante e obsoleto appariva l’html dal contesto web attuale. E allora una revisione e, soprattutto un rinnovo, urgevano senza dubbio. Si intendeva andare verso un markup più semplice e chiaro.

Di questo si è parlato per tutto il 2009, ma ora possiamo cominciare a toccare con mano l’html 5 iniziando a vederlo spuntare qua e là navigando in rete. Non è più il futuro del web, ma sempre più il presente.

La Nuova Struttura

A dover presentare le ghiotte novità dell’html 5 non si può non iniziare con i nuovi elementi messi a disposizione. Si tratta, come vedrete, di novità chiaramente indirizzate a rivisitare la struttura di una pagina web. L’immagine qui sotto vi dà subito un’idea di quanto e come stia cambiando.

• <header> – Questo elemento contiene informazioni introduttive di una sezione o pagina. Anche di una sezione, quindi. Non è più solo l’elemento che apre l’inizio pagina, ma lo si inserisce anche come elemento iniziale di qualsiasi sezione importante all’interno della pagina stessa. Non sarà strano, quindi, costruire una pagina web con più tag <header> al suo interno.
• <nav> – Elemento riservato ad una sezione di un documento o pagina che contiene links (ad altre pagine oppure ad altre sezioni della stessa pagina).
• <section> – Entriamo nel vivo. Si tratta di un tag che rappresenta un generico documento o applicazione. Potete pensarlo anche come il div che separa porzioni importanti dello stesso documento.
• <article> – Elemento che rappresenta una porzione di pagina che vive, per così dire, di vita propria. Basta pensare ad un post su un blog, oppure ad una entry su un forum. Si tratta, in entrambi i casi, di item indipendenti nel contesto di una pagina.
• <aside> – Rappresenta contenuti in qualche modo relazionati con l’area principale della pagina. La nostra sidebar, per capirci, con articoli correlati, commenti recenti, tag clouds e simili.
• <figure> – Elemento che rappresenta un contenitore di immagine a livello di blocco, con didascalia.
• <dialog> – L’elemento indica una conversazione tra due o più persone : il tag <dt> sta ad indicare il nome di colui che parla mentre il tag <dd> racchiude il discorso vero e proprio.
• <footer> – Speculare nel significato all’elemento <header> presentato all’inizio. Per lo stesso motivo, non ci sono problemi ad inserire più volte questo tag all’interno di una pagina web.
• <video> – Elemento che consente banalmente di inserire un video all’interno di una pagina senza bisogno del player preposto alla riproduzione dei video
• <audio> – Elemento esattamente speculare al precedente per file audio.

Non sono presenti in questo elenco tutti i nuovi tag inseriti, ma solo i più importanti e significativi. La lista completa la trovate qui.

Tanto per farvi alcuni esempi pratici e veloci ecco come scriviamo il codice relativo ad un’immagine con didascalia in xHtml :

<img alt="Bmw X6" src="/bmw.jpg" border="0" height="362" width="563" />
<b>Figura 1. Una spendida macchina</b>

In Htlm 5, utilizzando il tag figure, diventa :

<figure>
<img alt="Bmw X6" src="/images/bmw.jpg" height="352" width="563">
<legend>Figura 1. Una splendida macchina</legend>
</figure>

Eccovi, per completezza, un ottimo articolo in cui vedrete costruite step by step una pagina con i nuovi tag appena presentati.

La domanda, ora, nasce spontanea e già ve la sarete posta fin dalle prime righe di questo articolo. Ma quali e quanti browser supportano Html 5? E si perché tutte belle e interessanti le novità presentate finora, ma se poi nessun browser è in grado di interpretarle, direi che tutto si rivela inutile.

Vi premetto che, allo stato attuale, la situazione è abbastanza sconfortante. Vediamo perché.

Uno strumento gratuito molto utile e da inserire subito tra i preferiti è FindMeByIP. Non ci vuole molto a capire, se ci cliccate, cosa faccia esattamente questo sito e a cosa serva. Ma oltre a rivelarvi info importanti sul vostro IP, browser utilizzato, Sistema Operativo e simili, vi fornisce, più in basso dati molto interessanti su cosa è supportato dal vostro browser.

Vediamo insieme cosa ne è uscito analizzando l’ultima versione dei 5 browser più famosi e utilizzati nel web : Mozilla Firefox 3.5, Google Chrome 3.0, Opera 10, Safari 4, Internet Explorer 8. Tutte versioni stabili, ovviamente.

Senza perderci in chiacchiere vi dico subito che, come supporto ai nuovi standard introdotti con l’html 5, il miglior browser è risultato Chrome anche se non gli si può attribuire un 10 pieno. Dietro, staccatissimi, tutti gli altri con risultati scadenti soprattutto per Opera 10 e IE 8. A dimostrazione che siamo ancora ben lontani dalla perfezione, eccezion fatta per Chrome che si difende molto bene. Ogni browser ha, pertanto, le sue pecche e le sue mancanze in relazione a qualche aspetto del linguaggio.

Così stando le cose, si spiega la lentezza e la gradualità della sua introduzione nel web. Comunque, aualora vogliate leggere dettagliatamente il test effettuato sui singoli browser leggete questo post.

Insomma, html 5 pronto a decollare in un web che, al momento, difficilmente lo accoglierà come si deve.

Applicazioni

Come anticipato prima,  cominciano a spuntare i primi servizi e applicazioni basate sull’html 5. E’ il caso di Bitspace, innovativo HTML5-Based, che integra un player musicale in streaming per riprodurre la vostra musica e organizzarla come desiderate. Se ne parla in questo articolo e vi potete subito rendere conto delle enormi potenzialità dei nuovi standards

Oppure, passando dall’audio al video, eccovi un ottimo uso del nuovo tag video prima presentato : Sublime Video.

Mentre Youtube e Vimeo stanno pian piano affinando le loro versioni basate su HTML5, alla faccia del Flash di Adobe, Sublime Video è un nuovissimo servizio di video sharing che vanta di essere il primo basato in grado di fare completamente a meno di Flash.

Ben testabile su Chrome e Safari, o magari su Internet Explore con Chrome Frame. 

E questo è solo l’inizio…