HTML 5: tutte le novità e le caratteristiche introdotte

Il Web è in rapida evoluzione, e con lui lo sono tuttii tasselli che lo vanno a comporre: i siti web. Questi daanni si basano sull' HTML 4, ma ecco in arrivo unasvolta, chiamata HTML 5: nuovi controlli, nuove APIs,controlli multimediali, maggiore flessibilità.

La struttura:

HTMl 5 introduce una vasta gamma di nuovi elementi cherendono più semplice creare la struttura di unapagina. Con l' HTML 4 era possibile ottenere layoutspesso standard, cosituiti da blocchi DIV (footer, header,colonne, ecc). Ecco un' esempio di classica struttura inHTML 4:

Grazie all' HTML 5 invece saranno presenti nuovi elementi(header, nav, section, article, aside, and footer) cherappresenteranno ciascuna delle varie sezioni unn tempodefinite tramite DIV:

Dal punto di vista del codice allora, l' aspettosarà:

<body>  <header>...</header>  <nav>...</nav>  <article>    <section>...    </section>  </article>  <aside>...</aside>  <footer>...</footer></body>

Questa nuova organizzazione strutturale risulta molto utileanche se combinata alle tag H1-H6, in quanto permette lacreazioni di sezioni nidificate all' interno di ciasun"blocco". Ecco ad esempio come combinare unasezione interna al blocco ed un elemento H1:

<section>  <h1>Livello 1</h1>  <section>    <h1>Livello 2</h1>    <section><h1>Livello 3</h1>    </section>  </section></section>

Sarà inoltre possibile per i visitatori spostarsirapidamente da una sezione all' altra, per navigarepiù rapidamente tra i contenuti. Nel caso di un blog,il lettore potrà muoversi dal contenuto di un post aquello successivo senza visualizzare i dati relativi all'autore, alla data di pubblicazione, ecc. Per quanto riguardai vantaggi del programmatore, una source ripulita da DIV estrutturata in blocchi e indubbiamente migliore.

L' elemento HEADER rappresenta l' header di unapagina. Ha la possibilità di contenere diversisotto-header:

<header>  <h1>Anteprima HTML 5</h1>  <p class="byline">Di Lachlan Hunt</p></header>

<header>  <h1>Esempio Blog</h1>  <h2>Inserire qui la linea delle tags.</h2></header>

L' elemento FOOTER è invece il footer, la partebassa, della pagina. Tipicamente contiene i dati relativiall' autore del sito, alla partita IVA dell' aziendaed altre informazioni legali.

<footer>© 2007 Guido Arata</footer>

La sezione NAV invece contiene i links di navigazione:

<nav>  <ul>    <li><a href="/">Home</a></li>    <li><a href="/prodotti">Prodotti</a></li>    <li><a href="/servizi">Servizi</a></li>    <li><a href="/about">About</a></li>  </ul></nav>

L' elemento ASIDE si occupa dei contenuti relativi aciò che gli stà attorno: spesso usato perdefinire le sidebars:

<aside>  <h1>Archives</h1>  <ul>    <li><a href="/2007/09/">Settembre 2008</a></li>    <li><a href="/2007/08/">Agosto 2008</a></li>    <li><a href="/2007/07/">Luglio 2008</a></li>  </ul></aside>

L' elemento SECTION contiene il contenuto riassuntivo diuna pagina:

<section>  <h1>Capitolo 1: </h1>  <p>Il personaggio,     mentre si trova nella notte buia, incappa in un...     ...</p></section>

Infine, ARTICLE è l' elemento che contiene icontenuti della pagina:

<article id="comment-2">  <header>    <h4><a href="#comment-2" rel="bookmark">Commenti #2</a>  by <a href="http://example.com/">Jack O'Niell</a></h4>    <p><time datetime="2007-08-29T13:58Z">Agosto 29th, 2007 at 13:58</time>  </header>  <p>Bell' articolo!</p></article>

Video e Audio

Negli ultimi anni si ha assistito, quasi impotenti, allacrescita esponenziale nel Web dei contenuti multimediali,promossi da YouTube, MySpace, Flickr & Co. Per questomotivo molti webmaster sono ricorsi al Flash, abbandonando iltradizionale HTML. Grazie ai player multimediali in Flash, adesempio, l' autore è in grado di personalizzarnela riproduzione e l' aspetto grafico, permettendoall' utente di stoppare, riprendere, mandareavanti/indietro il file multimediale in questione, tutteoperazioni comuni nei player multimediali software, e latentiin quelli in HTML.

Ma con l' HTML 5 le cose cambiano: ecco arrivare icontrolli AUDIO e VIDEO, con i quali la riproduzione dicontenuti multimediali viene ottimizzata e resa disconcertante semplicità. Ecco un esempio lato-codice:

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">    <a href="video.ogv">Download video</a></video>

Con la possibilità di impostare anche un' immagineche verrà visualizzata durante il caricamento delvideo tramite l' attributo POSTER.

Allo stesso modo, semplicissima è anche lariproduzione di un file audio, dal momento che gli attributidegli oggetti AUDIO e VIDEO sono gli stessi (AUDIO nonprevede, ovviamente, l' attributo POSTER, WIDTH edHEIGHT)

<audio src="music.oga" controls>    <a href="music.oga">Download canzone</a></audio>

Entrambi i controlli sopra-citati supportano l' elementoSOURCE, utile per specificare uno o più video/audioalternativi da riprodurre in base alle impostazioni del PCdell' utente che ne richiede la visione/ascolto. L'attributo MEDIA può essere usato per impostare irequisiti minimi per la corretta esecuzione del filemultimediale in questione.

<video poster="poster.jpg">    <source src="video.3gp" type="video/3gpp"     media="handheld">    <source src="video.ogv" type="video/ogg;    codecs=theora, vorbis">    <source src="video.mp4" type="video/mp4"></video><audio>  <source src="music.oga" type="audio/ogg">  <source src="music.mp3" type="audio/mpeg"></audio>

Inoltre, per i webmaster che desiderino avere maggiorcontrollo sul player multimediale c'è la relativaAPI, che offre metodi ed elementi aggiuntivi, volti alcontrollo del playback del file multimediale.I piùsemplici metodi da usare sono PLAY(), PAUSE() e CURRENTTIME,per riavvolgere il file al termine. Ecco un esempio del loroimpiego:

<video src="video.ogg" id="video"></video><script>  var video = document.getElementById("video");</script><p><button type="button" onclick="video.play();">Play</button>   <button type="button" onclick="video.pause();">Pause</button>   <button type="button" onclick="video.currentTime = 0;">   << Rewind</button>

Gestione e Visualizzazione Documenti

A differenza delle precedenti versione dell' HTML edell' XHTML, l' HTML 5 si basa sul Document ObjectModel (DOM), ovvero sulla rappresentazione ad albero usatadai browseers per riprodurre la pagina web. Per fare unesempio, ecco la DOM di una semplice pagina comprensiva dititolo, header e paragrafo:

Questa novità comporta un notevole vantaggio: illinguaggio può venir definito indipendentemente dallasintassi. Si possono usare due differenti sintassi primarieper rappresentare un documento HTML: l' HTMLserialisation (HTML 5) e l' XML serialisation (XHTML 5).

La prima si ispira alla sintassi delle prime versionedell' HTML, senza però che i browsers faccianofatica ad interpretarlo.

<!DOCTYPE html><html>  <head>    <title>Documento HTML</title>  </head>  <body>    <h1>Esempio</h1>    <p>Questo è un documento HTML di esempio.  </body></html>

La seconda invece si ispira all' XHTML 1.0:

<html xmlns="http://www.w3.org/1999/xhtml">  <head>    <title>Documento HTML</title>  </head>  <body>    <h1>Esempio</h1>    <p>Questo è un documento HTML di esempio.</p>  </body></html>

I browsers useranno il MIME type per distinguere tra i due.Ciascun documento in formato text/html dovrà essereconforme all' HTML serialisation, mentre ciascundocumento del tipo application/xhtml+xml dovràattenersi alla sintassi dell' XML serialisation.

Vediamo ora quali sono i benefici ricavati dall' utilizzodell' HTML serialisation e quali quelli ricavatidall' XML serialisation:

HTML:

compatibilità con i browsers esistenti
familiarità nella sintassi
sintassi accorciabile a seconda delle esigenze (si possono non compilare alcuni attributi e tags)

XML:

sintassi strettamente legata all' XML, che da vita a sorgenti ben strutturate e facilmente gestibili
si integra direttamente con altri vocabolari XML
permette l' utilizzo dell' XML Processing, che molti webmaster usano come parte dei loro processi di editing e publishing.

Tradotto con il permesso di A List ApartMagazine.