Kevin Kornell
a- a+

HTML 5: tutte le novità e le caratteristiche introdotte

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

 

La struttura:

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

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

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

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

Questa nuova organizzazione strutturale risulta molto utile anche se combinata alle tag H1-H6, in quanto permette la creazioni di sezioni nidificate all' interno di ciasun "blocco". Ecco ad esempio come combinare una sezione 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 spostarsi rapidamente da una sezione all' altra, per navigare più rapidamente tra i contenuti. Nel caso di un blog, il lettore potrà muoversi dal contenuto di un post a quello successivo senza visualizzare i dati relativi all' autore, alla data di pubblicazione, ecc. Per quanto riguarda i vantaggi del programmatore, una source ripulita da DIV e strutturata in blocchi e indubbiamente migliore.

L' elemento HEADER rappresenta l' header di una pagina. Ha la possibilità di contenere diversi sotto-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 parte bassa, della pagina. Tipicamente contiene i dati relativi all' autore del sito, alla partita IVA dell' azienda ed 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 a ciò che gli stà attorno: spesso usato per definire 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 di una 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 i contenuti 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, alla crescita esponenziale nel Web dei contenuti multimediali, promossi da YouTube, MySpace, Flickr & Co. Per questo motivo molti webmaster sono ricorsi al Flash, abbandonando il tradizionale HTML. Grazie ai player multimediali in Flash, ad esempio, l' autore è in grado di personalizzarne la riproduzione e l' aspetto grafico, permettendo all' utente di stoppare, riprendere, mandare avanti/indietro il file multimediale in questione, tutte operazioni comuni nei player multimediali software, e latenti in quelli in HTML.

Ma con l' HTML 5 le cose cambiano: ecco arrivare i controlli AUDIO e VIDEO, con i quali la riproduzione di contenuti  multimediali viene ottimizzata e resa di sconcertante 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' immagine che verrà visualizzata durante il caricamento del video tramite l' attributo POSTER.

Allo stesso modo, semplicissima è anche la riproduzione di un file audio, dal momento che gli attributi degli oggetti AUDIO e VIDEO sono gli stessi (AUDIO non prevede, ovviamente, l' attributo POSTER, WIDTH ed HEIGHT)

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

Entrambi i controlli sopra-citati supportano l' elemento SOURCE, utile per specificare uno o più video/audio alternativi da riprodurre in base alle impostazioni del PC dell' utente che ne richiede la visione/ascolto. L' attributo MEDIA può essere usato per impostare i requisiti minimi per la corretta esecuzione del file multimediale 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 maggior controllo sul player multimediale c'è la relativa API, che offre metodi ed elementi aggiuntivi, volti al controllo 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 loro impiego:

<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 e dell' XHTML, l' HTML 5 si basa sul Document Object Model (DOM), ovvero sulla rappresentazione ad albero usata dai browseers per riprodurre la pagina web. Per fare un esempio, ecco la DOM di una semplice pagina comprensiva di titolo, header e paragrafo:

Questa novità comporta un notevole vantaggio: il linguaggio può venir definito indipendentemente dalla sintassi. Si possono usare due differenti sintassi primarie per rappresentare un documento HTML: l' HTML serialisation (HTML 5) e l' XML serialisation (XHTML 5).

La prima si ispira alla sintassi delle prime versione dell' HTML, senza però che i browsers facciano fatica 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à essere conforme all' HTML serialisation, mentre ciascun documento del tipo application/xhtml+xml dovrà attenersi alla sintassi dell' XML serialisation.

Vediamo ora quali sono i benefici ricavati dall' utilizzo dell' HTML serialisation e quali quelli ricavati dall' 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 Apart Magazine.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Lorenzo
Hai qualche domanda da fare?