L’HTML5 (HyperText Markup Language, versione 5) è la quinta revisione del linguaggio procedurale “basico” del World Wide Web, HTML. Questa nuova versione è destinata a sostituire l’attuale (X)HTML, correggendo i problemi che trovano gli sviluppatori web, così come nel ridisegnare il codice aggiornato alle nuove esigenze richieste dal Web di oggi.
Poiché questi cambiamenti influenzano il modo di sviluppare un sito web in un prossimo futuro, provo a descriverli con una serie di capitoli, dove si rivelano i più importanti cambiamenti. L’HTML5 è in questo momento in uno stato di BETA, anche se alcune aziende stanno sviluppando i loro siti web in tale versione del linguaggio. A differenza di altre versioni di HTML, i cambiamenti in HTML5 iniziano aggiungendo la semantica e l’accessibilità implicita, specificando ogni dettaglio ed eliminando qualunque ambiguità. Esso tiene conto del dinamismo di molti siti web (facebook, twitter, ecc), dove il loro aspetto e il modo in cui funzionano sono più simili ad applicazioni web che a documenti web.

Migliore struttura
⤽
Oggi è abusivo l’uso di elementi DIV per strutturare un sito web in blocchi. HTML5 ci fornisce diversi elementi per affinare la struttura stabilendo ciò che è ogni sezione, eliminando così inutili DIV. Questo cambiamento nella semantica rende la struttura del web più coerente e di più facile comprensione da altre persone e i browsers potranno dare più importanza secondo le sezioni del sito, facilitando inoltre il lavoro dei motori di ricerca così come qualsiasi altra applicazione che riesca a interpretare i siti web. I siti web si suddivideranno nei seguenti elementi:

  • <section></section> Viene utilizzato per rappresentare una sezione “generale” all’interno di un documento o applicazione, come un capitolo di un libro. Può contenere sottosezioni e se accompagnati dai tag di intestazione (dal <h1> al <h6>) possiamo strutturare meglio la pagina creando delle gerarchie nel contenuto, cosa molti favorevole per una buona SEO.
  • <article></article> L’elemento articolo rappresenta un componente di una pagina contenete una composizione autonoma di un documento, di una pagina, applicazione o sito web con l’intenzione che possa essere riutilizzato e ripetuto. Potrebbe essere utilizzato negli articoli dei forum, di una rivista o di un giornale, in post di un blog, in un commento scritto da un utente, in un widget interattivo o gadget o in qualunque altro articolo separato dal contenuto.
    Quando gli elementi
    sono annidati, gli elementi <article> interni rappresentano gli elementi che in linea di principio riguardano il contenuto dell’articolo esterno. Per esempio, un articolo di un blog che permette commenti dagli utenti, detti commenti potrebbero essere rappresentati con <article>.
  • <aside></aside> Rappresenta una sezione della pagina che include un contenuto tangenzialmente in relazione al contenuto che lo circonda, in modo da poter essere considerato un contenuto indipendente. Questo elemento può essere utilizzato per gli effetti tipografici, barre laterali, articoli pubblicitari, per gruppi di elementi di navigazione, o altri contenuti che sono considerati separati dal contenuto principale della pagina.
  • <header></header> L’elemento <header> rappresenta un gruppo di articoli introduttivi o di navigazione.
  • <nav></nav> L’elemento <nav> rappresenta una sezione di una pagina che è un link ad altre pagine o a parti all’interno della pagina: una sezione con i link di navigazione. Non tutti i gruppi di link su una pagina devono stare in un elemento <nav>, solo le sezioni principali composte di blocchi di navigazione sono appropriate per utilizzare l’elemento <nav>. Può essere utilizzato in particolare nel piè di pagina per avere un menù con una lista di link alle varie pagine di un sito, come il copyright, l’home page, la policy e la privacy. Tuttavia, l’elemento <footer> è sufficiente, senza necessità di dover utilizzare l’elemento <nav>.
  • <footer></footer> Elemento <footer> rappresenta il piè di pagina di una sezione con informazioni sulla pagina/sezione che ha poco a che fare con il contenuto della pagina, come l’autore, il copyright, o l’anno.
Differenze tra HTML e HTML5
⤽
Miglioramenti nei moduli (form)
⤽
L’elemento <input> acquisisce grande importanza per l’espansione delle voci che sono ammessi nell’attributo “type“.

  • <input type=”search”> per i campi di ricerca.
  • <input type=”number”> per realizzare operazioni aritmetiche medianti i pulsanti.
  • <input type=”range”> per selezionare tra due valori predeterminati.
  • <input type=”color”> per selezionare un colore
  • <input type=”tel”> per i numeri telefonici.
  • <input type=”url”> per indirizzi web.
  • <input type=”email”> per indirizzi e-mail.
  • <input type=”date”> per selezionare un giorno in un calendario.
  • <input type=”month”> per i mesi.
  • <input type=”week”> per le settimane.
  • <input type=”time”> per le date.
  • <input type=”datetime”> per la data assoluta e tempo.
  • <input type=”datetime-local”> per date locali e frequenti.
Altri elementi interessanti
⤽
  • <audio> e <video> Nuovi elementi che permettono l’integrazione di contenuti multimediali, audio o video, rispettivamente. Si tratta di una delle più importanti e interessanti novità in questo HTML5, giacché permette riprodurre e controllare l’audio e il video senza avere dei plugin come Flash. Il comportamento di questi elementi multimediali è come quello di qualsiasi altro elemento nativo, e permetterà inserisce un link video o immagini, ad esempio. Youtube ha già annunciato che smetterà di utilizzare il plugin di Flash e comincerà a progettare il sito con HTML5.
  • <embed> È utilizzata per contenuti incorporati che ha bisogno di plugin come Flash. Si tratta di un elemento che già riconoscono i browser, ma ora, come fa’ parte di uno standard, non ci sarà alcun conflitto con <object>.
  • <canvas> Si tratta di un elemento complesso che permette di disegnare elementi grafici al suo interno. È utilizzato da Google Maps e nel futuro consentirà agli sviluppatori di creare applicazioni interessanti.
Quattro tecniche di base
⤽
Una domanda comune in questi giorni è : “Come posso iniziare a utilizzare HTML5 se ci sono dei browser meno recenti che non lo supportano?” Ma la domanda stessa è formulata in modo errato. L’HTML5 non è una cosa grande come un tutto, ma una raccolta di singoli elementi, quindi quello che si può fare è quello di rilevare se il browser supporta ogni elemento separatamente.
Quando i browser realizzano il rendering di una pagina, costruiscono un “Modello di Oggetto di Documento” (Document Object Model – DOM), cioè una raccolta di oggetti che rappresentano gli elementi HTML della pagina. Ogni elemento – , <div>, <span> – è rappresentato nel DOM per un oggetto diverso.
Tutti gli oggetti DOM condividono caratteristiche comuni, anche se alcuni hanno più di altri. Nei browser che supportano le funzionalità HTML5 di alcuni oggetti, hanno una sola proprietà e con un semplice sguardo al DOM possiamo sapere le caratteristiche che il browser corrente supporta.
Ci sono quattro tecniche di base per sapere quando un browser supporta una di queste particolari caratteristiche, dalle più semplici alle più complesse.
  1. Verificare se alcune proprietà sono oggetti generici o globali(come window o navigator).
    Esempio: verificare il supporto per la “Geolocalizzazione”.
  2. Creare un elemento e verificare se esistono determinate proprietà in tale elemento.
    Esempio: verificare il supporto per il canvas.
  3. Creare un elemento e verificare se esistono determinati metodi in tale elemento, chiamare il metodo e verificare i valori restituiti.
    Esempio: verificare quale formato video supporta.
  4. Creare un elemento, assegnare un valore a una proprietà particolare, quindi verificare se la proprietà mantiene il suo valore.
    Esempio: verificare tipo di <input> supporta.

Modernizr, una libreria per rilevare l'HTML5
⤽
Modernizr è una libreria JavaScript con licenza open source MIT che rileva se sono supportati molti elementi di HTML5 e CSS3. Questa libreria sarà sempre in aggiornamento e per usarla bisogna solo includerla nello della pagina attraverso il tag <script>.
Copia codice 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Immersione in HTML5</title>
    <script src="modernizr.min.js"></script>
  </head>
  <body>
     ...
  </body>
</html>
Modernizr si esegue automaticamente, non c’è bisogno di chiamare nessuna funzione tipo: modernizr_init(). Quando è eseguito, si crea un oggetto globale chiamato Modernizr, che contiene una serie di proprietà booleane per ciascun elemento rilevato. Per esempio, se il browser supporta elementi canvas, la proprietà nella libreria Modernizr.canvas sarà “true“. Se il browser non supporta l’elemento canvas, la proprietà di Modernizr.canvas sarà “false“.
Copia codice 

if (Modernizr.canvas) {
   // crea grafico
} else {
  // senza supporto per canvas
}
Applicazioni
⤽
HTML 5 definisce l’elemento <canvas> come un rettangolo sulla pagina in cui è possibile utilizzare lo javascript per disegnare qualsiasi cosa. Determina inoltre una serie di funzioni (canvas API) per disegnare figure, creare sfumature e applicare trasformazioni.
Testo Canvas
⤽
Se il browser supporta le API di canvas non vuol dire che può sopportare le API per il testo-canva. Le API di Canva sono state sviluppate da diverso tempo e le funzionalità per il testo sono state aggiunte in seguito, quindi alcuni browser potrebbero non avere integrate le API per il testo.
Video
⤽
L’HTML5 ha definito un nuovo elemento chiamato <video> e serve per incorporare del video nelle pagine web. In questo periodo inserire un video nelle pagine web era impossibile senza utilizzare determinati plugin come QuickTime o Flash. L’elemento <video> è stato progettato per essere utilizzato senza dover individuare eventuali script. È possibile specificare più file video e i browser che supportano il video in HTML5 potrà scegliere uno in base al formato che supporta.
Formati video
⤽
I formati video sono come le lingue scritte. Un giornale inglese contiene le stesse informazioni di un giornale in italiano, anche se solo uno sarà utile. Con i browser succede lo stesso, hanno bisogno di sapere in quale “linguaggio” è scritto il video. I linguaggi video sono chiamati “codec“, un algoritmo utilizzato per comprimere il video. Ci sono decine di codec in uso in tutto il mondo, anche se solo due sono i più rilevanti. Uno di questi codec costa denaro per la licenza e funziona in Safari e iPhone. L’altro codec è gratuito, è open source e funziona sui browser come Firefox e Chromium.
Applicazioni OFFline
⤽
Leggere una pagina web offline è relativamente semplice. Ci si connette a Internet, si carica un sito web, e quando ci disconnettiamo possiamo tranquillamente leggere tutto il suo contenuto. Ma cosa succede quando sono applicazioni come Gmail o Google Docs? Grazie all’HTML5 chiunque può creare un’applicazione web che funzioni offline.

Le applicazioni Web offline sono eseguite come un’applicazione online. La prima volta che si visita un sito web, che sia disponibile per la visualizzazione offline, il server web notificherà al browser i files necessari per lavorare offline. Questi files possono essere HTML, JavaScript, immagini e anche video. Una volta che il browser ha scaricato i file necessari, si può ri-visitare il sito, anche se non si è in linea.
Il browser si renderà conto che si è disconnesso da Internet e utilizzerà i files che aveva scaricato in precedenza. La prossima volta che si connette, se sono state apportate modifiche alla web offline, questi sono caricati sul server per aggiornarlo.

Geolocalizzazione
⤽
La geolocalizzazione è il modo per individuare in quale luogo siete nel mondo e, se si desidera, condividere le informazioni con le persone di fiducia. Ci sono molti modi per scoprire dove vi trovate: dal vostro indirizzo IP; dalla connessione di rete wireless; dal ripetitore del cellulare dove si sta parlando; o dai GPS specifici che ricevono le vostre coordinate come la longitudine e la latitudine dai satelliti in orbita.
I moduli o forms
⤽
Nel primo capitolo di questo post, si è menzionato sui cambiamenti nei forms che include l’HTML5.
Come regola per tutti, un modulo è una etichetta o tag <form> e nel suo interno qualche elemento <input type=”text”> o <input type=”password”> con un pulsante <input type=”submit”> prima di chiudere il tag di apertura con </form>. Di seguito spiego alcuni di queste novità.
Testo come PLACEHOLDER
⤽
Il segnaposto (Placeholder in inglese) è un nuovo attributo che viene utilizzato all’interno dei campi di input. Serve per visualizzare un testo nella finestra di input quando il campo è vuoto o non è indicato.
Non appena si fa clic all’interno del campo (o si arrivi dal tasto TAB), il testo scompare.

Avete probabilmente già visto la proprietà del segnaposto. Ad esempio, Mozilla Firefox 3.5 include il testo placeholder nella barra degli indirizzi. Quando si fa clic sulla barra di ricerca o si raggiunge da un TAB, il testo preimpostato scompare.

Ironia della sorte Firefox non supporta questa proprietà, così come IE e Opera; al giorno di oggi lo supporta solo Safari e Chrome. Quei browser che non supportano il placeholder semplicemente lo ignoreranno e non visualizzeranno nulla.

Ecco un esempio di come includere il placeholder in un modulo:

Copia codice 

<form>
  <input placeholder="Cerca nel database">
  <input value="Cercare">
</form>
Campi con autofocus
⤽
L’attributo autofocus permette all’utente di decidere e controllare quale campo di testo deve essere centrato (indicato, attivato) una volta che la pagina viene caricata o in fase di caricamento, consentendo all’utente di iniziare a digitare senza dover lui a specificare qual è il campo di testo principale della pagina . L’attributo autofocus è un attributo booleano (risposte true – false) e non ci deve essere più di un elemento di questo tipo nella pagina.

Molti siti usano javascript per focalizzare e dirigere il cursore automaticamente al campo di testo. Ad esempio Google quando avvia la ricarica, la pagina sposta il cursore automaticamente al suo campo input di ricerca, in modo da poter iniziare a digitare i termini di ricerca nel browser. Questo può essere conveniente per alcuni e non tanto ad altri che possono avere un bisogno specifico. Se si seleziona il tasto di spazio sulla tastiera e si aspetta che la pagina scenda facendo lo scroll, questo non succederà perché il cursore sarà focalizzato nel campo input del form. HTML5 introduce un attributo per il controllo del autofocus sui moduli. L’attributo autofocus fa esattamente quello che sembra, appena la pagina del sito inizia a caricare, sposta il cursore e così anche l’attenzione dell’utente in un campo <input> particolare.

Oggi, Autofocus lo supportano solo Safari, Chrome e Opera. Firefox e IE, lo ignorano.