Una breve disamina delle principali novità di HTML5

Il 18 gennaio 2011 il W3C, abbreviazione di World Wide Web Consortium, l’associazione fondata da Tim Berners-Lee che ha come obiettivo primario quello di sviluppare e migliorare i linguaggi ed i protocolli utilizzabili sul web promuovendone la continua crescita, ha pubblicato il logo ufficiale della nuova versione del linguaggio di markup HTML5.

Il team di W3C, con un annuncio pubblicato in bella vista sul sito web dell’organizzazione, vuole spronare “coloro che già hanno deciso di adottare porzioni di HTML5 sulle proprie pagine web” ad utilizzare il logo per comunicare a tutti la decisione di abbracciare le nuove specifiche.
Una pagina allestita per l’occasione enumera le nuove peculiarità di HTML5 e mette a disposizione alcuni strumenti per pubblicizzare l’iniziativa.

In realtà, però, alla data di stestura di quest’articolo, le specifiche di HTML5 sono ancora in fase di definizione. Il “cantiere”, insomma, è ancora aperto sebbene, con la presentazione del logo ufficiale di HTML5, i tempi potrebbero iniziare ad essere sempre più maturi.

HTML5 sostituirà la precedente versione che risale addirittura al 1999 ed il lancio dell'”inedito” logo (qualcosa su cui HTML4 ed XHTML non hanno mai potuto contare) sembra voler sottolineare l’importanza dell’approvazione delle nuove specifiche. Sì, perché ad oggi – sebbene in alcune applicazioni web si stia già provando ad utilizzarlo da tempo – HTML5 non è ancora uno “standard”. I vari browser web stanno via a via migliorando la compatibilità con HTML5, in modo da non trovarsi in ritardo quando le specifiche saranno definitivamente approvate e non saranno quindi più suscettibili di modifiche. Con lo slogan “ho visto il futuro, nel mio browser“, W3C ha iniziato a porre l’accento su alcune delle innovazioni principali che sono già state inserite in HTML5.

Cerchiamo, in quest’articolo, di tracciare un identikit di massima della nuova versione del linguaggio di markup invitando il lettore a tenere presente che HTML5 potrà essere soggetto ad ulteriori interventi da parte del W3C e del gruppo di lavoro esterno (il WHATWG).

Tra gli obiettivi primari di HTML5 vi è quello di mettere nelle mani dei web designer, dei webmaster e degli sviluppatori delle specifiche che permettano di ridurre la necessità di impiegare plugin per il browser esterni (Flash in primis). Con gran gioia da parte di Apple che ha da tempo voluto “defenestrare” Flash dai suoi prodotti suscitando un vespaio di polemiche e provocando una dura reazione da parte dei vertici di Adobe (ved., a tal proposito, i seguenti articoli: Apple esclude Adobe Flash dai suoi dispositivi; Parole di fuoco Apple-Adobe sulla tecnologia Flash e Apple sancisce il divorzio tra Mac ed Adobe Flash).

Tra le nuove caratteristiche di HTML5, citiamo l’elemento canvas che facilita il disegno di oggetti sulla pagina web, le tag <video> ed <audio>, per la riproduzione diretta di contenuti multimediali, l’introduzione di elementi legati a specifiche tipologie di contenuti (ad esempio, articoli, intestazione, pié di pagina, sezioni,…) e di controlli “inediti” per l’inserimento di indirizzi di posta elettronica, URL, numeri, di caselle di ricerca nonché per la scelta di date.
“La quinta” del linguaggio di markup mette a disposizione anche due oggetti per la memorizzazione di dati sul sistema client: localStorage e sessionStorage. Il primo consente di salvare delle informazioni sul client senza alcuna scadenza mentre il secondo permette di annotarle per un’unica sessione di lavoro.

HTML5 si propone come il successore di HTML 4.01, XHTML 1.0 e XHMTL 1.1 mettendo a disposizione alcune peculiarità particolarmente utili nella fase di sviluppo delle più moderne applicazioni web. La nuova versione del linguaggio di markup si propone anche di “standardizzare” anche tutta una serie di caratteristiche che gli sviluppatori web hanno utilizzati per anni. E’ anche il primo tentativo di documentare in modo formale molti degli standard “di fatto” che sono stati egualmente abbracciati, col tempo, dai vari browser.
Le ultime versioni di Google Chrome, Apple Safari, Mozilla Firefox ed Opera supportano molte delle nuove caratteristiche di HTML5. Anche Microsoft, con il rilascio della versione finale di Internet Explorer 9 si getterà presto nella mischia.

Ad ogni modo, quali browser supportano quali funzionalità di HTML5? Per scoprirlo, oggi come oggi, è possibile provare a saggiare ciascuna delle varie caratteristiche che compongono HTML5. Ogniqualvolta un browser espone all’utente una qualsiasi pagina web, esso provvede a creare il cosiddetto DOM (Document Object Model). Si tratta di una “collezione” di oggetti che rappresentano gli elementi utilizzati in una pagina HTML. Ogni tag <p>, <div>, <span> e così via viene rappresentata nel DOM utilizzando un differente oggetto. Ci sono poi oggetti a valenza globale (come document e window) che sono sono connessi con alcun elemento specifico.

Un ottimo approccio per verificare quali caratteristiche di HTML5 e dei CSS3 (nuova versione del linguaggio utilizzato per definire la formattazione degli elementi che compongono le pagine web) sono supportate da ciascun browser, consiste nell’impiego di Modernizr. Si tratta di una libreria ovviamente opensource (è scritta in JavaScript) che può essere richiamata da una pagina HTML semplicemente ricorrendo alla seguente riga (da inserirsi entro la tag <head>):

<script src="modernizr-1.6.min.js"></script>

Modernizr crea una variabile JavaScript per ciascuna caratteristica che è in grado di controllare. Ad esempio, sui browser web ove l’oggetto canvas proprio di HTML5 non è utilizzabile perché non supportato, Modernizr attribuirà all’omonima variabile canvas il valore false. Diversamente, il valore sarà true.

if (Modernizr.canvas) {
// disegna delle forme utilizzando canvas
} else {
// il browser non supporta canvas
}

Inserendo il codice sopra all’interno di una pagina web, è possibile controllare se il browser web in uso supporti o meno l’elemento canvas introdotto in HTML5.
A titolo esemplificativo, abbiamo creato una semplice pagina HTML che consente di verificare proprio il supporto, da parte del browser in uso, dell’elemento canvas. Essa è raggiungibile cliccando qui. Ed ecco il suo semplicissimo codice sorgente (ovviamente, il file modernizr-1.6.min.js è stato memorizzato nella stessa cartella dove è posto il file HTML):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test di HTML5</title>
<script src="modernizr-1.6.min.js"></script>
</head>
<body>

<script type="text/javascript">
if (Modernizr.canvas) {
alert("Questo browser supporta l'elemento canvas");
} else {
alert("Questo browser NON supporta l'elemento canvas");
}
</script>

</body>
</html>

E’ possibile controllare come, per esempio, browser quali Firefox e Chrome già supportino l’elemento canvas mentre Internet Explorer 8.0 non ne permette l’utilizzo.

L’elemento canvas

Canvas è l’elemento, introdotto in HTML5, che consente di disegnare elementi grafici sulle pagine web. E’ di fatto un rettangolo, posizionabile sulla pagina, all’interno del quale è possibile tracciare qualunque cosa ricorrendo a codice JavaScript.
HTML5 definisce una serie di funzioni (“canvas API“) per il disegno di forme, linee, creare effetti sfumati ed applicare delle trasformazioni.

Per “testare” il supporto di canvastext basta intervenire sulla riga if (Modernizr.canvas) { sostituendola con if (Modernizr.canvastext) {.

Video ed audio

Sino ad oggi, l’inserimento di contenuti multimediali all’interno delle pagine web era del tutto impossibile se non avvalendosi di speciali plugin sviluppati da terze parti (citiamo, per esempio, Adobe Flash, Microsoft Silverlight ed Apple QuickTime).
HTML5 introduce una nuova metodologia, destinata a diventare uno standard per il web, per la visualizzazione di un contenuto audio o video nella pagina.
Per richiamare un file video, ad esempio, è semplicemente possibile utilizzare la tag <video> entro la quale si potranno eventualmente specificare formati differenti. Sarà poi il browser web a riprodurre automaticamente quello supportato.
Ad oggi, infatti, in materia di codec video non c’è accordo tra i produttori di browser. Alcuni sono propensi ad utilizzare formati proprietari mentre altri preferiscono garantire compatibilità esclusivamente con quei formati che non prevedono il pagamento di costi di licenza (software liberi).

La tag <video> di HTML5 supporta tre formati: WebM, Ogg e MPEG4. Ecco allora che utilizzando il codice che segue si potrà lasciare al browser l’incombenza di scegliere uno dei tre formati:

<video controls="controls">
<source src="nomevideo.ogg" type="video/ogg" />
<source src="nomevideo.mp4" type="video/mp4" />
<source src="nomevideo.webm" type="video/webm" />
Il tuo browser web non supporta la tag video di HTML5.
</video>

Ovviamente, se il browser manca del supporto sia per WebM che per Ogg che per MPEG4, apparirà la frase “Il tuo browser web non supporta la tag video di HTML5“. Specificando tutti e tre i formati, sul server web lo stesso video dovrà essere stato codificato utilizzando ciascun codec e dovranno essere resi disponibili i tre file .mp4, .webm e .ogg.

Vi segnaliamo questo interessante codice, battezzato dal suo autore Video for Everybody!, che utilizza la tag <video> di HTML5 ove possibile tornando all’impiego di Flash o QuickTime sui browser più vecchi.

Analogamente, nel caso della tag <audio>, HTML5 supporta al momento tre formati: Ogg Vorbis, MP3 e WAV. Come nel caso dei contenuti video, è possibile eventualmente specificare più file codificati utilizzando codec differenti: sarà il browser a riprodurre quello supportato.

Memorizzazione di dati

HTML5 introduce alcuni elementi che permettono di memorizzare dei dati sul sistema client dell’utente. Il concetto alla base del loro funzionamento è molto simile a quello dei cookie sebbene le caratteristiche portate al debutto con HTML5 siano designate per trattare un maggior quantitativo di dati. I cookie, infatti, hanno dimensioni molto ristrette e vengono reinviati al server web ogni volta che da client si richiede la visita di una pagina web presente sullo stesso sito. Tale procedura richiede tempo e banda per poter essere effettuata: HTML5, invece, consente di memorizzare delle informazioni lato client ed i siti web possono accedervi via JavaScript una volta che il caricamento della pagina si è concluso.

Chiunque abbia accesso “fisico” al computer dell’utente può probabilmente metter mano sul contenuto del database di storage di HTML5 ma dal browser web i vari siti web sono autorizzati a modificare solo i propri valori e non ad attingere alle informazioni memorizzate lato client da parte di altri siti (same-origin restriction).

Applicazioni web operative in modalità “offline”

Le novità introdotte in HTML5 renderanno più semplice, per tutti, sviluppare applicazioni web capaci di funzionare anche in modalità “offline” ossia quando si è ormai disconnessi dalla rete Internet. Ogniqualvolta si visita un sito web in grado di supportare la modalità “offline”, il server informerà il browser su quali file siano necessari per abilitare l’utilizzo dell’applicazione a disconnessione dalla Rete avvenuta. I file “segnalati” dal server al browser possono essere i più disparati: semplici pagine HTML, codice JavaScript, immagini ed addiritura video.
Non appena il browser avrà prelevato localmente tutti i file necessari, l’applicazione web potrà essere utilizzata in modalità disconnessa: non appena ci si ricollegherà alla Rete, questa provvederà a comunicare gli eventuali aggiornamenti al server web. I vantaggi di un approccio del genere sono, ovviamente, enormi e risultano particolarmente utili soprattutto per coloro che si trovano spesso in viaggio.

Nuovi campi per l’inserimento dei dati nei form

E’ cosa nota che utilizzando la tag HTML <form>, inserendo qualche campo con <input type="text"> e chiudendo con un <input type="submit">, si possa allestire un modulo per l’inserimento di dati.

HTML5 definisce una dozzina di tipi di dati aggiuntivi, utilizzabili all’interno dei form, che possono essere sfruttati per l’inserimento e la trasmissione al server web delle informazioni più disparate, nei formati più diversi.
Ecco i vari tipi di dato utilizzabili:

<input type="search">
<input type="number">
<input type="range">
<input type="color">
<input type="tel">
<input type="url">
<input type="email">
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">

Al momento della stesura del presente articolo solo Opera supporta tutti i campi mentre le altre versioni stabili dei browser “concorrenti” visualizzano generalmente una casella vuota.

Senza utilizzare codice JavaScript, HTML5 permette la possibilità di piazzare del testo “segnaposto” all’interno di un qualunque campo di un form. Tale testo scomparirà non appena l’utente cliccherà su tale campo od inizierà a digitarvi del testo.
Inoltre, è stata introdotto un attributo “autofocus” che consentirà di selezionare automaticamente, all’apertura della pagina, un campo del form.

Web workers

I cosiddetti web workers forniscono invece un approccio standardizzato per eseguire codice JavaScript in background. Ricorrendo a questa nuova caratteristica di HTML5, lo sviluppatore può richiedere l’esecuzione simultanea di più operazioni. Mentre esse verranno effettuate “in background”, l’utente potrà continuare ad interagire con la pagina web.

Geolocation

Come abbiamo visto più volte, si utilizza il termine geolocation per descrivere quei meccanismi che permettono di stabilire la propria posizione fisica sul globo terrestre con la possibilità opzionale di condividere tale informazione con le persone di cui ci si fida.
Ci sono molteplici strumenti che consentono di stabilire la propria posizione sulla crosta terrestre: alcuni meccanismi sono molto approssimativi, altri estremamente precisi. Citiamo, ad esempio, l’indirizzo IP di volta in volta assegnato dal provider Internet, l’hot spot Wi-Fi utilizzato per la connessione, l’antenna alla quale è connesso lo smartphone, un dispositivo dotato anche di funzionalità GPS.
In realtà, gli strumenti di geolocation sono oggetto di standardizzazione da parte del Geolocation Working Group che opera separatamente dal team di HTML5. E’ sembrato opportuno citare anche la geolocation nell’articolo così da dare conto delle modifiche in tal senso che si stanno apportando a tutti i principali browser.

In un prossimo articolo inizieremo a presentare alcuni esempi pratici per l’utilizzo delle varie novità di HTML5.