HTML5: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
immagine |
Etichette: Link a wikipedia.org Modifica visuale |
||
Riga 15:
== Novità ==
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, eccetera), definite dalle [[foglio di stile|direttive di stile]], e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre l'HTML5 prevede il supporto per la memorizzazione locale di grandi quantità di dati scaricati dal [[web browser]], per consentire l'utilizzo di applicazioni basate su web (come per esempio le caselle di posta di [[Google]] o altri servizi analoghi) anche in assenza di collegamento a Internet.
Line 35 ⟶ 34:
* 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]]);
* 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>{{Cita web|url=https://www.html.it/guide/guida-html5/|titolo=HTML5: guida completa|sito=HTML.it|lingua=it-IT|accesso=2021-01-29}}</ref>
|'''SCOPO'''
|-
| colspan="2" |'''Nuovi elementi strutturali e semantici'''
|-
|Header
| rowspan="6" |[[File:Html4-vs-html5-struttura.png|link=https://it.wikipedia.org/wiki/File:Html4-vs-html5-struttura.png|alt=Confronto tra pagina di base HTML4 e 5|centro|miniatura|Confronto tra pagina di base HTML4 e 5]]
|-
|Footer
|-
|Section
|-
|Nav
|-
|Article ''(nel caso di articoli in homepage)''
|-
|Aside ''(contenuti correlati al principale)''
|-
|Hgroup
|Raggruppa i tag Heading
|-
|<figure> e <figcaption>
|Didascalie per contenuti
|-
|Embed
|Inserirsce contenuti interattivi o multimediali
|-
|Ruby
|Specifica le annotazioni Ruby
|-
|Wbr
|Il browser può inserire un a capo
|-
|<command> e <menu>
|Definiscono barre degli strumenti o menu di scelta rapida
|-
|<details> e <summary>
|Widget informativi per gli utenti
|-
|mark
|Parte di un testo segnato o evidenziato all'utente
|-
|<nowiki><time> e attributi </nowiki>''pubdate'' e ''datetime''
|Tempo su 24 ore o una data nel calendario Gregoriano
|-
|Meter
|Misura scalare di un intervallo noto o un valore frazionario
|-
|Progress
|Stato di completamento di un compito
|-
|Picture
|Contenitore per immagini
|-
|Microdati
|Per ogni tag HTML si possono specificare degli attributi semantici
|-
| colspan="2" |'''Nuovi attributi e tipi di input per i form'''
|-
|autofocus, placeholder e form
| rowspan="8" |[[File:Form-errori.png|link=https://it.wikipedia.org/wiki/File:Form-errori.png|alt=form|centro|miniatura|L'autofocus in questo caso è in rosso. Gli input type equivalgono agli spazi da riempire (in questo caso c'è "email"). Il placeholder è il testo di esempio di ogni spazio]]
|-
|Input type: tel
|-
|Input type: search
|-
|Input type: url
|-
|Input type: email
|-
|Input type: number
|-
|Input type: range
|-
|Input type: color
|-
|Datalist
|Completamento automatico ad un elemento del form
|-
|Autocomplete
|Permette o no al browser di riempire i campi
del form in maniera automatica
|-
|Min, max
|Definiscono il valore minimo e massimo consentito
|-
|Multiple
|Permette all’utente possa inserire più valori per lo stesso input
|-
|Pattern
|Verifica che il valore inserito rispetti determinate regole
|-
|Required
|Rende obbligatoria la compilazione di uno spazio del form
|-
|Step
|Definisce la distanza che intercorre tra un valore e il successivo
|-
|keygen
|Generatore di chiavi numeriche all’interno di un form
|-
|output
|Restituisce il risultato di un calcolo
|-
| colspan="2" |'''API per Web Applications'''
|-
|Applicazioni web offline (file ".manifest")
|Dopo la prima sessione di navigazione online,
resteranno accessibili alcuni oggetti anche
in assenza di una connessione di rete.
|-
|Indexed Database API
|Creare e manipolare un database all’interno del browser
|-
|WebStorage API
|Si possono ad esempio tenere aperti contemporaneamente
due account social o mail sullo stesso browser e ogni navigazione
sul primo comporterà il logout del secondo e viceversa
|-
|Web Workers API
|Consentono l’esecuzione di pezzi di codice Javascript
senza intaccare le performance della pagina web
|-
|WebSocket API
|Stabiliscono e mantengono una connessione dati tra browser
e server remoto sulla quale far transitare messaggi
in entrambe le direzioni
|-
|Drag and Drop
|Trascinamento e rilascio di oggetti
|-
|Geolocation API
|Geolocalizzazione
|-
| colspan="2" |'''Multimedia'''
|-
|[[.svg|SVG]] e [[MathML]]
|Immagini vettoriali e formule matematiche
|-
|[[Canvas (elemento HTML)|Canvas]]
|API adatte a tracciare linee, cerchi, rettangoli, immagini e oggetti 3D
|-
|Video
|Inserisce file video (prima fattibile solo con [[Adobe Flash]])
|-
|Audio
|Inserisce file audio
|}
== Note ==
| |||