Iniziare con HTML5

Iniziare con HTML5

Immagine 1 di 3

HTML5 è l'ultima versione del linguaggio di markup standard del web
HTML5 semplifica l'incorporamento di video direttamente in una pagina Web, senza bisogno di plug-in
Il test HTML5 online ti consente di verificare quanti standard sono supportati dal tuo browser

Sono inoltre disponibili attributi che consentono di contrassegnare un campo di input come richiesto; riempire con testo segnaposto; o anche per specificare un tipo di dati o un modello di espressione regolare a cui il contenuto del campo di input deve corrispondere. Ciò dà a HTML5 la possibilità di eseguire la convalida dell'input nel browser, dove l'input non valido viene immediatamente rifiutato, con un messaggio di errore appropriato, prima che il modulo venga inviato. Questo è di grande aiuto per gli sviluppatori, che in precedenza dovevano creare le proprie routine per convalidare l'input dell'utente.

API JavaScript

Come abbiamo accennato, la specifica HTML5 contiene una serie di API JavaScript. Uno degli aspetti più discussi di HTML5 è il elemento – ma da solo non fa altro che definire un'area di disegno su una pagina web. Il vero lavoro viene svolto dall'API JavaScript 2D, che ti consente di disegnare e manipolare la grafica in modo dinamico all'interno di una pagina web. A rigor di termini, l’API 2D non fa parte di HTML5 – a causa della sua complessità è definita in uno standard separato – ma è parte integrante del moderno ambiente HTML5.

L'API JavaScript 2D ti offre numerose funzioni, come disegnare forme, riempire colori e creare sfumature e modelli, rendering di testo, disegno di grafici e diagrammi, manipolazione di immagini ed esportazione di contenuti su tela in formato statico file. La gamma di funzionalità è sufficientemente ampia da creare applicazioni complesse e persino giochi in rapido movimento: c'è una comunità in continua crescita dedicata alla creazione di app nel browser, come quelle che troverai in IL Il negozio online di Chrome.

Oltre i cookie: archiviazione locale e di sessione

Nelle versioni precedenti di HTML, il modo normale in cui un sito Web "ricordava" i dettagli di un utente era memorizzando un file cookie – un piccolo pacchetto di dati – sul PC locale, che potrà poi essere riletto quando l'utente ritorna sul luogo. Per motivi di sicurezza, alcuni valori dei cookie durano solo finché l'utente non si disconnette o chiude il browser. Altri erano destinati a persistere ogni volta che un utente visitava un particolare sito web; ma dovevo ancora specificare una data di scadenza.

HTML5 fornisce un'API JavaScript che definisce due nuovi metodi di archiviazione di tali dati, noti come sessionStorage e localStorage. L'impostazione di un valore in sessionStorage indica che il valore persisterà solo fino alla fine della sessione, mentre un valore in localStorage persisterà indefinitamente. Ciò rende l'archiviazione dei dati molto più semplice per gli sviluppatori.

È anche possibile memorizzare più dati tramite queste API rispetto a quanto fosse possibile con i cookie. Un sito HTML tradizionale si limita a memorizzare 20 cookie da 4KB ciascuno nel browser dell’utente. Con localStorage e sessionStorage, sono disponibili 5 MB, quindi grandi quantità di dati, come archivi di posta elettronica o calendari, possono essere archiviati localmente, per l'elaborazione locale o per riferimento offline.

Ciò si collega a un'altra nuova funzionalità di HTML5: le applicazioni offline. È possibile per gli sviluppatori definire una cache offline di un sito che il browser possa archiviare e gestire. In questo modo, le app web possono rimanere disponibili anche in assenza di connessione di rete, ad esempio quando sei su un aereo o in metropolitana.

Cosa non c'è in HTML5

Come accennato in precedenza, esistono numerose tecnologie che sono spesso raggruppate sotto l'ombrello delle "tecnologie HTML5", ma che non fanno parte delle specifiche HTML5. Alcuni sono collegati a nuove funzionalità dell'HTML, come le API JavaScript menzionate sopra. Altri sono abbastanza separati da ciò che è realmente HTML5.

Geolocalizzazione, ad esempio, si ottiene tramite un'API JavaScript che consente di individuare la posizione di un utente con tecnologie del dispositivo come GPS, Wi-Fi e informazioni sul cellulare. Questa API può essere utile per i siti Web di tipo applicativo, ma non fa parte di HTML5 e non lo è mai stata.

CSS3 – l’ultima versione delle specifiche Cascading Style Sheets – semplifica l’implementazione di un’ampia gamma di stili visivi e layout per gli elementi della pagina web. Include anche il costrutto @font-face, che consente ai web designer di incorporare caratteri personalizzati nelle pagine, per creare layout tipografici sorprendenti e distintivi. Anche in questo caso, però, non fa parte di HTML5, ma è uno standard separato.

Allo stesso modo, lavoratori del web – frammenti di codice JavaScript eseguiti in background, mentre l'utente continua a interagire con il browser in primo piano – potrebbero essere associati al tipo di sito Web che utilizza HTML5. Tuttavia, il loro comportamento e utilizzo sono definiti in una specifica WHATWG completamente separata.

Un’ultima idea che a volte viene confusa con HTML5 è web design reattivo – un termine coniato da Ethan Marcotte per descrivere come un web design può essere realizzato per rispondere alle dimensioni e alle capacità dei dispositivi degli utenti. Un sito che segue questo principio potrebbe infatti essere realizzato utilizzando HTML5; ma questo è il massimo delle idee.