HTML5 è un'evoluzione del modello di markup della pagina internet che sta cambiando e cambierà il modo di vivere il web sia lato sviluppatore che lato utente.
Rispetto all'HTML4 ci sono novità a livello di sintassi, con nuovi elementi e regole di disposizione dei contenuti all'interno di una pagina web, e le innovazioni ed integrazioni continuano anche a livello di API Javascript atte appunto a supportare le funzionalità che solitamente sono necessarie all'interazione tra un'applicazione del web 2.0 e l'utente finale quali ad esempio, il salvataggio delle informazioni, la geolocalizzazione del dispositivo dell'utente, l'utilizzo dell'applicazione anche in assenza di una connessione di rete generando un piccolo database lato utente per conservare le informazioni in attesa di una nuova connessione, interagire con l'applicazione in modo più fluido ed usabile, generare grafici 2D e 3D, ecc...
Dopo questa breve introduzione passerò subito all'atto pratico della questione in modo da non rendere questa guida troppo prolissa e permettervi così di poter abbracciare le caratteristiche di questa specifica nel modo più chiaro e veloce possibile.
Una prima considerazione da fare è che per indicare un documento HTML5 viene utilizzata, a livello di dichiarazione di Document Definition Type, la seguente istruzione (che tende a standardizzare tutte le precedenti versioni utilizzate fin'ora):
<!DOCTYPE html>E' comunque possibile utilizzare nelle pagine una sintassi XML dichiarando sotto al doctype la seguente istruzione:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">Per garantire retrocompatibilità tra i browser e compatibilità cross-browser a livello di intepretazione degli stili al fine di sfruttare al massimo le proprietà dei fogli di stile, consiglio di inserire nell'head delle pagine un CSS di reset apposito per l'HTML5 che trovate su html5doctor.com, il quale è una modifica del classico file di reset che in aggiunta vede coinvolti i nuovi elementi inseriti dalla specifica, ed uno script con commento condizionale per le versioni di IExplorer inferiori alla 9, chiamato htmk5shim:
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->Inoltre per verificare se una determinata funzionalità è supportata o meno dal browser che sta leggendo la pagina e poter così agire di conseguenza per evitare il rischio che un utente rimanga bloccato e non possa usufruire a pieno dell'eventuale servizio, ci viene incontro una libreria Javascript chiamata Modernizr di semplice richiamo nell'head delle pagine come qualsiasi altro file .js esterno alla pagina:
<script src="js/modernizr.min.js"></script>Il cui utilizzo è di estrema semplicità, per verificare ad esempio se il browser supporta o meno la geolocalizzazione basta semplicemente scrivere:
if (Modernizr.geolocation) {
// operazioni varie
} else {
// operazioni alternative
// come un messaggio all'utente
// o l'utilizzo di plugin esterni
}La guida proseguirà con un'introduzione di base per descrivere la sintassi, gli elementi strutturali delle pagine web (sia i nuovi che quelli non più previsti nelle specifiche), la gestione dei form e degli attributi dei relativi campi per poi passare ad una panoramica sulle nuove API, sulla gestione del canvas e dei file multimediali.
Molto scorrevole, complimenti! Senza contare che ormai si sta andando sempre più verso l'HTML5 ed è bene capirne le sue potenzialità. Il Flash ormai è superato. Anche Youtube per i browser più diffusi ha abbandonato il Flash in favore di questo linguaggio.
Eh già... e se vogliamo dirla tutta gli "Strumenti per i Webmaster" segnalano come un errore da risolvere l'utilizzo di Flash all'interno delle pagine di un sito, affermando che la maggior parte dei browser per dispositivi mobili non lo supportano, e invitano pertanto alla progettazione di animazioni tramite l'uso di tecnologie web moderne... e qui entra in gioco appunto l'HTML5.