Introduzione ad HTML5
Prima di entrare nello specifico tecnico con gli argomenti che verranno trattati nelle successive pubblicazioni di HTML5Italia.com, è opportuno fare una panoramica introduttiva su HTML5 per avere un quadro d'insieme sufficientemente chiaro delle tecnologie che caratterizzeranno il Web del futuro.
Cos'è HTML5?
Wikipedia definisce HTML5 come "la successiva major release di HTML, il principale linguaggio di markup per il Web". Si tratta dunque di una evoluzione — non di una rivoluzione — del classico HTML, regolamentata da un insieme di specifiche gestite dal W3C (World Wide Web Consortium) e dall'apposito gruppo di lavoro WHATWG (Web Hypertext Application Technology Working Group).
In realtà in HTML5 convergono tecnologie che vanno oltre l'HTML inteso strettamente come semplice linguaggio di markup (un insieme di tag) ma che abbracciano le diverse componenti dello sviluppo per il Web. Il W3C fornisce una panoramica delle tecnologie e degli standard coinvolti:
- Semantica: un insieme di tag più ricco, l'utilizzo di RDF (Resource Description Framework), microdati e microformati consentono di dare un senso alla struttura in chiave semantica, rendendo il Web maggiormente fruibile, sia dagli utenti che dai programmi;
- Offline e gestione dei dati: le applicazioni Web possono avviarsi più velocemente e funzionare anche in assenza di connettività grazie ad App Cache e a Local Storage, IndexedDB e alle nuove API per la gestione dei file;
- Accesso al dispositivo: a partire dalle API per la geolocalizzazione le applicazioni Web possono accedere alle caratteristiche del dispositivo come a microfoni e telecamere, ai dati locali come contatti e calendario e a caratteristiche come inclinazione e orientamento;
- Connettività: Server Events e Web Sockets stanno "spingendo" (push) verso una connettività più efficiente, che si traduce nella possibilità di effettuare chat in tempo reale, giochi più veloci e una migliore comunicazione client-server;
- Multimedia: audio e video sono state le prime caratteristiche scoperte di HTML5 in quanto la riproduzione di contenuti multimediale può finalmente essere gestita nativamente, senza dover ricorrere a plug-in esterni;
- 3D, grafica e effetti: tra SVG, canvas, WebGL e le nuove funzionalità per la gestione del tridimensionale di CSS3 si possono realizzare effetti visuali eccezionali;
- Prestazioni e integrazione: creare applicazioni con prestazioni elevate e contenuti dinamici velocissimi diventa più semplice grazie all'impiego di Web Workers e XMLHttpRequest 2;
- CSS3: una vasta gamma di stili ed effetti che è possibile applicare ai contenuti senza dover adattare il markup rendono possibile una personalizzazione grafica senza precedenti e un controllo tipografico flessibile, anche grazie all'adozione del formato WOFF (Web Open Font Format).
Figura 1 - HTML5 può essere visto come la combinazione di markup, JavaScript, CSS3 e multimediale
In definitiva, parlando di HTML5, comunemente intendiamo la convergenza di markup HTML per la definizione dei contenuti, di ECMAScript 5 (JavaScript) per la gestione di comportamenti, interazione e dinamismi,di CSS3 per lo stile di presentazione e di multimedialità, ovvero la possibilità di gestire audio e video in maniera nativa all'interno del browser.
Storia del Web: 20 anni in 20 secondi
Per meglio comprendere il percorso che ha portato all'introduzione di HTML5 è opportuno fare un salto indietro di 20 anni esatti, fino al 1991 quando il CERN di Ginevra, nella persona di Tim Berners-Lee, definì il protocollo HTTP, un sistema di accesso a documenti correlati tramite collegamenti ipertestuali.
Prima di allora, a partire dagli anni '60 con il progetto ARPA della Difesa Statunitense e poi con Arpanet, "la rete" era costituita da pochi computer, per lo più di enti governativi o universitari, connessi tra loro tramite TCP/IP. Con l'introduzione del primo browser grafico, Mosaic (1993) cambiò radicalmente il modo di accedere alle informazioni e di comunicare e, con oltre un milione di computer collegati, nacque il World Wide Web.
Nel 1995 venne definito HTML2, aggiornato l'anno successivo con l'introduzione di tabelle e elementi di formattazione, bordi, colori e sfondi. Parallelamente si sono sviluppate due tecnologie complementari al markup vero e proprio: CSS (Cascading Style Sheet) per la gestione della presentazione e JavaScript, introdotto da Netscape per fornire un supporto di programmazione alle pagine Web e per il controllo delle applet Java.
In questi anni (1996), con la presentazione di Internet Explorer 3, ha inizio la così detta "guerra dei browser" che si concluderà con la morte di Netscape nel 2002, sebbene AOL abbandonderà definitivamente il progetto solo nel 2007.
Nel frattempo il Web si evolve: le tabelle sono sempre meno usate per gestire l'impaginazione a favore di layout basati su div (layout table-less) e viene introdotto XHTML per la formalizzazione del markup. Nei primi anni del nuovo millennio si apre una "seconda guerra dei browser" che vede contrapposti il dominante Internet Explorer a nuovi progetti, open source e maggiormente aderenti agli standard.
Il 2005 è l'anno dell'affermazione del paradigma AJAX, sebbene XMLHttpRequest fosse presente in Internet Explorer già a partire dalla versione 5 (Outlook Web Access, 1999). Il boom delle applicazioni Web e del conseguente nuovo modo di accedere e fruire della rete ha portato il W3C a rivedere e aggiornare le tecnologie su cui si fonda Internet con l'introduzione di HTML5 (2008, First Public Draft), le cui specifiche saranno completate definitivamente nei prossimi anni (2012-2014).
La storia recente vede una continua evoluzione dei principali browser, con frequenze di rilascio di nuove versioni senza precedenti, proprio per garantire una continua e sempre maggiore aderenza agli standard che si stanno via via definendo e stabilizzando.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Ottimizzazione dei block template in Angular 17
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Implementare il throttling in ASP.NET Core
Usare le variabili per personalizzare gli stili CSS
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Reactive form tipizzati con modellazione del FormBuilder in Angular
Reactive form tipizzati con FormBuilder in Angular
Verificare la provenienza di un commit tramite le GitHub Actions
Evitare la command injection in un workflow di GitHub
Top Ten Articoli
- Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Utilizzare scene 3D in Windows Presentation Foundation
di Marco Leoncini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Ottimizzazione dei block template in Angular 17
- Utilizzare il trigger SQL con le Azure Function
- Paginare i risultati con QuickGrid in Blazor
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions
- Definire stili a livello di libreria in Angular