HTML5

Esempi HTML5

Una collezione di esempi che mostrano le utlime tecnologie HTML in azione

HTML5_Logo_128.png

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.

 

Etichette del documento e nomi di chi ha collaborato alla sua stesura

Contributors to this page: teoli, bertuz83, Giona, Mattei, Grino
Ultima modifica di: teoli,