HTML5

HTML5 è l'ultima evoluzione dello standard che definisce HTML. Il termine rappresenta due concetti differenti:

Una nuova versione del linguaggio HTML, con nuovi elementi, attributi e comportamenti
Un più ampio insieme di tecnologie che permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato HTML5 & compagni ed è spesso abbreviato in HTML5

Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.

Semantica: descrivere con maggiore precisione il contenuto.
Connettività: comunicare con il server in modi nuovi e innovativi.
Offline & Memorizzazione: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.
Multimedia: rendere audio e video cittadini di prima classe nell'Open Web.
Effetti e Grafica 2D/3D: usare una gamma molto più ampia di opzioni di rappresentazione.
Prestazioni & Integrazione: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.
Accesso ai dispositivi: usare vari dispositivi di input e output.
Stile: consentire agli autori di realizzare temi più sofisticati.

Semantica

Sezioni e struttura in HTML5: Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: <section> , <article> , <nav> , <header> , <footer> , <aside> e <hgroup>.
Integrare audio e video in HTML5: Gli elementi <audio> e <video> permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.
Forms in HTML5: Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo type degli <input>, e il nuovo elemento <output>.
Nuovi elementi semantici: Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, o <meter>, che accrescono la quantità di elementi validi di HTML5.
Miglioramenti degli <iframe>: Utilizzando sandbox, seamless, e gli attributi srcdoc, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento <iframe>.
MathML: Permette di incorporare direttamente formule matematiche.
Introduzione a HTML5: Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.
Parser di HTML5-compatibile: Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.

Connettività

Web Sockets: Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.
Server-event inviati: Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.
WebRTC: Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.

Offline & Memorizzazione

Risorse Offline: la cache dell'applicazione: Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.
Eventi online e offline: Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.
Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM): La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.
IndexedDB: E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.
Utilizzare file da applicazioni web: Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo multiple con type file dell'elemento <input>. C'è anche FileReader.

Multimedia

Utilizzare audio e video in HTML5: Gli elementi <audio> e <video> incorporano e permetto la manipolazione di nuovi contenuti multimediali.
WebRTC: Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.
Utilizzo della API Camera: Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.
Track e WebVTT: L'elemento <track> consente capitoli e sottotitoli. WebVTT è un formato di traccia testuale.

Grafica & Effetti 3D

Tutorial sui Canvas: Apprendi il nuovo elemento <canvas> e come disegnare grafica ed altri oggetti in Firefox
API di testo per gli elementi <canvas> di HTML5: Le API di testo di HTML5 sono ora supportate agli elementi <canvas>.
WebGL: WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi <canvas> di HTML5.
SVG: Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.

Prestazioni & integrazione

Web Workers: Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.
XMLHttpRequest Livello 2: Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro Ajax.
JIT-motori JavaScript compilati: La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.
History API: Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.
L'attributo contentEditable: trasforma il tuo sito web in un wiki!: HTML5 ha standardizzato l'attributo contentEditable.
Drag & drop: Le API per il drag & drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.
Gestione del focus in HTML: Sono supportati i nuovi attributiHTML5 activeElement e hasFocus.
Gestori di protocollo basato sul Web: E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo navigator.registerProtocolHandler().
requestAnimationFrame: Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.
Fullscreen API: Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.
Pointer Lock API: Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.
Eventi online ed offline: Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.

Accesso ai Dispositivi

Utilizzare le API Camera: Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.
Eventi Touch: Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.
Utilizzare la geolocalizzazione: Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.
Rilevazione orientamento del dispositivo: Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).
Pointer Lock API: Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.

Stile

CSS è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come CSS3, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.

Nuove caratteristiche di stile per lo sfondo: E' ora possibile aggiungere un'ombra a un box, utilizzandobox-shadow ed impostare sfondi multipli.
Bordi più fantasiosi: Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando border-image e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà border-radius.
Anima il tuo stile: Utilizzando le Transizioni CSS per animare il passaggio tra stati, o utilizzando le Animazioni CSS per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.
Miglioramenti tipografici: Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il text-overflow e la sillabazione, ma possono anche applicare un'ombra o controllare più precisamente la decorazione. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola @font-face.
Nuove impaginazioni per la presentazione: Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: Impaginazione CSS a colonna multipla, e l'impaginazione CSS a box flessibile.