HTML5: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
→Voci correlate: Aggiunta risorsa utile |
|||
Riga 48:
* vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati all'accessibilità ([[Wai-aria|WAI-ARIA]]), finora previsti solo per alcuni tag;
* 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);
Riga 215:
== WAI ARIA ==
{{Vedi anche|Accessibilità (web)|Accessibilità (design)|Wai-aria}}'''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 [[Wai-aria|WAI ARIA]]<ref>{{Cita web|url=https://www.w3.org/TR/wai-aria-1.1/|titolo=Accessible Rich Internet Applications (WAI-ARIA) 1.1|sito=www.w3.org|lingua=en|accesso=2021-02-22}}</ref>.
== 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-US|accesso=2021-10-08}}</ref><ref>{{Cita web|url=https://www.w3.org/TR/orientation-event/Overview.html|titolo=DeviceOrientation Event Specification|sito=www.w3.org|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>
=== Movimento ===
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|lingua=it-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|sito=www.sitepoint.com|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|lingua=it-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 ==
| |||