HTML5: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m →Novità: +wl |
|||
| (24 versioni intermedie di 14 utenti non mostrate) | |||
Riga 1:
{{Formato file
| nome = HTML5
| logo =
| immagine =
| didascalia =
| estensione = .html, .htm
| mime = text/html
| sviluppatore = [[WHATWG]], [[World Wide Web Consortium|W3C]]
| proprietario =
| data_pubblicazione = 22 gennaio 2008
| ultima_versione = 5.2 (2ª revisione)
| data_ultima_versione = 14 dicembre 2017
| genere = [[Linguaggio di markup]]
| estensione_di = [[Standard Generalized Markup Language|SGML]]
| esteso_a =
| standard = [https://www.w3.org/standards/history/html52/ 5.2] (14 dicembre 2017)<br/>[https://html.spec.whatwg.org/ living standard]
| aperto = sì
| magic_number =
| uniform_type_identifier = public.html
}}
'''HTML5''' è la quinta versione del linguaggio di formattazione [[HTML]] raccomandata dal [[World Wide Web Consortium]],<ref>{{Cita web|url=https://www.zdnet.com/article/browser-vendors-win-war-with-w3c-over-html-and-dom-standards/|titolo=Browser vendors win war with W3C over HTML and DOM standards|sito=ZDNET|lingua=en|accesso=2023-11-08}}</ref> distribuita a partire dall'ottobre 2014 e concepita per definire standard funzionali (es. riproduzione audio/video) e [[Application programming interface|API]].
== Storia ==
Lo sviluppo venne avviato dal gruppo di lavoro
Inizialmente in contrasto con il [[World Wide Web Consortium]] per le lungaggini nel processo di evoluzione dello standard html e per la decisione del [[W3C]] di orientare la standardizzazione verso l'[[XHTML#XHTML 2.0|XHTML 2]] che non garantiva retro compatibilità, lo stesso W3C ha poi riconosciuto valide tali motivazioni, annunciando di creare un apposito gruppo per la standardizzazione dell'HTML5 e abbandonare l'XHTML 2.0<ref>{{cita web | url = https://www.w3.org/News/2009#entry-6601 | titolo = XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML5 | editore = World Wide Web Consortium | lingua = en | accesso = 15 febbraio 2011}}</ref>.
Line 19 ⟶ 38:
=== Tag deprecati ===
HTML5 ha deprecato i seguenti tag e attributi presenti in HTML4 poiché la loro funzione è ora gestita dai CSS3<ref>{{Cita web|url=https://www.c-sharpcorner.com/blogs/html-tags-which-are-deprecated-in-html5|titolo=HTML Tags Which Are Deprecated In HTML5
[[File:Deprecated-HTML.png|alt=Elementi HTML4 deprecati in HTML5|centro|miniatura|390x390px|Elementi HTML4 deprecati in HTML5]]
=== CSS3 ===▼
=== SEO ===
{{S sezione|informatica}}
{{Vedi anche|Ottimizzazione per i motori di ricerca}}
Line 34 ⟶ 49:
=== Supporto dei browser ===
[[File:IE-HTML5.png|alt=Esempio di una pagina HTML5 in Internet Explorer 7|miniatura|Esempio di una pagina HTML5 in [[Windows Internet Explorer 7|Internet Explorer 7]]. Essa appare sfasata poiché il browser non riconosce le specifiche]]
Alla nascita di HTML5 il motore di rendering [[WebKit|Webkit]] (Chrome e Safari) fu il primo a interpretare in modo corretto molti dei nuovi codici, il secondo ad aggiornarsi da quel punto di vista fu Gecko (Firefox) e per ultimo Trindent (Internet Explorer). Per alcuni anni i siti web che utilizzavano i nuovi tag HTML disponibili venivano visti in maniera differente a seconda del browser che utilizzava l'utente<ref name=":0">{{Cita web|url=https://speckyboy.com/getting-to-grips-with-html5-browser-compatibility/|titolo=Getting to Grips with HTML5 Browser Compatibility|sito=Speckyboy Design Magazine|data=26 marzo 2012|lingua=en|accesso=3 febbraio 2021}}</ref>. In parte questo problema veniva risolto da tecniche come CSS alternativi appositamente per [[Internet Explorer]], commenti condizionali su misura per esso e librerie [[JavaScript]] come Modernizr<ref>{{Cita web|url=https://www.targetweb.it/css3-su-internet-explorer/|titolo=Css3 su Internet Explorer 8? - da oggi si può|sito=Target Web.it|data=8 aprile 2011|accesso=3 febbraio 2021}}</ref><ref name=":1">{{Cita web|url=https://www.sitepoint.com/internet-explorer-conditional-comments/|titolo=Internet Explorer Conditional Comments - SitePoint
== Novità ==
{{Vedi anche|WebGL|Canvas (elemento HTML)|Scalable Vector Graphics|HTML5 video}}
Le novità introdotte dall'HTML5 rispetto all'[[HTML 4.0|HTML4]] sono finalizzate soprattutto a migliorare il disaccoppiamento fra struttura, definita dal markup, caratteristiche di resa ([[tipo di carattere]], [[Colori Web|colori]],
In particolare<ref name="html.it">{{Cita web|url=https://www.html.it/guide/guida-html5/|titolo=HTML5: guida completa|sito=HTML.it|accesso=
* vengono rese più stringenti le regole per la strutturazione del testo in capitoli, paragrafi e sezioni;
* vengono introdotti elementi di controllo per i menu di navigazione;
* vengono migliorati ed estesi gli elementi di controllo per i moduli elettronici, cioè nuovi attributi e tipi di input per i form (moduli di iscrizione e contatto);
* vengono introdotti elementi specifici per il controllo di contenuti multimediali (tag <code>[[HTML5 video|<video>]]</code> e <code><audio></code>), con HTML4 incorporabili solo attraverso [[Adobe Flash]].
* vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati all'accessibilità ([[
* viene supportato [[Canvas (elemento HTML)|Canvas]] che permette di utilizzare [[JavaScript]] per creare animazioni (possibili solo con [[Adobe Flash]] ai tempi di HTML4) e grafica bitmap;
[[File:Html5notesapp.png|alt=Un esempio di HTML5 Storage. L'utente può creare note e, anche in caso di refresh del browser, esse rimarranno salvate.|miniatura|Un esempio di HTML5 Storage. L'utente può creare note e, anche in caso di refresh del browser, esse rimarranno salvate<ref>{{Cita web|url=https://code.tutsplus.com/tutorials/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5--net-13934|titolo=Create a Sticky Note Effect in 5 Easy Steps With CSS3 and HTML5|sito=Code Envato Tuts+|accesso=2021-10-08}}</ref>.]]
* introduzione della [[geolocalizzazione]], dovuta ad una forte espansione di sistemi operativi mobili (quali [[Android]] e [[iOS]], tra i più diffusi);
* sistema alternativo ai normali [[cookie]], chiamato Web Storage, più efficiente, il quale consente un notevole risparmio di banda;
* standardizzazione di programmi JavaScript, chiamati [[Web worker|Web Workers]] e possibilità di utilizzare alcuni siti offline;
* sostituzione del lungo e complesso [[doctype]], con un semplice <code><!DOCTYPE html></code>.
* Nuovi [[Microdato|microdati]] che descrivono il contenuto dei tag (ad esempio se è un nome, un cognome, un indirizzo, un numero di telefono, una mail eccetera);
* [[WebSocket]] API: la possibilità di stabilire e mantenere una connessione dati tra browser e server remoto sulla quale far transitare messaggi in entrambe le direzioni;
* [[Drag and drop|Drag and Drop]] (trascinamento e rilascio di oggetti all'interno di un contenitore, ad esempio nel caso di videogiochi o prodotti da inserire nel carrello nei siti [[Commercio elettronico|ecommerce]]);
* [[Scalable Vector Graphics|SVG]] e [[MathML]]: possibilità di inserire in HTML [[grafica vettoriale]] e formule matematiche, le quali in HTML4 potevano essere importate solo come immagini o creabili in [[Adobe Flash]].
{| class="wikitable"
|'''TAG'''<ref name="html.it" />
|'''SCOPO'''
|-
Line 214 ⟶ 227:
== WAI ARIA ==
{{Vedi anche|Accessibilità (web)|Accessibilità (design)|
'''WAI-ARIA (''Web Accessibility Initiative - Accessible Rich Internet Applications'')''' è un insieme di documenti pubblicati dal W3C ([[World Wide Web Consortium]]) che specificano come aumentare l'[[Accessibilità (design)|accessibilità]] dei contenuti dinamici e dei componenti per l'interfaccia utente sviluppati con [[AJAX]], [[HTML]], [[JavaScript]] e altre tecnologie collegate. HTML5 ha aggiunto nuove regole [[ == Orientamento del dispositivo ==
[[File:Deviceorientation.png|alt=Esempio di deviceorientation e devicemotion|miniatura|Esempio di ''deviceorientation'' e ''devicemotion'']]
L'evento<code>deviceorientation</code>viene generato quando sono disponibili nuovi dati da un sensore di orientamento sull'orientamento corrente del dispositivo rispetto al riquadro delle [[Coordinate geografiche|coordinate]] terrestri. Questi dati vengono raccolti da un [[magnetometro]] all'interno del dispositivo. In pratica, quando si ruota il dispositivo su cui la pagina web viene visualizzata, l'oggetto che contiene questa API ruota in base all'asse x, y o z del dispositivo<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event|titolo=Window: deviceorientation event - Web APIs {{!}} MDN|sito=developer.mozilla.org|lingua=en|accesso=2021-10-08}}</ref><ref>{{Cita web|url=https://www.w3.org/TR/orientation-event/Overview.html|titolo=DeviceOrientation Event Specification|accesso=2021-10-08}}</ref>.
Codice base:<syntaxhighlight lang="javascript">
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
</syntaxhighlight>
Gli eventi di movimento vengono gestiti allo stesso modo degli eventi di orientamento, tranne per il fatto che hanno il proprio nome di evento: <code>devicemotion</code><ref>{{Cita web|url=https://www.html.it/articoli/html5-device-orientation-api-e-websocket/|titolo=HTML5 Device Orientation API e WebSocket|autore=Sandro Paganotti|sito=HTML.it|accesso=2021-10-08}}</ref><ref>{{Cita web|url=https://www.sitepoint.com/using-device-orientation-html5/|titolo=Using Device Orientation in HTML5 - SitePoint|lingua=en|accesso=2021-10-08}}</ref>.
Esempio:<syntaxhighlight lang="javascript">
window.addEventListener("devicemotion", handleMotion, true);
</syntaxhighlight>Rispetto a <code>deviceorientation</code> le informazioni fornite all'interno dell'oggetto <code>DeviceMotionEvent</code>diventano parametri della funzione ''HandleMotion''.
L'evento di movimento contiene quattro proprietà:
* <code>DeviceMotionEvent.acceleration</code>
* <code>DeviceMotionEvent.accelerationIncludingGravity</code>
* <code>DeviceMotionEvent.rotationRate</code>
* <code>DeviceMotionEvent.interval</code>
==== Valori di movimento ====
Gli oggetti<code>DeviceMotionEvent</code>forniscono informazioni sulla velocità dei cambiamenti della posizione e dell'orientamento del dispositivo. Le modifiche vengono fornite lungo tre assi<ref>{{Cita web|url=https://www.html.it/articoli/video-html5-deviceorientation-websocket-api/|titolo=Video: HTML5, DeviceOrientation & WebSocket API|autore=Sandro Paganotti|sito=HTML.it|accesso=2021-10-08}}</ref>.
Per <code>acceleration</code>e <code>accelerationIncludingGravity</code> tali assi corrispondono a:
* <code>x</code>: Rappresenta l'asse da Ovest a Est
* <code>y</code>: Rappresenta l'asse da Sud a Nord
* <code>z</code>: Rappresenta l'asse perpendicolare al suolo
Per <code>rotationRate</code> le informazioni corrispondono a:
* <code>alpha</code>: Rappresenta una velocità di rotazione lungo l'asse perpendicolare al dispositivo.
* <code>beta</code>: Rappresenta una velocità di rotazione lungo l'asse che va da sinistra a destra del dispositivo.
* <code>gamma</code>: Rappresenta una velocità di rotazione lungo l'asse che va dal basso verso l'alto del dispositivo.
<code>interval</code>rappresenta l'intervallo di tempo, in millisecondi, in cui i dati vengono ottenuti dal dispositivo.
== HTML5test ==
[[File:Tizen 2 score.png|alt=Pagina di HTML5test vista in un browser Chrome|miniatura|Pagina di HTML5test vista nel browser [[Google Chrome|Chrome]]|237x237px]]
HTML5test è un'applicazione web per valutare l'accuratezza di un [[Browser|browser web]] nell'implementazione degli standard web HTML5 e Web SQL Database (sviluppato dal [[World Wide Web Consortium]]), così come lo standard [[WebGL]] (sviluppato da [[Mozilla Foundation]] e [[Khronos Group]])<ref>{{Cita web|url=http://html5test.com/about.html|titolo=HTML5test Frequently Asked Questions|cognome=Leenheer|nome=Niels|sito=HTML5test.com|editore=Niels Leenheer|accesso=10 luglio 2014}}</ref>.
La suite di test è stata sviluppata dal programmatore web olandese Niels Leenheer e pubblicata nel marzo 2010. Per testare un browser web, l'utente deve visitare la [[home page]] del sito web che si trova all'indirizzo <code>html5test.com<ref>{{Cita web|url=http://www.ghacks.net/2010/06/06/html5-test-your-web-browser/|titolo=HTML5 Test Your Web Browser|cognome=Brinkmann|nome=Martin|sito=gHacks Technology News|accesso=10 luglio 2014}}</ref></code>. L'applicazione restituisce un punteggio intero su un massimo di 555 punti. Il totale dei punti è cambiato più volte attraverso l'evoluzione del software; Leenheer ha introdotto successivamente un sistema di punteggio come parte di un'importante riprogettazione del test introdotta nel novembre 2013<ref>{{Cita web|url=http://blog.html5test.com/2013/11/the-new-html5test-is-here/|titolo=The new HTML5test is here!|cognome=Leenheer|nome=Niels|sito=blog.html5test.com|data=13 novembre 2013|accesso=12 luglio 2014|dataarchivio=26 giugno 2014|urlarchivio=https://web.archive.org/web/20140626033522/http://blog.html5test.com/2013/11/the-new-html5test-is-here/|urlmorto=sì}}</ref>.
HTML5test valuta il supporto del browser per l'archiviazione Web, l'API di geolocalizzazione W3C, gli elementi HTML specifici per HTML5 (incluso l'elemento [[Canvas (elemento HTML)|Canvas]]) e altre funzionalità<ref>{{Cita web|url=http://cybernetnews.com/html5-test/|titolo=Test Your Browser for HTML5 Compatibility|autore=Staff writer|wkautore=Staff writer|data=|sito=CyberNet News|accesso=10 luglio 2014}}</ref><ref>{{Cita web|url=http://downloadsquad.switched.com/2010/08/08/test-your-browsers-html5-prowess-with-the-html5-test/|titolo=Test your browser's HTML5 prowess with the HTML5 test|cognome=Zukerman|nome=Erez|data=8 agosto 2010|sito=Switched|editore=[[AOL]]|accesso=10 luglio 2014|dataarchivio=26 aprile 2019|urlarchivio=https://web.archive.org/web/20190426061727/http://downloadsquad.switched.com/2010/08/08/test-your-browsers-html5-prowess-with-the-html5-test/|urlmorto=sì}}</ref>. Non valuta la conformità di un browser ad altri standard web, come [[CSS|Cascading Style Sheets]], [[ECMAScript]], [[Scalable Vector Graphics]] o [[Document Object Model]]. I test di conformità per questi standard sono di competenza di [[Acid3]], un test automatizzato pubblicato da Ian Hickson nel 2008<ref>{{Cita web|url=http://www.webstandards.org/press/releases/2008-03-03/|titolo=Acid3: Putting Browser Makers on Notice, Again.|data=3 marzo 2008|editore=[[Web Standards Project]]|accesso=10 luglio 2014}}</ref>. Allo stesso modo, [[Acid3]] non valuta la conformità HTML5 di un browser. L'ambito del test di HTML5test e l'ambito del test di Acid3 si escludono a vicenda.
== Esempi ==
Line 246 ⟶ 304:
* [[Web Hypertext Application Technology Working Group]]
* [[HTML]]
*[http://graphoglrisorse.altervista.org/WebApp/Programmi/VerificaHtml5/HTML5-Check.html Test HTML5]
== Altri progetti ==
{{interprogetto|preposizione=sull'}}
== Collegamenti esterni ==
* {{Collegamenti esterni}}
* {{cita web|https://www.whatwg.org/|Sito del WHATWG|lingua=en}}
* {{cita web|https://www.w3.org/html/wg/|Sito del W3C HTML Working Group|lingua=en}}
Line 266 ⟶ 326:
{{Portale|internet|informatica}}
[[Categoria:HTML5| ]]
| |||