HTML5 è la nuova moda del momento, innegabilmente. Contrariamente a quanto avviene spesso per vocaboli di moda e di marketing, però, HTML5 è davvero una realtà rivoluzionaria che cambierà sensibilmente il nostro modo di vivere e fruire il web – e dunque un elemento sicuramente presente, probabilmente importante della nostra vita.

Ma che cosa è HTML5? In questo articolo proveremo a dare una spiegazione semplice ma completa di questo termine e di tutte le tecnologie che ne fanno parte per fornire una base teorica su cui fondare tutti i nostri fantastici e innovativi progetti di sviluppo.

Un insieme di tecnologie

Partiamo col dire che HTML5 non è una tecnologia o un linguaggio di markup (men che meno!) ma un insieme di tecnologie: sotto il “capello” (e il logo…) HTML5 sono incluse sostanzialmente tutte le più recenti novità relative allo sviluppo web e alla creazione di web applications. Vediamole una ad una per capire ancora meglio di cosa stiamo parlando.

1. Semantica per le nostre pagine e un markup più facile

Dopo svariati studi (di Opera e di Google) ci si è accorti, qualche anno fa, che i web designers utilizzavano con più frequenza alcuni nomi di classi quali “header”, “footer”, “nav”, “article” per identificare più o meno sempre gli stessi <div> delle proprie pagine (alzi la mano chi non ha usato “header” o “footer” come classi del proprio div di intestazione o di chiusura della pagina). Si è dunque pensato che sarebbe stato utile introdurre dei nuovi tag per identificare questi elementi comuni e ricorrenti, dando così anche un valore semantico a queste parti di una pagina.

Ecco come sono nati i nuovi elementi HTML5 <header>, <nav>, <footer>, <aside> e tutti gli altri che potete scoprire leggendo articoli su HTML5 e web semantico, dove troverete info anche su microformats, microdata e RDF, altre tecnologie legate a HTML5 e al semantic web. In ambito accessibilità è inoltre interessante l’integrazione con ARIA, un sistema di markup per migliorare notevolmente l’accessibilità delle nostre pagine web.

Per rendere più facile la fruizione e la creazione di markup, poi, è stata di gran lunga semplificata la parte di “validazione”, in particolare rispetto a documenti XML quali XHTML. E’ sufficiente ricordare che il doctype, una volta una pappardella infinita, adesso è un semplice:

<!DOCTYPE html>

Basta questo per indicare che il nostro documento è una pagina HTML5.

2. Offline e storage

HTML5 è l’insieme di tecnologie che vuole trasformare Internet da un semplice catalogo di pagine di testo in un immenso archivio di applicazioni web, ovvero strumenti con funzionalità avanzate e interfaccia user-friendly per “fare cose”, non solo per consultare documenti.

In questo senso, le due tecnologie che rendono possibile la “magia” di una vera e propria applicazione scritta in HTML5 sono:

  • App Cache: per dire al browser quali file (HTML, immagini, CSS, JavaScript) salvare in locale così da consentire una navigazione e un utilizzo dell’applicazione anche quando si è offline
  • Local Storage: un’evoluzione dei cookies, molto più facile da gestire e soprattutto con 5 mega (almeno) di spazio a disposizione per salvare dati direttamente dal browser, senza passare da un database centralizzato (e quindi raggiungibile solo quando connessi)

3. API di accesso ai device

HTML5 vuole essere la tecnologia di sviluppo del futuro. E il futuro non è solo più il nostro caro desktop o notebook: iPhone, Android, iPad, altri tablet – questi sono gli strumenti con cui oggi e soprattutto domani si utilizzerà il web.

Per sfruttare al massimo le funzionalità di tutti questi device HTML5 prevede l’utilizzo di una serie di API (ovvero di “interfacce di programmazione”) per accedere a caratteristiche e dati specifici dei vari terminali: attualmente è già implementata e funzionante sulla maggior parte dei browser, telefonini e tablet la geolocalizzazione (il device comunica al browser la posizione dell’utente e dunque il nostro JavaScript può agire di conseguenza) ma sono già in fase avanzata di progettazione altre API per utilizzare ad esempio la fotocamera, la lista dei contatti o i dispositivi audio.

4. Web Sockets

Uno dei problemi più ardui che ogni developer affronta nella sua carriera è far comunicare il il browser con il server senza dover ogni volta ricaricare la pagina, aprendo cioè una connessione diretta e aggiornabile a prescindere dal resto della pagina.

Web Sockets risolve proprio questo problema: questa tecnologia (non ancora del tutto diffusa e implementata per problemi legati alla sicurezza ma comunque già abbastanza “matura” e funzionante, ad esempio, su iPhone) consente di creare un canale di comunicazione full-duplex tra il browser e il server, dando così la possibilità di “dialogare” in maniera semplice e user-friendly per creare, ad esempio, applicazioni di chat in realtime o altre applicazioni che richiedono uno scambio costante di informazioni fra client e server (o fra vari client, passando dal server).

5. Multimedia

Che direi del supporto nativo nei browser di audio e video all’interno del browser? HTML5 ha introdotto i due tag <audio> e <video> per inserire in maniera facile, veloce e senza l’utilizzo di plugin esterni (tipo Flash o SilverLight) dei file audio o dei file video. La cosa fantastica di tutto ciò è che, contrariamente a quanto avviene ad esempio con Flash, questi elementi sono parte del DOM e dunque possono essere liberamente modificati e gestiti da JavaScript – ad esempio in combinazione con altri oggetti HTML5 tipo il canvas per manipolare in tempo reale un video (questo è fantastico, da guardare con Firefox). Provate a farlo con Flash!

6. Grafica, disegno ed effetti 3D

Abbiamo citato canvas, ricordiamo anche SVG: due strumenti per disegnare (il primo in “bitmap”, il secondo vettoriale) direttamente sulla nostra pagina web utilizzando semplicemente un tag

<canvas>

e un po’ di JavaScript. Il risultato? Beh, sarebbe troppo lunga la lista di esempi e possibilità di utilizzo di canvas e SVG, ma date un ‘occhiata a questo gioco stile Doom – tutto in JavaScript!

7. Web Workers

Come abbiamo visto, JavaScript sta diventando un linguaggio sempre più complesso e potente, richiedendo in alcuni casi una quantità di risorse non indifferente. Purtroppo, questo vuol dire spesso rallentare tutto il browser, rendendo la navigazione nel resto della pagina o l’utilizzo di altre finestre quasi impossibile.

Per risolvere questo problema è stata inventata la tecnologia Web Workers, ovvero un sistema per “slegare” un’attività intensiva dal resto dell’interfaccia utente: in sostanza, si decide che una funzione deve essere eseguita senza che questa blocchi l’utilizzo del sito e dunque, mentre si attendono i risultati (ad esempio di un calcolo complesso o di una query su un altro server) è possibile comunque utilizare le altre funzionalità della web app e navigare sulla pagina come se nulla stesse impegnando in maniera intensiva il processore e il browser.

E CSS3 ?

Senza voler entrare in una polemica che ha scosso il mondo del web development da quando il W3C ha deciso di includere anche CSS3 nel “cappello” di HTML5 (la polemica ruota intorno al il fatto che per i puristi – a mio modo di vedere correttamente – CSS3 riguarda la presentazione di un documento e dunque è una cosa slegata da HTML5 che invece riguarda il contenuto, i dati) ricordiamo solo che, contestualmente alle novità che abbiamo indicato, è nato per l’appunto CSS3, ovvero un nuovo standard CSS con un sacco di nuove ed esaltanti caratteristiche per rendere a dir poco strabilianti dal punto di vista grafico le nostre pagine web.

Problemi

Tutto bello, tutto fantastico? Quasi… I problemi principali di HTML5 sono due:

  • non è ancora una standard definito ma ancora, e per un bel po’, una specifica in fase definizione. Tutte le tecnologie che vi abbiamo indicato in questo tutorial sono abbastanza “chiuse” e dunque possono essere utilizzate con tranquillità ma è bene ricordare che lo standard finale, a quanto pare, non sarà finito entro il 2022 (o qualcosa del genere…)
  • il problema principale è che il supporto di queste funzionalità non è ancora total fra i vari browser e (soprattutto in ambito CSS3) sussistono ancora delle soluzioni “proprietarie” ad esempio per alcuni tag e classi. E’ bene dunque utilizzare sempre sia delle librerie tipo Modernizr che ci avvertono su quali funzionalità sono supportate dal browser che sta visualizzando le nostre pagine e soprattutto progettare la nostra web app per avere delle soluzioni di fallback (pensiamo ad esempio ad una soluzione Flash per i browser che non accettano il tag <video>)

Conclusioni

Ricapitoliamo. Le nuove tecnologie HTML5 (lasciamo stare per ora CSS3) sono:

  • Semantica e markup più facile
  • Offline e storage
  • API di accesso ai device
  • Web Sockets
  • Multimedia
  • Grafica, disegno ed effetti 3D
  • Web Workers

Ora: ditemi voi se, combinando queste tecnologie insieme (ovviamente è questo il bello!) non si può fare qualcosa di assolutamente fantastico e impensabile prima di HTML5.

Una applicazione web che funziona anche quando il nostro terminale (laptop o telefonino) non è connesso e, trovando la nostra geolocation, disegna in tempo reale e senza bloccarci il browser su una mappa delle nuvolette con sfumature e dimensioni diverse a seconda dei tweet che vengono prodotti nelle nostre vicinanze? Si può!

Qualunque altra cosa vi venga in mente? Si può!!! 🙂

E per chi vuole approfondire ulteriormente i dettagli tecnici e la specifica (il “living standard”) ecco il link: http://www.whatwg.org/specs/web-apps/current-work/multipage/

Buona programmazione, buon HTML5!

 

http://www.html5today.it/tutorial/che-cos-html5