From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- files/it/web/html/attributes/index.html | 590 +++++++++++++++++++++ files/it/web/html/attributi/index.html | 590 --------------------- .../canvas/drawing_graphics_with_canvas/index.html | 162 ------ files/it/web/html/canvas/index.html | 73 --- files/it/web/html/element/figura/index.html | 170 ------ files/it/web/html/element/figure/index.html | 170 ++++++ files/it/web/html/forms_in_html/index.html | 83 --- files/it/web/html/html5/index.html | 167 ------ .../html/html5/introduction_to_html5/index.html | 22 - files/it/web/html/reference/index.html | 46 ++ files/it/web/html/riferimento/index.html | 46 -- .../index.html | 320 ----------- .../html/using_the_application_cache/index.html | 383 +++++++++++++ .../html/utilizzare_application_cache/index.html | 383 ------------- 14 files changed, 1189 insertions(+), 2016 deletions(-) create mode 100644 files/it/web/html/attributes/index.html delete mode 100644 files/it/web/html/attributi/index.html delete mode 100644 files/it/web/html/canvas/drawing_graphics_with_canvas/index.html delete mode 100644 files/it/web/html/canvas/index.html delete mode 100644 files/it/web/html/element/figura/index.html create mode 100644 files/it/web/html/element/figure/index.html delete mode 100644 files/it/web/html/forms_in_html/index.html delete mode 100644 files/it/web/html/html5/index.html delete mode 100644 files/it/web/html/html5/introduction_to_html5/index.html create mode 100644 files/it/web/html/reference/index.html delete mode 100644 files/it/web/html/riferimento/index.html delete mode 100644 files/it/web/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/it/web/html/using_the_application_cache/index.html delete mode 100644 files/it/web/html/utilizzare_application_cache/index.html (limited to 'files/it/web/html') diff --git a/files/it/web/html/attributes/index.html b/files/it/web/html/attributes/index.html new file mode 100644 index 0000000000..7bb21c96a2 --- /dev/null +++ b/files/it/web/html/attributes/index.html @@ -0,0 +1,590 @@ +--- +title: Attributi +slug: Web/HTML/Attributi +translation_of: Web/HTML/Attributes +--- +

Gli elementi in HTML hanno attributi; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.

+

Lista degli attributi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome dell'attributoElementi supportatiDescrizione
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista di tipi che il server accetta, normalmente un file di tipo type.
accept-charset{{ HTMLElement("form") }}Lista delle codifiche di caratteri supportate.
accesskeyAttributo globaleDefinisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.
action{{ HTMLElement("form") }}L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Specifica l'allineamento orizzontale dell'elemento.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		Testo alternativo in caso un immagine non possa essere visualizzata.
async{{ HTMLElement("script") }}Indica che lo script deve essere eseguito in modalità asincrona.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'elemento riceve il focus automaticamente dopo il caricamento della pagina.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}L'audio o il video devo partire appena possibile.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Colore di sottofondo dell'elemento.

+

Nota: Questo è un attibuto ereditato. Utilizzare la proprietà {{ Cssxref("background-color") }} in sostituzione.

+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

La larghezza del bordo.

+

Nota: Questo è un attributo ereditato. Utilizzare la proprietà  CSS {{ Cssxref("border") }} in sostituzione.

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene l'intervallo di tempo del media già bufferizzato.
challenge{{ HTMLElement("keygen") }}Una stringa che viene presentata con la chiave pubblica.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Dichiara la codifica di caratteri della pagina o dello script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica che l'elemento deve essere conrollato al caricamento della pagina.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene un URI che punta alla sorgente di quanto citato o modificato.
classAttributo globaleUsato spesso con i CSS per modellare elementi con proprietà comuni.
code{{ HTMLElement("applet") }}Specifica l'URL del file class della applet che deve essere caricato ed eseguito.
codebase{{ HTMLElement("applet") }}Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet  referenziata dall'attributo code è memorizzato.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.

+

Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("color") }} in sostituzione.

+
cols{{ HTMLElement("textarea") }}Definisce il numero delle colonne in un'area di testo.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.
content{{ HTMLElement("meta") }}Un valore associato con http-equiv o name a seconda del contesto.
contenteditableAttributo globaleIndica che il contenuto dell'elemento è editabile.
contextmenuAttributo globaleDefinisce l'ID di un elemento {{ HTMLElement("menu") }} che servirà come menù contestuale dell'elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica che il browser deve visualizzare i controlli di playack per l'utente.
coords{{ HTMLElement("area") }}Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.
data{{ HTMLElement("object") }}Specifica l'URL della risorsa.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica data e ora associate con l'elemento.
default{{ HTMLElement("track") }}Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.
defer{{ HTMLElement("script") }}Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.
dirAttributo globaleDefinisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica che l'utente non può interagire con l'elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.
draggableAttributo globaleDefinisce l'elemeno come trascinabile.
dropzoneAttributo globaleIndica che l'elemento consente l'eliminazione dei contenuti da esso.
enctype{{ HTMLElement("form") }}Definisce il tipo di contenuto dei dati del form quando il method è POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descrive elementi che appartengono a questo.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicano il form al quale l'elemento si riferisce.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'ID che gli elementi <th> applicano a quest'ultimi.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Note: In qualche caso, come per {{ HTMLElement("div") }}, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS {{ Cssxref("height") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, l'altezza deve essere specificata con questo attributo.
hiddenGlobal attributeIndica la rilevanza di un elemento.
high{{ HTMLElement("meter") }}Indica il limite inferiore del range superiore
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} L'URL di una risorsa collegata.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la lingua della risorsa collegata.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Spefifica una figura che rappresenta il comando.
idAttributo globaleSpesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.
ismap{{ HTMLElement("img") }}Indica che l'immagine è una parte della mappa immagine lato server.
itempropAttributo globale 
keytype{{ HTMLElement("keygen") }}Specifica il tipo della chiave da generata.
kind{{ HTMLElement("track") }}Specifica il tipo della traccia di testo.
label{{ HTMLElement("track") }}Specifica un titolo leggibile dall'utente della traccia di testo.
langAttributo globaleDefinisce la lingua usata nell'elemento.
language{{ HTMLElement("script") }}Definisce la lingua dello script usato nell'elemento.
list{{ HTMLElement("input") }}Identifica una lista di opzioni predefinite da suggerire all'utente.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica che il media deve essere riprodotto dall'inizio quando terminato.
low{{ HTMLElement("meter") }}Indica il valore limite superiore del campo inferiore.
manifest{{ HTMLElement("html") }}Specifica l'URL del manifesto della cache del documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica il valore massimo consentito.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Definisce il numero massimo di caratteri consentiti nell'elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Specifica un suggerimento del media per il quale è stata disegnata la risorsa.
method{{ HTMLElement("form") }}Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica il valore minimo consentito.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica che possono essere inseriti valori multipi come input ad un tipo email o file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.
novalidate{{ HTMLElement("form") }}Questo attributo indica che il form non deve essere validato alla sottomissione.
open{{ HTMLElement("details") }}Indica se i dettagli verranno visualizzati al caricamento della pagina.
optimum{{ HTMLElement("meter") }}Indica il valore numerico ottimale.
pattern{{ HTMLElement("input") }}Definisce un'espressione regolare con la quale validare il valore dell'elemento.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.
poster{{ HTMLElement("video") }}Un URL che indica un fotogramma da mostrare finché l'utente esegue o cerca.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.
pubdate{{ HTMLElement("time") }}Indica che queste data e ora sono dati dell'elemento progenitore più vicino {{ HTMLElement("article") }}.
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se l'elemento è editabile.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se questo elemento deve essere compilato o meno.
reversed{{ HTMLElement("ol") }}Indica se l'elenco deve essere visualizzato in ordine decrescente anzichè ascendente.
rows{{ HTMLElement("textarea") }}Definisce il numero di righe in area di testo.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Definisce il numero di righe sopra le quali si estende la cella della tabella.
sandbox{{ HTMLElement("iframe") }} 
spellcheckAttributo globaleIndica se il controllo ortografico è consentito per l'elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Definisce un valore che sarà selezionato al caricamento della pagina.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Definisce la larghezza dell'elemento (in pixel). Se l'attributo type dell'elemento è text o password rappresenta il numero di caratteri.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}L'URL del contenuto incorporabile.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Definisce il primo numero se diverso da 1.
step{{ HTMLElement("input") }} 
styleAttributo globaleDefinisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.
summary{{ HTMLElement("table") }} 
tabindexAttributo globaleSovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleAttributo globaleTesto da visualizzare in un suggerimento quando si passa sopra all'elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Definisce il tipo dell'elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: In qualche caso, come per {{ HTMLElement("div") }}, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS {{ Cssxref("width") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, la larghezza deve essere specificata con questo attributo.
wrap{{ HTMLElement("textarea") }}Indica se il testo deve essere circondato.
+

Attributi di contenuto contro attributi IDL

+

In HTML, molti attributi hanno due facce: l'attributo di contenuto e l'attributo IDL.

+

L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il maxlength di un elemento {{HTMLElement("input")}} a 42 usando l'attributo di contenuto, occorre chiamare setAttribute("maxlength", "42") su quell'elemento.

+

L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come element.foo. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.

+

Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il type di default per gli elementi {{HTMLElement("input")}} è "text", se viene impostato come input.type="foobar", l'elemento <input> sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL type ritornerà la stringa "text".

+

Gli attributi IDL non sono sempre stringhe; ad esempio, input.maxlength è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi input.maxlength ritornerà sempre un numero e quando si imposta input.maxlength ,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.

+

L'attributo IDL può riflettere altri tipi come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà le norme stabilite nelle specifiche, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi  si comportano stranamente (select.size, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.

+

Vedi anche

+ +

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/it/web/html/attributi/index.html b/files/it/web/html/attributi/index.html deleted file mode 100644 index 7bb21c96a2..0000000000 --- a/files/it/web/html/attributi/index.html +++ /dev/null @@ -1,590 +0,0 @@ ---- -title: Attributi -slug: Web/HTML/Attributi -translation_of: Web/HTML/Attributes ---- -

Gli elementi in HTML hanno attributi; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.

-

Lista degli attributi

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nome dell'attributoElementi supportatiDescrizione
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista di tipi che il server accetta, normalmente un file di tipo type.
accept-charset{{ HTMLElement("form") }}Lista delle codifiche di caratteri supportate.
accesskeyAttributo globaleDefinisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.
action{{ HTMLElement("form") }}L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Specifica l'allineamento orizzontale dell'elemento.
alt -

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

- 		Testo alternativo in caso un immagine non possa essere visualizzata.
async{{ HTMLElement("script") }}Indica che lo script deve essere eseguito in modalità asincrona.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'elemento riceve il focus automaticamente dopo il caricamento della pagina.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}L'audio o il video devo partire appena possibile.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} -

Colore di sottofondo dell'elemento.

-

Nota: Questo è un attibuto ereditato. Utilizzare la proprietà {{ Cssxref("background-color") }} in sostituzione.

-
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} -

La larghezza del bordo.

-

Nota: Questo è un attributo ereditato. Utilizzare la proprietà  CSS {{ Cssxref("border") }} in sostituzione.

-
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene l'intervallo di tempo del media già bufferizzato.
challenge{{ HTMLElement("keygen") }}Una stringa che viene presentata con la chiave pubblica.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Dichiara la codifica di caratteri della pagina o dello script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica che l'elemento deve essere conrollato al caricamento della pagina.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene un URI che punta alla sorgente di quanto citato o modificato.
classAttributo globaleUsato spesso con i CSS per modellare elementi con proprietà comuni.
code{{ HTMLElement("applet") }}Specifica l'URL del file class della applet che deve essere caricato ed eseguito.
codebase{{ HTMLElement("applet") }}Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet  referenziata dall'attributo code è memorizzato.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} -

Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.

-

Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("color") }} in sostituzione.

-
cols{{ HTMLElement("textarea") }}Definisce il numero delle colonne in un'area di testo.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.
content{{ HTMLElement("meta") }}Un valore associato con http-equiv o name a seconda del contesto.
contenteditableAttributo globaleIndica che il contenuto dell'elemento è editabile.
contextmenuAttributo globaleDefinisce l'ID di un elemento {{ HTMLElement("menu") }} che servirà come menù contestuale dell'elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica che il browser deve visualizzare i controlli di playack per l'utente.
coords{{ HTMLElement("area") }}Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.
data{{ HTMLElement("object") }}Specifica l'URL della risorsa.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica data e ora associate con l'elemento.
default{{ HTMLElement("track") }}Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.
defer{{ HTMLElement("script") }}Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.
dirAttributo globaleDefinisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica che l'utente non può interagire con l'elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.
draggableAttributo globaleDefinisce l'elemeno come trascinabile.
dropzoneAttributo globaleIndica che l'elemento consente l'eliminazione dei contenuti da esso.
enctype{{ HTMLElement("form") }}Definisce il tipo di contenuto dei dati del form quando il method è POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descrive elementi che appartengono a questo.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicano il form al quale l'elemento si riferisce.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'ID che gli elementi <th> applicano a quest'ultimi.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Note: In qualche caso, come per {{ HTMLElement("div") }}, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS {{ Cssxref("height") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, l'altezza deve essere specificata con questo attributo.
hiddenGlobal attributeIndica la rilevanza di un elemento.
high{{ HTMLElement("meter") }}Indica il limite inferiore del range superiore
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} L'URL di una risorsa collegata.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la lingua della risorsa collegata.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Spefifica una figura che rappresenta il comando.
idAttributo globaleSpesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.
ismap{{ HTMLElement("img") }}Indica che l'immagine è una parte della mappa immagine lato server.
itempropAttributo globale 
keytype{{ HTMLElement("keygen") }}Specifica il tipo della chiave da generata.
kind{{ HTMLElement("track") }}Specifica il tipo della traccia di testo.
label{{ HTMLElement("track") }}Specifica un titolo leggibile dall'utente della traccia di testo.
langAttributo globaleDefinisce la lingua usata nell'elemento.
language{{ HTMLElement("script") }}Definisce la lingua dello script usato nell'elemento.
list{{ HTMLElement("input") }}Identifica una lista di opzioni predefinite da suggerire all'utente.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica che il media deve essere riprodotto dall'inizio quando terminato.
low{{ HTMLElement("meter") }}Indica il valore limite superiore del campo inferiore.
manifest{{ HTMLElement("html") }}Specifica l'URL del manifesto della cache del documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica il valore massimo consentito.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Definisce il numero massimo di caratteri consentiti nell'elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Specifica un suggerimento del media per il quale è stata disegnata la risorsa.
method{{ HTMLElement("form") }}Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica il valore minimo consentito.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica che possono essere inseriti valori multipi come input ad un tipo email o file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.
novalidate{{ HTMLElement("form") }}Questo attributo indica che il form non deve essere validato alla sottomissione.
open{{ HTMLElement("details") }}Indica se i dettagli verranno visualizzati al caricamento della pagina.
optimum{{ HTMLElement("meter") }}Indica il valore numerico ottimale.
pattern{{ HTMLElement("input") }}Definisce un'espressione regolare con la quale validare il valore dell'elemento.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.
poster{{ HTMLElement("video") }}Un URL che indica un fotogramma da mostrare finché l'utente esegue o cerca.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.
pubdate{{ HTMLElement("time") }}Indica che queste data e ora sono dati dell'elemento progenitore più vicino {{ HTMLElement("article") }}.
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se l'elemento è editabile.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se questo elemento deve essere compilato o meno.
reversed{{ HTMLElement("ol") }}Indica se l'elenco deve essere visualizzato in ordine decrescente anzichè ascendente.
rows{{ HTMLElement("textarea") }}Definisce il numero di righe in area di testo.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Definisce il numero di righe sopra le quali si estende la cella della tabella.
sandbox{{ HTMLElement("iframe") }} 
spellcheckAttributo globaleIndica se il controllo ortografico è consentito per l'elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Definisce un valore che sarà selezionato al caricamento della pagina.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Definisce la larghezza dell'elemento (in pixel). Se l'attributo type dell'elemento è text o password rappresenta il numero di caratteri.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}L'URL del contenuto incorporabile.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Definisce il primo numero se diverso da 1.
step{{ HTMLElement("input") }} 
styleAttributo globaleDefinisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.
summary{{ HTMLElement("table") }} 
tabindexAttributo globaleSovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleAttributo globaleTesto da visualizzare in un suggerimento quando si passa sopra all'elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Definisce il tipo dell'elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: In qualche caso, come per {{ HTMLElement("div") }}, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS {{ Cssxref("width") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, la larghezza deve essere specificata con questo attributo.
wrap{{ HTMLElement("textarea") }}Indica se il testo deve essere circondato.
-

Attributi di contenuto contro attributi IDL

-

In HTML, molti attributi hanno due facce: l'attributo di contenuto e l'attributo IDL.

-

L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il maxlength di un elemento {{HTMLElement("input")}} a 42 usando l'attributo di contenuto, occorre chiamare setAttribute("maxlength", "42") su quell'elemento.

-

L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come element.foo. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.

-

Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il type di default per gli elementi {{HTMLElement("input")}} è "text", se viene impostato come input.type="foobar", l'elemento <input> sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL type ritornerà la stringa "text".

-

Gli attributi IDL non sono sempre stringhe; ad esempio, input.maxlength è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi input.maxlength ritornerà sempre un numero e quando si imposta input.maxlength ,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.

-

L'attributo IDL può riflettere altri tipi come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà le norme stabilite nelle specifiche, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi  si comportano stranamente (select.size, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.

-

Vedi anche

- -

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html deleted file mode 100644 index 1495605ec5..0000000000 --- a/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Drawing graphics with canvas -slug: Web/HTML/Canvas/Drawing_graphics_with_canvas -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas ---- -
-

Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive Canvas tutorial, this page should probably be redirected there as it's now redundant but some information may still be relevant.

-
-

Introduction

-

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. <canvas> is based on the WHATWG canvas specification, which itself is based on Apple's <canvas> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.

-

<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts. We'll focus on the 2D rendering context. For 3D graphics, you should use the WebGL rendering context.

-

The 2D Rendering Context

-

A Simple Example

-

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:

-
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillStyle = "rgb(200,0,0)";
-  ctx.fillRect (10, 10, 55, 50);
-
-  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-  ctx.fillRect (30, 30, 55, 50);
-}
-
- -

{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}

-

The draw function gets the canvas element, then obtains the 2d context. The ctx object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling fillRect. The second fillStyle uses rgba() to specify an alpha value along with the color.

-

The fillRect, strokeRect, and clearRect calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.

-

Using Paths

-

The beginPath function starts a new path, and moveTo, lineTo, arcTo, arc, and similar methods are used to add segments to the path. The path can be closed using closePath. Once a path is created, you can use fill or stroke to render the path to the canvas.

-
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillStyle = "red";
-
-  ctx.beginPath();
-  ctx.moveTo(30, 30);
-  ctx.lineTo(150, 150);
-  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
-  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
-  ctx.lineTo(30, 30);
-  ctx.fill();
-}
-
- -

{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}

-

Calling fill() or stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.

-

Graphics State

-

Attributes of the context such as fillStyle, strokeStyle, lineWidth, and lineJoin are part of the current graphics state. The context provides two methods, save() and restore(), that can be used to move the current state to and from the state stack.

-

A More Complicated Example

-

Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods translate(), scale(), and rotate() all transform the current matrix. All rendered points are first transformed by this matrix.

-
function drawBowtie(ctx, fillStyle) {
-
-  ctx.fillStyle = "rgba(200,200,200,0.3)";
-  ctx.fillRect(-30, -30, 60, 60);
-
-  ctx.fillStyle = fillStyle;
-  ctx.globalAlpha = 1.0;
-  ctx.beginPath();
-  ctx.moveTo(25, 25);
-  ctx.lineTo(-25, -25);
-  ctx.lineTo(25, -25);
-  ctx.lineTo(-25, 25);
-  ctx.closePath();
-  ctx.fill();
-}
-
-function dot(ctx) {
-  ctx.save();
-  ctx.fillStyle = "black";
-  ctx.fillRect(-2, -2, 4, 4);
-  ctx.restore();
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // note that all other translates are relative to this one
-  ctx.translate(45, 45);
-
-  ctx.save();
-  //ctx.translate(0, 0); // unnecessary
-  drawBowtie(ctx, "red");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(85, 0);
-  ctx.rotate(45 * Math.PI / 180);
-  drawBowtie(ctx, "green");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(0, 85);
-  ctx.rotate(135 * Math.PI / 180);
-  drawBowtie(ctx, "blue");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(85, 85);
-  ctx.rotate(90 * Math.PI / 180);
-  drawBowtie(ctx, "yellow");
-  dot(ctx);
-  ctx.restore();
-}
-
- -

{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}

-

This defines two methods, drawBowtie and dot, that are called 4 times. Before each call, translate() and rotate() are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. dot renders a small black square centered at (0, 0). That dot is moved around by the transformation matrix. drawBowtie renders a simple bowtie path using the passed-in fill style.

-

As matrix operations are cumulative, save() and restore() are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a translate() rotate() translate() sequence will yield different results than a translate() translate() rotate() series of calls.

-

Compatibility With Apple <canvas>

-

For the most part, <canvas> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.

-

Required </canvas> tag

-

In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a required end tag.

-

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

-

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).

-
canvas {
-  font-size: 0.00001px !ie;
-}
-

Additional Features

-

Rendering Web Content Into A Canvas

-
- This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. Read why.
-

Mozilla's canvas is extended with the drawWindow() method. This method draws a snapshot of the contents of a DOM window into the canvas. For example,

-
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
-
-

would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).

-

It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.

-

With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.

-

Ted Mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.

-
- Note: Using canvas.drawWindow() while handling a document's onload event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load.
-

See also

- diff --git a/files/it/web/html/canvas/index.html b/files/it/web/html/canvas/index.html deleted file mode 100644 index dcded63973..0000000000 --- a/files/it/web/html/canvas/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Canvas -slug: Web/HTML/Canvas -translation_of: Web/API/Canvas_API ---- -

Aggiunto con HTML5, HTML {{ HTMLElement("canvas") }} è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito JavaScript). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.

- -

Le applicazioni Mozilla supportano <canvas> a partire da Gecko 1.8 (cioè Firefox 1.5). L'elemento è stato originariamente introdotto da Apple per OS X Dashboard e Safari. Internet Explorer supporta <canvas> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <canvas> includendo lo script del progetto Explorer Canvas di Google. Anche Google Chrome e Opera 9 supportano <canvas>.

- -

L'elemento <canvas> è utilizzato anche da WebGL per la grafica 3D con accellerazione hardware nelle pagine web.

- - - - - - - - -
-

Documentazione

- -
-
Specifiche
-
L'elemento <canvas> è parte delle specifiche 1.0 della WhatWG per le applicazioni  Web, anche conosciute come HTML5.
-
Esecitazione sui canvas
-
Un'esercitazione completa che copre sia l'utilizzo base  che le caratteristiche avanzate di <canvas>.
-
Frammenti di codice: Canvas
-
Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <canvas>.
-
Esempi di canvas
-
Alcune dimostraioni sui <canvas>.
-
Disegnare oggetti DOM in un canvas
-
Come disegnare contenuto DOM, come elementi HTML, in un canvas.
-
Un semplice raycaster
-
Una demo di animazione ray-tracing utilizzando il canvas.
-
Interfacce dei Canvas nel DOM
-
Interfacce dei Canvas nel DOM implementate in Gecko.
-
- -

Vedi tutto...

- 		-

Comunità

- -

Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}
- Canvas-Developers Yahoo Group

- -

Risorse

- - - -

Librerie

- -
    -
  • libCanvas è un potente e leggero framework per canvas
    • -
  • Processing.js implementzione del linguaggio di visualizzazione Processing
    • -
  • EaselJS è una libreria con un'API simile a Flash
    • -
  • PlotKit è una libreria per la creazione di grafici e diagrammi
    • -
  • Rekapi è un'API per le animazioni Canvas basata sui keyframe
    • -
  • PhiloGL è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.
    • -
  • JavaScript InfoVis Toolkit crea visualizzazioni di dati interattive per il Web con Canvas 2D
    • -
  • Frame-Engine è un framework per lo sviluppo di applicazioni e giochi
    • -
- - - - -
- -
{{ HTML5ArticleTOC() }}
diff --git a/files/it/web/html/element/figura/index.html b/files/it/web/html/element/figura/index.html deleted file mode 100644 index 6a1f4b019f..0000000000 --- a/files/it/web/html/element/figura/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/figura -tags: - - Element - - Image - - Information - - Presentation - - Reference -translation_of: Web/HTML/Element/figure ---- -
{{HTMLRef}}
- -

L'elemento HTML <figure> rappresenta un contenuto indipendente che può avere una descrizione tramite l'elemento ({{HTMLElement("figcaption")}}). L'immagine, la descrizione e il suo contenuto hanno riferimenti indipendenti.

- -
{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Categorie di contenutiContenuti di flusso, sezioni e struttura
Contenuti permessiL'elemento {{HTMLElement("figcaption")}}, seguito da contenuti di flusso; o contenuti di flusso seguiti dall'elemento {{HTMLElement("figcaption")}}; o contenuti di flusso.
Omissione del tag{{no_tag_omission}}
Genitori permessi -

Qualsiasi elemento che accetti Contenuti di flusso.

-
Ruoli ARIA permessi{{ARIARole("group")}}, {{ARIARole("presentation")}}
Interfaccia DOM{{domxref("HTMLElement")}}
- -

Attributi

- -

Questo elemento include gli attributi globali.

- -

Note sull'utilizzo

- - - -

Esempi

- -

Immagini

- -
<!-- Solo un'immagine -->
-<figure>
-  <img
-  src="https://developer.mozilla.org/static/img/favicon144.png"
-  alt="Il bellissimo logo MDN.">
-</figure>
-
-<!-- Un'immagine con descrizione -->
-<figure>
-  <img
-  src="https://developer.mozilla.org/static/img/favicon144.png"
-  alt="Il bellissimo logo MDN.">
-  <figcaption>MDN Logo</figcaption>
-</figure>
-
- -
{{EmbedLiveSample("Immagini", "100%", 375)}}
- -

Frammenti di codice

- -
<figure>
-  <figcaption>Ottieni dettagli sul browser utilizzando <code>navigator</code>.</figcaption>
-  <pre>
-function NavigatorExample() {
-  var txt;
-  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
-  txt+= "Browser Name: " + navigator.appName + "; ";
-  txt+= "Browser Version: " + navigator.appVersion  + "; ";
-  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
-  txt+= "Platform: " + navigator.platform  + "; ";
-  txt+= "User-agent header: " + navigator.userAgent  + "; ";
-  console.log("NavigatorExample", txt);
-}
-  </pre>
-</figure>
- -
{{EmbedLiveSample("Frammenti_di_codice", "100%", 250)}}
- -

Citazioni

- -
<figure>
-  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
-  <blockquote>If debugging is the process of removing software bugs,
-  then programming must be the process of putting them in.</blockquote>
-</figure>
-
- -
{{EmbedLiveSample("Citazioni")}}
- -

Poemi

- -
<figure>
-  <p style="white-space:pre">
-Bid me discourse, I will enchant thine ear,
-  Or like a fairy trip upon the green,
-Or, like a nymph, with long dishevell'd hair,
-  Dance on the sands, and yet no footing seen:
-Love is a spirit all compact of fire,
-  Not gross to sink, but light, and will aspire.</p>
-  <figcaption><cite>Venus and Adonis</cite>,
-    by William Shakespeare</figcaption>
-</figure>
- -
{{EmbedLiveSample("Poemi", "100%", 250)}}
- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5.2')}}Nessun cambiamento da HTML 5.0.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilità dei browser

- - - -

{{Compat("html.elements.figure")}}

- -

See also

- - diff --git a/files/it/web/html/element/figure/index.html b/files/it/web/html/element/figure/index.html new file mode 100644 index 0000000000..6a1f4b019f --- /dev/null +++ b/files/it/web/html/element/figure/index.html @@ -0,0 +1,170 @@ +--- +title:
+slug: Web/HTML/Element/figura +tags: + - Element + - Image + - Information + - Presentation + - Reference +translation_of: Web/HTML/Element/figure +--- +
{{HTMLRef}}
+ +

L'elemento HTML <figure> rappresenta un contenuto indipendente che può avere una descrizione tramite l'elemento ({{HTMLElement("figcaption")}}). L'immagine, la descrizione e il suo contenuto hanno riferimenti indipendenti.

+ +
{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorie di contenutiContenuti di flusso, sezioni e struttura
Contenuti permessiL'elemento {{HTMLElement("figcaption")}}, seguito da contenuti di flusso; o contenuti di flusso seguiti dall'elemento {{HTMLElement("figcaption")}}; o contenuti di flusso.
Omissione del tag{{no_tag_omission}}
Genitori permessi +

Qualsiasi elemento che accetti Contenuti di flusso.

+
Ruoli ARIA permessi{{ARIARole("group")}}, {{ARIARole("presentation")}}
Interfaccia DOM{{domxref("HTMLElement")}}
+ +

Attributi

+ +

Questo elemento include gli attributi globali.

+ +

Note sull'utilizzo

+ +
    +
  • Solitamente l'elemento <figure> è un'immagine, un'illustrazione, un diagramma, un frammento di codice, etc., relativo al flusso principale di un documento, ma che può essere posizionato in un'altra parte del documento o all'appendice senza impatti sul flusso principale.
    • +
  • Può essere associata una descrizione all'elemento <figure> inserendo l'elemento {{HTMLElement("figcaption")}} al suo interno (sia come primo che come ultimo figlio). Il primo elemento <figcaption> trovato sarà utilizzato come descrizione.
    • +
+ +

Esempi

+ +

Immagini

+ +
<!-- Solo un'immagine -->
+<figure>
+  <img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Il bellissimo logo MDN.">
+</figure>
+
+<!-- Un'immagine con descrizione -->
+<figure>
+  <img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Il bellissimo logo MDN.">
+  <figcaption>MDN Logo</figcaption>
+</figure>
+
+ +
{{EmbedLiveSample("Immagini", "100%", 375)}}
+ +

Frammenti di codice

+ +
<figure>
+  <figcaption>Ottieni dettagli sul browser utilizzando <code>navigator</code>.</figcaption>
+  <pre>
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
+  txt+= "Browser Name: " + navigator.appName + "; ";
+  txt+= "Browser Version: " + navigator.appVersion  + "; ";
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
+  txt+= "Platform: " + navigator.platform  + "; ";
+  txt+= "User-agent header: " + navigator.userAgent  + "; ";
+  console.log("NavigatorExample", txt);
+}
+  </pre>
+</figure>
+ +
{{EmbedLiveSample("Frammenti_di_codice", "100%", 250)}}
+ +

Citazioni

+ +
<figure>
+  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
+  <blockquote>If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.</blockquote>
+</figure>
+
+ +
{{EmbedLiveSample("Citazioni")}}
+ +

Poemi

+ +
<figure>
+  <p style="white-space:pre">
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.</p>
+  <figcaption><cite>Venus and Adonis</cite>,
+    by William Shakespeare</figcaption>
+</figure>
+ +
{{EmbedLiveSample("Poemi", "100%", 250)}}
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5.2')}}Nessun cambiamento da HTML 5.0.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilità dei browser

+ + + +

{{Compat("html.elements.figure")}}

+ +

See also

+ +
    +
  • L'elemento {{HTMLElement("figcaption")}}.
    • +
diff --git a/files/it/web/html/forms_in_html/index.html b/files/it/web/html/forms_in_html/index.html deleted file mode 100644 index 509b0a278f..0000000000 --- a/files/it/web/html/forms_in_html/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Forms in HTML5 -slug: Web/HTML/Forms_in_HTML -translation_of: Learn/HTML/Forms/HTML5_updates ---- -
- {{gecko_minversion_header("2")}}
-

Sommario

-

Gli elementi e gli attributi dei form in HTML5 forniscono un mark-up più ricco di valore semantico rispetto ad HTML4, e alleggeriscono gli sviluppatori dalla necessità di scripting e styling intensivo richiesta da HTML4. Le caratteristiche dei form HTML5 generano anche una migliore esperienza utente, rendendo i form più coerenti tra i diversi siti web fornendo un feedback immediato all'utente in merito ai dati inseriti. La funzionalità viene fornita anche agli utenti che hanno disabilitato lo scripting nel browser.

-

Questa sezione descrive gli elementi nuovi o modificati in HTML5, che sono supportati da Gecko / Firefox, versione 4 o superiore.

-

L'elemento <input>

-

L'elemento {{HTMLElement("input")}} ha alcuni nuovi valori per l'attributo {{htmlattrxref("type", "input")}}.

-
    -
  • search: L'elemento rappresenta un campo di ricerca. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta.
    • -
  • tel: L'elemento rappresenta un controllo per la modifica di un numero telefonico. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta, dato che la formattazione dei numeri di telefono varia notevolmente a livello internazionale. È possibile utilizzare attributi quali {{htmlattrxref("pattern", "input")}} e {{htmlattrxref("maxlength", "input")}} per limitare i valori immessi nel controllo.
    • -
  • url: L'elemento rappresenta un controllo per la modifica di un URL. Le interruzioni di riga e gli spazi vuoti finali vengono eliminati automaticamente dal valore immesso.
    • -
  • -

    email: L'elemento rappresenta un controllo per la modifica di un indirizzo email. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso. Un indirizzo e-mail non valido può essere immesso, ma il campo di input verrà validato solo se l'indirizzo di posta elettronica soddisfa la produzione ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) dove atext è definito in RFC 5322 sezione 3.2.3, e ldh-str è definito in RFC 1034 sezione 3.5.

    -
    - Nota: Se l'attributo {{htmlattrxref("multiple", "input")}} è presente, potranno essere inseriti diversi indirizzi email nel {{HTMLElement("input")}}, ad esempio una lista di email separate da virgole, ma questa funzionalità al momento non è stata implementata in Firefox.
    -
    • -
-

L'elemento {{HTMLElement("input")}} ha anche nuovi attributi:

-
    -
  • {{htmlattrxref("list", "input")}}: l'ID di un elemento {{HTMLElement("datalist")}} il cui contenuto, che consiste in elementi {{HTMLElement("option")}}, dovrà essere utilizzato come suggerimento: le {{HTMLElement("option")}} (opzioni) vengono visualizzate nell'area dedicata ai suggerimenti del campo di input.
    • -
  • {{htmlattrxref("pattern", "input")}}: Un'espressione regolare con cui il valore del controllo viene confrontato. Può essere usato negli {{HTMLElement("input")}} di tipo text, tel, search, url, ed email.
    • -
  • {{htmlattrxref("form", "input")}}: Una stringa indicante a quale elemento {{HTMLElement("form")}} "appartiene" l'input. Ogni input può appartenere ad un solo form.
    • -
  • {{htmlattrxref("formmethod", "input")}}: Una stringa indicante il metodo HTTP (GET o POST) da usare per l'invio dei dati al server; sovrascrive l'attributo {{htmlattrxref("method", "form")}} dell'elemento {{HTMLElement("form")}}, se definito. L'attributo {{htmlattrxref("formmethod", "input")}} può essere usato negli {{HTMLElement("input")}} di tipo image o submit, e quando l'attributo {{htmlattrxref("form", "input")}} è stato impostato.
    • -
  • {{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Una stringa che contiene un messaggio da visualizzare quando il campo non passa la validazione. Questo attributo è un'estensione di Mozilla, non rientra negli standard.
    • -
-

L'elemento <form>

-

L'elemento {{HTMLElement("form")}} ha un nuovo attributo:

-
    -
  • {{htmlattrxref("novalidate", "form")}}: Questo attributo fa in modo che il form non richieda la validazione.
    • -
-

L'elemento <datalist>

-

L'elemento {{HTMLElement("datalist")}} racchiude una lista di elementi {{HTMLElement("option")}} da suggerire all'utente durante la compilazione di un {{HTMLElement("input")}}.

-

Puoi aggiungere l'attributo {{htmlattrxref("list", "input")}} ad un elemento {{HTMLElement("input")}} per collegare un campo specifico ad un elemento {{HTMLElement("datalist")}} specifico.

-

L'elemento <output>

-

L'elemento {{HTMLElement("output")}} rappresenta il risultato di una computazione (un calcolo).

-

Puoi usare l'attributo {{htmlattrxref("for", "output")}} per specificare una relazione tra un elemento {{HTMLElement("output")}} e altri elementi del documento che hanno influenzato la computazione (come input o parametri). Il valore dell'attributo {{htmlattrxref("for", "output")}} è una lista di ID degli altri elementi separati da spazi.

-

{{non-standard_inline}} Gecko 2.0 (ma non necessariamente altri motori di rendering dei browser) supporta la definizione di vincoli di validità personalizzati e messaggi di errore per gli elementi {{HTMLElement("output")}}, e pertanto applica le pseudo-classi CSS {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, e {{Cssxref(":-moz-ui-valid")}} anche ad esso. Ciò può essere utile in situazioni in cui il risultato calcolato viola una regola, ma nessun valore immesso specifico lo fa (per esempio, "La somma totale delle percentuali non deve superare il 100%").

-

L'attributo <placeholder> (testo segnaposto)

-

L'attributo {{htmlattrxref("placeholder", "input")}} si applica agli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}}, fornendo all'utente un suggerimento su cosa dovrebbe immettere nel campo. Il testo segnaposto non deve contenere interruzioni di linea.

-

L'attributo <autofocus>

-

L'attributo {{htmlattrxref("autofocus", "input")}} consente di specificare che un campo dovrebbero ricevere il focus (dovrebbe essere "focalizzato") al caricamento della pagina, a meno che l'utente non decida altrimenti, per esempio immettendo dati in un altro campo. L'attributo autofocus, Booleano, può essere assegnato ad un solo campo per ciascun form. Si applica agli elementi {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}. Unica eccezione: non può essere assegnato agli elementi {{HTMLElement("input")}} che abbiano l'attributo {{htmlattrxref("type", "input")}} impostato su hidden (ovviamente non si può focalizzare un elemento nascosto).

-

La proprietà label.control del DOM

-

L'interfaccia DOM HTMLLabelElement fornisce una proprietà extra, oltre alle proprietà che corrispondono agli attributi dell'elemento HTML {{HTMLElement("label")}}. La proprietà control restituisce il campo etichettato, cioè il campo a cui si riferisce l'etichetta (label), che è determinato dall'attributo {{htmlattrxref("for", "label")}} (se definito) o dal primo campo contenuto nell'etichetta.

-

Vincoli di Validazione

-

HTML5 fornisce sintassi ed elementi API per supportare la validazione lato client dei form. Anche se questa funzionalità non sostituisce la validazione lato server, che è ancora necessaria per la protezione e l'integrità dei dati, la validazione lato client può fornire una migliore esperienza utente, dando all'utente un feedback immediato sui dati immessi.

-

Se l'attributo title viene impostato su di un elemento {{HTMLElement("input")}}, il suo valore è usato come tooltip. Tuttavia, se la validazione fallisce, il tooltip sarà sostituito con un messaggio di errore. È possibile personalizzare tale messaggio di errore usando l'attributo non-standard {{htmlattrxref("x-moz-errormessage")}} o con il metodo setCustomValidity().

-
<input type="email" title="Si prega di fornire una e-mail" x-moz-errormessage="E-mail non valida">
-
- Nota: I vincoli di validazione non sono supportati dagli elementi {{HTMLElement("button")}}; per assegnare uno stile ai bottoni in base allo status di validazione del form, usare la pseudo-classe {{cssxref(":-moz-submit-invalid")}}.
-

Sintassi HTML per Vincolare la Validazione

-

I seguenti elementi di sintassi HTML5 possono essere usati per specificare i vincoli sui dati immessi nel form.

-
    -
  • L'attributo {{htmlattrxref("required", "input")}} nell'elemento {{HTMLElement("input")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}} indica che il campo deve essere compilato. (Sull'elemento {{HTMLElement("input")}}, {{htmlattrxref("required", "input")}} si applica solo in combinazione con alcuni valori dell'attributo {{htmlattrxref("type", "input")}})
    • -
  • L'attributo {{htmlattrxref("pattern", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore in modo che corrisponda una specifica espressione regolare.
    • -
  • Gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore specificando il valore minimo e massimo che può essere immesso.
    • -
  • L'attributo {{htmlattrxref("step", "input")}} nell'elemento {{HTMLElement("input")}} (se usato in combinazione con gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} ) vincola la granularità dei valori che possono essere immessi. I valori che non corrispondono ad uno degli "step" consentiti non passano la validazione.
    • -
  • L'attributo {{htmlattrxref("maxlength", "input")}} negli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}} vincola il numero massimo di caratteri (in base a punti di codice Unicode) che l'utente può immettere.
    • -
  • I valori url e email nell'attributo {{htmlattrxref("type", "input")}} restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.
    • -
-

In aggiunta, è possibile evitare i vincoli di validazione specificando l'attributo {{htmlattrxref("novalidate", "form")}} nel {{HTMLElement("form")}}, o l'attributo {{htmlattrxref("formnovalidate", "button")}} nell'elemento {{HTMLElement("button")}} o nell'elemento {{HTMLElement("input")}} (quando l'attributo {{htmlattrxref("type", "input")}} è impostato su submit o image). Questi attributi indicano che il form non deve essere validato.

-

API per i Vincoli di Validazione

-

Le seguenti proprietà e metodi del DOM, correlati ai vincoli di validazione, sono disponibili agli scripts lato client:

-
    -
  • Negli oggetti HTMLFormElement, il metodo checkValidity() restituisce "true" se tutti gli elementi associati a tale elemento del form che sono soggetti a validazione soddisfano i loro vincoli, e "false" se non lo fanno.
    • -
  • On form-associated elements: -
      -
    • La proprietà willValidate è "false" se l'elemento non soddisfa i vincoli di validazione.
      • -
    • La proprietà validity è un oggetto ValidityState rappresentante lo stato di validazione dell'elemento.
      • -
    • La proprietà validationMessage è un messaggio che descrive eventuali errori relativi ai vincoli impostati sull'elemento.
      • -
    • Il metodo checkValidity(), se l'elemento non soddisfa uno o più dei suoi vincoli, o true in caso contrario.
      • -
    • Il metodo setCustomValidity() imposta un messaggio di errore personalizzato, permettendo anche ai vincoli personalizzati di essere imposti e validati, oltre a quelli predefiniti.
      • -
    -
    • -
-

Vedi anche

- diff --git a/files/it/web/html/html5/index.html b/files/it/web/html/html5/index.html deleted file mode 100644 index be6fc91a82..0000000000 --- a/files/it/web/html/html5/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: HTML5 -slug: Web/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 è l'ultima evoluzione dello standard che definisce HTML. Il termine rappresenta due concetti differenti:

- -
    -
  • Una nuova versione del linguaggio HTML, con nuovi elementi, attributi e comportamenti
    • -
  • Un più ampio insieme di tecnologie che permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato HTML5 & compagni ed è spesso abbreviato in HTML5
    • -
- -

Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.

- -
    -
  • Semantica: descrivere con maggiore precisione il contenuto.
    • -
  • Connettività: comunicare con il server in modi nuovi e innovativi.
    • -
  • Offline & Memorizzazione: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.
    • -
  • Multimedia: rendere audio e video cittadini di prima classe nell'Open Web.
    • -
  • Effetti e Grafica 2D/3D: usare una gamma molto più ampia di opzioni di rappresentazione.
    • -
  • Prestazioni & Integrazione: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.
    • -
  • Accesso ai dispositivi: usare vari dispositivi di input e output.
    • -
  • Stile: consentire agli autori di realizzare temi più sofisticati.
    • -
- -
-
-

Semantica

- -
-
Sezioni e struttura in HTML5
-
Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: {{HTMLElement("section")}} , {{HTMLElement("article")}} , {{HTMLElement("nav")}} , {{HTMLElement("header")}} , {{HTMLElement("footer")}} , {{HTMLElement("aside")}} e {{HTMLElement("hgroup")}}.
-
Integrare audio e video in HTML5
-
Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.
-
Forms in HTML5
-
Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo {{htmlattrxref("type", "input")}} degli {{HTMLElement("input")}}, e il nuovo elemento {{HTMLElement("output")}}.
-
Nuovi elementi semantici
-
Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, che accrescono la quantità di elementi validi di HTML5.
-
Miglioramenti degli {{HTMLElement("iframe")}}
-
Utilizzando {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e gli attributi {{htmlattrxref("srcdoc", "iframe")}}, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento {{HTMLElement("iframe")}}.
-
MathML
-
Permette di incorporare direttamente formule matematiche.
-
Introduzione a HTML5
-
Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.
-
Parser di HTML5-compatibile
-
Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.
-
- -

Connettività

- -
-
Web Sockets
-
Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.
-
Server-event inviati
-
Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.
-
WebRTC
-
Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.
-
- -

Offline & Memorizzazione

- -
-
Risorse Offline: la cache dell'applicazione
-
Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.
-
Eventi online e offline
-
Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.
-
Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)
-
La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.
-
IndexedDB
-
E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.
-
Utilizzare file da applicazioni web
-
Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo multiple con type file dell'elemento {{HTMLElement("input")}}. C'è anche FileReader.
-
- -

Multimedia

- -
-
Utilizzare audio e video in HTML5
-
Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di nuovi contenuti multimediali.
-
WebRTC
-
Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.
-
Utilizzo della API Camera
-
Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.
-
Track e WebVTT
-
L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. WebVTT è un formato di traccia testuale.
-
- -

Grafica & Effetti 3D

- -
-
Tutorial sui Canvas
-
Apprendi il nuovo elemento {{HTMLElement("canvas")}} e come disegnare grafica ed altri oggetti in Firefox
-
API di testo per gli elementi <canvas>  di HTML5
-
Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.
-
WebGL
-
WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.
-
SVG
-
Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.
-
-
- -
-

Prestazioni & integrazione

- -
-
Web Workers
-
Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.
-
XMLHttpRequest Livello 2
-
Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro Ajax.
-
JIT-motori JavaScript compilati
-
La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.
-
History API
-
Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.
-
L'attributo contentEditable: trasforma il tuo sito web in un wiki!
-
HTML5 ha standardizzato l'attributo contentEditable.
-
Drag & drop
-
Le API per il drag & drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.
-
Gestione del focus in HTML
-
Sono supportati i nuovi attributiHTML5 activeElement e hasFocus.
-
Gestori di protocollo basato sul Web
-
E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.
-
Fullscreen API
-
Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.
-
Pointer Lock API
-
Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.
-
Eventi online ed offline
-
Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.
-
- -

Accesso ai Dispositivi

- -
-
Utilizzare le API Camera
-
Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.
-
Eventi Touch
-
Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.
-
Utilizzare la geolocalizzazione
-
Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.
-
Rilevazione orientamento del dispositivo
-
Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).
-
Pointer Lock API
-
Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.
-
- -

Stile

- -

CSS è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come CSS3, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.

- -
-
Nuove caratteristiche di stile per lo sfondo
-
E' ora possibile aggiungere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare sfondi multipli.
-
Bordi più fantasiosi
-
Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.
-
Anima il tuo stile
-
Utilizzando le Transizioni CSS per animare il passaggio tra stati, o utilizzando le Animazioni CSS per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.
-
Miglioramenti tipografici
-
Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la sillabazione, ma possono anche applicare un'ombra o controllare più precisamente la decorazione. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.
-
Nuove impaginazioni per la presentazione
-
Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: Impaginazione CSS a colonna multipla, e l'impaginazione CSS a box flessibile.
-
-
-
- -

 

diff --git a/files/it/web/html/html5/introduction_to_html5/index.html b/files/it/web/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 14fe305eb6..0000000000 --- a/files/it/web/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Introduzione a HTML5 -slug: Web/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 è la quinta revisione e l'ultima versione dello standard HTML. Propone nuove funzionalità che forniscono il supporto dei rich media, la creazione di applicazioni web in grado di interagire con l'utente, con i suoi dati locali e i servers, in maniera più facile ed efficiente di prima.

-

Poiché HTML5 è ancora in fase di sviluppo, inevitabilmente ci saranno altre modifiche alle specifiche. Pertanto al momento non tutte le funzioni sono supportate da tutti i browser. Tuttavia Gecko, e per estensione Firefox, supporta HTML5 in maniera ottimale, e gli sviluppatori continuano a lavorare per supportare ancora più funzionalità. Gecko ha iniziato a supportare alcune funzionalità di HTML5 dalla versione 1.8.1. È possibile trovare un elenco di tutte le funzionalità HTML5 che Gecko supporta attualmente nella pagina principale di HTML5. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web CanIUse.

-

Dichiarare che un documento contiene mark-up HTML5 con il doctype HTML

-

Il doctype per HTML5 è semplicissimo. Per specificare che il vostro contenuto HTML utilizza HTML5, basta dichiarare:

-
<!DOCTYPE html>
-
-

Così facendo persino i browser che attualmente non supportano HTML5 entreranno in modalità standard, cioè interpreteranno il codice HTML in modo compatibile con HTML5, ignorando le nuove funzionalità di HTML5 se non le supportano.

-

È molto più semplice rispetto ai precedenti doctype, oltre che più breve, quindi più facile da ricordare e riduce anche la quantità di byte scaricati dall'utente.

-

Dichiarare il set di caratteri con <meta charset>

-

Indicare il set di caratteri che verrà utilizzato è solitamente la prima cosa da fare in un documento HTML. La specifica precedente richiedeva un elemento {{HTMLElement("meta")}} molto complesso. Ora è facilissimo:

-
<meta charset="UTF-8">
-

Ricordati di inserire questo tag subito dopo l'apertura del {{HTMLElement("head") }}, perché alcuni browser riavviano il parsing di un documento HTML se il set di caratteri dichiarato è diverso da quello che avevano previsto. Inoltre consigliamo sempre di usare il set UTF-8, ove possibile, perché semplifica la gestione dei caratteri nei documenti utilizzando diversi script.

-

Nota bene: HTML5 limita il set di caratteri validi a quelli compatibili con ASCII e che usano almeno 8 bit. Ciò è stato deciso per motivi di sicurezza e per prevenire alcuni tipi di attacchi.

-

Usare il nuovo parser HTML5

-

La regola di parsing di HTML5, che analizza il significato del mark-up, è stata definita con maggiore precisione in HTML5. Fino all'introduzione di HTML5, le uniche regole riguardavano il mark-up valido, quindi il comportamento del parser in caso di errori (e la maggior parte dei siti web ne ha almeno uno) era indefinito. In sostanza, tutti i browser si comportavano in modo diverso. Ora, di fronte a errori nel mark-up, tutti i browser conformi devono comportarsi esattamente nello stesso modo.

-

Questo obbligo aiuta non poco gli sviluppatori. Anche se tutti i browser moderni ora applicano queste regole di analisi HTML5, alcuni utenti navigano ancora con browser non compatibili con HTML5. Tenete a mente che è ancora altamente raccomandato stendere mark-up valido, in modo che il codice sia facile da leggere e mantenere nel tempo, e diminuisca notevolmente la probabilità di incompatibilità con i vari browser più datati.

-

Non preoccuparti — non devi cambiare nulla del tuo sito Web — gli sviluppatori dei browser hanno già fatto tutto per te!

diff --git a/files/it/web/html/reference/index.html b/files/it/web/html/reference/index.html new file mode 100644 index 0000000000..6dfc71219d --- /dev/null +++ b/files/it/web/html/reference/index.html @@ -0,0 +1,46 @@ +--- +title: Riferimento HTML +slug: Web/HTML/Riferimento +tags: + - Elementi + - HTML + - Riferimento + - Web + - tag +translation_of: Web/HTML/Reference +--- +
{{HTMLSidebar}}
+ +

HTML è il linguaggio che descrive la struttura e la semantica del contenuto di un documento Web; è composto da elementi, ciascuno dei quali può essere modificato da alcuni attributi. Il contenuto di una pagina Web viene marcato con etichette di elementi HTML come per esempio {{HTMLElement("img")}}, {{HTMLElement("title")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, etc.

+ +

I contenuti qui presentati costituiscono materiale di riferimento da utilizzare per lo sviluppo Web. MDN offre un riferimento a tutti gli elementi di HTML, così come a tutti gli attributi che governano il comportamento degli elementi.

+ +
+
+

Contenuti

+ +
+
HTML element reference
+
This page lists all the HTML elements, which are created using tags.
+
HTML attribute reference
+
Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
+
Global attributes
+
Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.
+
Link types
+
In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.
+
Content Categories
+
Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics.
+
+ +

View All...

+
+ +
+

Guide e Tutorials

+ +
+
Guida allo sviluppo HTML
+
Articoli MDN che mostrano tecniche specifiche per creare contenuti Web in HTML, tutorial e altro materiale utile a portata di mano.
+
+
+
diff --git a/files/it/web/html/riferimento/index.html b/files/it/web/html/riferimento/index.html deleted file mode 100644 index 6dfc71219d..0000000000 --- a/files/it/web/html/riferimento/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Riferimento HTML -slug: Web/HTML/Riferimento -tags: - - Elementi - - HTML - - Riferimento - - Web - - tag -translation_of: Web/HTML/Reference ---- -
{{HTMLSidebar}}
- -

HTML è il linguaggio che descrive la struttura e la semantica del contenuto di un documento Web; è composto da elementi, ciascuno dei quali può essere modificato da alcuni attributi. Il contenuto di una pagina Web viene marcato con etichette di elementi HTML come per esempio {{HTMLElement("img")}}, {{HTMLElement("title")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, etc.

- -

I contenuti qui presentati costituiscono materiale di riferimento da utilizzare per lo sviluppo Web. MDN offre un riferimento a tutti gli elementi di HTML, così come a tutti gli attributi che governano il comportamento degli elementi.

- -
-
-

Contenuti

- -
-
HTML element reference
-
This page lists all the HTML elements, which are created using tags.
-
HTML attribute reference
-
Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
-
Global attributes
-
Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.
-
Link types
-
In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.
-
Content Categories
-
Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics.
-
- -

View All...

-
- -
-

Guide e Tutorials

- -
-
Guida allo sviluppo HTML
-
Articoli MDN che mostrano tecniche specifiche per creare contenuti Web in HTML, tutorial e altro materiale utile a portata di mano.
-
-
-
diff --git a/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 822543a758..0000000000 --- a/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Sezioni e Struttura di un Documento HTML5 -slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -

La specifica HTML5 rende disponibili numerosi nuovi elementi agli sviluppatori, permettendo ad essi di descrivere la struttura di un documento web tramite una semantica standard. Questa pagina descrive i nuovi elementi e spiega come usarli per definire la struttura di qualsiasi documento.

-

Struttura di un Documento in HTML 4

-

La struttura di un documento, cioè la struttura semantica di ciò che si trova tra <body> e </body>, è fondamentale nella presentazione della pagina all'utente. HTML 4 usa le nozioni di sezione e sotto-sezione di un documento per descrivere la sua struttura. Una sezione è definita da un Elemento HTML di Divisione ( {{HTMLElement("div")}} ) con un Elemento HTML di Intestazione ( {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}} ) al suo interno, che ne definisce il titolo. La relazione tra gli Elementi HTML di Divisione e gli Elementi HTML di Intestazione genera la struttura del documento.

-

Dunque il seguente mark-up:

-
- 
<div class="section" id="elefanti-delle-foreste" >
-<h1>Elefanti delle foreste</h1>
-<p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-...la sezione continua...
-<div class="subsection" id="elefanti-habitat" >
-<h2>Habitat</h2>
-<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-...la sotto-sezione continua...
-</div>
-</div>
-
-
-

genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Habitat
-
-

L'elemento {{HTMLElement("div")}} non è strettamente necessario per definire una nuova sezione. La mera presenza di un Elemento HTML di Intestazione è abbastanza per indicare una nuova sezione. Perciò:

-
<h1>Elefanti delle foreste</h1>
-<p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-...la sezione continua...
-<h2>Habitat</h2>
-<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-...la sotto-sezione continua...
-<h2>Dieta</h2>
-<h1>Gerbilli della Mongolia</h1>
-
-

genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Habitat
-   1.2 Dieta
-2. Gerbilli della Mongolia
-
-

Problemi Risolti da HTML5

-

La definizione della struttura di un documento di HTML 4 è molto approssimativa e causa numerosi problemi:

-
    -
  1. L'uso di un {{HTMLElement("div")}} per definire sezioni semantiche, senza la definizione di valori specifici nell'attributo class, rende impossibile per un algoritmo automatico definire la struttura ("Questo {{HTMLElement("div")}} è parte della struttura della pagina, definisce una sezione o una sotto-sezione?" o "è solo un {{HTMLElement("div")}} inserito ai fini di presentazione, usato per scopi estetici?"). In altri termini, la specifica HTML4 è poco precisa riguardo a cosa è una sezione e come definire il suo scopo. La generazione automatica di una struttura è importante, in modo particolare per le tecnologie assistive, che sono in grado di adattare la presentazione delle informazioni alla struttura del documento. HTML5 rimuove l'elemento {{HTMLElement("div")}} dall'algoritmo che genera la struttura, introducendo l'elemento {{HTMLElement("section")}}, cioè un Elemento HTML di Sezione.
    2. -
  2. Unire più documenti è difficile: inserire un sotto-documento in un documento principale richiede di cambiare il "grado" delle intestazioni in modo che la struttura venga mantenuta. Questo problema viene risolto in HTML5, grazie ai nuovi elementi di sezionamento ( {{HTMLElement("article")}} , {{HTMLElement("section")}} , {{HTMLElement("nav")}} e {{HTMLElement("aside")}} ) che sono sempre sotto-sezioni della sezione che li contiene, indipendentemente dalle sezioni create dagli Elementi HTML di Intestazione.
    3. -
  3. Poiché ogni Elemento HTML di Intestazione cambia la struttura, non è possibile assegnare un sotto-titolo o un titolo secondario (es., <h1>Justine</h1><h2>Les Malheurs de la Vertu</h2> genera la struttura 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduce l'elemento {{HTMLElement("hgroup")}} che "nasconde" tutti gli elementi di intestazione tranne quello di grado più elevato (es., <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> genera la struttura 1. Justine).
    4. -
  4. Nel HTML4, ogni sezione è parte della struttura del documento. Ma spesso i documenti non sono così lineari. Un documento può avere sezioni speciali contenenti informazioni che non fanno parte del flusso principale, anche se correlati ad esso, come una pubblicità o un approfondimento. HTML5 introduce l'elemento {{HTMLElement("aside")}} permettendo a questo tipo di sezioni di rimanere estranee al flusso principale.
    5. -
  5. Ancora, nel HTML4, dato che ogni sezione è parte della struttura del documento, non c'è modo di avere sezioni relative non al documento ma a tutto il sito, come il logo, i menu, una tabella dei contenuti, o le informazioni legali e sul copyright. A tal fine, HTML5 introduce tre elementi per altrettante sezioni specifiche: {{HTMLElement("nav")}} per i gruppi di links, come le tabelle dei contenuti, {{HTMLElement("footer")}} e {{HTMLElement("header")}} per le informazioni correlate al sito.
    6. -
-

Più in generale HTML5 aggiunge precisione alle funzionalità di sezionamento ed intestazione, permettendo una struttura del documento prevedibile e utilizzata dai browser per migliorare l'esperienza utente.

-

L'Algoritmo della Struttura di HTML5

-

Definire Sezioni nel HTML5

-

Tutto il contenuto dell'elemento {{HTMLElement("body")}} appartiene ad una sezione. Le sezioni HTML5 possono essere nidificate. Accanto alla sezione principale, definita dall'elemento {{HTMLElement("body")}}, i confini delle sezioni vengono definiti esplicitamente o implicitamente. Le sezioni esplicite sono contenute negli elementi {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, e {{HTMLElement("nav")}}.

-
- Nota: Ogni sezione può avere la propria gerarchia di intestazioni. Quindi anche un elemento nidificato può avere un'intestazione {{HTMLElement("h1")}}. Vedi Definire le Intestazioni in HTML5.
-

Esempio:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <section>
-    <h1>Introduzione</h1>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-  </section>
-  <aside>
-    <p>pubblicità
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 Esempi S.P.A.
-</footer>
-

Questo frammento di HTML definisce due sezioni di primo livello:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <section>
-    <h1>Introduzione</h1>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-  </section>
-   <aside>
-    <p>pubblicità
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 Esempi S.P.A.
-</footer>
-

La prima sezione ha tre sotto-sezioni:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-
-  <section>
-    <h1>Introduzione</h1>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-  </section>
-
-  <aside>
-    <p>pubblicità
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 Esempi S.P.A.
-</footer>
-

Il che genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Introduzione
-   1.2 Habitat
-   1.3 Sezione (aside)
-
-

Definire le Intestazioni in HTML5

-

L'Elemento HTML di Sezione definisce la struttura del documento, ma c'è bisogno anche delle intestazioni. La regola di base è semplice: il primo Elemento HTML di Intestazione (uno tra {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} ) definisce l'intestazione della sezione corrente.

-

Gli elementi di intestazione hanno un grado dato dal numero nell'elemento, dove {{HTMLElement("h1")}} è il grado più alto, e {{HTMLElement("h6")}} quello più basso. Il grado relativo ha importanza solo all'interno di una sezione; è la struttura delle sezioni a determinare lo schema definitivo, non il grado di ciascuna intestazione. Per esempio, questo codice:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-    ...la sezione continua...
-  <section>
-    <h2>Habitat</h2>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-        ...la sotto-sezione continua...
-  </section>
-</section>
-<section>
-  <h3>Gerbilli della Mongolia</h3>
-  <p>In questa sezione, parliamo dei famosi gerbilli della Mongolia.
-     ...la sezione continua...
-</section>
-

genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Habitat
-2. Gerbilli della Mongolia
-

Notare come il grado delle intestazioni (nell'esempio {{HTMLElement("h1")}} per la prima sezione di primo livello, {{HTMLElement("h2")}} per la sotto-sezione e {{HTMLElement("h3")}} per la seconda sezione di primo livello) non conta. (Qualsiasi grado può essere utilizzato come intestazione di una sezione esplicitamente definita, anche se questa pratica non è consigliata.)

-

Sezionamento implicito

-

Poiché gli elementi HTML5 di sezionamento non sono obbligatori per definire una struttura, c'è un modo per definire sezioni senza di essi, per mantenere la compatibilità con la rete esistente dominata da HTML4. Questa tecnica è chiamata sezionamento implicito.

-

Gli Elementi HTML di Intestazione da ( {{HTMLElement("h1")}} a {{HTMLElement("h6")}} ) definiscono una nuova sezione implicita quando non sono la prima voce del loro contenitore, che è sempre una sezione esplicita. Il modo in cui questa sezione implicita viene posizionata nella struttura è definito dal suo grado relativo all'intestazione precedente nella sezione che le contiene. Se il grado è inferiore rispetto all'intestazione precedente, viene aperta una sotto-sezione implicita. Questo codice:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-    ...la sezione continua...
-  <h3 class="implicit subsection">Habitat</h3>
-  <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-    ...la sotto-sezione continua...
-</section>
-

genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Habitat (implicitly defined by the h3 element)
-
-

Se l'intestazione ha lo stesso grado di quella precedente, la sezione corrente viene chiusa (anche se esplicita!) e se ne apre una nuova, implicita, dello stesso livello:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-    ...la sezione continua...
-  <h1 class="implicit section">Gerbilli della Mongolia</h1>
-  <p>Gerbilli della Mongolia are cute little mammals.
-    ...la sezione continua...
-</section>
-

genera la seguente struttura: 

-
1. Elefanti delle foreste
-2. Gerbilli della Mongolia (implicitamente definita dall'elemento h1, che allo stesso tempo ha chiuso la sezione precedente)
-
-

Se ha grado superiore all'intestazione precedente, chiude la sezione corrente e ne apre una nuova, implicita, di livello superiore:

-
<body>
-  <h1>Mammiferi</h1>
-  <h2>Balene</h2>
-  <p>In questa sezione, parliamo delle balene nuotatrici.
-    ...la sezione continua...
-  <section>
-    <h3>Elefanti delle foreste</h3>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-      ...la sezione continua...
-    <h3>Gerbilli della Mongolia</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...la sotto-sezione continua...
-    <h2>Rettili</h2>
-      <p>I rettili sono animali dal sangue freddo.
-          ...la sotto-sezione continua...
-  </section>
-</body>
-

genera la seguente struttura:

-
1. Mammiferi
-   1.1 Balene (definita implicitamente dall'elemento h2)
-   1.2 Elefanti delle foreste (definita esplicitamente dall'elemento section)
-   1.3 Gerbilli della Mongolia (definita implicitamente dall'elemento h3, che allo stesso tempo chiude la sezione precedente)
-   1.4 Rettili (definita implicitamente dall'elemento h2, che allo stesso tempo chiude la sezione precedente)
-
-

Questa non è la struttura che ci si potrebbe aspettare dopo un rapido sguardo alle intestazioni. Per rendere il vostro markup comprensibile all'uomo, è una buona pratica usare sezioni esplicite, e far combaciare il grado dell'intestazione con il livello di nidificazione previsto. Tuttavia, ciò non è richiesto dalla specifica HTML5. Se si riscontra che i browser rendono la struttura del vostro documento in modi inaspettati, verificare se alcune sezioni vengono chiuse implicitamente dagli elementi di intestazione.

-

Un'eccezione alla regola empirica che il grado dell'intestazione deve corrispondere al livello di nidificazione della sezione avviene per le sezioni che vengono riutilizzate in più documenti. Per esempio, una sezione potrebbe essere memorizzata in un sistema di gestione dei contenuti ed inserita nel documento in fase di runtime. In questo caso, una buona pratica è partire sempre da un elemento {{HTMLElement("h1")}} per la prima intestazione della sezione. Il livello di nidificazione della sezione riutilizzabile sarà determinato dalla struttura del documento in cui appare. I tag di sezione esplicita sono comunque utili in questi casi.

-

Sovrascrivere il Sezionamento Implicito

-

A volte, una sezione ha bisogno di avere più intestazioni. Alcuni casi comuni sono:

-
    -
  • una sezione su un libro o un film, che ha un titolo secondario: - 
    <section>
-  <h1>Justine</h1>
-  <h2>Les Malheurs de la vertu</h2>
-</section>
    -

    genera la seguente struttura:

    - 
    1. Justine
-   1.1 Les Malheurs de la vertu
-
    -
    • -
  • un elenco di tag: - 
    <section>
-  <h1>Strutture e Schemi di un documento</h1>
-  <h2>HTML, HTML5, Sezioni, Schemi</h2>
-</section>
    -

    genera la seguente struttura:

    - 
    1. Strutture e schemi di un documento
-   1.1 HTML, HTML5, Sezioni, Schemi
    -
    • -
-

A causa del sezionamento implicito, questo non è possibile senza l'aiuto dell'Elemento HTML di Raggruppamento delle Intestazioni ( {{HTMLElement("hgroup")}} ) introdotto da HTML5. Esso "nasconde" tutte le intestazioni dalla struttura, eccetto la prima, consentendo di evitare il sezionamento implicito. Grazie a questo elemento l'esempio del libro secondario:

-
<section>
-  <hgroup>
-    <h1>Justine</h1>
-    <h2>Les Malheurs de la vertu</h2>
-  </hgroup>
-  ... Contenuti ...
-</section>
-
-

genera la seguente struttura:

-
1. Justine
-

Sezioni "root"

-

Una sezione "root" (radice) è un elemento HTML che può avere una propria struttura, ma le sezioni ed intestazioni interne ad esso non interferiscono con la struttura del suo contenitore. Oltre al {{HTMLElement("body")}} che è la sezione "root" logica di un documento, le sezioni root sono spesso elementi che aggiungono contenuto esterno alla pagina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} e {{HTMLElement("td")}}.

-

Esempio:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <section>
-    <h2>Introduzione</h2>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-       Vediamo cosa dicono gli scienziati in "<cite>Gli elefanti delle foreste nel Borneo</cite>":
-    <blockquote>
-       <h1>Borneo
-       <p>L'elemento foresta vive nel Borneo...
-    </blockquote>
-  </section>
-</section>
-
-

Questo esempio genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Introduzione
-   1.2 Habitat
-

La struttura principale non contiene la struttura interna dell'elemento {{HTMLElement("blockquote")}}, che, trattandosi di una citazione esterna, è un elemento di sezione "root", perciò la sua struttura interna viene isolata.

-

Sezioni oltre la struttura

-

HTML5 introduce quattro nuovi elementi che permettono di definire sezioni che non fanno parte della struttura principale del documento:

-
    -
  1. L'Elemento HTML di Sezione Aside ( {{HTMLElement("aside")}} ) definisce una sezione che, anche se correlata all'elemento principale, non appartiene al flusso principale, come un box di approfondimento o una pubblicità. Ha la sua propria struttura, ma non appartiene a quella principale.
    2. -
  2. L'Elemento HTML di Sezione Navigazione ( {{HTMLElement("nav")}} ) definisce una sezione che contiene i link di navigazione. In un documento possono essere presenti molti elementi di navigazione, ad esempio: uno con i link interni alla pagina, come le tabelle dei contenuti, e un altro con i link di navigazione del sito. Questi links non fanno parte del flusso o della struttura principale e generalmente il loro rendering viene eseguito per ultimo dagli screen readers e da tecnologie assistive simili.
    3. -
  3. L'Elemento HTML di Sezione Header ( {{HTMLElement("header")}} ) definisce la testata di una pagina, che generalmente contiene il logo e il nome del sito, occasionalmente una barra di navigazione. A dispetto del nome, non viene necessariamente posizionato all'inizio del documento.
    4. -
  4. L'Elemento HTML di Sezione Footer ( {{HTMLElement("footer")}} ) definisce il piè di pagina, che generalmente contiene il copyright, le informazioni legali ed a volte altri links. A dispetto del nome, non viene necessariamente posizionato alla fine del documento.
    5. -
-

Indirizzi e data di pubblicazione negli elementi di sezionamento

-

L'autore di un documento spesso vuole pubblicare alcune informazioni personali, come nome e indirizzo dell'autore. HTML4 lo permetteva tramite l'elemento {{HTMLElement("address")}}, che è stato esteso in HTML5.

-

Un documento può essere fatto di diverse sezioni scritte da diversi autori. Una sezione curata da un autore diverso rispetto alla sezione principale può essere definita da un elemento {{HTMLElement("article")}}. Di conseguenza, l'elemento {{HTMLElement("address")}} è ora riferito al più vicino tra gli elementi {{HTMLElement("body")}} e {{HTMLElement("article")}} che lo contengono.

-

In modo simile, il nuovo elemento {{HTMLElement("time")}}, con il suo set di attributi {{htmlattrxref("pubdate", "time")}}, rappresenta la data di pubblicazione di tutto il documento, rispettivamente all'articolo, legato al più vicino contenitore {{HTMLElement("body")}} o {{HTMLElement("article")}}.

-

Usare Elementi HTML5 nei Browser Non-HTML5

-

Sezioni ed intestazioni dovrebbero funzionare nella maggior parte dei browser non-HTML5-compatibili. Anche se non supportati, non necessitano di una interfaccia DOM specifica ma solo di uno stile CSS dedicato, perché agli elementi sconosciuti viene assegnato display:inline di default:

-
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
-

Naturalmente lo sviluppatore può assegnargli uno stile differente, ma tenendo a mente che nei browser non compatibili con HTML5 il rendering di default è diverso da quel che ci si potrebbe aspettare. Notare che l'elemento {{HTMLElement("time")}} non è stato incluso di proposito, perché in questo caso il rendering di default dei browser non-HTML5-compatibili corrisponde a quello previsto.

-

Questo metodo però ha delle limitazioni, perché alcuni browser non permettono di applicare stili CSS agli elementi non supportati. È il caso di Internet Explorer (versione 8 e precedenti), che necessita di uno script per abilitare il rendering di tali elementi:

-
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header");
-    document.createElement("footer");
-    document.createElement("section");
-    document.createElement("aside");
-
-    document.createElement("nav");
-    document.createElement("article");
-    document.createElement("hgroup");
-    document.createElement("time");
-  </script>
-<![endif]-->
-

Questo significa che, in caso di Internet Explorer (8 e precedenti), javascript deve essere abilitato affinché gli elementi HTML vengano visualizzati correttamente. Altrimenti essi non verranno visualizzati (o verranno visualizzati senza stili applicati NdT), il che potrebbe rivelarsi problematico, dato che si tratta di elementi che definiscono la struttura dell'intera pagina. Ecco perché un elemento {{HTMLElement("noscript")}} dovrebbe essere aggiunto per questi casi specifici, come nell'esempio di seguito:

-
<noscript>
-   <strong>Attenzione !</strong>
-   Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript.
-   Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina.
-</noscript>
-

Ciò ci porta al seguente codice per permettere il supporto delle sezioni e delle intestazioni HTML5 nei browser non-HTML5, anche nel caso di Internet Explorer (8 e precedenti), con un fallback adeguato nel caso in il browser non permetta l'esecuzione di javascript:

-
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header");
-    document.createElement("footer");
-    document.createElement("section");
-    document.createElement("aside");
-    document.createElement("nav");
-    document.createElement("article");
-    document.createElement("hgroup");
-    document.createElement("time");
-  </script>
-  <noscript>
-   <strong>Attenzione !</strong>
-   Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript.
-   Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina.
-</noscript>
-<![endif]-->
-

Conclusioni

-

Le nuove sezioni e intestazioni introdotte in HTML5 danno agli sviluppatori la capacità di descrivere la struttura di un documento web in maniera standard. Portano un grande vantaggio per le persone che hanno browser supportanti HTML5 e che hanno bisogno della struttura per comprendere la pagina, per esempio le le persone che necessitano l'aiuto di una tecnologia assistiva. I nuovi elementi semantici sono semplici da usare e, con pochi aggiustamenti, funzionano anche nei browser non-HTML5. Pertanto possono essere utilizzati senza restrizioni.

-
- {{HTML5ArticleTOC()}}
diff --git a/files/it/web/html/using_the_application_cache/index.html b/files/it/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..2c35bbaeae --- /dev/null +++ b/files/it/web/html/using_the_application_cache/index.html @@ -0,0 +1,383 @@ +--- +title: Utilizzare l'application cache +slug: Web/HTML/utilizzare_application_cache +translation_of: Web/HTML/Using_the_application_cache +--- +

Introduzione

+ +

HTML5 possiede un meccanismo di application caching che permette alle applicazioni web-based di funzionare anche offline. Gli sviluppatori possono utilizzare l'interfaccia Application Cache (AppCache)  per specificare le risorse che il browser deve memorizzare nella cache e rendere disponibili per gli utenti offline. Le applicazioni in cache si caricano e funzionano correttamente anche se gli utenti cliccano sul tasto refresh del browser quando sono offline.

+ +

L'uso dell'application cache fornisce all'applicazione i seguenti benefici:

+ +
    +
  • Navigazione offline: gli utenti possono navigare un sito anche se sono offline.
    • +
  • Velocità: le risorse sono memorizzate in locale, quindi si caricano più velocemente.
    • +
  • Riduzione del carico server: il browser scarica dal server solo le risorse che sono state modificate.
    • +
+ +

Come funziona l'application cache

+ +

Abilitare l'application cache

+ +

Per abilitare l'application cache per un'applicazione, è necessario includere l'attributo {{htmlattrxref("manifest", "html")}} nell'elemento {{HTMLElement("html")}} delle pagine della tua applicazione, come mostrato nel seguente esempio:

+ +
+
<html manifest="example.appcache">
+  ...
+</html>
+
+
+ +

L'attributo manifest fa riferimento ad un cache manifest, un file di testo che elenca tutte le risorse (files) che il browser deve memorizzare per la tua applicazione.

+ +

Bisogna includere l'attributo manifest in tutte le pagine dell'applicazione che vuoi memorizzare nella cache, il browser non memorizza le pagine che non contengono l'attributo manifest, a meno che tali pagine siano esplicitamente elencate nel file manifest stesso. Non c'è bisogno di elencare nel cache manifest tutte le pagine che si vogliono memorizzare nella cache, il browser implicitamente aggiunge ogni pagina che l'utente visita e che ha l'attributo manifest settato sull'application cache.

+ +

Alcuni browser (es. Firefox) mostrano una barra di notifica la prima volta che un utente carica un'applicazione che usa l'application cache. La barra di notifica mostra un messaggio tipo:

+ +

Questo sito web (www.example.com) richiede di salvare dati sul computer per l'utilizzo non in linea. [Permetti] [Mai per questo sito] [Non adesso]

+ +

Il termine "offline(-enabled) applications" qualche volta fa riferimento alle applicazioni che l'utente ha esplicitamente abilitato ad utilizzare le capacità offline.

+ +

Caricare documenti

+ +

L'uso dell'application cache modifica il normale processo di caricamento del documento:

+ +
    +
  • Se esiste un'application cache, il browser carica il documento e le sue risorse associate direttamente dalla cache, senza accedere alla rete. Ciò velocizza il tempo di caricamento del documento.
    • +
  • Il browser quindi controlla se il cache manifest è stato aggiornato sul server.
    • +
  • Se il cache manifest è stato aggiornato, il browser scarica la nuova versione e le risorse elencate. Quest'operazione viene eseguita in background e non influenza la performance significativamente.
    • +
+ +

Il processo di caricamento del documento ed aggiornamento dell'application cache è specificato in maggior dettaglio qui sotto:

+ +
    +
  1. Quando il browser visita un documento che include l'attributo manifest, se non esiste un application cache, il browser carica il documento e poi va a prendere tutte le risorse elencate nel file manifest, creando la prima versione dell'application cache.
    2. +
  2. Nelle visite successive, il browser preleverà il documento e tutte le risorse specificate nel file manifest direttamente dall'applcation cache (non dal server). In più, il browser invia un evento checking all'oggetto window.applicationCache e processa il file manifest, seguendo le appropriate regole di chaching HTTP.
    3. +
  3. Se la copia attualmente memorizzata del manifest è aggiornata, il browser invia un evento noupdate all'oggetto applicationCache, ed il processo di aggiornamento è completo. Da notare che se viene modificata una qualsiasi delle risorse sul server, bisogna modificare anche il file manifest, in maniera tale che il browser sappia che ha bisogno di processare tutte le risorse nuovamente.
    4. +
  4. Se il file manifest è stato modificato, tutti i file elencati in esso - così come quelli aggiunti alla cache utilizzando applicationCache.add() - sono aggiunti ad una cache temporanea, seguendo le appropriate regole di caching HTTP. Per ogni file memorizzato in questa cache temporanea, il browser invia un evento progress all'oggetto applicationCache. In caso di errore, il browser invia un evento error e blocca l'aggiornamento dell'application cache.
    5. +
  5. Una volta che tutti i files sono stati recuperati con successo, vengono automaticamente spostati nella vera cache offline, e viene inviato un evento cached all'oggetto applicationCache. Dato che il documento è stato già caricato nel browser prelevandolo dalla cache, il documento aggiornato non sarà renderizzato finchè non viene ricaricato (manualmente o attraverso la programmazione).
    6. +
+ +

Percorso di memorizzazione e cancellazione della cache offline

+ +

Su Chrome è possibile cancellare la cache offline sia selezionando  "Clear browsing data..." dalle preferenze, oppure visitando  chrome://appcache-internals/. Safari ha una voce "Svuota cache" simile nelle sue preferenze, ma potrebbe essere necessario riavviare il browser.

+ +

Su Firefox, i dati della cache offline vengono memorizzati separatamente dal profilo Firefox — insieme ai dati degli altri programmi installati:

+ +
    +
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • +
  • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache
    • +
+ +

Su Firefox è possibile ispezionare lo stato della cache offline sulla pagina about:cache (box "Offline cache device"). La cache offline può essere cancellata separatamente per ogni sito utilizzando il tasto "Rimuovi..." presente in:
+ Firefox -> Opzioni -> Avanzate -> Rete -> Dati non in linea e informazioni utente.

+ +

Nelle versioni precedenti a Firefox 11, l'application cache non poteva essere cancellata utilizzando
+ Tools -> Clear Recent History
+ oppure
+ Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now Questo bug è stato fixato nelle versioni successive.

+ +

Vedi anche clearing the DOM Storage data.

+ +

Le application cache possono anche diventare obsolete. Se il un file manifest dell'applicazione viene rimosso dal server, il browser rimuove tutte le application cache che utilizzano quel manifest ed invia un evento "obsoleted" all'oggetto applicationCache. Questo imposta lo stato dell'application cache su OBSOLETE.

+ +

Il file cache manifest

+ +

Includere un file cache manifest

+ +

L'attributo manifest in un'applicazione web può specificare sia il percorso relativo di un file cache manifest che un URL assoluto (gli URL assoluti devono provenire dalla stessa origine dell'applicazione). Un file cache manifest può avere diverse estensioni, ma come MIME type deve avere text/cache-manifest.

+ +
Nota: Sui server Apache, il MIME type per i file manifest (.appcache) può essere impostato aggiungendo AddType text/cache-manifest .appcache ad un file .htaccess posizionato nella cartella root, oppure nella stessa cartella dell'applicazione.
+ +

Le voci in un file cache manifest

+ +

Il cache manifest è un semplice file di testo che elenca le risorse che il browser deve memorizzare per l'accesso offline. Le risorse sono identificate da un URI. Le voci elencate nel cache manifest devono avere lo stesso schema, host e porta come nel manifest.

+ +

Esempio 1: un semplice cache manifest

+ +

Il seguente è un semplice file di cache manifest, example.appcache, per un ipotetico sito web all'indirizzo www.example.com.

+ +
CACHE MANIFEST
+# v1 - 2011-08-13
+# This is a comment.
+http://www.example.com/index.html
+http://www.example.com/header.png
+http://www.example.com/blah/blah
+
+ +

Un file cache manifest può includere 3 sezioni (CACHE, NETWORK, e FALLBACK, verranno discusse in seguito). Nell'esempio qui sopra, non c'è una sezione header, quindi si assume che tutte le risorse siano elencate nell'esplicita sezione (CACHE), intendendo che il browser deve memorizzare nell'application cache tutte le risorse elencate. Le risorse possono essere specificate utilizzando sia URL assoluti che relativi (es. index.html).

+ +

Il commento "v1" si trova lì per una buona ragione. I browser aggiornano  l'application cache solo se il file manifest viene modificato. Se una risorsa presente nella cache viene modificata (per esempio, viene aggiornata l'immagine header.png con un nuovo contenuto), bisogna anche cambiare il contenuto del file manifest per permettere ai browser di sapere che c'è bisogno di refreshare la cache. Si può effettuare qualsiasi modifica al file manifest, ma la best practice è modificare il numero di versione.

+ +
Importante: Non includere mai il cache manifest tra le voci del file stesso, altrimenti verrà sempre prelevato dalla cache locale e sarà quasi impossibile informare il browser che un nuovo manifest è disponibile sul server.
+ +

Le sezioni di un file cache manifest: CACHE, NETWORK, e FALLBACK

+ +

Un manifest può avere 3 sezioni distine: CACHE, NETWORK, e FALLBACK.

+ +
+
CACHE:
+
Questa è la sezione di default per le voci in un cache manifest. I files elencati sotto l'header della sezione CACHE: (oppure subito dopo la riga CACHE MANIFEST) sono esplicitamente memorizzati nella cache dopo che vengono scaricati per la prima volta.
+
NETWORK:
+
I files elencati sotto l'header della sezione NETWORK: sono risorse inserite in una white-list che richiedono una connessione al server. Tutte le richieste a queste risorse bypassano la cache, anche se l'utente è offline. È possibile utilizzare wildcards.
+
FALLBACK:
+
Nella sezione FALLBACK: vengono specificate le pagine alternative che il browser deve utilizzare nel caso una risorsa non sia accessibile. Ogni voce in questa sezione è composta da 2 URI - il primo è la risorsa, il secondo il fallback. Entrambi gli URI devono essere relativi e provenienti dalla stessa origine del file manifest. È possibile utilizzare wildcards.
+
+ +

Le sezioni CACHE, NETWORK, e FALLBACK possono essere elencate in qualsiasi ordine, ogni sezione può apparire più volte nello stesso cache manifest.

+ +

Example 2: un cache manifest più completo

+ +

Il seguente è un esempio più completo di un cache manifest per un ipotetico sito web all'indirizzo www.example.com.

+ +
CACHE MANIFEST
+# v1 2011-08-14
+# This is another comment
+index.html
+cache.html
+style.css
+image1.png
+
+# Use from network if available
+NETWORK:
+network.html
+
+# Fallback content
+FALLBACK:
+/ fallback.html
+
+ +

Questo esempio utilizza le sezioni  NETWORK e FALLBACK per specificare che la pagina network.html deve essere sempre prelevata dalla rete e che la pagina fallback.html deve essere servita nel caso una risorsa non sia disponibile (es. nel caso sia impossibile stabilire una connessione col server).

+ +

Struttura di un file cache manifest

+ +

Un cache manifest deve essere servito con il MIME type text/cache-manifest. Tutte le risorse servite utilizzando questo MIME type devono seguire la sintassi per l'application cache manifest, come definito in questa sezione.

+ +

I cache manifest sono file di testo in formato UTF-8 e possono opzionalmente contenere un carattere BOM. Gli a capo possono essere rappresentati dal line feed (U+000A), dal carriage return (U+000D), o da entrambi i caratteri.

+ +

La prima riga del cache manifest deve obbligatoriamente essere la stringa CACHE MANIFEST (con un singolo spazio U+0020 tra le due parole), seguita da zero o pià caratteri di tabulazione. Qualsiasi altro testo su questa riga verrà ignorato.

+ +

Il resto del manifesto cache deve essere composto da zero o più delle seguenti righe:

+ +
+
Righe vuote
+
È possibile utilizzare righe vuote composte da zero o più spazi e/o caratteri di tabulazione (tab).
+
Commenti
+
I commenti consistono in zero o più tab e/o spazi seguiti da un singolo carattere #, seguito da zero o più caratteri che compongono il testo del commento. Ogni riga di commento deve essere composta in questa maniera, non esiste una coppia di delimitatori inizio/fine per wrappare intere porzioni di codice.
+
Header della sezione
+
Gli header di sezione specificano quale sezione del cache manifest stiamo per manipolare. Ci sono 3 possibili tipi di header:
+
+ +
+ + + + + + + + + + + + + + + + + + + +
Header di sezioneDescrizione
CACHE:Sezione che definisce quali risorse memorizzare nella cache (questa è la sezione di default, se l'header non è specificato).
NETWORK:Sezione che definisce quali risorse devono essere sempre scaricate dalla rete.
FALLBACK:Sezione che definisce dei fallback nel caso una risorsa risulti non disponibile.
+
+ +
+
L'header di sezione può includere spazi, ma deve includere i due punti (:) nel nome della sezione.
+
dati della sezione
+
Il formato per le righe di dati varia da sezione a sezione. In quella esplicita (CACHE:), ogni riga è un riferimento URI o IRI valido ad una risorsa da memorizzare nella cache (non è possibile utilizzare caretteri jolly in queste sezioni). Si possono inserire spazi vuoti prima o dopo l'URI o l'IRI. Nella sezione di fallback ogni riga è un riferimento URI o IRI valido ad una risorsa, seguito dalla risorsa di fallback che deve essere servita qualndo non si può stabilire una connessione col server. nella sezione network, ogni riga è un riferimento URI o IRI valido ad una risorsa da prelevare dalla rete. (In questa sezione è consentito utilizzare il carattere jolly *). +
Note: Gli URI relativi sono relativi all'URI del cache manifest, non all'URI del documento che fa riferimento al cache manifest.
+
+
+ +

I file cache manifest possono passare da una sezione all'altra a piacimento (ogni header di sezione può essere utilizzato più di una volta), le sezioni possono anche essere vuote.

+ +

Risorse nell'application cache

+ +

Un application cache include sempre almeno una risorsa, identificata da un URI. Tutte le risorse rientrano in una delle seguenti categorie:

+ +
+
Master entries
+
Queste risorse sono aggiunte alla cache perchè sono legate ad una pagina che includeva l'attributo  manifest.
+
Explicit entries
+
Le risorse esplicitamente indicate nel cache manifest.
+
Network entries
+
Le risorse elencate nel file manifest dell'application cache che devono essere sempre recuperate dalla rete.
+
Fallback entries
+
Le risorse elencate nel file manifest che devono essere utilizzate come alternativa ad una risorsa non raggiungibile.
+
+ +
Note: Una risorsa può rientrare in più categorie, per esempio può apparire sia nella sezione esplicita che in quella di fallback.
+ +

Le categorie di risorse sono descritte in dettaglio qui di seguito.

+ +

Master entries

+ +

Le master entries sono un qualsiasi file HTML che include l'attributo {{htmlattrxref("manifest","html")}} nell'elemento {{HTMLElement("html")}}. Per esempio, diciamo che abbiamo il file HTML http://www.example.com/entry.html, composto in questa maniera:

+ +
<html manifest="example.appcache">
+  <h1>Application Cache Example</h1>
+</html>
+
+ +

se entry.html non è elencato nel file cache manifest example.appcache, basta visitare la pagina per farla aggiungere all'application cache in qualità di master entry.

+ +

Explicit entries

+ +

Le Explicit entries sono le risorse esplicitamente elencate in una sezione CACHE del file cache manifest.

+ +

Network entries

+ +

La sezione NETWORK di un cache manifest, specifica le risorse dell'applicazione web che richiedono l'accesso online. Queste voci sono essenzialmente una "online whitelist" — le URI specificate nella sezione NETWORK sono sempre caricate dal server invece che dalla cache. In questo modo il modello di sicurezza del browser protegge l'utente da potenziali falle di sicurezza limitando l'accesso alle risorse approvate.

+ +

Per esempio, si può utilizzare la lista delle risorse network per caricare ed eseguire script ed altro codice dal server invece che dalla cache:

+ +
CACHE MANIFEST
+NETWORK:
+/api
+
+ +

La sezione del cache manifest mostrata qui sopra assicura che tutte le richieste di files contenuti nella sottocartella http://www.example.com/api/ vengano sempre caricate dalla rete senza accedere alla cache.

+ +
Note: Omettere semplicemente le master entries (i files che contengono l'attributo manifest nell'elemento html) dal file manifest potrebbe non avere lo stesso risultato, perchè le master entries sarebbero scaricate solo la prima volta dalla rete, per poi essere aggiunte e prelevate dalla cache ai successivi accessi.
+ +

Fallback entries

+ +

Fallback entries sono utilizzate quando fallisce il tentativo di caricare una risorsa. Per esempio, diciamo che il cache manifest http://www.example.com/example.appcache includa il seguente contenuto:

+ +
CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+
+ +

Qualsiasi richiesta a http://www.example.com/example/bar/ o a una qualsiasi delle sue sottocartelle ed il loro contenuto fa partire una richiesta newtwork per caricare la risorsa richiesta. Se il tentativo fallisce, a causa della connessione o di un qualsiasi errore del server, il browser carica il file example.html al suo posto.

+ +

Stati della cache

+ +

Ogni application cache possiede uno stato, che indica la condizione corrente della cache. Le cache che condividono la stessa URI per il manifest, condividono anche lo stesso stato della cache, che può essere uno dei seguenti:

+ +
+
UNCACHED
+
Un valore speciale che indica che l'oggetto application cache non è inizializzato completamente.
+
IDLE
+
L'application cache non è attualmente in fase di aggiornamento.
+
CHECKING
+
Il manifest è in fase di prelievo e controllo aggiornamenti.
+
DOWNLOADING
+
Le risorse sono in fase di scaricamento per essere aggiunte alla cache, a causa di una risorsa modificata nel manifest.
+
UPDATEREADY
+
C'è una nuova versione dell'application cache disponibile. C'è un evento corrispondente updateready, che è lanciato al posto dell'evento cached quando un nuovo aggiornamento è stato scaricato ma non ancora attivato tramite il metodo swapCache().
+
OBSOLETE
+
Il gruppo application cache è obsoleto.
+
+ +

Controllare gli aggiornamenti per il cache manifest

+ +

Si può effettuare, attraverso JavaScript, un test per vedere se un'applicazione ha il cache manifest aggiornato. Dato che un cache manifest può essere stato aggiornato prima che uno script venga caricato ed attacchi un event listener per controllare gli aggiornamenti, gli script devono sempre utilizzare il test window.applicationCache.status.

+ +
function onUpdateReady() {
+  alert('found new version!');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}
+ +

Per testare manualmente un nuovo file manifest, è possibile utilizzare window.applicationCache.update().

+ +

Trappole da evitare (aka Gotchas)

+ +
    +
  • Non accedere mai ai file nella cache utilizzando i parametri tradizionali della  GET (es. other-cached-page.html?parameterName=value). In questo modo il browser ignorerà la cache e andrà a prendere il file dalla rete. Per linkare risorse nella cache che hanno parametri parsati in Javascript, utilizzare i parametri dopo l'hash (#), come per esempio: other-cached-page.html#whatever?parameterName=value.
    • +
  • Quando le applicazioni sono memorizzate nella cache, non è sufficiente aggiornare i files nella cache che sono utilizzati nella pagina web per aggiornarli. E' necessario aggiornare anche il file cache manifest stesso prima che il browser prelevi ed utilizzi i files aggiornati. Si può fare tramite programmazione utilizzando  window.applicationCache.swapCache(), anche se le risorse che sono state già caricate non saranno interessate. Per assicurarsi che le risorse vengono caricate da una nuova versione della cache dell'applicazione, ricaricare la pagina è l'ideale.
    • +
  • Una buona prassi è quella di settare gli expires headers sul tuo web server per far sì che i files *.appcache scadano immediatamente. Questo evita il rischio di inserire nella cache il cache manifest stesso. Per esempio, su Apache è possibile impostare questo comportamento nella seguente:
    + ExpiresByType text/cache-manifest "access plus 0 seconds"
    • +
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.03.510.010.64.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatNo}}11.03.2
+
+ +

Nota: Le versioni di Firefox precedenti alla 3.5 ignorano le sezioni NETWORK e FALLBACK del file cache manifest.

+ +

Vedi anche

+ + + +
{{HTML5ArticleTOC}}
diff --git a/files/it/web/html/utilizzare_application_cache/index.html b/files/it/web/html/utilizzare_application_cache/index.html deleted file mode 100644 index 2c35bbaeae..0000000000 --- a/files/it/web/html/utilizzare_application_cache/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: Utilizzare l'application cache -slug: Web/HTML/utilizzare_application_cache -translation_of: Web/HTML/Using_the_application_cache ---- -

Introduzione

- -

HTML5 possiede un meccanismo di application caching che permette alle applicazioni web-based di funzionare anche offline. Gli sviluppatori possono utilizzare l'interfaccia Application Cache (AppCache)  per specificare le risorse che il browser deve memorizzare nella cache e rendere disponibili per gli utenti offline. Le applicazioni in cache si caricano e funzionano correttamente anche se gli utenti cliccano sul tasto refresh del browser quando sono offline.

- -

L'uso dell'application cache fornisce all'applicazione i seguenti benefici:

- -
    -
  • Navigazione offline: gli utenti possono navigare un sito anche se sono offline.
    • -
  • Velocità: le risorse sono memorizzate in locale, quindi si caricano più velocemente.
    • -
  • Riduzione del carico server: il browser scarica dal server solo le risorse che sono state modificate.
    • -
- -

Come funziona l'application cache

- -

Abilitare l'application cache

- -

Per abilitare l'application cache per un'applicazione, è necessario includere l'attributo {{htmlattrxref("manifest", "html")}} nell'elemento {{HTMLElement("html")}} delle pagine della tua applicazione, come mostrato nel seguente esempio:

- -
-
<html manifest="example.appcache">
-  ...
-</html>
-
-
- -

L'attributo manifest fa riferimento ad un cache manifest, un file di testo che elenca tutte le risorse (files) che il browser deve memorizzare per la tua applicazione.

- -

Bisogna includere l'attributo manifest in tutte le pagine dell'applicazione che vuoi memorizzare nella cache, il browser non memorizza le pagine che non contengono l'attributo manifest, a meno che tali pagine siano esplicitamente elencate nel file manifest stesso. Non c'è bisogno di elencare nel cache manifest tutte le pagine che si vogliono memorizzare nella cache, il browser implicitamente aggiunge ogni pagina che l'utente visita e che ha l'attributo manifest settato sull'application cache.

- -

Alcuni browser (es. Firefox) mostrano una barra di notifica la prima volta che un utente carica un'applicazione che usa l'application cache. La barra di notifica mostra un messaggio tipo:

- -

Questo sito web (www.example.com) richiede di salvare dati sul computer per l'utilizzo non in linea. [Permetti] [Mai per questo sito] [Non adesso]

- -

Il termine "offline(-enabled) applications" qualche volta fa riferimento alle applicazioni che l'utente ha esplicitamente abilitato ad utilizzare le capacità offline.

- -

Caricare documenti

- -

L'uso dell'application cache modifica il normale processo di caricamento del documento:

- -
    -
  • Se esiste un'application cache, il browser carica il documento e le sue risorse associate direttamente dalla cache, senza accedere alla rete. Ciò velocizza il tempo di caricamento del documento.
    • -
  • Il browser quindi controlla se il cache manifest è stato aggiornato sul server.
    • -
  • Se il cache manifest è stato aggiornato, il browser scarica la nuova versione e le risorse elencate. Quest'operazione viene eseguita in background e non influenza la performance significativamente.
    • -
- -

Il processo di caricamento del documento ed aggiornamento dell'application cache è specificato in maggior dettaglio qui sotto:

- -
    -
  1. Quando il browser visita un documento che include l'attributo manifest, se non esiste un application cache, il browser carica il documento e poi va a prendere tutte le risorse elencate nel file manifest, creando la prima versione dell'application cache.
    2. -
  2. Nelle visite successive, il browser preleverà il documento e tutte le risorse specificate nel file manifest direttamente dall'applcation cache (non dal server). In più, il browser invia un evento checking all'oggetto window.applicationCache e processa il file manifest, seguendo le appropriate regole di chaching HTTP.
    3. -
  3. Se la copia attualmente memorizzata del manifest è aggiornata, il browser invia un evento noupdate all'oggetto applicationCache, ed il processo di aggiornamento è completo. Da notare che se viene modificata una qualsiasi delle risorse sul server, bisogna modificare anche il file manifest, in maniera tale che il browser sappia che ha bisogno di processare tutte le risorse nuovamente.
    4. -
  4. Se il file manifest è stato modificato, tutti i file elencati in esso - così come quelli aggiunti alla cache utilizzando applicationCache.add() - sono aggiunti ad una cache temporanea, seguendo le appropriate regole di caching HTTP. Per ogni file memorizzato in questa cache temporanea, il browser invia un evento progress all'oggetto applicationCache. In caso di errore, il browser invia un evento error e blocca l'aggiornamento dell'application cache.
    5. -
  5. Una volta che tutti i files sono stati recuperati con successo, vengono automaticamente spostati nella vera cache offline, e viene inviato un evento cached all'oggetto applicationCache. Dato che il documento è stato già caricato nel browser prelevandolo dalla cache, il documento aggiornato non sarà renderizzato finchè non viene ricaricato (manualmente o attraverso la programmazione).
    6. -
- -

Percorso di memorizzazione e cancellazione della cache offline

- -

Su Chrome è possibile cancellare la cache offline sia selezionando  "Clear browsing data..." dalle preferenze, oppure visitando  chrome://appcache-internals/. Safari ha una voce "Svuota cache" simile nelle sue preferenze, ma potrebbe essere necessario riavviare il browser.

- -

Su Firefox, i dati della cache offline vengono memorizzati separatamente dal profilo Firefox — insieme ai dati degli altri programmi installati:

- -
    -
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • -
  • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache
    • -
- -

Su Firefox è possibile ispezionare lo stato della cache offline sulla pagina about:cache (box "Offline cache device"). La cache offline può essere cancellata separatamente per ogni sito utilizzando il tasto "Rimuovi..." presente in:
- Firefox -> Opzioni -> Avanzate -> Rete -> Dati non in linea e informazioni utente.

- -

Nelle versioni precedenti a Firefox 11, l'application cache non poteva essere cancellata utilizzando
- Tools -> Clear Recent History
- oppure
- Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now Questo bug è stato fixato nelle versioni successive.

- -

Vedi anche clearing the DOM Storage data.

- -

Le application cache possono anche diventare obsolete. Se il un file manifest dell'applicazione viene rimosso dal server, il browser rimuove tutte le application cache che utilizzano quel manifest ed invia un evento "obsoleted" all'oggetto applicationCache. Questo imposta lo stato dell'application cache su OBSOLETE.

- -

Il file cache manifest

- -

Includere un file cache manifest

- -

L'attributo manifest in un'applicazione web può specificare sia il percorso relativo di un file cache manifest che un URL assoluto (gli URL assoluti devono provenire dalla stessa origine dell'applicazione). Un file cache manifest può avere diverse estensioni, ma come MIME type deve avere text/cache-manifest.

- -
Nota: Sui server Apache, il MIME type per i file manifest (.appcache) può essere impostato aggiungendo AddType text/cache-manifest .appcache ad un file .htaccess posizionato nella cartella root, oppure nella stessa cartella dell'applicazione.
- -

Le voci in un file cache manifest

- -

Il cache manifest è un semplice file di testo che elenca le risorse che il browser deve memorizzare per l'accesso offline. Le risorse sono identificate da un URI. Le voci elencate nel cache manifest devono avere lo stesso schema, host e porta come nel manifest.

- -

Esempio 1: un semplice cache manifest

- -

Il seguente è un semplice file di cache manifest, example.appcache, per un ipotetico sito web all'indirizzo www.example.com.

- -
CACHE MANIFEST
-# v1 - 2011-08-13
-# This is a comment.
-http://www.example.com/index.html
-http://www.example.com/header.png
-http://www.example.com/blah/blah
-
- -

Un file cache manifest può includere 3 sezioni (CACHE, NETWORK, e FALLBACK, verranno discusse in seguito). Nell'esempio qui sopra, non c'è una sezione header, quindi si assume che tutte le risorse siano elencate nell'esplicita sezione (CACHE), intendendo che il browser deve memorizzare nell'application cache tutte le risorse elencate. Le risorse possono essere specificate utilizzando sia URL assoluti che relativi (es. index.html).

- -

Il commento "v1" si trova lì per una buona ragione. I browser aggiornano  l'application cache solo se il file manifest viene modificato. Se una risorsa presente nella cache viene modificata (per esempio, viene aggiornata l'immagine header.png con un nuovo contenuto), bisogna anche cambiare il contenuto del file manifest per permettere ai browser di sapere che c'è bisogno di refreshare la cache. Si può effettuare qualsiasi modifica al file manifest, ma la best practice è modificare il numero di versione.

- -
Importante: Non includere mai il cache manifest tra le voci del file stesso, altrimenti verrà sempre prelevato dalla cache locale e sarà quasi impossibile informare il browser che un nuovo manifest è disponibile sul server.
- -

Le sezioni di un file cache manifest: CACHE, NETWORK, e FALLBACK

- -

Un manifest può avere 3 sezioni distine: CACHE, NETWORK, e FALLBACK.

- -
-
CACHE:
-
Questa è la sezione di default per le voci in un cache manifest. I files elencati sotto l'header della sezione CACHE: (oppure subito dopo la riga CACHE MANIFEST) sono esplicitamente memorizzati nella cache dopo che vengono scaricati per la prima volta.
-
NETWORK:
-
I files elencati sotto l'header della sezione NETWORK: sono risorse inserite in una white-list che richiedono una connessione al server. Tutte le richieste a queste risorse bypassano la cache, anche se l'utente è offline. È possibile utilizzare wildcards.
-
FALLBACK:
-
Nella sezione FALLBACK: vengono specificate le pagine alternative che il browser deve utilizzare nel caso una risorsa non sia accessibile. Ogni voce in questa sezione è composta da 2 URI - il primo è la risorsa, il secondo il fallback. Entrambi gli URI devono essere relativi e provenienti dalla stessa origine del file manifest. È possibile utilizzare wildcards.
-
- -

Le sezioni CACHE, NETWORK, e FALLBACK possono essere elencate in qualsiasi ordine, ogni sezione può apparire più volte nello stesso cache manifest.

- -

Example 2: un cache manifest più completo

- -

Il seguente è un esempio più completo di un cache manifest per un ipotetico sito web all'indirizzo www.example.com.

- -
CACHE MANIFEST
-# v1 2011-08-14
-# This is another comment
-index.html
-cache.html
-style.css
-image1.png
-
-# Use from network if available
-NETWORK:
-network.html
-
-# Fallback content
-FALLBACK:
-/ fallback.html
-
- -

Questo esempio utilizza le sezioni  NETWORK e FALLBACK per specificare che la pagina network.html deve essere sempre prelevata dalla rete e che la pagina fallback.html deve essere servita nel caso una risorsa non sia disponibile (es. nel caso sia impossibile stabilire una connessione col server).

- -

Struttura di un file cache manifest

- -

Un cache manifest deve essere servito con il MIME type text/cache-manifest. Tutte le risorse servite utilizzando questo MIME type devono seguire la sintassi per l'application cache manifest, come definito in questa sezione.

- -

I cache manifest sono file di testo in formato UTF-8 e possono opzionalmente contenere un carattere BOM. Gli a capo possono essere rappresentati dal line feed (U+000A), dal carriage return (U+000D), o da entrambi i caratteri.

- -

La prima riga del cache manifest deve obbligatoriamente essere la stringa CACHE MANIFEST (con un singolo spazio U+0020 tra le due parole), seguita da zero o pià caratteri di tabulazione. Qualsiasi altro testo su questa riga verrà ignorato.

- -

Il resto del manifesto cache deve essere composto da zero o più delle seguenti righe:

- -
-
Righe vuote
-
È possibile utilizzare righe vuote composte da zero o più spazi e/o caratteri di tabulazione (tab).
-
Commenti
-
I commenti consistono in zero o più tab e/o spazi seguiti da un singolo carattere #, seguito da zero o più caratteri che compongono il testo del commento. Ogni riga di commento deve essere composta in questa maniera, non esiste una coppia di delimitatori inizio/fine per wrappare intere porzioni di codice.
-
Header della sezione
-
Gli header di sezione specificano quale sezione del cache manifest stiamo per manipolare. Ci sono 3 possibili tipi di header:
-
- -
- - - - - - - - - - - - - - - - - - - -
Header di sezioneDescrizione
CACHE:Sezione che definisce quali risorse memorizzare nella cache (questa è la sezione di default, se l'header non è specificato).
NETWORK:Sezione che definisce quali risorse devono essere sempre scaricate dalla rete.
FALLBACK:Sezione che definisce dei fallback nel caso una risorsa risulti non disponibile.
-
- -
-
L'header di sezione può includere spazi, ma deve includere i due punti (:) nel nome della sezione.
-
dati della sezione
-
Il formato per le righe di dati varia da sezione a sezione. In quella esplicita (CACHE:), ogni riga è un riferimento URI o IRI valido ad una risorsa da memorizzare nella cache (non è possibile utilizzare caretteri jolly in queste sezioni). Si possono inserire spazi vuoti prima o dopo l'URI o l'IRI. Nella sezione di fallback ogni riga è un riferimento URI o IRI valido ad una risorsa, seguito dalla risorsa di fallback che deve essere servita qualndo non si può stabilire una connessione col server. nella sezione network, ogni riga è un riferimento URI o IRI valido ad una risorsa da prelevare dalla rete. (In questa sezione è consentito utilizzare il carattere jolly *). -
Note: Gli URI relativi sono relativi all'URI del cache manifest, non all'URI del documento che fa riferimento al cache manifest.
-
-
- -

I file cache manifest possono passare da una sezione all'altra a piacimento (ogni header di sezione può essere utilizzato più di una volta), le sezioni possono anche essere vuote.

- -

Risorse nell'application cache

- -

Un application cache include sempre almeno una risorsa, identificata da un URI. Tutte le risorse rientrano in una delle seguenti categorie:

- -
-
Master entries
-
Queste risorse sono aggiunte alla cache perchè sono legate ad una pagina che includeva l'attributo  manifest.
-
Explicit entries
-
Le risorse esplicitamente indicate nel cache manifest.
-
Network entries
-
Le risorse elencate nel file manifest dell'application cache che devono essere sempre recuperate dalla rete.
-
Fallback entries
-
Le risorse elencate nel file manifest che devono essere utilizzate come alternativa ad una risorsa non raggiungibile.
-
- -
Note: Una risorsa può rientrare in più categorie, per esempio può apparire sia nella sezione esplicita che in quella di fallback.
- -

Le categorie di risorse sono descritte in dettaglio qui di seguito.

- -

Master entries

- -

Le master entries sono un qualsiasi file HTML che include l'attributo {{htmlattrxref("manifest","html")}} nell'elemento {{HTMLElement("html")}}. Per esempio, diciamo che abbiamo il file HTML http://www.example.com/entry.html, composto in questa maniera:

- -
<html manifest="example.appcache">
-  <h1>Application Cache Example</h1>
-</html>
-
- -

se entry.html non è elencato nel file cache manifest example.appcache, basta visitare la pagina per farla aggiungere all'application cache in qualità di master entry.

- -

Explicit entries

- -

Le Explicit entries sono le risorse esplicitamente elencate in una sezione CACHE del file cache manifest.

- -

Network entries

- -

La sezione NETWORK di un cache manifest, specifica le risorse dell'applicazione web che richiedono l'accesso online. Queste voci sono essenzialmente una "online whitelist" — le URI specificate nella sezione NETWORK sono sempre caricate dal server invece che dalla cache. In questo modo il modello di sicurezza del browser protegge l'utente da potenziali falle di sicurezza limitando l'accesso alle risorse approvate.

- -

Per esempio, si può utilizzare la lista delle risorse network per caricare ed eseguire script ed altro codice dal server invece che dalla cache:

- -
CACHE MANIFEST
-NETWORK:
-/api
-
- -

La sezione del cache manifest mostrata qui sopra assicura che tutte le richieste di files contenuti nella sottocartella http://www.example.com/api/ vengano sempre caricate dalla rete senza accedere alla cache.

- -
Note: Omettere semplicemente le master entries (i files che contengono l'attributo manifest nell'elemento html) dal file manifest potrebbe non avere lo stesso risultato, perchè le master entries sarebbero scaricate solo la prima volta dalla rete, per poi essere aggiunte e prelevate dalla cache ai successivi accessi.
- -

Fallback entries

- -

Fallback entries sono utilizzate quando fallisce il tentativo di caricare una risorsa. Per esempio, diciamo che il cache manifest http://www.example.com/example.appcache includa il seguente contenuto:

- -
CACHE MANIFEST
-FALLBACK:
-example/bar/ example.html
-
- -

Qualsiasi richiesta a http://www.example.com/example/bar/ o a una qualsiasi delle sue sottocartelle ed il loro contenuto fa partire una richiesta newtwork per caricare la risorsa richiesta. Se il tentativo fallisce, a causa della connessione o di un qualsiasi errore del server, il browser carica il file example.html al suo posto.

- -

Stati della cache

- -

Ogni application cache possiede uno stato, che indica la condizione corrente della cache. Le cache che condividono la stessa URI per il manifest, condividono anche lo stesso stato della cache, che può essere uno dei seguenti:

- -
-
UNCACHED
-
Un valore speciale che indica che l'oggetto application cache non è inizializzato completamente.
-
IDLE
-
L'application cache non è attualmente in fase di aggiornamento.
-
CHECKING
-
Il manifest è in fase di prelievo e controllo aggiornamenti.
-
DOWNLOADING
-
Le risorse sono in fase di scaricamento per essere aggiunte alla cache, a causa di una risorsa modificata nel manifest.
-
UPDATEREADY
-
C'è una nuova versione dell'application cache disponibile. C'è un evento corrispondente updateready, che è lanciato al posto dell'evento cached quando un nuovo aggiornamento è stato scaricato ma non ancora attivato tramite il metodo swapCache().
-
OBSOLETE
-
Il gruppo application cache è obsoleto.
-
- -

Controllare gli aggiornamenti per il cache manifest

- -

Si può effettuare, attraverso JavaScript, un test per vedere se un'applicazione ha il cache manifest aggiornato. Dato che un cache manifest può essere stato aggiornato prima che uno script venga caricato ed attacchi un event listener per controllare gli aggiornamenti, gli script devono sempre utilizzare il test window.applicationCache.status.

- -
function onUpdateReady() {
-  alert('found new version!');
-}
-window.applicationCache.addEventListener('updateready', onUpdateReady);
-if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
-  onUpdateReady();
-}
- -

Per testare manualmente un nuovo file manifest, è possibile utilizzare window.applicationCache.update().

- -

Trappole da evitare (aka Gotchas)

- -
    -
  • Non accedere mai ai file nella cache utilizzando i parametri tradizionali della  GET (es. other-cached-page.html?parameterName=value). In questo modo il browser ignorerà la cache e andrà a prendere il file dalla rete. Per linkare risorse nella cache che hanno parametri parsati in Javascript, utilizzare i parametri dopo l'hash (#), come per esempio: other-cached-page.html#whatever?parameterName=value.
    • -
  • Quando le applicazioni sono memorizzate nella cache, non è sufficiente aggiornare i files nella cache che sono utilizzati nella pagina web per aggiornarli. E' necessario aggiornare anche il file cache manifest stesso prima che il browser prelevi ed utilizzi i files aggiornati. Si può fare tramite programmazione utilizzando  window.applicationCache.swapCache(), anche se le risorse che sono state già caricate non saranno interessate. Per assicurarsi che le risorse vengono caricate da una nuova versione della cache dell'applicazione, ricaricare la pagina è l'ideale.
    • -
  • Una buona prassi è quella di settare gli expires headers sul tuo web server per far sì che i files *.appcache scadano immediatamente. Questo evita il rischio di inserire nella cache il cache manifest stesso. Per esempio, su Apache è possibile impostare questo comportamento nella seguente:
    - ExpiresByType text/cache-manifest "access plus 0 seconds"
    • -
- -

Compatibilità con i browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.03.510.010.64.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatNo}}11.03.2
-
- -

Nota: Le versioni di Firefox precedenti alla 3.5 ignorano le sezioni NETWORK e FALLBACK del file cache manifest.

- -

Vedi anche

- - - -
{{HTML5ArticleTOC}}
-- cgit v1.2.3-54-g00ecf