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 --- .../index.html | 825 ------------------ .../it/learn/html/forms/form_validation/index.html | 846 ------------------ files/it/learn/html/forms/index.html | 85 -- .../html/howto/use_data_attributes/index.html | 82 ++ .../learn/html/howto/uso_attributi_data/index.html | 82 -- .../fondamenti_di_testo_html/index.html | 953 --------------------- .../html_text_fundamentals/index.html | 953 +++++++++++++++++++++ .../i_metadata_nella_head_in_html/index.html | 265 ------ .../the_head_metadata_in_html/index.html | 265 ++++++ .../contenuti_video_e_audio/index.html | 270 ------ .../immagini_reattive/index.html | 241 ------ .../responsive_images/index.html | 241 ++++++ .../video_and_audio_content/index.html | 270 ++++++ .../scrivi_una_semplice_pagina_in_html/index.html | 277 ------ 14 files changed, 1811 insertions(+), 3844 deletions(-) delete mode 100644 files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html delete mode 100644 files/it/learn/html/forms/form_validation/index.html delete mode 100644 files/it/learn/html/forms/index.html create mode 100644 files/it/learn/html/howto/use_data_attributes/index.html delete mode 100644 files/it/learn/html/howto/uso_attributi_data/index.html delete mode 100644 files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html create mode 100644 files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html delete mode 100644 files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html create mode 100644 files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html delete mode 100644 files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html delete mode 100644 files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html (limited to 'files/it/learn/html') diff --git a/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html deleted file mode 100644 index 288fa8e1c2..0000000000 --- a/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html +++ /dev/null @@ -1,825 +0,0 @@ ---- -title: Come costruire form widget personalizzati -slug: Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
- -

Ci sono molti casi in cui i widget del modulo html disponibili non sono abbastanza. Se vuoi eseguire uno styling avanzato su alcuni widget come l'elemento {{HTMLElement("select")}}  o sei vuoi fornirli di comportamenti personalizzati, l'unica scelta che hai è quella di costruirti il tuo widget personale.

- -

In quest'articolo vedremo come costruire questo tipo di widget. A tal fine lavoreremo con un esempio: ricostruire l'elemento {{HTMLElement("select")}} .

- -
-

Nota: ci concentreremo sulla costruzione del widget, non su come rendere il codice generico e riutilizzabile; questo comporterebbe del codice JavaScript and la manipolazione del DOM in un contesto sconosciuto, uscendo fuori dallo scopo di quest'articolo.

-
- -

Design, strutture, e semantica

- -

Prima di costruire un widget personalizzato, dovresti cominciare a pensare esattamente cosa vuoi. Questo ti aiuterà a evitare perdite di tempo. In particolare, e' importante definire chiaramente tutti gli stati del tuo widget. Per fare ciò, è bene cominciare da un widget esistente che ha stati e comportamenti ben noti.

- -

Nel nostro esempio ricostruiremo l'elemento {{HTMLElement("select")}} . Ecco il risultato che vogliamo raggiungere:

- -

The three states of a select box

- -

Questo screenshot ci illustra i tre stati principali del nostro widget: lo stato normale(a sinistra); lo stato di attivazione ( al centro) and lo stato aperto (a destra).

- -

In termini di compartamento vogliamo che il nostro widget sia utilizabile con il mouse e con la tastiera, proprio come un ogni widget non modificato. Cominciamo definendo come il widget raggiungerà uno stato:

- -
-
Il widget è nel suo stato normale quando:
-
-
    -
  • la pagina carica
    • -
  • Il widget era attivo e l'utente fa clico ovunque al di fuori del widget
    • -
  • il widget era attivo e l'utente sposta lo stato attivo su un altro widget usando la tastiera
    • -
- -
-

Nota: Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the Option+Tab combination.

-
-
-
Il widget è nel suo stato attivo quando:
-
-
    -
  • L'user lo clicca
    • -
  • L'user clicca il tasto tab e lo evidenzia
    • -
  • il widget era aperto and l'user clicca sul widget.
    • -
-
-
Il widget è nello stato di apertura quando:
-
-
    -
  • il widget è in uno stato diverso da quello aperto e l'utente fa clic su di esso
    • -
-
-
- -

Una volta compreso come cambiare gli stati, e importante definire come cambiare i valori del widget:

- -
-
I valori cambiano quando:
-
-
    -
  • l'user clicca su un'opzione quando il widget è nello stato di apertura
    • -
  • l'user preme dalla tastiera la frecciasu o giù quando il widget è aperto 
    • -
-
-
- -

Finalmente, possiamo definire come le opzioni del widget dovranno comportarsi:

- - - -

Ai fini del nostro esempio, ci fermeremo qui; comunque, se sei un lettore attendo avrai notato che mancano dei comportamenti. Per esempio: Cosa accadrà se l'user preme tab MENTRE il widget è aperto?La risposta è... Nulla. OK, il comportamento corretto sembra ovvio ma il fatto è che, poiché non è definito nelle nostre specifiche, è molto facile trascurare questo comportamento. Ciò è particolarmente vero in un ambiente di squadra quando le persone che progettano il comportamento del widget sono diverse da quelle che lo implementano.

- -

Un altro esempio divertente: Cosa succederà se l'user premerà il tasto su o giù mentre il widget è aperto? Questo è un po' più complicato. Se consideri che lo stato attivo e lo stato aperto sono totalmente diversi, la risposta è di nuovo " non succederà niente"!
- Perchè non abbiamo definito nessuna interazione con la tastiera quando il widget è aperto.D'altronde, se si considera che lo stato attivo e lo stato aperto si sovrappongono un po', il valore potrebbe cambiare ma l'opzione ma l'opzione non sarà sicuramente evidenziata di conseguenza, ancora una volta perchè non abbiamo definito interazioni con la tastiera con le opzioni quando il widget si trova nel suo stato aperto (abbiamo solo definito cosa dovrebbe accadere quando il widget è aperto, ma nulla dopo).

- -

le specifiche mancanti sono ovvie, quindi le gestiremo, ma potrebbe rivelare dei problemi in widget nuovi ed esotici, fper cui nessuno ha la minima idea di quale sia il comportamento giusto. E' sempre opportuno utilizzare bene il proprio tempo in questa fase di desgin: se definisci malamente un comportamento, o dimentichi di definirne uno, sarà molto difficile ridefinirlo una volta che gli utenti si saranno abituati. Se hai dubbi, chiedi l'opinione altrui , e se disponi di un budget non esitare in un user tests. Questo processo è chiamato UX design. Se vuoi conoscere di più a proposito di questo argomento, dovresti controllare le seguenti risorse:

- - - -
-

Nota: In molti sistemi c'è un modo per aprire l'elemento {{HTMLElement("select")}} per esaminare tutte le scelte disponibili (lo stesso elemento {{HTMLElement("select")}} ). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the click event.

-
- -

Definire la struttura e la semantica HTML

- -

Ora che le funzionalità basi del nostro widget sono state deficse, e' tempo di cominciare a costruire il nostro widget. Il primo passo è di definire la struttura HTML . Questo è ciò che dobbiamo ricostruire {{HTMLElement("select")}}:

- -
<!-- Questo è il nostro container
-     principale per il nostro widget.
-     l'attributo tabindex permette
-     all'utente di concentrarsi sul widget.
-     Vedremo dopo cos'è meglio
-     utilizzare con javascript. -->
-
-<div class="select" tabindex="0">
-
-  <!-- Questo container verrà usato per stampare il valore corrente del widget -->
-  <span class="value">Cherry</span>
-
-  <!-- Questo container conterrà tutte le opzioni disponibili per il nostro widget.
-       dato che sarà una lista, utilizzare l'opzione ul è valido. -->
-  <ul class="optList">
-    <!-- Ogni opzione contiene solo il valore da visualizzare, vedremo dopo come
-         manipolare il reale valore che vogliamo inviare col form -->
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-
-</div>
- -

Nota l'uso del nome delle classi; questi identificano ciascuna parte rilevante indipendentemente dagli effettivi elementi HTML sottostanti utilizzati. Questo è importante per essere sicuri che non legheremo il nostro CSS e JavaScript ad una forte struttura HTML, in modo da poter apportare modifiche all'implementazione in un secondo momento senza rompere il codice che utilizza il widget. Per esempio se desideri implementare l'equivalente dell'elemento {{HTMLElement("optgroup")}}.

- -

Creare l'aspetto grafico utilizzando i CSS

- -

Ora che abbiamo una struttura HTML possiamo cominciare a disegnare il nostro widget. L'intero punto di costruzione di questo widget personalizzato è di essere in grado di modellare questo widget esattamente come vogliamo. Al fine di ciò, divideremo i nostri CSS in due parti: la prima parte sarà necessaria per avere un widget simile a {{HTMLElement("select")}} ,la seconda parte consisterà nella parte grafica in modo che appaia come noi vogliamo.

- -

Stili richiesti

- -

Gli stili richiesti sono quelli necessari per gestire i tre stati del nostro widget.

- -
.select {
-  /* Questo creerà un contesto di posizionamento per l'elenco di opzioni */
-  position: relative;
-
-  /*Questo renderà il nostro widget parte del flusso di testo e allo stesso tempo considerevole */
-  display : inline-block;
-}
- -

Abbiamo bisogno di una classe extra "active" per definire il look del nostro widget quando è nello stato di attivazione. Poichè il nostro widget è selezionabile,dobbiamo raddoppiare questo stile personale con la pseudo-classe {{cssxref(":focus")}} In modo da essere sicuri che abbiano lo stesso comportamento.

- -
.select.active,
-.select:focus {
-  outline: none;
-
-  /* Questo box-shadow non è richiesto al corretto funzionamento ,
-     tuttavia è importante per essere sicuro che lo stato di attivazione
-     sia visibile e che lo utilizziamo come valore di defaul,
-     sentiti libero di modificarlo. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

Ora manipoliamo la lista delle opzioni:

- -
/* il selettore .select è zucchero sintattico ( traduzione letterale,
-   concettualmente vuol dire " rendere del codice più dolce, più umano "
-   per essere sicuri che le classi che definiamo siano quelli all'interno del nostro widget.
- */
-
-.select .optList {
-  /* Ciò assicurerà che il nostro elenco di opzioni sia visualizzato sotto il valore
-      e fuori dal flusso HTML */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

Abbiamo bisogno di una classe extra per manipolare la lista quando le opzioni sono nascoste. Questo è necessario per gestire le differenze tra lo stato attivo e lo stato aperto che non corrispondono esattamente.

- -
.select .optList.hidden {
-  /* Questo è un modo semplice per nascondere la lista in modo accessibile,
-      parleremo di più sull'accessibilità alla fine */
-  max-height: 0;
-  visibility: hidden;
-}
- -

Abbellimento

- -

Ora che abbiamo le funzionalità base, possiamo cominciare a divertirci. Quello seguente è solo un esempio di ciò che è possibile, e corrisponderà allo screenshot all'inizio di questo articolo. Dovresti sentirti libero di sperimentare e vedere cosa accade.

- -
.select {
-  /* Tutte le taglie saranno espresse con il valore em per motivi di accessibilità
-      (per assicurarsi che il widget rimanga ridimensionabile se l'utente usa il
-      zoom del browser in modalità solo testo). I calcoli sono fatti
-      assumendo 1em == 16px quale è il valore predefinito nella maggior parte dei browser.
-      Se ti perdi la conversione di px in em, prova http://riddle.pl/emcalc/ * /
-  font-size   : 0.625em;
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Abbiamo bisogno di spazio extra per la freccia in giù che aggiungeremo
- */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* La prima dichiarazione serve per i browser che non supportano i gradienti lineari.
-     La seconda dichiarazione è perché i browser basati su WebKit non hanno ancora una definizione prefissata.
-     Se vuoi supportare i browser legacy prova http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* poichè i valori possono essere più larghi del nostro widget, dobbiamo essere sicuri
-     che il widget cambierà dimensione */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* E se il contenuto va in overflow, è bello avere un bell'elisse . */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-}
- -

Non abbiamo bisogno di altri elementi per disegnare la freccia in basso; useremo invece lo pseudo-elemento {{cssxref(":after")}}. Comunque potrebbe anche essere implementato usando una semplice immagine  di background.

- -
.select:after {
-  content : "▼"; /* utilizziamo il carattere unicode U+25BC; vedi http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* importante per la posizione della freccia in modo da evitare
-               sovrapposizionamenti */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

ora cominciamo il design della lista delle opzioni:

- -
.select .optList {
-  z-index : 2; /* Dichiariamo esplicitamente che la lista delle opzioni si sovraporrà
-                  alla freccia */
-
-  /*Questo resetterà lo stile di default degli elementi <ul> */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Ciò assicurerà che anche se i valori sono inferiori al widget,
-      l'elenco delle opzioni sarà grande quanto il widget stesso */
-  min-width : 100%;
-
-  /*Nel caso in cui l'elenco sia troppo lungo, il suo contenuto si sovrapporrà verticalmente
-      (che aggiungerà automaticamente una barra di scorrimento verticale) ma mai in orizzontale
-      (poiché non abbiamo impostato una larghezza, la lista regolerà automaticamente la sua larghezza.
-      Se non è possibile, il contenuto verrà troncato) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

Per le opzioni abbiamo bisogno di aggiungere la classe highlight in modo da identificare il valore che l'user selezionerà (o ha selezionato).

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

ecco i risultati dei nostri 3 stati:

- - - - - - - - - - - - - - - - - - - -
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
- -

Porta in vita il tuo widget con javascript

- -

Ora che il nostro designe e la nostra struttura sono pronti possiamo scrivere il codice JavaScript che farà effettivamente lavorare il widget.

- -
-

Pericolo: Il seguente codice è educativo e non dovrebbe essere usato così com'è. Tra le tante cose, come vedremo, non è a prova di futuro e non funzionerà sui browser legacy. Ha anche parti ridondanti che dovrebbero essere ottimizzate nel codice di produzione.

-
- -
-

Nota: Creare widget riutilizzabili è qualcosa che può essere un po 'complicato. La bozza del componente Web W3C è una delle risposte a questo specifico problema. Il progetto X-Tag è un'implementazione di test di questa specifica; ti invitiamo a dare un'occhiata a questo.

-
- -

Perchè non funziona?

- -

Prima di cominciare, è importante ricordare qualcosa di fondamentale a proposito di JavaScript: dentro un browser, è una tecnologia inaffidabile. Quando stai costruendo widget personalizzati, dovrai fare affidamento su javascript perchè è un filo necessario per legare tutto insieme. Tuttavia, ci sono molti casi in cui JavaScript non può essere eseguito nel browser:

- - - -

Per via di questi rischi, è molto importante considerare seriamente cosa accadrà se JavaScript non funziona. Trattare dettagliatamente questo problema è fuori dallo scopo di questo articolo perché è strettamente legato al modo in cui si desidera rendere generico e riutilizzabile lo script, ma nel nostro esempio considereremo le basi di ciò.

- -

Nel nostro esempio, se il nostro codice JavaScript non è in esecuzione, ricorreremo alla visualizzazione di un elemento {{HTMLElement("select")}}. Per raggiungere questo abbiamo bisogno di due cose.

- -

Per prima cosa, dobbiamo aggiungere un normale elemento {{HTMLElement ("select")}} prima di ogni utilizzo del nostro widget personalizzato. Questo è in realtà richiesto anche per poter inviare dati dal nostro widget personalizzato insieme al resto dei dati del nostro modulo;diremo di più a proposito più tardi.

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cherry</span>
-      <ul class="optList hidden">
-        <li class="option">Cherry</li>
-        <li class="option">Lemon</li>
-        <li class="option">Banana</li>
-        <li class="option">Strawberry</li>
-        <li class="option">Apple</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

Secondo, abbiamo bisogno di due nuove classi per nascondere l'elemento non necessario (cioè, l'elemento "reale" {{HTMLElement ("select")}} se il nostro script non è in esecuzione o il widget personalizzato è in esecuzione) . Nota che per impostazione predefinita, il nostro codice HTML nasconde il nostro widget personalizzato.

- -
.widget select,
-.no-widget .select {
-  /*Questo selettore css afferma:
-     - o abbiamo impostato la classe del corpo su "widget",
-       quindi nascondiamo l'effettivo elemento {{HTMLElement ("select")}}
-      - o non abbiamo cambiato la classe del corpo, quindi la classe del corpo
-         è ancora "no-widget",
-        quindi gli elementi di classe "select" devono essere nascosti */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

Ora abbiamo solo bisogno di un interruttore JavaScript per determinare se lo script è in esecuzione o meno. Questa opzione è molto semplice: se al momento del caricamento della pagina il nostro script è in esecuzione, rimuoverà la classe no-widget e aggiungerà la classe widget, scambiando così la visibilità dell'elemento {{HTMLElement ("select")}} e del widget personalizzato.

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
- -
-

Nota: Se vuoi veramente rendere il tuo codice generico e riutilizzabile, invece di fare un cambio di classe è meglio aggiungere semplicemente la classe del widget per nascondere gli elementi {{HTMLElement ("select")}} e aggiungere dinamicamente l'albero DOM che rappresenta il widget personalizzato dopo ogni {{HTMLElement ("select")}} elemento nella pagina.

-
- -

Rendere il lavoro più facile

- -

Nel codice che stiamo per costruire, useremo l'API DOM standard per fare tutto il lavoro di cui abbiamo bisogno. Tuttavia, sebbene il supporto dell'API DOM sia diventato molto meglio nei browser, ci sono sempre problemi con i browser legacy (specialmente con il buon vecchio Internet Explorer).

- -

Se vuoi evitare problemi con i browser legacy, ci sono due modi per farlo: usando un framework dedicato come jQuery, $ dom, prototype, Dojo, YUI, o simili, o facendo il polyfilling della funzione mancante che vuoi usare ( che può essere fatto facilmente attraverso il caricamento condizionale, ad esempio con la libreria yepnope).

- -

Le funzionalità che intendiamo utilizzare sono le seguenti (ordinate dal più rischioso al più sicuro):

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (This is not DOM but modern JavaScript)
    4. -
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

Oltre alla disponibilità di tali funzionalità specifiche, rimane ancora un problema prima dell'avvio. L'oggetto restituito dalla funzione {{domxref ("element.querySelectorAll", "querySelectorAll ()")}} è un {{domxref ("NodeList")}} piuttosto che una matrice. Questo è importante perché gli oggetti Array supportano la funzione forEach, ma {{domxref ("NodeList")}} no. Poiché {{domxref ("NodeList")}} sembra davvero un array e poiché forEach è così comodo da usare, possiamo facilmente aggiungere il supporto di forEach a {{domxref ("NodeList")}} per rendere la nostra vita più facile, così:

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

We weren't kidding when we said it's easy to do.

- -

Creazione di eventi Callback

- -

Il terreno è pronto, ora possiamo iniziare a definire tutte le funzioni che verranno utilizzate ogni volta che l'utente interagisce con il nostro widget.

- -
// Questa funzione verrà utilizzata ogni volta che si desidera disattivare un widget personalizzato
-// Richiede un parametro
-// seleziona: il nodo DOM con la classe `select` da disattivare
-function deactivateSelect(select) {
-
-  // Se il widget non è attivo non c'è nulla da fare
-  if (!select.classList.contains('active')) return;
-
-  // Abbiamo bisogno di ottenere l'elenco delle opzioni per il widget personalizzato
-  var optList = select.querySelector('.optList');
-
-  // Chiudiamo la lista delle opzioni
-  optList.classList.add('hidden');
-
-  // e disattiviamo il custom widget
-  select.classList.remove('active');
-}
-
-// questa funzione verrà utilizzata ogni volta che l'user(dis)attiverà il widget
-// prende due parametri:
-// select : il nodo del DOM con le classi 'select' da attivare
-// selectList :la lista di tutti i nodi dom con la la classe 'select'
-
-function activeSelect(select, selectList) {
-
-  // Se il widget è già attivo non c'è niente da fare
-  if (select.classList.contains('active')) return;
-
-  // Dobbiamo disattivare lo stato attivo su tutti i widget personalizzati
-   // Perché la funzione deactivateSelect soddisfa tutti i requisiti di
-   // per ogni funzione di callback, la usiamo direttamente senza usare un intermediario
-   // funzione anonima.
-  selectList.forEach(deactivateSelect);
-
-  // E attiviamo lo stato attivo per questo specifico widget
-  select.classList.add('active');
-}
-
-// Questa funzione verrà utilizzata ogni volta che l'utente desidera aprire / chiudere l'elenco di opzioni
-// Richiede un parametro:
-// seleziona: il nodo DOM con l'elenco da attivare
-function toggleOptList(select) {
-
- // L'elenco è tenuto dal widget
-  var optList = select.querySelector('.optList');
-
-  // Modifichiamo la classe dell'elenco per mostrarlo / nasconderlo
-  optList.classList.toggle('hidden');
-}
-
-// Questa funzione verrà utilizzata ogni volta che sarà necessario evidenziare un'opzione
-// Ci vogliono due parametri:
-// seleziona: il nodo DOM con la classe `select` contenente l'opzione da evidenziare
-// opzione: il nodo DOM con la classe `option` da evidenziare
-function highlightOption(select, option) {
-
-  // Otteniamo l'elenco di tutte le opzioni disponibili per il nostro elemento di selezione personalizza
-  var optionList = select.querySelectorAll('.option');
-
-  // Rimuoviamo l'evidenziazione da tutte le opzioni
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
- // Evidenziamo l'opzione giusta
-  option.classList.add('highlight');
-};
- -

 

- -

Questo è tutto ciò che serve per gestire i vari stati del widget personalizzato.

- -

Successivamente, associamo queste funzioni agli eventi appropriati:

- -

 

- -
// Gestiamo il binding di eventi quando il documento è caricato.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-
-    // Ogni widget personalizzato deve essere inizializzato
-    var optionList = select.querySelectorAll('.option');
-
-    // Ogni volta che un utente passa il mouse su un'opzione, evidenziamo l'opzione data
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Nota: le variabili `select` e` option` sono le chiusure
-         // disponibile nell'ambito della nostra chiamata di funzione.
-        highlightOption(select, option);
-      });
-    });
-
-    // Ogni volta che l'utente fa clic su un elemento di selezione personalizzato
-    select.addEventListener('click', function (event) {
-     // Nota: la variabile `select` è una chiusura
-       // disponibile nell'ambito della nostra chiamata di funzione.
-
-      // Accendiamo la visibilità dell'elenco di opzioni
-      toggleOptList(select);
-    });
-
-    // Nel caso in cui il widget ottenga lo stato attivo
-     // Il widget ottiene l'attenzione ogni volta che l'utente fa clic su di esso o ogni volta
-     // usano la chiave di tabulazione per accedere al widget
-    select.addEventListener('focus', function (event) {
-      // Nota: le variabili `select` e` selectList` sono le chiusure
-       // disponibile nell'ambito della nostra chiamata di funzione.
-
-      // Attiviamo il widget
-      activeSelect(select, selectList);
-    });
-
-    // Nel caso in cui il widget lasci il focus
-    select.addEventListener('blur', function (event) {
-      // Nota: la variabile `select` è una chiusura
-       // disponibile nell'ambito della nostra chiamata di funzione.
-
-       // Disattiamo il widget
-      deactivateSelect(select);
-    });
-  });
-});
- -

A quel punto, il nostro widget cambierà stato in base al nostro progetto, ma il suo valore non viene ancora aggiornato. Lo gestiremo dopo.

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
- -

Gestire il valore del Widget

- -

 

- -

Ora che il nostro widget funziona, dobbiamo aggiungere del codice per aggiornarne il valore in base all'input dell'utente e rendere possibile l'invio del valore insieme ai dati del modulo.

- -

Il modo più semplice per farlo è usare un widget nativo sotto il cofano. Tale widget terrà traccia del valore con tutti i controlli integrati forniti dal browser e il valore verrà inviato normalmente al momento della presentazione di un modulo. Non ha senso reinventare la ruota quando possiamo fare tutto questo per noi.

- -

Come visto in precedenza, utilizziamo già un widget di selezione nativo come fallback per motivi di accessibilità; possiamo semplicemente sincronizzare il suo valore con quello del nostro widget personalizzato:

- -

 

- -
// Questa funzione aggiorna il valore visualizzato e lo sincronizza con il widget nativo.
-// Ci vogliono due parametri:
-// seleziona: il nodo DOM con la classe `select` contenente il valore da aggiornare
-// indice: l'indice del valore da selezionare
-function updateValue(select, index) {
- // Abbiamo bisogno di ottenere il widget nativo per il widget personalizzato specificato
-   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
-  var nativeWidget = select.previousElementSibling;
-
-  // Abbiamo anche bisogno di ottenere il valore segnaposto del nostro widget personalizzato
-  var value = select.querySelector('.value');
-
-  // E abbiamo bisogno dell'intero elenco di opzioni
-  var optionList = select.querySelectorAll('.option');
-
-  // Impostiamo l'indice selezionato sull'indice di nostra scelta
-  nativeWidget.selectedIndex = index;
-
-  // Aggiorniamo il valore placeholder di conseguenza
-  value.innerHTML = optionList[index].innerHTML;
-
-  // E evidenziamo l'opzione corrispondente del nostro widget personalizzato
-  highlightOption(select, optionList[index]);
-};
-
-// Questa funzione restituisce l'indice selezionato corrente nel widget nativo
-// Richiede un parametro:
-// seleziona: il nodo DOM con la classe `select` relativa al widget nativo
-function getIndex(select) {
- // È necessario accedere al widget nativo per il widget personalizzato specificato
-   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

Con queste due funzioni, possiamo associare i widget nativi a quelli personalizzati:

- -
// Gestiamo il binding di eventi quando il documento è caricato.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
- // Ogni widget personalizzato deve essere inizializzato
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // Rendiamo focalizzabile il nostro widget personalizzato
-    select.tabIndex = 0;
-
-// Facciamo in modo che il widget nativo non sia più focalizzabile
-    select.previousElementSibling.tabIndex = -1;
-
-    // Ci assicuriamo che il valore selezionato di default sia visualizzato correttamente
-    updateValue(select, selectedIndex);
-
-    // Ogni volta che un utente fa clic su un'opzione, aggiorniamo di conseguenza il valore
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Ogni volta che un utente usa la propria tastiera su un widget focalizzato, aggiorniamo di conseguenza il valore
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-     // Quando l'utente preme la freccia giù, passiamo all'opzione successiva
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-// Quando l'utente preme la freccia su, passiamo all'opzione precedente
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

 

- -

Nel codice sopra, vale la pena notare l'uso della proprietà tabIndex. L'utilizzo di questa proprietà è necessario per garantire che il widget nativo non acquisisca mai l'attenzione e per assicurarsi che il nostro widget personalizzato ottenga lo stato attivo quando l'utente utilizza la sua tastiera o il suo mouse.

- -

Con quello, abbiamo finito! Ecco il risultato:

- -

 

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
- -

Ma aspetta un secondo, abbiamo davvero finito?

- -

Renderlo accessibile

- -

 

- -

Abbiamo costruito qualcosa che funziona e sebbene siamo lontani da una casella di selezione completa, funziona bene. Ma quello che abbiamo fatto non è altro che il violino con il DOM. Non ha una vera semantica e, anche se sembra una casella di selezione, dal punto di vista del browser non ne è uno, quindi le tecnologie assistive non saranno in grado di capire che è una casella di selezione. In breve, questa nuova casella di selezione non è accessibile!

- -

Fortunatamente, esiste una soluzione e si chiama ARIA. ARIA è l'acronimo di "Accessible Rich Internet Application" ed è una specifica W3C specificamente progettata per ciò che stiamo facendo qui: rendere accessibili le applicazioni web e i widget personalizzati. È fondamentalmente un insieme di attributi che estendono l'HTML in modo da poter meglio descrivere ruoli, stati e proprietà come se l'elemento che abbiamo appena escogitato fosse l'elemento nativo per cui tentava di passare. L'utilizzo di questi attributi è estremamente semplice, quindi facciamolo.

- -

 

- -

L'attributo 'role'

- -

 

- -

L'attributo chiave utilizzato da ARIA è l'attributo 'role'. L'attributo 'role' accetta un valore che definisce per cosa viene usato un elemento. Ogni 'role' definisce i propri requisiti e comportamenti. Nel nostro esempio, useremo 'role listbox'. È un "ruolo composito", ovvero gli elementi con quel ruolo si aspettano di avere figli, ciascuno con un ruolo specifico (in questo caso, almeno un bambino con il ruolo di opzione).

- -

Vale anche la pena notare che ARIA definisce i ruoli che vengono applicati di default al markup HTML standard. Ad esempio, l'elemento {{HTMLElement ("table")}} corrisponde alla griglia del ruolo e l'elemento {{HTMLElement ("ul")}} corrisponde all'elenco dei ruoli. Poiché utilizziamo un elemento {{HTMLElement ("ul")}}, vogliamo assicurarci che il ruolo listbox del nostro widget sostituisca il ruolo di lista dell'elemento {{HTMLElement ("ul")}}. A tal fine, useremo la presentazione del ruolo. Questo ruolo è stato progettato per farci indicare che un elemento non ha un significato speciale e viene utilizzato esclusivamente per presentare informazioni. Lo applicheremo al nostro elemento {{HTMLElement ("ul")}}.

- -

Per supportare il ruolo listbox, dobbiamo solo aggiornare il nostro codice HTML in questo modo:

- -

 

- -
<! - Aggiungiamo l'attributo role = "listbox" al nostro elemento principale -><div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <! - Aggiungiamo anche il role = "presentation" all'elemento ul ->
-  <ul class="optList" role="presentation">
-    <! - E aggiungiamo l'attributo role = "option" a tutti gli elementi li ->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

Nota: Includere sia l'attributo role sia un attributo class è necessario solo se si desidera supportare i browser legacy che non supportano i selettori dell'attributo CSS. CSS attribute selectors.

-
- -

L'attributo aria-selected 

- -

Usare l'attributo role non è abbastanza. ARIA fornisce anche molti stati e attributi di proprietà. Più e meglio li usi, più il tuo widget sarà compreso dalle tecnologie assistive. Nel nostro caso, limiteremo il nostro utilizzo a un attributo: aria-selected.

- -

l'attributo aria-selected è usato per contrassegnare quale opzione è attualmente selezionata; questo consente alle tecnologie assistive di informare l'utente su quale sia la selezione corrente. Lo useremo dinamicamente con JavaScript per contrassegnare l'opzione selezionata ogni volta che l'utente ne sceglie uno. A tal fine, abbiamo bisogno di rivedere la nostra funzione updateValue():

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // Ci assicuriamo che tutte le opzioni non siano selezionate
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // Ci assicuriamo che l'opzione scelta sia selezionata
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

Ecco il risultato finale di tutti questi cambiamenti (otterrai una sensazione migliore provandola con una tecnologia di assistenza come NVDA o VoiceOver):

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
- -

Conclusioni

- -

 

- -

Abbiamo visto tutti i fondamenti della creazione di un widget di modulo personalizzato, ma come puoi vedere non è banale da fare, e spesso è meglio e più facile affidarsi a librerie di terze parti invece di codificarle da zero da soli (a meno che, ovviamente, il tuo obiettivo è costruire una tale biblioteca).

- -

Ecco alcune librerie da prendere in considerazione prima di codificare le tue:

- -

 

- - - -

Se vuoi andare avanti, il codice in questo esempio necessita di qualche miglioramento prima che diventi generico e riutilizzabile. Questo è un esercizio che puoi provare ad esibirti. Due suggerimenti per aiutarti in questo: il primo argomento per tutte le nostre funzioni è lo stesso, il che significa che quelle funzioni necessitano dello stesso contesto. Costruire un oggetto per condividere quel contesto sarebbe saggio. Inoltre, è necessario renderlo a prova di funzionalità; cioè, deve essere in grado di funzionare meglio con una varietà di browser la cui compatibilità con gli standard Web utilizzati varia. Divertiti!

- -

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

- -

 

- -

In questo modulo

- - - -

 

diff --git a/files/it/learn/html/forms/form_validation/index.html b/files/it/learn/html/forms/form_validation/index.html deleted file mode 100644 index 9557758529..0000000000 --- a/files/it/learn/html/forms/form_validation/index.html +++ /dev/null @@ -1,846 +0,0 @@ ---- -title: Validazione lato client delle form -slug: Learn/HTML/Forms/Form_validation -tags: - - Apprendere - - Esempio - - Forms - - Guida - - HTML - - JavaScript - - Principiante - - Web - - regex -translation_of: Learn/Forms/Form_validation ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -
Prima di inviare dati al server, è importante assicurarsi che tutti i campi richiesti della form siano stati inseriti e siano nel formato richiesto. Questa viene chiamata validazione delle form lato client, ed aiuta a fare in modo che i dati inviati siano consistenti con quanto richiesto. Questo articolo illustra anche con esempi i concetti base della validazione.
- -
- - - - - - - - - - - - -
Prerequisiti:Conoscenze informatiche, ed una ragionevole comprensione di HTML, CSS, e JavaScript.
Obiettivo:Capire che cos'è la validazione delle form lato client, perché è importante e come applicare le varie tecniche per implementarla.
- -

La validazione lato client è un controllo che va fatto subito ed è una caratteristica importante per una buona esperienza untente; trovando i dati non corretti nel lato client, l'utente li può correggere immediatamente. Se i dati non corretti venissero inviati al server e rifiutati, si assisterebbe ad un considerevole e fastidioso ritardo operativo dovuto al traffico tra client e server per le richieste di correzione.

- -

Comunque, la validazione lato client non dovrebbe essere considerata una misura di sicurezza sufficiente! La tua app dovrebbe sempre eseguire controlli di sicurezza anche nel lato server, perché le validazioni lato client sono troppo facili da bypassare, quindi gli utenti malevoli potrebbero comunque spedire dati non corretti al server. Leggi l'articolo Website security per farti un idea di quello che potrebbe succedere; in questo articolo non trattiamo la validazione lato server, ma tu dovresti tenerla presente.

- -

Che cos'è la validazione delle form?

- -

Vai su qualche diffuso sito con registrazione delle form e ti accorgerai che ti  fornirà informazioni immediate se non inserisci i dati nel formato che loro si aspettano. Otterrai messaggi simili a questi:

- - - -

Questa viene chiamata validazione della form. Quando inserisci i dati il browser e/o il web server controllano se i dati sono corretti secondo le regole stabilite dalla applicazione. La validazione fatta dal browser viene chiamata validazione lato client e quella fatta dal server viene chiamata validazione lato server. Questo articolo si occupa della validazione lato client.

- -

Se le informazioni hanno il formato corretto, l'applicazione consente che vengano spedite al server il quale di solito le salva in un database. Se invece non sono corrette, viene mandato un messaggo all'utente spiegando l'errore e consentendo di riprovare.

- -

Noi desideriamo che l'inserimento delle form sia il più facile possibile. Quindi per quale motivo insistiamo per la validazione? I motivi principali sono tre:

- - - -

Differenti tipi di validazione lato client

- -

Ci sono due tipi di validazione che si possono incontrare nel web:

- - - -

Usare la validazione built-in delle form

- -

Una delle funzionalità più significative dei HTML5 form controls è la capacità di effettuare molte validazioni senza richiedere l'uso di JavaScript. Questo viene fatto usando attributi di validazione negli elementi della form. Lo abbiamo visto anche in altre occasioni, ma ricapitolando:

- - - -

Se i dati inseriti nella form seguono tutte le regole specificate dagli attributi è considerata valida. Altrimenti viene considerata non valida.

- -

Quando un elemento è valido, le seguenti cose sono vere:

- - - -

Quando un elemento non è valido, le seguenti cose sono vere:

- - - -
-

Nota: Esistiono alcuni errori che impediscono la spedizione della form, compreso {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o un {{domxref('validityState.customError','customError')}}.

-
- -

Esempi di validazione built-in delle form

- -

In questa sezione proveremo alcuni degli attributi di cui abbiamo parlato sopra.

- -

Semplice esempio iniziale

- -

Incominciamo con un esempio semplice: Un campo di testo che ti permette di scegliere se preferisci le banane o le ciliege (banana or cherry). Questo esempio richiede un semplice testo {{HTMLElement("input")}} con associata una {{htmlelement("label")}} e un pulsante di invio {{htmlelement("button")}}. Il codice sorgente si trova su GitHub su fruit-start.html con un esempio live.

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry?</label>
-  <input id="choose" name="i_like">
-  <button>Submit</button>
-</form>
- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

{{EmbedLiveSample("Simple_start_file", "100%", 80)}}

- -

Per incominciare fai una copia di  fruit-start.html in una directory vuota del tuo disco fisso.

- -

L'attributo required

- -

La validazione HTML5 più semplice è l'attributo required. Per rendere obbligatorio un campo input aggiungi questo attributo. Se è presente, l'elemento esegue il controllo con la pseudo-classe {{cssxref(':required')}} e la form non viene inviata e visualizza un messaggio d'errore se il campo input è vuoto. Quando è vuoto il campo è considerato non valido anche dalla pseudo-classe {{cssxref(':invalid')}}.

- -

Aggiungi l'attributo required come si vede qui sotto.

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry? (required)</label>
-  <input id="choose" name="i_like" required>
-  <button>Submit</button>
-</form>
- -

Considera il CSS che è incluso nel file d'esempio:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:invalid:required {
-  background-image: linear-gradient(to right, pink, lightgreen);
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

Questo CSS assegna all'input un bordo rosso a trattini quando il valore non è valido ed una linea nera più sottile quando è valido. Abbiamo anche aggiunto uno sfondo a gradiente quando è richiesto e non valido. Prova il nuovo comportamento nell'esempio sotto:

- -

{{EmbedLiveSample("The_required_attribute", "100%", 80)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub come fruit-validation.html (vedi anche il codice sorgente.)

-
- -

Prova ad inviare la form senza un valore. Nota che i campo non valido acquista il focus ed appare il messaggio predefinito ("Per favore inserisci questo campo"), e la form non viene inviata.

- -

La presenza dell'attributo required in un elemento che lo supporta comporta che l'elemento controlla la pseudoclasse {{cssxref(':required')}} per controllare se contiene un valore oppure no. Se il campo {{HTMLElement("input")}} non ha un valore, attiva la pseudoclasse {{cssxref(':invalid')}}.

- -
-

Nota: Per una buona esperienza utente, indica all'utente quando un campo è richiesto. Non è solo una buona pratica, ma è anche richiesto dalle linee guida accessibility del WCAG. È anche bene rendere obbligatori i soli campi che ti servono. è inutile rendere obbligatori i campi di cui non hai reale necessità.

-
- -

Validazione con una regular expression

- -

Un'altra caratteristica di validazione molto usata è l'attributo pattern, che si aspetta una Regular Expression come valore. Una regular expression (regex) è un modello che può essere usato per confrontare una combinazione di caratteri in una stringa, questo li rende ottimi per la validazione delle form e vengono usati anche per un certo numero di altri usi in JavaScript.

- -

I regex sono abbastanza complessi, e non riusciamo a spiegarli in modo completo in questo articolo. Di seguito riportiamo alcuni esempi per darti un'idea di base su come funzionano.

- - - -

Ci sono moltissime altre possibilità che non trattiamo. Per la lista completa e molti esempi consulta la nostra documentazione delle Regular expressions.

- -

Proviamo ad implementare un esemio. Modifica il tuo HTML per aggiungere un attributo pattern come il seguente:

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
-  <button>Submit</button>
-</form>
-
- - - -

Che ci da il seguente aggiornamento — prova:

- -

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub su fruit-pattern.html (guarda anche il codice sorgente.)

-
- -

In questo esempio, l'elemento {{HTMLElement("input")}} accetta una di quattro possibili valori: "banana", "Banana", "cherry", o "Cherry". Le regular expressions sono sono sensibili a maiuscole e minuscole, ma noi abbiamo supportato sia le parole minuscole che quelle con la prima maiuscola usando il modello "Aa" racchiuso tra parentesi quadre.

- -

Prova ora a cambiare il valore dell attributo pattern con gli esempi visti in precedenza e vedi in che modo cambiano i valori che puoi inserire. Prova anche a scrivere qualche regola per conto tuo e cerca di dare un senso alle regole rispetto al esempio della frutta!

- -

Se un valore di {{HTMLElement("input")}} non soddisfa il modello della regular expression il campo input  applicherà la pseudoclasse  {{cssxref(':invalid')}}.

- -
-

Nota: Alcuni tipi di elemento {{HTMLElement("input")}} non necessitano di un attributo pattern per essere validati secondo una regular expression. Specificando il tipo email, ad esempio, l'input viene validato con il consolidato modello per la validazione delle email o con il modello per una lista di email separate da virgole se ha anche l'attributo multiple.

-
- -
-

Nota: L'elemento {{HTMLElement("textarea")}} non supporta l'attributo pattern.

-
- -

Limitare la dimensione dei campi

- -

Puoi limitare la dimensione dei campi testo creati con  {{HTMLElement("input")}} o {{HTMLElement("textarea")}} usando gli attributi minlength e maxlength. Un campo non è valido se ha meno caratteri del valore di minlength o maggiore del valore di maxlength.

- -

I browsers spesso non consentono all'utente di inserire più caratteri di quelli consentiti dal campo. Per migliorare l'esperienza utente invece di usare solamente maxlength si può fornire l'indicazione del numero di caratteri residui per dare modo all'utente di regolarsi. Un esempio di questo si trova in Twitter. Con JavaScript esiste una soluzione che usa maxlength, che si può utilizzare.

- -

Limitare i valori dei campi

- -

Per i campi numerici (es. <input type="number">), gli attirbuti min e max possono essere utilizzati per fornire i limiti di valori validi. Se il campo contiene valori fuori dai limiti non è valido.

- -

Vediamo un altro esempio. Creiamo una copia del file fruit-start.html.

- -

Ora sostituiamo i contenuto dell'elemento <body> con il seguente:

- -
<form>
-  <div>
-    <label for="choose">Would you prefer a banana or a cherry?</label>
-    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">How many would you like?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
- - - - - -

Ecco un esempio live:

- -

{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub su fruit-length.html (guarda anche il codice sorgente.)

-
- -
-

Nota: <input type="number"> (ed anche altri tipi come range e date) possono anche avere l'attributo step, che specifica il valore minimo di incremento e decremento quando viene usato il campo (ad esempio premendo i pulsanti su e giu dei campi numerici). Nel esempio precedente non abbiamo inserito l'attributo step quindi il valore parte da 1. Questo significa che i numeri con la virgola come 3.2, sono anch'essi non validi.

-
- -

Esempio completo

- -

Ecco un esempio completo che dimostra l'uso delle funzionalità di validazione built-in di HTML:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
-      <!-- While only one radio button in a same-named group can be selected at a time,
-           and therefore only one radio button in a same-named group having the "required"
-           attribute suffices in making a selection a requirement -->
-      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
-      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- The pattern attribute can act as a fallback for browsers which
-         don't implement the number input type but support the pattern attribute.
-         Please note that browsers that support the pattern attribute will make it
-         fail silently when used with a number field.
-         Its usage here acts only as a fallback -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail address?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -

Ed ora un po' di CSS per dare stile al HTML:

- -
form {
-  font: 1em sans-serif;
-  max-width: 320px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="number"],
-textarea,
-fieldset {
-  width : 100%;
-  border: 1px solid #333;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  box-shadow: none;
-}
- -

Questo viene presentato nel modo seguente:

- -

{{EmbedLiveSample("Full_example", "100%", 420)}}

- -

Vedi Validation-related attributes per la lista completa degli attributi che possono essere utilizzati per limitare i valori ed i tipi di input che li supportano.

- -
-

Nota: Puoi trovare questo esempio live su GitHub su  full-example.html (guarda anche il codice sorgente.)

-
- -

Validazione delle forms con JavaScript

- -

Sei costretto ad usare JavaScript se desideri controllare l'aspetto dei messaggi nativi d'errore o per conformarti ai browsers più vecchi che non supportano la validazione built-in di HTML. In questa sezione daremo un occhiata a diversi modi per farlo.

- -

Le API di limitazione della validazione

- -

Molti browsers supportano le Constraint Validation API, che consistono in un gruppo di metodi e proprietà disponibili nelle seguienti interfaccie degli elementi delle form del DOM:

- - - -

Le API di validazione rendono le seguenti proprietà disponibili per li elementi di cui sopra.

- - - -

Le API di validazione rendono anche disponibili i seguenti metodi per gli elementi di cui sopra.

- - - -

Implementare un messaggio di errore personalizzato

- -

Come abbiamo visto negli esempi di limiti di validazione HTML5 in precedenza, ogni volta che l'utente tenta di inviare una form non valida, il browser visualizza un messaggio d'errore. Il modo in cui viene visualizzato dipende dal browser.

- -

Questi messaggi automatizzati hanno due controindicazioni:

- - - -

Example of an error message with Firefox in French on an English page

- -

Personalizzare questi messaggi di errore è uno dei casi più comuni di utilizzo delle constraint validation API. Vediamo un piccolo esempio di come fare questo.

- -

Incominciamo con un po' di HTML semplice (prova ad inserirlo in un file HTML vuoto o usa come base una copia di of fruit-start.html come preferisci):

- -
<form>
-  <label for="mail">I would like you to provide me with an e-mail address:</label>
-  <input type="email" id="mail" name="mail">
-  <button>Submit</button>
-</form>
- -

Ed aggiungi il seguente JavaScript alla pagina:

- -
const email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I am expecting an e-mail address!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

Qui aggiungiamo un riferimento al campo email ed aggiungiamo un event listener che viene eseguito ogni volta che il valore cambia.

- -

Nel codici controlliamo se la proprietà validity.typeMismatch del campo emali diventa true, significa che il valore contenuto non corrisponde al modello degli indirizzi email. Se è così viene chiamato il metodo setCustomValidity() con un messaggio appropriato. Questo rende il campo non valido, in modo che quando viene inviata la form, l'invio fallisce e viene visualizzato il messaggio di errore.

- -

Se la proprietà validity.typeMismatch restituisce false, chiamiamo il metodo setCustomValidity() con una stringa vuota che rende valido il campo in modo che possa essere spedito.

- -

Lo puoi provare con:

- -

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub su custom-error-message.html (vedi anche il codice sorgente.)

-
- -

Un esempio più dettagliato

- -

Ora che abbiamo visto un esempio molto semplice, vediamo come possiamo usare le API per costurire un sistema di validazione un po' più complesso.

- -

Prima di tutto il codice HTML:

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Please enter an email address:</span>
-      <input type="email" id="mail" name="mail" required minlength="8">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Submit</button>
-</form>
- -

Questa semplice form usa l'attributo novalidate per disattivare la validazine automatica del browser; questo consente al nostro script di prendere il controllo della validazione. Questo comunque non disabilita il supporto per le API di validazione e l'applicazione delle pseudoclassi CSS come {{cssxref(":valid")}}, ecc. Questo significa che se anche il browser con controlla la validità della form prima di spedire i dati, tu puoi comunque farlo dal solo ed applicare lo stile appropriato.

- -

Il nostro input da validare è un <input type="email">, che è required, ed ha un minlength di 8 caratteri. Proviamo a controllare la validità usando il nostro codice e visualizziamo un messaggio appropriato per ciascun attributo.

- -

Ci proponiamo di visualizzare il messaggio all'intermo di un elemento <span>. L'attributo aria-live per assicurarci che il nostro messaggio di errore verrà reso disponibile a tutti compresi coloro che usano i lettori di schermo.

- -
-

Nota: Il punto chiave qui è l'uso dell'attributo novalidate per la form che è ciò che impedisce alla form di vidualizzare il proprio messaggio di errore e ci consente invece di visualizzare il nostro messaggio presonalizzato nel DOM in qualche modo scelto da noi.

-
- -

Ora un po' di CSS oer migliorare leggermente il look della form, e fornire qualche tipo di informazione quando il valore non è valido:

- -
body {
-  font: 1em sans-serif;
-  width: 200px;
-  padding: 0;
-  margin : 0 auto;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-  appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -

Ora vediamo il codice JavaScript che implementa l'errore personalizzato di validazione.

- -
// There are many ways to pick a DOM node; here we get the form itself and the email
-// input box, as well as the span element into which we will place the error message.
-const form  = document.getElementsByTagName('form')[0];
-
-const email = document.getElementById('mail');
-const emailError = document.querySelector('#mail + span.error');
-
-email.addEventListener('input', function (event) {
-  // Each time the user types something, we check if the
-  // form fields are valid.
-
-  if (email.validity.valid) {
-    // In case there is an error message visible, if the field
-    // is valid, we remove the error message.
-    emailError.innerHTML = ''; // Reset the content of the message
-    emailError.className = 'error'; // Reset the visual state of the message
-  } else {
-    // If there is still an error, show the correct error
-    showError();
-  }
-});
-
-form.addEventListener('submit', function (event) {
-  // if the email field is valid, we let the form submit
-
-  if(!email.validity.valid) {
-    // If it isn't, we display an appropriate error message
-    showError();
-    // Then we prevent the form from being sent by canceling the event
-    event.preventDefault();
-  }
-});
-
-function showError() {
-  if(email.validity.valueMissing) {
-    // If the field is empty
-    // display the following error message.
-    emailError.textContent = 'You need to enter an e-mail address.';
-  } else if(email.validity.typeMismatch) {
-    // If the field doesn't contain an email address
-    // display the following error message.
-    emailError.textContent = 'Entered value needs to be an e-mail address.';
-  } else if(email.validity.tooShort) {
-    // If the data is too short
-    // display the following error message.
-    emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
-  }
-
-  // Set the styling appropriately
-  emailError.className = 'error active';
-}
- -

I commenti spiegano le cose per bene, ma brevemente:

- - - -

Ecco il risultato live:

- -

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub su detailed-custom-validation.html (vedi anche il codice sorgente.)

-
- -

Le API di validazione ti forniscono uno stumento potente per gestire la validaizone delle form, fornendoti un grande controllo sulla interfaccia utente sopra e sotto quello che puoi fare con i soli HTML e CSS.

- -
-

Nota: Per ulteriori ingormazioni vedi il nostro Constraint validation guide, ed il riferimento Constraint Validation API.

-
- -

Validare le forms senza le built-in API

- -

In alcuni casi come ad esempio per i browsers più vecchi o per il supporto ai custom controls, non sarà possibile usare le API di validazione. Potrai ancora utilizzare JavaScript per validare la tua form, ma devi scrivere tutto da solo.

- -

Per validare la form fatti alcune domande:

- -
-
Che tipo di validazione devo eseguire?
-
Devi determinare come validare i tuoi dati: operazioni sulle stringhe, conversioni di tipo, regular expressions, e via discorrendo. Sta tutto a te.
-
Cosa devo fare se la form non è valida?
-
Questo chiaramente è materia di UI. Devi decidere come si deve comportare la form. Deve la form spedire i dati ugualmente? Devi illuminare i campi che sono in errore? Devi visualizzare messaggi di errore?
-
Come posso aiutare l'utente a correggere i dati non validi?
-
Per ridurre la frustrazione dell'utente, è molto importante fornire il maggior numero di informazioni possibili per guidarlo a correggere gli errori. Dovresti fornire suggerimenti sui dati attesi ed anche messaggi di errore chiari e comprensibili. Se vuoi approfondire come approntare la UI adeguata per la validazione, ecco alcuni articoli utili che dovresti leggere: - -
-
- -

Un esempio che non usa le API di validazione

- -

Per illustrare questo, quello che segue è una versione semplificata dell'esempio precedente che funziona anche con i browsers più vecchi.

- -

Il HTML è quasi uguale; abbiamo solo rimosso alcune funzionalità di validazione.

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Please enter an email address:</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <!-- Some legacy browsers need to have the `type` attribute
-       explicitly set to `submit` on the `button`element -->
-  <button type="submit">Submit</button>
-</form>
- -

Allo stesso modo, anche il CSS non necessita di grandi modifiche; abbiamo solo trasformato la pseudoclasse {{cssxref(":invalid")}} in una vera classe ed evitato di usare il selettore di attiributo che non funziona con Internet Explorer 6.

- -
body {
-  font: 1em sans-serif;
-  width: 200px;
-  padding: 0;
-  margin : 0 auto;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -

Le modifiche maggiori sono nel codice JavaScript, che richiede una revisione molto più pesante.

- -
// There are fewer ways to pick a DOM node with legacy browsers
-const form  = document.getElementsByTagName('form')[0];
-const email = document.getElementById('mail');
-
-// The following is a trick to reach the next sibling Element node in the DOM
-// This is dangerous because you can easily build an infinite loop.
-// In modern browsers, you should prefer using element.nextElementSibling
-let error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// As per the HTML5 Specification
-const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Many legacy browsers do not support the addEventListener method.
-// Here is a simple way to handle this; it's far from the only one.
-function addEvent(element, event, callback) {
-  let previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    const output = callback(e);
-
-    // A callback that returns `false` stops the callback chain
-    // and interrupts the execution of the event callback.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Now we can rebuild our validation constraint
-// Because we do not rely on CSS pseudo-class, we have to
-// explicitly set the valid/invalid class on our email field
-addEvent(window, "load", function () {
-  // Here, we test if the field is empty (remember, the field is not required)
-  // If it is not, we check if its content is a well-formed e-mail address.
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// This defines what happens when the user types in the field
-addEvent(email, "input", function () {
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// This defines what happens when the user tries to submit the data
-addEvent(form, "submit", function () {
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Some legacy browsers do not support the event.preventDefault() method
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

Il risultato assomiglia a questo:

- -

{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}

- -

Come puoi vedere, non è proprio così difficile costruire un tuo sistema di validazione. La parte difficile è di renderlo abbastanza generico da essere usato su tutte le piattaforme e con ogni form che andarai a creare. Ci sono anche molte librerie pronte che ti aiuntano nella validazione come ad esempio Validate.js.

- -

Metti alla prova le tue capacità!

- -

Sei arrivato alla fine di questo articolo, ma riesci a ricordare le informazioni più importanti? Puoi trovare alcuni ulteriori test per verificare che tu abbia recepito questi informazioni prima di proseguire — vedi Test your skills: Form validation.

- -

Sommario

- -

La validazione delle form lato client alle volte richiede JavaScript se desideri configurare lo stile ed i messaggi di errore, ma richiede sempre che tu pensi attentamente all'utente. Ricordati sempre di guidare l'utente ad inserire dati corretti. Quindi assicurati di:

- - - -

Quando hai controllato che la form è stata compilata correttamente, la puoi inviare. In seguito spieghiamo come spedire i dati delle form.

- -

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

- -

In questo modulo

- - - -

Argomenti avanzati

- - diff --git a/files/it/learn/html/forms/index.html b/files/it/learn/html/forms/index.html deleted file mode 100644 index 45c0d055dd..0000000000 --- a/files/it/learn/html/forms/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: HTML forms -slug: Learn/HTML/Forms -tags: - - Beginner - - Featured - - Forms - - Guide - - HTML - - Landing - - Learn - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

Questo modulo fornisce una serie di articoli che ti aiuteranno ad apprendere le parti essenziali dei web forms. I web forms sono dei tool molto potenti per l'interazione con gli utenti - sono usati di solito per la raccolta di dati dagli utenti, o per permettere loro di controllare l'interfaccia utente. Tuttavia, per questioni storiche e tecniche non è sempre chiaro come sfruttare tutto il loro potenziale. Negli articoli che seguono, copriremo tutti gli aspetti essenziali dei web forms includendo anche la realizzazione della loro struttura HTML, dello stile dei controlli del form, della validazione dei dati del form, e dell'invio dei dati al server.

- -

Prerequisiti

- -

Prima di iniziare questo modulo, dovresti almeno affrontare la nostra parte di introduzione all'HTML A questo punto dovresti trovare le {{anch("guide introduttive")}} facili da capire, e dovresti anche sapere utilizzare la guida base sui Native form controls.

- -

Sapere utilizzare perfettamente i forms, comunque, richede molto più della semplice conoscenza HTML - avrai anche bisogno di imparare alcune specifiche tecniche per dare uno stile ai controlli del form, ed è richiesta anche un pò di conoscenza di scripting per affronte cose come la validazione e la creazione di controlli del form personalizzati. Pertanto, prima di andare ad affrontare le altre sezioni presenti qui sotto, ti raccomandiamo di abbandonare questa pagina ed imparare prima un pò di CSS e Javascript.

- -

Il paragrafo qui sopra spiega bene il perchè abbiamo messo i web forms in una pagina a solo, piuttosto che mischiare un pò di questi contenuti nelle aree delle pagine che spiegano HTML, CSS e Javascript — gli elementi del form sono molto più complessi rispetto a tutti gli altri elementi HTML, e richiedono anche un connubio perfetto con le tecniche CSS e Javascript per ottenere il massimo da loro.

- -
-

Nota bene: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi file, dovresti provare gli esempi di codice su un programma di coding online come JSBin o Glitch

-
- -

Guida introduttiva

- -
-
Il tuo primo form HTML
-
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
-
How to structure an HTML form
-
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
-
- -

What form widgets are available?

- -
-
The native form widgets
-
We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.
-
- -

Validating and submitting form data

- -
-
Sending form data
-
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
-
Form data validation
-
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
-
- -

Advanced guides

- -
-
How to build custom form widgets
-
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
-
Sending forms through JavaScript
-
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
-
HTML forms in legacy browsers
-
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
-
- -

Form styling guides

- -
-
Styling HTML forms
-
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
-
Advanced styling for HTML forms
-
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
-
Property compatibility table for form widgets
-
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
-
- -

See also

- - diff --git a/files/it/learn/html/howto/use_data_attributes/index.html b/files/it/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..f256a42aaf --- /dev/null +++ b/files/it/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,82 @@ +--- +title: Uso degli attributi data +slug: Learn/HTML/Howto/Uso_attributi_data +tags: + - Attributi Di Dati Personalizzati + - Esempi + - Guide + - HTML + - HTML5 + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I data-* attributes ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.

+ +

Sintassi HTML

+ +

La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con data- è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo data per ottenere ciò:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Accesso mediante JavaScript

+ +

Accedere ai valori di questi attributi mediante JavaScript è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Per ottenere un attributo data attraverso l'oggetto dataset, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo data- (notare che i trattini vengono converti in camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare article.dataset.columns = 5 cambierebbe il valore dell'attributo a "5".

+ +

Accesso mediante CSS

+ +

E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via CSS. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere contenuti generati in CSS con la funzione {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

E' possibile anche utilizzare i selettori d'attributi in CSS  per cambiare lo stile in base ai dati:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

E' possibile vedere tutto ciò all'opera in questo esempio JSBin. 

+ +

Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi questo screencast per vedere un esempio che utilizza contenuti generati e transizioni CSS  (esempio JSBin).

+ +

I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.

+ +

Problemi

+ +

Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.

+ +

Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti non supportano dataset. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. Inoltre, le prestazioni di lettura degli attributi data rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse. Inoltre, la performance di lettura degli attributi data comparata alla memorizzazione in un oggetto JavaScript è bassa.

+ +

Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.

+ +

In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).

+ +

Vedi anche

+ + diff --git a/files/it/learn/html/howto/uso_attributi_data/index.html b/files/it/learn/html/howto/uso_attributi_data/index.html deleted file mode 100644 index f256a42aaf..0000000000 --- a/files/it/learn/html/howto/uso_attributi_data/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Uso degli attributi data -slug: Learn/HTML/Howto/Uso_attributi_data -tags: - - Attributi Di Dati Personalizzati - - Esempi - - Guide - - HTML - - HTML5 - - Web -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -
{{LearnSidebar}}
- -

HTML5 è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I data-* attributes ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.

- -

Sintassi HTML

- -

La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con data- è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo data per ottenere ciò:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

Accesso mediante JavaScript

- -

Accedere ai valori di questi attributi mediante JavaScript è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Per ottenere un attributo data attraverso l'oggetto dataset, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo data- (notare che i trattini vengono converti in camelCase).

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare article.dataset.columns = 5 cambierebbe il valore dell'attributo a "5".

- -

Accesso mediante CSS

- -

E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via CSS. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere contenuti generati in CSS con la funzione {{cssxref("attr")}}:

- -
article::before {
-  content: attr(data-parent);
-}
- -

E' possibile anche utilizzare i selettori d'attributi in CSS  per cambiare lo stile in base ai dati:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

E' possibile vedere tutto ciò all'opera in questo esempio JSBin. 

- -

Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi questo screencast per vedere un esempio che utilizza contenuti generati e transizioni CSS  (esempio JSBin).

- -

I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.

- -

Problemi

- -

Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.

- -

Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti non supportano dataset. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. Inoltre, le prestazioni di lettura degli attributi data rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse. Inoltre, la performance di lettura degli attributi data comparata alla memorizzazione in un oggetto JavaScript è bassa.

- -

Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.

- -

In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).

- -

Vedi anche

- - diff --git a/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html deleted file mode 100644 index e5496dcb1a..0000000000 --- a/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html +++ /dev/null @@ -1,953 +0,0 @@ ---- -title: Fondamenti di testo HTML -slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Imparare/HTML/Introduzione_all_HTML/I_metadati_del_head_HTML", "Imparare/HTML/Introduzione_all_HTML/Creazione_di_collegamenti_ipertestuali", "Imparare/HTML/Introduzione_all_HTML")}}
- -

Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come {{glossary("semantica")}}) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'{{glossary ("HTML")}} può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza di base dell'HTML, come spiegato in Getting started with HTML.
Obiettivi:Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.
- -

Le basi: Intestazioni e paragrafi

- -

Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.

- -

In HTML, ogni paragrafo dev'essere racchiuso in un elemento {{htmlelement("p")}}, in questo modo:

- -
<p>Sono un paragrafo, oh si lo sono.</p>
- -

Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:

- -
<h1>Sono il titolo della storia.</h1>
- -

Ci sono sei elementi di intestazione — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, e {{htmlelement("h6")}}. Ogni elemento rappresenta un livello di contenuto differente nel documento; <h1> rappresenta l'intestazione principale, <h2> rappresenta i sottotitoli, <h3> rappresenta i sub-sottovoci, e cosi via.

- -

Implementazione della gerarchia strutturale

- -

Come esempio, in una storia, <h1> rappresenterebbe il titolo della storia, <h2> rappresenterebbe il titolo di ogni capitolo e <h3> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.

- -
<h1>La noia schiacciante</h1>
-
-<p>Di Chris Mills</p>
-
-<h2>Capitolo 1: La notte scura</h2>
-
-<p>Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...</p>
-
-<h2>Capitolo 2: Il silenzio eterno</h2>
-
-<p>Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...</p>
-
-<h3>Lo spettro parla</h3>
-
-<p>Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"</p>
- -

Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:

- - - -

Perché abbiamo bisogno di una struttura?

- -

Per rispondere a questa domanda, diamo un'occhiata a  text-start.html — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).

- -

Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!

- -

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

- -

Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:

- - - -

Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.

- -

Apprendimento attivo: Dare una struttura al nostro contenuto

- -

Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo Input in modo che appaia come un'intestazione e due paragrafi nel campo  Output.

- -

In caso di errore, puoi sempre ripartire da zero usando il pulsante Reset. Se ti blocchi, premi il pulsante Show solution per vedere la risposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Perché abbiamo bisogno delle semantiche?

- -

Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai".  Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)

- -

Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento {{htmlelement("h1")}} è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".

- -
<h1>This is a top level heading</h1>
- -

Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).

- -

Dall'atro lato, potresti far sembrare qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:

- -
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
- -

Questo è un elemento {{htmlelement("span")}}. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.

- -

Liste

- -

Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.

- -

Puntata

- -

La lista puntanta viene utilizzata come mark up per elementi di cui l'ordine non è importante — prepara la tua lista della spesa.

- -
milk
-eggs
-bread
-hummus
- -

Ogni lista puntata comincia con un {{htmlelement("ul")}} che racchiude la lista:

- -
<ul>
-milk
-eggs
-bread
-hummus
-</ul>
- -

L'ultimo step è racchiudere ogni elemento della lista con {{htmlelement("li")}} (list item):

- -
<ul>
-  <li>milk</li>
-  <li>eggs</li>
-  <li>bread</li>
-  <li>hummus</li>
-</ul>
- -

Apprendimento attivo: prepara la tua lista a punti

- -

Prova a editare in diretta l'esempio sottostante per creare la tua lista puntata in HTML.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Numerata

- -

La lista numerata viene utilizzata per elementi di cui l'ordine è importante — ecco un esempio:

- -
Drive to the end of the road
-Turn right
-Go straight across the first two roundabouts
-Turn left at the third roundabout
-The school is on your right, 300 meters up the road
- -

La struttura è la stessa della lista puntata ad eccezione che chiuderai la lista di elementi con  {{htmlelement("ol")}} element, al posto del <ul>:

- -
<ol>
-  <li>Drive to the end of the road</li>
-  <li>Turn right</li>
-  <li>Go straight across the first two roundabouts</li>
-  <li>Turn left at the third roundabout</li>
-  <li>The school is on your right, 300 meters up the road</li>
-</ol>
- -

Active learning: Marking up an ordered list

- -

Try editing the live sample below to create your very own HTML ordered list.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Active learning: Marking up our recipe page

- -

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

- - - -

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

- -

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

- -

Nesting lists

- -

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.</li>
-  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
-  <li>If you want a smooth hummus, process it for a longer time.</li>
-</ol>
- -

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.
-    <ul>
-      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
-      <li>If you want a smooth hummus, process it for a longer time.</li>
-    </ul>
-  </li>
-</ol>
- -

Try going back to the previous active learning example and updating the second list like this.

- -

Emphasis and importance

- -

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

- -

Emphasis

- -

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

- -

I am glad you weren't late.

- -

I am glad you weren't late.

- -

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

- -

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)

- -
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
- -

Strong importance

- -

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

- -

This liquid is highly toxic.

- -

I am counting on you. Do not be late!

- -

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)

- -
<p>This liquid is <strong>highly toxic</strong>.</p>
-
-<p>I am counting on you. <strong>Do not</strong> be late!</p>
- -

You can nest strong and emphasis inside one another if desired:

- -
<p>This liquid is <strong>highly toxic</strong> —
-if you drink it, <strong>you may <em>die</em></strong>.</p>
- -

Active learning: Let's be important!

- -

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Italic, bold, underline...

- -

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

- -

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

- -

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

- - - -
-

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

-
- -
<!-- scientific names -->
-<p>
-  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
-  is the most common hummingbird in Eastern North America.
-</p>
-
-<!-- foreign words -->
-<p>
-  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- a known misspelling -->
-<p>
-  Someday I'll learn how to <u>spel</u> better.
-</p>
-
-<!-- Highlight keywords in a set of instructions -->
-<ol>
-  <li>
-    <b>Slice</b> two pieces of bread off the loaf.
-  </li>
-  <li>
-    <b>Insert</b> a tomato slice and a leaf of
-    lettuce between the slices of bread.
-  </li>
-</ol>
- -

Summary

- -

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

- -

In this module

- - diff --git a/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..e5496dcb1a --- /dev/null +++ b/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,953 @@ +--- +title: Fondamenti di testo HTML +slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Imparare/HTML/Introduzione_all_HTML/I_metadati_del_head_HTML", "Imparare/HTML/Introduzione_all_HTML/Creazione_di_collegamenti_ipertestuali", "Imparare/HTML/Introduzione_all_HTML")}}
+ +

Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come {{glossary("semantica")}}) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'{{glossary ("HTML")}} può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza di base dell'HTML, come spiegato in Getting started with HTML.
Obiettivi:Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.
+ +

Le basi: Intestazioni e paragrafi

+ +

Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.

+ +

In HTML, ogni paragrafo dev'essere racchiuso in un elemento {{htmlelement("p")}}, in questo modo:

+ +
<p>Sono un paragrafo, oh si lo sono.</p>
+ +

Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:

+ +
<h1>Sono il titolo della storia.</h1>
+ +

Ci sono sei elementi di intestazione — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, e {{htmlelement("h6")}}. Ogni elemento rappresenta un livello di contenuto differente nel documento; <h1> rappresenta l'intestazione principale, <h2> rappresenta i sottotitoli, <h3> rappresenta i sub-sottovoci, e cosi via.

+ +

Implementazione della gerarchia strutturale

+ +

Come esempio, in una storia, <h1> rappresenterebbe il titolo della storia, <h2> rappresenterebbe il titolo di ogni capitolo e <h3> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.

+ +
<h1>La noia schiacciante</h1>
+
+<p>Di Chris Mills</p>
+
+<h2>Capitolo 1: La notte scura</h2>
+
+<p>Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...</p>
+
+<h2>Capitolo 2: Il silenzio eterno</h2>
+
+<p>Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...</p>
+
+<h3>Lo spettro parla</h3>
+
+<p>Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"</p>
+ +

Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:

+ + + +

Perché abbiamo bisogno di una struttura?

+ +

Per rispondere a questa domanda, diamo un'occhiata a  text-start.html — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).

+ +

Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:

+ + + +

Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.

+ +

Apprendimento attivo: Dare una struttura al nostro contenuto

+ +

Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo Input in modo che appaia come un'intestazione e due paragrafi nel campo  Output.

+ +

In caso di errore, puoi sempre ripartire da zero usando il pulsante Reset. Se ti blocchi, premi il pulsante Show solution per vedere la risposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Perché abbiamo bisogno delle semantiche?

+ +

Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai".  Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)

+ +

Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento {{htmlelement("h1")}} è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".

+ +
<h1>This is a top level heading</h1>
+ +

Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).

+ +

Dall'atro lato, potresti far sembrare qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

Questo è un elemento {{htmlelement("span")}}. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.

+ +

Liste

+ +

Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.

+ +

Puntata

+ +

La lista puntanta viene utilizzata come mark up per elementi di cui l'ordine non è importante — prepara la tua lista della spesa.

+ +
milk
+eggs
+bread
+hummus
+ +

Ogni lista puntata comincia con un {{htmlelement("ul")}} che racchiude la lista:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

L'ultimo step è racchiudere ogni elemento della lista con {{htmlelement("li")}} (list item):

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Apprendimento attivo: prepara la tua lista a punti

+ +

Prova a editare in diretta l'esempio sottostante per creare la tua lista puntata in HTML.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Numerata

+ +

La lista numerata viene utilizzata per elementi di cui l'ordine è importante — ecco un esempio:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

La struttura è la stessa della lista puntata ad eccezione che chiuderai la lista di elementi con  {{htmlelement("ol")}} element, al posto del <ul>:

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

Active learning: Marking up an ordered list

+ +

Try editing the live sample below to create your very own HTML ordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: Marking up our recipe page

+ +

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

+ +

Nesting lists

+ +

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+  <li>If you want a smooth hummus, process it for a longer time.</li>
+</ol>
+ +

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

Try going back to the previous active learning example and updating the second list like this.

+ +

Emphasis and importance

+ +

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

+ +

Emphasis

+ +

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

+ +

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

Strong importance

+ +

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

You can nest strong and emphasis inside one another if desired:

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Active learning: Let's be important!

+ +

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Italic, bold, underline...

+ +

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

+ +

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

+ +

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

+ + + +
+

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u>spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

Summary

+ +

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html deleted file mode 100644 index de092cd8b9..0000000000 --- a/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: Cosa c'è nella head? Metadata in HTML -slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML -tags: - - Guida - - HTML - - Principiante - - favicon - - head - - lang - - metadata -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
- -

La {{glossary("Head", "head")}} di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il {{htmlelement("title")}}, della pagina, i link ai {{glossary("CSS")}} (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.

- - - - - - - - - - - - -
Prerequisiti:Familiarità con le basi di HTML, spiegate in Cominciare con l'HTML.
Obbiettivi:Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.
- -

Cosa è la head?

- -

Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <p>This is my page</p>
-  </body>
-</html>
- -

La head HTML è il contenuto dell'elemento {{htmlelement("head")}} — diversamente dal contenuto dell'elemento {{htmlelement("body")}} (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei {{glossary("Metadata", "metadata")}} relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:

- -
<head>
-  <meta charset="utf-8">
-  <title>My test page</title>
-</head>
- -

In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i developer tools esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.

- -

Aggiungere un title

- -

Abbiamo già visto l'elemento {{htmlelement("title")}} in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento {{htmlelement("h1")}} che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!

- - - -

Active learning: esaminare un sempice esempio.

- -
    -
  1. Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina title-example.html. Per farlo puoi usare uno dei due modi seguenti: - -
      -
    1. copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;
      2. -
    2. Premere il tasto "Raw" nella pagina, scegliere File > Save Page As... nel menù del browser e scegliere un posto in cui salvarlo.
      3. -
    -
    2. -
  2. Adesso apri il file nel browser. Dovresti vedere questo: -

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <h1> e dove appare il contenutodell'elemento <title>!

    -
    3. -
  3. Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!
    4. -
- -

Il contenuto dell'elemento <title> è anche usato in altri modi. Per esempio, se provi a salvare  la pagina nei preferiti (Bookmarks > Bookmark This Page, in Firefox), vedrai il contenuto del <title> come nome suggerito per il segnalibro.

- -

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

- -

Il <title> è usato anche nelle ricerche, come vedrai più avanti.

- -

Metadata: l'elemento <meta>

- -

I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento {{htmlelement("meta")}}. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <meta> che possono essere inseriti nella <head> del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.

- -

Specificare la codifica dei caratteri del documento

- -

Nell'esempio che abbiamo visto, c'era questa riga:

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

Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare.  utf-8 è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:

- -

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se imposti il set di caratteri ISO-8859-1, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:

- -

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

- -

Active learning: esercitarsi con la codifica dei caratteri

- -

Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <title> (il title-example.html), prova a cambiare il set dei caratteri (il valore di charset) a ISO-8859-1 e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Aggiungere l'autore e la descrizione

- -

Molti elementi <meta> includono gli attributi name e content :

- - - -

Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="The MDN Learning Area aims to provide
-complete beginners to the Web with all they need to know to get
-started with developing web sites and applications.">
- -

Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.

- -

Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in Search Engine Optimization, o {{glossary("SEO")}}.)

- -

Active learning: L'uso della descrizione nei motori di ricerca

- -

La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.

- -
    -
  1. Vai alla prima pagina di The Mozilla Developer Network.
    2. -
  2. Guarda il sorgente della pagina (Right/Ctrl + click sulla pagina, nel menù contestuale scegli View Page Source/Visualizza sorgente pagina).
    3. -
  3. Trova il meta tag description. Sarà così: - 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both
-Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    -
    4. -
  4. Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <meta> description e il contenuto dell'elemento <title> usati nei risultati della ricerca. — Vale decisamente la pena averli! -

    A Yahoo search result for "Mozilla Developer Network"

    -
    5. -
- -
-

Note: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (Google's webmaster tools) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.

-
- -
-

Note: Molte proprietà <meta> non sono più usate. Per esempio, l'elemento <meta> keyword  — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.

-
- -

Altri tipi di metadata

- -

Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.

- -

Per esempio, Open Graph Data è un insieme di metadata (un protocollo) che Facebook ha inventato per  avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:

- -
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both Web sites
-and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Aggiungere icone personalizzate al tuo sito

- -

Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.

- -

Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :

- -
    -
  1. Salvandole nella stessa directory in cui è salvato il file index.html nel formato .ico (molti browser supportano le favicons in formati più comuni, come .gif or .png,  ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)
    2. -
  2. Aggiungendo la seguente riga nella <head> del docuemnto HTML per creare un riferimento all'icona: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.

- -

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

- -

Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:

- -
<!-- third-generation iPad with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- iPhone with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- first- and second-generation iPad: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- basic favicon -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.

- -

Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.

- -

Applicare CSS e JavaScript all'HTML

- -

Pressoché tutti i siti web, oggi, impiegano i {{glossary("CSS")}} per apparire fantastici e i  {{glossary("JavaScript")}} per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento {{htmlelement("link")}} e l'elemento {{htmlelement("script")}} rispettivamente.

- - - -

Active learning: applicare CSS e JavaScript ad una pagina

- -
    -
  1. Per iniziare questo apprendimento attivo, preleva una copia del nostro meta-example.html, dello script.js e del file style.css , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.
    2. -
  2. Apri il file HTML sia nel browser che nel tuo editor di testo
    3. -
  3. Seguendo le informazioni date precedentemente, aggiungi gli elementi {{htmlelement("link")}} e {{htmlelement("script")}} al tuo HTML così che il CSS e il JavaScript gli siano applicati.
    4. -
- -

Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").

- -

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

- - - -
-

Note: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio css-and-js.html.

-
- -

Impostare la lingua principale del documento

- -

In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo lang al tag HTML di apertura (come visto nel meta-example.html.)

- -
<html lang="en-US">
- -

Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)

- -

Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:

- -
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
- -

Questi codici sono definiti dalla ISO 639-1. Puoi trovare più informazioni a questo riguardo in Language tags in HTML and XML.

- - - -

Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..de092cd8b9 --- /dev/null +++ b/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,265 @@ +--- +title: Cosa c'è nella head? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML +tags: + - Guida + - HTML + - Principiante + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

La {{glossary("Head", "head")}} di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il {{htmlelement("title")}}, della pagina, i link ai {{glossary("CSS")}} (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.

+ + + + + + + + + + + + +
Prerequisiti:Familiarità con le basi di HTML, spiegate in Cominciare con l'HTML.
Obbiettivi:Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.
+ +

Cosa è la head?

+ +

Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

La head HTML è il contenuto dell'elemento {{htmlelement("head")}} — diversamente dal contenuto dell'elemento {{htmlelement("body")}} (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei {{glossary("Metadata", "metadata")}} relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i developer tools esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.

+ +

Aggiungere un title

+ +

Abbiamo già visto l'elemento {{htmlelement("title")}} in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento {{htmlelement("h1")}} che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!

+ + + +

Active learning: esaminare un sempice esempio.

+ +
    +
  1. Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina title-example.html. Per farlo puoi usare uno dei due modi seguenti: + +
      +
    1. copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;
      2. +
    2. Premere il tasto "Raw" nella pagina, scegliere File > Save Page As... nel menù del browser e scegliere un posto in cui salvarlo.
      3. +
    +
    2. +
  2. Adesso apri il file nel browser. Dovresti vedere questo: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <h1> e dove appare il contenutodell'elemento <title>!

    +
    3. +
  3. Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!
    4. +
+ +

Il contenuto dell'elemento <title> è anche usato in altri modi. Per esempio, se provi a salvare  la pagina nei preferiti (Bookmarks > Bookmark This Page, in Firefox), vedrai il contenuto del <title> come nome suggerito per il segnalibro.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

Il <title> è usato anche nelle ricerche, come vedrai più avanti.

+ +

Metadata: l'elemento <meta>

+ +

I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento {{htmlelement("meta")}}. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <meta> che possono essere inseriti nella <head> del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.

+ +

Specificare la codifica dei caratteri del documento

+ +

Nell'esempio che abbiamo visto, c'era questa riga:

+ +
<meta charset="utf-8">
+ +

Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare.  utf-8 è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se imposti il set di caratteri ISO-8859-1, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +

Active learning: esercitarsi con la codifica dei caratteri

+ +

Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <title> (il title-example.html), prova a cambiare il set dei caratteri (il valore di charset) a ISO-8859-1 e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Aggiungere l'autore e la descrizione

+ +

Molti elementi <meta> includono gli attributi name e content :

+ + + +

Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.

+ +

Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in Search Engine Optimization, o {{glossary("SEO")}}.)

+ +

Active learning: L'uso della descrizione nei motori di ricerca

+ +

La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.

+ +
    +
  1. Vai alla prima pagina di The Mozilla Developer Network.
    2. +
  2. Guarda il sorgente della pagina (Right/Ctrl + click sulla pagina, nel menù contestuale scegli View Page Source/Visualizza sorgente pagina).
    3. +
  3. Trova il meta tag description. Sarà così: + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <meta> description e il contenuto dell'elemento <title> usati nei risultati della ricerca. — Vale decisamente la pena averli! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Note: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (Google's webmaster tools) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.

+
+ +
+

Note: Molte proprietà <meta> non sono più usate. Per esempio, l'elemento <meta> keyword  — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.

+
+ +

Altri tipi di metadata

+ +

Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.

+ +

Per esempio, Open Graph Data è un insieme di metadata (un protocollo) che Facebook ha inventato per  avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Aggiungere icone personalizzate al tuo sito

+ +

Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.

+ +

Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :

+ +
    +
  1. Salvandole nella stessa directory in cui è salvato il file index.html nel formato .ico (molti browser supportano le favicons in formati più comuni, come .gif or .png,  ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)
    2. +
  2. Aggiungendo la seguente riga nella <head> del docuemnto HTML per creare un riferimento all'icona: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.

+ +

Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.

+ +

Applicare CSS e JavaScript all'HTML

+ +

Pressoché tutti i siti web, oggi, impiegano i {{glossary("CSS")}} per apparire fantastici e i  {{glossary("JavaScript")}} per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento {{htmlelement("link")}} e l'elemento {{htmlelement("script")}} rispettivamente.

+ + + +

Active learning: applicare CSS e JavaScript ad una pagina

+ +
    +
  1. Per iniziare questo apprendimento attivo, preleva una copia del nostro meta-example.html, dello script.js e del file style.css , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.
    2. +
  2. Apri il file HTML sia nel browser che nel tuo editor di testo
    3. +
  3. Seguendo le informazioni date precedentemente, aggiungi gli elementi {{htmlelement("link")}} e {{htmlelement("script")}} al tuo HTML così che il CSS e il JavaScript gli siano applicati.
    4. +
+ +

Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Note: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio css-and-js.html.

+
+ +

Impostare la lingua principale del documento

+ +

In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo lang al tag HTML di apertura (come visto nel meta-example.html.)

+ +
<html lang="en-US">
+ +

Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)

+ +

Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Questi codici sono definiti dalla ISO 639-1. Puoi trovare più informazioni a questo riguardo in Language tags in HTML and XML.

+ + + +

Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html b/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html deleted file mode 100644 index 3c15046cd4..0000000000 --- a/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Contenuti video e audio -slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

Adesso che siamo pratici con l'aggiunta di immagini, il passo successivo è cominciare ad aggiungere lettori video e audio ai documenti HTML. In questo articolo vedremo come farlo, con gli elementi {{htmlelement("video")}} e {{htmlelement("audio")}}; finiremo dando uno sguardo a come si aggiungono i sottotitoli ai video.

- - - - - - - - - - - - -
Prerequisiti:Competenze base sui computer, software di base installato, conoscenze base di gestione dei file (working with files), familiarità coi fondamenti di HTML (come trattati in Cominciare con l'HTML) e con Immagini in HTML.
Obbiettivi:Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.
- -

Audio e video nel web

- -

Gli sviluppatori Web han voluto usare video e audio per lungo tempo, fin dai primi anni del terzo millennio, quando abbiamo cominciato ad avere la banda larga, veloce abbastanza da supportare ogni tipo di video (i file video sono molto più grandi dei file testo o immagine). Nei primi tempi, le tecnologie nate per il web, come l'HTML, non avevano la capacità di integrare video e audio nel web, così, per poterlo fare, sono diventate popolari delle tecnologie proprietarie (e i plugin basati su di esse), come Flash (e più tardi Silverlight). Questo tipo di tecnologie funziona bene, ma ha numerosi problemi, tra cui: non essere ben integrate con HTML/CSS, problemi di sicurezza e di accessibilità.

- -

Una soluzione nativa, sviluppata apposta, avrebbe risolto molti di questi problemi. Fortunatamente, pochi anni dopo, la specifica {{glossary("HTML5")}} aveva queste caratteristiche, conferite dall'aggiunta degli elementi {{htmlelement("video")}} e {{htmlelement("audio")}} e di alcune brillanti nuove {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per il loro controllo. Non vedremo JavaScript qui — vedremo solo le fondamenta che possono essere ottenute con l'HTML.

- -

Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo campioni audio, video e esempi di codice per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.

- -
-

Nota: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi {{glossary("OVP","OVPs")}} (online video providers - fornitori di video online) come YouTube, Dailymotion, e Vimeo, e fornitori di audio online, come Soundcloud. Queste compagnie offrono un modo comodo e facile per pubblicare e fruire di video, così che tu non ti debba preoccupare dell'enorme consumo di banda. Queste compagnie OVP, in genere, offrono anche il codice da usare per integrare video/audio nelle tue pagine web. Se segui questa strada puoi evitare alcune delle difficoltà di cui discutiamo in questo articolo. Vedremo un po meglio questo tipo di servizi nel prossimo articolo.

-
- -

L'elemento <video>

- -

L'elemento {{htmlelement("video")}} permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:

- -
<video src="rabbit320.webm" controls>
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
-</video>
- -

Le caratteristiche sono:

- -
-
{{htmlattrxref("src","video")}}
-
Come per l'elemento {{htmlelement("img")}}, l'attributo src contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.
-
{{htmlattrxref("controls","video")}}
-
Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di epilessia). Si può usare sia l'attributo controls per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate API JavaScript. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.
-
Il paragrafo tra i tag <video>
-
Questo paragrafo è chiamato fallback content (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <video>, offrendo un'alternativa per i vecchi browser. Può essere qualunque cosa vogliate; si può ad esempio fornire un collegamento diretto al file video, così che l'utente possa accedervi in qualche modo, indipendentemente dal browser che usa.
-
- -

Il video integrato apparirà più o meno così:

- -

A simple video player showing a video of a small white rabbit

- -

Puoi provare l'esempio qui: try the example (vedi anche il codice sorgente).

- -

Supportare molti formati

- -

C'è un problema con l'esempio qui sopra, che potresti aver già notato se hai provato ad accedere il live link con un browser come Safari o Internet Explorer. Il video non parte! Ciò è dovuto al fatto che i browser supportano formati video (e audio) diversi.

- -

Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati container formats (formati container). Contengono diverse parti che costituiscono l'intera canzone o video — come un'unica traccia audio (o un unica traccia video nel caso dei video) e i metadati per descrivere il media (mezzo espressivo) che viene presentato.

- -

Anche le tracce audio e video hanno diversi formati, per esempio:

- - - -

Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.

- -
-

Nota: non è così semplice, come puoi vedere nella nostra tabella audio-video codec compatibility table. Inoltre, molti browser dei portatili possono riprodurre un formato non supportato passandone la gestione al media player del sistema perché lo riproduca. Ma per ora ce n'è già abbastanza.

-
- -

I formati precedenti esistono per comprimere i video e gli audio in file maneggiabili (i video e gli audio originali sono molto pesanti). I browser contengono differenti {{Glossary("Codec","Codecs")}}, come Vorbis o H.264, che sono usati per covertire i video e gli audio compressi in file binari e viceversa. Come già detto, sfortunatamente, non tutti i borwser supportano gli stessi codecs, così si dovranno fornire molti file, per ogni riproduttore di media. Se manca il giusto codec per decodificare il media, questo non si avvierà.

- -
-

Nota: ti potresti chiedere il perché di questa situazione. I formati MP3 (for audio) and MP4/H.264 (for video) sono entrambi ampiamente supportati e di buona qualità. Tuttavia, sono anche ricoperti da brevetto — Il brevetto americano copre MP3 fino almeno al 2017, e H.264 fino al 2027 come minimo; ciò significa che i browser che non detengono il brevetto devono pagare parecchio per poter supportare questi formati. Inoltre, molte persone evitano per principio i software con delle restrizioni, in favore dei formati aperti.

-
- -

Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente updated example (try it live here, also):

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
- -

Qui abbiamo tirato fuori l'attributo src dal tag <video> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <source> e riprodurrà il primo per il quale ha il codec. Includere i formati WebM e MP4 dovrebbe essere sufficiente a riprodurre il tuo video sulla maggioranza delle piattaforme e dei browser di oggi.

- -

Ogni elemento <source> ha un attributo type; è opzionale, ma è consigliato metterlo — contiene i {{glossary("MIME type","MIME types")}} dei file video e i browser possono leggerli e scartare immediatamente i formati che non capiscono. Se non viene messo, i browser dovranno caricare i file e provare a riprodurli fino a che ne troveranno uno che funziona, usando molto più tempo e risorse.

- -
-

Nota: il nostro articolo sui formati media supportati contiene alcuni comuni {{glossary("MIME type","MIME types")}}.

-
- -

Altre caratteristiche dell'elemento <video>

- -

Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
-
- -

Questo ci darà un output simile a questo:

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Le nuove funzionalità sono:

- -
-
{{htmlattrxref("width","video")}} e {{htmlattrxref("height","video")}}
-
Puoi controllare la dimensione del video sia con questi attributi che con i {{Glossary("CSS")}}. In entrambi i casi i video mantengono il loro rapporto larghezza-altezza nativo, conosciuto come aspect ratio. Se il rapporto d'aspetto non è mantenuto dalle dimensioni impostate da te, il video sarà ridimensionato fino alla dimensione orizzontale e lo spazio non occupato verticalmente verrà riempito, di default, con uno sfondo colorato.
-
{{htmlattrxref("autoplay","video")}}
-
Questo attributo fa partire l'audio o il video immediatamente, durante il caricamento della pagina. Ti suggeriamo di non usare l'autoplay nel tuo sito, perché gli utenti possono trovarlo molto fastidioso.
-
{{htmlattrxref("loop","video")}}
-
Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.
-
{{htmlattrxref("muted","video")}}
-
Questo attributo fa si che il video parta con l'audio disattivato per default.
-
{{htmlattrxref("poster","video")}}
-
Questo attributo ha per valore l'URL di una immagine che sarà mostrata prima dell'avvio del video. Si suppone sia usata come schermata di lancio, promozionale.
-
- -

Puoi trovare gli esempi sopra su play live on Github (also see the source code). Nota che non abbiamo incluso l'attributo autoplay nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!

- -

L'elemento <audio>

- -

L'elemento {{htmlelement("audio")}} funziona esattamente come l'elemento {{htmlelement("video")}}, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
-</audio>
- -

Ciò produce qualcosa del genere, in un browser:

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Nota: Puoi riprodurre the audio demo live on Github (also see the audio player source code.)

-
- -

Questo occupa meno spazio di un player video, perché non c'è la componente visiva — devi solo visualizzare i controlli per l'audio. Altre differenze dall'HTML5 video sono queste:

- - - -

A parte ciò,  <audio> supporta tutte le caratteristiche di <video> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.

- -

Mostrare le traccie testuali (sottotitoli) dei video

- -

Adesso discuteremo un concetto leggermente più avanzato, che è molto utile conoscere. Molta gente non può o non vuole ascoltare il contenuto audio del web, almeno certe volte. Per esempio:

- - - -

Non sarebbe bello poter fornire a queste persone una trascrizione del testo enunciato nel video/audio? Bene, grazie all'HTML5 si può; con il formato WebVTT e l'elemento {{htmlelement("track")}}.

- -
-

Nota: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.

-
- -

WebVTT è un formato  per scrivere file di testo contenenti molteplici stringhe di testo insieme a metadati come il tempo a cui vuoi che ogni stringa sia mostrata e limitate informazioni relative allo stile e alla opsizione. Queste stringhe di testo sono chiamate cues (battute), e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:

- -
-
subtitles
-
Traduzioni di materiale straniero, per chi non capisce la lingua
-
captions
-
trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.
-
timed descriptions
-
testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.
-
- -

Un tipico file WebVTT appare così:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-  ...
-
- -

Per visualizzarlo insieme al riproduttore di media HTML, devi:

- -
    -
  1. salvarlo come file .vtt in un posto adatto
    2. -
  2. collegare il file .vttcon l'elemento {{htmlelement("track")}}. Questo elemento <track> deve essere annidato dentro <audio> o <video>, ma dopo tutti gli elementi <source>. Usa l'attributo {{htmlattrxref("kind","track")}} per specificare se le battute sono subtitles, captions, o descriptions. Inoltre, usa l'attributo {{htmlattrxref("srclang","track")}} per dire al browser in quale lingua sono scritti i sottotitoli.
    3. -
- -

Ecco un esempio:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

Ciò produrrà un video coi sottotitoli visualizzati più o meno così:

- -

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

Per avere più dettagli, leggi Adding captions and subtitles to HTML5 video. Puoi trovare l'esempio sviluppato in questo articolo qui: find the example, su Github, scritto da Ian Devlin (guarda anche il codice sorgente). Questo esempio usa alcuni JavaScript per permettere agli utenti di scegliere tra differenti sottotitoli. Nota che per attivare i sottotitoli, devi premere il bottone "CC" e selezionare un'opzione — English, Deutch, o Español. 

- -
-

Nota: le "Text tracks" ti aiutano anche con la {{glossary("SEO")}}, perché i motori di ricerca brillano particolarmente coi testi.  I sottotitoli (Text tracks/traccie di testo) permettono ai motori di ricerca, persino di linkare direttamente una certa parte del video.

-
- -

Active learning: Includere un proprio audio o video

- -

Per questo apprendimento attivo, ci piacerebbe che tu andassi fuori a registrare alcuni video tuoi — molti telefoni, oggi, consentono di registrare audio e video molto facilmente e se riesci a trasferirli sul tuo computer, li puoi usare. Potresti dover fare alcune conversioni per ottenere i formati WebM o MP4, per i video, oppure MP3 o Ogg, per l'audio, ma ci sono molti programmi che permettono di farlo senza problemi, come Miro Video Converter e Audacity. Ci piacerebbe che facessi un tentativo!

- -

Se non sai generare acun video o audio, allora puoi usare i nostri campioni di file video e audio per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.

- -

Ci piacerebbe che:

- -
    -
  1. salvassi i tuoi file audio e video in una nuova directory sul tuo computer,
    2. -
  2. creassi un nuovo file index.html nella stessa directory,
    3. -
  3. aggiungessi gli elementi <audio> e <video> alla pagina facendogli mostrare i controlli di default del browser,
    4. -
  4. dessi a entrambi degli elementi <source> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo type,
    5. -
  5. dessi all'elemento <video> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.
    6. -
- -

Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.

- -

Conclusioni

- -

Questo è quanto. Speriamo tu ti sia divertito/a a giocare con contenuti video e audio! Nel prossimo articolo vedremo altri modi per inserire contenuti nelle pagine web, usando tecnologie come gli {{htmlelement("iframe")}} e gli {{htmlelement("object")}}.

- -

Vedi anche

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -
-
- - diff --git a/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html b/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html deleted file mode 100644 index cc3dbd7892..0000000000 --- a/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Immagini reattive -slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

In questo articolo impareremo il concetto di "immagini reattive" (responsive images) — immagini che funzionano correttamente su dispositivi con monitor di dimensioni e risoluzioni  anche molto diverse — e vedremo quali strumenti l'HTML ci mette a disposizione per implementarle. Le immagini reattive sono solo una parte della progettazione di un web reattivo (responsive web design), e pongono delle buone basi per un argomento del quale si imparerà molto di più in un modulo seguente sui CSS.

-
- - - - - - - - - - - - -
Prerequisiti:Dovresti già conoscere basics of HTML e come aggiungere immagini a una pagina web.
Obiettivi:Imparare ad usare caratteristiche quali l'attributo {{htmlattrxref("srcset", "img")}} e l'elemento {{htmlelement("picture")}} per aggiungere immagini reattive ai siti web, usando diverse soluzioni.
- -

Perché le immagini reattive?

- -

Quale problema stiamo cercando di risolvere con le immagini reattive? Esaminiamo uno scenario tipico. Un sito web, probabilmente, avrà una immagine di testa (header image) per piacere ai visitatori, più, forse, altre immagini più giù nel contenuto. Probabilmente si vorrà che l'immagine di testa occupi l'intera larghezza della pagina e che le immagini nel contenuto riempiano le colonne. Vediamo un esempio:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

- -

Ciò funziona bene su un dispositivo con uno schermo ampio, come un laptop o un desktop (you can see the example live and find the source code on Github). Non discuteremo molto dei CSS, salvo che per dire questo:

- - - -

Così va bene, ma il problema arriva quando cominci a vedere il sito su un dispositivo con uno schermo stretto — l'immagine di testata si vede bene, ma inizia a prendere gran parte dell'altezza dello schermo per un dispositivo portatile; d'altra parte la prima immagine del contenuto si vede malissimo - a questa dimensione si possono appena vedere le persone.

- -

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

- -

Quando il sito è visualizzato su uno schermo stretto, sarebbe molto meglio mostrare una versione ritagliata dell'immagine che contenga i dettagli importanti dello scatto e magari una via di mezzo tra le due foto quando lo schermo è di media dimensione, come per i tablet. - Questa situazione è nota come art direction problem.

- -

Inoltre, non c'è bisogno di includere immagini così grandi se la pagina vien vista sui piccoli schermi dei portatili. - Questa è nota come resolution switching problem. Una immagine raster è definita da un certo numero di pixel di larghezza e da un certo numero in altezza; come abbiamo visto parlando di vector graphics, una immagine raster inizia a sgranarsi e a sfocarsi se è mostrata più grande della sua dimensione originale (ciò non accade per le immagini vettoriali), mentre se la visualizziamo più piccola stiamo sprecando banda per far scaricare un file immagine più pesante del necessario - specialmente gli utenti di dispositivi portatili non vogliono che questo accada dal momento che una piccola immagine farebbe a caso loro. Una soluzione ideale la si avrebbe se si avessero diverse immagini, con diverse dimensioni e risoluzioni, da caricare sui diversi dispositivi.

- -

A rendere le cose ancora più complicate, hanno schermi ad alta risoluzione che necessitano di immagini più grandi di quello che ci si potrebbe aspettare per apparire al meglio. Questo problema è essenzialmente analogo, ma in un contesto leggermente diverso.

- -

Si potrebbe pensare che le immagini vettoriali possano risolvere questi problemi e in certa misura lo fanno: sono leggere, vengono scalate (ingrandite in scala) bene e dove possibile le si dovrebbe usare. Tuttavia non sono adatte a qualsiasi tipo di immagine: mentre sono ottime per grafiche semplici, cominciano a diventare molto complesse per creare immagini con il livello di dettaglio che si vorrebbe per una foto. Le immagini raster dei formati come ad es. JPEG sono più adatte ai tipi di immagini che abbiamo visto negli esempi precedenti.

- -

Questo tipo di problemi non esisteva quando il web era agli esordi, nei primi anni 90: allora, gli unici dispositivi esistenti per navigare il web erano i desktop e i laptop, così i progettisti di browser e gli scrittori non dovevano pensare alle soluzioni. Le tecnologie per le immagini reattive (Responsive image technologies) sono state aggiunte di recente per risolvere i problemi accennati sopra, permettendoti di fornire al browser diversi file immagine, che contengono le stesse immagini ma ad una risoluzione diversa, con diverso numero di pixel (resolution switching), o immagini diverse adatte a spazi di allocazione di dimensione diversa (art direction.)

- -
-

Nota: Le nuove caratteristiche trattate in questo articolo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sono tutte supportate nelle versioni più aggiornate dei browser per desktop e per dispositivi mobili (incluso il browser Microsoft Edge, non da Internet Explorer.) 

-
- -

Come creare immagini reattive?

- -

In questa sezione, esamineremo i 2 problemi illustrati e mostreremo come risolverli usando le caratteristiche dell'HTML per le immagini reattive. Dovreste notare che ci concentreremo sull'elemento {{htmlelement("img")}} come trattato nell'esempio precedente — l'immagine nella header è solo decorativa e perciò è aggiunta usando i CSS. I CSS hanno probabilmente migliori strumenti per il responsive design dell'HTML; ne parleremo in un successivo modulo sui CSS.

- -

Cambiare risoluzione: dimensioni differenti

- -

Qual è il problema che vogliamo risolvere cambiando la risoluzione? Vogliamo mostrare una immagine identica, ma più grande o più piccola in funzione del dispositivo — è la situazione che abbiamo con la seconda immagine del nostro esempio. L'elemento standard {{htmlelement("img")}} tradizionalmente, permette solo di puntare a un singolo file sorgente.

- -
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

Tuttavia, possiamo usare 2 nuovi attributi — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} — per fornire molte sorgenti di immagine addizionali insieme a dei suggerimenti per aiutare il browser a prelevare quella giusta. Si può vedere un esempio nel nostro reponsive.html su Github (vedere anche il codice sorgente):

- -
<img srcset="elva-fairy-320w.jpg 320w,
-             elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 320px) 280px,
-            (max-width: 480px) 440px,
-            800px"
-     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

Gli attributi srcset e sizes sembrano complicati da capire, ma non lo sono poi tanto se li si formatta come mostrato qui sopra: con una parte del valore dell'attributo per riga. Ogni valore contiene una lista  separata da virgole e ogni parte della lista è fatta di 3 sottoparti. Esaminiamo il contenuto di ognuna:

- -

srcset definisce il set di immagini tra le quali vogliamo che il browser scelga e quali dimensioni hanno. Prima di ogni virgola, scriviamo:

- -
    -
  1. un nome di file immagine (elva-fairy-480w.jpg.)
    2. -
  2. uno spazio
    3. -
  3. la dimensione della larghezza dell'immagine in pixels (480w) — notate l'uso dell'unità w e non px come ci si potrebbe aspettare. Si tratta della reale dimensione dell'immagine, che si può trovare esaminando il file immagine sul computer (per esempio in un Mac si può selezionare l'immagine in  Finder, e premere Cmd + I per aprire la scheramta di informazioni).
    4. -
- -

sizes definisce un set di condizioni (ad es. la larghezza dello schermo) e indica quale dimensione di immagine sarebbe meglio scegliere quando si verificano quelle condizioni — questi sono i suggerimenti di cui si parlava prima. In questo caso, prima di ogni virgola scriviamo:

- -
    -
  1. una media condition ((max-width:480px)) — imparerete di più a questo riguardo nella sezione sui CSS, ma per adesso diciamo solo che la "media condition" descrive un possibile stato dello schermo. In questo caso, si stà dicendo: "quando la larghezza visualizzata è 480 pixels o meno".
    2. -
  2. uno spazio
    3. -
  3. La larghezza della posizione che l'immagine occuperà quando si realizza la condizione (440px.)
    4. -
- -
-

Nota: Per la larghezza della posizione, si può fornire una misura assoluta (px, em) o una relativa (come una percentuale). Potreste aver notato che l'ultima larghezza non ha media condition — questa è perciò la condizione di default che deve essere scelta quando nessuna delle condizioni sui dispositivi è vera. Il browser ignora tutto ciò che segue la prima condizione verificata, perciò bisogna fare attenzione all'ordine delle condizioni.

-
- -

Quindi, definiti questi attributi, il browser farà:

- -
    -
  1. verifica della larghezza del suo dispositivo
    2. -
  2. calcolo di quale sia la prima condizione tra la lista dell'atributo sizes ad essere vera
    3. -
  3. Look at the slot size given to that media query.
    4. -
  4. Caricamento dell'immagine elencata nell'attributo srcset che maggiormente si avvicina alla dimensione della posizione (slot) scelta.
    5. -
- -

Fatto! Così a questo punto, se un browser col supporto con una larghezza della viewport di 480px carica la pagina, la (max-width: 480px) media condition sarà vera, perciò verrà scelta la slot da 440px, quindi sarà caricata la elva-fairy-480w.jpg, poiché la sua larghezza (480w) è la più vicina ai 440px. L'immagine da 800px occupa 128KB su disco, mentre la versione da 480px solo 63KB — un risparmio di 65KB. Adesso immagina se fosse una pagina con molte immagini. Usando questa tecnica si può far risparmiare agli utenti mobile un sacco di  ampiezza di banda.

- -

I browser più vecchi che non supportano queste caratteristiche, semplicemente le ignoreranno e andranno avanti a caricare l'immagine indicata dall'attributo {{htmlattrxref("src", "img")}} come al solito.

- -
-

Note: nell'elemento {{htmlelement("head")}} del documento si troverà la linea <meta name="viewport" content="width=device-width">: questo obbliga i browser dei dispositivi mobili ad adottare la loro reale larghezza viewport per caricare le pagine web (alcuni browser mentono riguardo alla larghezza e caricano invece pagine a una risoluzione maggiore e poi la riducono, che non è molto utile con una progettazione o una immagine reattiva. Spiegheremo di più a questo proposito in un modulo successivo).

-
- -

Utili strumenti di sviluppo

- -

Ci sono alcuni utili developer tools nei browser, per aiutare a calcolare le necessarie larghezze slot, ecc. che si ha bisogno di usare. Mentre le stavo calcolando, prima di tutto ho caricato la versione non reattiva dell'esempio (not-responsive.html), poi sono andato in Responsive Design View (Tools > Web Developer > Responsive Design View - In Firefox, dal sandwich menù -> Sviluppo -> Modalità visualizzazione flessibile), che ti permette di guardare il layout della tua pagina come se fosse visto attraverso dispositivi con diversa dimensione dello schermo.

- -

Ho impostato la larghezza viewport a 320px e poi a 480px; per ciascuna sono andato nel DOM Inspector, ho cliccato sull'elemento {{htmlelement("img")}} a cui ero interessato e ho guardato la dimensione nella scheda vista Box Model sulla destra del monitor. Questo dovrebbe dare la larghezza dell'immagine di cui si ha bisogno.

- -

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

- -

Dopo, si può controllare se srcset sta funzionando impostando la larghezza viewport come si desidera (impostatela stretta, per esempio), aprendo il Network Inspector (Tools > Web Developer > Network), poi ricaricando la pagina. Questo dovrebbe dare una lista di risorse che sono state scaricate per per mostrare la pagina e quindi si potrà verificare quale file è stato scelto e scaricato.

- -

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

- -

Modificare la risoluzione: stessa dimensione, diverse risoluzioni

- -

Se stai supportando diverse risoluzioni, ma tutti vedono la tua immagine alla stessa dimensione reale sullo schermo, puoi permettere al browser di scegliere una immagine di risoluzione appropriata usando l'attributo srcset con il descrittore x (x-descriptors) e senza sizes — una sintassi piuttosto semplice! Puoi trovare un esempio di come appare in srcset-resolutions.html (vedere anche il codice sorgente):

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
-
- -

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn questo esempio è stato applicato il seguente CSS all'immagine per farle avere una larghezza di 320 pixels sullo schermo (also called CSS pixels):

- -
img {
-  width: 320px;
-}
- -

In questo caso sizes non è necessario — il browser calcola qual è la risoluzione del display su cui è mostrato e fornisce l'immagine più appropriata tra quelle elencate in srcset. Così se il dispositivo che accede alla pagina ha un display standard a bassa risoluzione, with one device pixel representing each CSS pixel, viene caricata l'immagine elva-fairy-320w.jpg (il descrittore 1x è implicito e non c'è bisogno di specificarlo.) Se il dispositivo ha una alta risoluzione di 2 pixel per ogni pixel CSS o più, viene caricata l'immagine elva-fairy-640w.jpg. L'immagine a 640px è di 93KB, mentre quella a 320px è di soli 39KB.

- -

Art direction

- -

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

- -

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

- -
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
- -

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, The <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. the code in responsive.html looks like so:

- -
<picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
-</picture>
-
- - - -

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

- -
-

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

-
- -

Why can't we just do this using CSS or JavaScript?

- -

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

- - - -

Use modern image formats boldly

- -

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

- -

<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

- -
<picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
-</picture>
-
- - - -

Active learning: Implementing your own responsive images

- -

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

- -
    -
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like)
    2. -
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)
    3. -
  3. Use the <picture> element to implement an art direction picture switcher!
    4. -
  4. Create multiple image files of different sizes, each showing the same picture.
    5. -
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. -
- -
-

Note: Use the browser devtools to help work out what sizes you need, as mentioned above.

-
- -

Summary

- -

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

- - - -

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.

- -

See also

- - - -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..cc3dbd7892 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,241 @@ +--- +title: Immagini reattive +slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

In questo articolo impareremo il concetto di "immagini reattive" (responsive images) — immagini che funzionano correttamente su dispositivi con monitor di dimensioni e risoluzioni  anche molto diverse — e vedremo quali strumenti l'HTML ci mette a disposizione per implementarle. Le immagini reattive sono solo una parte della progettazione di un web reattivo (responsive web design), e pongono delle buone basi per un argomento del quale si imparerà molto di più in un modulo seguente sui CSS.

+
+ + + + + + + + + + + + +
Prerequisiti:Dovresti già conoscere basics of HTML e come aggiungere immagini a una pagina web.
Obiettivi:Imparare ad usare caratteristiche quali l'attributo {{htmlattrxref("srcset", "img")}} e l'elemento {{htmlelement("picture")}} per aggiungere immagini reattive ai siti web, usando diverse soluzioni.
+ +

Perché le immagini reattive?

+ +

Quale problema stiamo cercando di risolvere con le immagini reattive? Esaminiamo uno scenario tipico. Un sito web, probabilmente, avrà una immagine di testa (header image) per piacere ai visitatori, più, forse, altre immagini più giù nel contenuto. Probabilmente si vorrà che l'immagine di testa occupi l'intera larghezza della pagina e che le immagini nel contenuto riempiano le colonne. Vediamo un esempio:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Ciò funziona bene su un dispositivo con uno schermo ampio, come un laptop o un desktop (you can see the example live and find the source code on Github). Non discuteremo molto dei CSS, salvo che per dire questo:

+ + + +

Così va bene, ma il problema arriva quando cominci a vedere il sito su un dispositivo con uno schermo stretto — l'immagine di testata si vede bene, ma inizia a prendere gran parte dell'altezza dello schermo per un dispositivo portatile; d'altra parte la prima immagine del contenuto si vede malissimo - a questa dimensione si possono appena vedere le persone.

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

Quando il sito è visualizzato su uno schermo stretto, sarebbe molto meglio mostrare una versione ritagliata dell'immagine che contenga i dettagli importanti dello scatto e magari una via di mezzo tra le due foto quando lo schermo è di media dimensione, come per i tablet. - Questa situazione è nota come art direction problem.

+ +

Inoltre, non c'è bisogno di includere immagini così grandi se la pagina vien vista sui piccoli schermi dei portatili. - Questa è nota come resolution switching problem. Una immagine raster è definita da un certo numero di pixel di larghezza e da un certo numero in altezza; come abbiamo visto parlando di vector graphics, una immagine raster inizia a sgranarsi e a sfocarsi se è mostrata più grande della sua dimensione originale (ciò non accade per le immagini vettoriali), mentre se la visualizziamo più piccola stiamo sprecando banda per far scaricare un file immagine più pesante del necessario - specialmente gli utenti di dispositivi portatili non vogliono che questo accada dal momento che una piccola immagine farebbe a caso loro. Una soluzione ideale la si avrebbe se si avessero diverse immagini, con diverse dimensioni e risoluzioni, da caricare sui diversi dispositivi.

+ +

A rendere le cose ancora più complicate, hanno schermi ad alta risoluzione che necessitano di immagini più grandi di quello che ci si potrebbe aspettare per apparire al meglio. Questo problema è essenzialmente analogo, ma in un contesto leggermente diverso.

+ +

Si potrebbe pensare che le immagini vettoriali possano risolvere questi problemi e in certa misura lo fanno: sono leggere, vengono scalate (ingrandite in scala) bene e dove possibile le si dovrebbe usare. Tuttavia non sono adatte a qualsiasi tipo di immagine: mentre sono ottime per grafiche semplici, cominciano a diventare molto complesse per creare immagini con il livello di dettaglio che si vorrebbe per una foto. Le immagini raster dei formati come ad es. JPEG sono più adatte ai tipi di immagini che abbiamo visto negli esempi precedenti.

+ +

Questo tipo di problemi non esisteva quando il web era agli esordi, nei primi anni 90: allora, gli unici dispositivi esistenti per navigare il web erano i desktop e i laptop, così i progettisti di browser e gli scrittori non dovevano pensare alle soluzioni. Le tecnologie per le immagini reattive (Responsive image technologies) sono state aggiunte di recente per risolvere i problemi accennati sopra, permettendoti di fornire al browser diversi file immagine, che contengono le stesse immagini ma ad una risoluzione diversa, con diverso numero di pixel (resolution switching), o immagini diverse adatte a spazi di allocazione di dimensione diversa (art direction.)

+ +
+

Nota: Le nuove caratteristiche trattate in questo articolo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sono tutte supportate nelle versioni più aggiornate dei browser per desktop e per dispositivi mobili (incluso il browser Microsoft Edge, non da Internet Explorer.) 

+
+ +

Come creare immagini reattive?

+ +

In questa sezione, esamineremo i 2 problemi illustrati e mostreremo come risolverli usando le caratteristiche dell'HTML per le immagini reattive. Dovreste notare che ci concentreremo sull'elemento {{htmlelement("img")}} come trattato nell'esempio precedente — l'immagine nella header è solo decorativa e perciò è aggiunta usando i CSS. I CSS hanno probabilmente migliori strumenti per il responsive design dell'HTML; ne parleremo in un successivo modulo sui CSS.

+ +

Cambiare risoluzione: dimensioni differenti

+ +

Qual è il problema che vogliamo risolvere cambiando la risoluzione? Vogliamo mostrare una immagine identica, ma più grande o più piccola in funzione del dispositivo — è la situazione che abbiamo con la seconda immagine del nostro esempio. L'elemento standard {{htmlelement("img")}} tradizionalmente, permette solo di puntare a un singolo file sorgente.

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Tuttavia, possiamo usare 2 nuovi attributi — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} — per fornire molte sorgenti di immagine addizionali insieme a dei suggerimenti per aiutare il browser a prelevare quella giusta. Si può vedere un esempio nel nostro reponsive.html su Github (vedere anche il codice sorgente):

+ +
<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Gli attributi srcset e sizes sembrano complicati da capire, ma non lo sono poi tanto se li si formatta come mostrato qui sopra: con una parte del valore dell'attributo per riga. Ogni valore contiene una lista  separata da virgole e ogni parte della lista è fatta di 3 sottoparti. Esaminiamo il contenuto di ognuna:

+ +

srcset definisce il set di immagini tra le quali vogliamo che il browser scelga e quali dimensioni hanno. Prima di ogni virgola, scriviamo:

+ +
    +
  1. un nome di file immagine (elva-fairy-480w.jpg.)
    2. +
  2. uno spazio
    3. +
  3. la dimensione della larghezza dell'immagine in pixels (480w) — notate l'uso dell'unità w e non px come ci si potrebbe aspettare. Si tratta della reale dimensione dell'immagine, che si può trovare esaminando il file immagine sul computer (per esempio in un Mac si può selezionare l'immagine in  Finder, e premere Cmd + I per aprire la scheramta di informazioni).
    4. +
+ +

sizes definisce un set di condizioni (ad es. la larghezza dello schermo) e indica quale dimensione di immagine sarebbe meglio scegliere quando si verificano quelle condizioni — questi sono i suggerimenti di cui si parlava prima. In questo caso, prima di ogni virgola scriviamo:

+ +
    +
  1. una media condition ((max-width:480px)) — imparerete di più a questo riguardo nella sezione sui CSS, ma per adesso diciamo solo che la "media condition" descrive un possibile stato dello schermo. In questo caso, si stà dicendo: "quando la larghezza visualizzata è 480 pixels o meno".
    2. +
  2. uno spazio
    3. +
  3. La larghezza della posizione che l'immagine occuperà quando si realizza la condizione (440px.)
    4. +
+ +
+

Nota: Per la larghezza della posizione, si può fornire una misura assoluta (px, em) o una relativa (come una percentuale). Potreste aver notato che l'ultima larghezza non ha media condition — questa è perciò la condizione di default che deve essere scelta quando nessuna delle condizioni sui dispositivi è vera. Il browser ignora tutto ciò che segue la prima condizione verificata, perciò bisogna fare attenzione all'ordine delle condizioni.

+
+ +

Quindi, definiti questi attributi, il browser farà:

+ +
    +
  1. verifica della larghezza del suo dispositivo
    2. +
  2. calcolo di quale sia la prima condizione tra la lista dell'atributo sizes ad essere vera
    3. +
  3. Look at the slot size given to that media query.
    4. +
  4. Caricamento dell'immagine elencata nell'attributo srcset che maggiormente si avvicina alla dimensione della posizione (slot) scelta.
    5. +
+ +

Fatto! Così a questo punto, se un browser col supporto con una larghezza della viewport di 480px carica la pagina, la (max-width: 480px) media condition sarà vera, perciò verrà scelta la slot da 440px, quindi sarà caricata la elva-fairy-480w.jpg, poiché la sua larghezza (480w) è la più vicina ai 440px. L'immagine da 800px occupa 128KB su disco, mentre la versione da 480px solo 63KB — un risparmio di 65KB. Adesso immagina se fosse una pagina con molte immagini. Usando questa tecnica si può far risparmiare agli utenti mobile un sacco di  ampiezza di banda.

+ +

I browser più vecchi che non supportano queste caratteristiche, semplicemente le ignoreranno e andranno avanti a caricare l'immagine indicata dall'attributo {{htmlattrxref("src", "img")}} come al solito.

+ +
+

Note: nell'elemento {{htmlelement("head")}} del documento si troverà la linea <meta name="viewport" content="width=device-width">: questo obbliga i browser dei dispositivi mobili ad adottare la loro reale larghezza viewport per caricare le pagine web (alcuni browser mentono riguardo alla larghezza e caricano invece pagine a una risoluzione maggiore e poi la riducono, che non è molto utile con una progettazione o una immagine reattiva. Spiegheremo di più a questo proposito in un modulo successivo).

+
+ +

Utili strumenti di sviluppo

+ +

Ci sono alcuni utili developer tools nei browser, per aiutare a calcolare le necessarie larghezze slot, ecc. che si ha bisogno di usare. Mentre le stavo calcolando, prima di tutto ho caricato la versione non reattiva dell'esempio (not-responsive.html), poi sono andato in Responsive Design View (Tools > Web Developer > Responsive Design View - In Firefox, dal sandwich menù -> Sviluppo -> Modalità visualizzazione flessibile), che ti permette di guardare il layout della tua pagina come se fosse visto attraverso dispositivi con diversa dimensione dello schermo.

+ +

Ho impostato la larghezza viewport a 320px e poi a 480px; per ciascuna sono andato nel DOM Inspector, ho cliccato sull'elemento {{htmlelement("img")}} a cui ero interessato e ho guardato la dimensione nella scheda vista Box Model sulla destra del monitor. Questo dovrebbe dare la larghezza dell'immagine di cui si ha bisogno.

+ +

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

+ +

Dopo, si può controllare se srcset sta funzionando impostando la larghezza viewport come si desidera (impostatela stretta, per esempio), aprendo il Network Inspector (Tools > Web Developer > Network), poi ricaricando la pagina. Questo dovrebbe dare una lista di risorse che sono state scaricate per per mostrare la pagina e quindi si potrà verificare quale file è stato scelto e scaricato.

+ +

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

+ +

Modificare la risoluzione: stessa dimensione, diverse risoluzioni

+ +

Se stai supportando diverse risoluzioni, ma tutti vedono la tua immagine alla stessa dimensione reale sullo schermo, puoi permettere al browser di scegliere una immagine di risoluzione appropriata usando l'attributo srcset con il descrittore x (x-descriptors) e senza sizes — una sintassi piuttosto semplice! Puoi trovare un esempio di come appare in srcset-resolutions.html (vedere anche il codice sorgente):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn questo esempio è stato applicato il seguente CSS all'immagine per farle avere una larghezza di 320 pixels sullo schermo (also called CSS pixels):

+ +
img {
+  width: 320px;
+}
+ +

In questo caso sizes non è necessario — il browser calcola qual è la risoluzione del display su cui è mostrato e fornisce l'immagine più appropriata tra quelle elencate in srcset. Così se il dispositivo che accede alla pagina ha un display standard a bassa risoluzione, with one device pixel representing each CSS pixel, viene caricata l'immagine elva-fairy-320w.jpg (il descrittore 1x è implicito e non c'è bisogno di specificarlo.) Se il dispositivo ha una alta risoluzione di 2 pixel per ogni pixel CSS o più, viene caricata l'immagine elva-fairy-640w.jpg. L'immagine a 640px è di 93KB, mentre quella a 320px è di soli 39KB.

+ +

Art direction

+ +

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

+ +

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, The <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. the code in responsive.html looks like so:

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+
+ + + +

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

+
+ +

Why can't we just do this using CSS or JavaScript?

+ +

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

+ + + +

Use modern image formats boldly

+ +

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

+ +

<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+ + + +

Active learning: Implementing your own responsive images

+ +

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

+ +
    +
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like)
    2. +
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)
    3. +
  3. Use the <picture> element to implement an art direction picture switcher!
    4. +
  4. Create multiple image files of different sizes, each showing the same picture.
    5. +
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. +
+ +
+

Note: Use the browser devtools to help work out what sizes you need, as mentioned above.

+
+ +

Summary

+ +

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

+ + + +

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.

+ +

See also

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..3c15046cd4 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,270 @@ +--- +title: Contenuti video e audio +slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Adesso che siamo pratici con l'aggiunta di immagini, il passo successivo è cominciare ad aggiungere lettori video e audio ai documenti HTML. In questo articolo vedremo come farlo, con gli elementi {{htmlelement("video")}} e {{htmlelement("audio")}}; finiremo dando uno sguardo a come si aggiungono i sottotitoli ai video.

+ + + + + + + + + + + + +
Prerequisiti:Competenze base sui computer, software di base installato, conoscenze base di gestione dei file (working with files), familiarità coi fondamenti di HTML (come trattati in Cominciare con l'HTML) e con Immagini in HTML.
Obbiettivi:Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.
+ +

Audio e video nel web

+ +

Gli sviluppatori Web han voluto usare video e audio per lungo tempo, fin dai primi anni del terzo millennio, quando abbiamo cominciato ad avere la banda larga, veloce abbastanza da supportare ogni tipo di video (i file video sono molto più grandi dei file testo o immagine). Nei primi tempi, le tecnologie nate per il web, come l'HTML, non avevano la capacità di integrare video e audio nel web, così, per poterlo fare, sono diventate popolari delle tecnologie proprietarie (e i plugin basati su di esse), come Flash (e più tardi Silverlight). Questo tipo di tecnologie funziona bene, ma ha numerosi problemi, tra cui: non essere ben integrate con HTML/CSS, problemi di sicurezza e di accessibilità.

+ +

Una soluzione nativa, sviluppata apposta, avrebbe risolto molti di questi problemi. Fortunatamente, pochi anni dopo, la specifica {{glossary("HTML5")}} aveva queste caratteristiche, conferite dall'aggiunta degli elementi {{htmlelement("video")}} e {{htmlelement("audio")}} e di alcune brillanti nuove {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per il loro controllo. Non vedremo JavaScript qui — vedremo solo le fondamenta che possono essere ottenute con l'HTML.

+ +

Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo campioni audio, video e esempi di codice per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.

+ +
+

Nota: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi {{glossary("OVP","OVPs")}} (online video providers - fornitori di video online) come YouTube, Dailymotion, e Vimeo, e fornitori di audio online, come Soundcloud. Queste compagnie offrono un modo comodo e facile per pubblicare e fruire di video, così che tu non ti debba preoccupare dell'enorme consumo di banda. Queste compagnie OVP, in genere, offrono anche il codice da usare per integrare video/audio nelle tue pagine web. Se segui questa strada puoi evitare alcune delle difficoltà di cui discutiamo in questo articolo. Vedremo un po meglio questo tipo di servizi nel prossimo articolo.

+
+ +

L'elemento <video>

+ +

L'elemento {{htmlelement("video")}} permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

Le caratteristiche sono:

+ +
+
{{htmlattrxref("src","video")}}
+
Come per l'elemento {{htmlelement("img")}}, l'attributo src contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.
+
{{htmlattrxref("controls","video")}}
+
Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di epilessia). Si può usare sia l'attributo controls per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate API JavaScript. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.
+
Il paragrafo tra i tag <video>
+
Questo paragrafo è chiamato fallback content (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <video>, offrendo un'alternativa per i vecchi browser. Può essere qualunque cosa vogliate; si può ad esempio fornire un collegamento diretto al file video, così che l'utente possa accedervi in qualche modo, indipendentemente dal browser che usa.
+
+ +

Il video integrato apparirà più o meno così:

+ +

A simple video player showing a video of a small white rabbit

+ +

Puoi provare l'esempio qui: try the example (vedi anche il codice sorgente).

+ +

Supportare molti formati

+ +

C'è un problema con l'esempio qui sopra, che potresti aver già notato se hai provato ad accedere il live link con un browser come Safari o Internet Explorer. Il video non parte! Ciò è dovuto al fatto che i browser supportano formati video (e audio) diversi.

+ +

Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati container formats (formati container). Contengono diverse parti che costituiscono l'intera canzone o video — come un'unica traccia audio (o un unica traccia video nel caso dei video) e i metadati per descrivere il media (mezzo espressivo) che viene presentato.

+ +

Anche le tracce audio e video hanno diversi formati, per esempio:

+ + + +

Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.

+ +
+

Nota: non è così semplice, come puoi vedere nella nostra tabella audio-video codec compatibility table. Inoltre, molti browser dei portatili possono riprodurre un formato non supportato passandone la gestione al media player del sistema perché lo riproduca. Ma per ora ce n'è già abbastanza.

+
+ +

I formati precedenti esistono per comprimere i video e gli audio in file maneggiabili (i video e gli audio originali sono molto pesanti). I browser contengono differenti {{Glossary("Codec","Codecs")}}, come Vorbis o H.264, che sono usati per covertire i video e gli audio compressi in file binari e viceversa. Come già detto, sfortunatamente, non tutti i borwser supportano gli stessi codecs, così si dovranno fornire molti file, per ogni riproduttore di media. Se manca il giusto codec per decodificare il media, questo non si avvierà.

+ +
+

Nota: ti potresti chiedere il perché di questa situazione. I formati MP3 (for audio) and MP4/H.264 (for video) sono entrambi ampiamente supportati e di buona qualità. Tuttavia, sono anche ricoperti da brevetto — Il brevetto americano copre MP3 fino almeno al 2017, e H.264 fino al 2027 come minimo; ciò significa che i browser che non detengono il brevetto devono pagare parecchio per poter supportare questi formati. Inoltre, molte persone evitano per principio i software con delle restrizioni, in favore dei formati aperti.

+
+ +

Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente updated example (try it live here, also):

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

Qui abbiamo tirato fuori l'attributo src dal tag <video> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <source> e riprodurrà il primo per il quale ha il codec. Includere i formati WebM e MP4 dovrebbe essere sufficiente a riprodurre il tuo video sulla maggioranza delle piattaforme e dei browser di oggi.

+ +

Ogni elemento <source> ha un attributo type; è opzionale, ma è consigliato metterlo — contiene i {{glossary("MIME type","MIME types")}} dei file video e i browser possono leggerli e scartare immediatamente i formati che non capiscono. Se non viene messo, i browser dovranno caricare i file e provare a riprodurli fino a che ne troveranno uno che funziona, usando molto più tempo e risorse.

+ +
+

Nota: il nostro articolo sui formati media supportati contiene alcuni comuni {{glossary("MIME type","MIME types")}}.

+
+ +

Altre caratteristiche dell'elemento <video>

+ +

Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

Questo ci darà un output simile a questo:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Le nuove funzionalità sono:

+ +
+
{{htmlattrxref("width","video")}} e {{htmlattrxref("height","video")}}
+
Puoi controllare la dimensione del video sia con questi attributi che con i {{Glossary("CSS")}}. In entrambi i casi i video mantengono il loro rapporto larghezza-altezza nativo, conosciuto come aspect ratio. Se il rapporto d'aspetto non è mantenuto dalle dimensioni impostate da te, il video sarà ridimensionato fino alla dimensione orizzontale e lo spazio non occupato verticalmente verrà riempito, di default, con uno sfondo colorato.
+
{{htmlattrxref("autoplay","video")}}
+
Questo attributo fa partire l'audio o il video immediatamente, durante il caricamento della pagina. Ti suggeriamo di non usare l'autoplay nel tuo sito, perché gli utenti possono trovarlo molto fastidioso.
+
{{htmlattrxref("loop","video")}}
+
Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.
+
{{htmlattrxref("muted","video")}}
+
Questo attributo fa si che il video parta con l'audio disattivato per default.
+
{{htmlattrxref("poster","video")}}
+
Questo attributo ha per valore l'URL di una immagine che sarà mostrata prima dell'avvio del video. Si suppone sia usata come schermata di lancio, promozionale.
+
+ +

Puoi trovare gli esempi sopra su play live on Github (also see the source code). Nota che non abbiamo incluso l'attributo autoplay nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!

+ +

L'elemento <audio>

+ +

L'elemento {{htmlelement("audio")}} funziona esattamente come l'elemento {{htmlelement("video")}}, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

Ciò produce qualcosa del genere, in un browser:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Nota: Puoi riprodurre the audio demo live on Github (also see the audio player source code.)

+
+ +

Questo occupa meno spazio di un player video, perché non c'è la componente visiva — devi solo visualizzare i controlli per l'audio. Altre differenze dall'HTML5 video sono queste:

+ + + +

A parte ciò,  <audio> supporta tutte le caratteristiche di <video> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.

+ +

Mostrare le traccie testuali (sottotitoli) dei video

+ +

Adesso discuteremo un concetto leggermente più avanzato, che è molto utile conoscere. Molta gente non può o non vuole ascoltare il contenuto audio del web, almeno certe volte. Per esempio:

+ + + +

Non sarebbe bello poter fornire a queste persone una trascrizione del testo enunciato nel video/audio? Bene, grazie all'HTML5 si può; con il formato WebVTT e l'elemento {{htmlelement("track")}}.

+ +
+

Nota: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.

+
+ +

WebVTT è un formato  per scrivere file di testo contenenti molteplici stringhe di testo insieme a metadati come il tempo a cui vuoi che ogni stringa sia mostrata e limitate informazioni relative allo stile e alla opsizione. Queste stringhe di testo sono chiamate cues (battute), e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:

+ +
+
subtitles
+
Traduzioni di materiale straniero, per chi non capisce la lingua
+
captions
+
trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.
+
timed descriptions
+
testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.
+
+ +

Un tipico file WebVTT appare così:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

Per visualizzarlo insieme al riproduttore di media HTML, devi:

+ +
    +
  1. salvarlo come file .vtt in un posto adatto
    2. +
  2. collegare il file .vttcon l'elemento {{htmlelement("track")}}. Questo elemento <track> deve essere annidato dentro <audio> o <video>, ma dopo tutti gli elementi <source>. Usa l'attributo {{htmlattrxref("kind","track")}} per specificare se le battute sono subtitles, captions, o descriptions. Inoltre, usa l'attributo {{htmlattrxref("srclang","track")}} per dire al browser in quale lingua sono scritti i sottotitoli.
    3. +
+ +

Ecco un esempio:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Ciò produrrà un video coi sottotitoli visualizzati più o meno così:

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Per avere più dettagli, leggi Adding captions and subtitles to HTML5 video. Puoi trovare l'esempio sviluppato in questo articolo qui: find the example, su Github, scritto da Ian Devlin (guarda anche il codice sorgente). Questo esempio usa alcuni JavaScript per permettere agli utenti di scegliere tra differenti sottotitoli. Nota che per attivare i sottotitoli, devi premere il bottone "CC" e selezionare un'opzione — English, Deutch, o Español. 

+ +
+

Nota: le "Text tracks" ti aiutano anche con la {{glossary("SEO")}}, perché i motori di ricerca brillano particolarmente coi testi.  I sottotitoli (Text tracks/traccie di testo) permettono ai motori di ricerca, persino di linkare direttamente una certa parte del video.

+
+ +

Active learning: Includere un proprio audio o video

+ +

Per questo apprendimento attivo, ci piacerebbe che tu andassi fuori a registrare alcuni video tuoi — molti telefoni, oggi, consentono di registrare audio e video molto facilmente e se riesci a trasferirli sul tuo computer, li puoi usare. Potresti dover fare alcune conversioni per ottenere i formati WebM o MP4, per i video, oppure MP3 o Ogg, per l'audio, ma ci sono molti programmi che permettono di farlo senza problemi, come Miro Video Converter e Audacity. Ci piacerebbe che facessi un tentativo!

+ +

Se non sai generare acun video o audio, allora puoi usare i nostri campioni di file video e audio per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.

+ +

Ci piacerebbe che:

+ +
    +
  1. salvassi i tuoi file audio e video in una nuova directory sul tuo computer,
    2. +
  2. creassi un nuovo file index.html nella stessa directory,
    3. +
  3. aggiungessi gli elementi <audio> e <video> alla pagina facendogli mostrare i controlli di default del browser,
    4. +
  4. dessi a entrambi degli elementi <source> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo type,
    5. +
  5. dessi all'elemento <video> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.
    6. +
+ +

Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.

+ +

Conclusioni

+ +

Questo è quanto. Speriamo tu ti sia divertito/a a giocare con contenuti video e audio! Nel prossimo articolo vedremo altri modi per inserire contenuti nelle pagine web, usando tecnologie come gli {{htmlelement("iframe")}} e gli {{htmlelement("object")}}.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +
+
+ + diff --git a/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html deleted file mode 100644 index c52f7ca3e2..0000000000 --- a/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: Scrivi una semplice pagina in HTML -slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML -tags: - - Guide - - HTML - - Principianti - - Web Development -translation_of: Learn/Getting_started_with_the_web -translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML ---- -
-

In questo articolo impareremo come creare una semplice pagina web con il {{Glossary("HTML")}}.

-
- - - - - - - - - - - - -
Prerequisiti:Hai bisogno di  un editore di testo e di sapere come aprire un file in un browser.
Obiettivo:Creare una pagina web che puoi visualizzare con il browser.
- -

Sommario

- -

La semplice pagina web è solo un documento {{Glossary("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossary("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.

- -

Apprendimento attivo

- -

Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.

- -

Primo passo: Un file

- -

una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-</head>
-<body>
-  This is a page
-  a simple page
-</body>
-</html>
- -

Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".

- -

Adesso dovresti avere un file sul tuo computer che assomiglia a questo esempio nella cartella (lla somiglianza dipende dal tuo sistema opertivo):

- -

Screenshot of a file explorer with a html file for local test

- -

Facendo un doppio click sul file si aprirà nel browser,  per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:

- -

Screenshot of a file explorer with a html file for local test

- -

Secondo passo: Un web browser

- -

All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:

- -

Screenshot of a file explorer with a html file for local test

- -

Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.

- -

Terzo passo: Sperimenta e impara

- -

Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina  nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.

- -

La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossary("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.

- -

Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{HTMLElement("head")}} elemento blocco "block", ed un corpo, contenuto {{HTMLElement("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.

- -

Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{HTMLElement("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{HTMLElement("title")}} è contenuto all'interno {{HTMLElement("head")}}, per esempio.

- -

Se vuoi inserire qualcosa come un immagine hai bisogno di aggiungere un tag per l'immagine e la stessa immagine all'interno.Per esempio:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-</head>
-<body>
-  This is a page
-  a simple page
-  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-  now with a unicorn
-</body>
-</html>
- -

Modifica il file per includere il tag {{HTMLElement("img")}} come questo:

- -
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
- -

Può essere inserito in qualsiasi parte {{HTMLElement("body")}} non dimenticare di salvare i cambiamenti apportati alla pagina!

- -

Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).

- -

Original file for the unicorn image

- -
-

Nota: Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.

-
- -

I documenti necessari perchè questa pagina funzioni adesso assomigliano a qualcosa di questo genere nel desktop:

- -

Screenshot of the explorer with 2 files : a html file and a picture file

- -

Il risultato mostrato nel browser è questo:

- -

Screenshot for the example with a picture

- -

Come hai notato il tag{{HTMLElement("img")}} ha {{Glossary("attribute","attributes")}} che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.

- -

Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.

- -

Più in profondità

- -

Questa non è una pagina web molto carina

- -

Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.

- -

{{Glossary("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente  {{Glossary("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.

- -

Sperimentiamo un poco con il CSS trasformando il testo contenuto nel tag body da nero a blue:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-  <style>
-    body {
-      color: blue;
-    }
-  </style>
-</head>
-  <body>
-    <p>This is a some blue text</p>
-    <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-  </body>
-</html>
- -

Nota l'aggiunta{{HTMLElement("style")}} alla pagina all'interno{{HTMLElement("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.

- -

Vuoi il testo sottolineato? prova ad aggiungere la regola "text-decoration: underline;" allo style:

- -
body {
-  color: blue;
-  text-decoration: underline;
-}
- -

Vuoi che il tuo testo abbia una misura ben precisa?Prova aggiungendo "font-size: 42px;" come in esempio:

- -
body {
-  color: blue;
-  text-decoration: underline;
-  font-size: 42px;
-}
- -

Il risultato finale sarà questo:

- -
<html>
-<head>
-  <title>Hi there</title>
-  <style>
-  body {
-    color: blue;
-    text-decoration: underline;
-    font-size: 42px;
-  }
-  </style>
-</head>
-<body>
-  <p>This is a blue underlined big text</p>
-  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-</body>
-</html>
- -

e se salvi la pagina nel tuo editore e poi riaggiorni il browser la pagina che vedrai sarà la seguente:

- -

Screenshot of the browser with the page with some CSS

- -

Andiamo alla seconda pagina

- -

Quando navighi nel Web spesso incontri {{Glossary("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.

- -

Collega due pagine locali

- -

Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.

- -

Nel primo documento possiamo tenere la stessa struttura di prima, la cosa importante è aggiungere un nuovo tag {{HTMLElement("a")}}, così:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Page 1 to ground control</title>
-</head>
-<body>
-  This is page 1.
-  <a href="page2.html" title="to page 2">What is going on on page 2?</a>
-</body>
-</html>
- -

La seconda pagina avrà un link che ci fa tornare alla prima pagina:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Page 2 :)</title>
-</head>
-<body>
-  This is a page 2.
-  <a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
-</body>
-</html>
- -
-

Nota:Assicurati che il nome del file {{HTMLElement("a")}} tag con attributo href sia lo stesso nome del documento creato nel tuo computer.

-
- -

Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.

- -

Il documento principale dovrebbe avere i due documenti nella stessa cartella, in questa maniera:

- -

Screenshot of the file explorer with two HTML documents in one directory/folder

- -

La Page 1 sarà così visualizzata nel browser:

- -

Screenshot of a file explorer with a html file for local test

- -

e la Page 2 sarà così visualizzata nel browser dopo aver fatto click sul link di Page 1:

- -

Screenshot of the 2nd page of the 2 pages example in the browser

- -
-

Nota:Il link che torna alla page 1 è violetto perchè il browser "sa"  che in precedenza avevamo visitato la Page 1

-
- -

Se vuoi puoi fare la prova creando più pagine o passare alla prossima sezione per portare tutto questo al lvello successivo.

- -

Collegamento ad un altra pagina web

- -

In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>My page</title>
-</head>
-<body>
-  One day,...Unicorns are great...See you.
-  <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
-</body>
-</html>
- -

Potrebbe più o meno assomigliare a questo nel browser:

- -

Screenshot of the example page with a link to Wikipedia in the browser

- -

Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un tooltip.Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.

- -
-

Ricorda: Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.

-
- -

Prossimi passi

- - -- cgit v1.2.3-54-g00ecf From e7651b26abb2031118b797bd4a4d707aa7f2e9b6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: modify --- files/it/_redirects.txt | 378 ++- files/it/_wikihistory.json | 2860 ++++++++++---------- .../learn/css/building_blocks/selectors/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 3 +- .../index.html | 4 +- files/it/conflicting/learn/css/index.html | 3 +- .../learn/getting_started_with_the_web/index.html | 3 +- .../javascript_basics/index.html | 3 +- .../learn/javascript/objects/index.html | 3 +- .../learn/server-side/django/index.html | 3 +- files/it/conflicting/web/accessibility/index.html | 3 +- .../web/api/canvas_api/tutorial/index.html | 3 +- .../web/api/document_object_model/index.html | 3 +- .../conflicting/web/api/node/firstchild/index.html | 3 +- .../web/api/windoworworkerglobalscope/index.html | 3 +- .../index.html | 4 +- files/it/conflicting/web/guide/index.html | 3 +- .../reference/global_objects/object/index.html | 3 +- .../reference/global_objects/string/index.html | 3 +- .../web/javascript/reference/operators/index.html | 3 +- files/it/glossary/dhtml/index.html | 3 +- files/it/glossary/dom/index.html | 3 +- files/it/glossary/localization/index.html | 3 +- files/it/glossary/protocol/index.html | 3 +- files/it/glossary/response_header/index.html | 3 +- files/it/glossary/xhtml/index.html | 3 +- .../accessibility_troubleshooting/index.html | 3 +- .../accessibility/css_and_javascript/index.html | 3 +- files/it/learn/accessibility/html/index.html | 3 +- files/it/learn/accessibility/index.html | 3 +- files/it/learn/accessibility/mobile/index.html | 3 +- files/it/learn/accessibility/multimedia/index.html | 3 +- .../learn/accessibility/wai-aria_basics/index.html | 3 +- .../accessibility/what_is_accessibility/index.html | 3 +- .../cascade_and_inheritance/index.html | 3 +- .../learn/css/building_blocks/selectors/index.html | 3 +- .../first_steps/how_css_is_structured/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 3 +- files/it/learn/css/first_steps/index.html | 3 +- .../css/styling_text/styling_links/index.html | 3 +- files/it/learn/forms/form_validation/index.html | 3 +- .../how_to_build_custom_form_controls/index.html | 3 +- files/it/learn/forms/index.html | 3 +- .../dealing_with_files/index.html | 3 +- .../how_the_web_works/index.html | 3 +- .../publishing_your_website/index.html | 5 +- .../what_will_your_website_look_like/index.html | 3 +- .../html/howto/use_data_attributes/index.html | 3 +- .../html_text_fundamentals/index.html | 3 +- .../the_head_metadata_in_html/index.html | 3 +- .../responsive_images/index.html | 3 +- .../video_and_audio_content/index.html | 3 +- .../javascript/first_steps/variables/index.html | 3 +- .../first_steps/what_went_wrong/index.html | 3 +- files/it/learn/javascript/howto/index.html | 3 +- .../it/learn/javascript/objects/basics/index.html | 3 +- files/it/learn/javascript/objects/index.html | 3 +- files/it/learn/javascript/objects/json/index.html | 3 +- .../server-side/django/introduction/index.html | 3 +- files/it/mdn/at_ten/index.html | 3 +- .../howto/create_and_edit_pages/index.html | 5 +- .../guidelines/conventions_definitions/index.html | 3 +- .../mdn/structures/compatibility_tables/index.html | 3 +- files/it/mdn/structures/macros/index.html | 3 +- .../webextensions/content_scripts/index.html | 3 +- .../what_are_webextensions/index.html | 3 +- .../your_first_webextension/index.html | 3 +- .../firefox/experimental_features/index.html | 3 +- .../index.html | 3 +- files/it/mozilla/firefox/releases/1.5/index.html | 3 +- files/it/mozilla/firefox/releases/18/index.html | 3 +- files/it/mozilla/firefox/releases/2/index.html | 3 +- .../it/orphaned/learn/how_to_contribute/index.html | 3 +- .../learn/html/forms/html5_updates/index.html | 3 +- files/it/orphaned/mdn/community/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../contribute/howto/delete_my_profile/index.html | 3 +- .../howto/do_a_technical_review/index.html | 3 +- .../howto/do_an_editorial_review/index.html | 3 +- .../howto/set_the_summary_for_a_page/index.html | 3 +- files/it/orphaned/mdn/editor/index.html | 3 +- .../tools/add-ons/dom_inspector/index.html | 13 +- files/it/orphaned/tools/add-ons/index.html | 5 +- .../global_objects/array/prototype/index.html | 3 +- files/it/tools/performance/index.html | 3 +- files/it/tools/responsive_design_mode/index.html | 3 +- files/it/web/api/canvas_api/index.html | 3 +- files/it/web/api/canvas_api/tutorial/index.html | 5 +- .../document_object_model/introduction/index.html | 3 +- .../documentorshadowroot/stylesheets/index.html | 3 +- .../api/eventtarget/addeventlistener/index.html | 3 +- files/it/web/api/geolocation_api/index.html | 3 +- .../web/api/htmlhyperlinkelementutils/index.html | 3 +- files/it/web/api/keyboardevent/charcode/index.html | 3 +- files/it/web/api/keyboardevent/keycode/index.html | 3 +- files/it/web/api/keyboardevent/which/index.html | 3 +- files/it/web/api/mouseevent/altkey/index.html | 3 +- files/it/web/api/mouseevent/button/index.html | 3 +- files/it/web/api/mouseevent/ctrlkey/index.html | 3 +- files/it/web/api/mouseevent/metakey/index.html | 3 +- files/it/web/api/mouseevent/shiftkey/index.html | 3 +- files/it/web/api/node/childnodes/index.html | 3 +- files/it/web/api/node/firstchild/index.html | 3 +- files/it/web/api/node/namespaceuri/index.html | 3 +- files/it/web/api/node/nodename/index.html | 3 +- files/it/web/api/node/nodetype/index.html | 3 +- files/it/web/api/node/nodevalue/index.html | 3 +- files/it/web/api/node/parentnode/index.html | 3 +- files/it/web/api/node/prefix/index.html | 3 +- files/it/web/api/node/textcontent/index.html | 3 +- files/it/web/api/notification/dir/index.html | 3 +- files/it/web/api/notification/index.html | 3 +- files/it/web/api/plugin/index.html | 3 +- files/it/web/api/uievent/ischar/index.html | 3 +- files/it/web/api/uievent/layerx/index.html | 3 +- files/it/web/api/uievent/layery/index.html | 3 +- files/it/web/api/uievent/pagex/index.html | 3 +- files/it/web/api/uievent/pagey/index.html | 3 +- files/it/web/api/uievent/view/index.html | 3 +- files/it/web/api/websockets_api/index.html | 3 +- .../index.html | 3 +- .../api/window/domcontentloaded_event/index.html | 3 +- files/it/web/api/window/find/index.html | 3 +- files/it/web/api/window/load_event/index.html | 3 +- .../clearinterval/index.html | 3 +- .../xmlhttprequest/using_xmlhttprequest/index.html | 3 +- files/it/web/css/child_combinator/index.html | 3 +- .../index.html | 3 +- .../using_multi-column_layouts/index.html | 3 +- .../basic_concepts_of_flexbox/index.html | 3 +- .../consistent_list_indentation/index.html | 3 +- files/it/web/css/font-language-override/index.html | 3 +- files/it/web/css/layout_cookbook/index.html | 3 +- files/it/web/css/reference/index.html | 5 +- .../web/demos_of_open_web_technologies/index.html | 3 +- files/it/web/guide/ajax/getting_started/index.html | 3 +- .../web/guide/html/content_categories/index.html | 3 +- files/it/web/guide/html/html5/index.html | 3 +- .../html/html5/introduction_to_html5/index.html | 3 +- .../using_html_sections_and_outlines/index.html | 3 +- files/it/web/guide/mobile/index.html | 3 +- .../guide/parsing_and_serializing_xml/index.html | 3 +- files/it/web/html/attributes/index.html | 3 +- files/it/web/html/element/figure/index.html | 3 +- files/it/web/html/reference/index.html | 3 +- .../html/using_the_application_cache/index.html | 3 +- files/it/web/http/basics_of_http/index.html | 3 +- files/it/web/http/compression/index.html | 3 +- files/it/web/http/content_negotiation/index.html | 3 +- .../web/http/headers/user-agent/firefox/index.html | 3 +- files/it/web/http/link_prefetching_faq/index.html | 3 +- files/it/web/http/overview/index.html | 3 +- files/it/web/http/range_requests/index.html | 3 +- files/it/web/http/session/index.html | 3 +- .../a_re-introduction_to_javascript/index.html | 3 +- .../it/web/javascript/about_javascript/index.html | 3 +- files/it/web/javascript/closures/index.html | 3 +- .../control_flow_and_error_handling/index.html | 5 +- .../guide/details_of_the_object_model/index.html | 3 +- files/it/web/javascript/guide/functions/index.html | 3 +- .../javascript/guide/grammar_and_types/index.html | 3 +- files/it/web/javascript/guide/index.html | 3 +- .../web/javascript/guide/introduction/index.html | 3 +- .../guide/iterators_and_generators/index.html | 3 +- .../guide/loops_and_iteration/index.html | 3 +- .../guide/regular_expressions/index.html | 3 +- .../javascript_technologies_overview/index.html | 3 +- .../it/web/javascript/memory_management/index.html | 3 +- .../reference/classes/constructor/index.html | 3 +- .../reference/functions/arguments/index.html | 3 +- .../reference/functions/arrow_functions/index.html | 3 +- .../javascript/reference/functions/get/index.html | 3 +- .../web/javascript/reference/functions/index.html | 3 +- .../javascript/reference/functions/set/index.html | 3 +- .../global_objects/proxy/proxy/apply/index.html | 3 +- .../global_objects/proxy/proxy/index.html | 3 +- .../global_objects/proxy/revocable/index.html | 3 +- .../reference/operators/comma_operator/index.html | 3 +- .../operators/conditional_operator/index.html | 3 +- .../reference/template_literals/index.html | 3 +- files/it/web/opensearch/index.html | 3 +- .../performance/critical_rendering_path/index.html | 3 +- files/it/web/progressive_web_apps/index.html | 3 +- .../it/web/security/insecure_passwords/index.html | 3 +- .../index.html | 3 +- files/it/web/svg/index.html | 3 +- .../using_custom_elements/index.html | 3 +- 187 files changed, 2094 insertions(+), 1723 deletions(-) (limited to 'files/it/learn/html') diff --git a/files/it/_redirects.txt b/files/it/_redirects.txt index 0cf9ca1bcf..c0d474a842 100644 --- a/files/it/_redirects.txt +++ b/files/it/_redirects.txt @@ -1,14 +1,15 @@ # FROM-URL TO-URL /it/docs/AJAX /it/docs/Web/Guide/AJAX -/it/docs/AJAX/Iniziare /it/docs/Web/Guide/AJAX/Iniziare -/it/docs/AJAX:Iniziare /it/docs/Web/Guide/AJAX/Iniziare +/it/docs/AJAX/Iniziare /it/docs/Web/Guide/AJAX/Getting_Started +/it/docs/AJAX:Iniziare /it/docs/Web/Guide/AJAX/Getting_Started +/it/docs/Adattare_le_applicazioni_XUL_a_Firefox_1.5 /it/docs/Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 /it/docs/CSS /it/docs/Web/CSS -/it/docs/CSS/-moz-font-language-override /it/docs/Web/CSS/-moz-font-language-override +/it/docs/CSS/-moz-font-language-override /it/docs/Web/CSS/font-language-override /it/docs/CSS/:-moz-first-node /it/docs/Web/CSS/:-moz-first-node /it/docs/CSS/:-moz-last-node /it/docs/Web/CSS/:-moz-last-node /it/docs/CSS/:-moz-list-bullet /it/docs/Web/CSS/:-moz-list-bullet /it/docs/CSS/@-moz-document /it/docs/Web/CSS/@document -/it/docs/CSS/Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/CSS/Getting_Started /it/docs/Learn/CSS/First_steps /it/docs/CSS/Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions /it/docs/CSS/background /it/docs/Web/CSS/background /it/docs/CSS/background-attachment /it/docs/Web/CSS/background-attachment @@ -20,7 +21,7 @@ /it/docs/CSS/border-bottom /it/docs/Web/CSS/border-bottom /it/docs/CSS/color /it/docs/Web/CSS/color /it/docs/CSS/cursor /it/docs/Web/CSS/cursor -/it/docs/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +/it/docs/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor /it/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /it/docs/CSS/text-align /it/docs/Web/CSS/text-align /it/docs/CSS/text-shadow /it/docs/Web/CSS/text-shadow /it/docs/CSS/transition-timing-function /it/docs/Web/CSS/transition-timing-function @@ -29,7 +30,7 @@ /it/docs/CSS::-moz-last-node /it/docs/Web/CSS/:-moz-last-node /it/docs/CSS::-moz-list-bullet /it/docs/Web/CSS/:-moz-list-bullet /it/docs/CSS:@-moz-document /it/docs/Web/CSS/@document -/it/docs/CSS:Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/CSS:Getting_Started /it/docs/Learn/CSS/First_steps /it/docs/CSS:background /it/docs/Web/CSS/background /it/docs/CSS:background-attachment /it/docs/Web/CSS/background-attachment /it/docs/CSS:background-color /it/docs/Web/CSS/background-color @@ -37,16 +38,27 @@ /it/docs/CSS:text-align /it/docs/Web/CSS/text-align /it/docs/CSS_Reference/Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions /it/docs/CSS_Reference:Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions +/it/docs/Circa_il_Document_Object_Model /it/docs/conflicting/Web/API/Document_Object_Model /it/docs/Compatibilità_di_AJAX /it/docs/Web/Guide/AJAX -/it/docs/Conoscere_i_CSS-redirect-1 /it/docs/Conoscere_i_CSS -/it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS-redirect-1 /it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS -/it/docs/Conoscere_i_CSS:CSS_leggibili /it/docs/Conoscere_i_CSS/CSS_leggibili -/it/docs/Conoscere_i_CSS:Cascata_ed_ereditarietà /it/docs/Conoscere_i_CSS/Cascata_ed_ereditarietà -/it/docs/Conoscere_i_CSS:Che_cosa_sono_i_CSS /it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS -/it/docs/Conoscere_i_CSS:Come_funzionano_i_CSS /it/docs/Conoscere_i_CSS/Come_funzionano_i_CSS -/it/docs/Conoscere_i_CSS:I_Selettori /it/docs/Conoscere_i_CSS/I_Selettori -/it/docs/Conoscere_i_CSS:Perché_usare_i_CSS /it/docs/Conoscere_i_CSS/Perché_usare_i_CSS +/it/docs/Conoscere_i_CSS /it/docs/Learn/CSS/First_steps +/it/docs/Conoscere_i_CSS-redirect-1 /it/docs/Learn/CSS/First_steps +/it/docs/Conoscere_i_CSS/CSS_leggibili /it/docs/Learn/CSS/First_steps/How_CSS_is_structured +/it/docs/Conoscere_i_CSS/Cascata_ed_ereditarietà /it/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS /it/docs/Learn/CSS/First_steps/How_CSS_works +/it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS-redirect-1 /it/docs/Learn/CSS/First_steps/How_CSS_works +/it/docs/Conoscere_i_CSS/Come_funzionano_i_CSS /it/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/it/docs/Conoscere_i_CSS/I_Selettori /it/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/it/docs/Conoscere_i_CSS/Perché_usare_i_CSS /it/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_113cfc53c4b8d07b4694368d9b18bd49 +/it/docs/Conoscere_i_CSS:CSS_leggibili /it/docs/Learn/CSS/First_steps/How_CSS_is_structured +/it/docs/Conoscere_i_CSS:Cascata_ed_ereditarietà /it/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/it/docs/Conoscere_i_CSS:Che_cosa_sono_i_CSS /it/docs/Learn/CSS/First_steps/How_CSS_works +/it/docs/Conoscere_i_CSS:Come_funzionano_i_CSS /it/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/it/docs/Conoscere_i_CSS:I_Selettori /it/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/it/docs/Conoscere_i_CSS:Perché_usare_i_CSS /it/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_113cfc53c4b8d07b4694368d9b18bd49 /it/docs/Core_JavaScript_1.5_Reference /it/docs/Web/JavaScript/Reference +/it/docs/Costruire_e_decostruire_un_documento_XML /it/docs/Web/Guide/Parsing_and_serializing_XML +/it/docs/DHTML /it/docs/Glossary/DHTML +/it/docs/DOM /it/docs/Glossary/DOM /it/docs/DOM/Selection /it/docs/Web/API/Selection /it/docs/DOM/Selection/addRange /it/docs/Web/API/Selection/addRange /it/docs/DOM/Selection/anchorNode /it/docs/Web/API/Selection/anchorNode @@ -67,7 +79,7 @@ /it/docs/DOM/Selection/selectAllChildren /it/docs/Web/API/Selection/selectAllChildren /it/docs/DOM/Selection/toString /it/docs/Web/API/Selection/toString /it/docs/DOM/XMLHttpRequest /it/docs/Web/API/XMLHttpRequest -/it/docs/DOM/XMLHttpRequest/Usare_XMLHttpRequest /it/docs/Web/API/XMLHttpRequest/Usare_XMLHttpRequest +/it/docs/DOM/XMLHttpRequest/Usare_XMLHttpRequest /it/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /it/docs/DOM/document /it/docs/Web/API/Document /it/docs/DOM/document.URL /it/docs/Web/API/Document/URL /it/docs/DOM/document.anchors /it/docs/Web/API/Document/anchors @@ -80,7 +92,7 @@ /it/docs/DOM/document.defaultView /it/docs/Web/API/Document/defaultView /it/docs/DOM/document.doctype /it/docs/Web/API/Document/doctype /it/docs/DOM/document.documentElement /it/docs/Web/API/Document/documentElement -/it/docs/DOM/document.firstChild /it/docs/Web/API/Document/firstChild +/it/docs/DOM/document.firstChild /it/docs/conflicting/Web/API/Node/firstChild /it/docs/DOM/document.forms /it/docs/Web/API/Document/forms /it/docs/DOM/document.getElementById /it/docs/Web/API/Document/getElementById /it/docs/DOM/document.getElementsByName /it/docs/Web/API/Document/getElementsByName @@ -88,48 +100,48 @@ /it/docs/DOM/document.importNode /it/docs/Web/API/Document/importNode /it/docs/DOM/document.lastModified /it/docs/Web/API/Document/lastModified /it/docs/DOM/document.links /it/docs/Web/API/Document/links -/it/docs/DOM/document.namespaceURI /it/docs/Web/API/Document/namespaceURI +/it/docs/DOM/document.namespaceURI /it/docs/Web/API/Node/namespaceURI /it/docs/DOM/document.open /it/docs/Web/API/Document/open /it/docs/DOM/document.referrer /it/docs/Web/API/Document/referrer -/it/docs/DOM/document.styleSheets /it/docs/Web/API/Document/styleSheets +/it/docs/DOM/document.styleSheets /it/docs/Web/API/DocumentOrShadowRoot/styleSheets /it/docs/DOM/document.title /it/docs/Web/API/Document/title /it/docs/DOM/document.width /it/docs/Web/API/Document/width /it/docs/DOM/element /it/docs/Web/API/Element -/it/docs/DOM/element.addEventListener /it/docs/Web/API/Element/addEventListener +/it/docs/DOM/element.addEventListener /it/docs/Web/API/EventTarget/addEventListener /it/docs/DOM/element.attributes /it/docs/Web/API/Element/attributes -/it/docs/DOM/element.childNodes /it/docs/Web/API/Element/childNodes +/it/docs/DOM/element.childNodes /it/docs/Web/API/Node/childNodes /it/docs/DOM/element.className /it/docs/Web/API/Element/className /it/docs/DOM/element.clientHeight /it/docs/Web/API/Element/clientHeight -/it/docs/DOM/element.firstChild /it/docs/Web/API/Element/firstChild +/it/docs/DOM/element.firstChild /it/docs/Web/API/Node/firstChild /it/docs/DOM/element.hasAttributes /it/docs/Web/API/Element/hasAttributes -/it/docs/DOM/element.nodeName /it/docs/Web/API/Element/nodeName -/it/docs/DOM/element.nodeType /it/docs/Web/API/Element/nodeType -/it/docs/DOM/element.nodeValue /it/docs/Web/API/Element/nodeValue -/it/docs/DOM/element.parentNode /it/docs/Web/API/Element/parentNode -/it/docs/DOM/element.prefix /it/docs/Web/API/Element/prefix -/it/docs/DOM/element.textContent /it/docs/Web/API/Element/textContent +/it/docs/DOM/element.nodeName /it/docs/Web/API/Node/nodeName +/it/docs/DOM/element.nodeType /it/docs/Web/API/Node/nodeType +/it/docs/DOM/element.nodeValue /it/docs/Web/API/Node/nodeValue +/it/docs/DOM/element.parentNode /it/docs/Web/API/Node/parentNode +/it/docs/DOM/element.prefix /it/docs/Web/API/Node/prefix +/it/docs/DOM/element.textContent /it/docs/Web/API/Node/textContent /it/docs/DOM/event /it/docs/Web/API/Event -/it/docs/DOM/event.altKey /it/docs/Web/API/Event/altKey +/it/docs/DOM/event.altKey /it/docs/Web/API/MouseEvent/altKey /it/docs/DOM/event.bubbles /it/docs/Web/API/Event/bubbles -/it/docs/DOM/event.button /it/docs/Web/API/Event/button +/it/docs/DOM/event.button /it/docs/Web/API/MouseEvent/button /it/docs/DOM/event.cancelable /it/docs/Web/API/Event/cancelable -/it/docs/DOM/event.charCode /it/docs/Web/API/Event/charCode -/it/docs/DOM/event.ctrlKey /it/docs/Web/API/Event/ctrlKey +/it/docs/DOM/event.charCode /it/docs/Web/API/KeyboardEvent/charCode +/it/docs/DOM/event.ctrlKey /it/docs/Web/API/MouseEvent/ctrlKey /it/docs/DOM/event.eventPhase /it/docs/Web/API/Event/eventPhase -/it/docs/DOM/event.isChar /it/docs/Web/API/Event/isChar -/it/docs/DOM/event.keyCode /it/docs/Web/API/Event/keyCode -/it/docs/DOM/event.layerX /it/docs/Web/API/Event/layerX -/it/docs/DOM/event.layerY /it/docs/Web/API/Event/layerY -/it/docs/DOM/event.metaKey /it/docs/Web/API/Event/metaKey -/it/docs/DOM/event.pageX /it/docs/Web/API/Event/pageX -/it/docs/DOM/event.pageY /it/docs/Web/API/Event/pageY +/it/docs/DOM/event.isChar /it/docs/Web/API/UIEvent/isChar +/it/docs/DOM/event.keyCode /it/docs/Web/API/KeyboardEvent/keyCode +/it/docs/DOM/event.layerX /it/docs/Web/API/UIEvent/layerX +/it/docs/DOM/event.layerY /it/docs/Web/API/UIEvent/layerY +/it/docs/DOM/event.metaKey /it/docs/Web/API/MouseEvent/metaKey +/it/docs/DOM/event.pageX /it/docs/Web/API/UIEvent/pageX +/it/docs/DOM/event.pageY /it/docs/Web/API/UIEvent/pageY /it/docs/DOM/event.preventDefault /it/docs/Web/API/Event/preventDefault -/it/docs/DOM/event.shiftKey /it/docs/Web/API/Event/shiftKey +/it/docs/DOM/event.shiftKey /it/docs/Web/API/MouseEvent/shiftKey /it/docs/DOM/event.stopPropagation /it/docs/Web/API/Event/stopPropagation /it/docs/DOM/event.timeStamp /it/docs/Web/API/Event/timeStamp /it/docs/DOM/event.type /it/docs/Web/API/Event/type -/it/docs/DOM/event.view /it/docs/Web/API/Event/view -/it/docs/DOM/event.which /it/docs/Web/API/Event/which +/it/docs/DOM/event.view /it/docs/Web/API/UIEvent/view +/it/docs/DOM/event.which /it/docs/Web/API/KeyboardEvent/which /it/docs/DOM/form /it/docs/Web/API/HTMLFormElement /it/docs/DOM/form.acceptCharset /it/docs/Web/API/HTMLFormElement/acceptCharset /it/docs/DOM/form.action /it/docs/Web/API/HTMLFormElement/action @@ -226,7 +238,7 @@ /it/docs/DOM:document.defaultView /it/docs/Web/API/Document/defaultView /it/docs/DOM:document.doctype /it/docs/Web/API/Document/doctype /it/docs/DOM:document.documentElement /it/docs/Web/API/Document/documentElement -/it/docs/DOM:document.firstChild /it/docs/Web/API/Document/firstChild +/it/docs/DOM:document.firstChild /it/docs/conflicting/Web/API/Node/firstChild /it/docs/DOM:document.forms /it/docs/Web/API/Document/forms /it/docs/DOM:document.getElementById /it/docs/Web/API/Document/getElementById /it/docs/DOM:document.getElementsByName /it/docs/Web/API/Document/getElementsByName @@ -234,48 +246,48 @@ /it/docs/DOM:document.importNode /it/docs/Web/API/Document/importNode /it/docs/DOM:document.lastModified /it/docs/Web/API/Document/lastModified /it/docs/DOM:document.links /it/docs/Web/API/Document/links -/it/docs/DOM:document.namespaceURI /it/docs/Web/API/Document/namespaceURI +/it/docs/DOM:document.namespaceURI /it/docs/Web/API/Node/namespaceURI /it/docs/DOM:document.open /it/docs/Web/API/Document/open /it/docs/DOM:document.referrer /it/docs/Web/API/Document/referrer -/it/docs/DOM:document.styleSheets /it/docs/Web/API/Document/styleSheets +/it/docs/DOM:document.styleSheets /it/docs/Web/API/DocumentOrShadowRoot/styleSheets /it/docs/DOM:document.title /it/docs/Web/API/Document/title /it/docs/DOM:document.width /it/docs/Web/API/Document/width /it/docs/DOM:element /it/docs/Web/API/Element -/it/docs/DOM:element.addEventListener /it/docs/Web/API/Element/addEventListener +/it/docs/DOM:element.addEventListener /it/docs/Web/API/EventTarget/addEventListener /it/docs/DOM:element.attributes /it/docs/Web/API/Element/attributes -/it/docs/DOM:element.childNodes /it/docs/Web/API/Element/childNodes +/it/docs/DOM:element.childNodes /it/docs/Web/API/Node/childNodes /it/docs/DOM:element.className /it/docs/Web/API/Element/className /it/docs/DOM:element.clientHeight /it/docs/Web/API/Element/clientHeight -/it/docs/DOM:element.firstChild /it/docs/Web/API/Element/firstChild +/it/docs/DOM:element.firstChild /it/docs/Web/API/Node/firstChild /it/docs/DOM:element.hasAttributes /it/docs/Web/API/Element/hasAttributes -/it/docs/DOM:element.nodeName /it/docs/Web/API/Element/nodeName -/it/docs/DOM:element.nodeType /it/docs/Web/API/Element/nodeType -/it/docs/DOM:element.nodeValue /it/docs/Web/API/Element/nodeValue -/it/docs/DOM:element.parentNode /it/docs/Web/API/Element/parentNode -/it/docs/DOM:element.prefix /it/docs/Web/API/Element/prefix -/it/docs/DOM:element.textContent /it/docs/Web/API/Element/textContent +/it/docs/DOM:element.nodeName /it/docs/Web/API/Node/nodeName +/it/docs/DOM:element.nodeType /it/docs/Web/API/Node/nodeType +/it/docs/DOM:element.nodeValue /it/docs/Web/API/Node/nodeValue +/it/docs/DOM:element.parentNode /it/docs/Web/API/Node/parentNode +/it/docs/DOM:element.prefix /it/docs/Web/API/Node/prefix +/it/docs/DOM:element.textContent /it/docs/Web/API/Node/textContent /it/docs/DOM:event /it/docs/Web/API/Event -/it/docs/DOM:event.altKey /it/docs/Web/API/Event/altKey +/it/docs/DOM:event.altKey /it/docs/Web/API/MouseEvent/altKey /it/docs/DOM:event.bubbles /it/docs/Web/API/Event/bubbles -/it/docs/DOM:event.button /it/docs/Web/API/Event/button +/it/docs/DOM:event.button /it/docs/Web/API/MouseEvent/button /it/docs/DOM:event.cancelable /it/docs/Web/API/Event/cancelable -/it/docs/DOM:event.charCode /it/docs/Web/API/Event/charCode -/it/docs/DOM:event.ctrlKey /it/docs/Web/API/Event/ctrlKey +/it/docs/DOM:event.charCode /it/docs/Web/API/KeyboardEvent/charCode +/it/docs/DOM:event.ctrlKey /it/docs/Web/API/MouseEvent/ctrlKey /it/docs/DOM:event.eventPhase /it/docs/Web/API/Event/eventPhase -/it/docs/DOM:event.isChar /it/docs/Web/API/Event/isChar -/it/docs/DOM:event.keyCode /it/docs/Web/API/Event/keyCode -/it/docs/DOM:event.layerX /it/docs/Web/API/Event/layerX -/it/docs/DOM:event.layerY /it/docs/Web/API/Event/layerY -/it/docs/DOM:event.metaKey /it/docs/Web/API/Event/metaKey -/it/docs/DOM:event.pageX /it/docs/Web/API/Event/pageX -/it/docs/DOM:event.pageY /it/docs/Web/API/Event/pageY +/it/docs/DOM:event.isChar /it/docs/Web/API/UIEvent/isChar +/it/docs/DOM:event.keyCode /it/docs/Web/API/KeyboardEvent/keyCode +/it/docs/DOM:event.layerX /it/docs/Web/API/UIEvent/layerX +/it/docs/DOM:event.layerY /it/docs/Web/API/UIEvent/layerY +/it/docs/DOM:event.metaKey /it/docs/Web/API/MouseEvent/metaKey +/it/docs/DOM:event.pageX /it/docs/Web/API/UIEvent/pageX +/it/docs/DOM:event.pageY /it/docs/Web/API/UIEvent/pageY /it/docs/DOM:event.preventDefault /it/docs/Web/API/Event/preventDefault -/it/docs/DOM:event.shiftKey /it/docs/Web/API/Event/shiftKey +/it/docs/DOM:event.shiftKey /it/docs/Web/API/MouseEvent/shiftKey /it/docs/DOM:event.stopPropagation /it/docs/Web/API/Event/stopPropagation /it/docs/DOM:event.timeStamp /it/docs/Web/API/Event/timeStamp /it/docs/DOM:event.type /it/docs/Web/API/Event/type -/it/docs/DOM:event.view /it/docs/Web/API/Event/view -/it/docs/DOM:event.which /it/docs/Web/API/Event/which +/it/docs/DOM:event.view /it/docs/Web/API/UIEvent/view +/it/docs/DOM:event.which /it/docs/Web/API/KeyboardEvent/which /it/docs/DOM:form /it/docs/Web/API/HTMLFormElement /it/docs/DOM:form.acceptCharset /it/docs/Web/API/HTMLFormElement/acceptCharset /it/docs/DOM:form.action /it/docs/Web/API/HTMLFormElement/action @@ -341,17 +353,25 @@ /it/docs/DOM:window.status /it/docs/Web/API/Window/status /it/docs/DOM:window.statusbar /it/docs/Web/API/Window/statusbar /it/docs/DOM:window.stop /it/docs/Web/API/Window/stop +/it/docs/DOM_Inspector /it/docs/orphaned/Tools/Add-ons/DOM_Inspector +/it/docs/Dare_una_mano_al_puntatore /it/docs/conflicting/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /it/docs/Developer_Guide /it/docs/Mozilla/Developer_guide /it/docs/Estensioni:Comunità /it/docs/Estensioni/Comunità -/it/docs/Firefox_1.5 /it/docs/Firefox_1.5_per_Sviluppatori -/it/docs/Firefox_2 /it/docs/Firefox_2.0_per_Sviluppatori -/it/docs/Firefox_2_per_Sviluppatori /it/docs/Firefox_2.0_per_Sviluppatori -/it/docs/Guida_di_riferimento_ai_CSS /it/docs/Web/CSS/Guida_di_riferimento_ai_CSS +/it/docs/Firefox_1.5 /it/docs/Mozilla/Firefox/Releases/1.5 +/it/docs/Firefox_1.5_per_Sviluppatori /it/docs/Mozilla/Firefox/Releases/1.5 +/it/docs/Firefox_18_for_developers /it/docs/Mozilla/Firefox/Releases/18 +/it/docs/Firefox_2 /it/docs/Mozilla/Firefox/Releases/2 +/it/docs/Firefox_2.0_per_Sviluppatori /it/docs/Mozilla/Firefox/Releases/2 +/it/docs/Firefox_2_per_Sviluppatori /it/docs/Mozilla/Firefox/Releases/2 +/it/docs/Gli_User_Agent_di_Gecko /it/docs/Web/HTTP/Headers/User-Agent/Firefox +/it/docs/Glossary/Header_di_risposta /it/docs/Glossary/Response_header +/it/docs/Glossary/Protocollo /it/docs/Glossary/Protocol +/it/docs/Guida_di_riferimento_ai_CSS /it/docs/Web/CSS/Reference /it/docs/HTML /it/docs/Web/HTML -/it/docs/HTML/Aree_tematiche /it/docs/Web/Guide/HTML/Categorie_di_contenuto -/it/docs/HTML/Attributi /it/docs/Web/HTML/Attributi -/it/docs/HTML/Canvas /it/docs/Web/HTML/Canvas -/it/docs/HTML/Canvas/Drawing_graphics_with_canvas /it/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas +/it/docs/HTML/Aree_tematiche /it/docs/Web/Guide/HTML/Content_categories +/it/docs/HTML/Attributi /it/docs/Web/HTML/Attributes +/it/docs/HTML/Canvas /it/docs/Web/API/Canvas_API +/it/docs/HTML/Canvas/Drawing_graphics_with_canvas /it/docs/conflicting/Web/API/Canvas_API/Tutorial /it/docs/HTML/Element /it/docs/Web/HTML/Element /it/docs/HTML/Element/a /it/docs/Web/HTML/Element/a /it/docs/HTML/Element/abbr /it/docs/Web/HTML/Element/abbr @@ -362,68 +382,232 @@ /it/docs/HTML/Element/output /it/docs/Web/HTML/Element/output /it/docs/HTML/Element/section /it/docs/Web/HTML/Element/section /it/docs/HTML/Element/time /it/docs/Web/HTML/Element/time -/it/docs/HTML/Forms_in_HTML /it/docs/Web/HTML/Forms_in_HTML +/it/docs/HTML/Forms_in_HTML /it/docs/orphaned/Learn/HTML/Forms/HTML5_updates /it/docs/HTML/Global_attributes /it/docs/Web/HTML/Global_attributes -/it/docs/HTML/HTML5 /it/docs/Web/HTML/HTML5 -/it/docs/HTML/HTML5/Introduction_to_HTML5 /it/docs/Web/HTML/HTML5/Introduction_to_HTML5 +/it/docs/HTML/HTML5 /it/docs/Web/Guide/HTML/HTML5 +/it/docs/HTML/HTML5/Introduction_to_HTML5 /it/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /it/docs/HTML/Introduzione /it/docs/Learn/HTML/Introduction_to_HTML -/it/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document -/it/docs/HTML/utilizzare_application_cache /it/docs/Web/HTML/utilizzare_application_cache -/it/docs/Il_DOM_e_JavaScript /it/docs/Web/JavaScript/Il_DOM_e_JavaScript +/it/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /it/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/it/docs/HTML/utilizzare_application_cache /it/docs/Web/HTML/Using_the_application_cache +/it/docs/Il_DOM_e_JavaScript /it/docs/Web/JavaScript/JavaScript_technologies_overview /it/docs/Importare_applicazioni_da_Internet_Explorer_a_Mozilla /it/docs/Migrare_applicazioni_da_Internet_Explorer_a_Mozilla -/it/docs/Introduzione_al_carattere_Object-Oriented_di_JavaScript /it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript +/it/docs/Indentazione_corretta_delle_liste /it/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +/it/docs/Installare_plugin_di_ricerca_dalle_pagine_web /it/docs/Web/OpenSearch +/it/docs/Introduzione_a_SVG_dentro_XHTML /it/docs/Web/SVG/Applying_SVG_effects_to_HTML_content +/it/docs/Introduzione_al_carattere_Object-Oriented_di_JavaScript /it/docs/conflicting/Learn/JavaScript/Objects /it/docs/JavaScript /it/docs/Web/JavaScript /it/docs/JavaScript/ECMAScript_6_support_in_Mozilla /it/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla -/it/docs/JavaScript/Guida /it/docs/Web/JavaScript/Guida +/it/docs/JavaScript/Guida /it/docs/Web/JavaScript/Guide /it/docs/JavaScript/New_in_JavaScript /it/docs/Web/JavaScript/New_in_JavaScript /it/docs/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.6 /it/docs/Web/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.6 /it/docs/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.7 /it/docs/Web/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.7 /it/docs/JavaScript/Reference /it/docs/Web/JavaScript/Reference -/it/docs/JavaScript/Reference/Functions_and_function_scope /it/docs/Web/JavaScript/Reference/Functions_and_function_scope +/it/docs/JavaScript/Reference/Functions_and_function_scope /it/docs/Web/JavaScript/Reference/Functions /it/docs/JavaScript/Reference/Global_Objects /it/docs/Web/JavaScript/Reference/Global_Objects /it/docs/JavaScript/Reference/Global_Objects/Object /it/docs/Web/JavaScript/Reference/Global_Objects/Object /it/docs/JavaScript/Reference/Global_Objects/Object/keys /it/docs/Web/JavaScript/Reference/Global_Objects/Object/keys /it/docs/JavaScript/Reference/Global_Objects/eval /it/docs/Web/JavaScript/Reference/Global_Objects/eval /it/docs/JavaScript/Reference/Statements /it/docs/Web/JavaScript/Reference/Statements /it/docs/JavaScript/Reference/Statements/let /it/docs/Web/JavaScript/Reference/Statements/let -/it/docs/JavaScript/Una_reintroduzione_al_JavaScript /it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript +/it/docs/JavaScript/Una_reintroduzione_al_JavaScript /it/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/it/docs/Le_Colonne_nei_CSS3 /it/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/it/docs/Learn/Accessibilità /it/docs/Learn/Accessibility +/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili /it/docs/Learn/Accessibility/Mobile +/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi /it/docs/Learn/Accessibility/Accessibility_troubleshooting +/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità /it/docs/Learn/Accessibility/CSS_and_JavaScript +/it/docs/Learn/Accessibilità/Cosa_è_accessibilità /it/docs/Learn/Accessibility/What_is_accessibility +/it/docs/Learn/Accessibilità/HTML_accessibilità /it/docs/Learn/Accessibility/HTML +/it/docs/Learn/Accessibilità/Multimedia /it/docs/Learn/Accessibility/Multimedia +/it/docs/Learn/Accessibilità/WAI-ARIA_basics /it/docs/Learn/Accessibility/WAI-ARIA_basics /it/docs/Learn/CSS/Basics/Box_model /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/it/docs/Learn/CSS/Building_blocks/Selettori /it/docs/Learn/CSS/Building_blocks/Selectors /it/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /it/docs/Learn/CSS/Introduction_to_CSS/Come_funziona_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /it/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks /it/docs/Learn/CSS/Styling_boxes/Stili_per_tabelle /it/docs/Learn/CSS/Building_blocks/Styling_tables +/it/docs/Learn/CSS/Styling_text/Definire_stili_link /it/docs/Learn/CSS/Styling_text/Styling_links +/it/docs/Learn/Come_contribuire /it/docs/orphaned/Learn/How_to_contribute +/it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web /it/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like +/it/docs/Learn/Getting_started_with_the_web/Come_funziona_il_Web /it/docs/Learn/Getting_started_with_the_web/How_the_Web_works +/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file /it/docs/Learn/Getting_started_with_the_web/Dealing_with_files +/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito /it/docs/Learn/Getting_started_with_the_web/Publishing_your_website +/it/docs/Learn/HTML/Forms /it/docs/Learn/Forms +/it/docs/Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati /it/docs/Learn/Forms/How_to_build_custom_form_controls +/it/docs/Learn/HTML/Forms/Form_validation /it/docs/Learn/Forms/Form_validation +/it/docs/Learn/HTML/Howto/Uso_attributi_data /it/docs/Learn/HTML/Howto/Use_data_attributes +/it/docs/Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML /it/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +/it/docs/Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html /it/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +/it/docs/Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio /it/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/it/docs/Learn/HTML/Multimedia_and_embedding/immagini_reattive /it/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images +/it/docs/Learn/HTML/Scrivi_una_semplice_pagina_in_HTML /it/docs/conflicting/Learn/Getting_started_with_the_web +/it/docs/Learn/JavaScript/Comefare /it/docs/Learn/JavaScript/Howto +/it/docs/Learn/JavaScript/First_steps/Cosa_è_andato_storto /it/docs/Learn/JavaScript/First_steps/What_went_wrong +/it/docs/Learn/JavaScript/First_steps/Variabili /it/docs/Learn/JavaScript/First_steps/Variables +/it/docs/Learn/JavaScript/Oggetti /it/docs/Learn/JavaScript/Objects +/it/docs/Learn/JavaScript/Oggetti/Basics /it/docs/Learn/JavaScript/Objects/Basics +/it/docs/Learn/JavaScript/Oggetti/JSON /it/docs/Learn/JavaScript/Objects/JSON +/it/docs/Learn/Server-side/Django/Introduzione /it/docs/Learn/Server-side/Django/Introduction /it/docs/Libertà!_Uguaglianza!_Validità! /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML -/it/docs/Localizzazione /it/docs/Localization +/it/docs/Link_prefetching_FAQ /it/docs/Web/HTTP/Link_prefetching_FAQ +/it/docs/Localization /it/docs/Glossary/Localization +/it/docs/Localizzazione /it/docs/Glossary/Localization +/it/docs/MDN/Community /it/docs/orphaned/MDN/Community /it/docs/MDN/Contribute/Content /it/docs/MDN/Guidelines -/it/docs/MDN/Contribute/Content/Macros /it/docs/MDN/Guidelines/Macros -/it/docs/MDN/Contribute/Content/Migliore_pratica /it/docs/MDN/Guidelines/Migliore_pratica -/it/docs/MDN/Contribute/Editor /it/docs/MDN/Editor +/it/docs/MDN/Contribute/Content/Macros /it/docs/MDN/Structures/Macros +/it/docs/MDN/Contribute/Content/Migliore_pratica /it/docs/MDN/Guidelines/Conventions_definitions +/it/docs/MDN/Contribute/Creating_and_editing_pages /it/docs/MDN/Contribute/Howto/Create_and_edit_pages +/it/docs/MDN/Contribute/Editor /it/docs/orphaned/MDN/Editor +/it/docs/MDN/Contribute/Howto/Create_an_MDN_account /it/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account +/it/docs/MDN/Contribute/Howto/Delete_my_profile /it/docs/orphaned/MDN/Contribute/Howto/Delete_my_profile +/it/docs/MDN/Contribute/Howto/Do_a_technical_review /it/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review +/it/docs/MDN/Contribute/Howto/Do_an_editorial_review /it/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review +/it/docs/MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina /it/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page /it/docs/MDN/Contribute/Structures /it/docs/MDN/Structures -/it/docs/MDN/Contribute/Structures/Tabelle_compatibilità /it/docs/MDN/Structures/Tabelle_compatibilità +/it/docs/MDN/Contribute/Structures/Tabelle_compatibilità /it/docs/MDN/Structures/Compatibility_tables +/it/docs/MDN/Editor /it/docs/orphaned/MDN/Editor /it/docs/MDN/Feedback /it/docs/MDN/Contribute/Feedback +/it/docs/MDN/Guidelines/Macros /it/docs/MDN/Structures/Macros +/it/docs/MDN/Guidelines/Migliore_pratica /it/docs/MDN/Guidelines/Conventions_definitions +/it/docs/MDN/Structures/Tabelle_compatibilità /it/docs/MDN/Structures/Compatibility_tables +/it/docs/MDN_at_ten /it/docs/MDN/At_ten +/it/docs/Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions /it/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +/it/docs/Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension /it/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +/it/docs/Mozilla/Add-ons/WebExtensions/Script_contenuto /it/docs/Mozilla/Add-ons/WebExtensions/Content_scripts +/it/docs/Mozilla/Firefox/Funzionalità_sperimentali /it/docs/Mozilla/Firefox/Experimental_features /it/docs/Novità_in_JavaScript_1.6 /it/docs/Web/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.6 /it/docs/Novità_in_JavaScript_1.7 /it/docs/Web/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.7 /it/docs/Pagina_Principale /it/docs/Web -/it/docs/Plugins /it/docs/Plug-in +/it/docs/Plug-in /it/docs/Web/API/Plugin +/it/docs/Plugins /it/docs/Web/API/Plugin +/it/docs/Python /it/docs/conflicting/Learn/Server-side/Django /it/docs/Rich-Text_Editing_in_Mozilla /it/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla -/it/docs/Una_re-introduzione_a_Javascript /it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript -/it/docs/Usare_le_URL_nella_proprietà_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor -/it/docs/Usare_valori_URL_per_la_proprietà_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +/it/docs/SVG /it/docs/Web/SVG +/it/docs/Sviluppo_Web /it/docs/conflicting/Web/Guide +/it/docs/Tools/Add-ons /it/docs/orphaned/Tools/Add-ons +/it/docs/Tools/Prestazioni /it/docs/Tools/Performance +/it/docs/Tools/Visualizzazione_Flessibile /it/docs/Tools/Responsive_Design_Mode +/it/docs/Tutorial_sulle_Canvas /it/docs/Web/API/Canvas_API/Tutorial +/it/docs/Una_re-introduzione_a_Javascript /it/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/it/docs/Usare_le_URL_nella_proprietà_cursor /it/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +/it/docs/Usare_valori_URL_per_la_proprietà_cursor /it/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +/it/docs/Web/API/Document/firstChild /it/docs/conflicting/Web/API/Node/firstChild +/it/docs/Web/API/Document/namespaceURI /it/docs/Web/API/Node/namespaceURI +/it/docs/Web/API/Document/styleSheets /it/docs/Web/API/DocumentOrShadowRoot/styleSheets +/it/docs/Web/API/Document_Object_Model/Introduzione /it/docs/Web/API/Document_Object_Model/Introduction /it/docs/Web/API/Element.getElementsByTagName /it/docs/Web/API/Element/getElementsByTagName /it/docs/Web/API/Element.scrollHeight /it/docs/Web/API/Element/scrollHeight +/it/docs/Web/API/Element/addEventListener /it/docs/Web/API/EventTarget/addEventListener +/it/docs/Web/API/Element/childNodes /it/docs/Web/API/Node/childNodes +/it/docs/Web/API/Element/firstChild /it/docs/Web/API/Node/firstChild +/it/docs/Web/API/Element/nodeName /it/docs/Web/API/Node/nodeName +/it/docs/Web/API/Element/nodeType /it/docs/Web/API/Node/nodeType +/it/docs/Web/API/Element/nodeValue /it/docs/Web/API/Node/nodeValue +/it/docs/Web/API/Element/parentNode /it/docs/Web/API/Node/parentNode +/it/docs/Web/API/Element/prefix /it/docs/Web/API/Node/prefix +/it/docs/Web/API/Element/textContent /it/docs/Web/API/Node/textContent +/it/docs/Web/API/Event/altKey /it/docs/Web/API/MouseEvent/altKey +/it/docs/Web/API/Event/button /it/docs/Web/API/MouseEvent/button +/it/docs/Web/API/Event/charCode /it/docs/Web/API/KeyboardEvent/charCode +/it/docs/Web/API/Event/ctrlKey /it/docs/Web/API/MouseEvent/ctrlKey +/it/docs/Web/API/Event/isChar /it/docs/Web/API/UIEvent/isChar +/it/docs/Web/API/Event/keyCode /it/docs/Web/API/KeyboardEvent/keyCode +/it/docs/Web/API/Event/layerX /it/docs/Web/API/UIEvent/layerX +/it/docs/Web/API/Event/layerY /it/docs/Web/API/UIEvent/layerY +/it/docs/Web/API/Event/metaKey /it/docs/Web/API/MouseEvent/metaKey +/it/docs/Web/API/Event/pageX /it/docs/Web/API/UIEvent/pageX +/it/docs/Web/API/Event/pageY /it/docs/Web/API/UIEvent/pageY +/it/docs/Web/API/Event/shiftKey /it/docs/Web/API/MouseEvent/shiftKey +/it/docs/Web/API/Event/view /it/docs/Web/API/UIEvent/view +/it/docs/Web/API/Event/which /it/docs/Web/API/KeyboardEvent/which +/it/docs/Web/API/Geolocation/Using_geolocation /it/docs/Web/API/Geolocation_API /it/docs/Web/API/Navigator.cookieEnabled /it/docs/Web/API/Navigator/cookieEnabled /it/docs/Web/API/Position /it/docs/Web/API/GeolocationPosition +/it/docs/Web/API/URLUtils /it/docs/Web/API/HTMLHyperlinkElementUtils +/it/docs/Web/API/WindowTimers /it/docs/conflicting/Web/API/WindowOrWorkerGlobalScope +/it/docs/Web/API/WindowTimers/clearInterval /it/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval +/it/docs/Web/API/XMLHttpRequest/Usare_XMLHttpRequest /it/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /it/docs/Web/API/document.write() /it/docs/Web/API/Document/write +/it/docs/Web/API/notifiche /it/docs/Web/API/Notification +/it/docs/Web/API/notifiche/dir /it/docs/Web/API/Notification/dir +/it/docs/Web/Accessibility/Sviluppo_Web /it/docs/conflicting/Web/Accessibility +/it/docs/Web/CSS/-moz-font-language-override /it/docs/Web/CSS/font-language-override /it/docs/Web/CSS/@-moz-document /it/docs/Web/CSS/@document -/it/docs/Web/CSS/Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /it/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/it/docs/Web/CSS/Getting_Started /it/docs/Learn/CSS/First_steps +/it/docs/Web/CSS/Guida_di_riferimento_ai_CSS /it/docs/Web/CSS/Reference +/it/docs/Web/CSS/Ricette_layout /it/docs/Web/CSS/Layout_cookbook +/it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor /it/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +/it/docs/Web/CSS/selettore_figli_diretti /it/docs/Web/CSS/Child_combinator +/it/docs/Web/Esempi_di_tecnologie_web_open /it/docs/Web/Demos_of_open_web_technologies +/it/docs/Web/Events/DOMContentLoaded /it/docs/Web/API/Window/DOMContentLoaded_event /it/docs/Web/Events/devicemotion /it/docs/Web/API/Window/devicemotion_event +/it/docs/Web/Events/load /it/docs/Web/API/Window/load_event /it/docs/Web/Events/orientationchange /it/docs/Web/API/Window/orientationchange_event +/it/docs/Web/Guide/AJAX/Iniziare /it/docs/Web/Guide/AJAX/Getting_Started +/it/docs/Web/Guide/CSS /it/docs/conflicting/Learn/CSS /it/docs/Web/Guide/HTML /it/docs/Learn/HTML -/it/docs/Web/HTML/Aree_tematiche /it/docs/Web/Guide/HTML/Categorie_di_contenuto -/it/docs/Web/JavaScript/Guide /it/docs/Web/JavaScript/Guida +/it/docs/Web/Guide/HTML/Categorie_di_contenuto /it/docs/Web/Guide/HTML/Content_categories +/it/docs/Web/HTML/Aree_tematiche /it/docs/Web/Guide/HTML/Content_categories +/it/docs/Web/HTML/Attributi /it/docs/Web/HTML/Attributes +/it/docs/Web/HTML/Canvas /it/docs/Web/API/Canvas_API +/it/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas /it/docs/conflicting/Web/API/Canvas_API/Tutorial +/it/docs/Web/HTML/Element/figura /it/docs/Web/HTML/Element/figure +/it/docs/Web/HTML/Forms_in_HTML /it/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/it/docs/Web/HTML/HTML5 /it/docs/Web/Guide/HTML/HTML5 +/it/docs/Web/HTML/HTML5/Introduction_to_HTML5 /it/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/it/docs/Web/HTML/Riferimento /it/docs/Web/HTML/Reference +/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document /it/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/it/docs/Web/HTML/utilizzare_application_cache /it/docs/Web/HTML/Using_the_application_cache +/it/docs/Web/HTTP/Basi_HTTP /it/docs/Web/HTTP/Basics_of_HTTP +/it/docs/Web/HTTP/Compressione /it/docs/Web/HTTP/Compression +/it/docs/Web/HTTP/Panoramica /it/docs/Web/HTTP/Overview +/it/docs/Web/HTTP/Richieste_range /it/docs/Web/HTTP/Range_requests +/it/docs/Web/HTTP/Sessione /it/docs/Web/HTTP/Session +/it/docs/Web/HTTP/negoziazione-del-contenuto /it/docs/Web/HTTP/Content_negotiation +/it/docs/Web/JavaScript/Chiusure /it/docs/Web/JavaScript/Closures +/it/docs/Web/JavaScript/Cosè_JavaScript /it/docs/Web/JavaScript/About_JavaScript +/it/docs/Web/JavaScript/Gestione_della_Memoria /it/docs/Web/JavaScript/Memory_Management +/it/docs/Web/JavaScript/Getting_Started /it/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics +/it/docs/Web/JavaScript/Guida /it/docs/Web/JavaScript/Guide +/it/docs/Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori /it/docs/Web/JavaScript/Guide/Control_flow_and_error_handling +/it/docs/Web/JavaScript/Guida/Dettagli_Object_Model /it/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/it/docs/Web/JavaScript/Guida/Espressioni_Regolari /it/docs/Web/JavaScript/Guide/Regular_Expressions +/it/docs/Web/JavaScript/Guida/Functions /it/docs/Web/JavaScript/Guide/Functions +/it/docs/Web/JavaScript/Guida/Grammar_and_types /it/docs/Web/JavaScript/Guide/Grammar_and_types +/it/docs/Web/JavaScript/Guida/Introduzione /it/docs/Web/JavaScript/Guide/Introduction +/it/docs/Web/JavaScript/Guida/Iteratori_e_generatori /it/docs/Web/JavaScript/Guide/Iterators_and_Generators +/it/docs/Web/JavaScript/Guida/Loops_and_iteration /it/docs/Web/JavaScript/Guide/Loops_and_iteration +/it/docs/Web/JavaScript/Il_DOM_e_JavaScript /it/docs/Web/JavaScript/JavaScript_technologies_overview +/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript /it/docs/conflicting/Learn/JavaScript/Objects +/it/docs/Web/JavaScript/Reference/Classes/costruttore /it/docs/Web/JavaScript/Reference/Classes/constructor +/it/docs/Web/JavaScript/Reference/Functions_and_function_scope /it/docs/Web/JavaScript/Reference/Functions +/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions /it/docs/Web/JavaScript/Reference/Functions/Arrow_functions +/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments /it/docs/Web/JavaScript/Reference/Functions/arguments +/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/get /it/docs/Web/JavaScript/Reference/Functions/get +/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/set /it/docs/Web/JavaScript/Reference/Functions/set +/it/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /it/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype +/it/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /it/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object +/it/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /it/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +/it/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply /it/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +/it/docs/Web/JavaScript/Reference/Global_Objects/Proxy/revocabile /it/docs/Web/JavaScript/Reference/Global_Objects/Proxy/revocable +/it/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /it/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/it/docs/Web/JavaScript/Reference/Operators/Operator_Condizionale /it/docs/Web/JavaScript/Reference/Operators/Conditional_Operator +/it/docs/Web/JavaScript/Reference/Operators/Operatore_virgola /it/docs/Web/JavaScript/Reference/Operators/Comma_Operator +/it/docs/Web/JavaScript/Reference/Operators/Operatori_Aritmetici /it/docs/conflicting/Web/JavaScript/Reference/Operators /it/docs/Web/JavaScript/Reference/Operators/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax +/it/docs/Web/JavaScript/Reference/template_strings /it/docs/Web/JavaScript/Reference/Template_literals +/it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript /it/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/it/docs/Web/Performance/Percorso_critico_di_rendering /it/docs/Web/Performance/Critical_rendering_path +/it/docs/Web/Security/Password_insicure /it/docs/Web/Security/Insecure_passwords /it/docs/Web/WebGL /it/docs/Web/API/WebGL_API +/it/docs/Web/Web_Components/Usare_custom_elements /it/docs/Web/Web_Components/Using_custom_elements +/it/docs/WebSockets /it/docs/Web/API/WebSockets_API +/it/docs/WebSockets/Writing_WebSocket_client_applications /it/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications +/it/docs/Web_Development/Mobile /it/docs/Web/Guide/Mobile +/it/docs/Web_Development/Mobile/Design_sensibile /it/docs/Web/Progressive_web_apps +/it/docs/XHTML /it/docs/Glossary/XHTML /it/docs/XMLHttpRequest /it/docs/Web/API/XMLHttpRequest /it/docs/XPCOM:Binding_per_i_linguaggi /it/docs/XPCOM/Binding_per_i_linguaggi /it/docs/XSLT /it/docs/Web/XSLT /it/docs/en /en-US/ +/it/docs/window.find /it/docs/Web/API/Window/find diff --git a/files/it/_wikihistory.json b/files/it/_wikihistory.json index 02a3332341..eb1bf7ebb5 100644 --- a/files/it/_wikihistory.json +++ b/files/it/_wikihistory.json @@ -1,145 +1,4 @@ { - "Adattare_le_applicazioni_XUL_a_Firefox_1.5": { - "modified": "2019-03-23T23:41:34.028Z", - "contributors": [ - "wbamberg", - "Indigo" - ] - }, - "Circa_il_Document_Object_Model": { - "modified": "2019-03-23T23:40:46.607Z", - "contributors": [ - "teoli", - "DaViD83" - ] - }, - "Conoscere_i_CSS": { - "modified": "2019-03-23T23:43:26.363Z", - "contributors": [ - "libri-nozze", - "Davidee", - "Grino", - "Verruckt", - "Indigo" - ] - }, - "Conoscere_i_CSS/CSS_leggibili": { - "modified": "2019-03-23T23:43:30.247Z", - "contributors": [ - "Verruckt", - "Indigo" - ] - }, - "Conoscere_i_CSS/Cascata_ed_ereditarietà": { - "modified": "2019-03-23T23:44:51.382Z", - "contributors": [ - "Sheppy", - "Andrealibo", - "Verruckt", - "Indigo" - ] - }, - "Conoscere_i_CSS/Che_cosa_sono_i_CSS": { - "modified": "2019-03-23T23:43:28.433Z", - "contributors": [ - "pignaccia", - "Grino", - "Verruckt", - "Indigo" - ] - }, - "Conoscere_i_CSS/Come_funzionano_i_CSS": { - "modified": "2019-03-23T23:43:26.112Z", - "contributors": [ - "Verruckt", - "Indigo" - ] - }, - "Conoscere_i_CSS/I_Selettori": { - "modified": "2019-03-23T23:43:27.992Z", - "contributors": [ - "Verruckt", - "Indigo" - ] - }, - "Conoscere_i_CSS/Perché_usare_i_CSS": { - "modified": "2019-03-23T23:43:33.204Z", - "contributors": [ - "pignaccia", - "Verruckt", - "Indigo" - ] - }, - "Costruire_e_decostruire_un_documento_XML": { - "modified": "2019-03-24T00:13:01.603Z", - "contributors": [ - "fscholz", - "foto-planner", - "fusionchess" - ] - }, - "DHTML": { - "modified": "2019-03-24T00:02:50.459Z", - "contributors": [ - "teoli", - "fscholz", - "Samuele" - ] - }, - "DOM": { - "modified": "2019-03-24T00:03:02.057Z", - "contributors": [ - "teoli", - "Samuele", - "Grino", - "khela", - "Federico", - "DaViD83" - ] - }, - "DOM_Inspector": { - "modified": "2020-07-16T22:36:24.345Z", - "contributors": [ - "Federico", - "Leofiore", - "Samuele" - ] - }, - "Dare_una_mano_al_puntatore": { - "modified": "2019-03-23T23:43:11.495Z", - "contributors": [ - "teoli", - "ethertank", - "bradipao" - ] - }, - "Firefox_1.5_per_Sviluppatori": { - "modified": "2019-03-23T23:44:26.825Z", - "contributors": [ - "wbamberg", - "teoli", - "Leofiore", - "Federico" - ] - }, - "Firefox_18_for_developers": { - "modified": "2019-03-23T23:34:04.358Z", - "contributors": [ - "wbamberg", - "Indil", - "0limits91" - ] - }, - "Firefox_2.0_per_Sviluppatori": { - "modified": "2019-03-23T23:44:14.083Z", - "contributors": [ - "wbamberg", - "Leofiore", - "Samuele", - "Federico", - "Neotux" - ] - }, "Games": { "modified": "2019-09-09T15:32:14.707Z", "contributors": [ @@ -156,14 +15,6 @@ "Antonio-Caminiti" ] }, - "Gli_User_Agent_di_Gecko": { - "modified": "2019-03-23T23:44:58.670Z", - "contributors": [ - "fotografi", - "teoli", - "Federico" - ] - }, "Glossary": { "modified": "2020-10-07T11:11:11.203Z", "contributors": [ @@ -243,12 +94,6 @@ "gnardell" ] }, - "Glossary/Header_di_risposta": { - "modified": "2019-03-18T21:31:16.700Z", - "contributors": [ - "lucat92" - ] - }, "Glossary/Hoisting": { "modified": "2020-07-09T10:59:09.829Z", "contributors": [ @@ -286,13 +131,6 @@ "Fredev" ] }, - "Glossary/Protocollo": { - "modified": "2020-04-21T13:55:15.140Z", - "contributors": [ - "sara_t", - "xplosionmind" - ] - }, "Glossary/REST": { "modified": "2020-04-21T13:56:38.394Z", "contributors": [ @@ -331,34 +169,6 @@ "nicolo-ribaudo" ] }, - "Indentazione_corretta_delle_liste": { - "modified": "2019-03-23T23:43:02.621Z", - "contributors": [ - "music-wedding", - "artistics-weddings", - "teoli", - "bradipao" - ] - }, - "Installare_plugin_di_ricerca_dalle_pagine_web": { - "modified": "2019-01-16T16:19:44.703Z", - "contributors": [ - "Federico" - ] - }, - "Introduzione_a_SVG_dentro_XHTML": { - "modified": "2019-03-23T23:41:29.996Z", - "contributors": [ - "teoli", - "Federico" - ] - }, - "Le_Colonne_nei_CSS3": { - "modified": "2019-03-23T23:43:04.536Z", - "contributors": [ - "bradipao" - ] - }, "Learn": { "modified": "2020-07-16T22:43:43.043Z", "contributors": [ @@ -368,54 +178,6 @@ "MarcoMatta" ] }, - "Learn/Accessibilità": { - "modified": "2020-07-16T22:39:57.773Z", - "contributors": [ - "mipo" - ] - }, - "Learn/Accessibilità/Accessibilità_dispositivi_mobili": { - "modified": "2020-07-16T22:40:30.564Z", - "contributors": [ - "mipo" - ] - }, - "Learn/Accessibilità/Accessibilità_test_risoluzione_problemi": { - "modified": "2020-07-16T22:40:35.761Z", - "contributors": [ - "mipo" - ] - }, - "Learn/Accessibilità/CSS_e_JavaScript_accessibilità": { - "modified": "2020-07-16T22:40:17.303Z", - "contributors": [ - "mipo" - ] - }, - "Learn/Accessibilità/Cosa_è_accessibilità": { - "modified": "2020-07-16T22:40:04.717Z", - "contributors": [ - "mipo" - ] - }, - "Learn/Accessibilità/HTML_accessibilità": { - "modified": "2020-07-16T22:40:11.165Z", - "contributors": [ - "mipo" - ] - }, - "Learn/Accessibilità/Multimedia": { - "modified": "2020-07-16T22:40:26.699Z", - "contributors": [ - "mipo" - ] - }, - "Learn/Accessibilità/WAI-ARIA_basics": { - "modified": "2020-07-16T22:40:22.345Z", - "contributors": [ - "mipo" - ] - }, "Learn/CSS": { "modified": "2020-11-02T07:57:14.931Z", "contributors": [ @@ -435,12 +197,6 @@ "chrisdavidmills" ] }, - "Learn/CSS/Building_blocks/Selettori": { - "modified": "2020-10-27T14:47:40.269Z", - "contributors": [ - "francescomazza91" - ] - }, "Learn/CSS/Building_blocks/Styling_tables": { "modified": "2020-07-16T22:28:16.589Z", "contributors": [ @@ -482,20 +238,6 @@ "wilton-cruz" ] }, - "Learn/CSS/Styling_text/Definire_stili_link": { - "modified": "2020-07-16T22:26:19.044Z", - "contributors": [ - "genoa1893" - ] - }, - "Learn/Come_contribuire": { - "modified": "2020-07-16T22:33:44.464Z", - "contributors": [ - "SphinxKnight", - "ZiaRita", - "ivan.lori" - ] - }, "Learn/Common_questions": { "modified": "2020-07-16T22:35:24.563Z", "contributors": [ @@ -526,28 +268,6 @@ "howilearn" ] }, - "Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web": { - "modified": "2020-07-16T22:34:17.256Z", - "contributors": [ - "PyQio" - ] - }, - "Learn/Getting_started_with_the_web/Come_funziona_il_Web": { - "modified": "2020-11-10T20:12:58.028Z", - "contributors": [ - "massic80", - "JennyDC" - ] - }, - "Learn/Getting_started_with_the_web/Gestire_i_file": { - "modified": "2020-07-16T22:34:34.196Z", - "contributors": [ - "ZiaRita", - "PatrickT", - "DaniPani", - "cubark" - ] - }, "Learn/Getting_started_with_the_web/HTML_basics": { "modified": "2020-11-14T17:53:13.393Z", "contributors": [ @@ -574,13 +294,6 @@ "mnemosdev" ] }, - "Learn/Getting_started_with_the_web/Pubbicare_sito": { - "modified": "2020-07-30T14:39:28.232Z", - "contributors": [ - "sara_t", - "dag7dev" - ] - }, "Learn/HTML": { "modified": "2020-07-16T22:22:18.921Z", "contributors": [ @@ -588,30 +301,10 @@ "Ella" ] }, - "Learn/HTML/Forms": { - "modified": "2020-10-05T13:36:42.596Z", + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:29.048Z", "contributors": [ - "ArgusMk", - "Jeffrey_Yang" - ] - }, - "Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati": { - "modified": "2020-07-16T22:21:56.435Z", - "contributors": [ - "whiteLie" - ] - }, - "Learn/HTML/Forms/Form_validation": { - "modified": "2020-12-03T10:32:19.605Z", - "contributors": [ - "LoSo", - "claudiod" - ] - }, - "Learn/HTML/Howto": { - "modified": "2020-07-16T22:22:29.048Z", - "contributors": [ - "chrisdavidmills" + "chrisdavidmills" ] }, "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { @@ -620,13 +313,6 @@ "ladysilvia" ] }, - "Learn/HTML/Howto/Uso_attributi_data": { - "modified": "2020-07-16T22:22:35.395Z", - "contributors": [ - "Elfo404", - "Enrico_Polanski" - ] - }, "Learn/HTML/Introduction_to_HTML": { "modified": "2020-07-16T22:22:49.350Z", "contributors": [ @@ -647,22 +333,6 @@ "howilearn" ] }, - "Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML": { - "modified": "2020-07-16T22:23:20.000Z", - "contributors": [ - "Aedo1", - "howilearn" - ] - }, - "Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html": { - "modified": "2020-07-16T22:23:34.063Z", - "contributors": [ - "b4yl0n", - "duduindo", - "Th3cG", - "robertsillo" - ] - }, "Learn/HTML/Multimedia_and_embedding": { "modified": "2020-07-16T22:24:26.195Z", "contributors": [ @@ -677,27 +347,6 @@ "howilearn" ] }, - "Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio": { - "modified": "2020-07-16T22:24:53.308Z", - "contributors": [ - "howilearn" - ] - }, - "Learn/HTML/Multimedia_and_embedding/immagini_reattive": { - "modified": "2020-07-16T22:24:35.114Z", - "contributors": [ - "kalamun", - "howilearn" - ] - }, - "Learn/HTML/Scrivi_una_semplice_pagina_in_HTML": { - "modified": "2020-07-16T22:22:27.063Z", - "contributors": [ - "duduindo", - "wbamberg", - "Ella" - ] - }, "Learn/HTML/Tables": { "modified": "2020-07-16T22:25:12.659Z", "contributors": [ @@ -720,12 +369,6 @@ "chrisdavidmills" ] }, - "Learn/JavaScript/Comefare": { - "modified": "2020-07-16T22:33:09.378Z", - "contributors": [ - "mario.dilodovico1" - ] - }, "Learn/JavaScript/First_steps": { "modified": "2020-07-16T22:29:52.003Z", "contributors": [ @@ -734,40 +377,6 @@ "Elllenn" ] }, - "Learn/JavaScript/First_steps/Cosa_è_andato_storto": { - "modified": "2020-07-16T22:30:33.953Z", - "contributors": [ - "rosso791" - ] - }, - "Learn/JavaScript/First_steps/Variabili": { - "modified": "2020-08-19T06:27:13.303Z", - "contributors": [ - "a.ros", - "SamuelaKC", - "Ibernato93" - ] - }, - "Learn/JavaScript/Oggetti": { - "modified": "2020-07-16T22:31:50.631Z", - "contributors": [ - "maboglia", - "s3lvatico" - ] - }, - "Learn/JavaScript/Oggetti/Basics": { - "modified": "2020-07-16T22:31:59.612Z", - "contributors": [ - "dq82elo", - "claudiod" - ] - }, - "Learn/JavaScript/Oggetti/JSON": { - "modified": "2020-07-16T22:32:26.492Z", - "contributors": [ - "mario.dilodovico1" - ] - }, "Learn/Server-side": { "modified": "2020-07-16T22:35:58.950Z", "contributors": [ @@ -822,15 +431,6 @@ "mattiatoselli" ] }, - "Learn/Server-side/Django/Introduzione": { - "modified": "2020-10-29T07:11:12.599Z", - "contributors": [ - "sara_t", - "dag7dev", - "gianluca.gioino", - "CristinaS24" - ] - }, "Learn/Server-side/Django/Models": { "modified": "2020-07-16T22:36:57.781Z", "contributors": [ @@ -875,25 +475,6 @@ "mattiatoselli" ] }, - "Link_prefetching_FAQ": { - "modified": "2019-03-23T23:44:25.588Z", - "contributors": [ - "fscholz", - "artistics-weddings", - "jigs12", - "Leofiore" - ] - }, - "Localization": { - "modified": "2019-03-23T23:44:27.139Z", - "contributors": [ - "teoli", - "Verruckt", - "Leofiore", - "Etms", - "Federico" - ] - }, "MDN": { "modified": "2019-09-10T15:42:00.204Z", "contributors": [ @@ -915,14 +496,6 @@ "klez" ] }, - "MDN/Community": { - "modified": "2019-03-23T22:36:02.220Z", - "contributors": [ - "Italuil", - "wbamberg", - "Vinsala" - ] - }, "MDN/Contribute": { "modified": "2019-03-23T23:18:14.834Z", "contributors": [ @@ -931,15 +504,6 @@ "Sheppy" ] }, - "MDN/Contribute/Creating_and_editing_pages": { - "modified": "2019-03-23T23:06:13.182Z", - "contributors": [ - "wbamberg", - "fabriziobianchi3", - "claudio.mantuano", - "Sav_" - ] - }, "MDN/Contribute/Feedback": { "modified": "2020-09-30T17:51:21.113Z", "contributors": [ @@ -979,36 +543,6 @@ "nicokant" ] }, - "MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2019-01-16T19:06:05.374Z", - "contributors": [ - "ladysilvia", - "wbamberg", - "plovec", - "klez" - ] - }, - "MDN/Contribute/Howto/Delete_my_profile": { - "modified": "2020-10-21T23:15:42.235Z", - "contributors": [ - "FrancescoCoding" - ] - }, - "MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2019-01-16T19:16:55.097Z", - "contributors": [ - "wbamberg", - "klez" - ] - }, - "MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2019-03-23T23:10:59.000Z", - "contributors": [ - "wbamberg", - "mat.campanelli", - "Navy60" - ] - }, "MDN/Contribute/Howto/Tag": { "modified": "2020-07-29T06:42:10.343Z", "contributors": [ @@ -1020,22 +554,6 @@ "Originalsin8" ] }, - "MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina": { - "modified": "2019-03-23T23:07:02.988Z", - "contributors": [ - "wbamberg", - "Enrico12" - ] - }, - "MDN/Editor": { - "modified": "2020-09-30T15:41:34.289Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "klez", - "turco" - ] - }, "MDN/Guidelines": { "modified": "2020-09-30T15:30:11.537Z", "contributors": [ @@ -1044,22 +562,6 @@ "Sheppy" ] }, - "MDN/Guidelines/Macros": { - "modified": "2020-09-30T15:30:11.714Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "frbi" - ] - }, - "MDN/Guidelines/Migliore_pratica": { - "modified": "2020-09-30T15:30:11.829Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Giacomo_" - ] - }, "MDN/Structures": { "modified": "2020-09-30T09:07:10.947Z", "contributors": [ @@ -1068,24 +570,6 @@ "jswisher" ] }, - "MDN/Structures/Tabelle_compatibilità": { - "modified": "2020-10-15T22:03:08.289Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "PsCustomObject", - "Carlo-Effe" - ] - }, - "MDN_at_ten": { - "modified": "2019-03-23T22:42:30.395Z", - "contributors": [ - "foto-planner", - "Vinsala", - "Redsnic", - "Lorenzo_FF" - ] - }, "Mozilla": { "modified": "2019-03-23T23:36:49.678Z", "contributors": [ @@ -1142,24 +626,6 @@ "MarcoAGreco" ] }, - "Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions": { - "modified": "2019-03-18T21:03:03.594Z", - "contributors": [ - "chack1172" - ] - }, - "Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension": { - "modified": "2019-03-18T21:03:00.548Z", - "contributors": [ - "chack1172" - ] - }, - "Mozilla/Add-ons/WebExtensions/Script_contenuto": { - "modified": "2019-06-07T12:34:39.378Z", - "contributors": [ - "MarcoAGreco" - ] - }, "Mozilla/Add-ons/WebExtensions/user_interface": { "modified": "2019-06-07T11:18:06.662Z", "contributors": [ @@ -1184,12 +650,6 @@ "Prashanth" ] }, - "Mozilla/Firefox/Funzionalità_sperimentali": { - "modified": "2020-07-01T10:55:50.190Z", - "contributors": [ - "Karm46" - ] - }, "Mozilla/Firefox/Releases": { "modified": "2019-03-23T23:26:09.968Z", "contributors": [ @@ -1233,40 +693,6 @@ "rcondor" ] }, - "Plug-in": { - "modified": "2019-03-23T23:42:05.451Z", - "contributors": [ - "teoli", - "Samuele", - "Gialloporpora" - ] - }, - "Python": { - "modified": "2019-03-23T23:07:51.453Z", - "contributors": [ - "foto-planner", - "domcorvasce" - ] - }, - "SVG": { - "modified": "2019-03-23T23:44:24.568Z", - "contributors": [ - "sangio90", - "teoli", - "janvas", - "Grino", - "ethertank", - "Verruckt", - "DaViD83", - "Federico" - ] - }, - "Sviluppo_Web": { - "modified": "2019-03-23T23:44:27.263Z", - "contributors": [ - "Leofiore" - ] - }, "Tools": { "modified": "2020-07-16T22:44:15.461Z", "contributors": [ @@ -1282,12 +708,6 @@ "dinoop.p1" ] }, - "Tools/Add-ons": { - "modified": "2020-07-16T22:36:23.403Z", - "contributors": [ - "mfluehr" - ] - }, "Tools/Debugger": { "modified": "2020-07-16T22:35:04.703Z", "contributors": [ @@ -1338,14 +758,8 @@ "MicheleRiva" ] }, - "Tools/Prestazioni": { - "modified": "2020-07-16T22:36:12.757Z", - "contributors": [ - "Jackerbil" - ] - }, - "Tools/Remote_Debugging": { - "modified": "2020-07-16T22:35:37.452Z", + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.452Z", "contributors": [ "Mte90", "BruVe", @@ -1356,12 +770,6 @@ "davanzo_m" ] }, - "Tools/Visualizzazione_Flessibile": { - "modified": "2020-07-16T22:35:21.469Z", - "contributors": [ - "tassoman" - ] - }, "Tools/Web_Console": { "modified": "2020-07-16T22:34:06.052Z", "contributors": [ @@ -1376,18 +784,6 @@ "CRONOtime" ] }, - "Tutorial_sulle_Canvas": { - "modified": "2019-03-23T23:52:28.960Z", - "contributors": [ - "Romanzo", - "fotografi", - "Arset", - "teoli", - "Mmarco", - "Indigo", - "Fuma 90" - ] - }, "Web": { "modified": "2020-09-09T03:14:54.712Z", "contributors": [ @@ -1596,13 +992,6 @@ "Federico" ] }, - "Web/API/Document/firstChild": { - "modified": "2019-03-23T23:45:06.385Z", - "contributors": [ - "teoli", - "Federico" - ] - }, "Web/API/Document/forms": { "modified": "2020-10-15T21:18:07.841Z", "contributors": [ @@ -1682,13 +1071,6 @@ "Federico" ] }, - "Web/API/Document/namespaceURI": { - "modified": "2019-03-23T23:45:08.038Z", - "contributors": [ - "teoli", - "Federico" - ] - }, "Web/API/Document/open": { "modified": "2019-03-23T23:46:30.372Z", "contributors": [ @@ -1720,14 +1102,6 @@ "Federico" ] }, - "Web/API/Document/styleSheets": { - "modified": "2019-03-23T23:46:31.284Z", - "contributors": [ - "teoli", - "khalid32", - "Federico" - ] - }, "Web/API/Document/title": { "modified": "2019-03-23T23:44:54.978Z", "contributors": [ @@ -1762,12 +1136,6 @@ "SuperBisco" ] }, - "Web/API/Document_Object_Model/Introduzione": { - "modified": "2020-02-23T14:30:00.735Z", - "contributors": [ - "giacomomaccanti" - ] - }, "Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors": { "modified": "2019-03-18T21:19:09.556Z", "contributors": [ @@ -1784,20 +1152,6 @@ "DaViD83" ] }, - "Web/API/Element/addEventListener": { - "modified": "2020-10-15T21:07:44.354Z", - "contributors": [ - "IsibisiDev", - "akmur", - "gitact", - "vindega", - "teoli", - "khalid32", - "loris94", - "Samuele", - "DaViD83" - ] - }, "Web/API/Element/attributes": { "modified": "2020-10-15T21:18:26.646Z", "contributors": [ @@ -1807,17 +1161,6 @@ "DaViD83" ] }, - "Web/API/Element/childNodes": { - "modified": "2020-10-15T21:18:25.382Z", - "contributors": [ - "IsibisiDev", - "stefanoio", - "render93", - "teoli", - "AshfaqHossain", - "DaViD83" - ] - }, "Web/API/Element/classList": { "modified": "2020-10-15T22:08:44.689Z", "contributors": [ @@ -1849,18 +1192,6 @@ "IsibisiDev" ] }, - "Web/API/Element/firstChild": { - "modified": "2020-10-15T21:18:24.892Z", - "contributors": [ - "IsibisiDev", - "wbamberg", - "render93", - "teoli", - "khalid32", - "Sheppy", - "DaViD83" - ] - }, "Web/API/Element/getAttribute": { "modified": "2020-10-15T22:12:34.368Z", "contributors": [ @@ -1905,53 +1236,6 @@ "marcozanghi" ] }, - "Web/API/Element/nodeName": { - "modified": "2020-10-15T21:17:56.733Z", - "contributors": [ - "IsibisiDev", - "teoli", - "jsx", - "AshfaqHossain", - "Federico" - ] - }, - "Web/API/Element/nodeType": { - "modified": "2020-10-15T21:17:56.649Z", - "contributors": [ - "IsibisiDev", - "DavideCanton", - "teoli", - "khalid32", - "ethertank", - "Federico" - ] - }, - "Web/API/Element/nodeValue": { - "modified": "2019-03-24T00:13:06.084Z", - "contributors": [ - "teoli", - "jsx", - "dextra", - "Federico" - ] - }, - "Web/API/Element/parentNode": { - "modified": "2020-10-15T21:17:57.762Z", - "contributors": [ - "IsibisiDev", - "teoli", - "jsx", - "Federico" - ] - }, - "Web/API/Element/prefix": { - "modified": "2019-03-23T23:47:01.925Z", - "contributors": [ - "teoli", - "jsx", - "Federico" - ] - }, "Web/API/Element/querySelector": { "modified": "2020-10-15T22:12:29.147Z", "contributors": [ @@ -2006,16 +1290,6 @@ "Shabunken" ] }, - "Web/API/Element/textContent": { - "modified": "2020-10-15T21:17:56.553Z", - "contributors": [ - "LoSo", - "IsibisiDev", - "teoli", - "khalid32", - "Federico" - ] - }, "Web/API/Element/toggleAttribute": { "modified": "2020-10-15T22:14:01.364Z", "contributors": [ @@ -2030,14 +1304,6 @@ "Federico" ] }, - "Web/API/Event/altKey": { - "modified": "2019-03-23T23:46:44.336Z", - "contributors": [ - "teoli", - "jsx", - "Federico" - ] - }, "Web/API/Event/bubbles": { "modified": "2019-03-23T23:46:36.123Z", "contributors": [ @@ -2046,14 +1312,6 @@ "Federico" ] }, - "Web/API/Event/button": { - "modified": "2019-03-23T23:46:37.711Z", - "contributors": [ - "teoli", - "khalid32", - "Federico" - ] - }, "Web/API/Event/cancelable": { "modified": "2019-03-23T23:46:38.519Z", "contributors": [ @@ -2062,22 +1320,6 @@ "Federico" ] }, - "Web/API/Event/charCode": { - "modified": "2019-03-23T23:46:31.812Z", - "contributors": [ - "teoli", - "khalid32", - "Federico" - ] - }, - "Web/API/Event/ctrlKey": { - "modified": "2019-03-23T23:46:43.027Z", - "contributors": [ - "teoli", - "khalid32", - "Federico" - ] - }, "Web/API/Event/currentTarget": { "modified": "2019-03-23T22:47:05.735Z", "contributors": [ @@ -2092,62 +1334,6 @@ "Federico" ] }, - "Web/API/Event/isChar": { - "modified": "2019-03-23T23:46:41.517Z", - "contributors": [ - "teoli", - "xuancanh", - "Federico" - ] - }, - "Web/API/Event/keyCode": { - "modified": "2019-03-23T23:46:33.218Z", - "contributors": [ - "teoli", - "xuancanh", - "Federico" - ] - }, - "Web/API/Event/layerX": { - "modified": "2019-03-23T23:46:44.079Z", - "contributors": [ - "teoli", - "jsx", - "Federico" - ] - }, - "Web/API/Event/layerY": { - "modified": "2019-03-23T23:46:42.670Z", - "contributors": [ - "teoli", - "khalid32", - "Federico" - ] - }, - "Web/API/Event/metaKey": { - "modified": "2019-03-23T23:46:45.023Z", - "contributors": [ - "teoli", - "khalid32", - "Federico" - ] - }, - "Web/API/Event/pageX": { - "modified": "2019-03-23T23:46:41.625Z", - "contributors": [ - "teoli", - "jsx", - "Federico" - ] - }, - "Web/API/Event/pageY": { - "modified": "2019-03-23T23:46:46.107Z", - "contributors": [ - "teoli", - "jsx", - "Federico" - ] - }, "Web/API/Event/preventDefault": { "modified": "2020-10-15T21:17:58.593Z", "contributors": [ @@ -2158,14 +1344,6 @@ "Federico" ] }, - "Web/API/Event/shiftKey": { - "modified": "2019-03-23T23:46:40.291Z", - "contributors": [ - "teoli", - "jsx", - "Federico" - ] - }, "Web/API/Event/stopPropagation": { "modified": "2020-10-15T21:17:59.102Z", "contributors": [ @@ -2192,22 +1370,6 @@ "Federico" ] }, - "Web/API/Event/view": { - "modified": "2019-03-23T23:46:31.176Z", - "contributors": [ - "teoli", - "khalid32", - "Federico" - ] - }, - "Web/API/Event/which": { - "modified": "2019-03-23T23:46:32.154Z", - "contributors": [ - "teoli", - "jsx", - "Federico" - ] - }, "Web/API/Fetch_API": { "modified": "2019-10-28T11:29:11.758Z", "contributors": [ @@ -2234,12 +1396,6 @@ "robertopinotti" ] }, - "Web/API/Geolocation/Using_geolocation": { - "modified": "2019-03-18T21:46:47.006Z", - "contributors": [ - "robertopinotti" - ] - }, "Web/API/Geolocation/watchPosition": { "modified": "2019-03-18T21:46:55.440Z", "contributors": [ @@ -2907,12 +2063,6 @@ "robertopinotti" ] }, - "Web/API/URLUtils": { - "modified": "2019-03-23T23:01:38.757Z", - "contributors": [ - "teoli" - ] - }, "Web/API/WebGL_API": { "modified": "2020-10-15T22:34:13.570Z", "contributors": [ @@ -3207,18 +2357,6 @@ "iruy" ] }, - "Web/API/WindowTimers": { - "modified": "2019-03-23T22:33:10.851Z", - "contributors": [ - "aragacalledpat" - ] - }, - "Web/API/WindowTimers/clearInterval": { - "modified": "2019-03-23T22:33:02.364Z", - "contributors": [ - "lorenzopieri" - ] - }, "Web/API/Worker": { "modified": "2020-10-15T22:05:05.715Z", "contributors": [ @@ -3235,15 +2373,6 @@ "Federico" ] }, - "Web/API/XMLHttpRequest/Usare_XMLHttpRequest": { - "modified": "2019-09-22T07:49:44.300Z", - "contributors": [ - "chkrr00k", - "valerio-bozzolan", - "teoli", - "Andrea_Barghigiani" - ] - }, "Web/API/XMLHttpRequest/XMLHttpRequest": { "modified": "2020-01-22T12:40:19.899Z", "contributors": [ @@ -3268,19 +2397,6 @@ "fedebamba" ] }, - "Web/API/notifiche": { - "modified": "2019-03-18T20:57:39.827Z", - "contributors": [ - "francymin", - "Mascare" - ] - }, - "Web/API/notifiche/dir": { - "modified": "2020-10-15T22:17:29.488Z", - "contributors": [ - "Belingheri" - ] - }, "Web/Accessibility": { "modified": "2019-09-09T14:13:55.035Z", "contributors": [ @@ -3290,12 +2406,6 @@ "klez" ] }, - "Web/Accessibility/Sviluppo_Web": { - "modified": "2019-03-23T23:18:40.805Z", - "contributors": [ - "klez" - ] - }, "Web/CSS": { "modified": "2020-01-15T05:51:31.675Z", "contributors": [ @@ -3313,13 +2423,6 @@ "DaViD83" ] }, - "Web/CSS/-moz-font-language-override": { - "modified": "2019-03-23T23:28:40.117Z", - "contributors": [ - "teoli", - "lboy" - ] - }, "Web/CSS/-webkit-overflow-scrolling": { "modified": "2020-10-15T22:09:13.015Z", "contributors": [ @@ -3403,15 +2506,6 @@ "teoli" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": { - "modified": "2019-03-18T20:58:13.071Z", - "contributors": [ - "KadirTopal", - "ATrogolo", - "fscholz", - "Renatvs88" - ] - }, "Web/CSS/CSS_Positioning": { "modified": "2020-05-29T22:27:05.116Z" }, @@ -3424,16 +2518,6 @@ "itektopdesigner" ] }, - "Web/CSS/Guida_di_riferimento_ai_CSS": { - "modified": "2020-04-22T10:36:23.257Z", - "contributors": [ - "xplosionmind", - "Pardoz", - "teoli", - "tregagnon", - "Federico" - ] - }, "Web/CSS/Media_Queries": { "modified": "2019-03-23T22:04:20.173Z", "contributors": [ @@ -3453,12 +2537,6 @@ "Pardoz" ] }, - "Web/CSS/Ricette_layout": { - "modified": "2019-03-18T21:23:52.893Z", - "contributors": [ - "Yoekkul" - ] - }, "Web/CSS/Type_selectors": { "modified": "2020-10-15T22:29:37.496Z", "contributors": [ @@ -3559,13 +2637,6 @@ "claudepache" ] }, - "Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor": { - "modified": "2019-03-23T23:43:56.513Z", - "contributors": [ - "teoli", - "Leofiore" - ] - }, "Web/CSS/flex": { "modified": "2019-03-23T22:48:31.643Z", "contributors": [ @@ -3597,12 +2668,6 @@ "arturu" ] }, - "Web/CSS/selettore_figli_diretti": { - "modified": "2019-03-23T22:33:41.612Z", - "contributors": [ - "ExplosiveLab" - ] - }, "Web/CSS/text-align": { "modified": "2019-03-23T23:54:00.082Z", "contributors": [ @@ -3645,12 +2710,6 @@ "tallaGitHub" ] }, - "Web/Esempi_di_tecnologie_web_open": { - "modified": "2019-03-23T22:06:33.966Z", - "contributors": [ - "siron94" - ] - }, "Web/Events": { "modified": "2019-04-30T14:19:44.404Z", "contributors": [ @@ -3658,24 +2717,6 @@ "bep" ] }, - "Web/Events/DOMContentLoaded": { - "modified": "2020-10-15T22:04:24.853Z", - "contributors": [ - "IsibisiDev", - "wbamberg", - "bolste" - ] - }, - "Web/Events/load": { - "modified": "2019-04-30T14:10:24.678Z", - "contributors": [ - "wbamberg", - "IsibisiDev", - "sickDevelopers", - "fscholz", - "lucamemma" - ] - }, "Web/Guide": { "modified": "2019-03-23T23:29:02.031Z", "contributors": [ @@ -3692,14 +2733,6 @@ "Federico" ] }, - "Web/Guide/AJAX/Iniziare": { - "modified": "2019-03-23T23:41:32.850Z", - "contributors": [ - "chrisdavidmills", - "Mattia_Zanella", - "Federico" - ] - }, "Web/Guide/API": { "modified": "2019-09-11T09:42:07.898Z", "contributors": [ @@ -3707,12 +2740,6 @@ "Sheppy" ] }, - "Web/Guide/CSS": { - "modified": "2019-03-23T23:29:02.257Z", - "contributors": [ - "Sheppy" - ] - }, "Web/Guide/Graphics": { "modified": "2019-03-23T22:54:59.847Z", "contributors": [ @@ -3722,16 +2749,6 @@ "arc551" ] }, - "Web/Guide/HTML/Categorie_di_contenuto": { - "modified": "2019-03-23T23:34:44.540Z", - "contributors": [ - "Sebastianz", - "Ella", - "nicolo-ribaudo", - "teoli", - "Nicola_D" - ] - }, "Web/Guide/HTML/Editable_content": { "modified": "2019-03-23T22:02:08.397Z", "contributors": [ @@ -3772,30 +2789,6 @@ "DaViD83" ] }, - "Web/HTML/Attributi": { - "modified": "2019-03-23T23:34:35.010Z", - "contributors": [ - "teoli", - "Nicola_D" - ] - }, - "Web/HTML/Canvas": { - "modified": "2019-09-27T19:03:03.922Z", - "contributors": [ - "NeckersBOX", - "nataz77", - "teoli", - "Grino", - "mck89" - ] - }, - "Web/HTML/Canvas/Drawing_graphics_with_canvas": { - "modified": "2019-03-23T23:15:33.594Z", - "contributors": [ - "teoli", - "MrNow" - ] - }, "Web/HTML/Element": { "modified": "2019-03-23T23:34:47.626Z", "contributors": [ @@ -3982,12 +2975,6 @@ "Enrico_Polanski" ] }, - "Web/HTML/Element/figura": { - "modified": "2020-10-15T22:23:23.465Z", - "contributors": [ - "NeckersBOX" - ] - }, "Web/HTML/Element/footer": { "modified": "2019-03-23T22:58:06.411Z", "contributors": [ @@ -4141,13 +3128,6 @@ "nicolo-ribaudo" ] }, - "Web/HTML/Forms_in_HTML": { - "modified": "2019-03-23T23:29:43.061Z", - "contributors": [ - "teoli", - "Giona" - ] - }, "Web/HTML/Global_attributes": { "modified": "2019-03-23T23:16:28.665Z", "contributors": [ @@ -4161,49 +3141,6 @@ "sambuccid" ] }, - "Web/HTML/HTML5": { - "modified": "2019-03-23T23:35:35.217Z", - "contributors": [ - "artistics-weddings", - "teoli", - "bertuz83", - "Giona", - "Mattei", - "Grino" - ] - }, - "Web/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-23T23:29:36.115Z", - "contributors": [ - "teoli", - "bertuz", - "Giona" - ] - }, - "Web/HTML/Riferimento": { - "modified": "2019-09-09T07:18:46.738Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "LoSo" - ] - }, - "Web/HTML/Sections_and_Outlines_of_an_HTML5_document": { - "modified": "2019-03-23T23:29:51.242Z", - "contributors": [ - "teoli", - "Giona" - ] - }, - "Web/HTML/utilizzare_application_cache": { - "modified": "2019-03-23T23:28:46.240Z", - "contributors": [ - "Carlo-Effe", - "g4b0", - "teoli", - "pastorello" - ] - }, "Web/HTTP": { "modified": "2019-03-18T21:00:54.655Z", "contributors": [ @@ -4218,13 +3155,6 @@ "meogrande" ] }, - "Web/HTTP/Basi_HTTP": { - "modified": "2020-11-30T09:32:11.577Z", - "contributors": [ - "MatteoZxy", - "giuseppe.librandi02" - ] - }, "Web/HTTP/CORS": { "modified": "2020-10-15T22:09:12.111Z", "contributors": [ @@ -4259,14 +3189,6 @@ "Wilkenfeld" ] }, - "Web/HTTP/Compressione": { - "modified": "2020-11-30T09:31:19.301Z", - "contributors": [ - "davide.martinelli13", - "lucathetiger96.96", - "SphinxKnight" - ] - }, "Web/HTTP/Conditional_requests": { "modified": "2020-12-05T07:29:03.909Z", "contributors": [ @@ -4346,13 +3268,6 @@ "meliot" ] }, - "Web/HTTP/Panoramica": { - "modified": "2020-11-08T15:52:52.082Z", - "contributors": [ - "meogrande", - "abatti" - ] - }, "Web/HTTP/Protocol_upgrade_mechanism": { "modified": "2020-11-30T09:35:43.369Z", "contributors": [ @@ -4375,18 +3290,6 @@ "EnricoDant3" ] }, - "Web/HTTP/Richieste_range": { - "modified": "2019-08-03T05:17:24.435Z", - "contributors": [ - "theborgh" - ] - }, - "Web/HTTP/Sessione": { - "modified": "2020-11-29T21:39:50.877Z", - "contributors": [ - "zambonmichelethanu" - ] - }, "Web/HTTP/Status": { "modified": "2019-03-23T22:02:43.572Z", "contributors": [ @@ -4431,13 +3334,6 @@ "damis0g" ] }, - "Web/HTTP/negoziazione-del-contenuto": { - "modified": "2020-11-30T09:20:26.423Z", - "contributors": [ - "endlessDoomsayer", - "sharq" - ] - }, "Web/JavaScript": { "modified": "2020-03-12T19:36:53.666Z", "contributors": [ @@ -4458,25 +3354,6 @@ "DaViD83" ] }, - "Web/JavaScript/Chiusure": { - "modified": "2020-07-09T10:58:36.507Z", - "contributors": [ - "ImChrono", - "massimilianoaprea7", - "EmGargano", - "nicrizzo", - "AndreaP", - "Linko", - "masrossi", - "mar-mo" - ] - }, - "Web/JavaScript/Cosè_JavaScript": { - "modified": "2020-03-12T19:42:53.580Z", - "contributors": [ - "SpaceMudge" - ] - }, "Web/JavaScript/Data_structures": { "modified": "2020-05-27T14:48:54.824Z", "contributors": [ @@ -4492,144 +3369,33 @@ "finvernizzi" ] }, - "Web/JavaScript/Gestione_della_Memoria": { - "modified": "2020-03-12T19:40:57.516Z", - "contributors": [ - "darknightva", - "jspkay", - "sokos", - "guspatagonico" - ] - }, - "Web/JavaScript/Getting_Started": { - "modified": "2019-03-23T23:05:35.907Z", + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-03-12T19:40:53.603Z", "contributors": [ - "clamar59" + "novembre", + "spreynprey", + "mean2me", + "davide-perez", + "liuzzom", + "JacopoBont", + "koso00", + "xbeat", + "aur3l10", + "kdex", + "claudiod", + "claudio.mantuano" ] }, - "Web/JavaScript/Guida": { - "modified": "2020-03-12T19:38:40.547Z", + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:38:44.699Z", "contributors": [ - "Mystral", - "fscholz", "teoli", - "natebunnyfield" + "nicolo-ribaudo", + "raztus" ] }, - "Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori": { - "modified": "2020-07-03T09:14:04.292Z", - "contributors": [ - "lucamonte", - "ladysilvia", - "Goliath86", - "catBlack" - ] - }, - "Web/JavaScript/Guida/Dettagli_Object_Model": { - "modified": "2020-03-12T19:45:00.589Z", - "contributors": [ - "wbamberg", - "dem-s" - ] - }, - "Web/JavaScript/Guida/Espressioni_Regolari": { - "modified": "2020-03-12T19:44:32.587Z", - "contributors": [ - "Mystral", - "pfoletto", - "camilgun", - "adrisimo74", - "Samplasion", - "mar-mo" - ] - }, - "Web/JavaScript/Guida/Functions": { - "modified": "2020-03-12T19:43:03.997Z", - "contributors": [ - "MikePap", - "lvzndr" - ] - }, - "Web/JavaScript/Guida/Grammar_and_types": { - "modified": "2020-03-12T19:43:14.274Z", - "contributors": [ - "AliceM5", - "mme000", - "Goliath86", - "JsD3n", - "catBlack", - "edoardopa" - ] - }, - "Web/JavaScript/Guida/Introduzione": { - "modified": "2020-03-12T19:42:19.516Z", - "contributors": [ - "edoardopa", - "claudiod" - ] - }, - "Web/JavaScript/Guida/Iteratori_e_generatori": { - "modified": "2020-03-12T19:46:49.658Z", - "contributors": [ - "jackdbd" - ] - }, - "Web/JavaScript/Guida/Loops_and_iteration": { - "modified": "2020-10-11T06:08:37.488Z", - "contributors": [ - "bombur51", - "Edo", - "koalacurioso", - "ladysilvia", - "massimiliamanto", - "Cereal84" - ] - }, - "Web/JavaScript/Il_DOM_e_JavaScript": { - "modified": "2019-12-13T21:06:11.041Z", - "contributors": [ - "wbamberg", - "teoli", - "DaViD83" - ] - }, - "Web/JavaScript/Inheritance_and_the_prototype_chain": { - "modified": "2020-03-12T19:40:53.603Z", - "contributors": [ - "novembre", - "spreynprey", - "mean2me", - "davide-perez", - "liuzzom", - "JacopoBont", - "koso00", - "xbeat", - "aur3l10", - "kdex", - "claudiod", - "claudio.mantuano" - ] - }, - "Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript": { - "modified": "2020-03-12T19:36:12.785Z", - "contributors": [ - "wbamberg", - "gabriellaborghi", - "giovanniragno", - "teoli", - "fusionchess" - ] - }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:38:44.699Z", - "contributors": [ - "teoli", - "nicolo-ribaudo", - "raztus" - ] - }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-10-15T21:38:26.392Z", + "Web/JavaScript/Reference/Classes": { + "modified": "2020-10-15T21:38:26.392Z", "contributors": [ "fscholz", "MaxArt", @@ -4644,14 +3410,6 @@ "Sheppy" ] }, - "Web/JavaScript/Reference/Classes/costruttore": { - "modified": "2020-03-12T19:44:11.878Z", - "contributors": [ - "webpn", - "alexandr-sizemov", - "Cereal84" - ] - }, "Web/JavaScript/Reference/Classes/extends": { "modified": "2020-03-12T19:45:50.905Z", "contributors": [ @@ -4718,42 +3476,6 @@ "MPinna" ] }, - "Web/JavaScript/Reference/Functions_and_function_scope": { - "modified": "2020-03-12T19:39:12.043Z", - "contributors": [ - "lvzndr", - "ungarida", - "teoli", - "Salvo1402" - ] - }, - "Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions": { - "modified": "2020-03-12T19:45:00.553Z", - "contributors": [ - "nickdastain", - "DrJest" - ] - }, - "Web/JavaScript/Reference/Functions_and_function_scope/arguments": { - "modified": "2020-10-15T22:02:48.792Z", - "contributors": [ - "lesar", - "adrisimo74" - ] - }, - "Web/JavaScript/Reference/Functions_and_function_scope/get": { - "modified": "2020-10-15T22:01:12.442Z", - "contributors": [ - "matteogatti" - ] - }, - "Web/JavaScript/Reference/Functions_and_function_scope/set": { - "modified": "2020-07-11T16:38:00.325Z", - "contributors": [ - "CostyEffe", - "DeadManPoe" - ] - }, "Web/JavaScript/Reference/Global_Objects": { "modified": "2020-03-12T19:39:20.143Z", "contributors": [ @@ -4947,12 +3669,6 @@ "vidoz" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/prototype": { - "modified": "2019-03-23T22:43:29.228Z", - "contributors": [ - "zauli83" - ] - }, "Web/JavaScript/Reference/Global_Objects/Array/push": { "modified": "2020-10-15T21:57:19.586Z", "contributors": [ @@ -5423,17 +4139,6 @@ "nicelbole" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/prototype": { - "modified": "2019-03-23T22:58:00.342Z", - "contributors": [ - "gamerboy", - "fantarama", - "tommyblue", - "roccomuso", - "vindega", - "nicolo-ribaudo" - ] - }, "Web/JavaScript/Reference/Global_Objects/Object/seal": { "modified": "2020-10-15T22:07:44.226Z", "contributors": [ @@ -5491,24 +4196,6 @@ "federicoviceconti" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler": { - "modified": "2020-10-15T22:07:04.638Z", - "contributors": [ - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply": { - "modified": "2020-10-15T22:07:00.348Z", - "contributors": [ - "shb" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Proxy/revocabile": { - "modified": "2020-10-15T22:10:51.734Z", - "contributors": [ - "jfet97" - ] - }, "Web/JavaScript/Reference/Global_Objects/Set": { "modified": "2019-03-23T22:31:04.521Z", "contributors": [ @@ -5567,12 +4254,6 @@ "ladysilvia" ] }, - "Web/JavaScript/Reference/Global_Objects/String/prototype": { - "modified": "2020-10-15T22:08:09.616Z", - "contributors": [ - "ladysilvia" - ] - }, "Web/JavaScript/Reference/Global_Objects/String/raw": { "modified": "2020-10-15T22:08:05.242Z", "contributors": [ @@ -5691,30 +4372,6 @@ "Giuseppe37" ] }, - "Web/JavaScript/Reference/Operators/Operator_Condizionale": { - "modified": "2019-03-18T21:30:29.773Z", - "contributors": [ - "lesar" - ] - }, - "Web/JavaScript/Reference/Operators/Operatore_virgola": { - "modified": "2020-10-15T22:23:54.628Z", - "contributors": [ - "ca42rico" - ] - }, - "Web/JavaScript/Reference/Operators/Operatori_Aritmetici": { - "modified": "2020-10-15T21:38:22.596Z", - "contributors": [ - "chrisdavidmills", - "fscholz", - "wbamberg", - "ladysilvia", - "lazycesar", - "kdex", - "alberto.decaro" - ] - }, "Web/JavaScript/Reference/Operators/Spread_syntax": { "modified": "2020-10-15T22:03:10.047Z", "contributors": [ @@ -5851,41 +4508,12 @@ "IkobaNoOkami" ] }, - "Web/JavaScript/Reference/template_strings": { - "modified": "2020-03-12T19:43:06.757Z", - "contributors": [ - "zedrix", - "sharq", - "manuel-di-iorio" - ] - }, - "Web/JavaScript/Una_reintroduzione_al_JavaScript": { - "modified": "2020-10-03T10:20:38.079Z", - "contributors": [ - "matt.polvenz", - "tangredifrancesco", - "igor.bragato", - "microjumper", - "maboglia", - "e403-mdn", - "clamar59", - "teoli", - "ethertank", - "Nicola_D" - ] - }, "Web/Performance": { "modified": "2019-08-09T16:36:45.228Z", "contributors": [ "estelle" ] }, - "Web/Performance/Percorso_critico_di_rendering": { - "modified": "2019-10-26T07:16:57.508Z", - "contributors": [ - "theborgh" - ] - }, "Web/Reference": { "modified": "2019-03-23T23:17:01.442Z", "contributors": [ @@ -5917,12 +4545,6 @@ "Sheppy" ] }, - "Web/Security/Password_insicure": { - "modified": "2019-03-18T21:40:50.724Z", - "contributors": [ - "oprof" - ] - }, "Web/Tutorials": { "modified": "2019-03-23T22:46:08.934Z", "contributors": [ @@ -5937,12 +4559,6 @@ "theborgh" ] }, - "Web/Web_Components/Usare_custom_elements": { - "modified": "2020-03-31T06:51:28.687Z", - "contributors": [ - "massimiliano.mantovani" - ] - }, "Web/XSLT": { "modified": "2019-01-16T16:09:31.557Z", "contributors": [ @@ -5952,34 +4568,1142 @@ "Federico" ] }, - "WebSockets": { - "modified": "2019-03-23T23:27:06.479Z", + "Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5": { + "modified": "2019-03-23T23:41:34.028Z", "contributors": [ - "AlessandroSanino1994", - "br4in", - "music-wedding", - "pbrenna" + "wbamberg", + "Indigo" ] }, - "WebSockets/Writing_WebSocket_client_applications": { - "modified": "2019-03-23T22:14:26.473Z", + "Web/Guide/Parsing_and_serializing_XML": { + "modified": "2019-03-24T00:13:01.603Z", "contributors": [ - "mnemosdev" + "fscholz", + "foto-planner", + "fusionchess" ] }, - "Web_Development/Mobile": { - "modified": "2019-03-23T23:24:04.119Z", + "Glossary/DHTML": { + "modified": "2019-03-24T00:02:50.459Z", "contributors": [ - "BenB" + "teoli", + "fscholz", + "Samuele" ] }, - "Web_Development/Mobile/Design_sensibile": { - "modified": "2019-03-23T23:24:00.771Z", + "orphaned/Tools/Add-ons/DOM_Inspector": { + "modified": "2020-07-16T22:36:24.345Z", "contributors": [ - "SlagNe" - ] - }, - "XHTML": { + "Federico", + "Leofiore", + "Samuele" + ] + }, + "Mozilla/Firefox/Releases/1.5": { + "modified": "2019-03-23T23:44:26.825Z", + "contributors": [ + "wbamberg", + "teoli", + "Leofiore", + "Federico" + ] + }, + "Mozilla/Firefox/Releases/18": { + "modified": "2019-03-23T23:34:04.358Z", + "contributors": [ + "wbamberg", + "Indil", + "0limits91" + ] + }, + "Mozilla/Firefox/Releases/2": { + "modified": "2019-03-23T23:44:14.083Z", + "contributors": [ + "wbamberg", + "Leofiore", + "Samuele", + "Federico", + "Neotux" + ] + }, + "Web/HTTP/Headers/User-Agent/Firefox": { + "modified": "2019-03-23T23:44:58.670Z", + "contributors": [ + "fotografi", + "teoli", + "Federico" + ] + }, + "Glossary/Response_header": { + "modified": "2019-03-18T21:31:16.700Z", + "contributors": [ + "lucat92" + ] + }, + "Glossary/Protocol": { + "modified": "2020-04-21T13:55:15.140Z", + "contributors": [ + "sara_t", + "xplosionmind" + ] + }, + "Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation": { + "modified": "2019-03-23T23:43:02.621Z", + "contributors": [ + "music-wedding", + "artistics-weddings", + "teoli", + "bradipao" + ] + }, + "Web/SVG/Applying_SVG_effects_to_HTML_content": { + "modified": "2019-03-23T23:41:29.996Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/CSS/CSS_Columns/Using_multi-column_layouts": { + "modified": "2019-03-23T23:43:04.536Z", + "contributors": [ + "bradipao" + ] + }, + "Learn/Accessibility/Mobile": { + "modified": "2020-07-16T22:40:30.564Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibility/Accessibility_troubleshooting": { + "modified": "2020-07-16T22:40:35.761Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibility/What_is_accessibility": { + "modified": "2020-07-16T22:40:04.717Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibility/CSS_and_JavaScript": { + "modified": "2020-07-16T22:40:17.303Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibility/HTML": { + "modified": "2020-07-16T22:40:11.165Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:57.773Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibility/Multimedia": { + "modified": "2020-07-16T22:40:26.699Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibility/WAI-ARIA_basics": { + "modified": "2020-07-16T22:40:22.345Z", + "contributors": [ + "mipo" + ] + }, + "orphaned/Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:44.464Z", + "contributors": [ + "SphinxKnight", + "ZiaRita", + "ivan.lori" + ] + }, + "Learn/CSS/Building_blocks/Selectors": { + "modified": "2020-10-27T14:47:40.269Z", + "contributors": [ + "francescomazza91" + ] + }, + "Learn/CSS/Styling_text/Styling_links": { + "modified": "2020-07-16T22:26:19.044Z", + "contributors": [ + "genoa1893" + ] + }, + "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { + "modified": "2020-07-16T22:34:17.256Z", + "contributors": [ + "PyQio" + ] + }, + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-11-10T20:12:58.028Z", + "contributors": [ + "massic80", + "JennyDC" + ] + }, + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-07-16T22:34:34.196Z", + "contributors": [ + "ZiaRita", + "PatrickT", + "DaniPani", + "cubark" + ] + }, + "Learn/Getting_started_with_the_web/Publishing_your_website": { + "modified": "2020-07-30T14:39:28.232Z", + "contributors": [ + "sara_t", + "dag7dev" + ] + }, + "Learn/Forms/How_to_build_custom_form_controls": { + "modified": "2020-07-16T22:21:56.435Z", + "contributors": [ + "whiteLie" + ] + }, + "Learn/Forms/Form_validation": { + "modified": "2020-12-03T10:32:19.605Z", + "contributors": [ + "LoSo", + "claudiod" + ] + }, + "Learn/Forms": { + "modified": "2020-10-05T13:36:42.596Z", + "contributors": [ + "ArgusMk", + "Jeffrey_Yang" + ] + }, + "Learn/HTML/Howto/Use_data_attributes": { + "modified": "2020-07-16T22:22:35.395Z", + "contributors": [ + "Elfo404", + "Enrico_Polanski" + ] + }, + "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { + "modified": "2020-07-16T22:23:34.063Z", + "contributors": [ + "b4yl0n", + "duduindo", + "Th3cG", + "robertsillo" + ] + }, + "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { + "modified": "2020-07-16T22:23:20.000Z", + "contributors": [ + "Aedo1", + "howilearn" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { + "modified": "2020-07-16T22:24:53.308Z", + "contributors": [ + "howilearn" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Responsive_images": { + "modified": "2020-07-16T22:24:35.114Z", + "contributors": [ + "kalamun", + "howilearn" + ] + }, + "Learn/JavaScript/Howto": { + "modified": "2020-07-16T22:33:09.378Z", + "contributors": [ + "mario.dilodovico1" + ] + }, + "Learn/JavaScript/First_steps/What_went_wrong": { + "modified": "2020-07-16T22:30:33.953Z", + "contributors": [ + "rosso791" + ] + }, + "Learn/JavaScript/First_steps/Variables": { + "modified": "2020-08-19T06:27:13.303Z", + "contributors": [ + "a.ros", + "SamuelaKC", + "Ibernato93" + ] + }, + "Learn/JavaScript/Objects/Basics": { + "modified": "2020-07-16T22:31:59.612Z", + "contributors": [ + "dq82elo", + "claudiod" + ] + }, + "Learn/JavaScript/Objects": { + "modified": "2020-07-16T22:31:50.631Z", + "contributors": [ + "maboglia", + "s3lvatico" + ] + }, + "Learn/JavaScript/Objects/JSON": { + "modified": "2020-07-16T22:32:26.492Z", + "contributors": [ + "mario.dilodovico1" + ] + }, + "Learn/Server-side/Django/Introduction": { + "modified": "2020-10-29T07:11:12.599Z", + "contributors": [ + "sara_t", + "dag7dev", + "gianluca.gioino", + "CristinaS24" + ] + }, + "Web/HTTP/Link_prefetching_FAQ": { + "modified": "2019-03-23T23:44:25.588Z", + "contributors": [ + "fscholz", + "artistics-weddings", + "jigs12", + "Leofiore" + ] + }, + "Glossary/Localization": { + "modified": "2019-03-23T23:44:27.139Z", + "contributors": [ + "teoli", + "Verruckt", + "Leofiore", + "Etms", + "Federico" + ] + }, + "MDN/At_ten": { + "modified": "2019-03-23T22:42:30.395Z", + "contributors": [ + "foto-planner", + "Vinsala", + "Redsnic", + "Lorenzo_FF" + ] + }, + "orphaned/MDN/Community": { + "modified": "2019-03-23T22:36:02.220Z", + "contributors": [ + "Italuil", + "wbamberg", + "Vinsala" + ] + }, + "MDN/Contribute/Howto/Create_and_edit_pages": { + "modified": "2019-03-23T23:06:13.182Z", + "contributors": [ + "wbamberg", + "fabriziobianchi3", + "claudio.mantuano", + "Sav_" + ] + }, + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-01-16T19:06:05.374Z", + "contributors": [ + "ladysilvia", + "wbamberg", + "plovec", + "klez" + ] + }, + "orphaned/MDN/Contribute/Howto/Delete_my_profile": { + "modified": "2020-10-21T23:15:42.235Z", + "contributors": [ + "FrancescoCoding" + ] + }, + "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-01-16T19:16:55.097Z", + "contributors": [ + "wbamberg", + "klez" + ] + }, + "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T23:10:59.000Z", + "contributors": [ + "wbamberg", + "mat.campanelli", + "Navy60" + ] + }, + "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-03-23T23:07:02.988Z", + "contributors": [ + "wbamberg", + "Enrico12" + ] + }, + "orphaned/MDN/Editor": { + "modified": "2020-09-30T15:41:34.289Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "klez", + "turco" + ] + }, + "MDN/Structures/Macros": { + "modified": "2020-09-30T15:30:11.714Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "frbi" + ] + }, + "MDN/Guidelines/Conventions_definitions": { + "modified": "2020-09-30T15:30:11.829Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Giacomo_" + ] + }, + "MDN/Structures/Compatibility_tables": { + "modified": "2020-10-15T22:03:08.289Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "PsCustomObject", + "Carlo-Effe" + ] + }, + "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { + "modified": "2019-03-18T21:03:03.594Z", + "contributors": [ + "chack1172" + ] + }, + "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { + "modified": "2019-03-18T21:03:00.548Z", + "contributors": [ + "chack1172" + ] + }, + "Mozilla/Add-ons/WebExtensions/Content_scripts": { + "modified": "2019-06-07T12:34:39.378Z", + "contributors": [ + "MarcoAGreco" + ] + }, + "Mozilla/Firefox/Experimental_features": { + "modified": "2020-07-01T10:55:50.190Z", + "contributors": [ + "Karm46" + ] + }, + "Web/API/Plugin": { + "modified": "2019-03-23T23:42:05.451Z", + "contributors": [ + "teoli", + "Samuele", + "Gialloporpora" + ] + }, + "Web/SVG": { + "modified": "2019-03-23T23:44:24.568Z", + "contributors": [ + "sangio90", + "teoli", + "janvas", + "Grino", + "ethertank", + "Verruckt", + "DaViD83", + "Federico" + ] + }, + "orphaned/Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.403Z", + "contributors": [ + "mfluehr" + ] + }, + "Tools/Performance": { + "modified": "2020-07-16T22:36:12.757Z", + "contributors": [ + "Jackerbil" + ] + }, + "Tools/Responsive_Design_Mode": { + "modified": "2020-07-16T22:35:21.469Z", + "contributors": [ + "tassoman" + ] + }, + "Web/API/Canvas_API/Tutorial": { + "modified": "2019-03-23T23:52:28.960Z", + "contributors": [ + "Romanzo", + "fotografi", + "Arset", + "teoli", + "Mmarco", + "Indigo", + "Fuma 90" + ] + }, + "Web/API/Document_Object_Model/Introduction": { + "modified": "2020-02-23T14:30:00.735Z", + "contributors": [ + "giacomomaccanti" + ] + }, + "Web/API/EventTarget/addEventListener": { + "modified": "2020-10-15T21:07:44.354Z", + "contributors": [ + "IsibisiDev", + "akmur", + "gitact", + "vindega", + "teoli", + "khalid32", + "loris94", + "Samuele", + "DaViD83" + ] + }, + "Web/API/Node/childNodes": { + "modified": "2020-10-15T21:18:25.382Z", + "contributors": [ + "IsibisiDev", + "stefanoio", + "render93", + "teoli", + "AshfaqHossain", + "DaViD83" + ] + }, + "Web/API/Node/firstChild": { + "modified": "2020-10-15T21:18:24.892Z", + "contributors": [ + "IsibisiDev", + "wbamberg", + "render93", + "teoli", + "khalid32", + "Sheppy", + "DaViD83" + ] + }, + "Web/API/Node/nodeName": { + "modified": "2020-10-15T21:17:56.733Z", + "contributors": [ + "IsibisiDev", + "teoli", + "jsx", + "AshfaqHossain", + "Federico" + ] + }, + "Web/API/Node/nodeType": { + "modified": "2020-10-15T21:17:56.649Z", + "contributors": [ + "IsibisiDev", + "DavideCanton", + "teoli", + "khalid32", + "ethertank", + "Federico" + ] + }, + "Web/API/Node/nodeValue": { + "modified": "2019-03-24T00:13:06.084Z", + "contributors": [ + "teoli", + "jsx", + "dextra", + "Federico" + ] + }, + "Web/API/Node/parentNode": { + "modified": "2020-10-15T21:17:57.762Z", + "contributors": [ + "IsibisiDev", + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Node/prefix": { + "modified": "2019-03-23T23:47:01.925Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Node/textContent": { + "modified": "2020-10-15T21:17:56.553Z", + "contributors": [ + "LoSo", + "IsibisiDev", + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/KeyboardEvent/charCode": { + "modified": "2019-03-23T23:46:31.812Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/UIEvent/isChar": { + "modified": "2019-03-23T23:46:41.517Z", + "contributors": [ + "teoli", + "xuancanh", + "Federico" + ] + }, + "Web/API/UIEvent/layerX": { + "modified": "2019-03-23T23:46:44.079Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/UIEvent/layerY": { + "modified": "2019-03-23T23:46:42.670Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/UIEvent/pageX": { + "modified": "2019-03-23T23:46:41.625Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/UIEvent/pageY": { + "modified": "2019-03-23T23:46:46.107Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/UIEvent/view": { + "modified": "2019-03-23T23:46:31.176Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/KeyboardEvent/which": { + "modified": "2019-03-23T23:46:32.154Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Geolocation_API": { + "modified": "2019-03-18T21:46:47.006Z", + "contributors": [ + "robertopinotti" + ] + }, + "Web/API/Notification/dir": { + "modified": "2020-10-15T22:17:29.488Z", + "contributors": [ + "Belingheri" + ] + }, + "Web/API/Notification": { + "modified": "2019-03-18T20:57:39.827Z", + "contributors": [ + "francymin", + "Mascare" + ] + }, + "Web/API/HTMLHyperlinkElementUtils": { + "modified": "2019-03-23T23:01:38.757Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/clearInterval": { + "modified": "2019-03-23T22:33:02.364Z", + "contributors": [ + "lorenzopieri" + ] + }, + "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { + "modified": "2019-09-22T07:49:44.300Z", + "contributors": [ + "chkrr00k", + "valerio-bozzolan", + "teoli", + "Andrea_Barghigiani" + ] + }, + "Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property": { + "modified": "2019-03-23T23:43:56.513Z", + "contributors": [ + "teoli", + "Leofiore" + ] + }, + "Web/CSS/Reference": { + "modified": "2020-04-22T10:36:23.257Z", + "contributors": [ + "xplosionmind", + "Pardoz", + "teoli", + "tregagnon", + "Federico" + ] + }, + "Web/CSS/Layout_cookbook": { + "modified": "2019-03-18T21:23:52.893Z", + "contributors": [ + "Yoekkul" + ] + }, + "Web/CSS/Child_combinator": { + "modified": "2019-03-23T22:33:41.612Z", + "contributors": [ + "ExplosiveLab" + ] + }, + "Web/Demos_of_open_web_technologies": { + "modified": "2019-03-23T22:06:33.966Z", + "contributors": [ + "siron94" + ] + }, + "Web/API/Window/DOMContentLoaded_event": { + "modified": "2020-10-15T22:04:24.853Z", + "contributors": [ + "IsibisiDev", + "wbamberg", + "bolste" + ] + }, + "Web/API/Window/load_event": { + "modified": "2019-04-30T14:10:24.678Z", + "contributors": [ + "wbamberg", + "IsibisiDev", + "sickDevelopers", + "fscholz", + "lucamemma" + ] + }, + "Web/Guide/AJAX/Getting_Started": { + "modified": "2019-03-23T23:41:32.850Z", + "contributors": [ + "chrisdavidmills", + "Mattia_Zanella", + "Federico" + ] + }, + "Web/Guide/HTML/Content_categories": { + "modified": "2019-03-23T23:34:44.540Z", + "contributors": [ + "Sebastianz", + "Ella", + "nicolo-ribaudo", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Attributes": { + "modified": "2019-03-23T23:34:35.010Z", + "contributors": [ + "teoli", + "Nicola_D" + ] + }, + "Web/API/Canvas_API": { + "modified": "2019-09-27T19:03:03.922Z", + "contributors": [ + "NeckersBOX", + "nataz77", + "teoli", + "Grino", + "mck89" + ] + }, + "Web/HTML/Element/figure": { + "modified": "2020-10-15T22:23:23.465Z", + "contributors": [ + "NeckersBOX" + ] + }, + "orphaned/Learn/HTML/Forms/HTML5_updates": { + "modified": "2019-03-23T23:29:43.061Z", + "contributors": [ + "teoli", + "Giona" + ] + }, + "Web/Guide/HTML/HTML5": { + "modified": "2019-03-23T23:35:35.217Z", + "contributors": [ + "artistics-weddings", + "teoli", + "bertuz83", + "Giona", + "Mattei", + "Grino" + ] + }, + "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:29:36.115Z", + "contributors": [ + "teoli", + "bertuz", + "Giona" + ] + }, + "Web/HTML/Reference": { + "modified": "2019-09-09T07:18:46.738Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "LoSo" + ] + }, + "Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2019-03-23T23:29:51.242Z", + "contributors": [ + "teoli", + "Giona" + ] + }, + "Web/HTML/Using_the_application_cache": { + "modified": "2019-03-23T23:28:46.240Z", + "contributors": [ + "Carlo-Effe", + "g4b0", + "teoli", + "pastorello" + ] + }, + "Web/HTTP/Basics_of_HTTP": { + "modified": "2020-11-30T09:32:11.577Z", + "contributors": [ + "MatteoZxy", + "giuseppe.librandi02" + ] + }, + "Web/HTTP/Compression": { + "modified": "2020-11-30T09:31:19.301Z", + "contributors": [ + "davide.martinelli13", + "lucathetiger96.96", + "SphinxKnight" + ] + }, + "Web/HTTP/Content_negotiation": { + "modified": "2020-11-30T09:20:26.423Z", + "contributors": [ + "endlessDoomsayer", + "sharq" + ] + }, + "Web/HTTP/Overview": { + "modified": "2020-11-08T15:52:52.082Z", + "contributors": [ + "meogrande", + "abatti" + ] + }, + "Web/HTTP/Range_requests": { + "modified": "2019-08-03T05:17:24.435Z", + "contributors": [ + "theborgh" + ] + }, + "Web/HTTP/Session": { + "modified": "2020-11-29T21:39:50.877Z", + "contributors": [ + "zambonmichelethanu" + ] + }, + "Web/JavaScript/Closures": { + "modified": "2020-07-09T10:58:36.507Z", + "contributors": [ + "ImChrono", + "massimilianoaprea7", + "EmGargano", + "nicrizzo", + "AndreaP", + "Linko", + "masrossi", + "mar-mo" + ] + }, + "Web/JavaScript/About_JavaScript": { + "modified": "2020-03-12T19:42:53.580Z", + "contributors": [ + "SpaceMudge" + ] + }, + "Web/JavaScript/Memory_Management": { + "modified": "2020-03-12T19:40:57.516Z", + "contributors": [ + "darknightva", + "jspkay", + "sokos", + "guspatagonico" + ] + }, + "Web/JavaScript/Guide/Control_flow_and_error_handling": { + "modified": "2020-07-03T09:14:04.292Z", + "contributors": [ + "lucamonte", + "ladysilvia", + "Goliath86", + "catBlack" + ] + }, + "Web/JavaScript/Guide/Details_of_the_Object_Model": { + "modified": "2020-03-12T19:45:00.589Z", + "contributors": [ + "wbamberg", + "dem-s" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions": { + "modified": "2020-03-12T19:44:32.587Z", + "contributors": [ + "Mystral", + "pfoletto", + "camilgun", + "adrisimo74", + "Samplasion", + "mar-mo" + ] + }, + "Web/JavaScript/Guide/Functions": { + "modified": "2020-03-12T19:43:03.997Z", + "contributors": [ + "MikePap", + "lvzndr" + ] + }, + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-03-12T19:43:14.274Z", + "contributors": [ + "AliceM5", + "mme000", + "Goliath86", + "JsD3n", + "catBlack", + "edoardopa" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:38:40.547Z", + "contributors": [ + "Mystral", + "fscholz", + "teoli", + "natebunnyfield" + ] + }, + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-03-12T19:42:19.516Z", + "contributors": [ + "edoardopa", + "claudiod" + ] + }, + "Web/JavaScript/Guide/Iterators_and_Generators": { + "modified": "2020-03-12T19:46:49.658Z", + "contributors": [ + "jackdbd" + ] + }, + "Web/JavaScript/Guide/Loops_and_iteration": { + "modified": "2020-10-11T06:08:37.488Z", + "contributors": [ + "bombur51", + "Edo", + "koalacurioso", + "ladysilvia", + "massimiliamanto", + "Cereal84" + ] + }, + "Web/JavaScript/JavaScript_technologies_overview": { + "modified": "2019-12-13T21:06:11.041Z", + "contributors": [ + "wbamberg", + "teoli", + "DaViD83" + ] + }, + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-03-12T19:44:11.878Z", + "contributors": [ + "webpn", + "alexandr-sizemov", + "Cereal84" + ] + }, + "Web/JavaScript/Reference/Functions/arguments": { + "modified": "2020-10-15T22:02:48.792Z", + "contributors": [ + "lesar", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Functions/Arrow_functions": { + "modified": "2020-03-12T19:45:00.553Z", + "contributors": [ + "nickdastain", + "DrJest" + ] + }, + "Web/JavaScript/Reference/Functions/get": { + "modified": "2020-10-15T22:01:12.442Z", + "contributors": [ + "matteogatti" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-03-12T19:39:12.043Z", + "contributors": [ + "lvzndr", + "ungarida", + "teoli", + "Salvo1402" + ] + }, + "Web/JavaScript/Reference/Functions/set": { + "modified": "2020-07-11T16:38:00.325Z", + "contributors": [ + "CostyEffe", + "DeadManPoe" + ] + }, + "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { + "modified": "2019-03-23T22:43:29.228Z", + "contributors": [ + "zauli83" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply": { + "modified": "2020-10-15T22:07:00.348Z", + "contributors": [ + "shb" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/revocable": { + "modified": "2020-10-15T22:10:51.734Z", + "contributors": [ + "jfet97" + ] + }, + "Web/JavaScript/Reference/Operators/Conditional_Operator": { + "modified": "2019-03-18T21:30:29.773Z", + "contributors": [ + "lesar" + ] + }, + "Web/JavaScript/Reference/Operators/Comma_Operator": { + "modified": "2020-10-15T22:23:54.628Z", + "contributors": [ + "ca42rico" + ] + }, + "Web/JavaScript/Reference/Template_literals": { + "modified": "2020-03-12T19:43:06.757Z", + "contributors": [ + "zedrix", + "sharq", + "manuel-di-iorio" + ] + }, + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-10-03T10:20:38.079Z", + "contributors": [ + "matt.polvenz", + "tangredifrancesco", + "igor.bragato", + "microjumper", + "maboglia", + "e403-mdn", + "clamar59", + "teoli", + "ethertank", + "Nicola_D" + ] + }, + "Web/Performance/Critical_rendering_path": { + "modified": "2019-10-26T07:16:57.508Z", + "contributors": [ + "theborgh" + ] + }, + "Web/Security/Insecure_passwords": { + "modified": "2019-03-18T21:40:50.724Z", + "contributors": [ + "oprof" + ] + }, + "Web/Web_Components/Using_custom_elements": { + "modified": "2020-03-31T06:51:28.687Z", + "contributors": [ + "massimiliano.mantovani" + ] + }, + "Web/API/WebSockets_API": { + "modified": "2019-03-23T23:27:06.479Z", + "contributors": [ + "AlessandroSanino1994", + "br4in", + "music-wedding", + "pbrenna" + ] + }, + "Web/API/WebSockets_API/Writing_WebSocket_client_applications": { + "modified": "2019-03-23T22:14:26.473Z", + "contributors": [ + "mnemosdev" + ] + }, + "Web/API/Window/find": { + "modified": "2019-03-24T00:02:59.251Z", + "contributors": [ + "khalid32", + "teoli", + "khela" + ] + }, + "Glossary/XHTML": { "modified": "2019-01-16T16:01:20.965Z", "contributors": [ "Federico", @@ -5987,12 +5711,288 @@ "Indigo" ] }, - "window.find": { - "modified": "2019-03-24T00:02:59.251Z", + "conflicting/Web/API/Document_Object_Model": { + "modified": "2019-03-23T23:40:46.607Z", + "contributors": [ + "teoli", + "DaViD83" + ] + }, + "Learn/CSS/Building_blocks/Cascade_and_inheritance": { + "modified": "2019-03-23T23:44:51.382Z", + "contributors": [ + "Sheppy", + "Andrealibo", + "Verruckt", + "Indigo" + ] + }, + "Learn/CSS/First_steps/How_CSS_works": { + "modified": "2019-03-23T23:43:28.433Z", + "contributors": [ + "pignaccia", + "Grino", + "Verruckt", + "Indigo" + ] + }, + "conflicting/Learn/CSS/First_steps/How_CSS_works": { + "modified": "2019-03-23T23:43:26.112Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "Learn/CSS/First_steps/How_CSS_is_structured": { + "modified": "2019-03-23T23:43:30.247Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "conflicting/Learn/CSS/Building_blocks/Selectors": { + "modified": "2019-03-23T23:43:27.992Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "Learn/CSS/First_steps": { + "modified": "2019-03-23T23:43:26.363Z", + "contributors": [ + "libri-nozze", + "Davidee", + "Grino", + "Verruckt", + "Indigo" + ] + }, + "conflicting/Learn/CSS/First_steps/How_CSS_works_113cfc53c4b8d07b4694368d9b18bd49": { + "modified": "2019-03-23T23:43:33.204Z", + "contributors": [ + "pignaccia", + "Verruckt", + "Indigo" + ] + }, + "conflicting/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property": { + "modified": "2019-03-23T23:43:11.495Z", + "contributors": [ + "teoli", + "ethertank", + "bradipao" + ] + }, + "Glossary/DOM": { + "modified": "2019-03-24T00:03:02.057Z", + "contributors": [ + "teoli", + "Samuele", + "Grino", + "khela", + "Federico", + "DaViD83" + ] + }, + "Web/OpenSearch": { + "modified": "2019-01-16T16:19:44.703Z", + "contributors": [ + "Federico" + ] + }, + "conflicting/Learn/Getting_started_with_the_web": { + "modified": "2020-07-16T22:22:27.063Z", + "contributors": [ + "duduindo", + "wbamberg", + "Ella" + ] + }, + "conflicting/Learn/Server-side/Django": { + "modified": "2019-03-23T23:07:51.453Z", + "contributors": [ + "foto-planner", + "domcorvasce" + ] + }, + "conflicting/Web/Guide": { + "modified": "2019-03-23T23:44:27.263Z", + "contributors": [ + "Leofiore" + ] + }, + "Web/Progressive_web_apps": { + "modified": "2019-03-23T23:24:00.771Z", + "contributors": [ + "SlagNe" + ] + }, + "Web/Guide/Mobile": { + "modified": "2019-03-23T23:24:04.119Z", + "contributors": [ + "BenB" + ] + }, + "conflicting/Web/Accessibility": { + "modified": "2019-03-23T23:18:40.805Z", + "contributors": [ + "klez" + ] + }, + "conflicting/Web/API/Node/firstChild": { + "modified": "2019-03-23T23:45:06.385Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Node/namespaceURI": { + "modified": "2019-03-23T23:45:08.038Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/DocumentOrShadowRoot/styleSheets": { + "modified": "2019-03-23T23:46:31.284Z", "contributors": [ + "teoli", "khalid32", + "Federico" + ] + }, + "Web/API/MouseEvent/altKey": { + "modified": "2019-03-23T23:46:44.336Z", + "contributors": [ "teoli", - "khela" + "jsx", + "Federico" + ] + }, + "Web/API/MouseEvent/button": { + "modified": "2019-03-23T23:46:37.711Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/MouseEvent/ctrlKey": { + "modified": "2019-03-23T23:46:43.027Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/KeyboardEvent/keyCode": { + "modified": "2019-03-23T23:46:33.218Z", + "contributors": [ + "teoli", + "xuancanh", + "Federico" + ] + }, + "Web/API/MouseEvent/metaKey": { + "modified": "2019-03-23T23:46:45.023Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/MouseEvent/shiftKey": { + "modified": "2019-03-23T23:46:40.291Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "conflicting/Web/API/WindowOrWorkerGlobalScope": { + "modified": "2019-03-23T22:33:10.851Z", + "contributors": [ + "aragacalledpat" + ] + }, + "Web/CSS/font-language-override": { + "modified": "2019-03-23T23:28:40.117Z", + "contributors": [ + "teoli", + "lboy" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2019-03-18T20:58:13.071Z", + "contributors": [ + "KadirTopal", + "ATrogolo", + "fscholz", + "Renatvs88" + ] + }, + "conflicting/Learn/CSS": { + "modified": "2019-03-23T23:29:02.257Z", + "contributors": [ + "Sheppy" + ] + }, + "conflicting/Web/API/Canvas_API/Tutorial": { + "modified": "2019-03-23T23:15:33.594Z", + "contributors": [ + "teoli", + "MrNow" + ] + }, + "conflicting/Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2019-03-23T23:05:35.907Z", + "contributors": [ + "clamar59" + ] + }, + "conflicting/Learn/JavaScript/Objects": { + "modified": "2020-03-12T19:36:12.785Z", + "contributors": [ + "wbamberg", + "gabriellaborghi", + "giovanniragno", + "teoli", + "fusionchess" + ] + }, + "conflicting/Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2019-03-23T22:58:00.342Z", + "contributors": [ + "gamerboy", + "fantarama", + "tommyblue", + "roccomuso", + "vindega", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy": { + "modified": "2020-10-15T22:07:04.638Z", + "contributors": [ + "fscholz" + ] + }, + "conflicting/Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T22:08:09.616Z", + "contributors": [ + "ladysilvia" + ] + }, + "conflicting/Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:38:22.596Z", + "contributors": [ + "chrisdavidmills", + "fscholz", + "wbamberg", + "ladysilvia", + "lazycesar", + "kdex", + "alberto.decaro" ] } } \ No newline at end of file diff --git a/files/it/conflicting/learn/css/building_blocks/selectors/index.html b/files/it/conflicting/learn/css/building_blocks/selectors/index.html index aece606365..5d659fa8fd 100644 --- a/files/it/conflicting/learn/css/building_blocks/selectors/index.html +++ b/files/it/conflicting/learn/css/building_blocks/selectors/index.html @@ -1,10 +1,11 @@ --- title: I Selettori -slug: Conoscere_i_CSS/I_Selettori +slug: conflicting/Learn/CSS/Building_blocks/Selectors tags: - Conoscere_i_CSS translation_of: Learn/CSS/Building_blocks/Selectors translation_of_original: Web/Guide/CSS/Getting_started/Selectors +original_slug: Conoscere_i_CSS/I_Selettori ---

Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza. diff --git a/files/it/conflicting/learn/css/first_steps/how_css_works/index.html b/files/it/conflicting/learn/css/first_steps/how_css_works/index.html index c5565b371f..87f955fffe 100644 --- a/files/it/conflicting/learn/css/first_steps/how_css_works/index.html +++ b/files/it/conflicting/learn/css/first_steps/how_css_works/index.html @@ -1,12 +1,13 @@ --- title: Come funzionano i CSS -slug: Conoscere_i_CSS/Come_funzionano_i_CSS +slug: conflicting/Learn/CSS/First_steps/How_CSS_works tags: - Conoscere_i_CSS - DOM - Tutte_le_categorie translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +original_slug: Conoscere_i_CSS/Come_funzionano_i_CSS ---

Questa pagina spiega il funzionamento dei CSS nel browser. diff --git a/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html b/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html index 4048fe74e3..bd894b245b 100644 --- a/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html +++ b/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html @@ -1,10 +1,12 @@ --- title: Perché usare i CSS -slug: Conoscere_i_CSS/Perché_usare_i_CSS +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_113cfc53c4b8d07b4694368d9b18bd49 tags: - Conoscere_i_CSS translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +original_slug: Conoscere_i_CSS/Perché_usare_i_CSS ---

 

diff --git a/files/it/conflicting/learn/css/index.html b/files/it/conflicting/learn/css/index.html index 2bd34295c7..134aff0622 100644 --- a/files/it/conflicting/learn/css/index.html +++ b/files/it/conflicting/learn/css/index.html @@ -1,6 +1,6 @@ --- title: CSS developer guide -slug: Web/Guide/CSS +slug: conflicting/Learn/CSS tags: - CSS - Guide @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: Learn/CSS translation_of_original: Web/Guide/CSS +original_slug: Web/Guide/CSS ---

{{draft}}

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

diff --git a/files/it/conflicting/learn/getting_started_with_the_web/index.html b/files/it/conflicting/learn/getting_started_with_the_web/index.html index c52f7ca3e2..4605a9e4bb 100644 --- a/files/it/conflicting/learn/getting_started_with_the_web/index.html +++ b/files/it/conflicting/learn/getting_started_with_the_web/index.html @@ -1,6 +1,6 @@ --- title: Scrivi una semplice pagina in HTML -slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML +slug: conflicting/Learn/Getting_started_with_the_web tags: - Guide - HTML @@ -8,6 +8,7 @@ tags: - Web Development translation_of: Learn/Getting_started_with_the_web translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML +original_slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML ---

In questo articolo impareremo come creare una semplice pagina web con il {{Glossary("HTML")}}.

diff --git a/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html index d9c0357ebb..d9b371f22b 100644 --- a/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -1,8 +1,9 @@ --- title: Getting Started (JavaScript Tutorial) -slug: Web/JavaScript/Getting_Started +slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics translation_of: Learn/Getting_started_with_the_web/JavaScript_basics translation_of_original: Web/JavaScript/Getting_Started +original_slug: Web/JavaScript/Getting_Started ---

Perché JavaScript?

JavaScript è un linguaggio per computer potente, complicato, e spesso misconosciuto. Permette lo sviluppo rapido di applicazioni in cui gli utenti possono inserire i dati e vedere i risultati facilmente.

diff --git a/files/it/conflicting/learn/javascript/objects/index.html b/files/it/conflicting/learn/javascript/objects/index.html index 6281d7ef4b..e404d0134d 100644 --- a/files/it/conflicting/learn/javascript/objects/index.html +++ b/files/it/conflicting/learn/javascript/objects/index.html @@ -1,6 +1,6 @@ --- title: Introduzione a JavaScript Object-Oriented -slug: Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript +slug: conflicting/Learn/JavaScript/Objects tags: - Classe - Costruttore @@ -11,6 +11,7 @@ tags: - Orientato agli oggetti translation_of: Learn/JavaScript/Objects translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +original_slug: Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript ---

{{jsSidebar("Introductory")}}

diff --git a/files/it/conflicting/learn/server-side/django/index.html b/files/it/conflicting/learn/server-side/django/index.html index 071e75d582..e7efb7b504 100644 --- a/files/it/conflicting/learn/server-side/django/index.html +++ b/files/it/conflicting/learn/server-side/django/index.html @@ -1,8 +1,9 @@ --- title: Python -slug: Python +slug: conflicting/Learn/Server-side/Django translation_of: Learn/Server-side/Django translation_of_original: Python +original_slug: Python ---

Python è un linguaggio di programmazione interpretato disponibile su una vasta varietà di piattaforme, inclusi Linux, MacOS X e Microsoft Windows.

diff --git a/files/it/conflicting/web/accessibility/index.html b/files/it/conflicting/web/accessibility/index.html index fccfa1f152..f45cf3b9c4 100644 --- a/files/it/conflicting/web/accessibility/index.html +++ b/files/it/conflicting/web/accessibility/index.html @@ -1,8 +1,9 @@ --- title: Sviluppo Web -slug: Web/Accessibility/Sviluppo_Web +slug: conflicting/Web/Accessibility translation_of: Web/Accessibility translation_of_original: Web/Accessibility/Web_Development +original_slug: Web/Accessibility/Sviluppo_Web ---

 

diff --git a/files/it/conflicting/web/api/canvas_api/tutorial/index.html b/files/it/conflicting/web/api/canvas_api/tutorial/index.html index 1495605ec5..12bd7e78d9 100644 --- a/files/it/conflicting/web/api/canvas_api/tutorial/index.html +++ b/files/it/conflicting/web/api/canvas_api/tutorial/index.html @@ -1,8 +1,9 @@ --- title: Drawing graphics with canvas -slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +slug: conflicting/Web/API/Canvas_API/Tutorial translation_of: Web/API/Canvas_API/Tutorial translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +original_slug: Web/HTML/Canvas/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.

diff --git a/files/it/conflicting/web/api/document_object_model/index.html b/files/it/conflicting/web/api/document_object_model/index.html index a151cd40c5..0d0bb097aa 100644 --- a/files/it/conflicting/web/api/document_object_model/index.html +++ b/files/it/conflicting/web/api/document_object_model/index.html @@ -1,11 +1,12 @@ --- title: Circa il Document Object Model -slug: Circa_il_Document_Object_Model +slug: conflicting/Web/API/Document_Object_Model tags: - DOM - Tutte_le_categorie translation_of: Web/API/Document_Object_Model translation_of_original: Web/Guide/API/DOM +original_slug: Circa_il_Document_Object_Model ---

Cos'è il DOM?

Il Modello a Oggetti del Documento è una API per i documenti HTML e XML. Esso fornisce una rappresentazione strutturale del documento, dando la possibilità di modificarne il contenuto e la presentazione visiva. In poche parole, connette le pagine web agli script o ai linguaggi di programmazione.

diff --git a/files/it/conflicting/web/api/node/firstchild/index.html b/files/it/conflicting/web/api/node/firstchild/index.html index 99a2a04fc2..a7adb1a1ca 100644 --- a/files/it/conflicting/web/api/node/firstchild/index.html +++ b/files/it/conflicting/web/api/node/firstchild/index.html @@ -1,8 +1,9 @@ --- title: document.firstChild -slug: Web/API/Document/firstChild +slug: conflicting/Web/API/Node/firstChild translation_of: Web/API/Node/firstChild translation_of_original: Web/API/document.firstChild +original_slug: Web/API/Document/firstChild ---
{{APIRef("DOM")}}
diff --git a/files/it/conflicting/web/api/windoworworkerglobalscope/index.html b/files/it/conflicting/web/api/windoworworkerglobalscope/index.html index ce963ed81e..8eaaaa82d9 100644 --- a/files/it/conflicting/web/api/windoworworkerglobalscope/index.html +++ b/files/it/conflicting/web/api/windoworworkerglobalscope/index.html @@ -1,6 +1,6 @@ --- title: WindowTimers -slug: Web/API/WindowTimers +slug: conflicting/Web/API/WindowOrWorkerGlobalScope tags: - API - HTML-DOM @@ -11,6 +11,7 @@ tags: - Workers translation_of: Web/API/WindowOrWorkerGlobalScope translation_of_original: Web/API/WindowTimers +original_slug: Web/API/WindowTimers ---
{{APIRef("HTML DOM")}}
diff --git a/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index b54d7a7367..5d02181b92 100644 --- a/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,11 +1,13 @@ --- title: Dare una mano al puntatore -slug: Dare_una_mano_al_puntatore +slug: >- + conflicting/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - Tutte_le_categorie translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property translation_of_original: Giving_'cursor'_a_Hand +original_slug: Dare_una_mano_al_puntatore ---

Un buon numero di sviluppatori ha chiesto quando Mozilla e Netscape 6+ abbiano pianificato di implementare il supporto per la proprietà cursor. Spesso si stupiscono di scoprire che entrambi i browser già la supportano. Comunque, ciò che non dovrebbe sorprendere è che il supporto è basato sulle specifiche approvate dal W3C per i CSS2.

Il problema di base è questo: Internet Explorer 5.x per Windows riconosce il valore hand, che non appare mai nella sezione 18.1 dei CSS2– ne' in altra specifica. Il valore che più si avvicina al comportamento di hand è pointer, che le specifiche definiscono così: "Il cursore è un puntatore che indica un collegamento". Si noti che non viene mai detto niente riguardo l'apparizione di una manina, anche se è ormai pratica convenzionale dei browser.

diff --git a/files/it/conflicting/web/guide/index.html b/files/it/conflicting/web/guide/index.html index 955b27f5d9..b1d16cf207 100644 --- a/files/it/conflicting/web/guide/index.html +++ b/files/it/conflicting/web/guide/index.html @@ -1,11 +1,12 @@ --- title: Sviluppo Web -slug: Sviluppo_Web +slug: conflicting/Web/Guide tags: - Sviluppo_Web - Tutte_le_categorie translation_of: Web/Guide translation_of_original: Web_Development +original_slug: Sviluppo_Web ---

diff --git a/files/it/conflicting/web/javascript/reference/global_objects/object/index.html b/files/it/conflicting/web/javascript/reference/global_objects/object/index.html index 568165d0be..26386b07ac 100644 --- a/files/it/conflicting/web/javascript/reference/global_objects/object/index.html +++ b/files/it/conflicting/web/javascript/reference/global_objects/object/index.html @@ -1,8 +1,9 @@ --- title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object translation_of: Web/JavaScript/Reference/Global_Objects/Object translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---
{{JSRef("Global_Objects", "Object")}}
diff --git a/files/it/conflicting/web/javascript/reference/global_objects/string/index.html b/files/it/conflicting/web/javascript/reference/global_objects/string/index.html index c83cec2a54..5ba9408faa 100644 --- a/files/it/conflicting/web/javascript/reference/global_objects/string/index.html +++ b/files/it/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,8 +1,9 @@ --- title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String translation_of: Web/JavaScript/Reference/Global_Objects/String translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---
{{JSRef}}
diff --git a/files/it/conflicting/web/javascript/reference/operators/index.html b/files/it/conflicting/web/javascript/reference/operators/index.html index e49fe045ae..abaafab2fd 100644 --- a/files/it/conflicting/web/javascript/reference/operators/index.html +++ b/files/it/conflicting/web/javascript/reference/operators/index.html @@ -1,12 +1,13 @@ --- title: Operatori Aritmetici -slug: Web/JavaScript/Reference/Operators/Operatori_Aritmetici +slug: conflicting/Web/JavaScript/Reference/Operators tags: - JavaScript - Operatori - Operatori Aritmetici translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +original_slug: Web/JavaScript/Reference/Operators/Operatori_Aritmetici ---
{{jsSidebar("Operators")}}
diff --git a/files/it/glossary/dhtml/index.html b/files/it/glossary/dhtml/index.html index fbc1dbcbe4..c26ac35927 100644 --- a/files/it/glossary/dhtml/index.html +++ b/files/it/glossary/dhtml/index.html @@ -1,9 +1,10 @@ --- title: DHTML -slug: DHTML +slug: Glossary/DHTML tags: - DHTML translation_of: Glossary/DHTML +original_slug: DHTML ---

 

diff --git a/files/it/glossary/dom/index.html b/files/it/glossary/dom/index.html index 8b6769d83e..9830d03279 100644 --- a/files/it/glossary/dom/index.html +++ b/files/it/glossary/dom/index.html @@ -1,8 +1,9 @@ --- title: DOM -slug: DOM +slug: Glossary/DOM translation_of: Glossary/DOM translation_of_original: Document_Object_Model_(DOM) +original_slug: DOM ---
Utilizzare il DOM Base Livello 1 del W3C
diff --git a/files/it/glossary/localization/index.html b/files/it/glossary/localization/index.html index 678f3670ed..5c56f4551a 100644 --- a/files/it/glossary/localization/index.html +++ b/files/it/glossary/localization/index.html @@ -1,10 +1,11 @@ --- title: Localization -slug: Localization +slug: Glossary/Localization tags: - Da_unire - Tutte_le_categorie translation_of: Glossary/Localization +original_slug: Localization ---

La localizzazione è il processo di traduzione delle interfacce utente di un software da un linguaggio a un altro adattandolo anche a una cultura straniera. Queste risorse servono ad aiutare la localizzazione delle applicazioni e delle estensioni basate su Mozilla.

{{ languages( { "es": "es/Localizaci\u00f3n", "fr": "fr/Localisation", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o" } ) }}

diff --git a/files/it/glossary/protocol/index.html b/files/it/glossary/protocol/index.html index d764b42322..c682481200 100644 --- a/files/it/glossary/protocol/index.html +++ b/files/it/glossary/protocol/index.html @@ -1,11 +1,12 @@ --- title: protocollo -slug: Glossary/Protocollo +slug: Glossary/Protocol tags: - Glossário - Infrastruttura - Protocolli translation_of: Glossary/Protocol +original_slug: Glossary/Protocollo ---

Un protocollo è un sistema di regole che stabilisce come vengono scambiati i dati fra computer diversi o all’interno dello stesso computer. Per comunicare tra loro, i dispositivi devono scambiarsi i dati in un formato comune. L’insieme delle regole che definisce un formato si chiama protocollo.

diff --git a/files/it/glossary/response_header/index.html b/files/it/glossary/response_header/index.html index 6363a8b84a..ea0ff313fe 100644 --- a/files/it/glossary/response_header/index.html +++ b/files/it/glossary/response_header/index.html @@ -1,9 +1,10 @@ --- title: Header di risposta -slug: Glossary/Header_di_risposta +slug: Glossary/Response_header tags: - Glossário translation_of: Glossary/Response_header +original_slug: Glossary/Header_di_risposta ---

Un header di risposta è un {{glossary("header", "HTTP header")}} che può essere utilizzato in una risposta HTTP e che non fa riferimento al contenuto del messaggio. Gli header di risposta, come {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} o {{HTTPHeader("Server")}} sono usati per fornire un contesto della risposta più dettagliato.

diff --git a/files/it/glossary/xhtml/index.html b/files/it/glossary/xhtml/index.html index ea600cce7c..55cf71cad6 100644 --- a/files/it/glossary/xhtml/index.html +++ b/files/it/glossary/xhtml/index.html @@ -1,10 +1,11 @@ --- title: XHTML -slug: XHTML +slug: Glossary/XHTML tags: - Tutte_le_categorie - XHTML translation_of: Glossary/XHTML +original_slug: XHTML ---

XHTML sta a XML come HTML sta a SGML. Questo significa che XHTML è un linguaggio a markup simile a HTML, ma con una sintassi più rigida. Le due versioni di XHTML definite dal W3C sono: diff --git a/files/it/learn/accessibility/accessibility_troubleshooting/index.html b/files/it/learn/accessibility/accessibility_troubleshooting/index.html index 8c0e97dab4..0721747f72 100644 --- a/files/it/learn/accessibility/accessibility_troubleshooting/index.html +++ b/files/it/learn/accessibility/accessibility_troubleshooting/index.html @@ -1,6 +1,6 @@ --- title: 'Test di valutazione: risoluzione di problemi di accessibilità' -slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi +slug: Learn/Accessibility/Accessibility_troubleshooting tags: - Accessibilità - CSS @@ -10,6 +10,7 @@ tags: - Test di valutazione - WAI-ARIA translation_of: Learn/Accessibility/Accessibility_troubleshooting +original_slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi ---

{{LearnSidebar}}
diff --git a/files/it/learn/accessibility/css_and_javascript/index.html b/files/it/learn/accessibility/css_and_javascript/index.html index 6f5e69fea4..b1677cac9f 100644 --- a/files/it/learn/accessibility/css_and_javascript/index.html +++ b/files/it/learn/accessibility/css_and_javascript/index.html @@ -1,6 +1,6 @@ --- title: Linee guida di accessibilità per CSS e JavaScript -slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità +slug: Learn/Accessibility/CSS_and_JavaScript tags: - Accessibilità - Articolo @@ -13,6 +13,7 @@ tags: - nascondere - non intrusivo translation_of: Learn/Accessibility/CSS_and_JavaScript +original_slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità ---
{{LearnSidebar}}
diff --git a/files/it/learn/accessibility/html/index.html b/files/it/learn/accessibility/html/index.html index 26129068e4..45d39505ef 100644 --- a/files/it/learn/accessibility/html/index.html +++ b/files/it/learn/accessibility/html/index.html @@ -1,6 +1,6 @@ --- title: 'HTML: una buona base per l''accessibilità' -slug: Learn/Accessibilità/HTML_accessibilità +slug: Learn/Accessibility/HTML tags: - Accessibilità - Articolo @@ -15,6 +15,7 @@ tags: - tastiera - tecnologie assistive translation_of: Learn/Accessibility/HTML +original_slug: Learn/Accessibilità/HTML_accessibilità ---
{{LearnSidebar}}
diff --git a/files/it/learn/accessibility/index.html b/files/it/learn/accessibility/index.html index 57dee47809..83765a8317 100644 --- a/files/it/learn/accessibility/index.html +++ b/files/it/learn/accessibility/index.html @@ -1,6 +1,6 @@ --- title: Accessibilità -slug: Learn/Accessibilità +slug: Learn/Accessibility tags: - ARIA - Accessibilità @@ -17,6 +17,7 @@ tags: - Sviluppo Web - imparare translation_of: Learn/Accessibility +original_slug: Learn/Accessibilità ---
{{LearnSidebar}}
diff --git a/files/it/learn/accessibility/mobile/index.html b/files/it/learn/accessibility/mobile/index.html index 46a2b24c4d..923ae82ae1 100644 --- a/files/it/learn/accessibility/mobile/index.html +++ b/files/it/learn/accessibility/mobile/index.html @@ -1,6 +1,6 @@ --- title: Accessibilità per dispositivi mobili -slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili +slug: Learn/Accessibility/Mobile tags: - Accessibilità - Articolo @@ -12,6 +12,7 @@ tags: - screenreader - touch translation_of: Learn/Accessibility/Mobile +original_slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili ---
{{LearnSidebar}}
diff --git a/files/it/learn/accessibility/multimedia/index.html b/files/it/learn/accessibility/multimedia/index.html index f920e59050..fe0f6d872e 100644 --- a/files/it/learn/accessibility/multimedia/index.html +++ b/files/it/learn/accessibility/multimedia/index.html @@ -1,6 +1,6 @@ --- title: Accessibilità multimediale -slug: Learn/Accessibilità/Multimedia +slug: Learn/Accessibility/Multimedia tags: - Accessibilità - Articolo @@ -15,6 +15,7 @@ tags: - Tracce testuali - Video translation_of: Learn/Accessibility/Multimedia +original_slug: Learn/Accessibilità/Multimedia ---
{{LearnSidebar}}
diff --git a/files/it/learn/accessibility/wai-aria_basics/index.html b/files/it/learn/accessibility/wai-aria_basics/index.html index 09891c8a11..05a7ea4b5f 100644 --- a/files/it/learn/accessibility/wai-aria_basics/index.html +++ b/files/it/learn/accessibility/wai-aria_basics/index.html @@ -1,6 +1,6 @@ --- title: Basi della tecnologia WAI-ARIA -slug: Learn/Accessibilità/WAI-ARIA_basics +slug: Learn/Accessibility/WAI-ARIA_basics tags: - ARIA - Accessibilità @@ -12,6 +12,7 @@ tags: - Principiante - WAI-ARIA translation_of: Learn/Accessibility/WAI-ARIA_basics +original_slug: Learn/Accessibilità/WAI-ARIA_basics ---
{{LearnSidebar}}
diff --git a/files/it/learn/accessibility/what_is_accessibility/index.html b/files/it/learn/accessibility/what_is_accessibility/index.html index 52a5c138f8..196c5e256d 100644 --- a/files/it/learn/accessibility/what_is_accessibility/index.html +++ b/files/it/learn/accessibility/what_is_accessibility/index.html @@ -1,6 +1,6 @@ --- title: Cosa è l'accessibilità? -slug: Learn/Accessibilità/Cosa_è_accessibilità +slug: Learn/Accessibility/What_is_accessibility tags: - Accessibilità - Articolo @@ -17,6 +17,7 @@ tags: - tecnologie assistive - utenti translation_of: Learn/Accessibility/What_is_accessibility +original_slug: Learn/Accessibilità/Cosa_è_accessibilità ---
{{LearnSidebar}}
diff --git a/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html index 66702c1bdd..a2f2a162d1 100644 --- a/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -1,10 +1,11 @@ --- title: Cascata ed ereditarietà -slug: Conoscere_i_CSS/Cascata_ed_ereditarietà +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance tags: - Conoscere_i_CSS translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +original_slug: Conoscere_i_CSS/Cascata_ed_ereditarietà ---

Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori. diff --git a/files/it/learn/css/building_blocks/selectors/index.html b/files/it/learn/css/building_blocks/selectors/index.html index cf0f6662cf..06face955c 100644 --- a/files/it/learn/css/building_blocks/selectors/index.html +++ b/files/it/learn/css/building_blocks/selectors/index.html @@ -1,6 +1,6 @@ --- title: selettori CSS -slug: Learn/CSS/Building_blocks/Selettori +slug: Learn/CSS/Building_blocks/Selectors tags: - Attributo - CSS @@ -10,6 +10,7 @@ tags: - Pseudo - Selettori translation_of: Learn/CSS/Building_blocks/Selectors +original_slug: Learn/CSS/Building_blocks/Selettori ---

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
diff --git a/files/it/learn/css/first_steps/how_css_is_structured/index.html b/files/it/learn/css/first_steps/how_css_is_structured/index.html index 7942e9a4a9..029e1f36ac 100644 --- a/files/it/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/it/learn/css/first_steps/how_css_is_structured/index.html @@ -1,10 +1,11 @@ --- title: CSS leggibili -slug: Conoscere_i_CSS/CSS_leggibili +slug: Learn/CSS/First_steps/How_CSS_is_structured tags: - Conoscere_i_CSS translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +original_slug: Conoscere_i_CSS/CSS_leggibili ---

In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso. diff --git a/files/it/learn/css/first_steps/how_css_works/index.html b/files/it/learn/css/first_steps/how_css_works/index.html index 9e65e269af..558c1445a2 100644 --- a/files/it/learn/css/first_steps/how_css_works/index.html +++ b/files/it/learn/css/first_steps/how_css_works/index.html @@ -1,8 +1,9 @@ --- title: Cosa è CSS -slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS +slug: Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +original_slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS ---

{{ CSSTutorialTOC() }}

diff --git a/files/it/learn/css/first_steps/index.html b/files/it/learn/css/first_steps/index.html index 106bf156d6..746e5f86f9 100644 --- a/files/it/learn/css/first_steps/index.html +++ b/files/it/learn/css/first_steps/index.html @@ -1,8 +1,9 @@ --- title: Iniziare (Esercitazione di CSS) -slug: Conoscere_i_CSS +slug: Learn/CSS/First_steps translation_of: Learn/CSS/First_steps translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Conoscere_i_CSS ---

Rivolto ai principianti assoluti, questa esercitazione di CSS per principianti presenta il Cascading Style Sheets (CSS). Guida l'utente attraverso le caratteristiche di base del linguaggio con esempi pratici che possono essere provati sul proprio computer e illustra le caratteristiche standard di CSS che funzionano nei moderni browser.

diff --git a/files/it/learn/css/styling_text/styling_links/index.html b/files/it/learn/css/styling_text/styling_links/index.html index b6bdc7a6fa..8e0f51eac3 100644 --- a/files/it/learn/css/styling_text/styling_links/index.html +++ b/files/it/learn/css/styling_text/styling_links/index.html @@ -1,7 +1,8 @@ --- title: Definire gli stili dei link -slug: Learn/CSS/Styling_text/Definire_stili_link +slug: Learn/CSS/Styling_text/Styling_links translation_of: Learn/CSS/Styling_text/Styling_links +original_slug: Learn/CSS/Styling_text/Definire_stili_link ---
{{LearnSidebar}}
diff --git a/files/it/learn/forms/form_validation/index.html b/files/it/learn/forms/form_validation/index.html index 9557758529..b074dab1c1 100644 --- a/files/it/learn/forms/form_validation/index.html +++ b/files/it/learn/forms/form_validation/index.html @@ -1,6 +1,6 @@ --- title: Validazione lato client delle form -slug: Learn/HTML/Forms/Form_validation +slug: Learn/Forms/Form_validation tags: - Apprendere - Esempio @@ -12,6 +12,7 @@ tags: - Web - regex translation_of: Learn/Forms/Form_validation +original_slug: Learn/HTML/Forms/Form_validation ---
{{LearnSidebar}}
diff --git a/files/it/learn/forms/how_to_build_custom_form_controls/index.html b/files/it/learn/forms/how_to_build_custom_form_controls/index.html index 288fa8e1c2..4ec2d16781 100644 --- a/files/it/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/it/learn/forms/how_to_build_custom_form_controls/index.html @@ -1,7 +1,8 @@ --- title: Come costruire form widget personalizzati -slug: Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati +slug: Learn/Forms/How_to_build_custom_form_controls translation_of: Learn/Forms/How_to_build_custom_form_controls +original_slug: Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati ---
{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
diff --git a/files/it/learn/forms/index.html b/files/it/learn/forms/index.html index 45c0d055dd..c001d4be39 100644 --- a/files/it/learn/forms/index.html +++ b/files/it/learn/forms/index.html @@ -1,6 +1,6 @@ --- title: HTML forms -slug: Learn/HTML/Forms +slug: Learn/Forms tags: - Beginner - Featured @@ -13,6 +13,7 @@ tags: - TopicStub - Web translation_of: Learn/Forms +original_slug: Learn/HTML/Forms ---
{{LearnSidebar}}
diff --git a/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html index d7c574320b..5d4f6f624b 100644 --- a/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -1,7 +1,8 @@ --- title: Gestire i file -slug: Learn/Getting_started_with_the_web/Gestire_i_file +slug: Learn/Getting_started_with_the_web/Dealing_with_files translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Learn/Getting_started_with_the_web/Gestire_i_file ---
{{LearnSidebar}}
diff --git a/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html index 47fb54afda..32c4cc1810 100644 --- a/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html +++ b/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -1,7 +1,8 @@ --- title: Come funziona il Web -slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web +slug: Learn/Getting_started_with_the_web/How_the_Web_works translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +original_slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web ---
{{LearnSidebar}}
diff --git a/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html index 933bd4245c..96a721fe9e 100644 --- a/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -1,6 +1,6 @@ --- title: Pubblicare il tuo sito -slug: Learn/Getting_started_with_the_web/Pubbicare_sito +slug: Learn/Getting_started_with_the_web/Publishing_your_website tags: - Advanced - Beginner @@ -10,10 +10,11 @@ tags: - Google App Engine - Learn - Web - - 'l10n:priority' + - l10n:priority - publishing - web server translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +original_slug: Learn/Getting_started_with_the_web/Pubbicare_sito ---
{{LearnSidebar}}
diff --git a/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html index 3d3bc69f60..8adb6dbe7d 100644 --- a/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ b/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -1,6 +1,6 @@ --- title: Che aspetto avrà il tuo sito Web? -slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like tags: - Basi - Design @@ -9,6 +9,7 @@ tags: - Web - imparare translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +original_slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web ---
{{LearnSidebar}}
diff --git a/files/it/learn/html/howto/use_data_attributes/index.html b/files/it/learn/html/howto/use_data_attributes/index.html index f256a42aaf..836dda37ca 100644 --- a/files/it/learn/html/howto/use_data_attributes/index.html +++ b/files/it/learn/html/howto/use_data_attributes/index.html @@ -1,6 +1,6 @@ --- title: Uso degli attributi data -slug: Learn/HTML/Howto/Uso_attributi_data +slug: Learn/HTML/Howto/Use_data_attributes tags: - Attributi Di Dati Personalizzati - Esempi @@ -9,6 +9,7 @@ tags: - HTML5 - Web translation_of: Learn/HTML/Howto/Use_data_attributes +original_slug: Learn/HTML/Howto/Uso_attributi_data ---
{{LearnSidebar}}
diff --git a/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html index e5496dcb1a..9783c3850d 100644 --- a/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -1,7 +1,8 @@ --- title: Fondamenti di testo HTML -slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +original_slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html ---
{{LearnSidebar}}
diff --git a/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index de092cd8b9..88bb20cbba 100644 --- a/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -1,6 +1,6 @@ --- title: Cosa c'è nella head? Metadata in HTML -slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML tags: - Guida - HTML @@ -10,6 +10,7 @@ tags: - lang - metadata translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML ---
{{LearnSidebar}}
diff --git a/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html index cc3dbd7892..20c4afe6a2 100644 --- a/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -1,7 +1,8 @@ --- title: Immagini reattive -slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +original_slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive ---
{{LearnSidebar}}
diff --git a/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 3c15046cd4..a6c5b0f258 100644 --- a/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -1,7 +1,8 @@ --- title: Contenuti video e audio -slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +original_slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio ---
{{LearnSidebar}}
diff --git a/files/it/learn/javascript/first_steps/variables/index.html b/files/it/learn/javascript/first_steps/variables/index.html index 38da82e607..4b6073f0f5 100644 --- a/files/it/learn/javascript/first_steps/variables/index.html +++ b/files/it/learn/javascript/first_steps/variables/index.html @@ -1,7 +1,8 @@ --- title: Memorizzazione delle informazioni necessarie - Variabili -slug: Learn/JavaScript/First_steps/Variabili +slug: Learn/JavaScript/First_steps/Variables translation_of: Learn/JavaScript/First_steps/Variables +original_slug: Learn/JavaScript/First_steps/Variabili ---
{{LearnSidebar}}
diff --git a/files/it/learn/javascript/first_steps/what_went_wrong/index.html b/files/it/learn/javascript/first_steps/what_went_wrong/index.html index 1fa4343de8..a930befda3 100644 --- a/files/it/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/it/learn/javascript/first_steps/what_went_wrong/index.html @@ -1,7 +1,8 @@ --- title: Cosa è andato storto? Problemi con Javacript -slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto +slug: Learn/JavaScript/First_steps/What_went_wrong translation_of: Learn/JavaScript/First_steps/What_went_wrong +original_slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto ---
{{LearnSidebar}}
diff --git a/files/it/learn/javascript/howto/index.html b/files/it/learn/javascript/howto/index.html index 275eb0cf8d..ce1d7365ea 100644 --- a/files/it/learn/javascript/howto/index.html +++ b/files/it/learn/javascript/howto/index.html @@ -1,10 +1,11 @@ --- title: Risolvere problematiche frequenti nel tuo codice JavaScript -slug: Learn/JavaScript/Comefare +slug: Learn/JavaScript/Howto tags: - Principianti - imparare translation_of: Learn/JavaScript/Howto +original_slug: Learn/JavaScript/Comefare ---
R{{LearnSidebar}}
diff --git a/files/it/learn/javascript/objects/basics/index.html b/files/it/learn/javascript/objects/basics/index.html index 539df5c2e0..ef02b4f1fe 100644 --- a/files/it/learn/javascript/objects/basics/index.html +++ b/files/it/learn/javascript/objects/basics/index.html @@ -1,7 +1,8 @@ --- title: Basi degli oggetti JavaScript -slug: Learn/JavaScript/Oggetti/Basics +slug: Learn/JavaScript/Objects/Basics translation_of: Learn/JavaScript/Objects/Basics +original_slug: Learn/JavaScript/Oggetti/Basics ---
{{LearnSidebar}}
diff --git a/files/it/learn/javascript/objects/index.html b/files/it/learn/javascript/objects/index.html index 5fa859db74..fdf91d26ff 100644 --- a/files/it/learn/javascript/objects/index.html +++ b/files/it/learn/javascript/objects/index.html @@ -1,6 +1,6 @@ --- title: Introduzione agli oggetti in JavaScript -slug: Learn/JavaScript/Oggetti +slug: Learn/JavaScript/Objects tags: - Articolo - Guida @@ -11,6 +11,7 @@ tags: - Verifica - imparare translation_of: Learn/JavaScript/Objects +original_slug: Learn/JavaScript/Oggetti ---
{{LearnSidebar}}
diff --git a/files/it/learn/javascript/objects/json/index.html b/files/it/learn/javascript/objects/json/index.html index 71cf166e15..ba8ad20ede 100644 --- a/files/it/learn/javascript/objects/json/index.html +++ b/files/it/learn/javascript/objects/json/index.html @@ -1,7 +1,8 @@ --- title: Lavorare con JSON -slug: Learn/JavaScript/Oggetti/JSON +slug: Learn/JavaScript/Objects/JSON translation_of: Learn/JavaScript/Objects/JSON +original_slug: Learn/JavaScript/Oggetti/JSON ---
{{LearnSidebar}}
diff --git a/files/it/learn/server-side/django/introduction/index.html b/files/it/learn/server-side/django/introduction/index.html index 4eb36683eb..bf5874c4d8 100644 --- a/files/it/learn/server-side/django/introduction/index.html +++ b/files/it/learn/server-side/django/introduction/index.html @@ -1,6 +1,6 @@ --- title: Introduzione a Django -slug: Learn/Server-side/Django/Introduzione +slug: Learn/Server-side/Django/Introduction tags: - Introduzione - Learn @@ -9,6 +9,7 @@ tags: - django - programmazione lato server translation_of: Learn/Server-side/Django/Introduction +original_slug: Learn/Server-side/Django/Introduzione ---
{{LearnSidebar}}
diff --git a/files/it/mdn/at_ten/index.html b/files/it/mdn/at_ten/index.html index ab7c64d1ad..78aa58a464 100644 --- a/files/it/mdn/at_ten/index.html +++ b/files/it/mdn/at_ten/index.html @@ -1,11 +1,12 @@ --- title: 10 anni di MDN -slug: MDN_at_ten +slug: MDN/At_ten tags: - History - Landing - MDN Meta translation_of: MDN_at_ten +original_slug: MDN_at_ten ---

Celebra 10 anni di documentazione Web.

diff --git a/files/it/mdn/contribute/howto/create_and_edit_pages/index.html b/files/it/mdn/contribute/howto/create_and_edit_pages/index.html index 2ffa7888a4..260f3562b3 100644 --- a/files/it/mdn/contribute/howto/create_and_edit_pages/index.html +++ b/files/it/mdn/contribute/howto/create_and_edit_pages/index.html @@ -1,7 +1,8 @@ --- -title: 'creare., edizione paginaCreazione e modifica delle pagine' -slug: MDN/Contribute/Creating_and_editing_pages +title: creare., edizione paginaCreazione e modifica delle pagine +slug: MDN/Contribute/Howto/Create_and_edit_pages translation_of: MDN/Contribute/Howto/Create_and_edit_pages +original_slug: MDN/Contribute/Creating_and_editing_pages ---
{{MDNSidebar}}

Modificare e creare una pagina sono le due attività più comuni per la maggior parte dei  COLLABORATORI MDN.  Questo articolo spiega come eseguire queste due operazioni.

diff --git a/files/it/mdn/guidelines/conventions_definitions/index.html b/files/it/mdn/guidelines/conventions_definitions/index.html index 2aadc92c27..ab679a4188 100644 --- a/files/it/mdn/guidelines/conventions_definitions/index.html +++ b/files/it/mdn/guidelines/conventions_definitions/index.html @@ -1,11 +1,12 @@ --- title: Migliore pratica -slug: MDN/Guidelines/Migliore_pratica +slug: MDN/Guidelines/Conventions_definitions tags: - Guida - MDN Meta - linee guida translation_of: MDN/Guidelines/Conventions_definitions +original_slug: MDN/Guidelines/Migliore_pratica ---
{{MDNSidebar}}

Quest'articolo descrive i metodi raccomandati di lavoro con il contenuto su MDN. Queste linee guida descrivono i metodi preferiti per fare tutto ciò che porta ad un miglior risultato, o offrire un consiglio nel decidere tra diversi metodi nel fare cose simili.

diff --git a/files/it/mdn/structures/compatibility_tables/index.html b/files/it/mdn/structures/compatibility_tables/index.html index 81ee695696..7ec7f86a68 100644 --- a/files/it/mdn/structures/compatibility_tables/index.html +++ b/files/it/mdn/structures/compatibility_tables/index.html @@ -1,7 +1,8 @@ --- title: Tabelle di compatibilità -slug: MDN/Structures/Tabelle_compatibilità +slug: MDN/Structures/Compatibility_tables translation_of: MDN/Structures/Compatibility_tables +original_slug: MDN/Structures/Tabelle_compatibilità ---
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
diff --git a/files/it/mdn/structures/macros/index.html b/files/it/mdn/structures/macros/index.html index a09cf37e30..4e3a169a23 100644 --- a/files/it/mdn/structures/macros/index.html +++ b/files/it/mdn/structures/macros/index.html @@ -1,9 +1,10 @@ --- title: Using macros on MDN -slug: MDN/Guidelines/Macros +slug: MDN/Structures/Macros tags: - italino tags translation_of: MDN/Structures/Macros +original_slug: MDN/Guidelines/Macros ---
{{MDNSidebar}}

The Kuma platform on which MDN runs provides a powerful macro system, KumaScript, which makes it possible to do a wide variety of things automatically. This article provides information on how to invoke MDN's macros within articles.

diff --git a/files/it/mozilla/add-ons/webextensions/content_scripts/index.html b/files/it/mozilla/add-ons/webextensions/content_scripts/index.html index 4ee11316c5..109482f57e 100644 --- a/files/it/mozilla/add-ons/webextensions/content_scripts/index.html +++ b/files/it/mozilla/add-ons/webextensions/content_scripts/index.html @@ -1,9 +1,10 @@ --- title: Script di contenuto -slug: Mozilla/Add-ons/WebExtensions/Script_contenuto +slug: Mozilla/Add-ons/WebExtensions/Content_scripts tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +original_slug: Mozilla/Add-ons/WebExtensions/Script_contenuto ---
{{AddonSidebar}}
diff --git a/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html index c74fbd8473..94139ae0ae 100644 --- a/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ b/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -1,10 +1,11 @@ --- title: Cosa sono le estensioni? -slug: Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions tags: - Estensioni - WebExtension translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +original_slug: Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions ---
{{AddonSidebar}}
diff --git a/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html index fac1b12e36..88781a40c2 100644 --- a/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ b/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -1,10 +1,11 @@ --- title: La tua prima estensione -slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension tags: - Guida - WebExtension translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension ---
{{AddonSidebar}}
diff --git a/files/it/mozilla/firefox/experimental_features/index.html b/files/it/mozilla/firefox/experimental_features/index.html index 2cc528ad36..1ae49b3ab3 100644 --- a/files/it/mozilla/firefox/experimental_features/index.html +++ b/files/it/mozilla/firefox/experimental_features/index.html @@ -1,7 +1,8 @@ --- title: Funzionalità sperimentali in Firefox -slug: Mozilla/Firefox/Funzionalità_sperimentali +slug: Mozilla/Firefox/Experimental_features translation_of: Mozilla/Firefox/Experimental_features +original_slug: Mozilla/Firefox/Funzionalità_sperimentali ---
{{FirefoxSidebar}}
diff --git a/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html index 7062b6a3ae..8781c43c6c 100644 --- a/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html +++ b/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -1,11 +1,12 @@ --- title: Adattare le applicazioni XUL a Firefox 1.5 -slug: Adattare_le_applicazioni_XUL_a_Firefox_1.5 +slug: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 tags: - Estensioni - Tutte_le_categorie - XUL translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +original_slug: Adattare_le_applicazioni_XUL_a_Firefox_1.5 ---
{{FirefoxSidebar}}

 

diff --git a/files/it/mozilla/firefox/releases/1.5/index.html b/files/it/mozilla/firefox/releases/1.5/index.html index 6c47af6552..e7299f00b5 100644 --- a/files/it/mozilla/firefox/releases/1.5/index.html +++ b/files/it/mozilla/firefox/releases/1.5/index.html @@ -1,11 +1,12 @@ --- title: Firefox 1.5 per Sviluppatori -slug: Firefox_1.5_per_Sviluppatori +slug: Mozilla/Firefox/Releases/1.5 tags: - Da_unire - Sviluppo_Web - Tutte_le_categorie translation_of: Mozilla/Firefox/Releases/1.5 +original_slug: Firefox_1.5_per_Sviluppatori ---
{{FirefoxSidebar}}

Firefox 1.5

diff --git a/files/it/mozilla/firefox/releases/18/index.html b/files/it/mozilla/firefox/releases/18/index.html index 41af59d3c9..7a24df60c8 100644 --- a/files/it/mozilla/firefox/releases/18/index.html +++ b/files/it/mozilla/firefox/releases/18/index.html @@ -1,10 +1,11 @@ --- title: Firefox 18 per sviluppatori -slug: Firefox_18_for_developers +slug: Mozilla/Firefox/Releases/18 tags: - Firefox - Firefox 18 translation_of: Mozilla/Firefox/Releases/18 +original_slug: Firefox_18_for_developers ---
{{FirefoxSidebar}}

{{ draft() }}

diff --git a/files/it/mozilla/firefox/releases/2/index.html b/files/it/mozilla/firefox/releases/2/index.html index 4f8d46f2cf..6ebca8fe1e 100644 --- a/files/it/mozilla/firefox/releases/2/index.html +++ b/files/it/mozilla/firefox/releases/2/index.html @@ -1,10 +1,11 @@ --- title: Firefox 2.0 per Sviluppatori -slug: Firefox_2.0_per_Sviluppatori +slug: Mozilla/Firefox/Releases/2 tags: - Sviluppo_Web - Tutte_le_categorie translation_of: Mozilla/Firefox/Releases/2 +original_slug: Firefox_2.0_per_Sviluppatori ---
{{FirefoxSidebar}}

Nuove funzionalità per sviluppatori in Firefox 2

diff --git a/files/it/orphaned/learn/how_to_contribute/index.html b/files/it/orphaned/learn/how_to_contribute/index.html index bd3d90966a..763cf1224c 100644 --- a/files/it/orphaned/learn/how_to_contribute/index.html +++ b/files/it/orphaned/learn/how_to_contribute/index.html @@ -1,6 +1,6 @@ --- title: Come contribuire nell'area di MDN dedicata all'apprendimento -slug: Learn/Come_contribuire +slug: orphaned/Learn/How_to_contribute tags: - Apprendimento - Articolo @@ -13,6 +13,7 @@ tags: - insegnante - sviluppatore translation_of: Learn/How_to_contribute +original_slug: Learn/Come_contribuire ---

{{LearnSidebar}}

diff --git a/files/it/orphaned/learn/html/forms/html5_updates/index.html b/files/it/orphaned/learn/html/forms/html5_updates/index.html index 509b0a278f..c113527b94 100644 --- a/files/it/orphaned/learn/html/forms/html5_updates/index.html +++ b/files/it/orphaned/learn/html/forms/html5_updates/index.html @@ -1,7 +1,8 @@ --- title: Forms in HTML5 -slug: Web/HTML/Forms_in_HTML +slug: orphaned/Learn/HTML/Forms/HTML5_updates translation_of: Learn/HTML/Forms/HTML5_updates +original_slug: Web/HTML/Forms_in_HTML ---
{{gecko_minversion_header("2")}}
diff --git a/files/it/orphaned/mdn/community/index.html b/files/it/orphaned/mdn/community/index.html index 14a121baca..0e4959e3f7 100644 --- a/files/it/orphaned/mdn/community/index.html +++ b/files/it/orphaned/mdn/community/index.html @@ -1,7 +1,8 @@ --- title: Join the MDN community -slug: MDN/Community +slug: orphaned/MDN/Community translation_of: MDN/Community +original_slug: MDN/Community ---
{{MDNSidebar}}
diff --git a/files/it/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/it/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html index c6759dc479..94100b271a 100644 --- a/files/it/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ b/files/it/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -1,6 +1,6 @@ --- title: Come creare un account su MDN -slug: MDN/Contribute/Howto/Create_an_MDN_account +slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account tags: - Documentazione - Guide @@ -8,6 +8,7 @@ tags: - Principianti - Sviluppatori translation_of: MDN/Contribute/Howto/Create_an_MDN_account +original_slug: MDN/Contribute/Howto/Create_an_MDN_account ---
{{MDNSidebar}}
diff --git a/files/it/orphaned/mdn/contribute/howto/delete_my_profile/index.html b/files/it/orphaned/mdn/contribute/howto/delete_my_profile/index.html index 182bc6a241..93badea1a1 100644 --- a/files/it/orphaned/mdn/contribute/howto/delete_my_profile/index.html +++ b/files/it/orphaned/mdn/contribute/howto/delete_my_profile/index.html @@ -1,7 +1,8 @@ --- title: Come rimuovere il mio profilo -slug: MDN/Contribute/Howto/Delete_my_profile +slug: orphaned/MDN/Contribute/Howto/Delete_my_profile translation_of: MDN/Contribute/Howto/Delete_my_profile +original_slug: MDN/Contribute/Howto/Delete_my_profile ---
{{MDNSidebar}}
diff --git a/files/it/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/it/orphaned/mdn/contribute/howto/do_a_technical_review/index.html index 31f0885a09..c17824a1c9 100644 --- a/files/it/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ b/files/it/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -1,7 +1,8 @@ --- title: Come effettuare una revisione tecnica -slug: MDN/Contribute/Howto/Do_a_technical_review +slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review translation_of: MDN/Contribute/Howto/Do_a_technical_review +original_slug: MDN/Contribute/Howto/Do_a_technical_review ---
{{MDNSidebar}}

La revisione tecnica consiste nel controllo dell'accuratezza tecnica e della completezza di un articolo e, se necessario, nella sua correzione. Se chi scrive un articolo desidera che qualcun altro verifichi il contenuto tecnico di un articolo, può segnalarlo attivando l'opzione "Revisione tecnica" durante la modifica di una pagina. A volte chi scrive contatta un ingegnere specifico affinché effettui la revisione tecnica, ma chiunque abbia esperienza tecnica può farlo.

Questo articolo spiega come effettuare una revisione tecnica, permettendo così di mantenere corretto il contenuto di MDN.

diff --git a/files/it/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/it/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html index 7bfc4bf759..afbc9a9654 100644 --- a/files/it/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ b/files/it/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -1,7 +1,8 @@ --- title: Come effettuare una revisione editoriale -slug: MDN/Contribute/Howto/Do_an_editorial_review +slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review translation_of: MDN/Contribute/Howto/Do_an_editorial_review +original_slug: MDN/Contribute/Howto/Do_an_editorial_review ---
{{MDNSidebar}}

Una revisione editoriale consiste nel sistemare errori di digitazione, grammatica, utilizzo, ortografia in un articolo. Non tutti i collaboratori sono traduttori esperti, ma data la loro conoscenza hanno scritto articoli estremamente utili, che necessitano di revisioni e correzioni; questo è lo scopo della revisione editoriale.

Questo articolo descrive come eseguire una revisione editoriale, così da accertarsi che il contenuto di MDN sia accurato.

diff --git a/files/it/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/it/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html index ba8df38979..4516b58115 100644 --- a/files/it/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ b/files/it/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -1,6 +1,6 @@ --- title: Come impostare il riassunto di una pagina -slug: MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina +slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page tags: - Community - Documentazione @@ -8,6 +8,7 @@ tags: - MDN - Riassunto Pagina translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +original_slug: MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina ---
{{MDNSidebar}}

Il riassunto di una pagina di MDN è definito in modo da essere utilizzabile in vari ambiti, tra cui i risultati dei motori di ricerca, in altre pagine di MDN, come ad esempio nelle landing pages relative a diversi argomenti, e nei tooltips. Deve essere quindi un testo che conservi il proprio significato sia nel contesto della propria pagina, sia quando si trova in contesti differenti, privato dei contenuti della pagina di origine.

Un riassunto può essere identificato esplicitamente all'interno della pagina. In caso contrario, si utilizza in genere la prima frase, il che non sempre si rivela la scelta più adatta per raggiungere lo scopo prefissato.

diff --git a/files/it/orphaned/mdn/editor/index.html b/files/it/orphaned/mdn/editor/index.html index 856ef1fc2d..cafec4c9df 100644 --- a/files/it/orphaned/mdn/editor/index.html +++ b/files/it/orphaned/mdn/editor/index.html @@ -1,7 +1,8 @@ --- title: Guida all'editor di MDN -slug: MDN/Editor +slug: orphaned/MDN/Editor translation_of: MDN/Editor +original_slug: MDN/Editor ---
{{MDNSidebar}}

L'editor WYSIWYG (what-you-see-is-what-you-get, ciò che vedi è ciò che ottieni) messo a disposizione dal wiki del Mozilla Developer Network semplifica la creazione di nuovi contenuti. La guida all'editor di MDN fornisce alcune informazioni sull'utilizzo dell'editor e su alcune caratteristiche utili che possono migliorare la tua produttività.

La guida di stile di MDN fornisce alcune informazioni sulla formattazione e lo stile da applicare ai contenuti, comprese le regole di grammatica che preferiamo vengano utilizzate.

diff --git a/files/it/orphaned/tools/add-ons/dom_inspector/index.html b/files/it/orphaned/tools/add-ons/dom_inspector/index.html index d6566854ca..bf4520fb3b 100644 --- a/files/it/orphaned/tools/add-ons/dom_inspector/index.html +++ b/files/it/orphaned/tools/add-ons/dom_inspector/index.html @@ -1,18 +1,19 @@ --- title: DOM Inspector -slug: DOM_Inspector +slug: orphaned/Tools/Add-ons/DOM_Inspector tags: - - 'DOM:Strumenti' + - DOM:Strumenti - Estensioni - - 'Estensioni:Strumenti' + - Estensioni:Strumenti - Strumenti - Sviluppo_Web - - 'Sviluppo_Web:Strumenti' - - 'Temi:Strumenti' + - Sviluppo_Web:Strumenti + - Temi:Strumenti - Tutte_le_categorie - XUL - - 'XUL:Strumenti' + - XUL:Strumenti translation_of: Tools/Add-ons/DOM_Inspector +original_slug: DOM_Inspector ---

Il DOM Inspector (conosciuto anche con l'acronimo DOMi) è un tool di Mozilla usato per ispezionare, visualizzare, modificare il Modello a Oggetti di un Documento (DOM - Document Object Model), normalmente una pagina web o una finestra XUL. diff --git a/files/it/orphaned/tools/add-ons/index.html b/files/it/orphaned/tools/add-ons/index.html index 53b7924169..416e88484d 100644 --- a/files/it/orphaned/tools/add-ons/index.html +++ b/files/it/orphaned/tools/add-ons/index.html @@ -1,12 +1,13 @@ --- title: Add-ons -slug: Tools/Add-ons +slug: orphaned/Tools/Add-ons tags: - NeedsTranslation - TopicStub - Web Development - - 'Web Development:Tools' + - Web Development:Tools translation_of: Tools/Add-ons +original_slug: Tools/Add-ons ---

Developer tools that are not built into Firefox, but ship as separate add-ons.

diff --git a/files/it/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/it/orphaned/web/javascript/reference/global_objects/array/prototype/index.html index d4989792a8..5fe2af7f43 100644 --- a/files/it/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ b/files/it/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -1,7 +1,8 @@ --- title: Array.prototype -slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---
{{JSRef}}
diff --git a/files/it/tools/performance/index.html b/files/it/tools/performance/index.html index 30117d7c02..800e6b4835 100644 --- a/files/it/tools/performance/index.html +++ b/files/it/tools/performance/index.html @@ -1,7 +1,8 @@ --- title: Prestazioni -slug: Tools/Prestazioni +slug: Tools/Performance translation_of: Tools/Performance +original_slug: Tools/Prestazioni ---

Lo strumento per l'analisi delle prestazioni ti fornisce una panoramica della risposta generale del tuo sito, della prestazione del layout e del Javascript. Con lo strumento per l'analisi delle prestazioni crei una registrazione, o tracci un profilo, del tuo sito in un periodo di tempo. Lo strumento ti mostra poi un resoconto delle cose che il tuo browser stava facendo al fine di rappresentare il tuo sito nel profilo, ed un grafico del frame rate nel profilo.

diff --git a/files/it/tools/responsive_design_mode/index.html b/files/it/tools/responsive_design_mode/index.html index 09fd2cb08c..3dd8c822ed 100644 --- a/files/it/tools/responsive_design_mode/index.html +++ b/files/it/tools/responsive_design_mode/index.html @@ -1,6 +1,6 @@ --- title: Visualizzazione Flessibile -slug: Tools/Visualizzazione_Flessibile +slug: Tools/Responsive_Design_Mode tags: - Design - Firefox @@ -11,6 +11,7 @@ tags: - Sviluppo Web - responsive translation_of: Tools/Responsive_Design_Mode +original_slug: Tools/Visualizzazione_Flessibile ---

Le interfacce web responsive si adattano a diverse dimensioni di schermo permettendo una presentazione fruibile su dispositivi di tipo diverso, come smartphone o tablet. La Visualizzazione Flessibile permette di visionare facilmente come il proprio sito o applicazione web risulterà su schermi di diverse dimensioni.

diff --git a/files/it/web/api/canvas_api/index.html b/files/it/web/api/canvas_api/index.html index dcded63973..17a61b52e3 100644 --- a/files/it/web/api/canvas_api/index.html +++ b/files/it/web/api/canvas_api/index.html @@ -1,7 +1,8 @@ --- title: Canvas -slug: Web/HTML/Canvas +slug: Web/API/Canvas_API translation_of: Web/API/Canvas_API +original_slug: Web/HTML/Canvas ---

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.

diff --git a/files/it/web/api/canvas_api/tutorial/index.html b/files/it/web/api/canvas_api/tutorial/index.html index 577a620cb7..9e3fe00f2e 100644 --- a/files/it/web/api/canvas_api/tutorial/index.html +++ b/files/it/web/api/canvas_api/tutorial/index.html @@ -1,10 +1,11 @@ --- title: Tutorial sulle Canvas -slug: Tutorial_sulle_Canvas +slug: Web/API/Canvas_API/Tutorial tags: - Canvas tutorial - - 'HTML:Canvas' + - HTML:Canvas translation_of: Web/API/Canvas_API/Tutorial +original_slug: Tutorial_sulle_Canvas ---

<canvas> è un nuovo elemento HTML che può essere utilizzato per disegnare elementi grafici utilizzando lo scripting (di solito JavaScript). Per esempio può essere utilizzato per disegnare grafici, fare composizioni di fotografie o semplici (e non così semplici) animazioni. L'immagine a destra mostra alcuni esempi di implementazioni di <canvas> che vedremo più avanti in questo tutorial.

diff --git a/files/it/web/api/document_object_model/introduction/index.html b/files/it/web/api/document_object_model/introduction/index.html index 328caa0c5c..a3495f7665 100644 --- a/files/it/web/api/document_object_model/introduction/index.html +++ b/files/it/web/api/document_object_model/introduction/index.html @@ -1,6 +1,6 @@ --- title: Introduzione al DOM -slug: Web/API/Document_Object_Model/Introduzione +slug: Web/API/Document_Object_Model/Introduction tags: - Beginner - DOM @@ -10,6 +10,7 @@ tags: - Principianti - Tutorial translation_of: Web/API/Document_Object_Model/Introduction +original_slug: Web/API/Document_Object_Model/Introduzione ---

Il Document Object Model (DOM) è la rappresentazione degli oggetti che comprendono la struttura e il contenuto di un documento sul web. In questa guida, introdurremo brevemente il DOM. Vedremo come il DOM rappresenta un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.

diff --git a/files/it/web/api/documentorshadowroot/stylesheets/index.html b/files/it/web/api/documentorshadowroot/stylesheets/index.html index 3aa006a94f..95f590715d 100644 --- a/files/it/web/api/documentorshadowroot/stylesheets/index.html +++ b/files/it/web/api/documentorshadowroot/stylesheets/index.html @@ -1,6 +1,6 @@ --- title: document.styleSheets -slug: Web/API/Document/styleSheets +slug: Web/API/DocumentOrShadowRoot/styleSheets tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/DocumentOrShadowRoot/styleSheets translation_of_original: Web/API/Document/styleSheets +original_slug: Web/API/Document/styleSheets ---

{{APIRef("DOM")}}

diff --git a/files/it/web/api/eventtarget/addeventlistener/index.html b/files/it/web/api/eventtarget/addeventlistener/index.html index 6608e69bd3..36aaeb792f 100644 --- a/files/it/web/api/eventtarget/addeventlistener/index.html +++ b/files/it/web/api/eventtarget/addeventlistener/index.html @@ -1,6 +1,6 @@ --- title: EventTarget.addEventListener() -slug: Web/API/Element/addEventListener +slug: Web/API/EventTarget/addEventListener tags: - API - DOM @@ -16,6 +16,7 @@ tags: - metodo - mselementresize translation_of: Web/API/EventTarget/addEventListener +original_slug: Web/API/Element/addEventListener ---
{{APIRef("DOM Events")}}
diff --git a/files/it/web/api/geolocation_api/index.html b/files/it/web/api/geolocation_api/index.html index 303cb4a8bb..64fb909e34 100644 --- a/files/it/web/api/geolocation_api/index.html +++ b/files/it/web/api/geolocation_api/index.html @@ -1,7 +1,8 @@ --- title: Using geolocation -slug: Web/API/Geolocation/Using_geolocation +slug: Web/API/Geolocation_API translation_of: Web/API/Geolocation_API +original_slug: Web/API/Geolocation/Using_geolocation ---

{{securecontext_header}}{{APIRef("Geolocation API")}}

diff --git a/files/it/web/api/htmlhyperlinkelementutils/index.html b/files/it/web/api/htmlhyperlinkelementutils/index.html index 05cc01aa9b..e62eda611d 100644 --- a/files/it/web/api/htmlhyperlinkelementutils/index.html +++ b/files/it/web/api/htmlhyperlinkelementutils/index.html @@ -1,7 +1,8 @@ --- title: URLUtils -slug: Web/API/URLUtils +slug: Web/API/HTMLHyperlinkElementUtils translation_of: Web/API/HTMLHyperlinkElementUtils +original_slug: Web/API/URLUtils ---

{{ApiRef("URL API")}}{{SeeCompatTable}}

diff --git a/files/it/web/api/keyboardevent/charcode/index.html b/files/it/web/api/keyboardevent/charcode/index.html index fb785e722e..4dbc90bf17 100644 --- a/files/it/web/api/keyboardevent/charcode/index.html +++ b/files/it/web/api/keyboardevent/charcode/index.html @@ -1,12 +1,13 @@ --- title: event.charCode -slug: Web/API/Event/charCode +slug: Web/API/KeyboardEvent/charCode tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/KeyboardEvent/charCode +original_slug: Web/API/Event/charCode ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/keyboardevent/keycode/index.html b/files/it/web/api/keyboardevent/keycode/index.html index 40dac8122d..8c212fac97 100644 --- a/files/it/web/api/keyboardevent/keycode/index.html +++ b/files/it/web/api/keyboardevent/keycode/index.html @@ -1,6 +1,6 @@ --- title: event.keyCode -slug: Web/API/Event/keyCode +slug: Web/API/KeyboardEvent/keyCode tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/KeyboardEvent/keyCode translation_of_original: Web/API/event.keyCode +original_slug: Web/API/Event/keyCode ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/keyboardevent/which/index.html b/files/it/web/api/keyboardevent/which/index.html index 0ab544b60c..4d5d567468 100644 --- a/files/it/web/api/keyboardevent/which/index.html +++ b/files/it/web/api/keyboardevent/which/index.html @@ -1,12 +1,13 @@ --- title: event.which -slug: Web/API/Event/which +slug: Web/API/KeyboardEvent/which tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/KeyboardEvent/which +original_slug: Web/API/Event/which ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/mouseevent/altkey/index.html b/files/it/web/api/mouseevent/altkey/index.html index 02412cfe6c..b282dcb2ee 100644 --- a/files/it/web/api/mouseevent/altkey/index.html +++ b/files/it/web/api/mouseevent/altkey/index.html @@ -1,6 +1,6 @@ --- title: event.altKey -slug: Web/API/Event/altKey +slug: Web/API/MouseEvent/altKey tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/altKey translation_of_original: Web/API/event.altKey +original_slug: Web/API/Event/altKey ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/mouseevent/button/index.html b/files/it/web/api/mouseevent/button/index.html index 7c1f181858..ff3d67d702 100644 --- a/files/it/web/api/mouseevent/button/index.html +++ b/files/it/web/api/mouseevent/button/index.html @@ -1,6 +1,6 @@ --- title: event.button -slug: Web/API/Event/button +slug: Web/API/MouseEvent/button tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/button translation_of_original: Web/API/event.button +original_slug: Web/API/Event/button ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/mouseevent/ctrlkey/index.html b/files/it/web/api/mouseevent/ctrlkey/index.html index 195374d673..c4ce9255e8 100644 --- a/files/it/web/api/mouseevent/ctrlkey/index.html +++ b/files/it/web/api/mouseevent/ctrlkey/index.html @@ -1,6 +1,6 @@ --- title: event.ctrlKey -slug: Web/API/Event/ctrlKey +slug: Web/API/MouseEvent/ctrlKey tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/ctrlKey translation_of_original: Web/API/event.ctrlKey +original_slug: Web/API/Event/ctrlKey ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/mouseevent/metakey/index.html b/files/it/web/api/mouseevent/metakey/index.html index e40fa17379..b97904a5d4 100644 --- a/files/it/web/api/mouseevent/metakey/index.html +++ b/files/it/web/api/mouseevent/metakey/index.html @@ -1,6 +1,6 @@ --- title: event.metaKey -slug: Web/API/Event/metaKey +slug: Web/API/MouseEvent/metaKey tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/metaKey translation_of_original: Web/API/event.metaKey +original_slug: Web/API/Event/metaKey ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/mouseevent/shiftkey/index.html b/files/it/web/api/mouseevent/shiftkey/index.html index 17a581937f..3365619bf1 100644 --- a/files/it/web/api/mouseevent/shiftkey/index.html +++ b/files/it/web/api/mouseevent/shiftkey/index.html @@ -1,6 +1,6 @@ --- title: event.shiftKey -slug: Web/API/Event/shiftKey +slug: Web/API/MouseEvent/shiftKey tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/shiftKey translation_of_original: Web/API/event.shiftKey +original_slug: Web/API/Event/shiftKey ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/node/childnodes/index.html b/files/it/web/api/node/childnodes/index.html index f56bcc4380..1db83ea87c 100644 --- a/files/it/web/api/node/childnodes/index.html +++ b/files/it/web/api/node/childnodes/index.html @@ -1,7 +1,8 @@ --- title: Node.childNodes -slug: Web/API/Element/childNodes +slug: Web/API/Node/childNodes translation_of: Web/API/Node/childNodes +original_slug: Web/API/Element/childNodes ---
{{APIRef("DOM")}}
diff --git a/files/it/web/api/node/firstchild/index.html b/files/it/web/api/node/firstchild/index.html index b5052f5dfe..b99b694dbe 100644 --- a/files/it/web/api/node/firstchild/index.html +++ b/files/it/web/api/node/firstchild/index.html @@ -1,6 +1,6 @@ --- title: Node.firstChild -slug: Web/API/Element/firstChild +slug: Web/API/Node/firstChild tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Proprietà - Referenza translation_of: Web/API/Node/firstChild +original_slug: Web/API/Element/firstChild ---
{{APIRef("DOM")}}
diff --git a/files/it/web/api/node/namespaceuri/index.html b/files/it/web/api/node/namespaceuri/index.html index fc29e0f121..74e1f8092f 100644 --- a/files/it/web/api/node/namespaceuri/index.html +++ b/files/it/web/api/node/namespaceuri/index.html @@ -1,8 +1,9 @@ --- title: document.namespaceURI -slug: Web/API/Document/namespaceURI +slug: Web/API/Node/namespaceURI translation_of: Web/API/Node/namespaceURI translation_of_original: Web/API/Document/namespaceURI +original_slug: Web/API/Document/namespaceURI ---
{{APIRef("DOM")}}
diff --git a/files/it/web/api/node/nodename/index.html b/files/it/web/api/node/nodename/index.html index 2030226b37..2738910a45 100644 --- a/files/it/web/api/node/nodename/index.html +++ b/files/it/web/api/node/nodename/index.html @@ -1,6 +1,6 @@ --- title: Node.nodeName -slug: Web/API/Element/nodeName +slug: Web/API/Node/nodeName tags: - API - DOM @@ -10,6 +10,7 @@ tags: - Property - Read-only translation_of: Web/API/Node/nodeName +original_slug: Web/API/Element/nodeName ---
{{APIRef("DOM")}}
diff --git a/files/it/web/api/node/nodetype/index.html b/files/it/web/api/node/nodetype/index.html index fba395288a..c484034dc7 100644 --- a/files/it/web/api/node/nodetype/index.html +++ b/files/it/web/api/node/nodetype/index.html @@ -1,12 +1,13 @@ --- title: Node.nodeType -slug: Web/API/Element/nodeType +slug: Web/API/Node/nodeType tags: - API - DOM - Proprietà - Referenza translation_of: Web/API/Node/nodeType +original_slug: Web/API/Element/nodeType ---
{{APIRef("DOM")}}
diff --git a/files/it/web/api/node/nodevalue/index.html b/files/it/web/api/node/nodevalue/index.html index 547ba77939..6eef21baad 100644 --- a/files/it/web/api/node/nodevalue/index.html +++ b/files/it/web/api/node/nodevalue/index.html @@ -1,12 +1,13 @@ --- title: element.nodeValue -slug: Web/API/Element/nodeValue +slug: Web/API/Node/nodeValue tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/Node/nodeValue +original_slug: Web/API/Element/nodeValue ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/node/parentnode/index.html b/files/it/web/api/node/parentnode/index.html index 03e89aa432..610cc3e5e4 100644 --- a/files/it/web/api/node/parentnode/index.html +++ b/files/it/web/api/node/parentnode/index.html @@ -1,12 +1,13 @@ --- title: Node.parentNode -slug: Web/API/Element/parentNode +slug: Web/API/Node/parentNode tags: - API - DOM - Gecko - Proprietà translation_of: Web/API/Node/parentNode +original_slug: Web/API/Element/parentNode ---
{{APIRef("DOM")}}
diff --git a/files/it/web/api/node/prefix/index.html b/files/it/web/api/node/prefix/index.html index 3371ff1f8d..fd7646c066 100644 --- a/files/it/web/api/node/prefix/index.html +++ b/files/it/web/api/node/prefix/index.html @@ -1,12 +1,13 @@ --- title: element.prefix -slug: Web/API/Element/prefix +slug: Web/API/Node/prefix tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/Node/prefix +original_slug: Web/API/Element/prefix ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/node/textcontent/index.html b/files/it/web/api/node/textcontent/index.html index 137c76a3eb..bd2186323e 100644 --- a/files/it/web/api/node/textcontent/index.html +++ b/files/it/web/api/node/textcontent/index.html @@ -1,6 +1,6 @@ --- title: Node.textContent -slug: Web/API/Element/textContent +slug: Web/API/Node/textContent tags: - API - Command API @@ -8,6 +8,7 @@ tags: - Proprietà - Referenza translation_of: Web/API/Node/textContent +original_slug: Web/API/Element/textContent ---
{{APIRef("DOM")}}
diff --git a/files/it/web/api/notification/dir/index.html b/files/it/web/api/notification/dir/index.html index c1e16410d6..b2a3a3ec70 100644 --- a/files/it/web/api/notification/dir/index.html +++ b/files/it/web/api/notification/dir/index.html @@ -1,7 +1,8 @@ --- title: Notification.dir -slug: Web/API/notifiche/dir +slug: Web/API/Notification/dir translation_of: Web/API/Notification/dir +original_slug: Web/API/notifiche/dir ---

{{APIRef("Web Notifications")}}

diff --git a/files/it/web/api/notification/index.html b/files/it/web/api/notification/index.html index ae8300aa01..d734613849 100644 --- a/files/it/web/api/notification/index.html +++ b/files/it/web/api/notification/index.html @@ -1,7 +1,8 @@ --- title: Notifiche -slug: Web/API/notifiche +slug: Web/API/Notification translation_of: Web/API/Notification +original_slug: Web/API/notifiche ---

{{APIRef("Web Notifications")}}

diff --git a/files/it/web/api/plugin/index.html b/files/it/web/api/plugin/index.html index b6c23742d2..b160be06fc 100644 --- a/files/it/web/api/plugin/index.html +++ b/files/it/web/api/plugin/index.html @@ -1,11 +1,12 @@ --- title: Plug-in -slug: Plug-in +slug: Web/API/Plugin tags: - Add-ons - Plugins - Tutte_le_categorie translation_of: Web/API/Plugin +original_slug: Plug-in ---

 

diff --git a/files/it/web/api/uievent/ischar/index.html b/files/it/web/api/uievent/ischar/index.html index ae1edd3975..6440856995 100644 --- a/files/it/web/api/uievent/ischar/index.html +++ b/files/it/web/api/uievent/ischar/index.html @@ -1,12 +1,13 @@ --- title: event.isChar -slug: Web/API/Event/isChar +slug: Web/API/UIEvent/isChar tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/isChar +original_slug: Web/API/Event/isChar ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/uievent/layerx/index.html b/files/it/web/api/uievent/layerx/index.html index 80dc20b35b..7ee4d10d26 100644 --- a/files/it/web/api/uievent/layerx/index.html +++ b/files/it/web/api/uievent/layerx/index.html @@ -1,12 +1,13 @@ --- title: event.layerX -slug: Web/API/Event/layerX +slug: Web/API/UIEvent/layerX tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/layerX +original_slug: Web/API/Event/layerX ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/uievent/layery/index.html b/files/it/web/api/uievent/layery/index.html index 9bb4f99947..38ae5ba878 100644 --- a/files/it/web/api/uievent/layery/index.html +++ b/files/it/web/api/uievent/layery/index.html @@ -1,12 +1,13 @@ --- title: event.layerY -slug: Web/API/Event/layerY +slug: Web/API/UIEvent/layerY tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/layerY +original_slug: Web/API/Event/layerY ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/uievent/pagex/index.html b/files/it/web/api/uievent/pagex/index.html index 90cf1beaac..6c2ad1573e 100644 --- a/files/it/web/api/uievent/pagex/index.html +++ b/files/it/web/api/uievent/pagex/index.html @@ -1,12 +1,13 @@ --- title: event.pageX -slug: Web/API/Event/pageX +slug: Web/API/UIEvent/pageX tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/pageX +original_slug: Web/API/Event/pageX ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/uievent/pagey/index.html b/files/it/web/api/uievent/pagey/index.html index d0d87573cc..e1a2637dcd 100644 --- a/files/it/web/api/uievent/pagey/index.html +++ b/files/it/web/api/uievent/pagey/index.html @@ -1,12 +1,13 @@ --- title: event.pageY -slug: Web/API/Event/pageY +slug: Web/API/UIEvent/pageY tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/pageY +original_slug: Web/API/Event/pageY ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/uievent/view/index.html b/files/it/web/api/uievent/view/index.html index 00d9f88004..c8de66c283 100644 --- a/files/it/web/api/uievent/view/index.html +++ b/files/it/web/api/uievent/view/index.html @@ -1,12 +1,13 @@ --- title: event.view -slug: Web/API/Event/view +slug: Web/API/UIEvent/view tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/view +original_slug: Web/API/Event/view ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/websockets_api/index.html b/files/it/web/api/websockets_api/index.html index c09953a49e..346f32119c 100644 --- a/files/it/web/api/websockets_api/index.html +++ b/files/it/web/api/websockets_api/index.html @@ -1,10 +1,11 @@ --- title: WebSockets -slug: WebSockets +slug: Web/API/WebSockets_API tags: - References - WebSockets translation_of: Web/API/WebSockets_API +original_slug: WebSockets ---

I WebSockets sono una tecnologia avanzata che rende possibile aprire una sessione di comunicazione interattiva tra il browser dell'utente e un server. Con questa API si possono mandare messaggi al server e ricevere risposte event-driven senza doverle richiedere al server.

diff --git a/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html index a146730537..c7c45a3ecc 100644 --- a/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html +++ b/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -1,9 +1,10 @@ --- title: Writing WebSocket client applications -slug: WebSockets/Writing_WebSocket_client_applications +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications tags: - WebSocket translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +original_slug: WebSockets/Writing_WebSocket_client_applications ---

WebSockets è una tecnologia, basata sul protocollo ws, che rende possibile stabilire una connessione continua tra un client e un server. Un client websocket può essere il browser dell'utente, ma il protocollo è indipendente dalla piattaforma, così com'è indipendente il protocollo http.

diff --git a/files/it/web/api/window/domcontentloaded_event/index.html b/files/it/web/api/window/domcontentloaded_event/index.html index 9b2cf7467e..1c25d3d6c5 100644 --- a/files/it/web/api/window/domcontentloaded_event/index.html +++ b/files/it/web/api/window/domcontentloaded_event/index.html @@ -1,12 +1,13 @@ --- title: DOMContentLoaded event -slug: Web/Events/DOMContentLoaded +slug: Web/API/Window/DOMContentLoaded_event tags: - Evento - Referenza - Web - eventi translation_of: Web/API/Window/DOMContentLoaded_event +original_slug: Web/Events/DOMContentLoaded ---
{{APIRef}}
diff --git a/files/it/web/api/window/find/index.html b/files/it/web/api/window/find/index.html index ebebfa374d..77a6a49092 100644 --- a/files/it/web/api/window/find/index.html +++ b/files/it/web/api/window/find/index.html @@ -1,12 +1,13 @@ --- title: window.find -slug: window.find +slug: Web/API/Window/find tags: - DOM - DOM0 - Gecko - Gecko DOM Reference translation_of: Web/API/Window/find +original_slug: window.find ---

{{ ApiRef() }}

Sommario

diff --git a/files/it/web/api/window/load_event/index.html b/files/it/web/api/window/load_event/index.html index 2939f32c27..145b79e867 100644 --- a/files/it/web/api/window/load_event/index.html +++ b/files/it/web/api/window/load_event/index.html @@ -1,10 +1,11 @@ --- title: load -slug: Web/Events/load +slug: Web/API/Window/load_event tags: - CompatibilitàBrowser - Evento translation_of: Web/API/Window/load_event +original_slug: Web/Events/load ---

L'evento load si attiva quando una risorsa e le sue risorse dipendenti hanno completato il caricamento.

diff --git a/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html index 63b0682983..952361f23b 100644 --- a/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html +++ b/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -1,7 +1,8 @@ --- title: WindowTimers.clearInterval() -slug: Web/API/WindowTimers/clearInterval +slug: Web/API/WindowOrWorkerGlobalScope/clearInterval translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +original_slug: Web/API/WindowTimers/clearInterval ---
{{APIRef("HTML DOM")}}
diff --git a/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html index 4f55ac07ff..ced11585b7 100644 --- a/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -1,7 +1,8 @@ --- title: Usare XMLHttpRequest -slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +original_slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest ---

Per inviare una richiesta HTTP, crea  un oggetto {{domxref("XMLHttpRequest")}}, apri un URL, ed invia la richiesta. Dopo che la transazione è completata, l'oggetto conterrà informazioni utili come il testo di risposta e lo stato HTTP. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto XMLHttpRequest.

diff --git a/files/it/web/css/child_combinator/index.html b/files/it/web/css/child_combinator/index.html index cf2903dbc9..0a7db4d019 100644 --- a/files/it/web/css/child_combinator/index.html +++ b/files/it/web/css/child_combinator/index.html @@ -1,10 +1,11 @@ --- title: Selettore di Figli Diretti -slug: Web/CSS/selettore_figli_diretti +slug: Web/CSS/Child_combinator tags: - compinatori css - selettore di figli diretti translation_of: Web/CSS/Child_combinator +original_slug: Web/CSS/selettore_figli_diretti ---
{{CSSRef("Selectors")}}
diff --git a/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 772fa80e13..d475f40ea1 100644 --- a/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,12 +1,13 @@ --- title: Usare valori URL per la proprietà cursor -slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - CSS_2.1 - Sviluppo_Web - Tutte_le_categorie translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor ---

 

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supportano l'uso di valori URL per la proprietà cursor CSS2. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..

diff --git a/files/it/web/css/css_columns/using_multi-column_layouts/index.html b/files/it/web/css/css_columns/using_multi-column_layouts/index.html index 7b92b713a0..413605bf13 100644 --- a/files/it/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/it/web/css/css_columns/using_multi-column_layouts/index.html @@ -1,11 +1,12 @@ --- title: Le Colonne nei CSS3 -slug: Le_Colonne_nei_CSS3 +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts tags: - CSS - CSS_3 - Tutte_le_categorie translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: Le_Colonne_nei_CSS3 ---

diff --git a/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index e03a676320..8908feb99c 100644 --- a/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,8 +1,9 @@ --- title: Using CSS flexible boxes -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---
{{CSSRef}}
diff --git a/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html index 0825377b03..0a8f6374a2 100644 --- a/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html +++ b/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -1,10 +1,11 @@ --- title: Indentazione corretta delle liste -slug: Indentazione_corretta_delle_liste +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation tags: - CSS - Tutte_le_categorie translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Indentazione_corretta_delle_liste ---

 

diff --git a/files/it/web/css/font-language-override/index.html b/files/it/web/css/font-language-override/index.html index 069e77cfe1..769d7404ce 100644 --- a/files/it/web/css/font-language-override/index.html +++ b/files/it/web/css/font-language-override/index.html @@ -1,7 +1,8 @@ --- title: '-moz-font-language-override' -slug: Web/CSS/-moz-font-language-override +slug: Web/CSS/font-language-override translation_of: Web/CSS/font-language-override translation_of_original: Web/CSS/-moz-font-language-override +original_slug: Web/CSS/-moz-font-language-override ---

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/it/web/css/layout_cookbook/index.html b/files/it/web/css/layout_cookbook/index.html index bbdee7472e..da70d9d7b4 100644 --- a/files/it/web/css/layout_cookbook/index.html +++ b/files/it/web/css/layout_cookbook/index.html @@ -1,7 +1,8 @@ --- title: Ricette per layout in CSS -slug: Web/CSS/Ricette_layout +slug: Web/CSS/Layout_cookbook translation_of: Web/CSS/Layout_cookbook +original_slug: Web/CSS/Ricette_layout ---
{{CSSRef}}
diff --git a/files/it/web/css/reference/index.html b/files/it/web/css/reference/index.html index c97a962ac6..466cff2f4c 100644 --- a/files/it/web/css/reference/index.html +++ b/files/it/web/css/reference/index.html @@ -1,12 +1,13 @@ --- title: Guida di riferimento ai CSS -slug: Web/CSS/Guida_di_riferimento_ai_CSS +slug: Web/CSS/Reference tags: - CSS - Overview - Reference - - 'l10n:priority' + - l10n:priority translation_of: Web/CSS/Reference +original_slug: Web/CSS/Guida_di_riferimento_ai_CSS ---
{{CSSRef}}
diff --git a/files/it/web/demos_of_open_web_technologies/index.html b/files/it/web/demos_of_open_web_technologies/index.html index 2244c73297..4ac0b50019 100644 --- a/files/it/web/demos_of_open_web_technologies/index.html +++ b/files/it/web/demos_of_open_web_technologies/index.html @@ -1,7 +1,8 @@ --- title: Esempi di tecnologie web open -slug: Web/Esempi_di_tecnologie_web_open +slug: Web/Demos_of_open_web_technologies translation_of: Web/Demos_of_open_web_technologies +original_slug: Web/Esempi_di_tecnologie_web_open ---

Mozilla supporta un'ampia varietà di emozionanti tecnologie web open, e noi ne incoraggiamo l'uso. In questa pagina sono contenuti collegamenti a degli interessanti esempi di queste tecnologie.

diff --git a/files/it/web/guide/ajax/getting_started/index.html b/files/it/web/guide/ajax/getting_started/index.html index f473f64d1e..955354bbc3 100644 --- a/files/it/web/guide/ajax/getting_started/index.html +++ b/files/it/web/guide/ajax/getting_started/index.html @@ -1,10 +1,11 @@ --- title: Iniziare -slug: Web/Guide/AJAX/Iniziare +slug: Web/Guide/AJAX/Getting_Started tags: - AJAX - Tutte_le_categorie translation_of: Web/Guide/AJAX/Getting_Started +original_slug: Web/Guide/AJAX/Iniziare ---

 

diff --git a/files/it/web/guide/html/content_categories/index.html b/files/it/web/guide/html/content_categories/index.html index 94eae32320..4081ebbe76 100644 --- a/files/it/web/guide/html/content_categories/index.html +++ b/files/it/web/guide/html/content_categories/index.html @@ -1,7 +1,8 @@ --- title: Categorie di contenuto -slug: Web/Guide/HTML/Categorie_di_contenuto +slug: Web/Guide/HTML/Content_categories translation_of: Web/Guide/HTML/Content_categories +original_slug: Web/Guide/HTML/Categorie_di_contenuto ---

Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. Queste regole sono raggruppate in modelli di contenuto comuni a diversi elementi. Ogni elemento HTML appartiene a nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole che devono essere seguite in un documento conforme HTML.

diff --git a/files/it/web/guide/html/html5/index.html b/files/it/web/guide/html/html5/index.html index be6fc91a82..6be662d4c2 100644 --- a/files/it/web/guide/html/html5/index.html +++ b/files/it/web/guide/html/html5/index.html @@ -1,7 +1,8 @@ --- title: HTML5 -slug: Web/HTML/HTML5 +slug: Web/Guide/HTML/HTML5 translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/HTML/HTML5 ---

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

diff --git a/files/it/web/guide/html/html5/introduction_to_html5/index.html b/files/it/web/guide/html/html5/introduction_to_html5/index.html index 14fe305eb6..646636bee8 100644 --- a/files/it/web/guide/html/html5/introduction_to_html5/index.html +++ b/files/it/web/guide/html/html5/introduction_to_html5/index.html @@ -1,7 +1,8 @@ --- title: Introduzione a HTML5 -slug: Web/HTML/HTML5/Introduction_to_HTML5 +slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/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.

diff --git a/files/it/web/guide/html/using_html_sections_and_outlines/index.html b/files/it/web/guide/html/using_html_sections_and_outlines/index.html index 822543a758..5864929a2c 100644 --- a/files/it/web/guide/html/using_html_sections_and_outlines/index.html +++ b/files/it/web/guide/html/using_html_sections_and_outlines/index.html @@ -1,7 +1,8 @@ --- title: Sezioni e Struttura di un Documento HTML5 -slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document +slug: Web/Guide/HTML/Using_HTML_sections_and_outlines translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document ---

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

diff --git a/files/it/web/guide/mobile/index.html b/files/it/web/guide/mobile/index.html index cc288a9c45..11f17242c7 100644 --- a/files/it/web/guide/mobile/index.html +++ b/files/it/web/guide/mobile/index.html @@ -1,6 +1,6 @@ --- title: Mobile Web development -slug: Web_Development/Mobile +slug: Web/Guide/Mobile tags: - Mobile - NeedsTranslation @@ -8,6 +8,7 @@ tags: - Web Development translation_of: Web/Guide/Mobile translation_of_original: Web_Development/Mobile +original_slug: Web_Development/Mobile ---

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

    diff --git a/files/it/web/guide/parsing_and_serializing_xml/index.html b/files/it/web/guide/parsing_and_serializing_xml/index.html index 563552085e..6cf10e3766 100644 --- a/files/it/web/guide/parsing_and_serializing_xml/index.html +++ b/files/it/web/guide/parsing_and_serializing_xml/index.html @@ -1,7 +1,8 @@ --- title: Costruire e decostruire un documento XML -slug: Costruire_e_decostruire_un_documento_XML +slug: Web/Guide/Parsing_and_serializing_XML translation_of: Web/Guide/Parsing_and_serializing_XML +original_slug: Costruire_e_decostruire_un_documento_XML ---

    Quest'articolo si propone di fornire una guida esaustiva per l'uso di XML per mezzo Javascript. Esso si divide in due sezioni. Nella prima sezione verranno illustrati tutti i possibili metodi per costruire un albero DOM, nella seconda invece si darà per scontato che saremo già in possesso di un albero DOM e il nostro scopo sarà quello di trattarne il contenuto.

    diff --git a/files/it/web/html/attributes/index.html b/files/it/web/html/attributes/index.html index 7bb21c96a2..2da4139452 100644 --- a/files/it/web/html/attributes/index.html +++ b/files/it/web/html/attributes/index.html @@ -1,7 +1,8 @@ --- title: Attributi -slug: Web/HTML/Attributi +slug: Web/HTML/Attributes translation_of: Web/HTML/Attributes +original_slug: Web/HTML/Attributi ---

    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

    diff --git a/files/it/web/html/element/figure/index.html b/files/it/web/html/element/figure/index.html index 6a1f4b019f..751a1b0ea6 100644 --- a/files/it/web/html/element/figure/index.html +++ b/files/it/web/html/element/figure/index.html @@ -1,6 +1,6 @@ --- title:
    -slug: Web/HTML/Element/figura +slug: Web/HTML/Element/figure tags: - Element - Image @@ -8,6 +8,7 @@ tags: - Presentation - Reference translation_of: Web/HTML/Element/figure +original_slug: Web/HTML/Element/figura ---
    {{HTMLRef}}
    diff --git a/files/it/web/html/reference/index.html b/files/it/web/html/reference/index.html index 6dfc71219d..5f66c954ec 100644 --- a/files/it/web/html/reference/index.html +++ b/files/it/web/html/reference/index.html @@ -1,6 +1,6 @@ --- title: Riferimento HTML -slug: Web/HTML/Riferimento +slug: Web/HTML/Reference tags: - Elementi - HTML @@ -8,6 +8,7 @@ tags: - Web - tag translation_of: Web/HTML/Reference +original_slug: Web/HTML/Riferimento ---
    {{HTMLSidebar}}
    diff --git a/files/it/web/html/using_the_application_cache/index.html b/files/it/web/html/using_the_application_cache/index.html index 2c35bbaeae..2103febcb3 100644 --- a/files/it/web/html/using_the_application_cache/index.html +++ b/files/it/web/html/using_the_application_cache/index.html @@ -1,7 +1,8 @@ --- title: Utilizzare l'application cache -slug: Web/HTML/utilizzare_application_cache +slug: Web/HTML/Using_the_application_cache translation_of: Web/HTML/Using_the_application_cache +original_slug: Web/HTML/utilizzare_application_cache ---

    Introduzione

    diff --git a/files/it/web/http/basics_of_http/index.html b/files/it/web/http/basics_of_http/index.html index cbb668f329..ec8f4144a0 100644 --- a/files/it/web/http/basics_of_http/index.html +++ b/files/it/web/http/basics_of_http/index.html @@ -1,7 +1,8 @@ --- title: Le basi dell'HTTP -slug: Web/HTTP/Basi_HTTP +slug: Web/HTTP/Basics_of_HTTP translation_of: Web/HTTP/Basics_of_HTTP +original_slug: Web/HTTP/Basi_HTTP ---
    {{HTTPSidebar}}
    diff --git a/files/it/web/http/compression/index.html b/files/it/web/http/compression/index.html index 59154440d8..2ef1547341 100644 --- a/files/it/web/http/compression/index.html +++ b/files/it/web/http/compression/index.html @@ -1,7 +1,8 @@ --- title: Compressione in HTTP -slug: Web/HTTP/Compressione +slug: Web/HTTP/Compression translation_of: Web/HTTP/Compression +original_slug: Web/HTTP/Compressione ---
    {{HTTPSidebar}}
    diff --git a/files/it/web/http/content_negotiation/index.html b/files/it/web/http/content_negotiation/index.html index e2be7de758..53312b1461 100644 --- a/files/it/web/http/content_negotiation/index.html +++ b/files/it/web/http/content_negotiation/index.html @@ -1,7 +1,8 @@ --- title: Negoziazione del contenuto -slug: Web/HTTP/negoziazione-del-contenuto +slug: Web/HTTP/Content_negotiation translation_of: Web/HTTP/Content_negotiation +original_slug: Web/HTTP/negoziazione-del-contenuto ---
    Nel protocollo HTTP, la negoziazione del contenuto è il meccanismo utilizzato per servire diverse rappresentazioni di una risorsa avente medesimo URI, in modo che il programma utente possa specificare quale sia più adatta all'utente (ad esempio, quale lingua di un documento, quale formato immagine o quale codifica del contenuto).
    diff --git a/files/it/web/http/headers/user-agent/firefox/index.html b/files/it/web/http/headers/user-agent/firefox/index.html index 0c4a3c17e2..2a082b77f6 100644 --- a/files/it/web/http/headers/user-agent/firefox/index.html +++ b/files/it/web/http/headers/user-agent/firefox/index.html @@ -1,7 +1,8 @@ --- title: Gli User Agent di Gecko -slug: Gli_User_Agent_di_Gecko +slug: Web/HTTP/Headers/User-Agent/Firefox translation_of: Web/HTTP/Headers/User-Agent/Firefox +original_slug: Gli_User_Agent_di_Gecko ---

    Lista degli user agent rilasciati da Netscape e AOL basati su Gecko™.

    diff --git a/files/it/web/http/link_prefetching_faq/index.html b/files/it/web/http/link_prefetching_faq/index.html index 41a0e183c1..82faf960e9 100644 --- a/files/it/web/http/link_prefetching_faq/index.html +++ b/files/it/web/http/link_prefetching_faq/index.html @@ -1,6 +1,6 @@ --- title: Link prefetching FAQ -slug: Link_prefetching_FAQ +slug: Web/HTTP/Link_prefetching_FAQ tags: - Gecko - HTML @@ -8,6 +8,7 @@ tags: - Sviluppo_Web - Tutte_le_categorie translation_of: Web/HTTP/Link_prefetching_FAQ +original_slug: Link_prefetching_FAQ --- diff --git a/files/it/web/http/overview/index.html b/files/it/web/http/overview/index.html index f2cf4c990c..93aa350114 100644 --- a/files/it/web/http/overview/index.html +++ b/files/it/web/http/overview/index.html @@ -1,10 +1,11 @@ --- title: Una panoramica su HTTP -slug: Web/HTTP/Panoramica +slug: Web/HTTP/Overview tags: - HTTP - Protocolli translation_of: Web/HTTP/Overview +original_slug: Web/HTTP/Panoramica ---
    {{HTTPSidebar}}
    diff --git a/files/it/web/http/range_requests/index.html b/files/it/web/http/range_requests/index.html index e6bbe43d19..06f965f218 100644 --- a/files/it/web/http/range_requests/index.html +++ b/files/it/web/http/range_requests/index.html @@ -1,7 +1,8 @@ --- title: Richieste HTTP range -slug: Web/HTTP/Richieste_range +slug: Web/HTTP/Range_requests translation_of: Web/HTTP/Range_requests +original_slug: Web/HTTP/Richieste_range ---
    {{HTTPSidebar}}
    diff --git a/files/it/web/http/session/index.html b/files/it/web/http/session/index.html index e414eb9d19..77a226b673 100644 --- a/files/it/web/http/session/index.html +++ b/files/it/web/http/session/index.html @@ -1,7 +1,8 @@ --- title: Una tipica sessione HTTP -slug: Web/HTTP/Sessione +slug: Web/HTTP/Session translation_of: Web/HTTP/Session +original_slug: Web/HTTP/Sessione ---
    {{HTTPSidebar}}
    diff --git a/files/it/web/javascript/a_re-introduction_to_javascript/index.html b/files/it/web/javascript/a_re-introduction_to_javascript/index.html index 4dc4a484a7..e0d779e1b1 100644 --- a/files/it/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/it/web/javascript/a_re-introduction_to_javascript/index.html @@ -1,7 +1,8 @@ --- title: Una reintroduzione al Java Script (Tutorial JS) -slug: Web/JavaScript/Una_reintroduzione_al_JavaScript +slug: Web/JavaScript/A_re-introduction_to_JavaScript translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +original_slug: Web/JavaScript/Una_reintroduzione_al_JavaScript ---

    Introduzione

    diff --git a/files/it/web/javascript/about_javascript/index.html b/files/it/web/javascript/about_javascript/index.html index c850023b92..04dc002900 100644 --- a/files/it/web/javascript/about_javascript/index.html +++ b/files/it/web/javascript/about_javascript/index.html @@ -1,7 +1,8 @@ --- title: Cos'è JavaScript -slug: Web/JavaScript/Cosè_JavaScript +slug: Web/JavaScript/About_JavaScript translation_of: Web/JavaScript/About_JavaScript +original_slug: Web/JavaScript/Cosè_JavaScript ---
    {{JsSidebar}}
    diff --git a/files/it/web/javascript/closures/index.html b/files/it/web/javascript/closures/index.html index deee56e54b..b45bf70944 100644 --- a/files/it/web/javascript/closures/index.html +++ b/files/it/web/javascript/closures/index.html @@ -1,7 +1,8 @@ --- title: Chiusure -slug: Web/JavaScript/Chiusure +slug: Web/JavaScript/Closures translation_of: Web/JavaScript/Closures +original_slug: Web/JavaScript/Chiusure ---
    {{jsSidebar("Intermediate")}}
    diff --git a/files/it/web/javascript/guide/control_flow_and_error_handling/index.html b/files/it/web/javascript/guide/control_flow_and_error_handling/index.html index 76e72f5cba..9d162aa359 100644 --- a/files/it/web/javascript/guide/control_flow_and_error_handling/index.html +++ b/files/it/web/javascript/guide/control_flow_and_error_handling/index.html @@ -1,13 +1,14 @@ --- title: Controllo del flusso di esecuzione e gestione degli errori -slug: Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori +slug: Web/JavaScript/Guide/Control_flow_and_error_handling tags: - Controllo di flusso - Guide - JavaScript - Principianti - - 'l10n:priority' + - l10n:priority translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +original_slug: Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori ---
    {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
    diff --git a/files/it/web/javascript/guide/details_of_the_object_model/index.html b/files/it/web/javascript/guide/details_of_the_object_model/index.html index 1e2d4dc74f..5751006822 100644 --- a/files/it/web/javascript/guide/details_of_the_object_model/index.html +++ b/files/it/web/javascript/guide/details_of_the_object_model/index.html @@ -1,11 +1,12 @@ --- title: Dettagli del modello a oggetti -slug: Web/JavaScript/Guida/Dettagli_Object_Model +slug: Web/JavaScript/Guide/Details_of_the_Object_Model tags: - Guide - Intermediate - JavaScript translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +original_slug: Web/JavaScript/Guida/Dettagli_Object_Model ---
    {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
    diff --git a/files/it/web/javascript/guide/functions/index.html b/files/it/web/javascript/guide/functions/index.html index 4aca8d5a7b..274da563ca 100644 --- a/files/it/web/javascript/guide/functions/index.html +++ b/files/it/web/javascript/guide/functions/index.html @@ -1,7 +1,8 @@ --- title: Funzioni -slug: Web/JavaScript/Guida/Functions +slug: Web/JavaScript/Guide/Functions translation_of: Web/JavaScript/Guide/Functions +original_slug: Web/JavaScript/Guida/Functions ---
    {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
    diff --git a/files/it/web/javascript/guide/grammar_and_types/index.html b/files/it/web/javascript/guide/grammar_and_types/index.html index 2a43d5230d..6fc3f276b9 100644 --- a/files/it/web/javascript/guide/grammar_and_types/index.html +++ b/files/it/web/javascript/guide/grammar_and_types/index.html @@ -1,7 +1,8 @@ --- title: Grammatica e tipi -slug: Web/JavaScript/Guida/Grammar_and_types +slug: Web/JavaScript/Guide/Grammar_and_types translation_of: Web/JavaScript/Guide/Grammar_and_types +original_slug: Web/JavaScript/Guida/Grammar_and_types ---
    {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
    diff --git a/files/it/web/javascript/guide/index.html b/files/it/web/javascript/guide/index.html index ba956f21f2..658194bd86 100644 --- a/files/it/web/javascript/guide/index.html +++ b/files/it/web/javascript/guide/index.html @@ -1,6 +1,6 @@ --- title: JavaScript Guide -slug: Web/JavaScript/Guida +slug: Web/JavaScript/Guide tags: - AJAX - JavaScript @@ -8,6 +8,7 @@ tags: - NeedsTranslation - TopicStub translation_of: Web/JavaScript/Guide +original_slug: Web/JavaScript/Guida ---
    {{jsSidebar("JavaScript Guide")}}
    diff --git a/files/it/web/javascript/guide/introduction/index.html b/files/it/web/javascript/guide/introduction/index.html index 3825ded91c..daa5a185ea 100644 --- a/files/it/web/javascript/guide/introduction/index.html +++ b/files/it/web/javascript/guide/introduction/index.html @@ -1,10 +1,11 @@ --- title: Introduzione -slug: Web/JavaScript/Guida/Introduzione +slug: Web/JavaScript/Guide/Introduction tags: - Guida - JavaScript translation_of: Web/JavaScript/Guide/Introduction +original_slug: Web/JavaScript/Guida/Introduzione ---
    {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
    diff --git a/files/it/web/javascript/guide/iterators_and_generators/index.html b/files/it/web/javascript/guide/iterators_and_generators/index.html index 49b220cdd1..dbfd114f2d 100644 --- a/files/it/web/javascript/guide/iterators_and_generators/index.html +++ b/files/it/web/javascript/guide/iterators_and_generators/index.html @@ -1,7 +1,8 @@ --- title: Iteratori e generatori -slug: Web/JavaScript/Guida/Iteratori_e_generatori +slug: Web/JavaScript/Guide/Iterators_and_Generators translation_of: Web/JavaScript/Guide/Iterators_and_Generators +original_slug: Web/JavaScript/Guida/Iteratori_e_generatori ---
    {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}
    diff --git a/files/it/web/javascript/guide/loops_and_iteration/index.html b/files/it/web/javascript/guide/loops_and_iteration/index.html index c677151181..5e5332e541 100644 --- a/files/it/web/javascript/guide/loops_and_iteration/index.html +++ b/files/it/web/javascript/guide/loops_and_iteration/index.html @@ -1,12 +1,13 @@ --- title: Cicli e iterazioni -slug: Web/JavaScript/Guida/Loops_and_iteration +slug: Web/JavaScript/Guide/Loops_and_iteration tags: - Guide - JavaScript - Loop - Sintassi translation_of: Web/JavaScript/Guide/Loops_and_iteration +original_slug: Web/JavaScript/Guida/Loops_and_iteration ---
    {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
    diff --git a/files/it/web/javascript/guide/regular_expressions/index.html b/files/it/web/javascript/guide/regular_expressions/index.html index f876045948..4e95f451a5 100644 --- a/files/it/web/javascript/guide/regular_expressions/index.html +++ b/files/it/web/javascript/guide/regular_expressions/index.html @@ -1,7 +1,8 @@ --- title: Espressioni regolari -slug: Web/JavaScript/Guida/Espressioni_Regolari +slug: Web/JavaScript/Guide/Regular_Expressions translation_of: Web/JavaScript/Guide/Regular_Expressions +original_slug: Web/JavaScript/Guida/Espressioni_Regolari ---
    {{jsSidebar("Guida JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
    diff --git a/files/it/web/javascript/javascript_technologies_overview/index.html b/files/it/web/javascript/javascript_technologies_overview/index.html index 9f2b0fbb56..941f6468a3 100644 --- a/files/it/web/javascript/javascript_technologies_overview/index.html +++ b/files/it/web/javascript/javascript_technologies_overview/index.html @@ -1,11 +1,12 @@ --- title: Il DOM e JavaScript -slug: Web/JavaScript/Il_DOM_e_JavaScript +slug: Web/JavaScript/JavaScript_technologies_overview tags: - DOM - JavaScript - Tutte_le_categorie translation_of: Web/JavaScript/JavaScript_technologies_overview +original_slug: Web/JavaScript/Il_DOM_e_JavaScript ---

    Il Grande Disegno

    diff --git a/files/it/web/javascript/memory_management/index.html b/files/it/web/javascript/memory_management/index.html index d1cd6c4dca..8fb72946cb 100644 --- a/files/it/web/javascript/memory_management/index.html +++ b/files/it/web/javascript/memory_management/index.html @@ -1,7 +1,8 @@ --- title: Gestione della memoria -slug: Web/JavaScript/Gestione_della_Memoria +slug: Web/JavaScript/Memory_Management translation_of: Web/JavaScript/Memory_Management +original_slug: Web/JavaScript/Gestione_della_Memoria ---
    {{JsSidebar("Advanced")}}
    diff --git a/files/it/web/javascript/reference/classes/constructor/index.html b/files/it/web/javascript/reference/classes/constructor/index.html index afc6c44526..49c7fc05cd 100644 --- a/files/it/web/javascript/reference/classes/constructor/index.html +++ b/files/it/web/javascript/reference/classes/constructor/index.html @@ -1,7 +1,8 @@ --- title: costruttore -slug: Web/JavaScript/Reference/Classes/costruttore +slug: Web/JavaScript/Reference/Classes/constructor translation_of: Web/JavaScript/Reference/Classes/constructor +original_slug: Web/JavaScript/Reference/Classes/costruttore ---
    {{jsSidebar("Classes")}}
    diff --git a/files/it/web/javascript/reference/functions/arguments/index.html b/files/it/web/javascript/reference/functions/arguments/index.html index c277074bca..e879c914e3 100644 --- a/files/it/web/javascript/reference/functions/arguments/index.html +++ b/files/it/web/javascript/reference/functions/arguments/index.html @@ -1,7 +1,8 @@ --- title: Oggetto 'arguments' -slug: Web/JavaScript/Reference/Functions_and_function_scope/arguments +slug: Web/JavaScript/Reference/Functions/arguments translation_of: Web/JavaScript/Reference/Functions/arguments +original_slug: Web/JavaScript/Reference/Functions_and_function_scope/arguments ---
    {{jsSidebar("Functions")}}
    diff --git a/files/it/web/javascript/reference/functions/arrow_functions/index.html b/files/it/web/javascript/reference/functions/arrow_functions/index.html index 2dd258966d..eef7570ec0 100644 --- a/files/it/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/it/web/javascript/reference/functions/arrow_functions/index.html @@ -1,6 +1,6 @@ --- title: Funzioni a freccia -slug: Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions +slug: Web/JavaScript/Reference/Functions/Arrow_functions tags: - ECMAScript6 - Funzioni @@ -8,6 +8,7 @@ tags: - JavaScript - Reference translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +original_slug: Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions ---
    {{jsSidebar("Functions")}}
    diff --git a/files/it/web/javascript/reference/functions/get/index.html b/files/it/web/javascript/reference/functions/get/index.html index 0ed76cf469..439255284c 100644 --- a/files/it/web/javascript/reference/functions/get/index.html +++ b/files/it/web/javascript/reference/functions/get/index.html @@ -1,7 +1,8 @@ --- title: getter -slug: Web/JavaScript/Reference/Functions_and_function_scope/get +slug: Web/JavaScript/Reference/Functions/get translation_of: Web/JavaScript/Reference/Functions/get +original_slug: Web/JavaScript/Reference/Functions_and_function_scope/get ---
    {{jsSidebar("Functions")}}
    diff --git a/files/it/web/javascript/reference/functions/index.html b/files/it/web/javascript/reference/functions/index.html index 8a5255282c..935190e355 100644 --- a/files/it/web/javascript/reference/functions/index.html +++ b/files/it/web/javascript/reference/functions/index.html @@ -1,7 +1,8 @@ --- title: Funzioni -slug: Web/JavaScript/Reference/Functions_and_function_scope +slug: Web/JavaScript/Reference/Functions translation_of: Web/JavaScript/Reference/Functions +original_slug: Web/JavaScript/Reference/Functions_and_function_scope ---
    {{jsSidebar("Functions")}}
    diff --git a/files/it/web/javascript/reference/functions/set/index.html b/files/it/web/javascript/reference/functions/set/index.html index 1af0f1c79d..c9f7e6f3fa 100644 --- a/files/it/web/javascript/reference/functions/set/index.html +++ b/files/it/web/javascript/reference/functions/set/index.html @@ -1,11 +1,12 @@ --- title: setter -slug: Web/JavaScript/Reference/Functions_and_function_scope/set +slug: Web/JavaScript/Reference/Functions/set tags: - Funzioni - JavaScript - setter translation_of: Web/JavaScript/Reference/Functions/set +original_slug: Web/JavaScript/Reference/Functions_and_function_scope/set ---
    {{jsSidebar("Functions")}}
    diff --git a/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html index f803b41255..16c5a8dcb2 100644 --- a/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html +++ b/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -1,12 +1,13 @@ --- title: handler.apply() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply tags: - ECMAScript 2015 - JavaScript - Proxy - metodo translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply ---
    {{JSRef}}
    diff --git a/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html index 2be6abb116..695cf4ce22 100644 --- a/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html +++ b/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -1,6 +1,6 @@ --- title: Proxy handler -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy tags: - ECMAScript 2015 - JavaScript @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---
    {{JSRef}}
    diff --git a/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html b/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html index bf87d7e3e7..5039f6fa07 100644 --- a/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html +++ b/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html @@ -1,7 +1,8 @@ --- title: Proxy.revocable() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocabile +slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocable translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocabile ---
    {{JSRef}}
    diff --git a/files/it/web/javascript/reference/operators/comma_operator/index.html b/files/it/web/javascript/reference/operators/comma_operator/index.html index e4027930a1..f4cf7b3fd6 100644 --- a/files/it/web/javascript/reference/operators/comma_operator/index.html +++ b/files/it/web/javascript/reference/operators/comma_operator/index.html @@ -1,7 +1,8 @@ --- title: Operatore virgola -slug: Web/JavaScript/Reference/Operators/Operatore_virgola +slug: Web/JavaScript/Reference/Operators/Comma_Operator translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +original_slug: Web/JavaScript/Reference/Operators/Operatore_virgola ---
    {{jsSidebar("Operators")}}
    diff --git a/files/it/web/javascript/reference/operators/conditional_operator/index.html b/files/it/web/javascript/reference/operators/conditional_operator/index.html index 1ade61b085..1d0bc7f79a 100644 --- a/files/it/web/javascript/reference/operators/conditional_operator/index.html +++ b/files/it/web/javascript/reference/operators/conditional_operator/index.html @@ -1,9 +1,10 @@ --- title: Operatore condizionale (ternary) -slug: Web/JavaScript/Reference/Operators/Operator_Condizionale +slug: Web/JavaScript/Reference/Operators/Conditional_Operator tags: - JavaScript Operatore operatore translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +original_slug: Web/JavaScript/Reference/Operators/Operator_Condizionale ---

    L'operatore condizionale (ternary) è  l'unico operatore JavaScript che necessità di tre operandi. Questo operatore è frequentemente usato al posto del comando if per la sua sintassi concisa e perché fornisce direttamente un espressione valutabile.

    diff --git a/files/it/web/javascript/reference/template_literals/index.html b/files/it/web/javascript/reference/template_literals/index.html index 5bb4890ad8..52ca5a1802 100644 --- a/files/it/web/javascript/reference/template_literals/index.html +++ b/files/it/web/javascript/reference/template_literals/index.html @@ -1,7 +1,8 @@ --- title: Stringhe template -slug: Web/JavaScript/Reference/template_strings +slug: Web/JavaScript/Reference/Template_literals translation_of: Web/JavaScript/Reference/Template_literals +original_slug: Web/JavaScript/Reference/template_strings ---
    {{JsSidebar("More")}}
    diff --git a/files/it/web/opensearch/index.html b/files/it/web/opensearch/index.html index 87aa850da0..a80723a37a 100644 --- a/files/it/web/opensearch/index.html +++ b/files/it/web/opensearch/index.html @@ -1,10 +1,11 @@ --- title: Installare plugin di ricerca dalle pagine web -slug: Installare_plugin_di_ricerca_dalle_pagine_web +slug: Web/OpenSearch tags: - Plugin_di_ricerca translation_of: Web/OpenSearch translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +original_slug: Installare_plugin_di_ricerca_dalle_pagine_web ---

    Firefox permette di installare dei plugin di ricerca tramite JavaScript e supporta tre formati per questi plugin: MozSearch, OpenSearch e Sherlock.

    Quando il codice JavaScript tenta di installare un plugin, Firefox propone un messaggio di allerta che chiede all'utente il permesso di installare il plugin. diff --git a/files/it/web/performance/critical_rendering_path/index.html b/files/it/web/performance/critical_rendering_path/index.html index 31c0b82ac8..d80bf04f96 100644 --- a/files/it/web/performance/critical_rendering_path/index.html +++ b/files/it/web/performance/critical_rendering_path/index.html @@ -1,7 +1,8 @@ --- title: Percorso critico di rendering -slug: Web/Performance/Percorso_critico_di_rendering +slug: Web/Performance/Critical_rendering_path translation_of: Web/Performance/Critical_rendering_path +original_slug: Web/Performance/Percorso_critico_di_rendering ---

    {{draft}}

    diff --git a/files/it/web/progressive_web_apps/index.html b/files/it/web/progressive_web_apps/index.html index d7c931fec6..b5a75bd912 100644 --- a/files/it/web/progressive_web_apps/index.html +++ b/files/it/web/progressive_web_apps/index.html @@ -1,8 +1,9 @@ --- title: Design Sensibile -slug: Web_Development/Mobile/Design_sensibile +slug: Web/Progressive_web_apps translation_of: Web/Progressive_web_apps translation_of_original: Web/Guide/Responsive_design +original_slug: Web_Development/Mobile/Design_sensibile ---

    Come risposta ai problemi associati all'approccio per siti separati nel campo del Web design per mobile e desktop, un'idea relativamente nuova (che è abbastanza datata) sta aumentando la sua popolarità: evitare il rilevamento user-agent, e creare invece una pagina che risponda client-side alle capacità del browser. Questo approccio, introdotto da Ethan Marcotte nel suo articolo dal titolo A List Apart, è oggi conosciuto come Web Design Sensibile. Come l'approccio a siti separati, il Web Design sensibile possiede aspetti positivi e negativi.

    Aspetti Positivi

    diff --git a/files/it/web/security/insecure_passwords/index.html b/files/it/web/security/insecure_passwords/index.html index cfce604aab..9c1595577d 100644 --- a/files/it/web/security/insecure_passwords/index.html +++ b/files/it/web/security/insecure_passwords/index.html @@ -1,7 +1,8 @@ --- title: Password insicure -slug: Web/Security/Password_insicure +slug: Web/Security/Insecure_passwords translation_of: Web/Security/Insecure_passwords +original_slug: Web/Security/Password_insicure ---

    I dialoghi di Login tramite HTTP sono particolarmente pericolosi a causa della vasta gamma di attacchi che possono essere utilizzati per estrarre la password di un utente. Gli intercettatori della rete potrebbero rubare la password di un utente utilizzando uno "sniffing" della rete o modificando la pagina in uso. Questo documento descrive in dettaglio i meccanismi di sicurezza che Firefox ha messo in atto per avvisare gli utenti e gli sviluppatori dei rischi circa le password insicure e il furto delle stesse.

    diff --git a/files/it/web/svg/applying_svg_effects_to_html_content/index.html b/files/it/web/svg/applying_svg_effects_to_html_content/index.html index b277a2fc86..49ab8100df 100644 --- a/files/it/web/svg/applying_svg_effects_to_html_content/index.html +++ b/files/it/web/svg/applying_svg_effects_to_html_content/index.html @@ -1,7 +1,8 @@ --- title: Introduzione a SVG dentro XHTML -slug: Introduzione_a_SVG_dentro_XHTML +slug: Web/SVG/Applying_SVG_effects_to_HTML_content translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +original_slug: Introduzione_a_SVG_dentro_XHTML ---

     

    Panoramica

    diff --git a/files/it/web/svg/index.html b/files/it/web/svg/index.html index 4fcdc7a78d..840084ad4a 100644 --- a/files/it/web/svg/index.html +++ b/files/it/web/svg/index.html @@ -1,10 +1,11 @@ --- title: SVG -slug: SVG +slug: Web/SVG tags: - SVG - Tutte_le_categorie translation_of: Web/SVG +original_slug: SVG ---
    Iniziare ad usare SVG
    Questa esercitazione ti aiuterà ad iniziare ad usare SVG.
    diff --git a/files/it/web/web_components/using_custom_elements/index.html b/files/it/web/web_components/using_custom_elements/index.html index 4fa75cb380..8183605a23 100644 --- a/files/it/web/web_components/using_custom_elements/index.html +++ b/files/it/web/web_components/using_custom_elements/index.html @@ -1,7 +1,8 @@ --- title: Usare i custom elements -slug: Web/Web_Components/Usare_custom_elements +slug: Web/Web_Components/Using_custom_elements translation_of: Web/Web_Components/Using_custom_elements +original_slug: Web/Web_Components/Usare_custom_elements ---
    {{DefaultAPISidebar("Web Components")}}
    -- cgit v1.2.3-54-g00ecf