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 --- .../accessibility_troubleshooting/index.html | 113 +++ .../accessibility/css_and_javascript/index.html | 359 ++++++++ files/it/learn/accessibility/html/index.html | 538 ++++++++++++ files/it/learn/accessibility/index.html | 67 ++ files/it/learn/accessibility/mobile/index.html | 336 ++++++++ files/it/learn/accessibility/multimedia/index.html | 392 +++++++++ .../learn/accessibility/wai-aria_basics/index.html | 422 +++++++++ .../accessibility/what_is_accessibility/index.html | 196 +++++ .../index.html" | 336 -------- .../index.html" | 113 --- .../cosa_\303\250_accessibilit\303\240/index.html" | 196 ----- .../index.html" | 359 -------- .../html_accessibilit\303\240/index.html" | 538 ------------ "files/it/learn/accessibilit\303\240/index.html" | 67 -- .../accessibilit\303\240/multimedia/index.html" | 392 --------- .../wai-aria_basics/index.html" | 422 --------- files/it/learn/come_contribuire/index.html | 88 -- .../cascade_and_inheritance/index.html | 87 ++ .../learn/css/building_blocks/selectors/index.html | 231 +++++ .../learn/css/building_blocks/selettori/index.html | 231 ----- .../first_steps/how_css_is_structured/index.html | 157 ++++ .../learn/css/first_steps/how_css_works/index.html | 114 +++ files/it/learn/css/first_steps/index.html | 43 + .../styling_text/definire_stili_link/index.html | 438 ---------- .../css/styling_text/styling_links/index.html | 438 ++++++++++ files/it/learn/forms/form_validation/index.html | 846 ++++++++++++++++++ .../how_to_build_custom_form_controls/index.html | 825 ++++++++++++++++++ files/it/learn/forms/index.html | 85 ++ .../index.html" | 117 --- .../come_funziona_il_web/index.html | 99 --- .../dealing_with_files/index.html | 95 ++ .../gestire_i_file/index.html | 95 -- .../how_the_web_works/index.html | 99 +++ .../pubbicare_sito/index.html | 128 --- .../publishing_your_website/index.html | 128 +++ .../what_will_your_website_look_like/index.html | 117 +++ .../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 ------ files/it/learn/javascript/comefare/index.html | 291 ------- .../cosa_\303\250_andato_storto/index.html" | 253 ------ .../javascript/first_steps/variabili/index.html | 337 -------- .../javascript/first_steps/variables/index.html | 337 ++++++++ .../first_steps/what_went_wrong/index.html | 253 ++++++ files/it/learn/javascript/howto/index.html | 291 +++++++ .../it/learn/javascript/objects/basics/index.html | 242 ++++++ files/it/learn/javascript/objects/index.html | 51 ++ files/it/learn/javascript/objects/json/index.html | 345 ++++++++ .../it/learn/javascript/oggetti/basics/index.html | 242 ------ files/it/learn/javascript/oggetti/index.html | 51 -- files/it/learn/javascript/oggetti/json/index.html | 345 -------- .../server-side/django/introduction/index.html | 281 ++++++ .../server-side/django/introduzione/index.html | 281 ------ 64 files changed, 9299 insertions(+), 9263 deletions(-) create mode 100644 files/it/learn/accessibility/accessibility_troubleshooting/index.html create mode 100644 files/it/learn/accessibility/css_and_javascript/index.html create mode 100644 files/it/learn/accessibility/html/index.html create mode 100644 files/it/learn/accessibility/index.html create mode 100644 files/it/learn/accessibility/mobile/index.html create mode 100644 files/it/learn/accessibility/multimedia/index.html create mode 100644 files/it/learn/accessibility/wai-aria_basics/index.html create mode 100644 files/it/learn/accessibility/what_is_accessibility/index.html delete mode 100644 "files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/multimedia/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" delete mode 100644 files/it/learn/come_contribuire/index.html create mode 100644 files/it/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/it/learn/css/building_blocks/selectors/index.html delete mode 100644 files/it/learn/css/building_blocks/selettori/index.html create mode 100644 files/it/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/it/learn/css/first_steps/how_css_works/index.html create mode 100644 files/it/learn/css/first_steps/index.html delete mode 100644 files/it/learn/css/styling_text/definire_stili_link/index.html create mode 100644 files/it/learn/css/styling_text/styling_links/index.html create mode 100644 files/it/learn/forms/form_validation/index.html create mode 100644 files/it/learn/forms/how_to_build_custom_form_controls/index.html create mode 100644 files/it/learn/forms/index.html delete mode 100644 "files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" delete mode 100644 files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html create mode 100644 files/it/learn/getting_started_with_the_web/dealing_with_files/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/gestire_i_file/index.html create mode 100644 files/it/learn/getting_started_with_the_web/how_the_web_works/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html create mode 100644 files/it/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html 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 delete mode 100644 files/it/learn/javascript/comefare/index.html delete mode 100644 "files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" delete mode 100644 files/it/learn/javascript/first_steps/variabili/index.html create mode 100644 files/it/learn/javascript/first_steps/variables/index.html create mode 100644 files/it/learn/javascript/first_steps/what_went_wrong/index.html create mode 100644 files/it/learn/javascript/howto/index.html create mode 100644 files/it/learn/javascript/objects/basics/index.html create mode 100644 files/it/learn/javascript/objects/index.html create mode 100644 files/it/learn/javascript/objects/json/index.html delete mode 100644 files/it/learn/javascript/oggetti/basics/index.html delete mode 100644 files/it/learn/javascript/oggetti/index.html delete mode 100644 files/it/learn/javascript/oggetti/json/index.html create mode 100644 files/it/learn/server-side/django/introduction/index.html delete mode 100644 files/it/learn/server-side/django/introduzione/index.html (limited to 'files/it/learn') diff --git a/files/it/learn/accessibility/accessibility_troubleshooting/index.html b/files/it/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..8c0e97dab4 --- /dev/null +++ b/files/it/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,113 @@ +--- +title: 'Test di valutazione: risoluzione di problemi di accessibilità' +slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi +tags: + - Accessibilità + - CSS + - HTML + - JavaScript + - Principiante + - Test di valutazione + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}
+ +

Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i  precedenti articoli del corso.
Obiettivo:Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.
+ +

Punto di partenza

+ +

 

+ +

Come primo passo, dovresti scaricare l’archivio ZIP contenente i file che compongono il sito di esempio. Decomprimi l’archivio in una cartella locale sul tuo computer.

+ +

Il risultato finale del test dovrebbe apparire così:

+ +

 

+ +

+ +

Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.

+ +

Schema del progetto

+ +

Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.

+ +

Colori

+ +

Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?

+ +

HTML semantico

+ +
    +
  1. Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.
    2. +
  2. Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?
    3. +
  3. Il menu di navigazione (racchiuso tra le etichette <div class="nav"> e </div>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.
    4. +
+ +
+

Nota: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione.

+
+ +

Le immagini

+ +

Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema?

+ +

Il lettore audio

+ +
    +
  1. Il lettore <audio> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti?
    2. +
  2. Il lettore <audio> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio?
    3. +
+ +

I formulari

+ +
    +
  1. Sarebbe utile aggiungere un’etichetta all’elemento <input> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo?
    2. +
  2. I due elementi <input> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS.
    3. +
+ +

Il bottone mostra/nascondi commenti

+ +

Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO?

+ +

La tabella

+ +

La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi?

+ +

Altre considerazioni?

+ +

Puoi indicare due ulteriori idee per rendere il sito più accessibile?

+ +

Valutazione

+ +

Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel forum di discussione su questo esercizio, o nel canale IRC #mdn su Mozilla IRC. In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.

+ +

{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/accessibility/css_and_javascript/index.html b/files/it/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..6f5e69fea4 --- /dev/null +++ b/files/it/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,359 @@ +--- +title: Linee guida di accessibilità per CSS e JavaScript +slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità +tags: + - Accessibilità + - Articolo + - CSS + - Guida + - JavaScript + - colore + - contrasto + - imparare + - nascondere + - non intrusivo +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibilità")}}
+ +

CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript e una idea chiara di cosa è l'accessibilità.
Obiettivo:Imparare le basi di come utilizzare CSS e JavaScript correttamente per massimizzare l'accessibilità dei propri siti e allo stesso tempo evitare errori che potrebbero ridurla.
+ +

CSS e JavaScript sono accessibili?

+ +

CSS e JavaScript non hanno per l'accessibilità lo stesso livello di importanza che ha HTML, ma possono comunque arrecare grandi danni se usati impropriamente. Per dirlo in un'altra maniera, è importante che tu apprenda alcune linee guida sull'uso di CSS e JavaScript, per evitare di rovinare l'accessibilità dei tuoi documenti web.

+ +

CSS

+ +

Cominciamo col dare un'occhiata a CSS.

+ +

Semantiche corrette e aspettative dell'utente

+ +

È possibile usare CSS per modificare in qualsiasi modo l'aspetto di qualsiasi elemento HTML, ma questo non significa che lo devi fare obbligatoriamente. Come abbiamo detto più volte nell'articolo HTML: una buona base per l'accessibilità, dovresti utilizzare sempre l'elemento semantico più appropriato per ogni situazione, a meno che sia davvero impossibile. Se non lo fai, puoi causare confusione e problemi di usabilità a tutti gli utenti, e in particolare a quelli con disabilità. Usare le semantiche corrette significa soprattutto venire incontro alle aspettative degli utenti: gli elementi devono apparire e funzionare secondo certi criteri, a seconda della loro funzione, e gli utenti si aspettano che queste convenzioni siano rispettate. 

+ +

Per esempio, un utente che usa lettore di schermo non può navigare una pagina attraverso gli elementi di heading se lo sviluppatore del sito non ha usato gli heading appropriati per etichettare il contenuto. Allo stesso modo, un heading perde la sua funzione visuale se lo hai modificato fino al punto in cui non appare più come un heading.

+ +

La regola generale è che puoi modificare lo stile di un elemento perchè sia congruente con lo stile generale del tuo sito, ma non modificarlo tanto da far si che non appaia o agisca come ci si aspetterebbe. Le sezioni seguenti riassumono i principali elementi HTML da prendere in considerazione.

+ +

Struttura del contenuto testuale "standard"

+ +

Heading, paragrafi, liste... Il contenuto testuale principale della tua pagina:

+ +
<h1>Heading</h1>
+
+<p>Paragrafo</p>
+
+<ul>
+  <li>Lista</li>
+  <li>Lista di due elementi.</li>
+</ul>
+ +

Un codice CSS tipico potrebbe essere il seguente:

+ +
h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}
+ +

Dovresti:

+ + + +

Vedi gli articoli in inglese  Fondamenti di testo in HTML e Modificare lo stile del testo per maggiori informazioni.

+ +

Testo enfatizzato

+ +

L'etichetta <em> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <strong> ha lo stesso scopo, ma mostra il testo in grassetto:

+ +
<p>L'acqua è <em>molto calda</em>.</p>
+
+<p>Le gocce d'acqua che si formano su una suoerficie sono chiamate <strong>condensa</strong>.</p>
+ +

Potresti aggiungere un colore particolare per il testo in evidenza:

+ +
strong, em {
+  color: #a60000;
+}
+ +

Ad ogni modo, raramente avrai bisogno di modificare lo stile di elementi enfatizzati. Gli stili standard grassetto e corsivo sono molto riconoscibili, e modificarli potrebbe creare confusione. Per maggiori informazioni sull'enfasi vedi l'articolo in inglese Enfasi e importanza.

+ +

Abbreviazioni

+ +

l'etichetta <abbr> indica una abbreviazione o un acronimo, e permette, tramite l'attributo title, di fornire la versione estesa della frase o parola abbreviata:

+ +
<p>Il contenuto di un sito è codificato tramite <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

Anche in questo caso potresti voler apportare qualche semplice modifica allo stile:

+ +
abbr {
+  color: #a60000;
+}
+ +

Lo standard riconosciuto per indicare le abbreviazioni è una sottolineatura punteggiata, ed è raccomandabile non modificarlo significativamente. Per maggiori dettagli sulle abbreviazioni, vedi l'articolo in inglese Abbreviazioni.

+ + + +

I link sono il mezzo con cui ti muovi da un punto all'altro della rete:

+ +
<p>Visita la <a href="https://www.mozilla.org">homepage di Mozilla</a>.</p>
+ +

Qui sotto sono riportate alcune semplici modifiche allo stile dei link:

+ +
a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}
+ +

Lo stile di default per i link è la sottolineatura, inoltre si presentano in diversi colori a seconda del loro stato: blu è il colore nello stato di default, viola nel caso il link sia stato visitato, rosso quando si "attiva" cliccandoci sopra. Oltre a ciò, il puntatore del mouse cambia forma quando lo si passa su un link, e il link viene messo in evidenza quando riceve focus (per esempio tramite tast TAB). Nell'immagine qui sotto possiamo vedere l'evidenziazione di un link in Firefox (cornice punteggiata) e Chrome (cornice azzurra):

+ +

+ +

+ +

Puoi modificare lo stile dei link come più ti piace, ma facendo attenzione a fornire agli utenti un feedback quando interagiscono coi link. Quando un link cambia di stato si dovrebbe notare. Inoltre, evita di rimuovere stili di default come il cambio di puntatore del mouse o l'evidenziazione quando un link riceve focus: entrambi sono molto importanti per l'accessibilità degli utenti che usano tastiera.

+ +

Formulari

+ +

I formulari sono elementi che permettono agli utenti di introdurre dati in un sito web:

+ +
<div>
+  <label for="nome">Introduci il tuo nome</label>
+  <input type="text" id="nome" name="nome">
+</div>
+ +

Puoi vedere un buon esempio di uso di CSS  in un formulario qui: form-css.html (vedi anche la versione live).

+ +

La maggior parte del codice CSS che scriverai per i formulari sarà per modificare le dimensioni degli elementi, allineare elementi label e input e migliorarne l'aspetto esteriore.

+ +

Non dovresti comunque modificare troppo il feedback visuale che gli elementi di un formulario mostrano quando ricevono focus, che è in pratica lo stesso dei link (vedi sopra). Puoi modificare l'aspetto delle evidenziazioni applicate agli elementi del formulario quando ricevono focus o hover del puntatore del mouse per far si che lo stile del tuo sito sia consistente sui diversi browser, ma evita di rimuoverle. Come già detto, alcuni utenti contano su tali "segnali" per poter interpretare ciò che sta accadendo mentre navigano un sito.

+ +

Tabelle

+ +

Prendiamo ora in considerazione le tabelle che si usano per presentare dati.

+ +

Puoi vedere un buon esempio di tabella costruita con HTML e CSS qui:  table-css.html (vedi anche la versione live).

+ +

Il codice CSS applicato alle tabelle serve in genere a uniformarle allo stile generale del sito e a migliorarle esteticamente. Alcune buone pratiche sono ad esempio far si che gli header(intestazioni di file o colonne) della tabella siano in risalto, per esempio usando il grassetto, e far uso di una alternanza di sfondo chiaro e scuro per rendere più facile la distinzione tra le varie file della tabella.

+ +

Colore e contrasto

+ +

Quando scegli uno schema di colori per il tuo sito, assicurati che il testo abbia un colore che contrasta bene con lo sfondo. Un basso contrasto dei colori può produrre un effetto interessante dal punto di vista estetico, ma renderà molto difficile poter leggere il tuo contenuto alle persone con problemi visivi come il daltonismo.

+ +

C'è un modo molto facile per verificare se il contrasto che hai scelto è abbastanza alto da non causare problemi. Ci sono numerosi siti che ti permettono di introdurre il colore del testo e quello dello sfondo, per verificarne il contrasto. Per esempio il sito Color Contrast Checker è facile da usare, e fornisce una spiegazione (in inglese) dei criteri WCAG (Linee guida per l'accessibilità dei contenuti Web) sul contrasto dei colori.

+ +
+

Nota: un contrasto alto sarà d'aiuto per poter leggere con maggiore facilità anche a chi si connette tramite telefono o tablet in ambienti con molta luce, come un parco o una piazza. 

+
+ +

Un altro consiglio è di non fare affidamento solo sul colore per fornire un certo tipo di informazioni o segnali, in quanto tali informazioni non potranno essere interpretate da chi non vede i colori. Per esempio, invece di limitarti a marcare in rosso i campi di un formulario che sono da compilare obbligatoriamente, marcali anche con un asterisco.

+ +

Nascondere elementi

+ +

Ci sono molte situazioni nelle quali è necessario che non tutto il contenuto sia mostrato allo stesso tempo. Per esempio nel nostro info box a schede (vedi codice sorgente) abbiamo tre schede con informazioni posizionate una sopra l'altra, e ci sono tre bottoni cliccabili per passare da una scheda all'altra (il box è accessibile anche da tastiera, usando il tasto TAB per spostarsi tra i bottoni e INVIO per selezionare una scheda).

+ +

+ +

Gli utenti che usano lettori di schermo non avranno problemi a leggere tutte le schede, l'importante è che l'ordine del contenuto sia sensato. Usare position: absolute (come nel nostro esempio) è in generale considerato come uno dei migliori metodi per nascondere contenuto, perchè non impedisce ai lettori di schermo di leggerlo.

+ +

D'altro canto, non dovresti usare {{cssxref("visibility")}}:hidden o {{cssxref("display")}}:none, perchè nascondono il contenuto ai lettori di schermo. A meno che, ovviamente, ci sia una buona ragione per nascondere questo contenuto ai lettori di schermo.

+ +
+

Nota: l'articolo in inglese Contenuto visibile solo ai lettori di schermo fornisce molti più dettagli su questo argomento.

+
+ +

È possibile che gli utenti modifichino lo stile dei tuoi elementi

+ +

A volte gli utenti alterano gli stili che hai impostato sostituendoli con stili personalizzati. Per esempio:

+ + + +

Gli utenti modificano il CSS per differenti ragioni: un utente con problemi di vista potrebbe voler ingrandire automaticamente il testo su tutti i siti che visita, un utente con daltonismo potrebbe voler aumentare il contrasto dei colori per facilitare la lettura. Qualunque sia la ragione, dovresti tenere in considerazione questa possibilità, e usare un disegno del tuo sito che sia sufficientemente flessibile per poter gestire tali cambi. Per esempio, dovresti assicurarti che l'area dove è situato il tuo contenuto principale può supportare un ingrandimento del testo, mantenendone il formato base e senza farne scomparire parti.

+ +

JavaScript

+ +

 

+ +

Anche JavaScript può causare problemi di accessibilità, dipendendo da come si utilizza.

+ +

JavaScript è un linguaggio molto potente, e possiamo usarlo per compiere un'infinità di funzioni, da semplici aggiornamenti del contenuto o della IU a giochi completi in 2D o 3D. Nessuna regola dice che tutto il contenuto deve essere accessibile al 100% a tutti, ma devi fare tutto il possibile, e cercare di rendere le tue applicazioni il più accessibili possibile.

+ +

Il contenuto e gli elementi funzionali semplici sono relativamente facili da rendere accessibili: per esempio testo, immagini, tabelle, formulari e bottoni. Come abbiamo visto nell'articolo HTML: una buona base per l'accessibilità, le considerazioni chiave sono:

+ + + +

Abbiamo inoltre visto un esempio di uso di JavaScript per migliorare l'accessibilità aggiungendo una funzionalità che mancava (vedi Implementare l'accessibilità da tastiera in un secondo tempo). Questo procedimento non è ideale, visto che si dovrebbe usare l'elemento più appropriato per ogni funzione sin dall'inizio, ma dimostra che è possibile intervenire sul codice in situazioni in cui è necessario modificarlo dopo la sua creazione. Un altro modo per migliorare l'accessibilità degli elementi che usano JavaScript non semantico è usare la tecnologia WAI-ARIA per fornire valore semantico extra per gli utenti che usano lettori di schermo. Il prossimo articolo spiegherà in dettaglio come farlo.

+ +

Funzionalità complesse come i giochi in 3D non sono tanto facili da rendere accessibili. Un gioco 3D creato usando WebGL si svilupperà su un elemento {{htmlelement("canvas")}} , che al momento non permette di fornire alternative testuali o altre informazioni utili per persone con disabilità visiva. Si può ragionevolmente obbiettare che un tale tipo di gioco non ha nel suo target di utenza persone non vedenti, e in effetti sarebbe esagerato pretendere di renderlo accessibile al 100%. Ma ad ogni modo è consigliabile implementare alcuni elementi di accessibilità come i controlli da tastiera, che permettono di giocare anche a utenti senza mouse, e assicurarsi che lo schema dei colori abbia un contrasto sufficientemente alto per essere usabile da persone con daltonismo.

+ +

Il problema di un uso eccessivo di JavaScript

+ +

Spesso gli sviluppatori di siti fanno un uso eccessivo di JavaScript. A volte si trovano siti in cui tutto è stato fatto con JavaScript, perfino HTML e CSS sono stati generati con JavaScript. Questo tipo di siti presentano grossi problemi di accessibilità e non solo, ed è sconsigliato sviluppare siti in questo modo.

+ +

Così come devi usare il giusto elemento per ogni funzione, assicurati anche di star usando la giusta tecnologia! Pensa bene se vale davvero la pena ricorrere a JavaScript per creare un pannello informazioni in 3D, mentre un semplice pannello testuale potrebbe essere sufficiente. Chiediti se hai davvero bisogno di un formulario basato su un widget super complesso, quando magari un semplice campo di input testuale andrebbe bene. E non generare tutto il tuo contenuto HTML con JavaScript.  

+ +

Mantieni un uso non intrusivo di JavaScript

+ +

Dovresti usare JavaScript con discrezione quando crei il tuo contenuto. L'idea di base è che JavaScript dovrebbe essere usato quando possibile per migliorare una funzionalità, ma non per costruirla. Le funzioni più basiche del sito dovrebbero essere indipendenti da JavaScript, anche se a volte ciò non è possibile. Una buona pratica è usare funzionalità già presenti nei browser quando è possibile.

+ +

Buoni esempi di uso non intrusivo di JavaScript sono:

+ + + +

Per fare un esempio abbiamo creato un semplice formulario con validazione dal lato cliente, vedi: form-validation.html (vedi anche la versione live). Nella pagina vedrai un formulario, e, quando provi a inviarlo, se avrai lasciato uno o entrambi i campi vuoti apparirà un messaggio di errore per spiegarti qual è il problema.

+ +

Questo tipo di validazione di un formulario è non intrusiva, puoi infatti usare il formulario anche con JavaScript disabilitato, e inoltre il formulario dovrà comunque essere validato anche dal lato server, poichè sarebbe troppo facile per un utente con cattive intenzioni bypassare la validazione dal lato cliente (per esempio disattivando JavaScript nel browser). La validazione dal lato cliente è utile per segnalare istantaneamente eventuali errori all'utente, senza dover attendere la risposta del server, migliorando così l'usabilità del formulario.

+ +
+

Nota: nel nostro esempio la validazione dal lato server non è stata implementata. 

+
+ +

Abbiamo inoltre reso la validazione di questo formulario accessibile, usando l'elemento {{htmlelement("label")}} per assicurarci che ogni campo di input abbia associata una etichetta senza alcuna ambiguità, di modo che i lettori di schermo possano leggere il blocco input+etichetta come una sola unità:  

+ +
<label for="nome">Inserisci il tuo nome:</label>
+<input type="text" name="nome" id="nome">
+ +

La validazione avviene solo al momento dell'invio del formulario. In questo modo la IU non viene aggiornata troppo spesso potendo causare confusione negli utenti che usano lettori di schermo (e anche in quelli che non li usano):

+ +
form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(var i = 0; i < formItems.length; i++) {
+    var testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}
+ +
+

Nota: in questo esempio stiamo nascondendo e mostrando il messaggio di errore usando position: absolute invece che un altro metodo come visibility: hidden o display: none, perchè in questo modo il lettore di schermo potrà leggerlo senza problemi.  

+
+ +

Una validazione reale sarebbe molto più complessa, dovremmo controllare che il nome introdotto sembri effettivamente un nome, che l'età sia un numero e che sia realistica (per esempio non può essere un numero negativo, o di 4 cifre). Nell'esempio abbiamo implementato solo un sistema di verifica che controlla se i campi sono stati riempiti o no (if(testItem.input.value === '')).

+ +

Quando la validazione ha terminato con esito positivo, il formulario viene inviato. Se ci sono errori (if(errorList.innerHTML !== '')) l'invio viene bloccato (usando preventDefault()), e si mostra il messaggio di errore (vedi sotto). Con questo meccanismo gli errori saranno mostrati solo se ci saranno effettivamente errori, migliorando l'usabilità. 

+ +

Per ogni campo del formulario che è vuoto al momento dell'invio creiamo un item con un link e lo inseriamo nella lista errori (errorList).

+ +
function createLink(testItem) {
+  var listItem = document.createElement('li');
+  var anchor = document.createElement('a');
+  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
+  anchor.href = '#' + testItem.input.name;
+  anchor.onclick = function() {
+    testItem.input.focus();
+  };
+  listItem.appendChild(anchor);
+  errorList.appendChild(listItem);
+}
+ +

Ogni link ha una doppia funzionalità: segnala il tipo di errore e inoltre cliccandoci sopra sposta il focus automaticamente sul campo vuoto da riempire.

+ +
+

Nota: il metodo focus() dell'esempio può creare confusione. Chrome e Edge (e le ultime versioni di IE) sposteranno il focus al campo relativo quando si clicca sul link, senza bisogno della funzione onclick/focus(). Safari si limiterà a evidenziare il campo, ma ha bisogno di onclick/focus() per spostare effettivamente il focus su di esso. Firefox al momento non è in grado di spostare il focus su un campo specifico, quindi il metodo non funzionerà su Firefox. Il problema dovrebbe essere risolto in futuro.

+
+ +

 

+ +

Inoltre, il messaggio di errore è stato posto in cima nel codice HTML (anche se poi viene visualizzato in un altro punto della pagina usando CSS per posizionarlo), di modo che l'utente, tornando in cima alla pagina, può sapere che errore c'è nel suo formulario e andare direttamente al campo in questione.

+ +

Come annotazione finale, si noti che abbiamo usato alcuni attributi WAI-ARIA nel nostro esempio, per aiutare a risolvere problemi di accessibilità causati da aree del contenuto che si aggiornano costantemente senza che la pagina si ricarichi (di default i lettori di schermo non segnaleranno ciò agli utenti):

+ +

 

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ +

Torneremo a occuparci più dettagliatamente di questo tipo di attributi nel prossimo articolo sulla tecnologia WAI-ARIA.

+ +
+

Nota: forse starai pensando che HTML5 include già alcuni meccanismi di validazione come gli attributi required, min/minlength, e max/maxlength. Non abbiamo fatto uso di tali attributi nell'esempio, perchè non presentano ancora un livello accettabile di compatibilità nei differenti browser (per esempio Safari non li supporta, Internet Explorer solo a partire dalla versione 10).

+
+ +
+

Nota: l'articolo in inglese Forme usabili ed accessibili di validazione di formulari e risoluzione di errori fornisce ulteriori utili informazioni su come creare un processo di validazione acessibile.

+
+ +

Altri problemi di accessibilità con JavaScript

+ +

Ci sono altri aspetti relativi all'accessibilità da tenere in conto quando si usa JavaScript. Ne aggiungeremo altri all'articolo in futuro.

+ +

Eventi specifici del mouse

+ +

Come forse già saprai, le interazioni dell'utente con il sito tramite mouse sono gestite in JavaScript usando i gestori di eventi (event handlers), che ci permettono di eseguire funzioni in risposta a determinati eventi attivati dalle azioni compiute dall’utente con il mouse. Alcuni esempi di eventi specificamente relativi al mouse sono mouseover, mouseout, dblclick, ecc. Le funzionalità associate a tali eventi non sono accessibili usando altri dispositivi, come per esempio la tastiera.  

+ +

Per attenuare i problemi di accessibilità che ne derivano, dovresti associare a tali eventi altri eventi simili ma che sono attivati in altra maniera (i cosiddetti gestori di eventi indipendenti dal dispositivo). Per esempio focus e blur forniscono accessibilità per gli utenti che navigano con la tastiera.

+ +

Vediamo ora un esempio che dimostra questo tipo di situazione. Supponiamo che in una pagina del nostro sito ci sia una immagine in miniatura, che si espande quando ci si passa sopra con il puntatore del mouse, oppure quando riceve focus (per esempio pensiamo al catalogo di un sito di e-commerce).

+ +

Abbiamo creato un esempio molto semplice, che puoi trovare qui: mouse-and-keyboard-events.html (vedi anche il codice sorgente). Il codice ha due funzioni per mostrare o nascondere l'immagine ingrandita; qui sotto vediamo il codice dei gestori degli eventi:

+ +
imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;
+ +

Le prime due linee di codice riguardano il mouse: la prima funzione si attiva al passare il puntatore del mouse sulla miniatura, mentre la seconda si attiva al togliere il puntatore dall'area della miniatura. Questo codice però non permette di vedere l'immagine ingrandita tramite tastiera. Per poterlo fare, abbiamo aggiunto le atre due linee di codice, che attivano le stesse funzioni quando la miniatura riceve focus o lo perde. Si può spostare il focus sulla miniatura usando il tasto TAB, perchè al codice HTML dell'elemento abbiamo aggiunto l'attributo  tabindex="0".

+ +

L'evento click è interessante, a prima vista potrebbe sembrare un evento esclusivamente relativo  al mouse, ma nella maggior parte dei browser il gestore di eventi onclick si attiverà anche premendo il tasto INVIO su un link o un elemento di formulario con focus, o quando si clicca sull'elemento con il dito se si usa un dispositivo con touchscreen.

+ +

Tieni presente comunque che questo non funziona nel caso in cui si usi tabindex per dare il focus a un elemento che di default non lo potrebbe avere. In casi come questo devi rilevare quando il tasto specifico è premuto (vedi Implementare l'accessibilità da tastiera in un secondo tempo).

+ +

Riassunto

+ +

 

+ +

Speriamo che questo articolo ti sia servito a capire meglio i problemi di accessibilità relativi all'uso di CSS e JavaScript sui tuoi siti o applicazioni.

+ +

E ora, WAI-ARIA!

+ +
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibilità/WAI-ARIA_basics", "Learn/Accessibilità")}}
diff --git a/files/it/learn/accessibility/html/index.html b/files/it/learn/accessibility/html/index.html new file mode 100644 index 0000000000..26129068e4 --- /dev/null +++ b/files/it/learn/accessibility/html/index.html @@ -0,0 +1,538 @@ +--- +title: 'HTML: una buona base per l''accessibilità' +slug: Learn/Accessibilità/HTML_accessibilità +tags: + - Accessibilità + - Articolo + - Bottoni + - Formulari + - HTML semantico + - Lettore di schermo + - Link + - Principiante + - TA + - Testo Alternativo + - tastiera + - tecnologie assistive +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}
+ +

Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e una idea chiara di cosa è l'accessibilità.
Obiettivo:Acquisire familiarità con le caratteristiche di HTML che hanno effetti positivi sull'accessibilità, e imparare a usarle correttamente nello sviluppo dei propri siti e applicazioni. 
+ +

HTML e accessibilità

+ +

 

+ +

Man mano che impari cose nuove su HTML (leggendo nuove risorse, analizzando esempi di codice, ecc.), ti accorgerai sicuramente di un tema ricorrente: l'importanza di usare HTML semantico (a volte chiamato POSH, Plain Old Semantic HTML). Ciò significa utilizzare il più possibile gli elementi HTML più corretti per il proprio scopo.

+ +

Forse ti chiederai perché è tanto importante. Dopotutto, puoi usare un combinazione di CSS e JavaScript per far sì che qualsiasi elemento HTML si comporti esattamente come tu vuoi. Per esempio, un bottone che controlla la riproduzione di un video sul tuo sito si potrebbe codificare così:

+ +

 

+ +
<div>Play video</div>
+ +

Ma, come vedrai in dettaglio più avanti, ha molto più senso usare un elemento più specifico:

+ +
<button>Play video</button>
+ +

Non solo l'elemento <button> presenta di default uno stile più appropriato alla sua funzione (anche se probabilmente in seguito modificherai tale stile), ma è anche perfettamente accessibile con la tastiera. Ciò significa che un utente che usa la tastiera per navigare potrà spostarsi da un bottone all'altro del sito usando il tasto TAB, e premere i bottoni usando INVIO.

+ +

L'HTML semantico non richiede più tempo per essere scritto del codice non-semantico se lo utilizzi con consistenza sin dal principio del progetto, e inoltre presenta numerosi altri benefici che vanno al di là dell'accessibilità:

+ +

 

+ +
    +
  1. Maggior facilità nello sviluppo — come già detto in precedenza, gli elementi HTML semantici hanno già integrate in sè alcune funzionalità aggiuntive. inoltre rendono il codice più facile da leggere e interpretare.
    2. +
  2. Miglior rendimento su dispositivi mobili — l'HTML semantico è più leggero del non-semantico, e più facile da rendere responsivo.
    3. +
  3. Utile per il SEO — i motori di ricerca danno maggior importanza alle parole chiave contenute in heading, link, ecc. rispetto a quelle contenute in generici <div> non-semantici, dunque i tuoi siti saranno più facili da trovare. 
    4. +
+ +

Ora vedremo più in dettaglio come produrre un codice HTML accessibile.

+ +
+

Nota: È una buona idea installare un lettore di schermo sul tuo computer, così che tu possa testare gli esempi mostrati più avanti. Vedi la guida in inglese Guida ai lettori di schermo per maggiori dettagli.

+
+ +

Semantiche corrette

+ +

 

+ +

Abbiamo già parlato dell'importanza di usare la giusta semantica, e perchè è importante usare i corretti elementi HTML per ogni situazione. Questa pratica non può essere ignorata, visto che è una delle principali situazioni in cui l'accessibilità viene compromessa se non si agisce propriamente.

+ +

Se si analizzano i siti presenti in rete, si noterà che ci sono casi di utilizzo molto poco ortodosso del codice HTML. Alcuni errori sono dovuti a pratiche ormai in disuso che non sono state debitamente aggiornate, altri semplicemente a ignoranza. In ogni caso, ogni volta che trovi del codice erroneo, dovresti fare il possibile per sistemarlo.

+ +

A volte non sei nella posizione di poter correggere del codice mal scritto, per esempio se le tue pagine si basano su un framework esterno su cui non hai controllo, o se sul tuo sito è presente contenuto di terze parti (come ad esempio banners pubblicitari) che non puoi modificare.

+ +

Comunque, tieni a mente che l'obiettivo non è "tutto o niente". Ogni piccolo miglioramento che riuscirai a implementare sarà utile alla causa dell'accessibilità.

+ +

Contenuto testuale

+ +

Uno dei più grandi aiuti per un utente che usa un lettore di schermo è una buona struttura del contenuto, diviso in headings, paragrafi, liste ecc. Un buon esempio può essere il seguente codice:

+ +
<h1>Titolo</h1>
+
+<p>Questa è la prima sezione del mio documento.</p>
+
+<p>Ecco qui un altro paragrafo.</p>
+
+<ol>
+  <li>Questa è</li>
+  <li>una lista</li>
+  <li>composta da</li>
+  <li>vari elementi</li>
+</ol>
+
+<h2>Sottosezione</h2>
+
+<p>Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!</p>
+
+<h2>Seconda sottosezione</h2>
+
+<p>Questa è la seconda sottosezione del mio documento.</p>
+ +

Abbiamo preparato un'altra versione più lunga che puoi provare a navigare con un lettore di schermo (vedi: buone-semantiche.html). Se provi a leggere tale pagina, ti renderai conto che è facile da navigare:

+ +
    +
  1. Il lettore di schermo legge ogni etichetta man mano che avanza nella lettura del contenuto, facendoti sapere quale è un heading, quale un paragrafo ecc.
    2. +
  2. Il lettore si ferma dopo ogni elemento, permettendoti di procedere al ritmo di lettura che ti è più comodo.
    3. +
  3. Nella maggior parte dei lettori di schermo, puoi saltare al precedente o seguente heading.
    4. +
  4. Molti lettori di schermo inoltre ti forniscono una lista di tutti gli heading presenti, permettendoti di avere un utile indice per trovare contenuti specifici. 
    5. +
+ +

A volte si scrivono headings e paragrafi usando HTML non semantico e salti di linea, come nel caso seguente:

+ +
<font size="7">Titolo</font>
+<br><br>
+Questa è la prima sezione del mio documento.
+<br><br>
+Ecco qui un altro paragrafo.
+<br><br>
+1. Questa è
+<br><br>
+2. una lista
+<br><br>
+3. composta da
+<br><br>
+4. vari elementi
+<br><br>
+<font size="5">Sottosezione</font>
+<br><br>
+Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!
+<br><br>
+<font size="5">Seconda sottosezione</font>
+<br><br>
+Questa è la seconda sottosezione del mio documento.
+ +

Se provi a leggere questa versione con un lettore di schermo (vedi cattive-semantiche.html), l’esperienza non ti risulterà positiva. Il lettore di schermo non avrà riferimenti che lo guidino, e non potrà fornirti un sommario dei contenuti. L'intera pagina gli apparirà come un blocco unico, e la leggerà tutta in una volta.

+ +

Ci sono inoltre altri problemi che vanno al di là dell'accessibilità: per esempio è difficile applicare stile al contenuto usando CSS, o manipolarlo con JavaScript, perchè non ci sono elementi da usare come selettori.

+ +

Usare un linguaggio chiaro

+ +

Anche il linguaggio che usi può avere un effetto sull'accessibilità. In generale dovresti usare un linguaggio chiaro e non troppo complesso, privo di termini gergali o eccessivamente tecnici. Ciò non è d'aiuto solo alle persone con disabilità cognitive o di altro tipo; è anche utile ad utenti per i quali il testo è scritto in una lingua che non conoscono bene, a utenti di età molto giovane... Di fatto, è utile a tutti! A parte ciò, dovresti anche fare attenzione a non usare termini e caratteri che risultino poco chiari se letti con un lettore di schermo. Per esempio:

+ + + +

Layout di pagina

+ +

Molto tempo fa, era pratica abituale creare layout di pagina con tabelle HTML, usando le celle di una tabella per contenere header, footer, barra laterale, la colonna del contenuto principale ecc. Questa non è una buona pratica, visto che un lettore di schermo molto probabilmente darà una lettura confusa delle celle, soprattutto se il layout è complesso e presenta sottotabelle secondarie.

+ +

Prova questo esempio: layout-tabella.html, che corrisponde al seguente codice:

+ +
<table width="1200">
+      <!-- fila del titolo della tabella -->
+      <tr id="titolo">
+        <td colspan="6">
+
+          <h1 align="center">Header</h1>
+
+        </td>
+      </tr>
+      <!-- fila del  menu di navigazione  -->
+      <tr id="nav" bgcolor="#ffffff">
+        <td width="200">
+          <a href="#" align="center">Home</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Our team</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Projects</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Contact</a>
+        </td>
+        <td width="300">
+          <form width="300">
+            <input type="search" name="q" placeholder="Search query" width="300">
+          </form>
+        </td>
+        <td width="100">
+          <button width="100">Go!</button>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- fila del contenuto principale e sezione laterale -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
+
+          <!-- contenuto principale -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Related</h2>
+
+          <!-- sezione laterale -->
+
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- fila del footer -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>©Copyright 2050 by nobody. All rights reversed.</p>
+        </td>
+      </tr>
+    </table>
+ +

 

+ +

Se provi a navigare la pagina con un lettore di schermo, probabilmente ti dirà che c'è una tabella (anche se alcuni lettori di schermo riescono a differenziare i layout a tabella dalle tabelle di dati). Poi dovrai (a seconda del lettore di schermo che stai usando) esplorare la tabella cella per cella, e infine uscirne per poter navigare il contenuto.

+ +

I layout a tabella son una reliquia del passato, avevano senso in un'epoca in cui non tutti i browser supportavano CSS, ma creano confusione per gli utenti che usano lettori di schermo, e inoltre sono una cattiva pratica per molte altre ragioni (per esempio richiedono una quantità maggiore di codice e rendono il disegno meno flessibile). Non usarli!

+ +

Puoi verificare queste affermazioni comparando le tue esperienze precedenti con un esempio di struttura più moderna del sito, che corrisponde al seguente codice:

+ +
<header>
+  <h1>Header</h1>
+</header>
+
+<nav>
+  <!-- navigazione principale -->
+</nav>
+
+<!-- contenuto principale -->
+<main>
+
+  <!-- articolo -->
+  <article>
+    <h2>Article heading</h2>
+
+    <!-- contenuto dell'articolo -->
+  </article>
+
+  <aside>
+    <h2>Related</h2>
+
+    <!-- contenuto della sezione laterale -->
+  </aside>
+
+</main>
+
+<!-- footer, usato in tutte le pagine del sito -->
+
+<footer>
+  <!-- contenuto del footer -->
+</footer>
+ +

Se provi questa nuova versione del sito con un lettore di schermo, vedrai che il layout del codice non è più un ostacolo alla lettura del contenuto. Inoltre puoi notare come sia molto più agile e leggero in termini di quantità di codice, cosa che implica una maggior facilità di gestione e mantenimento, e minor utilizzo di banda da parte dell'utente (molto utile per chi ha una connessione lenta).

+ +

Un'altro aspetto da tenere presente quando si creano layout è quello di usare HTML5 semantico, come visto nell'esempio precedente (vedi il compendio in inglese sezioni del contenuto). Potresti creare un layout usando solo elementi annidati {{htmlelement("div")}}, ma è molto meglio usare elementi specifici appropriati per distinguere le varie sezioni della pagina, come la sezione con gli elementi di navigazione ({{htmlelement("nav")}}), il footer ({{htmlelement("footer")}}), unità di contenuto che si ripetono ({{htmlelement("article")}}), ecc. Questi elementi forniscono un ulteriore contenuto semantico per i lettori di schermo (e per altri strumenti) per dare agli utenti indicazioni extra riguardo il contenuto che stanno navigando (vedi l'articolo in inglese Supporto dei nuovi elementi HTML5 di sezione nei lettori di schermo per farti un'idea dello stato del supporto nei lettori di schermo).

+ +
+

Nota: oltre ad una buona semantica ed un layout esteticamente apprezzabile, il tuo contenuto dovrebbe essere organizzato in un ordine logico. Puoi sempre muoverlo in seguito utilizzando CSS, ma il codice sorgente dovrebbe essere nel giusto ordine, di modo che gli utenti che usano lettori di schermo lo possano interpretare correttamente. 

+
+ +

Controlli di Interfaccia Utente

+ +

Con il termine “controlli IU” intendiamo i componenti di un sito con cui gli utenti interagiscono. I più comuni sono bottoni, link e formulari. In questa sezione analizzeremo gli aspetti basici da tenere in considerazione quando si creano tali elementi. Più avanti gli articoli su WAI-ARIA e multimedia prenderanno in considerazione altri aspetti dell'accessibilità IU.

+ +

Un aspetto chiave dell'accessibilità dei controlli IU è che di default i browser permettono di interagire con essi tramite tastiera. Puoi fare una prova usando il nostro esempio accessibilità-tastiera-nativa.html (vedi il codice sorgente): apri la pagina in una nuova scheda e prova a premere il bottone TAB; dopo averlo premuto qualche volta, dovresti vedere il focus muoversi da un elemento all'altro della pagina. Gli elementi con focus hanno un sistema di evidenziazione per rendere chiaro quale elemento è selezionato al momento. Questo sistema varia leggermente da browser a browser.

+ +

+ +

Dopo averlo selezionato tramite TAB, puoi usare il tasto INVIO per premere un bottone (nell'esempio i bottoni quando premuti producono un messaggio di avviso); allo stesso modo, premendo INVIO puoi aprire un link che hai selezionato. Inoltre, dopo averlo selezionato con il tasto TAB, puoi scrivere in un campo del formulario, o selezionare un elemento dal menu a tendina usando i tasti freccia della tastiera.

+ +
+

Nota: i vari browser possono presentare differenti opzioni di controllo da tastiera. Vedi l'articolo in inglese Accessibilità con la tastiera per maggiori dettagli.

+
+ +

In ogni caso tutti  i browser sono già preconfigurati per la navigazione con tastiera, l'unica cosa di cui devi preoccuparti è usare gli elementi HTML correttamente. Per esempio:

+ +
<h1>Links</h1>
+
+<p>Questo è un link a <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p>Un altro link, a <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Bottoni</h2>
+
+<p>
+  <button data-message="Questo messaggio viene dal primo bottone">Cliccami!</button>
+  <button data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</button>
+  <button data-message="Questo messaggio viene dal terzo bottone">E me!</button>
+</p>
+
+<h2>Formulario</h2>
+
+<form>
+  <div>
+    <label for="name">Inserisci il tuo nome:</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Inserisci la tua età:</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood">Come ti senti?</label>
+    <select id="mood" name="mood">
+      <option>Felice</option>
+      <option>Triste</option>
+      <option>Arrabbiato</option>
+      <option>Preoccupato</option>
+    </select>
+  </div>
+</form>
+ +

Questo significa usare link, bottoni, elementi del formulario ed etichette appropriatamente (includendo l'elemento {{htmlelement("label")}} nei campi del formulario).

+ +

Purtroppo a volte queste buone pratiche non sono rispettate. Ad esempio, a volte si trovano bottoni codificati usando elementi {{htmlelement("div")}}:

+ +
<div data-message="Questo messaggio viene dal primo bottone">Cliccami!</div>
+<div data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</div>
+<div data-message="Questo messaggio viene dal terzo bottone">E me!</div>
+ +

Questo modo di scrivere codice è altamente sconsigliato: non solo perdi l'accessibilità da tastiera che avresti avuto automaticamente usando l'etichetta {{htmlelement("button")}}, ma perdi anche gli stili CSS di default che l'etichetta {{htmlelement("button")}} contiene.

+ +

Implementare l'accessibilità da tastiera in un secondo tempo

+ +

Risolvere problemi di accessibilità da tastiera in un sito già ultimato può richiedere un certo sforzo (per un esempio vedi la pagina   falsi-bottoni-usando-div.html e il suo  codice sorgente). In questo esempio abbiamo dato ad alcuni bottoni, erroneamente creati con una etichetta <div>, la possibilità di ricevere focus tramite tasto TAB fornendo a ognuno l'attributo tabindex="0":

+ +
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0">Cliccami!</div>
+<div data-message="Questo messaggio viene dal secondo bottone" tabindex="0">Clicca anche me!</div>
+<div data-message="Questo messaggio viene dal terzo bottone" tabindex="0">E me!</div>
+ +

L'attributo {{htmlattrxref("tabindex")}} è stato creato per dare agli elementi selezionabili tramite tasto TAB un ordine di focus personalizzato (specificato con numeri positivi in ordine crescente), differente dall'ordine standard con cui sono presenti nel codice sorgente. In generale questa non è una buona pratica, e può causare confusione nell'utente. Questo attributo sarebbe da usare solo in casi particolari, per esempio se il layout mostra gli elementi in una forma molto diversa dal codice sorgente. Ma ci sono altri due possibili usi di tabindex che sono utili per l'accessibilità:

+ + + +

L'uso di tabindex rende i bottoni creati erroneamente usando <div> selezionabili tramite tasto TAB, ma non ci permette di cliccarli usando INVIO. Per renderli cliccabili, dobbiamo ricorrere a Javascript:  

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // Il tasto ENTER
+    document.activeElement.onclick(e);
+  }
+};
+ +

Spiegazione del codice: abbiamo aggiunto un listener al documento, di modo che il codice rileva ogni occasione in cui un tasto della tastiera viene premuto. Tramite la proprietà KeyCode il codice individua quale tasto è stato premuto. Se il tasto premuto è INVIO, la funzione associata tramite onclick al bottone attualmente selezionato viene eseguita. La linea document.activeElement.onclick() serve proprio a rilevare l'elemento che attualmente sta ricevendo focus nella pagina, in questo caso il bottone che abbiamo selezionato tramite tasto TAB. 

+ +
+

Nota: Tieni presente che questa tecnica funzionerà solo se usi onclick. Usare addEventListener non funzionerà.

+
+ +

Come vedi, implementare l'uso della tastiera in un secondo momento non è un lavoro semplice né veloce, e inoltre può causare malfunzionamenti del sito. È molto meglio utilizzare l'elemento più appropriato per ogni funzionalità del sito sin dal principio.

+ +

Usare testi con significato

+ +

Una interfaccia utente che presenta une nomenclatura chiara ed esplicativa è utile a tutti, ma avere testi ed etichette curati nei dettagli è particolarmente importante per gli utenti che hanno una disabilità.

+ +

Assicurati che i tuoi bottoni e i tuoi link presentino testi facilmente comprensibili e che distinguano bene un elemento dall'altro. Non usare frasi come "Clicca qui", perchè gli utenti che usano lettori di schermo possono avere difficoltà a distinguere la funzione o destinazione del bottone o link, soprattutto se ce ne sono molti nella pagina. La seguente immagine mostra alcuni campi di un formulario così come sono letti da VoiceOver.

+ +

+ +

Assicurati che i nomi che assegni agli elementi abbiano senso anche se letti fuori dal loro contesto, allo stesso modo in cui hanno senso nel contesto del paragrafo in cui sono contenuti. Il seguente esempio mostra un esempio di costruzione corretta del testo di un link:

+ +
<p>Le balene sono creature davvero straordinarie. <a href="balene.html">Scopri di più sulle balene</a>.</p>
+ +

Mentre questo è un esempio di cattivo uso:

+ +
<p>Le balene sono creature davvero straordinarie. Per saperne di più sulle balene, <a href="balene.html">clicca qui</a>.</p>
+ +
+

Nota: Puoi saperne di più sulle migliori pratiche di implementazione di link nel nostro articolo (in inglese) Creazione di link. Puoi inoltre vedere esempi di buona costruzione di link nella pagina buoni-link.html ed esempi di link mal costruiti nella pagina cattivi-link.html.

+
+ +

Un altro elemento importante sono le etichette <label> dei formulari, che forniscono una indicazione su cosa l'utente deve inserire nel campo del formulario. Il seguente esempio può sembrare una maniera corretta di implementare un campo di formulario:

+ +
Scrivi il tuo nome: <input type="text" id="nome" name="nome">
+ +

Tuttavia, questo campo non sarebbe utile a utenti con disabilità visiva. Non c'è nessuna indicazione non visuale che associ chiaramente il campo di input con il testo "Scrivi il tuo nome:". Se navighi questo elemento con un lettore di schermo, potresti ricevere una descrizione generica tipo "scrivi testo qui".

+ +

Il seguente è un esempio molto migliore:

+ +
<div>
+  <label for="nome">Scrivi il tuo nome:</label>
+  <input type="text" id="nome" name="nome">
+</div>
+ +

Con questo codice, il testo sarà chiaramente associato al campo di input; il lettore di schermo pronuncerà una frase come: "Scrivi il tuo nome: scrivi testo qui". 

+ +

Inoltre, nella maggior parte dei browser associare un testo a un campo di input tramite etichetta <label> permette di selezionare/attivare il campo input cliccando anche sul testo oltre che sul campo stesso. Ciò rende molto più facile selezionare il campo in cui scrivere.

+ +
+

Nota: Puoi vedere esempi di formulari ben costruiti nella pagina esempi-di-buoni-form.html ed esempi di formulari poco accessibili nella pagina esempi-di-cattivi-form.html.

+
+ +

Tabelle dati accessibili

+ +

Una tabella dati basica si può scrivere in modo molto semplice, come per esempio:

+ +
<table>
+  <tr>
+    <td>Nome</td>
+    <td>Età</td>
+    <td>Genere</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Maschio</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Femmina</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Femmina</td>
+  </tr>
+</table>
+ +

Ma questo codice può causare problemi: non dà agli utenti che usano lettori di schermo la possibilità di associare file e colonne in gruppi di dati relazionati tra loro. Per rendere ciò possibile devi sapere quali elementi della tabella sono header di file o colonne. Nel caso della tabella qui sopra ciò è possibile solo visualizzandola (vedi tabella-incorretta.html).

+ +

Ora invece considera l'esempio tabella gruppi punk. Puoi notare alcune aggiunte nel codice che migliorano l'accessibilità:

+ + + +
+

Nota: vedi l'articolo in inglese Caratteristiche avanzate delle tabelle HTML e accessibilità per maggiori dettagli sull'accessibilità delle tabelle dati.

+
+ +

Alternative testuali

+ +

Mentre il contenuto testuale è per sua natura accessibile, non si può dire lo stesso per il contenuto multimediale: immagini e video non possono essere visualizzati da persone con disabilità visiva grave, e il contenuto audio è difficile o impossibile da ascoltare per persone con disabilità auditiva. Ci occuperemo dell’accessibilità del contenuto audio e video in un altro articolo, in questa sezione tratteremo il tema dell'accessibilità per gli elementi {{htmlelement("img")}}.

+ +

Proponiamo qui un semplice esempio, immagine-accessibile.html, nel quale possiamo vedere 4 copie della stessa immagine.

+ +

Riportiamo qui sotto il relativo codice HTML tradotto all'italiano (nella pagina del link sarà in inglese):

+ +
<img src="dinosauro.png">
+
+<img src="dinosauro.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
+
+<img src="dinosauro.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."
+     title="Il dinosauro rosso di Mozilla">
+
+
+<img src="dinosauro.png" aria-labelledby="dino-label">
+
+<p id="dino-label">Il Tirannosauro Rex rosso di Mozilla: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</p>
+
+ +

La prima immagine, se si usa un lettore di schermo, non è molto accessibile. Per esempio VoiceOver leggerebbe il nome del file come "dinosauro.png, immagine". L'utente saprebbe almeno che nell'immagine è rappresentato un dinosauro di qualche tipo. Ma spesso le immagini che si trovano su internet non hanno neanche un titolo minimamente descrittivo come “dinosauro.png”, e usano invece come titoli codici alfanumerici o nomi generati automaticamente (per esempio da una macchina fotografica), che non forniscono alcun tipo di contesto riguardo al contenuto dell'immagine.

+ +
+

Nota: non dovresti mai includere contenuto testuale in una immagine. I lettori di schermo non lo possono leggere. Ci sono inoltre altri svantaggi, per esempio non è possibile selezionarlo e copiarlo. Non farlo! 

+
+ +

Nel caso della seconda immagine, un lettore di schermo leggerà tutto l'attributo alt: "Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.".

+ +

Dunque è importante fornire alle immagini nomi descrittivi, e anche assicurarsi di fornire testo alternativo ogni volta che è possibile. Fai attenzione a fornire nell'attributo alt un testo che sia una rappresentazione il più possible diretta del contenuto dell'immagine. Evita di includere informazioni extra che non riguardano direttamente l'immagine.

+ +

Un altro aspetto da considerare è se un'immagine ha un significato importante nel contesto del contenuto in cui si trova, o se si tratta solo di un'immagine decorativa. Se un’immagine è solo decorativa, è meglio includerla nella pagina con la proprietà background-image di CSS piuttosto che con l’etichetta <img>.

+ +
+

Nota: Leggi Immagini in HTML e Immagini reattive per saperne di più sulle pratiche ottimali per l'implementazione delle immagini.

+
+ +

Se desideri fornire informazioni contestuali extra, dovresti includerle nel testo vicino all'immagine, o usare un attributo title, come mostrato nel codice della terza immagine. La maggior parte dei lettori di schermo leggerà il testo alternativo, il testo dell'attributo title, e il nome del file. Inoltre, i browser mostrano il testo contenuto in title quando un utente passa sopra l'immagine con il puntatore del mouse.

+ +

+ +

Diamo ora un'occhiata al codice della quarta immagine:

+ +
<img src="dinosauro.png" aria-labelledby="dino-label"> <p id="dino-label">Il Tirannosauro...</p>
+ +

In questo caso non stiamo usando l'attributo alt. Invece, abbiamo presentato la descrizione dell'immagine come un normale paragrafo, le abbiamo assegnato un id, e poi abbiamo usato l'attributo aria-labelledby  associandolo all'id. In questo modo i lettori di schermo useranno il paragrafo come testo alternativo per l'immagine. Questo metodo è utile nel caso in cui si voglia usare lo stesso testo alternativo per multiple immagini, procedimento che è sconsigliabile implementare usando l’attributo alt

+ +
+

Nota: aria-labelledby è parte della specificazione WAI-ARIA, che permette agli sviluppatori di aggiungere valore semantico extra al loro codice e migliorare l'accessiblità per i lettori di schermo. Per saperne di più su come funziona, leggi l'articolo basi di WAI-ARIA.

+
+ +

Altri metodi di testo alternativo

+ +

Ci sono anche altri metodi per associare alle immagini un testo che le descriva. Per esempio, c'è un attributo chiamato longdesc che permette di richiamare descrizioni dettagliate delle immagini presenti in una pagina da un documento HTML esterno. Per esempio:

+ +
<img src="dinosauro.png" longdesc="dino-info.html">
+ +

Questa può sembrare una soluzione ottimale, soprattutto per immagini con grandi contenuti informativi come grafici che rappresentano statistiche o risultati. Ma purtroppo l'attributo longdesc non è supportato con consistenza dai lettori di schermo, e inoltre il suo contenuto è totalmente inaccessibile agli utenti che non usano lettori di schermo. Si raccomanda dunque di includere la descrizione testuale nella stessa pagina in cui si trova l'immagine, o rimandare alla descrizione con un link standard.

+ +

In HTML5 sono inclusi inoltre altri due elementi, {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, che servono ad associare un elemento figurativo (non necessariamente un'immagine) ad una didascalia: 

+ +
<figure>
+  <img src="dinosauro.png" alt="Il Tirannosauro di Mozilla">
+  <figcaption>Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</figcaption>
+</figure>
+ +

Purtroppo anche in questo caso la maggior parte dei lettori di schermo non è ancora in grado di interpretare correttamente gli elementi {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, ma l'uso di questi elementi può essere comunque utile per effettuare modifiche allo stile tramite CSS; inoltre questi elementi danno la possibilità di collocare la descrizione di una immagine nello stesso punto in cui l'immagine è inserita nel codice.

+ +

Attributi alt vuoti

+ +
<h3>
+  <img src="icona-articolo.png" alt="">
+  Tirannosauro Rex: il re dei dinosauti
+</h3>
+ +

In alcuni casi un'immagine viene inclusa in una pagina con uno scopo puramente decorativo. Come puoi notare nel codice qui sopra, l'attributo alt dell'immagine è lasciato vuoto. Questo procedimento permette ai lettori di schermo di riconoscere la presenza di un'immagine, evitando però di fornirne una descrizione (pronuncerebbero solo una frase come "immagine").

+ +

La ragione per cui è buona pratica usare un attributo alt vuoto invece di non includerlo del tutto è perchè molti lettori di schermo, nel caso in cui non incontrino nessun attributo alt associato a un'immagine, leggono al suo posto l'URL dell'immagine. Nell'esempio qui sopra, l'immagine ha una funzione decorativa dell'heading a cui è associata. In casi come questo, e in tutti i casi in cui un'immagine ha una funzione puramente decorativa e nessun valore di contenuto, dovresti associarle un attributo alt vuoto (alt=""). Un'alternativa è usare l'attributo ARIA role (con forma: role="presentation"), che indica ai lettori di schermo di non leggere il testo alternativo.

+ +
+

Nota: se possibile è meglio usare CSS per mostrare immagini con funzione puramente decorativa.

+
+ +

Riassunto

+ +

Dopo aver letto questo articolo dovresti avere un’idea piuttosto chiara di come scrivere HTML accessibile nella maggior parte delle situazioni. Il nostro articolo su WAI-ARIA ti darà informazioni più approfondite, ma con quanto hai già letto e imparato sei in possesso di una buona base. Nei prossimi articoli esploreremo CSS e JavaScript, e come l'accessibilità è influenzata dal loro corretto o incorretto utilizzo.

+ +

{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}

diff --git a/files/it/learn/accessibility/index.html b/files/it/learn/accessibility/index.html new file mode 100644 index 0000000000..57dee47809 --- /dev/null +++ b/files/it/learn/accessibility/index.html @@ -0,0 +1,67 @@ +--- +title: Accessibilità +slug: Learn/Accessibilità +tags: + - ARIA + - Accessibilità + - Articoli + - CSS + - Guida accessibilità + - HTML + - Imparare accessibilità + - JavaScript + - Lezioni accessibilità + - Manuale accessibiltà + - Moduli + - Principiante + - Sviluppo Web + - imparare +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

Imparare HTML, CSS e Javascript è fondamentale se vuoi diventare uno sviluppatore web, ma la tua preparazione deve andare al di là del semplice utilizzo delle tecnologie di programmazione web: devi imparare ad utilizzarle in modo responsabile, in maniera tale da massimizzare il numero di utenti che possano usufruire pienamente dei tuoi siti, senza lasciare nessuno chiuso fuori. Per ottenere questi risultati devi seguire con attenzione alcune linee guida (che sono indicate nelle sezioni HTML, CSS, e JavaScript), praticare test su differenti browser e prendere in considerazione l'accessibilità sin dal principio dei tuoi progetti di sviluppo web. In questo modulo ci occuperemo in dettaglio di quest'ultimo aspetto.

+ +

Prerequisiti

+ +

Per ottenere il massimo da questo modulo, è consigliabile aver seguito almeno i primi due moduli delle sezioni HTML, CSS, e JavaScript, oppure, ancor meglio, seguire le varie parti del modulo sull'accessibilità mentre studi (o rivedi) le relative sezioni di HTML, CSS, e JavaScript.  

+ +
+

Nota: Se stai usando un computer, tablet o altro dispositivo sul quale non hai la possibilità di creare files, puoi testare la maggior parte degli esempi di codice che troverai in questo modulo usando un programma online come JSBin o Thimble.

+
+ +

Guide

+ +
+
Cos'è l'accessibilità?
+
Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.
+
HTML: una buona base per l'accessibilità
+
Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.
+
Linee guida di accessibiltà per CSS e JavaScript
+
CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.
+
Basi della tecnologia WAI-ARIA
+
Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.
+
Accessibilità multimediale
+
+
+

Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.

+
+
+
Accessibilità per dispositivi mobili
+
L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili.
+
+ +

Test di valutazione

+ +
+
Risoluzione di problemi di accessibilità 
+
Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.
+
+ +

Vedi anche

+ + diff --git a/files/it/learn/accessibility/mobile/index.html b/files/it/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..46a2b24c4d --- /dev/null +++ b/files/it/learn/accessibility/mobile/index.html @@ -0,0 +1,336 @@ +--- +title: Accessibilità per dispositivi mobili +slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili +tags: + - Accessibilità + - Articolo + - Mobile + - Principiante + - Responsivo + - Touchscreen + - imparare + - screenreader + - touch +translation_of: Learn/Accessibility/Mobile +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibilità")}}
+ +

L’uso di internet tramite dispositivi mobili è sempre più diffuso, e i sistemi operativi per dispositivi mobili più popolari, Android e iOS, sono dotati di strumenti nativi per l’accessibilità. È dunque importante prendere in considerazione l’accessibilità dei tuoi contenuti su tali piattaforme. Questo articolo tratta specificamente dell’accessibilità per dispositivi mobili.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i precedenti articoli del corso.
Obiettivo:Comprendere i problemi di accessibilità relativi ai dispositivi mobili, e come risolverli.
+ +

Accessibilità per dispositivi mobili

+ +

Lo stato attuale dell’accessibilità, e del supporto degli standard web in generale, è buono nei dispositivi mobili moderni. Sono lontani i giorni in cui i dispositivi mobili utilizzavano tecnologie web completamente differenti dai browser per pc, obbligando gli sviluppatori a fornire siti completamente separati per le due piattaforme (anche se comunque molte aziende continuano a fornire un sito specifico per dispositivi mobili, di solito contenente la parola “mobile” nel dominio).

+ +

 

+ +

Oggigiorno, in generale, i dispositivi mobili non hanno problemi a visualizzare correttamente tutti i tipi di siti, e i principali sistemi operativi mobili hanno lettori di schermo nativi. I browser moderni per dispositivi mobili hanno anche un buon supporto per WAI-ARIA.

+ +

Per rendere un sito accessibile e usabile su dispositivi mobili devi solo rispettare le buone pratiche generali di disegno e accessibilità web.

+ +

 

+ +

Ci sono però alcune eccezioni che richiedono una attenzione particolare; le principali sono:

+ + + +

Riassunto dei test sui lettori di schermo per  Android e iOS

+ +

I più comuni sistemi operativi per dispositivi mobili hanno installati lettori di schermo nativi pienamente funzionanti. Questi funzionano praticamente alla stessa maniera dei lettori di schermo per pc, ma si usano con gesti touch invece che con combinazioni di tasti.

+ +

Prendiamo in considerazione i due principali lettori di schermo per dispositivi mobili: TalkBack per Android e VoiceOver per iOS.

+ +

Android TalkBack

+ +

 

+ +

TalkBack è il lettore di schermo presente di default su Android.

+ +

Per attivarlo, selezionaImpostazioni > Accessibilità > TalkBack, e premi lo switch di attivazione/disattivazione. Inoltre segui qualsiasi altra indicazione che il sistema ti fornisca.

+ +

Nota: versioni anteriori di TalkBack si attivano con metodi leggermente differenti.

+ +

Quando TalkBack è attivato, i controlli basici del tuo dispositivo Android presenteranno alcune differenze rispetto alla modalità normale. Per esempio:

+ +

 

+ +
    +
  1. Fare click sull’icona di una app la selezionerà senza aprirla, e il lettore pronuncerà il nome della app.
    2. +
  2. Fare swipe a destra o a sinistra farà selezionare un’altra app, oppure, se stai navigando un menu, un altro bottone/controllo. Il dispositivo leggerà ogni opzione man mano che le selezioni.
    3. +
  3. Fare doppio click aprirà la app selezionata o attiverà/disattiverà la opzione selezionata.
    4. +
  4. Puoi anche “esplorare col dito“: mantieni premuto il dito sullo schermo e fallo scorrere lungo la superficie dello stesso. Il dispositivo leggerà il nome delle varie app o oggetti su cui passerai il dito.
    5. +
+ +

Se vuoi disattivare TalkBack:

+ +
    +
  1. Naviga alle Impostazioni
    2. +
  2. Naviga a Accessibilità > TalkBack.
    3. +
  3. Naviga allo switch di attivazione/disattivazione e disattivalo.
    4. +
+ +

Nota: puoi navigare alla schermata di inizio in qualsiasi momento facendo swipe in alto e a sinistra lentamente. Se hai più di una schermata di inizio, puoi muoverti da una all’altra facendo swipe con due dita a destra e sinistra.

+ +

Per una lista più completa dei gesti che puoi usare con TalkBack, vedi Utilizzare i gesti TalkBack.

+ +

Sbloccare il telefono

+ +

Quando TalkBack è attivato, la procedura per sbloccare il telefono cambia leggermente.

+ +

Devi fare swipe con due dita dal basso verso l’alto. Se ci sono una password o un codice impostati, sarai reindirizzato allo schermo dove inserirli.

+ +

Puoi anche esplorare con il dito, troverai il bottone di sblocco nel centro della parte bassa dello schermo. Fai doppio click sul bottone per sbloccare lo schermo.

+ + + +

TalkBack ti permette di accedere ai menu contestuali locali e globali del dispositivo da qualunque punto del sistema operativo. I menu globali sono quelli che permettono di accedere ai controlli e alle opzioni generali del dispositivo, mentre i menu locali sono relativi alla applicazione o schermata in cui ti trovi al momento.

+ +

Per accedere ai menu:

+ +
    +
  1. Per accedere al menu globale, fai swipe veloce verso il basso e poi a destra.
    2. +
  2. Per accedere al menu locale, fai swipe veloce verso l’alto e poi a destra.
    3. +
  3. Fai swipe a sinistra o a destra per muoverti da una opzione all’altra.
    4. +
  4. Quando l’opzione che ti interessa è selezionata, fai doppio click per attivarla o disattivarla.
    5. +
+ +

Per maggiori dettagli su tutte le opzioni disponibili nei menu locali e globali, vedi Menu contestuali locali e globali.

+ + + +

Puoi usare il menu contestuale locale del browser per trovare le opzioni per navigare le pagine web usando gli headings, i campi dei formulari, i link, ecc., oppure navigare linea per linea.

+ +

Per esempio, con TalkBack attivato:

+ +
    +
  1. Apri il tuo web browser.
    2. +
  2. Attiva la barra URL.
    3. +
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: +
      +
    • Seleziona la barra URL facendo swipe a destra/sinistra fino a trovarla, e poi fai doppio click.
      • +
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per introdurlo. Ripeti il procedimento per ogni carattere.
      • +
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • +
    +
    4. +
  4. Fai swipe a sinistra o destra per muoverti tra i differenti oggetti presenti sulla pagina.
    5. +
  5. Fai swipe in alto e a destra per aprire il menu contestuale locale.
    6. +
  6. Fai swipe a destra fino a trovare la opzione "Headings e punti di riferimento".
    7. +
  7. Fai doppio click per selezionarla. Ora puoi fare swipe a destra o sinistra per muoverti tra headings e punti di riferimento ARIA.
    8. +
  8. Per ritornare al modo di default, apri il menu contestuale locale facendo swipe in alto a destra, seleziona l’opzione “Default” e fai doppio click per attivarla.
    9. +
+ +

Nota: Vedi Guida introduttiva a TalkBack su Android per una documentazione più completa.

+ +

iOS VoiceOver

+ +

 

+ +

Una versione di VoiceOver per dispositivi mobili è inclusa in tutti i sistemi operativi iOS.

+ +

Per attivarlo, vai alla tua appImpostazionie selezionaGenerale>Accessibilità>VoiceOver. Premi lo switchVoiceOverper attivarlo (vedrai anche alcune altre opzioni relative a VoiceOver in questa pagina).

+ +

Quando VoiceOver sarà attivato, i controlli basici del sistema saranno leggermente diversi:

+ +

 

+ +
    +
  1. Un click singolo selezionerà l’oggetto su cui premi; il dispositivo pronuncerà il nome dell’oggetto selezionato.
    2. +
  2. Puoi inoltre navigare tra gli oggeti presenti sullo schermo facendo swipe a destra o sinistra per muoverti dall’uno all’altro, o facendo scorrere il dito per lo schermo. Quando troverai l’oggetto che vuoi attivare, rimuovi il dito dallo schermo per selezionarlo.
    3. +
  3. Per attivare l’oggetto dopo averlo selezionato, per esempio se vuoi aprire una applicazione, fai doppio click in qualsiasi punto dello schermo.
    4. +
  4. Fai swipe con tre dita per scorrere attraverso una pagina.
    5. +
  5. Fai click con due dita per eseguire una azione relativa al contesto corrente, come per esempio scattare una foto con la applicazione fotocamera aperta.
    6. +
+ +

Per disattivare VoiceOver, naviga aImpostazioni>Generale>Accessibilità>VoiceOver e premi lo switchVoiceOver.

+ +

Come usare il Rotore

+ +

Quando VoiceOver è attivo, avrai a tua disposizione una funzionalità dei navigazione chiamata Rotore, che ti permette di accedere rapidamente ad alcune opzioni di uso comune. Per usarlo:

+ +

Using the Rotor

+ +

When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:

+ +
    +
  1. Muovi due dita in circolo per lo schermo, come se stessi usando un vecchio telefono a disco. Il dispositivo pronuncerà il nome delle varie opzioni una dopo l’altra man mano che vai muovendo le dita. Puoi andare avanti e indietro mentre il dispositivo passa da un’opzione all’altra ciclicamente.
    2. +
  2. Quando hai trovato l’opzione che ti interessa: +
      +
    • Rimuovi le dita dallo schermo per selezionarla.
      • +
    • Se si tratta di una opzione il cui valore è aumentabile/diminuibile, come per esempio il Volume o la Velocità di Locuzione, puoi fare swipe verso l’alto o verso il basso per aumentare o diminuire il valore dell’opzione selezionata.
      • +
    +
    3. +
+ +

Le opzioni disponibili tramite il Rotore dipendono dal contesto: quando apri il Rotore le opzioni che troverai saranno relative all’applicazione o alla schermata in cui ti trovi (vedi qui sotto per un esempio).

+ + + +

Vediamo come navigare in internet usando VoiceOver:

+ +
    +
  1. Apri il tuo browser.
    2. +
  2. Attiva la barra URL.
    3. +
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: +
      +
    • Seleziona la barra URL facendo swipe a destra o a sinistra fino a trovarla, e poi fai doppio click.
      • +
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per selezionarlo. Fai doppio click per introdurlo. Ripeti il procedimento per ogni carattere.
      • +
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • +
    +
    4. +
  4. Fai swipe a sinistra e a destra per muoverti tra i differenti oggetti presenti sulla pagina. Fai doppio click su un oggetto per selezionarlo (per esempio, per seguire un link).
    5. +
  5. L’opzione del Rotore selzionata per default è la Velocità di Locuzione; puoi fare swipe in su o in giù per aumentare o diminuire la velocità di locuzione del lettore di schermo.
    6. +
  6. Ora muovi due dita in circolo per lo schermo per aprire il Rotore e far scorrere le sue opzioni. Riportiamo qui alcuni esempi delle opzioni disponibili nel Rotore: +
      +
    • Velocità di locuzione: cambia la velocità di locuzione del dispositivo.
      • +
    • Contenitori: il lettore di schermo si muove per i vari contenitori semantici presenti nella pagina.
      • +
    • Headings: il lettore di schermo si muove per i vari heading presenti nella pagina.
      • +
    • Links: il lettore di schermo si muove per i vari link presenti nella pagina.
      • +
    • Controlli formulario: il lettore di schermo si muove per i vari campi dei formulari presenti nella pagina.
      • +
    • Lingue: cambia la lingua della pagina, se sono disponibili differenti traduzioni.
      • +
    +
    7. +
  7. Seleziona Headings. Ora potrai fare swipe in su e in giù per muoverti da un heading all’altro della pagina.
    8. +
+ +

Nota: per un riferimento più completo sui gesti disponibili in VoiceOver e altri suggerimenti sul testing dell’accessibilità in iOS, vedi Test Accessibility on Your Device with VoiceOver.

+ +

Meccanismi di controllo

+ +

Nel nostro articolo sull’accessibilità in CSS e JavaScript abbiamo preso in considerazione eventi che sono associati a specifici meccanismi di controllo (vedi eventi specifici del mousedel mouse). Per ricapitolare, tali eventi causano problemi di accessibilità, perchè altri meccanismi di controllo non possono attivare le funzionalità ad essi associate.

+ +

Ad esempio, l’evento click è ottimale in termini di accessibilità: un gestore di eventi associato ad esso può essere attivato cliccando con il mouse sull’elemento su cui l’evento è impostato, oppure selezionandolo tramite tasto TAB e premendo INVIO, oppure facendo click con un dito su un touchscreen. Prova il nostro esempio-di-bottone-semplice.html (vedi la versione live) per capire di cosa parliamo.

+ +

Altri eventi simili, come mousedown e mouseup possono creare problemi, in quanto i loro gestori di eventi non possono essere attivati usando controli alternativi al mouse.

+ +

Se provi a controllare il nostro esempio di simple-box-drag.html (vedi la versione live) tramite tastiera o touchscreen, capirai qual è il problema. Ciò succede perchè stiamo usando un codice come il seguente:

+ +
div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;
+ +

Per abilitare altre forme di controllo, devi usare eventi alternativi equivalenti. Per esempio, gli eventi touch sono pensati specificamente per i dispositivi con touchscreen:

+ +
div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;
+ +

Presentiamo qui un semplice esempio che mostra come usare gli eventi mouse e touch insieme. Vedi  multi-control-box-drag.html (vedi la versione liveee the example live).

+ +

Nota: puoi vedere esempi di come implementare differenti meccanismi di controllo nell’articolo in inglese  Implementing game control mechanisms.

+ +

Disegno responsivo

+ +

 

+ +

Il disegno responsivo è la pratica di realizzare layout e altre caratteristiche delle applicazioni in una forma che cambia dinamicamente secondo alcuni fattori come le dimensioni dello schermo e la risoluzione dello stesso, di modo che le applicazioni siano usabili e accessibili a utenti che usano differenti tipi di dispositivi.

+ +

In particolare, gli aspetti più comuni del disegno responsivo che si devono prendere in considerazione per i dispositivi mobili sono:

+ +

 

+ + + +

Nota: non forniremo una spiegazione dettagliata delle tecniche di disegno responsivo qui, dato che sono già trattate in altri articoli presenti su questo sito (vedi i link qui sopra).

+ +

Considerazioni specifiche per dispositivi mobili

+ +

Ci sono altri importanti aspetti da prendere in considerazione per ottimizzare l’accessibilità dei siti sui dispositivi mobili. Riportiamo due esempi qui sotto, e in futuro speriamo di riuscire ad aggiungerne altri.

+ +

Non disabilitare lo zoom

+ +

Utilizzando viewport, è possibile disabilitare la funzionalità di zoom, ponendo il seguente codice nella <head>:

+ +
<meta name="viewport" content="user-scalable=no">
+ +

Non dovresti mai farlo, a meno che sia strettamente necessario. Molte persone infatti usano lo zoom per migliorare la visibilità e leggibilità del contenuto, e privare i tuoi utenti di tale possibilità non è una buona pratica. Ci sono alcune situazioni in cui l’uso dello zoom può effettivamente danneggiare la struttura dell’interfaccia utente; in tali casi, se davvero ritieni necessario disabilitare lo zoom, dovresti fornire una funzionalità equivalente, come per esempio dei controlli per aumentare le dimensioni del testo senza alterare altri elementi dell’interfaccia utente.

+ +

Accessibilità dei menu

+ +

È una pratica molto comune, quando un sito viene visualizzato su un dispositivo con schermo di dimensioni ridotte, usare media queries per ridurre il menu di navigazione a un semplice bottone o una icona, che quando vengono premuti si espandono mostrando gli elementi del menu in forma di menu drop-down, o menu a tendina. Di solito si utilizza una icona con tre linee orizzontali, nota come "menu ad hamburger".

+ +

 

+ +

Quando implementi un menu di questo tipo, devi assicurarti che l’”hamburger” sia accessibile con gli appropriati meccanismi di controllo (normalmente su dispositivo mobile vi si accede tramite touch), come discusso in {{anch("Meccanismi di controllo")}} più sopra, e che il resto della pagina sia nascosto o comunque disabilitato mentre il menu sia attivo, per evitare confusione durante l’utilizzo dello stesso.

+ +

Qui puoi trovare un buon esempio di menu ad hamburger.

+ +

Input dell’utente

+ +

Quando si usano dispositivi mobili, inserire dati è di solito un’esperienza più lenta e tediosa che il suo equivalente su pc o laptop. È molto più facile scrivere con una tastiera normale che con una virtuale o una di dimensioni ridotte.

+ +

Per tale ragione, vale la pena cercare di minimizzare il più possibile la quantità di dati da introdurre manualmente sui dispositivi mobili. Per esempio, se vuoi che gli utenti specifichino qual è il loro lavoro, invece di usare un campo di testo aperto puoi usare un menu a selezione {{htmlelement("select")}} contenente le opzioni più comuni (cosa che tra l’altro aiuta anche a migliorare la consistenza dei dati), e offrire tra le opzioni una categoria “Altro” che, se selezionata, fa comparire un campo di testo dove l’utente può scrivere liberamente per specificare la sua occupazione. Puoi vedere un esempio di questa idea alla pagina tipi-di-lavoro-comuni (vedi la versione live).

+ +

Inoltre, vale la pena prendere in considerazione l’uso di tipi di input HTML5 nativi, come per esempio il tipo “date”, che su dispositivi mobili Androd e iOS vengono gestiti automaticamente da widget nativi integrati all’interfaccia che l’utente è già abituato a usare sul dispositivo. Vedi esempi-formulari-html5.html per alcuni esempi (vedi anche la versione live). Prova a visualizzare e usare questi esempi su un dispositivo mobile.

+ +

 

+ +

Alcuni esempi di tipi di input HTML5 e come appaiono quando sono usati da dispositivo mobile:

+ +

 

+ + + +

Se vuoi fornire una versione della tua applicazione specifica per dispositivi mobili e diversa da quella per pc e laptop, puoi usare una tecnologia di feature detection per rilevare il tipo di dispositivo su cui l’applicazione viene visualizzata. Vedi l’articolo in inglese  input types per maggiori informazioni sui differenti tipi di input, e anche il nostro articolo in inglese sulla feature detection.

+ +

Riassunto

+ +

In questo articolo abbiamo riportato alcuni dettagli sui più comuni problemi di accessibilità su dispositivi mobili, e alcune linee guida su come superarli. Abbiamo inoltre fornito indicazioni sull’uso dei più comuni lettori di schermo per dispositivi mobili, per aiutarti nella realizzazione di test di accessibilità.

+ +

Vedi anche

+ + + +
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibilità/Accessibility_troubleshooting", "Learn/Accessibilità")}}
+ +
+

In questo modulo

+ + +
+
diff --git a/files/it/learn/accessibility/multimedia/index.html b/files/it/learn/accessibility/multimedia/index.html new file mode 100644 index 0000000000..f920e59050 --- /dev/null +++ b/files/it/learn/accessibility/multimedia/index.html @@ -0,0 +1,392 @@ +--- +title: Accessibilità multimediale +slug: Learn/Accessibilità/Multimedia +tags: + - Accessibilità + - Articolo + - Audio + - Didascalie + - HTML + - Immagine + - JavaScript + - Multimedia + - Principiante + - Sottotitoli + - Tracce testuali + - Video +translation_of: Learn/Accessibility/Multimedia +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}
+ +

Un’altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l’accessibilità di questo tipo di contenuti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di cosa è l'accessibilità.
Obiettivo:Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli.
+ +

Multimedia e accessibilità

+ +

Fino ad ora in questo modulo sull’accessibilità abbiamo preso in considerazione le procedure necessarie per rendere accessibili una varietà di contenuti: da semplice contenuto testuale a tabelle di dati, immagini, controlli nativi come campi di formulari e bottoni, e anche strutture e intefacce più complesse (con le quali si usano gli attributi WAI-ARIA).

+ +

Questo articolo si occupa di un’altra classe di contenuti per i quali solitamente non è facile garantire una buona accessibilità: i contenuti multimediali. Immagini, video, elementi <canvas>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.

+ +

Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.

+ +

Immagini

+ +

Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo HTML: una buona base per l’accessibilità: fai riferimento all’articolo per maggiori dettagli. Riassumendo in poche parole l’articolo, per garantire l’accessibilità delle immagini devi assicurarti che al contenuto visuale sia associato un testo alternativo che descriva dettagliatamente l’immagine, e che tale contenuto possa essere letto dai lettori di schermo.

+ +

Per esempio:

+ +
<img src="dinosaur.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
+
+ +

Controlli audio e video accessibili

+ +

Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.

+ +

Il problema con i controlli nativi in HTML5

+ +

Gli elementi audio e video di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, codice sorgente e versione live):

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Il tuo browser non supporta l’audio in HTML5. Puoi scaricare il file per ascoltarlo. Qui trovi il <a href="viper.mp3">link al file audio.</p>
+</audio>
+
+<br>
+
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
+</video>
+ +

L’attributo controls fornisce il bottone play/pausa, uno slider di posizionamento e altri controlli basici di un lettore multimediale generico. In Firefox e Chrome i controlli HTML5 hanno questo aspetto:

+ +

Screenshot of Video Controls in Firefox

+ +

Screenshot of Video Controls in Chrome

+ +

Tuttavia, ci sono alcuni problemi associati a questi controlli:

+ + + +

Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.

+ +

Creare controlli audio e video personalizzati

+ +

Gli elementi audio e video di HTML5 hanno in comune una API, chiamata HTML Media Element, che permette di applicare funzionalità personalizzate ai bottoni e ad altri controlli definiti dallo sviluppatore.

+ +

Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.

+ +

Setup basico

+ +

 

+ +

Per prima cosa, salva una copia dei file controlli-custom-start.html, controlli-custom-controls.css, rabbit320.mp4 e rabbit320.webm in una cartella del tuo hard-disk.

+ +

Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.

+ +

Ora diamo un’occhiata al codice HTML del lettore video:

+ +
<section class="player">
+  <video controls>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
+  </video>
+
+  <div class="controls">
+    <button class="playpause">Play</button>
+    <button class="stop">Stop</button>
+    <button class="rwd">Rwd</button>
+    <button class="fwd">Fwd</button>
+    <div class="time">00:00</div>
+  </div>
+</section>
+ +

Setup basico di JavaScript

+ +

 

+ +

Abbiamo inserito alcuni bottoni nella barra dei controlli posizionata sotto al video. Tali controlli ovviamente non funzionano di default; è necessario usare JavaScript per assegnargli una funzionalità.

+ +

Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file JavaScript:

+ +

 

+ +
var playPauseBtn = document.querySelector('.playpause');
+var stopBtn = document.querySelector('.stop');
+var rwdBtn = document.querySelector('.rwd');
+var fwdBtn = document.querySelector('.fwd');
+var timeLabel = document.querySelector('.time');
+ +

In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:

+ +
var player = document.querySelector('video');
+ +

 

+ +

Questa variabile fa riferimento a un oggetto HTMLMediaElement, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.

+ +

Prima di procedere ad assegnare funzionalità ai nostri bottoni rimuoviamo i controlli nativi, di modo che non si possano verificare conflitti con i nostri controlli personalizzati. Aggiungi il seguente codice, al fondo del tuo file JavaScript:

+ +

 

+ +
player.removeAttribute('controls');
+ +

Usando questo metodo, anziché quello di evitare di includere l’attributo controls dal principio, ha il vantaggio che, se il nostro codice JavaScript smettesse di funzionare per una qualsiasi ragione, i controlli nativi si riattiveranno automaticamente, permettendo agli utenti di continuare a usare i contenuti multimediali.

+ +

Collegare i nostri bottoni

+ +

Come primo passo, attiviamo il bottone Play/pausa. Possiamo alternare gli stati di play e pausa usando una semplice funzione condizionale, come la seguente. Aggiungila al fondo del tuo codice JavaScript:

+ +
playPauseBtn.onclick = function() {
+  if(player.paused) {
+    player.play();
+    playPauseBtn.textContent = 'Pause';
+  } else {
+    player.pause();
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

In seguito, aggiungi questo codice, che controlla il bottone Stop:

+ +
stopBtn.onclick = function() {
+  player.pause();
+  player.currentTime = 0;
+  playPauseBtn.textContent = 'Play';
+};
+ +

 

+ +

Non esiste una funzione stop() nativa negli elementi HTMLMediaElement, dunque al suo posto usiamo pause(), e allo stesso tempo resettiamo a zero il tempo di riproduzione currentTime.

+ +

Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:

+ +

 

+ +
rwdBtn.onclick = function() {
+  player.currentTime -= 3;
+};
+
+fwdBtn.onclick = function() {
+  player.currentTime += 3;
+  if(player.currentTime >= player.duration || player.paused) {
+    player.pause();
+    player.currentTime = 0;
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

 

+ +

Questi bottoni sono controlli molto basici, non fanno altro che far avanzare o tornare indietro il video di 3 secondi ogni volta che vengono cliccati. In una applicazione reale probabilmente vorrai aggiungere uno slider di posizionamento più elaborato o qualcosa di simile.

+ +

Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione currentTime è maggiore del tempo totale duration, o se la riproduzione è in pausa. Se una delle due condizioni è vera fermiamo la riproduzione del video, per evitare che si verifichino errori nel lettore multimediale se l’utente cerca di avanzare oltre la fine del video o quando il video si trova in stato di pausa.

+ +

Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:

+ +
player.ontimeupdate = function() {
+  var minutes = Math.floor(player.currentTime / 60);
+  var seconds = Math.floor(player.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes<10) {
+    minuteValue = "0" + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds<10) {
+    secondValue = "0" + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  mediaTime = minuteValue + ":" + secondValue;
+  timeLabel.textContent = mediaTime;
+};
+ +

Ogni volta che il tempo si aggiorna (ogni secondo), questa funzione viene eseguita. A partire dal valore di currentTime, che si esprime in secondi, la funzione calcola il numero di minuti e secondi trascorsi, aggiunge uno 0 davanti al numero di minuti o secondi se tale numero è inferiore a 10, dà al risultato il formato “minuti:secondi” e infine lo invia al display timeLabel perchè sia mostrato all’utente.

+ +

Ulteriori letture

+ +

Quanto spiegato finora ti dà un’idea basica di come aggiungere funzionalità personalizzate ai lettori audio/video. Per maggiori informazioni su come aggiungere funzionalità più complesse, incluso come utilizzare Flash come fallback per i browser più vecchi, vedi gli articoli (in inglese):

+ + + +

Abbiamo inoltre creato un esempio avanzato che mostra come si può creare un sistema orientato ad oggetti che trova ogni lettore audio o video presente in una pagina e gli aggiunge i nostri controlli personalizzati. Vedi custom-controls-oojs (qui trovi il codice sorgente).

+ +

Trascrizioni audio

+ +

Per rendere i contenuti audio accessibili alle persone con difficoltà auditive devi ricorrere a trascrizioni testuali. Le trascrizioni possono includersi nella stessa pagina dove l’audio viene riprodotto, o in una pagina separata collegata ad essa con un link.

+ +

Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:

+ + + +

NON è una buona pratica quella di pubblicare del contenuto audio e promettere di pubblicare le trascrizioni in un secondo momento. Spesso tali promesse non vengono compiute, danneggiando la fiducia che gli utenti ripongono in chi pubblica il contenuto. Nel caso in cui l’audio che si pubblica sia un dialogo o un evento come una conferenza pubblica, è accettabile pubblicare note riassuntive del contenuto insieme all’audio.

+ +

Esempi di trascrizioni

+ +

Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video Audio Transcription Sample 1 e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su Apri trascrizione.

+ +

Se stai creando una interfaccia personalizzata per presentare il tuo contenuto audio e le relative trascrizioni, tieni in considerazione l’idea di includere un pannello-trascrizioni che appare/scompare; vedi il nostro esempio audio-transcript-iu  (vedi anche il codice sorgente).

+ +

Descrizioni audio

+ +

 

+ +

Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.

+ +

In molti casi si tratterà di contenuto video, e in tal caso puoi associargli didascalie usando le tecniche descritte nella prossima sezione di questo articolo.

+ +

 

+ +

Tuttavia ci sono dei casi limite. Per esempio, potresti dover pubblicare una registrazione audio di una conferenza durante la quale si fa riferimento a una risorsa visuale, come una tabella o un grafico. In tali casi, dovresti fare in modo che tali risorse vengano fornite insieme all’audio e alla trascrizione, avendo cura di porre un link alle risorse nel punto della trascrizione in cui si fa riferimento ad esse. Questo procedimento sarà di aiuto a tutti gli utenti, non solo alle persone con difficoltà auditive.

+ +
+

Nota: una trascrizione audio sarà utile a vari tipi di utente. Oltre a permettere alle persone con difficoltà auditive di accedere al contenuto audio, sarà molto utile anche agli utenti che navigano con una connessione lenta, che probabilmente preferiscono non scaricare il contenuto audio. Pensa inoltre a un utente che si trova in un ambiente rumoroso, come un pub, e non può udire il contenuto audio correttamente.

+
+ +

Tracce testuali nei video

+ +

Per rendere i contenuti video accessibili a persone con difficoltà auditive o visive, e anche ad altri gruppi di utenti, come per esempio quelli che non capiscono la lingua che si parla nel video, devi associare al contenuto video una traccia testuale.

+ +
+

Nota: le tracce testuali sono utili ad ogni tipo di utente, non solo a chi ha una disabilità. Per esempio, un utente potrebbe non essere in grado di udire l’audio perchè si trova in un ambiente rumoroso, come un bar affollato, o un altro potrebbe decidere di togliere l’audio a un video per non disturbare chi gli sta vicino, se si trova per esempio in una biblioteca.

+
+ +

Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:

+ +

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

+ +

Molti paesi trasmettono i film in inglese con sottotitoli nella lingua del paese, e spesso nei film in DVD si trovano disponibili tracce testuali in varie lingue. Per esempio:

+ +

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

+ +

Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:

+ + + +

Implementare le tracce testuali in HTML5

+ +

Le tracce testuali da mostrarsi associate a un video in HTML5 devono essere scritte in WebVTT, un formato che contiene stringhe di testo associate a metadati come il momento del video in cui si desidera mostrare ogni stringa, e anche informazioni sullo stile e il posizionamento della stringa. Tali stringhe di testo sono chiamate “cues”.

+ +

Un file WebVTT tipico è più o meno così:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+Questo è il primo sottotitolo.
+
+2
+00:00:30.739 --> 00:00:34.074
+Questo è il secondo.
+
+  ...
+ +

To get this displayed along with the HTML media playback, you need to:

+ + + +

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>
+ +

Il risultato sarà un video sottotitolato, simile a questo: 

+ +

Video player with standard 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 maggiori dettagli leggi l’articolo (in inglese) Adding captions and subtitles to HTML5 video. Puoi trovare l’esempio che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il codice sorgente). Questo esempio, tramite l’uso di JavaScript, permette agli utenti di scegliere tra differenti sottotitoli. Nota che, per attivare i sottotitoli, devi premere il bottone “CC” e selezionare una opzione tra inglese, tedesco o spagnolo.

+ +
+

Nota: le tracce testuali e le trascrizioni contribuiscono anche al SEO, poichè i motori di ricerca danno molta importanza al contenuto testuale. Le tracce testuali possono perfino permettere ai motori di ricerca di ridirigere l’utente a un punto specifico del video.

+
+ +

Altro contenuto multimediale

+ +

Le sezioni precedenti non trattano tutti i tipi di contenuto multimediale che potresti voler usare sul tuo sito o applicazione. Potresti trovarti a dover gestire giochi, animazioni, slideshow, video inseriti da fonti esterne, o altro contenuto creato usando tecnologie come:

+ + + +

Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:

+ + + +

Tuttavia, ci sono altri tipi di contenuto multimediale per i quali non è facile implementare l’accessibilità. Per esempio, se stai lavorando su un gioco immersivo in 3D o una applicazione di realtà virtuale, è realmente difficile fornire alternative testuali per tale tipo di esperienza. D’altro canto si può obiettare che le persone con vista ridotta non sono parte del target di pubblico di tali applicazioni.

+ +

Dovresti comunque assicurarti che tale tipo di applicazioni abbiano un contrasto dei colori ottimale, di modo che siano più facilmente visualizzabili a persone con vista ridotta o daltonismo. Inoltre dovresti fare tutto il possibile per renderli accessibili da tastiera. Ricorda che è necessario cercare di fare sempre tutto il possibile invece di puntare al 100% dell’accessibilità in ogni situazione, un obiettivo spesso impossibile da raggiungere.

+ +

Riassunto

+ +

Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.

+ +

{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git a/files/it/learn/accessibility/wai-aria_basics/index.html b/files/it/learn/accessibility/wai-aria_basics/index.html new file mode 100644 index 0000000000..09891c8a11 --- /dev/null +++ b/files/it/learn/accessibility/wai-aria_basics/index.html @@ -0,0 +1,422 @@ +--- +title: Basi della tecnologia WAI-ARIA +slug: Learn/Accessibilità/WAI-ARIA_basics +tags: + - ARIA + - Accessibilità + - Articolo + - Guida + - HTML + - HTML semantico + - JavaScript + - Principiante + - WAI-ARIA +translation_of: Learn/Accessibility/WAI-ARIA_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}
+ +

Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, aver letto i precedenti articoli del corso.
Obiettivo:Acquisire familiarità con la tecnologia WAI-ARIA e imparare a usarla dove necessario per fornire valore semantico addizionale che migliori l'accessibilità.
+ +

Cosa è WAI-ARIA?

+ +

Cominciamo col dare un'occhiata a cosa è WAI-ARIA, e in che modo ci può essere utile.

+ +

Un nuovo set di problemi

+ +

Man mano che le applicazioni web cominciarono ad essere sempre più complesse e dinamiche, nuovi problemi di accessibilità iniziarono a manifestarsi.

+ +

Per esempio, HTML5 ha introdotto alcuni elementi semantici per definire componenti di uso comune nelle pagine ({{htmlelement("nav")}}, {{htmlelement("footer")}}, ecc.). Prima dell'arrivo di questi elementi, gli sviluppatori si limitavano a usare {{htmlelement("div")}} con ID o classi, per esempio <div class="nav">. Ma questi elementi erano problematici, perchè non fornivano un sistema standard per individuare programmaticamente i componenti di una pagina, dunque i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina era composta. 

+ +

La soluzione inizialmente consisteva nell’aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:

+ +
<a href="#hidden" class="hidden">Vai alla barra di navigazione</a>
+ +

 

+ +

Ma questo sistema non è molto preciso, e può essere usato solo quando il lettore di schermo comincia a leggere dalla parte alta della pagina.

+ +

Per fare un altro esempio, ad un certo punto le applicazioni cominciarono a includere controlli complessi come selezionatori di data o slider per selezionare valori. HTML5 mette a disposizione alcuni tipi speciali di input nativi, specifici per tali controlli:

+ +
<input type="date">
+<input type="range">
+ +

Ma questi elementi non sono supportati da tutti i browser, ed inoltre sono molto difficili da personalizzare, rendendoli complicati da integrare nel disegno di un sito. Di conseguenza, gli sviluppatori spesso fanno uso di librerie JavaScript e creano tali controlli come una serie di {{htmlelement("div")}} annidati o elementi di una tabella a cui assegnano classi, e in seguito li personalizzano con CSS e li controllano con funzioni di JavaScript.

+ +

Il problema di questo metodo è che i lettori di schermo non riescono ad interpretare di cosa si tratta, e riportano solo la presenza di una serie di elementi dei quali non possono descrivere la funzione.

+ +

E arrivò WAI-ARIA

+ +

WAI-ARIA è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi per fornire maggior valore semantico e migliorare l'accessibilità dovunque sia necessario. Ci sono tre caratteristiche principali definite nella raccolta:  

+ + + +

Un punto importante da tenere in considerazione riguardo gli attributi WAI-ARIA è che non influiscono in alcun modo sulla pagina, eccetto che sulle informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di schermo prendono le informazioni). WAI-ARIA non cambia la struttura della pagina, il DOM o altro, anche se i suoi attributi possono essere utili per selezionare gli elementi in CSS.

+ +
+

Nota: puoi trovare una utile lista di tutti i ruoli ARIA e i loro usi, con link a informazioni più approfondite, nella specifica WAI-ARIA: vedi Definizione di Ruoli (in inglese).

+ +

La specifica contiene anche una lista delle proprietà e degli stati, con link ad ulteriori informazioni. Vedi  Definizioni di Stati e Proprietà (in inglese).

+
+ +

Dove è supportata WAI-ARIA?

+ +

A questa domanda non è facile rispondere. È difficile trovare  una risorsa che indichi in maniera completa quali funzionalità di WAI-ARIA sono supportate e dove, perchè:

+ +
    +
  1. Ci sono molte funzionalità nella specifica WAI-ARIA.
    2. +
  2. Ci sono moltissime combinazioni possibili di sistemi operativi, browser e lettori di schermo.
    3. +
+ +

L'ultimo punto è fondamentale: per poter usare un lettore di schermo il tuo sistema operativo deve avere installato almeno un browser con la necessaria API di accessibilità, che fornisca ai lettori di schermo le informazioni necessarie perchè funzionino. La maggior parte dei sistemi operativi ha di serie uno o due browser che funzionano con i lettori di schermo. Sul sito di Paciello Group si può trovare una guida aggiornata costantemente che fornisce dati sul supporto dei lettori di schermo nei vari sistemi operativi. Vedi l'articolo (in inglese) Guida: browser, sistemi operativi e supporto per i lettori di schermo.

+ +

Il seguente passo è assicurarsi che i browser usati supportino la tecnologia ARIA e la trasmettano tramite le loro API, ma anche che i lettori di schermo riconoscano le informazioni che ricevono e le presentino agli utenti in una forma ottimale.

+ +
    +
  1. Il supporto dei browser in generale è molto buono. Al momento della stesura di questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-ARIA nei vari browser di circa l'88%.
    2. +
  2. Il supporto di ARIA nei lettori di schermo non è al momento a un livello comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per migliorare la compatibilità con WAI-ARIA.  Puoi farti un'idea del livello di supporto leggendo l'articolo (in inglese) Compatibilità dei lettori di schermo con WAI-ARIA .
    3. +
+ +

In questo articolo non spiegheremo tutte le funzionalità di WAI-ARIA e i dettagli sul supporto che hanno. Cercheremo invece di presentare le funzionalità più importanti e utili agli sviluppatori web; in generale se non facciamo riferimento al livello di supporto di una funzionalità, puoi considerare che il supporto è ragionevolmente buono. In caso di eccezioni lo indicheremo esplicitamente.

+ +
+

Nota: alcune librerie JavaScript supportano WAI-ARIA. Ciò significa che quando generano elementi IU, come per esempio formulari complessi, aggiungono automaticamente attributi ARIA per migliorarne l'accessibilità. Se stai valutando l'utilizzo di una libreria Javascript per sviluppare elementi IU più rapidamente, dovresti tenere in conto il livello di accessibilità della libreria quando scegli quale usare. Buoni esempi sono jQuery UI (vedi l'articolo in inglese jQuery UI: supporto all'accessibilità), ExtJS, e Dojo/Dijit.

+
+ +

Quando dovresti usare WAI-ARIA?

+ +

Abbiamo già discusso di alcuni dei problemi che hanno spinto alla creazione di WAI-ARIA, dovuti soprattutto alla crescente complessità delle moderne applicazioni web. Essenzialmente ci sono 4 grandi aree in cui WAI-ARIA è utile: 

+ +
    +
  1. Indicatori/riferimenti: gli attributi role possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio {{htmlelement("nav")}}), oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio search, tabgroup, tab, listbox, ecc.
    2. +
  2. Aggiornamento dinamico del contenuto: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare aria-live per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite XMLHttpRequest, o DOM APIs .
    3. +
  3. Migliorare l'accessibilità da tastiera: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano" in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali elementi  (usando tabindex).
    4. +
  4. Accessibilità dei controlli non semantici: quando si usano una serie di <div> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire le indicazioni necessarie tramite una combinazione di ruoli come button, listbox, o tabgroup, e proprietà come aria-required o aria-posinset.
    5. +
+ +

Ricorda: dovresti ricorrere a WAI-ARIA solo quando è necessario! Idealmente, dovresti usare sempre funzionalità HTML native per fornire le indicazioni semantiche necessarie ai lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità. 

+ +

Ma ricorda, usala solo quando è necessario!

+ +
+

Nota: cerca di testare il tuo sito con la maggior varietà possibile di utenti reali: persone non disabili, persone che usano lettori di schermo, persone che navigano con la tastiera, ecc. Queste persone sapranno indicarti cosa funziona e cosa no in maniera molto più accurata di ciò che può emergere se ti limiti ad effettuare test di utilizzo in prima persona.

+
+ +

Esempi di uso pratico di WAI-ARIA 

+ +

Nella prossima sezione analizzeremo le 4 aree di utilizzo di WAI-ARIA più dettagliatamente, e forniremo alcuni esempi pratici. Prima di continuare però, dovresti attivare un lettore di schermo, per poter testare alcuni degli esempi.

+ +

Vedi la sezione (in inglese) sul testing con lettori di schermo per maggiori informazioni.

+ +

Indicatori/riferimenti

+ +

WAI-ARIA trasmette ai browser l'attributo role, che permette di aggiungere valore semantico extra agli elementi del tuo sito dovunque sia necessario. La principale utilità di questo attributo è che permette agli utenti che usano lettori di schermo di individuare più facilmente gli elementi più comuni delle pagine. Vediamo un esempio:  il nostro sito senza attributi role (vedi la versione live) ha la seguente struttura:

+ +
<header>
+  <h1>...</h1>
+  <nav>
+    <ul>...</ul>
+    <form>
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
+
+<main>
+  <article>...</article>
+  <aside>...</aside>
+</main>
+
+<footer>...</footer>
+ +

Se provi a navigare il sito con un lettore di schermo in un browser moderno, riceverai diverse informazioni utili. Per esempio, VoiceOver fornisce le seguenti indicazioni:

+ + + +

Se ti rechi nella sezione Rotore di VoiceOver (premendo VO-U), vedrai che la maggior parte degli elementi più importanti sono elencati ordinatamente e si può accedere ad essi rapidamente.

+ +

+ +

Ma in realtà, la situazione è migliorabile. Il campo di ricerca è un punto di riferimento importante che gli utenti vorranno trovare, ma non compare nella lista degli elementi e non è trattato come un elemento di riferimento, a parte l'indicazione che si tratta di una casella di ricerca (<input type="search">). Inoltre, alcuni browser più vecchi (per esempio IE8), non riconoscono le indicazioni semantiche degli elementi HTML5. 

+ +

Possiamo migliorare il tutto usando alcune funzionalità ARIA. Per prima cosa aggiungiamo alcuni attributi role alla nostra struttura HTML. Il nostro  esempio di sito con ruoli aria (vedi la versione live) ha la seguente struttura:

+ +
<header>
+  <h1>...</h1>
+  <nav role="navigation">
+    <ul>...</ul>
+    <form role="search">
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
+
+<main>
+  <article role="article">...</article>
+  <aside role="complementary">...</aside>
+</main>
+
+<footer>...</footer>
+ +

C'è anche una funzionalità bonus in questo esempio: all'elemento {{htmlelement("input")}} è stato assegnato l'attributo aria-label, che fornisce ai lettori di schermo un’etichetta descrittiva, anche se non abbiamo incluso un elemento {{htmlelement("label")}}. In casi come questo è molto utile usare l’attributo ARIA. Un campo di ricerca è infatti un elemento molto comune e facilmente riconoscibile, e aggiungere una etichetta visuale potrebbe danneggiare il disegno della pagina.

+ +
<input type="search" name="q" placeholder="Scrivi qui ciò che vuoi cercare" aria-label="Campo per cercare nel contenuto del sito">
+ +

Se ora usiamo VoiceOver per navigare il sito d'esempio, notiamo alcuni miglioramenti:

+ + + +

Inoltre, il sito è ora maggiormente accessibile per utenti che navigano con browser antiquati come IE8; vale la pena includere ruoli ARIA anche per questo. E se per caso il tuo sito è stato costruito usando solo elementi <div>, dovresti decisamente includere i ruoli ARIA per fornire le necessarie semantiche!

+ +

Il valore semantico migliorato del campo di ricerca ha mostrato cosa è possibile fare quando ARIA va oltre le semantiche disponibili con HTML5. Potrai sapere molto di più sulle semantiche e il potere delle proprietà/attributi ARIA qui sotto, specialmente nella sezione {{anch("Accessibilità dei controlli non semantici")}}. Per ora, vediamo come ARIA ci può aiutare a gestire gli aggiornamenti del contenuto dinamico.

+ +

Aggiornamenti del contenuto dinamico

+ +

In generale tutto il contenuto caricato nel DOM può essere facilmente interpretato usando un lettore di schermo, dal contenuto testuale fino al testo alternativo delle immagini. I tradizionali siti statici con contenuto largamente testuale sono dunque facili da rendere accessibili alle persone con deficit visivo.

+ +

Il problema è che le applicazioni web moderne spesso non sono composte da testo statico, di solito hanno una gran quantità di contenuto che si aggiorna dinamicamente, cioè contenuto che si agigorna senza che l'intera pagina si ricarichi, tramite meccanismi come XMLHttpRequest, Fetch, o DOM APIs. Queste aree del contenuto sono talvolta chiamate “aree vive”, o  live regions.

+ +

Consideriamo un esempio: aria-no-live.html (vedi anche la versione live). In questo esempio troviamo un paragrafo contenente una citazione selezionata casualmente:

+ +
<section>
+  <h1>Citazione casuale</h1>
+  <blockquote>
+    <p></p>
+  </blockquote>
+</section>
+ +

JavaScript riceve tramite XMLHttpRequest un file JSON contenente una serie di citazioni con il rispettivo autore. Dopo che la prima citazone tratta dal file è stata caricata nel paragrafo si attiva un loop setInterval() che carica una nuova citazione nel paragrafo ogni 10 secondi:

+ +
var intervalID = window.setInterval(showQuote, 10000);
+ +

Questo sistema funziona correttamente , ma non è ottimale in termini di accessibilità. Gli aggiornamenti del contenuto non sono rilevati dai lettori di schermo, e gli utenti che li usano non possono rendersi conto di ciò che sta succedendo. Questo esempio è molto basico, ma prova a immaginare cosa succederebbe se stessi creando una interfaccia utente più complessa, con molte aree del contenutto che si aggiornano costantemente, come una chat room, un gioco strategico o magari un sito di e-commerce con un carrello della spesa che si aggiorna con i prodotti selezionati dall'utente. Sarebbe impossibile utilizzare l'applicazione con un lettore di schermo, in assenza di un sistema che avverta gli utenti degli aggiornamenti del contenuto.

+ +

Fortunatamente WAI-ARIA ci mette a disposizione un utile meccanismo per fornire tali avvertimenti, la proprietà aria-live. Applicarla a un elemento fa sì che i lettori di schermo leggano il contenuto che viene aggiornato. Con quanta frequenza il contenuto viene letto dipende dal valore assegnato:

+ + + +

Generalmente, assegnare il valore assertive è sufficiente perchè gli aggiornamenti vengano annunciati in tempo reale, anche se nel caso di aggiornamenti di multiple aree di contenuto che avvengono allo stesso tempo i vari aggiornamenti saranno annunciati in sequenza, quindi con la possibilità di un breve ritardo sul tempo reale. Si raccomanda di usare rude solo per aggiornamenti ad alta priorità che devono "passare davanti" agli altri aggiornamenti in corso.

+ +

Prova a realizzare una copia di aria-no-live.html e quotes.json, e modificare l'etichetta <section> così:

+ +
<section aria-live="assertive">
+ +

D'ora in poi il lettore di schermo leggerà il contenuto ogni volta che quest'ultimo sarà aggiornato.

+ +
+

Nota: : la maggior parte dei browser attiverà una security exception se provi ad effettuare un XMLHttpRequest da un URL file://. Per esempio se carichi il file direttamente nel browser (facendo doppio click). Per farlo funzionare, devi caricare il file a un server, per esempio usando GitHub (articolo in inglese), o un server locale come Python's SimpleHTTPServer (articolo in inglese).

+
+ +

C'è però una considerazione da tenere in conto: il lettore di schermo legge solo la parte del testo che viene aggiornata. È utile dunque che legga anche l'heading, per aiutare l'utente a ricordare quale sezione della pagina è stata aggiornata. Per farlo, possiamo aggiungere la proprietà aria-atomic alla sezione. Modifica la tua etichetta <section> così:

+ +
<section aria-live="assertive" aria-atomic="true">
+ +

L'attributo aria-atomic="true" indica al lettore di schermo che deve leggere l'intero contenuto dell'elemento, non solo le parti che sono state aggiornate.  

+ +
+

Nota: : puoi vedere l'esempio completo qui: aria-live.html (vedi anche la versione live).

+
+ +
+

Nota: : la proprietà aria-relevant è utile per controllare cosa viene letto quando un'area di contenuto viene aggiornata. Per esempio puoi far si che siano lette solo le parti aggiunte o al contrario le parti rimosse dal contenuto.

+
+ +

Migliorare l'accessibilità da tastiera

+ +

Come abbiamo già detto in altri articoli di questo modulo, uno dei punti forti di HTML in termini di accessibilità è che implementa automaticamente l'accessibilità da tastiera per funzionalità come i bottoni, i campi dei formulari e i link. In generale, puoi sempre usare il tasto TAB per muoverti da un elemento all'altro e il tasto INVIO per selezionare o attivare gli elementi. In alcune circostanze puoi anche usare altri tasti (per esempio le frecce, per muoverti su e giù tra le opzioni di una lista <select>).

+ +

Ciononostante, a volte ti troverai a dover scrivere codice che fa uso di elementi non semantici che compiono la funzione di bottoni (o altri tipi di elementi), o codice che usa elementi che possono ricevere focus per scopi diversi dal normale. Forse starai cercando di sistemare del codice mal scritto in precedenza, o di costruire un qualche tipo di widget complesso che richiede tecniche non ortodosse.

+ +

Per rendere focalizzabili elementi che normalmente non lo sono, WAI-ARIA estende l'attributo tabindex con alcuni nuovi valori:

+ + + +

Abbiamo discusso questi valori in maggior dettaglio e mostrato una implementazione tipica nel nostro articolo sull'accessibilità in HTML, vedi Implementare l'accessibilità da tastiera in un secondo tempo.

+ +

Accessibilità dei controlli non semantici

+ +

Proseguendo con il tema trattato nella sezione precedente, quando si usa una serie di <div> annidati in congiunto con CSS o JavaScript per creare una funzionalità complessa per l’interfaccia utente, o se si cambia/migliora sostanzialmente un controllo nativo tramite JavaScript, non solo è possibile che l’accessibilità da tastiera ne risulti ridotta, ma anche per gli utenti che usano lettori di schermo potrebbero prodursi difficoltà a comprendere l’uso della funzionalità, se non ci sono indicazioni semantiche o altri indizi. In tali situazioni, ARIA può aiutare a fornire il valore semantico addizionale necessario. 

+ +

Validazione di formulari e avvisi di errore

+ +

Innanzitutto, rivediamo l’esempio di formulario che avevamo preso in considerazione nell’articolo sull’accessibilità in CSS e JavaScript (vedi Mantieni un uso non intrusivo di JavaScript). Alla fine di tale sezione abbiamo mostrato alcuni attributi ARIA che sono stati aggiunti al messaggio che appare se ci sono errori di validazione quando provi a inviare il formulario:

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ + + +

Possiamo ora procedere oltre con il nostro utilizzo di ARIA, e fornire ulteriore assitenza nella validazione dei dati. Per esempio, perchè non indicare dal principio quali campi sono obbligatori, e quale intervallo di età è permesso introdurre?

+ +
    +
  1. A questo punto, salva sul tuo dispositivo una copia dei files  validazione-formulario.html e validazione.js.
    2. +
  2. Aprili entrambi in un editor di testo e dai un’occhiata a come funziona il codice.
    3. +
  3. Per prima cosa, aggiungi un paragrafo come quello che vedi qui sotto giusto prima della etichetta di apertura del formulario <form>, e marca entrambe le etichette <label> del formulario con un asterisco. Questo è il metodo con cui normalmente si segnalano i campi obbligatori agli utenti che non hanno limitazioni visuali. + 
    <p>I campi marcati con un asterisco (*) sono obbligatori.</p>
    +
    4. +
  4. Questa indicazione è utile dal punto di vista visuale, ma non è facile da cogliere per gli utenti che usano lettori di schermo. Fortunatamente, WAI-ARIA fornisce l’attributo  aria-required , che suggerisce al lettore di schermo di indicare all’utente quali sono i campi del formulario che devono essere compilati obbligatoriamente. Aggiorna gli elementi <input> come vedi qui sotto:                                                              
    5. +
  5. + 
    <input type="text" name="name" id="name" aria-required="true">
+
+<input type="number" name="age" id="age" aria-required="true">
    +
    6. +
  6. A questo punto se salvi l’esempio e lo testi con un lettore di schermo dovresti ascoltare qualcosa come “Introduci il tuo nome asterisco, obbligatorio, modifica testo”.
    7. +
  7. Potrebbe inoltre risultare utile indicare agli utenti l’intervallo di anni dentro il quale dovrebbe situarsi il valore dell’età. Spesso tale valore si indica tramite un placeholder, ossia un valore indicativo che appare all’interno del campo quando non è ancora stato compilato. WAI-ARIA include le proprietà aria-valuemin e aria-valuemax per specificare un intervallo di valori minimo e massimo, ma queste proprietà al momento non hanno un supporto ampio; una caratteristica che gode di un migliore supporto è l’attributo HTML5 placeholder, che contiene un messaggio che viene mostrato nel campo quando l’utente non vi ha ancora introdotto nessun valore, e viene letto da un certo numero di lettori di schermo. Aggiorna il campo età come indicato qui: + 
    <input type="number" name="age" id="age" placeholder="introduci un numero compreso tra 1 e 150" aria-required="true">
    +
    8. +
+ +
+

Nota: puoi vedere un esempio completo qui: validazione-formulario-aggiornato.html.

+
+ +

WAI-ARIA permette inoltre alcune tecniche avanzate di etichettazione dei formulari, che vanno al di là del classico elemento {{htmlelement("label")}}. Abbiamo già discusso sull’utilizzo della proprietà aria-label per rendere un’etichetta {{htmlelement("label")}} invisibile agli utenti che non usano lettori di schermo (vedi la sezione Indicatori/riferimenti sopra). Ci sono anche altre tecniche di etichettazione che fanno uso di proprietà come aria-labelledby, se vuoi usare un elemento non-<label> come etichetta o se vuoi etichettare multipli campi del formulario con la stessa etichetta, e aria-describedby, se vuoi associare informazione aggiuntiva a un campo del formulario e vuoi che il lettore di schermo la legga. Vedi l’articolo in inglese  WebAIM's Advanced Form Labeling per maggiori dettagli.

+ +

Ci sono inoltre molte altre proprietà e attributi utili per indicare lo stato di un elemento di un formulario. Per esempio, si può usare aria-disabled="true" per indicare che un campo è disabilitato. Molti browser salteranno i campi disabilitati, e i lettori di schermo non li leggeranno, ma in alcuni casi saranno comunque indicati, dunque è una buona idea includere questo attributo per permettere al lettore di schermo di sapere che un campo è effettivamente disabilitato.

+ +

Se esiste la possibilità che lo stato di un campo cambi da disabilitato ad abilitato è buona norma indicarlo all’utente, e  inoltre spiegare le conseguenze di tale cambio. Per esempio, nel nostro formulario demo validazione-formulario-casella-disabilitata.html c’è una casella che, quando è selezionata, abilita un altro campo del formulario, tramite il quale si possono introdurre informazioni aggiuntive. Abbiamo preparato un paragrafo nascosto:

+ +
<p class="hidden-alert" aria-live="assertive"></p>
+ +

Questo elemento è nascosto alla vista tramite position: absolute. Quando la casella viene selezionata/deselezionata, il contenuto dell’area nascosta si aggiorna per segnalare agli utenti che usano lettore di schermo in che modo la struttura del formulario è cambiata dopo aver selezionato la casella; inoltre si aggiorna anche lo stato dell’attributo aria-disabled e si fornisce anche un indicazione visuale del cambio:

+ +
function toggleMusician(bool) {
+  var instruItem = formItems[formItems.length-1];
+  if(bool) {
+    instruItem.input.disabled = false;
+    instruItem.label.style.color = '#000';
+    instruItem.input.setAttribute('aria-disabled', 'false');
+    hiddenAlert.textContent = 'I'Il campo strumenti suonati è ora abilitato; usalo per indicarci quali strumenti sai suonare.';
+  } else {
+    instruItem.input.disabled = true;
+    instruItem.label.style.color = '#999';
+    instruItem.input.setAttribute('aria-disabled', 'true');
+    instruItem.input.removeAttribute('aria-label');
+    hiddenAlert.textContent = ''Il campo Strumenti suonati è ora disabilitato.';
+  }
+}
+ +

Descrivere bottoni non semantici come bottoni

+ +

Ci è già capitato di discutere della accessiblità nativa di alcuni elementi come bottoni, link o campi di formulario, e dei problemi di accessibilità che sorgono quando si usano elementi sostitutivi per compiere le stesse funzioni di questi elementi. Vedi Controlli di interfaccia utente nell’articolo sull’accessibilità in HTML, e Migliorare l’accessibilità da tastiera, qui sopra). In molti casi è possibile restituire l’accessibilità da tastiera a tali elementi senza troppi problemi, usando tabindex e un poco di JavaScript.

+ +

Ma come fare con i lettori di schermo? Non potranno interpretare gli elementi sostitutivi come bottoni. Se facciamo un test con il nostro esempio  div-falsi-bottoni.html e un lettore di schermo, i falsi bottoni saranno segnalati all’utente con frasi come “Cliccami!, gruppo”, che risultano di difficile interpretazione.

+ +

Possiamo rimediare al problema usando un ruolo WAI-ARIA. Salva la pagina div-falsi-buttoni.html, e aggiungi role="button" ad ogni <div> che compie la funzione di bottone, come per esempio:

+ +
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0" role="button">Cliccami!</div>
+ +

Se ora provi a navigare la pagina con un lettore di schermo, i bottoni saranno letti come “Cliccami!, bottone”, e tutto risulterà molto più chiaro.

+ +
+

Nota: non dimenticare che usare il corretto elemento semantico è sempre una opzione migliore. Se vuoi creare un bottone e non ci sono ragioni valide per non usare un elemento  <button>, dovresti usare un elemento <button>!

+
+ +

Guidare gli utenti nell’uso di widget complessi

+ +

Ci sono molti altri ruoli che danno la possibilità di assegnare ad elementi non semantici lo status di comuni elementi dell’interfaccia utente, elementi che vanno al di là di ciò che è disponibile nell’HTML standard, come per esempio  combobox, slider, tabpanel, tree. Puoi trovare alcuni utili esempi nella Deque university code library, per farti un'idea di come tali elementi possono essere resi accessibili.

+ +

Prendiamo in considerazione un esempio. Torniamo ad usare il nostro semplice infobox a schede (vedi Nascondere elementi nell’articolo sull’accessibilità in CSS e JavaScript), che puoi trovare qui: infobox a schede (vedi codice sorgente).

+ +

Questo esempio funziona perfettamente in termini di accessibilità da tastiera: puoi muoverti facilmente da una scheda all’altra usando il tasto TAB e selezionare una scheda con INVIO per visualizzarne il contenuto. È inoltre abbastanza accessibile se si usa un lettore di schermo, puoi infatti usare gli headings per navigare il contenuto anche senza vederlo. Ciò che però non risulterà del tutto chiaro è in cosa consiste il contenuto stesso: un lettore di schermo riporta il contenuto dell’infobox come composto da un lista di link e da dell’altro contenuto con tre headings. Non da nessuna indicazione di come i contenuti sono relazionati tra loro. Fornire all’utente indicazioni precise su come il contenuto è strutturato è sempre una buona idea.

+ +

Abbiamo creato una versione migliorata dell’esempio, chiamata aria-tabbed-info-box.html (vedi versione live). Abbiamo aggiornato l’interfaccia del box così:

+ +
<ul role="tablist">
+  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
+</ul>
+<div class="panels">
+  <article class="active-panel" role="tabpanel" aria-hidden="false">
+    ...
+  </article>
+  <article role="tabpanel" aria-hidden="true">
+    ...
+  </article>
+  <article role="tabpanel" aria-hidden="true">
+    ...
+  </article>
+</div>
+ +
+

Nota: il cambio più evidente è la rimozione dei link che erano presenti precedentemente nell’esempio. Ora si usano i componenti li della lista per identificare le schede. Questo procedimento rende il tutto meno confuso per gli utenti che usano lettori di schermo, in quanto i link che c’erano in precedenza non conducevano da nessuna parte, servivano solo a cambiare di scheda. Inoltre gli attributi aria-setsize e aria-posinset permettono ora di identificare chiaramente le schede tramite il lettore di schermo: in precedenza, con i link, il browser trasmetteva sempre al lettore “1 di 1”, e non “1 di 3”, “2 di 3”, ecc.

+
+ +

 

+ +

Le nuove funzionalità aggiunte all’infobox di esempio sono le seguenti:

+ + + +

Secondo i nostri test, questa nuova struttura ha migliorato sensibilmente l’accessibilità dell’infobox a schede. Le schede sono ora riconosciute come schede (ora il lettore pronuncia “scheda”, o perlomeno “tab”, in inglese), la scheda attualmente selezionata è chiaramente indicata, pronunciando il lettore la parola “selezionata” insieme al nome della scheda, e il lettore di schermo indica anche il numero della scheda in cui si trova l’utente. Inoltre, grazie ai valori di aria-hidden impostati (solo la scheda attualmente selezionata ha il valore aria-hidden="false"), il contenuto non nascosto è il solo che il lettore può leggere, rendendolo il tutto più facile e meno confuso da navigare per l’utente.

+ +

 

+ +
+

Nota: puoi assegnare l’attributo aria-hidden="true"  a qualsiasi contenuto che vuoi che sia ignorato dai lettori di schermo.

+
+ +

Riassunto

+ +

Questo articolo non è da considerarsi esaustivo per quanto riguarda tutte le funzionalità disponibili con la tecnologia WAI-ARIA, ma dovrebbe averti fornito informazioni sufficienti a capire come usarla, e come identificare le situazioni più comuni in cui avrai bisogno di ricorrere ad essa.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}

diff --git a/files/it/learn/accessibility/what_is_accessibility/index.html b/files/it/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..52a5c138f8 --- /dev/null +++ b/files/it/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,196 @@ +--- +title: Cosa è l'accessibilità? +slug: Learn/Accessibilità/Cosa_è_accessibilità +tags: + - Accessibilità + - Articolo + - CSS + - HTML + - JavaScript + - Principiante + - Strumenti + - TA + - disabilità + - imparare + - lettore schermo + - tastiera + - tecnologie assistive + - utenti +translation_of: Learn/Accessibility/What_is_accessibility +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
+ +

Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e CSS.
Obiettivo:Acquisire familiarità con il concetto di accessibilità, capire di cosa si tratta e in che modo influisce sulla tua attività di sviluppatore web. 
+ +

Dunque, cosa è l'accessibilità?

+ +

L'accessibilità è la pratica di rendere i tuoi siti utilizzabili dal maggior numero di persone possibile. Di solito si pensa che il tema dell'accessibilità riguardi solo le persone che soffrono di una disabilità, ma in realtà l'accessibilità è un concetto importante anche per altri gruppi di persone, come coloro che usano dispositivi mobili o chi naviga in internet con una connessione lenta.

+ +

Puoi anche pensare all'accessibilità come alla pratica di trattare tutti alla stessa maniera e dare a tutti le stesse opportunità, indipendentemente dalle loro capacità e circostanze. Così come non è corretto impedire l'accesso a un edificio a una persona che si muove in sedia a rotelle (e infatti gli edifici pubblici devono essere dotati di rampe e ascensori), allo stesso modo non si deve escludere una persona dall'utilizzo di un sito web per il fatto che abbia un handicap o stia usando un dispositivo mobile. Tutti gli utenti devono avere gli stessi diritti.

+ +

Rendere un sito accessibile non solo è la cosa giusta da fare da un punto di vista etico, ma in molti paesi è anche obbligatorio per legge, e inoltre può contribuire a raggiungere categorie di utenti e clienti che altrimenti non potrebbero usare i tuoi servizi o acquistare i tuoi prodotti.

+ +

Rispettare le pratiche di accessibilità è benefico per tutti:

+ + + +

Quali tipi di disabilità prendere in considerazione?

+ +

Le persone con disabilità sono molto diverse tra loro, così come quelle senza disabilità. Il concetto chiave da imparare è smettere di pensare a come tu stesso usi il computer e navighi in internet, e cominciare a considerare come lo fanno gli altri. I principali tipi di disabilità sono spiegati qui sotto, insieme agli strumenti che le persone disabili usano per navigare il web (conosciuti come tecnologie assistive, o TA).

+ +
+

Nota: la Organizzazione Mondiale della Sanità nel suo rapporto (in inglese) Disabilità e salute afferma che "Oltre un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità", e "Tra 110 e 190 milioni di adulti hanno significative difficoltà funzionali". 

+
+ +

Persone con deficit visivo

+ +

Questa categoria include persone non vedenti, persone con una capacità visiva molto ridotta (ipovedenti), daltonici, ecc. Molte di queste persone usano ingranditori di schermo (sia fisici che software, per esempio la maggior parte dei navigatori è dotata di funzioni di zoom), e alcuni usano lettori di schermo, cioè programmi che leggono a voce alta il contenuto digitale:

+ + + +

È una buona idea acquisire familiarità con i lettori di schermo; dovresti provare a installarne uno e usarlo, per farti una idea di come funziona. Per maggiori dettagli su come usarli, fai riferimento alla nostra guida (in inglese) Guida al testing dei lettori di schermo su differenti browser. Il video qui sotto inoltre fornisce una breve testimonianza sull'uso dei lettori di schermo.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

In termini statistici, la Organizzazione Mondiale della Sanità stima che "circa 285 milioni di persone nel mondo hanno gravi deficit visivi: 39 milioni sono non vedenti e 246 milioni ipovedenti". (vedi il rapporto in inglese Deficit visivo e cecità). Si tratta di una significativa quantità di utenti, pari quasi alla popolazione degli Stati Uniti, che non potrà usufruire del tuo sito se non lo avrai reso accessibile.

+ +

Persone con deficit uditivo

+ +

Questa categoria di persone presentano una capacità uditiva molto ridotta o del tutto assente. Le persone con deficit uditivo spesso usano TA (vedi l'articolo in inglese Strumenti assistivi per persone con disfunzioni uditive, della voce, dell'apparato fonatorio o del linguaggio), ma non esistono in realtà tecnologie assistive specifiche per l'uso del computer o di internet. 

+ +

Ci sono, comunque, tecniche specifiche da tenere in conto per fornire alternative testuali ai contenuti audio, come per esempio trascrizioni o sottotitoli sincronizzati nei video. Più avanti si tratteranno queste tecniche nel dettaglio in un altro articolo.

+ +

Anche le persone con deficit uditivo rappresentano una significativa base di utenza. Come indica la Organizzazione Mondiale della Sanità nel rapporto in inglese Sordità e perdita dell'udito, "360 milioni di persone nel mondo presentano deficit uditivi gravi".

+ +

Persone con problemi di mobilità

+ +

Alcune persone soffrono di disabilità che riguardano il movimento. Ciò può riferirsi a problemi puramente fisici (come la perdita di un arto o uno stato di paralisi), o a disordini di tipo neurologico/genetico che comportano difficoltà nei movimenti o perdita di controllo sugli arti. Alcune persone possono avere difficoltà a compiere i movimenti della mano necessari per usare un mouse, mentre altre possono presentare problemi più gravi, come per esempio uno stato di paralisi estesa, che rende necessario l'uso di un puntatore comandato tramite movimenti della testa per interagire con il computer. 

+ +

Questo tipo di disabilità può anche essere dovuto all'età avanzata, piuttosto che a un trauma o una condizione specifica, e può anche essere attribuibile a limitazioni dell'hardware, come nel caso di utenti che non hanno un mouse a disposizione.

+ +

In generale, per gestire questo tipo di limitazioni è necessario sviluppare i propri siti o applicazioni in maniera tale che siano utilizzabili tramite tastiera. Tratteremo l'argomento dell'accessibilità tramite tastiera con articoli specifici più avanti nel modulo, ma nel frattempo ti consigliamo di provare a navigare alcuni siti usando solo la tastiera, per farti un'idea di come funziona. Per esempio, puoi usare il tasto TAB per muoverti da un campo all'altro di un formulario? Puoi trovare ulteriori dettagli sull'uso della tastiera per la navigazione dei siti nella sezione (in inglese) Test di accessibilità della navigazione con tastiera su differenti browser.

+ +

Secondo le statistiche, un numero significativo di persone soffre di limitazioni alla mobilità. Il rapporto (in inglese) Disabilità e funzionamento (adulti maggiorenni non ricoverati) indica che negli Stati Uniti la percentuale di adulti con difficoltà di funzionamento fisico è del 15,1%.

+ +

Persone con deficit cognitivo

+ +

Probabilmente il più ampio range di disabilità è quello compreso in quest'ultima categoria. Il termine deficit cognitivo può infatti riferirsi ad un'ampia gamma di disfunzioni, dalle malattie mentali alle difficoltà di apprendimento, da problemi di comprensione e concentrazione, come la sindrome da deficit di attenzione e iperattività, a persone che presentano una forma di autismo, o persone che soffrono di schizofrenia, e molti altri tipi di disturbo. Questo tipo di disabilità possono influenzare molte attività della vita quotidiana, causando problemi di memoria, comprensione, attenzione, ecc.

+ +

Le forme più comuni con cui tali forme di disabilità influenzano l'uso di un sito sono: difficoltà nel capire il procedimento da seguire per raggiungere un risultato; difficoltà nel ricordare come ripetere un'azione compiuta precedentemente; un senso di frustrazione causato da alcune caratteristiche del sito che lo rendono confuso e inconsistente nella navigazione.

+ +

Diversamente da altri problemi di accessibilità web, è impossibile fornire linee guida specifiche per risolvere le difficoltà causate da deficit cognitivo; la strategia migliore è di impegnarsi a disegnare i propri siti nella forma più logica, consistente e usabile possibile. Per esempio, assicurati che:

+ + + +

Queste non sono soltanto tecniche di accessibilità, ma piuttosto buone pratiche di disegno web che saranno utili a chiunque userà i tuoi siti, e dovrebbero essere pratiche standard nel tuo lavoro di sviluppo web.

+ +

In termini statistici, anche in questo caso i numeri sono significativi. Per esempio, il rapporto (in inglese) della Cornell University Rapporto sullo stato della disabilità 2014 (PDF, 511KB) indica che nel 2014 il 4.5% della popolazione degli Stati Uniti di età compresa tra 21 e 64 anni presenta una qualche forma di disabilità cognitiva.

+ +
+

Nota:  La sezione (in inglese) Cognitive del sito WebAIM fornisce utili approfondimenti sulle pratiche riportate sopra, ed è certamente una lettura consigliata.

+
+ +

Come implementare l'accessibilità nei tuoi progetti

+ +

Un mito molto comune sull'accessibilità è che questa sia una sorta di "costoso extra". Questo mito può essere veritiero se:

+ + + +

Se invece l'accessibilità è parte integrante del tuo progetto sin dal principio, il costo per rendere il contenuto accesibile sarà minimo.

+ +

Quando pianifichi un progetto, introduci test di accessibilità nella tua routine di testing, allo stesso modo in cui effettui test per gli altri segmenti di utenza (come per esempio gli utenti che usano pc desktop, iOS o dispositivi mobili, ecc.). Effettua test sin dall'inizio e con frequenza, idealmente facendo uso di test automatizzati che rilevino sistematicamente caratteristiche mancanti (come per esempio mancanza di testo alternativo nelle immagini, o la presenza di link testuali mal costruiti. Vedi l'articolo in inglese Relazione tra elementi e contesto) ed anche, se possibile, effettuando test con persone disabili per verificare il funzionamento delle caratteristiche più complesse del sito. Per esempio: 

+ + + +

Dovresti prendere nota di tutte le potenziali aree problematiche del tuo contenuto su cui sarà necessario intervenire perchè siano rese accessibili, assicurarti che siano testate a sufficienza e pensare a soluzioni o alternative. Il contenuto testuale (come vedrai nel prossimo articolo) è facile da gestire, ma come fare con il contenuto multimediale, o le grafiche 3D? Dovresti considerare il budget a disposizione e pensare a quali possibilità hai per rendere il contenuto accessibile. Per esempio, potresti decidere di pagare qualcuno per trascrivere tutto il contenuto multimediale. Può essere costoso, ma è fattibile.

+ +

Inoltre, devi essere realista. Un sito accessibile al 100% è un ideale irraggiungibile, ci sarà sempre qualche situazione particolare per la quale un utente troverà difficile usare il tuo contenuto, ma devi fare tutto il possibile per evitare che si verifichino tali situazioni. Se hai in mente di includere nel tuo sito uno spettacolare grafico a torta 3D creato con WebGL, dovresti anche includere, come alternativa accessibile, una tabella dati standard. Oppure, potresti addirittura decidere di eliminare il grafico 3D: la tabella è accessibile a tutti, più rapida da creare, richiede meno risorse CPU ed è più facile da mantenere.

+ +

D'altro canto se stai costruendo un sito-galleria per opere d'arte in 3D, non sarebbe ragionevole pretendere che ogni opera fosse perfettamente accessibile alle persone con disabilità visiva, dato che si tratta di un medium interamente visuale.

+ +

Per dimostrare che hai grande considerazione per l'accessibilità e che l'hai inclusa nel tuo progetto, pubblica una dichiarazione di accessibilità sul tuo sito nella quale spieghi in dettaglio la tua politica sull'accessibilità, e quali misure hai adottato per rendere il sito accessibile. Se un utente ti contatta lamentando un problema di accessibilità, assicurati di ascoltarlo con attenzione e chiarire tutti i dettagli, sii empatico, e adotta tutte le misure ragionevoli per risolvere il problema.

+ +
+

Nota: Il nostro articolo (in inglese) Come gestire i problemi di accessibilità più comuni spiega con maggiori dettagli le specifiche di accessibilità che devono essere testate. 

+
+ +

Per riassumere:

+ + + +

Linee guida di accessibilità e legge

+ +

Ci sono numerose checklist e set di linee guida disponibili per effettuare test basici di accessibilità, e a prima vista possono apparire complicate. Ti consigliamo innanzitutto di acquisire familiarità con le aree più importantidi cui devi occuparti, e di cercare di comprendere le strutture generali delle linee guida che sono più rilevanti al tuo caso specifico.

+ + + +

È una buona idea leggere il testo della legge italiana sull'accessibilità, per familiarizzarsi con essa ed evitare eventuali problemi legali per i tuoi siti.

+ +

API per l'accessibilità

+ +

I browser fanno uso di alcune API speciali per l'accessibilità (fornite dal sistema operativo) che mostrano informazioni utili per le tecnologie assistive (TA). Le TA in generale usano solo informazioni semantiche, dunque non prendono in considerazione aspetti come lo stile di una pagina o gli script in JavaScript. Le informazioni sono strutturate in una mappa ad albero.

+ +

Ogni sistema operativo ha la sua API per l'accessibilità:

+ + + +

Quando le informazioni semantiche native fornite dagli elementi HTML della tua applicazione web non sono sufficienti, puoi supplementarle con caratteristiche della specificazione WAI-ARIA (articolo in inglese), che aggiunge informazione semantica alla mappa ad albero per migliorare l'accessibilità. Puoi sapere di più su WAI-ARIA nel nostro articolo basi di WAI-ARIA.

+ +

Riassunto

+ +

Questo articolo dovrebbe averti fornito una utile panoramica sull'accessibilità, averti mostrato perchè è importante, e come puoi inserirla nel tuo flusso di lavoro. Dovrebbe inoltre aver suscitato il tuo interesse e un desiderio di conoscere i dettagli su come implementare l'accessibilità nei tuoi progetti. Cominceremo a occuparcene proprio nella prossima sezione, dove spiegheremo come HTML costituisce un'ottima base per l'accessibilità. 

+ +
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
diff --git "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" deleted file mode 100644 index 46a2b24c4d..0000000000 --- "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Accessibilità per dispositivi mobili -slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili -tags: - - Accessibilità - - Articolo - - Mobile - - Principiante - - Responsivo - - Touchscreen - - imparare - - screenreader - - touch -translation_of: Learn/Accessibility/Mobile ---- -
-
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibilità")}}
- -

L’uso di internet tramite dispositivi mobili è sempre più diffuso, e i sistemi operativi per dispositivi mobili più popolari, Android e iOS, sono dotati di strumenti nativi per l’accessibilità. È dunque importante prendere in considerazione l’accessibilità dei tuoi contenuti su tali piattaforme. Questo articolo tratta specificamente dell’accessibilità per dispositivi mobili.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i precedenti articoli del corso.
Obiettivo:Comprendere i problemi di accessibilità relativi ai dispositivi mobili, e come risolverli.
- -

Accessibilità per dispositivi mobili

- -

Lo stato attuale dell’accessibilità, e del supporto degli standard web in generale, è buono nei dispositivi mobili moderni. Sono lontani i giorni in cui i dispositivi mobili utilizzavano tecnologie web completamente differenti dai browser per pc, obbligando gli sviluppatori a fornire siti completamente separati per le due piattaforme (anche se comunque molte aziende continuano a fornire un sito specifico per dispositivi mobili, di solito contenente la parola “mobile” nel dominio).

- -

 

- -

Oggigiorno, in generale, i dispositivi mobili non hanno problemi a visualizzare correttamente tutti i tipi di siti, e i principali sistemi operativi mobili hanno lettori di schermo nativi. I browser moderni per dispositivi mobili hanno anche un buon supporto per WAI-ARIA.

- -

Per rendere un sito accessibile e usabile su dispositivi mobili devi solo rispettare le buone pratiche generali di disegno e accessibilità web.

- -

 

- -

Ci sono però alcune eccezioni che richiedono una attenzione particolare; le principali sono:

- - - -

Riassunto dei test sui lettori di schermo per  Android e iOS

- -

I più comuni sistemi operativi per dispositivi mobili hanno installati lettori di schermo nativi pienamente funzionanti. Questi funzionano praticamente alla stessa maniera dei lettori di schermo per pc, ma si usano con gesti touch invece che con combinazioni di tasti.

- -

Prendiamo in considerazione i due principali lettori di schermo per dispositivi mobili: TalkBack per Android e VoiceOver per iOS.

- -

Android TalkBack

- -

 

- -

TalkBack è il lettore di schermo presente di default su Android.

- -

Per attivarlo, selezionaImpostazioni > Accessibilità > TalkBack, e premi lo switch di attivazione/disattivazione. Inoltre segui qualsiasi altra indicazione che il sistema ti fornisca.

- -

Nota: versioni anteriori di TalkBack si attivano con metodi leggermente differenti.

- -

Quando TalkBack è attivato, i controlli basici del tuo dispositivo Android presenteranno alcune differenze rispetto alla modalità normale. Per esempio:

- -

 

- -
    -
  1. Fare click sull’icona di una app la selezionerà senza aprirla, e il lettore pronuncerà il nome della app.
    2. -
  2. Fare swipe a destra o a sinistra farà selezionare un’altra app, oppure, se stai navigando un menu, un altro bottone/controllo. Il dispositivo leggerà ogni opzione man mano che le selezioni.
    3. -
  3. Fare doppio click aprirà la app selezionata o attiverà/disattiverà la opzione selezionata.
    4. -
  4. Puoi anche “esplorare col dito“: mantieni premuto il dito sullo schermo e fallo scorrere lungo la superficie dello stesso. Il dispositivo leggerà il nome delle varie app o oggetti su cui passerai il dito.
    5. -
- -

Se vuoi disattivare TalkBack:

- -
    -
  1. Naviga alle Impostazioni
    2. -
  2. Naviga a Accessibilità > TalkBack.
    3. -
  3. Naviga allo switch di attivazione/disattivazione e disattivalo.
    4. -
- -

Nota: puoi navigare alla schermata di inizio in qualsiasi momento facendo swipe in alto e a sinistra lentamente. Se hai più di una schermata di inizio, puoi muoverti da una all’altra facendo swipe con due dita a destra e sinistra.

- -

Per una lista più completa dei gesti che puoi usare con TalkBack, vedi Utilizzare i gesti TalkBack.

- -

Sbloccare il telefono

- -

Quando TalkBack è attivato, la procedura per sbloccare il telefono cambia leggermente.

- -

Devi fare swipe con due dita dal basso verso l’alto. Se ci sono una password o un codice impostati, sarai reindirizzato allo schermo dove inserirli.

- -

Puoi anche esplorare con il dito, troverai il bottone di sblocco nel centro della parte bassa dello schermo. Fai doppio click sul bottone per sbloccare lo schermo.

- - - -

TalkBack ti permette di accedere ai menu contestuali locali e globali del dispositivo da qualunque punto del sistema operativo. I menu globali sono quelli che permettono di accedere ai controlli e alle opzioni generali del dispositivo, mentre i menu locali sono relativi alla applicazione o schermata in cui ti trovi al momento.

- -

Per accedere ai menu:

- -
    -
  1. Per accedere al menu globale, fai swipe veloce verso il basso e poi a destra.
    2. -
  2. Per accedere al menu locale, fai swipe veloce verso l’alto e poi a destra.
    3. -
  3. Fai swipe a sinistra o a destra per muoverti da una opzione all’altra.
    4. -
  4. Quando l’opzione che ti interessa è selezionata, fai doppio click per attivarla o disattivarla.
    5. -
- -

Per maggiori dettagli su tutte le opzioni disponibili nei menu locali e globali, vedi Menu contestuali locali e globali.

- - - -

Puoi usare il menu contestuale locale del browser per trovare le opzioni per navigare le pagine web usando gli headings, i campi dei formulari, i link, ecc., oppure navigare linea per linea.

- -

Per esempio, con TalkBack attivato:

- -
    -
  1. Apri il tuo web browser.
    2. -
  2. Attiva la barra URL.
    3. -
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: -
      -
    • Seleziona la barra URL facendo swipe a destra/sinistra fino a trovarla, e poi fai doppio click.
      • -
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per introdurlo. Ripeti il procedimento per ogni carattere.
      • -
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • -
    -
    4. -
  4. Fai swipe a sinistra o destra per muoverti tra i differenti oggetti presenti sulla pagina.
    5. -
  5. Fai swipe in alto e a destra per aprire il menu contestuale locale.
    6. -
  6. Fai swipe a destra fino a trovare la opzione "Headings e punti di riferimento".
    7. -
  7. Fai doppio click per selezionarla. Ora puoi fare swipe a destra o sinistra per muoverti tra headings e punti di riferimento ARIA.
    8. -
  8. Per ritornare al modo di default, apri il menu contestuale locale facendo swipe in alto a destra, seleziona l’opzione “Default” e fai doppio click per attivarla.
    9. -
- -

Nota: Vedi Guida introduttiva a TalkBack su Android per una documentazione più completa.

- -

iOS VoiceOver

- -

 

- -

Una versione di VoiceOver per dispositivi mobili è inclusa in tutti i sistemi operativi iOS.

- -

Per attivarlo, vai alla tua appImpostazionie selezionaGenerale>Accessibilità>VoiceOver. Premi lo switchVoiceOverper attivarlo (vedrai anche alcune altre opzioni relative a VoiceOver in questa pagina).

- -

Quando VoiceOver sarà attivato, i controlli basici del sistema saranno leggermente diversi:

- -

 

- -
    -
  1. Un click singolo selezionerà l’oggetto su cui premi; il dispositivo pronuncerà il nome dell’oggetto selezionato.
    2. -
  2. Puoi inoltre navigare tra gli oggeti presenti sullo schermo facendo swipe a destra o sinistra per muoverti dall’uno all’altro, o facendo scorrere il dito per lo schermo. Quando troverai l’oggetto che vuoi attivare, rimuovi il dito dallo schermo per selezionarlo.
    3. -
  3. Per attivare l’oggetto dopo averlo selezionato, per esempio se vuoi aprire una applicazione, fai doppio click in qualsiasi punto dello schermo.
    4. -
  4. Fai swipe con tre dita per scorrere attraverso una pagina.
    5. -
  5. Fai click con due dita per eseguire una azione relativa al contesto corrente, come per esempio scattare una foto con la applicazione fotocamera aperta.
    6. -
- -

Per disattivare VoiceOver, naviga aImpostazioni>Generale>Accessibilità>VoiceOver e premi lo switchVoiceOver.

- -

Come usare il Rotore

- -

Quando VoiceOver è attivo, avrai a tua disposizione una funzionalità dei navigazione chiamata Rotore, che ti permette di accedere rapidamente ad alcune opzioni di uso comune. Per usarlo:

- -

Using the Rotor

- -

When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:

- -
    -
  1. Muovi due dita in circolo per lo schermo, come se stessi usando un vecchio telefono a disco. Il dispositivo pronuncerà il nome delle varie opzioni una dopo l’altra man mano che vai muovendo le dita. Puoi andare avanti e indietro mentre il dispositivo passa da un’opzione all’altra ciclicamente.
    2. -
  2. Quando hai trovato l’opzione che ti interessa: -
      -
    • Rimuovi le dita dallo schermo per selezionarla.
      • -
    • Se si tratta di una opzione il cui valore è aumentabile/diminuibile, come per esempio il Volume o la Velocità di Locuzione, puoi fare swipe verso l’alto o verso il basso per aumentare o diminuire il valore dell’opzione selezionata.
      • -
    -
    3. -
- -

Le opzioni disponibili tramite il Rotore dipendono dal contesto: quando apri il Rotore le opzioni che troverai saranno relative all’applicazione o alla schermata in cui ti trovi (vedi qui sotto per un esempio).

- - - -

Vediamo come navigare in internet usando VoiceOver:

- -
    -
  1. Apri il tuo browser.
    2. -
  2. Attiva la barra URL.
    3. -
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: -
      -
    • Seleziona la barra URL facendo swipe a destra o a sinistra fino a trovarla, e poi fai doppio click.
      • -
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per selezionarlo. Fai doppio click per introdurlo. Ripeti il procedimento per ogni carattere.
      • -
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • -
    -
    4. -
  4. Fai swipe a sinistra e a destra per muoverti tra i differenti oggetti presenti sulla pagina. Fai doppio click su un oggetto per selezionarlo (per esempio, per seguire un link).
    5. -
  5. L’opzione del Rotore selzionata per default è la Velocità di Locuzione; puoi fare swipe in su o in giù per aumentare o diminuire la velocità di locuzione del lettore di schermo.
    6. -
  6. Ora muovi due dita in circolo per lo schermo per aprire il Rotore e far scorrere le sue opzioni. Riportiamo qui alcuni esempi delle opzioni disponibili nel Rotore: -
      -
    • Velocità di locuzione: cambia la velocità di locuzione del dispositivo.
      • -
    • Contenitori: il lettore di schermo si muove per i vari contenitori semantici presenti nella pagina.
      • -
    • Headings: il lettore di schermo si muove per i vari heading presenti nella pagina.
      • -
    • Links: il lettore di schermo si muove per i vari link presenti nella pagina.
      • -
    • Controlli formulario: il lettore di schermo si muove per i vari campi dei formulari presenti nella pagina.
      • -
    • Lingue: cambia la lingua della pagina, se sono disponibili differenti traduzioni.
      • -
    -
    7. -
  7. Seleziona Headings. Ora potrai fare swipe in su e in giù per muoverti da un heading all’altro della pagina.
    8. -
- -

Nota: per un riferimento più completo sui gesti disponibili in VoiceOver e altri suggerimenti sul testing dell’accessibilità in iOS, vedi Test Accessibility on Your Device with VoiceOver.

- -

Meccanismi di controllo

- -

Nel nostro articolo sull’accessibilità in CSS e JavaScript abbiamo preso in considerazione eventi che sono associati a specifici meccanismi di controllo (vedi eventi specifici del mousedel mouse). Per ricapitolare, tali eventi causano problemi di accessibilità, perchè altri meccanismi di controllo non possono attivare le funzionalità ad essi associate.

- -

Ad esempio, l’evento click è ottimale in termini di accessibilità: un gestore di eventi associato ad esso può essere attivato cliccando con il mouse sull’elemento su cui l’evento è impostato, oppure selezionandolo tramite tasto TAB e premendo INVIO, oppure facendo click con un dito su un touchscreen. Prova il nostro esempio-di-bottone-semplice.html (vedi la versione live) per capire di cosa parliamo.

- -

Altri eventi simili, come mousedown e mouseup possono creare problemi, in quanto i loro gestori di eventi non possono essere attivati usando controli alternativi al mouse.

- -

Se provi a controllare il nostro esempio di simple-box-drag.html (vedi la versione live) tramite tastiera o touchscreen, capirai qual è il problema. Ciò succede perchè stiamo usando un codice come il seguente:

- -
div.onmousedown = function() {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  movePanel();
-}
-
-document.onmouseup = stopMove;
- -

Per abilitare altre forme di controllo, devi usare eventi alternativi equivalenti. Per esempio, gli eventi touch sono pensati specificamente per i dispositivi con touchscreen:

- -
div.ontouchstart = function(e) {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  positionHandler(e);
-  movePanel();
-}
-
-panel.ontouchend = stopMove;
- -

Presentiamo qui un semplice esempio che mostra come usare gli eventi mouse e touch insieme. Vedi  multi-control-box-drag.html (vedi la versione liveee the example live).

- -

Nota: puoi vedere esempi di come implementare differenti meccanismi di controllo nell’articolo in inglese  Implementing game control mechanisms.

- -

Disegno responsivo

- -

 

- -

Il disegno responsivo è la pratica di realizzare layout e altre caratteristiche delle applicazioni in una forma che cambia dinamicamente secondo alcuni fattori come le dimensioni dello schermo e la risoluzione dello stesso, di modo che le applicazioni siano usabili e accessibili a utenti che usano differenti tipi di dispositivi.

- -

In particolare, gli aspetti più comuni del disegno responsivo che si devono prendere in considerazione per i dispositivi mobili sono:

- -

 

- - - -

Nota: non forniremo una spiegazione dettagliata delle tecniche di disegno responsivo qui, dato che sono già trattate in altri articoli presenti su questo sito (vedi i link qui sopra).

- -

Considerazioni specifiche per dispositivi mobili

- -

Ci sono altri importanti aspetti da prendere in considerazione per ottimizzare l’accessibilità dei siti sui dispositivi mobili. Riportiamo due esempi qui sotto, e in futuro speriamo di riuscire ad aggiungerne altri.

- -

Non disabilitare lo zoom

- -

Utilizzando viewport, è possibile disabilitare la funzionalità di zoom, ponendo il seguente codice nella <head>:

- -
<meta name="viewport" content="user-scalable=no">
- -

Non dovresti mai farlo, a meno che sia strettamente necessario. Molte persone infatti usano lo zoom per migliorare la visibilità e leggibilità del contenuto, e privare i tuoi utenti di tale possibilità non è una buona pratica. Ci sono alcune situazioni in cui l’uso dello zoom può effettivamente danneggiare la struttura dell’interfaccia utente; in tali casi, se davvero ritieni necessario disabilitare lo zoom, dovresti fornire una funzionalità equivalente, come per esempio dei controlli per aumentare le dimensioni del testo senza alterare altri elementi dell’interfaccia utente.

- -

Accessibilità dei menu

- -

È una pratica molto comune, quando un sito viene visualizzato su un dispositivo con schermo di dimensioni ridotte, usare media queries per ridurre il menu di navigazione a un semplice bottone o una icona, che quando vengono premuti si espandono mostrando gli elementi del menu in forma di menu drop-down, o menu a tendina. Di solito si utilizza una icona con tre linee orizzontali, nota come "menu ad hamburger".

- -

 

- -

Quando implementi un menu di questo tipo, devi assicurarti che l’”hamburger” sia accessibile con gli appropriati meccanismi di controllo (normalmente su dispositivo mobile vi si accede tramite touch), come discusso in {{anch("Meccanismi di controllo")}} più sopra, e che il resto della pagina sia nascosto o comunque disabilitato mentre il menu sia attivo, per evitare confusione durante l’utilizzo dello stesso.

- -

Qui puoi trovare un buon esempio di menu ad hamburger.

- -

Input dell’utente

- -

Quando si usano dispositivi mobili, inserire dati è di solito un’esperienza più lenta e tediosa che il suo equivalente su pc o laptop. È molto più facile scrivere con una tastiera normale che con una virtuale o una di dimensioni ridotte.

- -

Per tale ragione, vale la pena cercare di minimizzare il più possibile la quantità di dati da introdurre manualmente sui dispositivi mobili. Per esempio, se vuoi che gli utenti specifichino qual è il loro lavoro, invece di usare un campo di testo aperto puoi usare un menu a selezione {{htmlelement("select")}} contenente le opzioni più comuni (cosa che tra l’altro aiuta anche a migliorare la consistenza dei dati), e offrire tra le opzioni una categoria “Altro” che, se selezionata, fa comparire un campo di testo dove l’utente può scrivere liberamente per specificare la sua occupazione. Puoi vedere un esempio di questa idea alla pagina tipi-di-lavoro-comuni (vedi la versione live).

- -

Inoltre, vale la pena prendere in considerazione l’uso di tipi di input HTML5 nativi, come per esempio il tipo “date”, che su dispositivi mobili Androd e iOS vengono gestiti automaticamente da widget nativi integrati all’interfaccia che l’utente è già abituato a usare sul dispositivo. Vedi esempi-formulari-html5.html per alcuni esempi (vedi anche la versione live). Prova a visualizzare e usare questi esempi su un dispositivo mobile.

- -

 

- -

Alcuni esempi di tipi di input HTML5 e come appaiono quando sono usati da dispositivo mobile:

- -

 

- - - -

Se vuoi fornire una versione della tua applicazione specifica per dispositivi mobili e diversa da quella per pc e laptop, puoi usare una tecnologia di feature detection per rilevare il tipo di dispositivo su cui l’applicazione viene visualizzata. Vedi l’articolo in inglese  input types per maggiori informazioni sui differenti tipi di input, e anche il nostro articolo in inglese sulla feature detection.

- -

Riassunto

- -

In questo articolo abbiamo riportato alcuni dettagli sui più comuni problemi di accessibilità su dispositivi mobili, e alcune linee guida su come superarli. Abbiamo inoltre fornito indicazioni sull’uso dei più comuni lettori di schermo per dispositivi mobili, per aiutarti nella realizzazione di test di accessibilità.

- -

Vedi anche

- - - -
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibilità/Accessibility_troubleshooting", "Learn/Accessibilità")}}
- -
-

In questo modulo

- - -
-
diff --git "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" deleted file mode 100644 index 8c0e97dab4..0000000000 --- "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 'Test di valutazione: risoluzione di problemi di accessibilità' -slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi -tags: - - Accessibilità - - CSS - - HTML - - JavaScript - - Principiante - - Test di valutazione - - WAI-ARIA -translation_of: Learn/Accessibility/Accessibility_troubleshooting ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}
- -

Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i  precedenti articoli del corso.
Obiettivo:Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.
- -

Punto di partenza

- -

 

- -

Come primo passo, dovresti scaricare l’archivio ZIP contenente i file che compongono il sito di esempio. Decomprimi l’archivio in una cartella locale sul tuo computer.

- -

Il risultato finale del test dovrebbe apparire così:

- -

 

- -

- -

Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.

- -

Schema del progetto

- -

Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.

- -

Colori

- -

Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?

- -

HTML semantico

- -
    -
  1. Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.
    2. -
  2. Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?
    3. -
  3. Il menu di navigazione (racchiuso tra le etichette <div class="nav"> e </div>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.
    4. -
- -
-

Nota: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione.

-
- -

Le immagini

- -

Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema?

- -

Il lettore audio

- -
    -
  1. Il lettore <audio> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti?
    2. -
  2. Il lettore <audio> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio?
    3. -
- -

I formulari

- -
    -
  1. Sarebbe utile aggiungere un’etichetta all’elemento <input> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo?
    2. -
  2. I due elementi <input> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS.
    3. -
- -

Il bottone mostra/nascondi commenti

- -

Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO?

- -

La tabella

- -

La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi?

- -

Altre considerazioni?

- -

Puoi indicare due ulteriori idee per rendere il sito più accessibile?

- -

Valutazione

- -

Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel forum di discussione su questo esercizio, o nel canale IRC #mdn su Mozilla IRC. In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.

- -

{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}

- -

In questo modulo

- - diff --git "a/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" deleted file mode 100644 index 52a5c138f8..0000000000 --- "a/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Cosa è l'accessibilità? -slug: Learn/Accessibilità/Cosa_è_accessibilità -tags: - - Accessibilità - - Articolo - - CSS - - HTML - - JavaScript - - Principiante - - Strumenti - - TA - - disabilità - - imparare - - lettore schermo - - tastiera - - tecnologie assistive - - utenti -translation_of: Learn/Accessibility/What_is_accessibility ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
- -

Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e CSS.
Obiettivo:Acquisire familiarità con il concetto di accessibilità, capire di cosa si tratta e in che modo influisce sulla tua attività di sviluppatore web. 
- -

Dunque, cosa è l'accessibilità?

- -

L'accessibilità è la pratica di rendere i tuoi siti utilizzabili dal maggior numero di persone possibile. Di solito si pensa che il tema dell'accessibilità riguardi solo le persone che soffrono di una disabilità, ma in realtà l'accessibilità è un concetto importante anche per altri gruppi di persone, come coloro che usano dispositivi mobili o chi naviga in internet con una connessione lenta.

- -

Puoi anche pensare all'accessibilità come alla pratica di trattare tutti alla stessa maniera e dare a tutti le stesse opportunità, indipendentemente dalle loro capacità e circostanze. Così come non è corretto impedire l'accesso a un edificio a una persona che si muove in sedia a rotelle (e infatti gli edifici pubblici devono essere dotati di rampe e ascensori), allo stesso modo non si deve escludere una persona dall'utilizzo di un sito web per il fatto che abbia un handicap o stia usando un dispositivo mobile. Tutti gli utenti devono avere gli stessi diritti.

- -

Rendere un sito accessibile non solo è la cosa giusta da fare da un punto di vista etico, ma in molti paesi è anche obbligatorio per legge, e inoltre può contribuire a raggiungere categorie di utenti e clienti che altrimenti non potrebbero usare i tuoi servizi o acquistare i tuoi prodotti.

- -

Rispettare le pratiche di accessibilità è benefico per tutti:

- - - -

Quali tipi di disabilità prendere in considerazione?

- -

Le persone con disabilità sono molto diverse tra loro, così come quelle senza disabilità. Il concetto chiave da imparare è smettere di pensare a come tu stesso usi il computer e navighi in internet, e cominciare a considerare come lo fanno gli altri. I principali tipi di disabilità sono spiegati qui sotto, insieme agli strumenti che le persone disabili usano per navigare il web (conosciuti come tecnologie assistive, o TA).

- -
-

Nota: la Organizzazione Mondiale della Sanità nel suo rapporto (in inglese) Disabilità e salute afferma che "Oltre un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità", e "Tra 110 e 190 milioni di adulti hanno significative difficoltà funzionali". 

-
- -

Persone con deficit visivo

- -

Questa categoria include persone non vedenti, persone con una capacità visiva molto ridotta (ipovedenti), daltonici, ecc. Molte di queste persone usano ingranditori di schermo (sia fisici che software, per esempio la maggior parte dei navigatori è dotata di funzioni di zoom), e alcuni usano lettori di schermo, cioè programmi che leggono a voce alta il contenuto digitale:

- - - -

È una buona idea acquisire familiarità con i lettori di schermo; dovresti provare a installarne uno e usarlo, per farti una idea di come funziona. Per maggiori dettagli su come usarli, fai riferimento alla nostra guida (in inglese) Guida al testing dei lettori di schermo su differenti browser. Il video qui sotto inoltre fornisce una breve testimonianza sull'uso dei lettori di schermo.

- -

{{EmbedYouTube("IK97XMibEws")}}

- -

In termini statistici, la Organizzazione Mondiale della Sanità stima che "circa 285 milioni di persone nel mondo hanno gravi deficit visivi: 39 milioni sono non vedenti e 246 milioni ipovedenti". (vedi il rapporto in inglese Deficit visivo e cecità). Si tratta di una significativa quantità di utenti, pari quasi alla popolazione degli Stati Uniti, che non potrà usufruire del tuo sito se non lo avrai reso accessibile.

- -

Persone con deficit uditivo

- -

Questa categoria di persone presentano una capacità uditiva molto ridotta o del tutto assente. Le persone con deficit uditivo spesso usano TA (vedi l'articolo in inglese Strumenti assistivi per persone con disfunzioni uditive, della voce, dell'apparato fonatorio o del linguaggio), ma non esistono in realtà tecnologie assistive specifiche per l'uso del computer o di internet. 

- -

Ci sono, comunque, tecniche specifiche da tenere in conto per fornire alternative testuali ai contenuti audio, come per esempio trascrizioni o sottotitoli sincronizzati nei video. Più avanti si tratteranno queste tecniche nel dettaglio in un altro articolo.

- -

Anche le persone con deficit uditivo rappresentano una significativa base di utenza. Come indica la Organizzazione Mondiale della Sanità nel rapporto in inglese Sordità e perdita dell'udito, "360 milioni di persone nel mondo presentano deficit uditivi gravi".

- -

Persone con problemi di mobilità

- -

Alcune persone soffrono di disabilità che riguardano il movimento. Ciò può riferirsi a problemi puramente fisici (come la perdita di un arto o uno stato di paralisi), o a disordini di tipo neurologico/genetico che comportano difficoltà nei movimenti o perdita di controllo sugli arti. Alcune persone possono avere difficoltà a compiere i movimenti della mano necessari per usare un mouse, mentre altre possono presentare problemi più gravi, come per esempio uno stato di paralisi estesa, che rende necessario l'uso di un puntatore comandato tramite movimenti della testa per interagire con il computer. 

- -

Questo tipo di disabilità può anche essere dovuto all'età avanzata, piuttosto che a un trauma o una condizione specifica, e può anche essere attribuibile a limitazioni dell'hardware, come nel caso di utenti che non hanno un mouse a disposizione.

- -

In generale, per gestire questo tipo di limitazioni è necessario sviluppare i propri siti o applicazioni in maniera tale che siano utilizzabili tramite tastiera. Tratteremo l'argomento dell'accessibilità tramite tastiera con articoli specifici più avanti nel modulo, ma nel frattempo ti consigliamo di provare a navigare alcuni siti usando solo la tastiera, per farti un'idea di come funziona. Per esempio, puoi usare il tasto TAB per muoverti da un campo all'altro di un formulario? Puoi trovare ulteriori dettagli sull'uso della tastiera per la navigazione dei siti nella sezione (in inglese) Test di accessibilità della navigazione con tastiera su differenti browser.

- -

Secondo le statistiche, un numero significativo di persone soffre di limitazioni alla mobilità. Il rapporto (in inglese) Disabilità e funzionamento (adulti maggiorenni non ricoverati) indica che negli Stati Uniti la percentuale di adulti con difficoltà di funzionamento fisico è del 15,1%.

- -

Persone con deficit cognitivo

- -

Probabilmente il più ampio range di disabilità è quello compreso in quest'ultima categoria. Il termine deficit cognitivo può infatti riferirsi ad un'ampia gamma di disfunzioni, dalle malattie mentali alle difficoltà di apprendimento, da problemi di comprensione e concentrazione, come la sindrome da deficit di attenzione e iperattività, a persone che presentano una forma di autismo, o persone che soffrono di schizofrenia, e molti altri tipi di disturbo. Questo tipo di disabilità possono influenzare molte attività della vita quotidiana, causando problemi di memoria, comprensione, attenzione, ecc.

- -

Le forme più comuni con cui tali forme di disabilità influenzano l'uso di un sito sono: difficoltà nel capire il procedimento da seguire per raggiungere un risultato; difficoltà nel ricordare come ripetere un'azione compiuta precedentemente; un senso di frustrazione causato da alcune caratteristiche del sito che lo rendono confuso e inconsistente nella navigazione.

- -

Diversamente da altri problemi di accessibilità web, è impossibile fornire linee guida specifiche per risolvere le difficoltà causate da deficit cognitivo; la strategia migliore è di impegnarsi a disegnare i propri siti nella forma più logica, consistente e usabile possibile. Per esempio, assicurati che:

- - - -

Queste non sono soltanto tecniche di accessibilità, ma piuttosto buone pratiche di disegno web che saranno utili a chiunque userà i tuoi siti, e dovrebbero essere pratiche standard nel tuo lavoro di sviluppo web.

- -

In termini statistici, anche in questo caso i numeri sono significativi. Per esempio, il rapporto (in inglese) della Cornell University Rapporto sullo stato della disabilità 2014 (PDF, 511KB) indica che nel 2014 il 4.5% della popolazione degli Stati Uniti di età compresa tra 21 e 64 anni presenta una qualche forma di disabilità cognitiva.

- -
-

Nota:  La sezione (in inglese) Cognitive del sito WebAIM fornisce utili approfondimenti sulle pratiche riportate sopra, ed è certamente una lettura consigliata.

-
- -

Come implementare l'accessibilità nei tuoi progetti

- -

Un mito molto comune sull'accessibilità è che questa sia una sorta di "costoso extra". Questo mito può essere veritiero se:

- - - -

Se invece l'accessibilità è parte integrante del tuo progetto sin dal principio, il costo per rendere il contenuto accesibile sarà minimo.

- -

Quando pianifichi un progetto, introduci test di accessibilità nella tua routine di testing, allo stesso modo in cui effettui test per gli altri segmenti di utenza (come per esempio gli utenti che usano pc desktop, iOS o dispositivi mobili, ecc.). Effettua test sin dall'inizio e con frequenza, idealmente facendo uso di test automatizzati che rilevino sistematicamente caratteristiche mancanti (come per esempio mancanza di testo alternativo nelle immagini, o la presenza di link testuali mal costruiti. Vedi l'articolo in inglese Relazione tra elementi e contesto) ed anche, se possibile, effettuando test con persone disabili per verificare il funzionamento delle caratteristiche più complesse del sito. Per esempio: 

- - - -

Dovresti prendere nota di tutte le potenziali aree problematiche del tuo contenuto su cui sarà necessario intervenire perchè siano rese accessibili, assicurarti che siano testate a sufficienza e pensare a soluzioni o alternative. Il contenuto testuale (come vedrai nel prossimo articolo) è facile da gestire, ma come fare con il contenuto multimediale, o le grafiche 3D? Dovresti considerare il budget a disposizione e pensare a quali possibilità hai per rendere il contenuto accessibile. Per esempio, potresti decidere di pagare qualcuno per trascrivere tutto il contenuto multimediale. Può essere costoso, ma è fattibile.

- -

Inoltre, devi essere realista. Un sito accessibile al 100% è un ideale irraggiungibile, ci sarà sempre qualche situazione particolare per la quale un utente troverà difficile usare il tuo contenuto, ma devi fare tutto il possibile per evitare che si verifichino tali situazioni. Se hai in mente di includere nel tuo sito uno spettacolare grafico a torta 3D creato con WebGL, dovresti anche includere, come alternativa accessibile, una tabella dati standard. Oppure, potresti addirittura decidere di eliminare il grafico 3D: la tabella è accessibile a tutti, più rapida da creare, richiede meno risorse CPU ed è più facile da mantenere.

- -

D'altro canto se stai costruendo un sito-galleria per opere d'arte in 3D, non sarebbe ragionevole pretendere che ogni opera fosse perfettamente accessibile alle persone con disabilità visiva, dato che si tratta di un medium interamente visuale.

- -

Per dimostrare che hai grande considerazione per l'accessibilità e che l'hai inclusa nel tuo progetto, pubblica una dichiarazione di accessibilità sul tuo sito nella quale spieghi in dettaglio la tua politica sull'accessibilità, e quali misure hai adottato per rendere il sito accessibile. Se un utente ti contatta lamentando un problema di accessibilità, assicurati di ascoltarlo con attenzione e chiarire tutti i dettagli, sii empatico, e adotta tutte le misure ragionevoli per risolvere il problema.

- -
-

Nota: Il nostro articolo (in inglese) Come gestire i problemi di accessibilità più comuni spiega con maggiori dettagli le specifiche di accessibilità che devono essere testate. 

-
- -

Per riassumere:

- - - -

Linee guida di accessibilità e legge

- -

Ci sono numerose checklist e set di linee guida disponibili per effettuare test basici di accessibilità, e a prima vista possono apparire complicate. Ti consigliamo innanzitutto di acquisire familiarità con le aree più importantidi cui devi occuparti, e di cercare di comprendere le strutture generali delle linee guida che sono più rilevanti al tuo caso specifico.

- - - -

È una buona idea leggere il testo della legge italiana sull'accessibilità, per familiarizzarsi con essa ed evitare eventuali problemi legali per i tuoi siti.

- -

API per l'accessibilità

- -

I browser fanno uso di alcune API speciali per l'accessibilità (fornite dal sistema operativo) che mostrano informazioni utili per le tecnologie assistive (TA). Le TA in generale usano solo informazioni semantiche, dunque non prendono in considerazione aspetti come lo stile di una pagina o gli script in JavaScript. Le informazioni sono strutturate in una mappa ad albero.

- -

Ogni sistema operativo ha la sua API per l'accessibilità:

- - - -

Quando le informazioni semantiche native fornite dagli elementi HTML della tua applicazione web non sono sufficienti, puoi supplementarle con caratteristiche della specificazione WAI-ARIA (articolo in inglese), che aggiunge informazione semantica alla mappa ad albero per migliorare l'accessibilità. Puoi sapere di più su WAI-ARIA nel nostro articolo basi di WAI-ARIA.

- -

Riassunto

- -

Questo articolo dovrebbe averti fornito una utile panoramica sull'accessibilità, averti mostrato perchè è importante, e come puoi inserirla nel tuo flusso di lavoro. Dovrebbe inoltre aver suscitato il tuo interesse e un desiderio di conoscere i dettagli su come implementare l'accessibilità nei tuoi progetti. Cominceremo a occuparcene proprio nella prossima sezione, dove spiegheremo come HTML costituisce un'ottima base per l'accessibilità. 

- -
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
diff --git "a/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" deleted file mode 100644 index 6f5e69fea4..0000000000 --- "a/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: Linee guida di accessibilità per CSS e JavaScript -slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità -tags: - - Accessibilità - - Articolo - - CSS - - Guida - - JavaScript - - colore - - contrasto - - imparare - - nascondere - - non intrusivo -translation_of: Learn/Accessibility/CSS_and_JavaScript ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibilità")}}
- -

CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript e una idea chiara di cosa è l'accessibilità.
Obiettivo:Imparare le basi di come utilizzare CSS e JavaScript correttamente per massimizzare l'accessibilità dei propri siti e allo stesso tempo evitare errori che potrebbero ridurla.
- -

CSS e JavaScript sono accessibili?

- -

CSS e JavaScript non hanno per l'accessibilità lo stesso livello di importanza che ha HTML, ma possono comunque arrecare grandi danni se usati impropriamente. Per dirlo in un'altra maniera, è importante che tu apprenda alcune linee guida sull'uso di CSS e JavaScript, per evitare di rovinare l'accessibilità dei tuoi documenti web.

- -

CSS

- -

Cominciamo col dare un'occhiata a CSS.

- -

Semantiche corrette e aspettative dell'utente

- -

È possibile usare CSS per modificare in qualsiasi modo l'aspetto di qualsiasi elemento HTML, ma questo non significa che lo devi fare obbligatoriamente. Come abbiamo detto più volte nell'articolo HTML: una buona base per l'accessibilità, dovresti utilizzare sempre l'elemento semantico più appropriato per ogni situazione, a meno che sia davvero impossibile. Se non lo fai, puoi causare confusione e problemi di usabilità a tutti gli utenti, e in particolare a quelli con disabilità. Usare le semantiche corrette significa soprattutto venire incontro alle aspettative degli utenti: gli elementi devono apparire e funzionare secondo certi criteri, a seconda della loro funzione, e gli utenti si aspettano che queste convenzioni siano rispettate. 

- -

Per esempio, un utente che usa lettore di schermo non può navigare una pagina attraverso gli elementi di heading se lo sviluppatore del sito non ha usato gli heading appropriati per etichettare il contenuto. Allo stesso modo, un heading perde la sua funzione visuale se lo hai modificato fino al punto in cui non appare più come un heading.

- -

La regola generale è che puoi modificare lo stile di un elemento perchè sia congruente con lo stile generale del tuo sito, ma non modificarlo tanto da far si che non appaia o agisca come ci si aspetterebbe. Le sezioni seguenti riassumono i principali elementi HTML da prendere in considerazione.

- -

Struttura del contenuto testuale "standard"

- -

Heading, paragrafi, liste... Il contenuto testuale principale della tua pagina:

- -
<h1>Heading</h1>
-
-<p>Paragrafo</p>
-
-<ul>
-  <li>Lista</li>
-  <li>Lista di due elementi.</li>
-</ul>
- -

Un codice CSS tipico potrebbe essere il seguente:

- -
h1 {
-  font-size: 5rem;
-}
-
-p, li {
-  line-height: 1.5;
-  font-size: 1.6rem;
-}
- -

Dovresti:

- - - -

Vedi gli articoli in inglese  Fondamenti di testo in HTML e Modificare lo stile del testo per maggiori informazioni.

- -

Testo enfatizzato

- -

L'etichetta <em> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <strong> ha lo stesso scopo, ma mostra il testo in grassetto:

- -
<p>L'acqua è <em>molto calda</em>.</p>
-
-<p>Le gocce d'acqua che si formano su una suoerficie sono chiamate <strong>condensa</strong>.</p>
- -

Potresti aggiungere un colore particolare per il testo in evidenza:

- -
strong, em {
-  color: #a60000;
-}
- -

Ad ogni modo, raramente avrai bisogno di modificare lo stile di elementi enfatizzati. Gli stili standard grassetto e corsivo sono molto riconoscibili, e modificarli potrebbe creare confusione. Per maggiori informazioni sull'enfasi vedi l'articolo in inglese Enfasi e importanza.

- -

Abbreviazioni

- -

l'etichetta <abbr> indica una abbreviazione o un acronimo, e permette, tramite l'attributo title, di fornire la versione estesa della frase o parola abbreviata:

- -
<p>Il contenuto di un sito è codificato tramite <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
- -

Anche in questo caso potresti voler apportare qualche semplice modifica allo stile:

- -
abbr {
-  color: #a60000;
-}
- -

Lo standard riconosciuto per indicare le abbreviazioni è una sottolineatura punteggiata, ed è raccomandabile non modificarlo significativamente. Per maggiori dettagli sulle abbreviazioni, vedi l'articolo in inglese Abbreviazioni.

- - - -

I link sono il mezzo con cui ti muovi da un punto all'altro della rete:

- -
<p>Visita la <a href="https://www.mozilla.org">homepage di Mozilla</a>.</p>
- -

Qui sotto sono riportate alcune semplici modifiche allo stile dei link:

- -
a {
-  color: #ff0000;
-}
-
-a:hover, a:visited, a:focus {
-  color: #a60000;
-  text-decoration: none;
-}
-
-a:active {
-  color: #000000;
-  background-color: #a60000;
-}
- -

Lo stile di default per i link è la sottolineatura, inoltre si presentano in diversi colori a seconda del loro stato: blu è il colore nello stato di default, viola nel caso il link sia stato visitato, rosso quando si "attiva" cliccandoci sopra. Oltre a ciò, il puntatore del mouse cambia forma quando lo si passa su un link, e il link viene messo in evidenza quando riceve focus (per esempio tramite tast TAB). Nell'immagine qui sotto possiamo vedere l'evidenziazione di un link in Firefox (cornice punteggiata) e Chrome (cornice azzurra):

- -

- -

- -

Puoi modificare lo stile dei link come più ti piace, ma facendo attenzione a fornire agli utenti un feedback quando interagiscono coi link. Quando un link cambia di stato si dovrebbe notare. Inoltre, evita di rimuovere stili di default come il cambio di puntatore del mouse o l'evidenziazione quando un link riceve focus: entrambi sono molto importanti per l'accessibilità degli utenti che usano tastiera.

- -

Formulari

- -

I formulari sono elementi che permettono agli utenti di introdurre dati in un sito web:

- -
<div>
-  <label for="nome">Introduci il tuo nome</label>
-  <input type="text" id="nome" name="nome">
-</div>
- -

Puoi vedere un buon esempio di uso di CSS  in un formulario qui: form-css.html (vedi anche la versione live).

- -

La maggior parte del codice CSS che scriverai per i formulari sarà per modificare le dimensioni degli elementi, allineare elementi label e input e migliorarne l'aspetto esteriore.

- -

Non dovresti comunque modificare troppo il feedback visuale che gli elementi di un formulario mostrano quando ricevono focus, che è in pratica lo stesso dei link (vedi sopra). Puoi modificare l'aspetto delle evidenziazioni applicate agli elementi del formulario quando ricevono focus o hover del puntatore del mouse per far si che lo stile del tuo sito sia consistente sui diversi browser, ma evita di rimuoverle. Come già detto, alcuni utenti contano su tali "segnali" per poter interpretare ciò che sta accadendo mentre navigano un sito.

- -

Tabelle

- -

Prendiamo ora in considerazione le tabelle che si usano per presentare dati.

- -

Puoi vedere un buon esempio di tabella costruita con HTML e CSS qui:  table-css.html (vedi anche la versione live).

- -

Il codice CSS applicato alle tabelle serve in genere a uniformarle allo stile generale del sito e a migliorarle esteticamente. Alcune buone pratiche sono ad esempio far si che gli header(intestazioni di file o colonne) della tabella siano in risalto, per esempio usando il grassetto, e far uso di una alternanza di sfondo chiaro e scuro per rendere più facile la distinzione tra le varie file della tabella.

- -

Colore e contrasto

- -

Quando scegli uno schema di colori per il tuo sito, assicurati che il testo abbia un colore che contrasta bene con lo sfondo. Un basso contrasto dei colori può produrre un effetto interessante dal punto di vista estetico, ma renderà molto difficile poter leggere il tuo contenuto alle persone con problemi visivi come il daltonismo.

- -

C'è un modo molto facile per verificare se il contrasto che hai scelto è abbastanza alto da non causare problemi. Ci sono numerosi siti che ti permettono di introdurre il colore del testo e quello dello sfondo, per verificarne il contrasto. Per esempio il sito Color Contrast Checker è facile da usare, e fornisce una spiegazione (in inglese) dei criteri WCAG (Linee guida per l'accessibilità dei contenuti Web) sul contrasto dei colori.

- -
-

Nota: un contrasto alto sarà d'aiuto per poter leggere con maggiore facilità anche a chi si connette tramite telefono o tablet in ambienti con molta luce, come un parco o una piazza. 

-
- -

Un altro consiglio è di non fare affidamento solo sul colore per fornire un certo tipo di informazioni o segnali, in quanto tali informazioni non potranno essere interpretate da chi non vede i colori. Per esempio, invece di limitarti a marcare in rosso i campi di un formulario che sono da compilare obbligatoriamente, marcali anche con un asterisco.

- -

Nascondere elementi

- -

Ci sono molte situazioni nelle quali è necessario che non tutto il contenuto sia mostrato allo stesso tempo. Per esempio nel nostro info box a schede (vedi codice sorgente) abbiamo tre schede con informazioni posizionate una sopra l'altra, e ci sono tre bottoni cliccabili per passare da una scheda all'altra (il box è accessibile anche da tastiera, usando il tasto TAB per spostarsi tra i bottoni e INVIO per selezionare una scheda).

- -

- -

Gli utenti che usano lettori di schermo non avranno problemi a leggere tutte le schede, l'importante è che l'ordine del contenuto sia sensato. Usare position: absolute (come nel nostro esempio) è in generale considerato come uno dei migliori metodi per nascondere contenuto, perchè non impedisce ai lettori di schermo di leggerlo.

- -

D'altro canto, non dovresti usare {{cssxref("visibility")}}:hidden o {{cssxref("display")}}:none, perchè nascondono il contenuto ai lettori di schermo. A meno che, ovviamente, ci sia una buona ragione per nascondere questo contenuto ai lettori di schermo.

- -
-

Nota: l'articolo in inglese Contenuto visibile solo ai lettori di schermo fornisce molti più dettagli su questo argomento.

-
- -

È possibile che gli utenti modifichino lo stile dei tuoi elementi

- -

A volte gli utenti alterano gli stili che hai impostato sostituendoli con stili personalizzati. Per esempio:

- - - -

Gli utenti modificano il CSS per differenti ragioni: un utente con problemi di vista potrebbe voler ingrandire automaticamente il testo su tutti i siti che visita, un utente con daltonismo potrebbe voler aumentare il contrasto dei colori per facilitare la lettura. Qualunque sia la ragione, dovresti tenere in considerazione questa possibilità, e usare un disegno del tuo sito che sia sufficientemente flessibile per poter gestire tali cambi. Per esempio, dovresti assicurarti che l'area dove è situato il tuo contenuto principale può supportare un ingrandimento del testo, mantenendone il formato base e senza farne scomparire parti.

- -

JavaScript

- -

 

- -

Anche JavaScript può causare problemi di accessibilità, dipendendo da come si utilizza.

- -

JavaScript è un linguaggio molto potente, e possiamo usarlo per compiere un'infinità di funzioni, da semplici aggiornamenti del contenuto o della IU a giochi completi in 2D o 3D. Nessuna regola dice che tutto il contenuto deve essere accessibile al 100% a tutti, ma devi fare tutto il possibile, e cercare di rendere le tue applicazioni il più accessibili possibile.

- -

Il contenuto e gli elementi funzionali semplici sono relativamente facili da rendere accessibili: per esempio testo, immagini, tabelle, formulari e bottoni. Come abbiamo visto nell'articolo HTML: una buona base per l'accessibilità, le considerazioni chiave sono:

- - - -

Abbiamo inoltre visto un esempio di uso di JavaScript per migliorare l'accessibilità aggiungendo una funzionalità che mancava (vedi Implementare l'accessibilità da tastiera in un secondo tempo). Questo procedimento non è ideale, visto che si dovrebbe usare l'elemento più appropriato per ogni funzione sin dall'inizio, ma dimostra che è possibile intervenire sul codice in situazioni in cui è necessario modificarlo dopo la sua creazione. Un altro modo per migliorare l'accessibilità degli elementi che usano JavaScript non semantico è usare la tecnologia WAI-ARIA per fornire valore semantico extra per gli utenti che usano lettori di schermo. Il prossimo articolo spiegherà in dettaglio come farlo.

- -

Funzionalità complesse come i giochi in 3D non sono tanto facili da rendere accessibili. Un gioco 3D creato usando WebGL si svilupperà su un elemento {{htmlelement("canvas")}} , che al momento non permette di fornire alternative testuali o altre informazioni utili per persone con disabilità visiva. Si può ragionevolmente obbiettare che un tale tipo di gioco non ha nel suo target di utenza persone non vedenti, e in effetti sarebbe esagerato pretendere di renderlo accessibile al 100%. Ma ad ogni modo è consigliabile implementare alcuni elementi di accessibilità come i controlli da tastiera, che permettono di giocare anche a utenti senza mouse, e assicurarsi che lo schema dei colori abbia un contrasto sufficientemente alto per essere usabile da persone con daltonismo.

- -

Il problema di un uso eccessivo di JavaScript

- -

Spesso gli sviluppatori di siti fanno un uso eccessivo di JavaScript. A volte si trovano siti in cui tutto è stato fatto con JavaScript, perfino HTML e CSS sono stati generati con JavaScript. Questo tipo di siti presentano grossi problemi di accessibilità e non solo, ed è sconsigliato sviluppare siti in questo modo.

- -

Così come devi usare il giusto elemento per ogni funzione, assicurati anche di star usando la giusta tecnologia! Pensa bene se vale davvero la pena ricorrere a JavaScript per creare un pannello informazioni in 3D, mentre un semplice pannello testuale potrebbe essere sufficiente. Chiediti se hai davvero bisogno di un formulario basato su un widget super complesso, quando magari un semplice campo di input testuale andrebbe bene. E non generare tutto il tuo contenuto HTML con JavaScript.  

- -

Mantieni un uso non intrusivo di JavaScript

- -

Dovresti usare JavaScript con discrezione quando crei il tuo contenuto. L'idea di base è che JavaScript dovrebbe essere usato quando possibile per migliorare una funzionalità, ma non per costruirla. Le funzioni più basiche del sito dovrebbero essere indipendenti da JavaScript, anche se a volte ciò non è possibile. Una buona pratica è usare funzionalità già presenti nei browser quando è possibile.

- -

Buoni esempi di uso non intrusivo di JavaScript sono:

- - - -

Per fare un esempio abbiamo creato un semplice formulario con validazione dal lato cliente, vedi: form-validation.html (vedi anche la versione live). Nella pagina vedrai un formulario, e, quando provi a inviarlo, se avrai lasciato uno o entrambi i campi vuoti apparirà un messaggio di errore per spiegarti qual è il problema.

- -

Questo tipo di validazione di un formulario è non intrusiva, puoi infatti usare il formulario anche con JavaScript disabilitato, e inoltre il formulario dovrà comunque essere validato anche dal lato server, poichè sarebbe troppo facile per un utente con cattive intenzioni bypassare la validazione dal lato cliente (per esempio disattivando JavaScript nel browser). La validazione dal lato cliente è utile per segnalare istantaneamente eventuali errori all'utente, senza dover attendere la risposta del server, migliorando così l'usabilità del formulario.

- -
-

Nota: nel nostro esempio la validazione dal lato server non è stata implementata. 

-
- -

Abbiamo inoltre reso la validazione di questo formulario accessibile, usando l'elemento {{htmlelement("label")}} per assicurarci che ogni campo di input abbia associata una etichetta senza alcuna ambiguità, di modo che i lettori di schermo possano leggere il blocco input+etichetta come una sola unità:  

- -
<label for="nome">Inserisci il tuo nome:</label>
-<input type="text" name="nome" id="nome">
- -

La validazione avviene solo al momento dell'invio del formulario. In questo modo la IU non viene aggiornata troppo spesso potendo causare confusione negli utenti che usano lettori di schermo (e anche in quelli che non li usano):

- -
form.onsubmit = validate;
-
-function validate(e) {
-  errorList.innerHTML = '';
-  for(var i = 0; i < formItems.length; i++) {
-    var testItem = formItems[i];
-    if(testItem.input.value === '') {
-      errorField.style.left = '360px';
-      createLink(testItem);
-    }
-  }
-
-  if(errorList.innerHTML !== '') {
-    e.preventDefault();
-  }
-}
- -
-

Nota: in questo esempio stiamo nascondendo e mostrando il messaggio di errore usando position: absolute invece che un altro metodo come visibility: hidden o display: none, perchè in questo modo il lettore di schermo potrà leggerlo senza problemi.  

-
- -

Una validazione reale sarebbe molto più complessa, dovremmo controllare che il nome introdotto sembri effettivamente un nome, che l'età sia un numero e che sia realistica (per esempio non può essere un numero negativo, o di 4 cifre). Nell'esempio abbiamo implementato solo un sistema di verifica che controlla se i campi sono stati riempiti o no (if(testItem.input.value === '')).

- -

Quando la validazione ha terminato con esito positivo, il formulario viene inviato. Se ci sono errori (if(errorList.innerHTML !== '')) l'invio viene bloccato (usando preventDefault()), e si mostra il messaggio di errore (vedi sotto). Con questo meccanismo gli errori saranno mostrati solo se ci saranno effettivamente errori, migliorando l'usabilità. 

- -

Per ogni campo del formulario che è vuoto al momento dell'invio creiamo un item con un link e lo inseriamo nella lista errori (errorList).

- -
function createLink(testItem) {
-  var listItem = document.createElement('li');
-  var anchor = document.createElement('a');
-  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
-  anchor.href = '#' + testItem.input.name;
-  anchor.onclick = function() {
-    testItem.input.focus();
-  };
-  listItem.appendChild(anchor);
-  errorList.appendChild(listItem);
-}
- -

Ogni link ha una doppia funzionalità: segnala il tipo di errore e inoltre cliccandoci sopra sposta il focus automaticamente sul campo vuoto da riempire.

- -
-

Nota: il metodo focus() dell'esempio può creare confusione. Chrome e Edge (e le ultime versioni di IE) sposteranno il focus al campo relativo quando si clicca sul link, senza bisogno della funzione onclick/focus(). Safari si limiterà a evidenziare il campo, ma ha bisogno di onclick/focus() per spostare effettivamente il focus su di esso. Firefox al momento non è in grado di spostare il focus su un campo specifico, quindi il metodo non funzionerà su Firefox. Il problema dovrebbe essere risolto in futuro.

-
- -

 

- -

Inoltre, il messaggio di errore è stato posto in cima nel codice HTML (anche se poi viene visualizzato in un altro punto della pagina usando CSS per posizionarlo), di modo che l'utente, tornando in cima alla pagina, può sapere che errore c'è nel suo formulario e andare direttamente al campo in questione.

- -

Come annotazione finale, si noti che abbiamo usato alcuni attributi WAI-ARIA nel nostro esempio, per aiutare a risolvere problemi di accessibilità causati da aree del contenuto che si aggiornano costantemente senza che la pagina si ricarichi (di default i lettori di schermo non segnaleranno ciò agli utenti):

- -

 

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- -

Torneremo a occuparci più dettagliatamente di questo tipo di attributi nel prossimo articolo sulla tecnologia WAI-ARIA.

- -
-

Nota: forse starai pensando che HTML5 include già alcuni meccanismi di validazione come gli attributi required, min/minlength, e max/maxlength. Non abbiamo fatto uso di tali attributi nell'esempio, perchè non presentano ancora un livello accettabile di compatibilità nei differenti browser (per esempio Safari non li supporta, Internet Explorer solo a partire dalla versione 10).

-
- -
-

Nota: l'articolo in inglese Forme usabili ed accessibili di validazione di formulari e risoluzione di errori fornisce ulteriori utili informazioni su come creare un processo di validazione acessibile.

-
- -

Altri problemi di accessibilità con JavaScript

- -

Ci sono altri aspetti relativi all'accessibilità da tenere in conto quando si usa JavaScript. Ne aggiungeremo altri all'articolo in futuro.

- -

Eventi specifici del mouse

- -

Come forse già saprai, le interazioni dell'utente con il sito tramite mouse sono gestite in JavaScript usando i gestori di eventi (event handlers), che ci permettono di eseguire funzioni in risposta a determinati eventi attivati dalle azioni compiute dall’utente con il mouse. Alcuni esempi di eventi specificamente relativi al mouse sono mouseover, mouseout, dblclick, ecc. Le funzionalità associate a tali eventi non sono accessibili usando altri dispositivi, come per esempio la tastiera.  

- -

Per attenuare i problemi di accessibilità che ne derivano, dovresti associare a tali eventi altri eventi simili ma che sono attivati in altra maniera (i cosiddetti gestori di eventi indipendenti dal dispositivo). Per esempio focus e blur forniscono accessibilità per gli utenti che navigano con la tastiera.

- -

Vediamo ora un esempio che dimostra questo tipo di situazione. Supponiamo che in una pagina del nostro sito ci sia una immagine in miniatura, che si espande quando ci si passa sopra con il puntatore del mouse, oppure quando riceve focus (per esempio pensiamo al catalogo di un sito di e-commerce).

- -

Abbiamo creato un esempio molto semplice, che puoi trovare qui: mouse-and-keyboard-events.html (vedi anche il codice sorgente). Il codice ha due funzioni per mostrare o nascondere l'immagine ingrandita; qui sotto vediamo il codice dei gestori degli eventi:

- -
imgThumb.onmouseover = showImg;
-imgThumb.onmouseout = hideImg;
-
-imgThumb.onfocus = showImg;
-imgThumb.onblur = hideImg;
- -

Le prime due linee di codice riguardano il mouse: la prima funzione si attiva al passare il puntatore del mouse sulla miniatura, mentre la seconda si attiva al togliere il puntatore dall'area della miniatura. Questo codice però non permette di vedere l'immagine ingrandita tramite tastiera. Per poterlo fare, abbiamo aggiunto le atre due linee di codice, che attivano le stesse funzioni quando la miniatura riceve focus o lo perde. Si può spostare il focus sulla miniatura usando il tasto TAB, perchè al codice HTML dell'elemento abbiamo aggiunto l'attributo  tabindex="0".

- -

L'evento click è interessante, a prima vista potrebbe sembrare un evento esclusivamente relativo  al mouse, ma nella maggior parte dei browser il gestore di eventi onclick si attiverà anche premendo il tasto INVIO su un link o un elemento di formulario con focus, o quando si clicca sull'elemento con il dito se si usa un dispositivo con touchscreen.

- -

Tieni presente comunque che questo non funziona nel caso in cui si usi tabindex per dare il focus a un elemento che di default non lo potrebbe avere. In casi come questo devi rilevare quando il tasto specifico è premuto (vedi Implementare l'accessibilità da tastiera in un secondo tempo).

- -

Riassunto

- -

 

- -

Speriamo che questo articolo ti sia servito a capire meglio i problemi di accessibilità relativi all'uso di CSS e JavaScript sui tuoi siti o applicazioni.

- -

E ora, WAI-ARIA!

- -
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibilità/WAI-ARIA_basics", "Learn/Accessibilità")}}
diff --git "a/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" deleted file mode 100644 index 26129068e4..0000000000 --- "a/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" +++ /dev/null @@ -1,538 +0,0 @@ ---- -title: 'HTML: una buona base per l''accessibilità' -slug: Learn/Accessibilità/HTML_accessibilità -tags: - - Accessibilità - - Articolo - - Bottoni - - Formulari - - HTML semantico - - Lettore di schermo - - Link - - Principiante - - TA - - Testo Alternativo - - tastiera - - tecnologie assistive -translation_of: Learn/Accessibility/HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}
- -

Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e una idea chiara di cosa è l'accessibilità.
Obiettivo:Acquisire familiarità con le caratteristiche di HTML che hanno effetti positivi sull'accessibilità, e imparare a usarle correttamente nello sviluppo dei propri siti e applicazioni. 
- -

HTML e accessibilità

- -

 

- -

Man mano che impari cose nuove su HTML (leggendo nuove risorse, analizzando esempi di codice, ecc.), ti accorgerai sicuramente di un tema ricorrente: l'importanza di usare HTML semantico (a volte chiamato POSH, Plain Old Semantic HTML). Ciò significa utilizzare il più possibile gli elementi HTML più corretti per il proprio scopo.

- -

Forse ti chiederai perché è tanto importante. Dopotutto, puoi usare un combinazione di CSS e JavaScript per far sì che qualsiasi elemento HTML si comporti esattamente come tu vuoi. Per esempio, un bottone che controlla la riproduzione di un video sul tuo sito si potrebbe codificare così:

- -

 

- -
<div>Play video</div>
- -

Ma, come vedrai in dettaglio più avanti, ha molto più senso usare un elemento più specifico:

- -
<button>Play video</button>
- -

Non solo l'elemento <button> presenta di default uno stile più appropriato alla sua funzione (anche se probabilmente in seguito modificherai tale stile), ma è anche perfettamente accessibile con la tastiera. Ciò significa che un utente che usa la tastiera per navigare potrà spostarsi da un bottone all'altro del sito usando il tasto TAB, e premere i bottoni usando INVIO.

- -

L'HTML semantico non richiede più tempo per essere scritto del codice non-semantico se lo utilizzi con consistenza sin dal principio del progetto, e inoltre presenta numerosi altri benefici che vanno al di là dell'accessibilità:

- -

 

- -
    -
  1. Maggior facilità nello sviluppo — come già detto in precedenza, gli elementi HTML semantici hanno già integrate in sè alcune funzionalità aggiuntive. inoltre rendono il codice più facile da leggere e interpretare.
    2. -
  2. Miglior rendimento su dispositivi mobili — l'HTML semantico è più leggero del non-semantico, e più facile da rendere responsivo.
    3. -
  3. Utile per il SEO — i motori di ricerca danno maggior importanza alle parole chiave contenute in heading, link, ecc. rispetto a quelle contenute in generici <div> non-semantici, dunque i tuoi siti saranno più facili da trovare. 
    4. -
- -

Ora vedremo più in dettaglio come produrre un codice HTML accessibile.

- -
-

Nota: È una buona idea installare un lettore di schermo sul tuo computer, così che tu possa testare gli esempi mostrati più avanti. Vedi la guida in inglese Guida ai lettori di schermo per maggiori dettagli.

-
- -

Semantiche corrette

- -

 

- -

Abbiamo già parlato dell'importanza di usare la giusta semantica, e perchè è importante usare i corretti elementi HTML per ogni situazione. Questa pratica non può essere ignorata, visto che è una delle principali situazioni in cui l'accessibilità viene compromessa se non si agisce propriamente.

- -

Se si analizzano i siti presenti in rete, si noterà che ci sono casi di utilizzo molto poco ortodosso del codice HTML. Alcuni errori sono dovuti a pratiche ormai in disuso che non sono state debitamente aggiornate, altri semplicemente a ignoranza. In ogni caso, ogni volta che trovi del codice erroneo, dovresti fare il possibile per sistemarlo.

- -

A volte non sei nella posizione di poter correggere del codice mal scritto, per esempio se le tue pagine si basano su un framework esterno su cui non hai controllo, o se sul tuo sito è presente contenuto di terze parti (come ad esempio banners pubblicitari) che non puoi modificare.

- -

Comunque, tieni a mente che l'obiettivo non è "tutto o niente". Ogni piccolo miglioramento che riuscirai a implementare sarà utile alla causa dell'accessibilità.

- -

Contenuto testuale

- -

Uno dei più grandi aiuti per un utente che usa un lettore di schermo è una buona struttura del contenuto, diviso in headings, paragrafi, liste ecc. Un buon esempio può essere il seguente codice:

- -
<h1>Titolo</h1>
-
-<p>Questa è la prima sezione del mio documento.</p>
-
-<p>Ecco qui un altro paragrafo.</p>
-
-<ol>
-  <li>Questa è</li>
-  <li>una lista</li>
-  <li>composta da</li>
-  <li>vari elementi</li>
-</ol>
-
-<h2>Sottosezione</h2>
-
-<p>Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!</p>
-
-<h2>Seconda sottosezione</h2>
-
-<p>Questa è la seconda sottosezione del mio documento.</p>
- -

Abbiamo preparato un'altra versione più lunga che puoi provare a navigare con un lettore di schermo (vedi: buone-semantiche.html). Se provi a leggere tale pagina, ti renderai conto che è facile da navigare:

- -
    -
  1. Il lettore di schermo legge ogni etichetta man mano che avanza nella lettura del contenuto, facendoti sapere quale è un heading, quale un paragrafo ecc.
    2. -
  2. Il lettore si ferma dopo ogni elemento, permettendoti di procedere al ritmo di lettura che ti è più comodo.
    3. -
  3. Nella maggior parte dei lettori di schermo, puoi saltare al precedente o seguente heading.
    4. -
  4. Molti lettori di schermo inoltre ti forniscono una lista di tutti gli heading presenti, permettendoti di avere un utile indice per trovare contenuti specifici. 
    5. -
- -

A volte si scrivono headings e paragrafi usando HTML non semantico e salti di linea, come nel caso seguente:

- -
<font size="7">Titolo</font>
-<br><br>
-Questa è la prima sezione del mio documento.
-<br><br>
-Ecco qui un altro paragrafo.
-<br><br>
-1. Questa è
-<br><br>
-2. una lista
-<br><br>
-3. composta da
-<br><br>
-4. vari elementi
-<br><br>
-<font size="5">Sottosezione</font>
-<br><br>
-Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!
-<br><br>
-<font size="5">Seconda sottosezione</font>
-<br><br>
-Questa è la seconda sottosezione del mio documento.
- -

Se provi a leggere questa versione con un lettore di schermo (vedi cattive-semantiche.html), l’esperienza non ti risulterà positiva. Il lettore di schermo non avrà riferimenti che lo guidino, e non potrà fornirti un sommario dei contenuti. L'intera pagina gli apparirà come un blocco unico, e la leggerà tutta in una volta.

- -

Ci sono inoltre altri problemi che vanno al di là dell'accessibilità: per esempio è difficile applicare stile al contenuto usando CSS, o manipolarlo con JavaScript, perchè non ci sono elementi da usare come selettori.

- -

Usare un linguaggio chiaro

- -

Anche il linguaggio che usi può avere un effetto sull'accessibilità. In generale dovresti usare un linguaggio chiaro e non troppo complesso, privo di termini gergali o eccessivamente tecnici. Ciò non è d'aiuto solo alle persone con disabilità cognitive o di altro tipo; è anche utile ad utenti per i quali il testo è scritto in una lingua che non conoscono bene, a utenti di età molto giovane... Di fatto, è utile a tutti! A parte ciò, dovresti anche fare attenzione a non usare termini e caratteri che risultino poco chiari se letti con un lettore di schermo. Per esempio:

- - - -

Layout di pagina

- -

Molto tempo fa, era pratica abituale creare layout di pagina con tabelle HTML, usando le celle di una tabella per contenere header, footer, barra laterale, la colonna del contenuto principale ecc. Questa non è una buona pratica, visto che un lettore di schermo molto probabilmente darà una lettura confusa delle celle, soprattutto se il layout è complesso e presenta sottotabelle secondarie.

- -

Prova questo esempio: layout-tabella.html, che corrisponde al seguente codice:

- -
<table width="1200">
-      <!-- fila del titolo della tabella -->
-      <tr id="titolo">
-        <td colspan="6">
-
-          <h1 align="center">Header</h1>
-
-        </td>
-      </tr>
-      <!-- fila del  menu di navigazione  -->
-      <tr id="nav" bgcolor="#ffffff">
-        <td width="200">
-          <a href="#" align="center">Home</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Our team</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Projects</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Contact</a>
-        </td>
-        <td width="300">
-          <form width="300">
-            <input type="search" name="q" placeholder="Search query" width="300">
-          </form>
-        </td>
-        <td width="100">
-          <button width="100">Go!</button>
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- fila del contenuto principale e sezione laterale -->
-      <tr id="main">
-        <td id="content" colspan="4" bgcolor="#ffffff">
-
-          <!-- contenuto principale -->
-        </td>
-        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
-          <h2>Related</h2>
-
-          <!-- sezione laterale -->
-
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- fila del footer -->
-      <tr id="footer" bgcolor="#ffffff">
-        <td colspan="6">
-          <p>©Copyright 2050 by nobody. All rights reversed.</p>
-        </td>
-      </tr>
-    </table>
- -

 

- -

Se provi a navigare la pagina con un lettore di schermo, probabilmente ti dirà che c'è una tabella (anche se alcuni lettori di schermo riescono a differenziare i layout a tabella dalle tabelle di dati). Poi dovrai (a seconda del lettore di schermo che stai usando) esplorare la tabella cella per cella, e infine uscirne per poter navigare il contenuto.

- -

I layout a tabella son una reliquia del passato, avevano senso in un'epoca in cui non tutti i browser supportavano CSS, ma creano confusione per gli utenti che usano lettori di schermo, e inoltre sono una cattiva pratica per molte altre ragioni (per esempio richiedono una quantità maggiore di codice e rendono il disegno meno flessibile). Non usarli!

- -

Puoi verificare queste affermazioni comparando le tue esperienze precedenti con un esempio di struttura più moderna del sito, che corrisponde al seguente codice:

- -
<header>
-  <h1>Header</h1>
-</header>
-
-<nav>
-  <!-- navigazione principale -->
-</nav>
-
-<!-- contenuto principale -->
-<main>
-
-  <!-- articolo -->
-  <article>
-    <h2>Article heading</h2>
-
-    <!-- contenuto dell'articolo -->
-  </article>
-
-  <aside>
-    <h2>Related</h2>
-
-    <!-- contenuto della sezione laterale -->
-  </aside>
-
-</main>
-
-<!-- footer, usato in tutte le pagine del sito -->
-
-<footer>
-  <!-- contenuto del footer -->
-</footer>
- -

Se provi questa nuova versione del sito con un lettore di schermo, vedrai che il layout del codice non è più un ostacolo alla lettura del contenuto. Inoltre puoi notare come sia molto più agile e leggero in termini di quantità di codice, cosa che implica una maggior facilità di gestione e mantenimento, e minor utilizzo di banda da parte dell'utente (molto utile per chi ha una connessione lenta).

- -

Un'altro aspetto da tenere presente quando si creano layout è quello di usare HTML5 semantico, come visto nell'esempio precedente (vedi il compendio in inglese sezioni del contenuto). Potresti creare un layout usando solo elementi annidati {{htmlelement("div")}}, ma è molto meglio usare elementi specifici appropriati per distinguere le varie sezioni della pagina, come la sezione con gli elementi di navigazione ({{htmlelement("nav")}}), il footer ({{htmlelement("footer")}}), unità di contenuto che si ripetono ({{htmlelement("article")}}), ecc. Questi elementi forniscono un ulteriore contenuto semantico per i lettori di schermo (e per altri strumenti) per dare agli utenti indicazioni extra riguardo il contenuto che stanno navigando (vedi l'articolo in inglese Supporto dei nuovi elementi HTML5 di sezione nei lettori di schermo per farti un'idea dello stato del supporto nei lettori di schermo).

- -
-

Nota: oltre ad una buona semantica ed un layout esteticamente apprezzabile, il tuo contenuto dovrebbe essere organizzato in un ordine logico. Puoi sempre muoverlo in seguito utilizzando CSS, ma il codice sorgente dovrebbe essere nel giusto ordine, di modo che gli utenti che usano lettori di schermo lo possano interpretare correttamente. 

-
- -

Controlli di Interfaccia Utente

- -

Con il termine “controlli IU” intendiamo i componenti di un sito con cui gli utenti interagiscono. I più comuni sono bottoni, link e formulari. In questa sezione analizzeremo gli aspetti basici da tenere in considerazione quando si creano tali elementi. Più avanti gli articoli su WAI-ARIA e multimedia prenderanno in considerazione altri aspetti dell'accessibilità IU.

- -

Un aspetto chiave dell'accessibilità dei controlli IU è che di default i browser permettono di interagire con essi tramite tastiera. Puoi fare una prova usando il nostro esempio accessibilità-tastiera-nativa.html (vedi il codice sorgente): apri la pagina in una nuova scheda e prova a premere il bottone TAB; dopo averlo premuto qualche volta, dovresti vedere il focus muoversi da un elemento all'altro della pagina. Gli elementi con focus hanno un sistema di evidenziazione per rendere chiaro quale elemento è selezionato al momento. Questo sistema varia leggermente da browser a browser.

- -

- -

Dopo averlo selezionato tramite TAB, puoi usare il tasto INVIO per premere un bottone (nell'esempio i bottoni quando premuti producono un messaggio di avviso); allo stesso modo, premendo INVIO puoi aprire un link che hai selezionato. Inoltre, dopo averlo selezionato con il tasto TAB, puoi scrivere in un campo del formulario, o selezionare un elemento dal menu a tendina usando i tasti freccia della tastiera.

- -
-

Nota: i vari browser possono presentare differenti opzioni di controllo da tastiera. Vedi l'articolo in inglese Accessibilità con la tastiera per maggiori dettagli.

-
- -

In ogni caso tutti  i browser sono già preconfigurati per la navigazione con tastiera, l'unica cosa di cui devi preoccuparti è usare gli elementi HTML correttamente. Per esempio:

- -
<h1>Links</h1>
-
-<p>Questo è un link a <a href="https://www.mozilla.org">Mozilla</a>.</p>
-
-<p>Un altro link, a <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
-
-<h2>Bottoni</h2>
-
-<p>
-  <button data-message="Questo messaggio viene dal primo bottone">Cliccami!</button>
-  <button data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</button>
-  <button data-message="Questo messaggio viene dal terzo bottone">E me!</button>
-</p>
-
-<h2>Formulario</h2>
-
-<form>
-  <div>
-    <label for="name">Inserisci il tuo nome:</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age">Inserisci la tua età:</label>
-    <input type="text" id="age" name="age">
-  </div>
-  <div>
-    <label for="mood">Come ti senti?</label>
-    <select id="mood" name="mood">
-      <option>Felice</option>
-      <option>Triste</option>
-      <option>Arrabbiato</option>
-      <option>Preoccupato</option>
-    </select>
-  </div>
-</form>
- -

Questo significa usare link, bottoni, elementi del formulario ed etichette appropriatamente (includendo l'elemento {{htmlelement("label")}} nei campi del formulario).

- -

Purtroppo a volte queste buone pratiche non sono rispettate. Ad esempio, a volte si trovano bottoni codificati usando elementi {{htmlelement("div")}}:

- -
<div data-message="Questo messaggio viene dal primo bottone">Cliccami!</div>
-<div data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</div>
-<div data-message="Questo messaggio viene dal terzo bottone">E me!</div>
- -

Questo modo di scrivere codice è altamente sconsigliato: non solo perdi l'accessibilità da tastiera che avresti avuto automaticamente usando l'etichetta {{htmlelement("button")}}, ma perdi anche gli stili CSS di default che l'etichetta {{htmlelement("button")}} contiene.

- -

Implementare l'accessibilità da tastiera in un secondo tempo

- -

Risolvere problemi di accessibilità da tastiera in un sito già ultimato può richiedere un certo sforzo (per un esempio vedi la pagina   falsi-bottoni-usando-div.html e il suo  codice sorgente). In questo esempio abbiamo dato ad alcuni bottoni, erroneamente creati con una etichetta <div>, la possibilità di ricevere focus tramite tasto TAB fornendo a ognuno l'attributo tabindex="0":

- -
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0">Cliccami!</div>
-<div data-message="Questo messaggio viene dal secondo bottone" tabindex="0">Clicca anche me!</div>
-<div data-message="Questo messaggio viene dal terzo bottone" tabindex="0">E me!</div>
- -

L'attributo {{htmlattrxref("tabindex")}} è stato creato per dare agli elementi selezionabili tramite tasto TAB un ordine di focus personalizzato (specificato con numeri positivi in ordine crescente), differente dall'ordine standard con cui sono presenti nel codice sorgente. In generale questa non è una buona pratica, e può causare confusione nell'utente. Questo attributo sarebbe da usare solo in casi particolari, per esempio se il layout mostra gli elementi in una forma molto diversa dal codice sorgente. Ma ci sono altri due possibili usi di tabindex che sono utili per l'accessibilità:

- - - -

L'uso di tabindex rende i bottoni creati erroneamente usando <div> selezionabili tramite tasto TAB, ma non ci permette di cliccarli usando INVIO. Per renderli cliccabili, dobbiamo ricorrere a Javascript:  

- -
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // Il tasto ENTER
-    document.activeElement.onclick(e);
-  }
-};
- -

Spiegazione del codice: abbiamo aggiunto un listener al documento, di modo che il codice rileva ogni occasione in cui un tasto della tastiera viene premuto. Tramite la proprietà KeyCode il codice individua quale tasto è stato premuto. Se il tasto premuto è INVIO, la funzione associata tramite onclick al bottone attualmente selezionato viene eseguita. La linea document.activeElement.onclick() serve proprio a rilevare l'elemento che attualmente sta ricevendo focus nella pagina, in questo caso il bottone che abbiamo selezionato tramite tasto TAB. 

- -
-

Nota: Tieni presente che questa tecnica funzionerà solo se usi onclick. Usare addEventListener non funzionerà.

-
- -

Come vedi, implementare l'uso della tastiera in un secondo momento non è un lavoro semplice né veloce, e inoltre può causare malfunzionamenti del sito. È molto meglio utilizzare l'elemento più appropriato per ogni funzionalità del sito sin dal principio.

- -

Usare testi con significato

- -

Una interfaccia utente che presenta une nomenclatura chiara ed esplicativa è utile a tutti, ma avere testi ed etichette curati nei dettagli è particolarmente importante per gli utenti che hanno una disabilità.

- -

Assicurati che i tuoi bottoni e i tuoi link presentino testi facilmente comprensibili e che distinguano bene un elemento dall'altro. Non usare frasi come "Clicca qui", perchè gli utenti che usano lettori di schermo possono avere difficoltà a distinguere la funzione o destinazione del bottone o link, soprattutto se ce ne sono molti nella pagina. La seguente immagine mostra alcuni campi di un formulario così come sono letti da VoiceOver.

- -

- -

Assicurati che i nomi che assegni agli elementi abbiano senso anche se letti fuori dal loro contesto, allo stesso modo in cui hanno senso nel contesto del paragrafo in cui sono contenuti. Il seguente esempio mostra un esempio di costruzione corretta del testo di un link:

- -
<p>Le balene sono creature davvero straordinarie. <a href="balene.html">Scopri di più sulle balene</a>.</p>
- -

Mentre questo è un esempio di cattivo uso:

- -
<p>Le balene sono creature davvero straordinarie. Per saperne di più sulle balene, <a href="balene.html">clicca qui</a>.</p>
- -
-

Nota: Puoi saperne di più sulle migliori pratiche di implementazione di link nel nostro articolo (in inglese) Creazione di link. Puoi inoltre vedere esempi di buona costruzione di link nella pagina buoni-link.html ed esempi di link mal costruiti nella pagina cattivi-link.html.

-
- -

Un altro elemento importante sono le etichette <label> dei formulari, che forniscono una indicazione su cosa l'utente deve inserire nel campo del formulario. Il seguente esempio può sembrare una maniera corretta di implementare un campo di formulario:

- -
Scrivi il tuo nome: <input type="text" id="nome" name="nome">
- -

Tuttavia, questo campo non sarebbe utile a utenti con disabilità visiva. Non c'è nessuna indicazione non visuale che associ chiaramente il campo di input con il testo "Scrivi il tuo nome:". Se navighi questo elemento con un lettore di schermo, potresti ricevere una descrizione generica tipo "scrivi testo qui".

- -

Il seguente è un esempio molto migliore:

- -
<div>
-  <label for="nome">Scrivi il tuo nome:</label>
-  <input type="text" id="nome" name="nome">
-</div>
- -

Con questo codice, il testo sarà chiaramente associato al campo di input; il lettore di schermo pronuncerà una frase come: "Scrivi il tuo nome: scrivi testo qui". 

- -

Inoltre, nella maggior parte dei browser associare un testo a un campo di input tramite etichetta <label> permette di selezionare/attivare il campo input cliccando anche sul testo oltre che sul campo stesso. Ciò rende molto più facile selezionare il campo in cui scrivere.

- -
-

Nota: Puoi vedere esempi di formulari ben costruiti nella pagina esempi-di-buoni-form.html ed esempi di formulari poco accessibili nella pagina esempi-di-cattivi-form.html.

-
- -

Tabelle dati accessibili

- -

Una tabella dati basica si può scrivere in modo molto semplice, come per esempio:

- -
<table>
-  <tr>
-    <td>Nome</td>
-    <td>Età</td>
-    <td>Genere</td>
-  </tr>
-  <tr>
-    <td>Gabriel</td>
-    <td>13</td>
-    <td>Maschio</td>
-  </tr>
-  <tr>
-    <td>Elva</td>
-    <td>8</td>
-    <td>Femmina</td>
-  </tr>
-  <tr>
-    <td>Freida</td>
-    <td>5</td>
-    <td>Femmina</td>
-  </tr>
-</table>
- -

Ma questo codice può causare problemi: non dà agli utenti che usano lettori di schermo la possibilità di associare file e colonne in gruppi di dati relazionati tra loro. Per rendere ciò possibile devi sapere quali elementi della tabella sono header di file o colonne. Nel caso della tabella qui sopra ciò è possibile solo visualizzandola (vedi tabella-incorretta.html).

- -

Ora invece considera l'esempio tabella gruppi punk. Puoi notare alcune aggiunte nel codice che migliorano l'accessibilità:

- - - -
-

Nota: vedi l'articolo in inglese Caratteristiche avanzate delle tabelle HTML e accessibilità per maggiori dettagli sull'accessibilità delle tabelle dati.

-
- -

Alternative testuali

- -

Mentre il contenuto testuale è per sua natura accessibile, non si può dire lo stesso per il contenuto multimediale: immagini e video non possono essere visualizzati da persone con disabilità visiva grave, e il contenuto audio è difficile o impossibile da ascoltare per persone con disabilità auditiva. Ci occuperemo dell’accessibilità del contenuto audio e video in un altro articolo, in questa sezione tratteremo il tema dell'accessibilità per gli elementi {{htmlelement("img")}}.

- -

Proponiamo qui un semplice esempio, immagine-accessibile.html, nel quale possiamo vedere 4 copie della stessa immagine.

- -

Riportiamo qui sotto il relativo codice HTML tradotto all'italiano (nella pagina del link sarà in inglese):

- -
<img src="dinosauro.png">
-
-<img src="dinosauro.png"
-     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
-
-<img src="dinosauro.png"
-     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."
-     title="Il dinosauro rosso di Mozilla">
-
-
-<img src="dinosauro.png" aria-labelledby="dino-label">
-
-<p id="dino-label">Il Tirannosauro Rex rosso di Mozilla: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</p>
-
- -

La prima immagine, se si usa un lettore di schermo, non è molto accessibile. Per esempio VoiceOver leggerebbe il nome del file come "dinosauro.png, immagine". L'utente saprebbe almeno che nell'immagine è rappresentato un dinosauro di qualche tipo. Ma spesso le immagini che si trovano su internet non hanno neanche un titolo minimamente descrittivo come “dinosauro.png”, e usano invece come titoli codici alfanumerici o nomi generati automaticamente (per esempio da una macchina fotografica), che non forniscono alcun tipo di contesto riguardo al contenuto dell'immagine.

- -
-

Nota: non dovresti mai includere contenuto testuale in una immagine. I lettori di schermo non lo possono leggere. Ci sono inoltre altri svantaggi, per esempio non è possibile selezionarlo e copiarlo. Non farlo! 

-
- -

Nel caso della seconda immagine, un lettore di schermo leggerà tutto l'attributo alt: "Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.".

- -

Dunque è importante fornire alle immagini nomi descrittivi, e anche assicurarsi di fornire testo alternativo ogni volta che è possibile. Fai attenzione a fornire nell'attributo alt un testo che sia una rappresentazione il più possible diretta del contenuto dell'immagine. Evita di includere informazioni extra che non riguardano direttamente l'immagine.

- -

Un altro aspetto da considerare è se un'immagine ha un significato importante nel contesto del contenuto in cui si trova, o se si tratta solo di un'immagine decorativa. Se un’immagine è solo decorativa, è meglio includerla nella pagina con la proprietà background-image di CSS piuttosto che con l’etichetta <img>.

- -
-

Nota: Leggi Immagini in HTML e Immagini reattive per saperne di più sulle pratiche ottimali per l'implementazione delle immagini.

-
- -

Se desideri fornire informazioni contestuali extra, dovresti includerle nel testo vicino all'immagine, o usare un attributo title, come mostrato nel codice della terza immagine. La maggior parte dei lettori di schermo leggerà il testo alternativo, il testo dell'attributo title, e il nome del file. Inoltre, i browser mostrano il testo contenuto in title quando un utente passa sopra l'immagine con il puntatore del mouse.

- -

- -

Diamo ora un'occhiata al codice della quarta immagine:

- -
<img src="dinosauro.png" aria-labelledby="dino-label"> <p id="dino-label">Il Tirannosauro...</p>
- -

In questo caso non stiamo usando l'attributo alt. Invece, abbiamo presentato la descrizione dell'immagine come un normale paragrafo, le abbiamo assegnato un id, e poi abbiamo usato l'attributo aria-labelledby  associandolo all'id. In questo modo i lettori di schermo useranno il paragrafo come testo alternativo per l'immagine. Questo metodo è utile nel caso in cui si voglia usare lo stesso testo alternativo per multiple immagini, procedimento che è sconsigliabile implementare usando l’attributo alt

- -
-

Nota: aria-labelledby è parte della specificazione WAI-ARIA, che permette agli sviluppatori di aggiungere valore semantico extra al loro codice e migliorare l'accessiblità per i lettori di schermo. Per saperne di più su come funziona, leggi l'articolo basi di WAI-ARIA.

-
- -

Altri metodi di testo alternativo

- -

Ci sono anche altri metodi per associare alle immagini un testo che le descriva. Per esempio, c'è un attributo chiamato longdesc che permette di richiamare descrizioni dettagliate delle immagini presenti in una pagina da un documento HTML esterno. Per esempio:

- -
<img src="dinosauro.png" longdesc="dino-info.html">
- -

Questa può sembrare una soluzione ottimale, soprattutto per immagini con grandi contenuti informativi come grafici che rappresentano statistiche o risultati. Ma purtroppo l'attributo longdesc non è supportato con consistenza dai lettori di schermo, e inoltre il suo contenuto è totalmente inaccessibile agli utenti che non usano lettori di schermo. Si raccomanda dunque di includere la descrizione testuale nella stessa pagina in cui si trova l'immagine, o rimandare alla descrizione con un link standard.

- -

In HTML5 sono inclusi inoltre altri due elementi, {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, che servono ad associare un elemento figurativo (non necessariamente un'immagine) ad una didascalia: 

- -
<figure>
-  <img src="dinosauro.png" alt="Il Tirannosauro di Mozilla">
-  <figcaption>Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</figcaption>
-</figure>
- -

Purtroppo anche in questo caso la maggior parte dei lettori di schermo non è ancora in grado di interpretare correttamente gli elementi {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, ma l'uso di questi elementi può essere comunque utile per effettuare modifiche allo stile tramite CSS; inoltre questi elementi danno la possibilità di collocare la descrizione di una immagine nello stesso punto in cui l'immagine è inserita nel codice.

- -

Attributi alt vuoti

- -
<h3>
-  <img src="icona-articolo.png" alt="">
-  Tirannosauro Rex: il re dei dinosauti
-</h3>
- -

In alcuni casi un'immagine viene inclusa in una pagina con uno scopo puramente decorativo. Come puoi notare nel codice qui sopra, l'attributo alt dell'immagine è lasciato vuoto. Questo procedimento permette ai lettori di schermo di riconoscere la presenza di un'immagine, evitando però di fornirne una descrizione (pronuncerebbero solo una frase come "immagine").

- -

La ragione per cui è buona pratica usare un attributo alt vuoto invece di non includerlo del tutto è perchè molti lettori di schermo, nel caso in cui non incontrino nessun attributo alt associato a un'immagine, leggono al suo posto l'URL dell'immagine. Nell'esempio qui sopra, l'immagine ha una funzione decorativa dell'heading a cui è associata. In casi come questo, e in tutti i casi in cui un'immagine ha una funzione puramente decorativa e nessun valore di contenuto, dovresti associarle un attributo alt vuoto (alt=""). Un'alternativa è usare l'attributo ARIA role (con forma: role="presentation"), che indica ai lettori di schermo di non leggere il testo alternativo.

- -
-

Nota: se possibile è meglio usare CSS per mostrare immagini con funzione puramente decorativa.

-
- -

Riassunto

- -

Dopo aver letto questo articolo dovresti avere un’idea piuttosto chiara di come scrivere HTML accessibile nella maggior parte delle situazioni. Il nostro articolo su WAI-ARIA ti darà informazioni più approfondite, ma con quanto hai già letto e imparato sei in possesso di una buona base. Nei prossimi articoli esploreremo CSS e JavaScript, e come l'accessibilità è influenzata dal loro corretto o incorretto utilizzo.

- -

{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}

diff --git "a/files/it/learn/accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/index.html" deleted file mode 100644 index 57dee47809..0000000000 --- "a/files/it/learn/accessibilit\303\240/index.html" +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Accessibilità -slug: Learn/Accessibilità -tags: - - ARIA - - Accessibilità - - Articoli - - CSS - - Guida accessibilità - - HTML - - Imparare accessibilità - - JavaScript - - Lezioni accessibilità - - Manuale accessibiltà - - Moduli - - Principiante - - Sviluppo Web - - imparare -translation_of: Learn/Accessibility ---- -
{{LearnSidebar}}
- -

Imparare HTML, CSS e Javascript è fondamentale se vuoi diventare uno sviluppatore web, ma la tua preparazione deve andare al di là del semplice utilizzo delle tecnologie di programmazione web: devi imparare ad utilizzarle in modo responsabile, in maniera tale da massimizzare il numero di utenti che possano usufruire pienamente dei tuoi siti, senza lasciare nessuno chiuso fuori. Per ottenere questi risultati devi seguire con attenzione alcune linee guida (che sono indicate nelle sezioni HTML, CSS, e JavaScript), praticare test su differenti browser e prendere in considerazione l'accessibilità sin dal principio dei tuoi progetti di sviluppo web. In questo modulo ci occuperemo in dettaglio di quest'ultimo aspetto.

- -

Prerequisiti

- -

Per ottenere il massimo da questo modulo, è consigliabile aver seguito almeno i primi due moduli delle sezioni HTML, CSS, e JavaScript, oppure, ancor meglio, seguire le varie parti del modulo sull'accessibilità mentre studi (o rivedi) le relative sezioni di HTML, CSS, e JavaScript.  

- -
-

Nota: Se stai usando un computer, tablet o altro dispositivo sul quale non hai la possibilità di creare files, puoi testare la maggior parte degli esempi di codice che troverai in questo modulo usando un programma online come JSBin o Thimble.

-
- -

Guide

- -
-
Cos'è l'accessibilità?
-
Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.
-
HTML: una buona base per l'accessibilità
-
Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.
-
Linee guida di accessibiltà per CSS e JavaScript
-
CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.
-
Basi della tecnologia WAI-ARIA
-
Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.
-
Accessibilità multimediale
-
-
-

Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.

-
-
-
Accessibilità per dispositivi mobili
-
L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili.
-
- -

Test di valutazione

- -
-
Risoluzione di problemi di accessibilità 
-
Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.
-
- -

Vedi anche

- - diff --git "a/files/it/learn/accessibilit\303\240/multimedia/index.html" "b/files/it/learn/accessibilit\303\240/multimedia/index.html" deleted file mode 100644 index f920e59050..0000000000 --- "a/files/it/learn/accessibilit\303\240/multimedia/index.html" +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Accessibilità multimediale -slug: Learn/Accessibilità/Multimedia -tags: - - Accessibilità - - Articolo - - Audio - - Didascalie - - HTML - - Immagine - - JavaScript - - Multimedia - - Principiante - - Sottotitoli - - Tracce testuali - - Video -translation_of: Learn/Accessibility/Multimedia ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}
- -

Un’altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l’accessibilità di questo tipo di contenuti.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di cosa è l'accessibilità.
Obiettivo:Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli.
- -

Multimedia e accessibilità

- -

Fino ad ora in questo modulo sull’accessibilità abbiamo preso in considerazione le procedure necessarie per rendere accessibili una varietà di contenuti: da semplice contenuto testuale a tabelle di dati, immagini, controlli nativi come campi di formulari e bottoni, e anche strutture e intefacce più complesse (con le quali si usano gli attributi WAI-ARIA).

- -

Questo articolo si occupa di un’altra classe di contenuti per i quali solitamente non è facile garantire una buona accessibilità: i contenuti multimediali. Immagini, video, elementi <canvas>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.

- -

Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.

- -

Immagini

- -

Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo HTML: una buona base per l’accessibilità: fai riferimento all’articolo per maggiori dettagli. Riassumendo in poche parole l’articolo, per garantire l’accessibilità delle immagini devi assicurarti che al contenuto visuale sia associato un testo alternativo che descriva dettagliatamente l’immagine, e che tale contenuto possa essere letto dai lettori di schermo.

- -

Per esempio:

- -
<img src="dinosaur.png"
-     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
-
- -

Controlli audio e video accessibili

- -

Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.

- -

Il problema con i controlli nativi in HTML5

- -

Gli elementi audio e video di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, codice sorgente e versione live):

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Il tuo browser non supporta l’audio in HTML5. Puoi scaricare il file per ascoltarlo. Qui trovi il <a href="viper.mp3">link al file audio.</p>
-</audio>
-
-<br>
-
-<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
-</video>
- -

L’attributo controls fornisce il bottone play/pausa, uno slider di posizionamento e altri controlli basici di un lettore multimediale generico. In Firefox e Chrome i controlli HTML5 hanno questo aspetto:

- -

Screenshot of Video Controls in Firefox

- -

Screenshot of Video Controls in Chrome

- -

Tuttavia, ci sono alcuni problemi associati a questi controlli:

- - - -

Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.

- -

Creare controlli audio e video personalizzati

- -

Gli elementi audio e video di HTML5 hanno in comune una API, chiamata HTML Media Element, che permette di applicare funzionalità personalizzate ai bottoni e ad altri controlli definiti dallo sviluppatore.

- -

Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.

- -

Setup basico

- -

 

- -

Per prima cosa, salva una copia dei file controlli-custom-start.html, controlli-custom-controls.css, rabbit320.mp4 e rabbit320.webm in una cartella del tuo hard-disk.

- -

Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.

- -

Ora diamo un’occhiata al codice HTML del lettore video:

- -
<section class="player">
-  <video controls>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
-  </video>
-
-  <div class="controls">
-    <button class="playpause">Play</button>
-    <button class="stop">Stop</button>
-    <button class="rwd">Rwd</button>
-    <button class="fwd">Fwd</button>
-    <div class="time">00:00</div>
-  </div>
-</section>
- -

Setup basico di JavaScript

- -

 

- -

Abbiamo inserito alcuni bottoni nella barra dei controlli posizionata sotto al video. Tali controlli ovviamente non funzionano di default; è necessario usare JavaScript per assegnargli una funzionalità.

- -

Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file JavaScript:

- -

 

- -
var playPauseBtn = document.querySelector('.playpause');
-var stopBtn = document.querySelector('.stop');
-var rwdBtn = document.querySelector('.rwd');
-var fwdBtn = document.querySelector('.fwd');
-var timeLabel = document.querySelector('.time');
- -

In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:

- -
var player = document.querySelector('video');
- -

 

- -

Questa variabile fa riferimento a un oggetto HTMLMediaElement, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.

- -

Prima di procedere ad assegnare funzionalità ai nostri bottoni rimuoviamo i controlli nativi, di modo che non si possano verificare conflitti con i nostri controlli personalizzati. Aggiungi il seguente codice, al fondo del tuo file JavaScript:

- -

 

- -
player.removeAttribute('controls');
- -

Usando questo metodo, anziché quello di evitare di includere l’attributo controls dal principio, ha il vantaggio che, se il nostro codice JavaScript smettesse di funzionare per una qualsiasi ragione, i controlli nativi si riattiveranno automaticamente, permettendo agli utenti di continuare a usare i contenuti multimediali.

- -

Collegare i nostri bottoni

- -

Come primo passo, attiviamo il bottone Play/pausa. Possiamo alternare gli stati di play e pausa usando una semplice funzione condizionale, come la seguente. Aggiungila al fondo del tuo codice JavaScript:

- -
playPauseBtn.onclick = function() {
-  if(player.paused) {
-    player.play();
-    playPauseBtn.textContent = 'Pause';
-  } else {
-    player.pause();
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

In seguito, aggiungi questo codice, che controlla il bottone Stop:

- -
stopBtn.onclick = function() {
-  player.pause();
-  player.currentTime = 0;
-  playPauseBtn.textContent = 'Play';
-};
- -

 

- -

Non esiste una funzione stop() nativa negli elementi HTMLMediaElement, dunque al suo posto usiamo pause(), e allo stesso tempo resettiamo a zero il tempo di riproduzione currentTime.

- -

Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:

- -

 

- -
rwdBtn.onclick = function() {
-  player.currentTime -= 3;
-};
-
-fwdBtn.onclick = function() {
-  player.currentTime += 3;
-  if(player.currentTime >= player.duration || player.paused) {
-    player.pause();
-    player.currentTime = 0;
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

 

- -

Questi bottoni sono controlli molto basici, non fanno altro che far avanzare o tornare indietro il video di 3 secondi ogni volta che vengono cliccati. In una applicazione reale probabilmente vorrai aggiungere uno slider di posizionamento più elaborato o qualcosa di simile.

- -

Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione currentTime è maggiore del tempo totale duration, o se la riproduzione è in pausa. Se una delle due condizioni è vera fermiamo la riproduzione del video, per evitare che si verifichino errori nel lettore multimediale se l’utente cerca di avanzare oltre la fine del video o quando il video si trova in stato di pausa.

- -

Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:

- -
player.ontimeupdate = function() {
-  var minutes = Math.floor(player.currentTime / 60);
-  var seconds = Math.floor(player.currentTime - minutes * 60);
-  var minuteValue;
-  var secondValue;
-
-  if (minutes<10) {
-    minuteValue = "0" + minutes;
-  } else {
-    minuteValue = minutes;
-  }
-
-  if (seconds<10) {
-    secondValue = "0" + seconds;
-  } else {
-    secondValue = seconds;
-  }
-
-  mediaTime = minuteValue + ":" + secondValue;
-  timeLabel.textContent = mediaTime;
-};
- -

Ogni volta che il tempo si aggiorna (ogni secondo), questa funzione viene eseguita. A partire dal valore di currentTime, che si esprime in secondi, la funzione calcola il numero di minuti e secondi trascorsi, aggiunge uno 0 davanti al numero di minuti o secondi se tale numero è inferiore a 10, dà al risultato il formato “minuti:secondi” e infine lo invia al display timeLabel perchè sia mostrato all’utente.

- -

Ulteriori letture

- -

Quanto spiegato finora ti dà un’idea basica di come aggiungere funzionalità personalizzate ai lettori audio/video. Per maggiori informazioni su come aggiungere funzionalità più complesse, incluso come utilizzare Flash come fallback per i browser più vecchi, vedi gli articoli (in inglese):

- - - -

Abbiamo inoltre creato un esempio avanzato che mostra come si può creare un sistema orientato ad oggetti che trova ogni lettore audio o video presente in una pagina e gli aggiunge i nostri controlli personalizzati. Vedi custom-controls-oojs (qui trovi il codice sorgente).

- -

Trascrizioni audio

- -

Per rendere i contenuti audio accessibili alle persone con difficoltà auditive devi ricorrere a trascrizioni testuali. Le trascrizioni possono includersi nella stessa pagina dove l’audio viene riprodotto, o in una pagina separata collegata ad essa con un link.

- -

Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:

- - - -

NON è una buona pratica quella di pubblicare del contenuto audio e promettere di pubblicare le trascrizioni in un secondo momento. Spesso tali promesse non vengono compiute, danneggiando la fiducia che gli utenti ripongono in chi pubblica il contenuto. Nel caso in cui l’audio che si pubblica sia un dialogo o un evento come una conferenza pubblica, è accettabile pubblicare note riassuntive del contenuto insieme all’audio.

- -

Esempi di trascrizioni

- -

Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video Audio Transcription Sample 1 e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su Apri trascrizione.

- -

Se stai creando una interfaccia personalizzata per presentare il tuo contenuto audio e le relative trascrizioni, tieni in considerazione l’idea di includere un pannello-trascrizioni che appare/scompare; vedi il nostro esempio audio-transcript-iu  (vedi anche il codice sorgente).

- -

Descrizioni audio

- -

 

- -

Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.

- -

In molti casi si tratterà di contenuto video, e in tal caso puoi associargli didascalie usando le tecniche descritte nella prossima sezione di questo articolo.

- -

 

- -

Tuttavia ci sono dei casi limite. Per esempio, potresti dover pubblicare una registrazione audio di una conferenza durante la quale si fa riferimento a una risorsa visuale, come una tabella o un grafico. In tali casi, dovresti fare in modo che tali risorse vengano fornite insieme all’audio e alla trascrizione, avendo cura di porre un link alle risorse nel punto della trascrizione in cui si fa riferimento ad esse. Questo procedimento sarà di aiuto a tutti gli utenti, non solo alle persone con difficoltà auditive.

- -
-

Nota: una trascrizione audio sarà utile a vari tipi di utente. Oltre a permettere alle persone con difficoltà auditive di accedere al contenuto audio, sarà molto utile anche agli utenti che navigano con una connessione lenta, che probabilmente preferiscono non scaricare il contenuto audio. Pensa inoltre a un utente che si trova in un ambiente rumoroso, come un pub, e non può udire il contenuto audio correttamente.

-
- -

Tracce testuali nei video

- -

Per rendere i contenuti video accessibili a persone con difficoltà auditive o visive, e anche ad altri gruppi di utenti, come per esempio quelli che non capiscono la lingua che si parla nel video, devi associare al contenuto video una traccia testuale.

- -
-

Nota: le tracce testuali sono utili ad ogni tipo di utente, non solo a chi ha una disabilità. Per esempio, un utente potrebbe non essere in grado di udire l’audio perchè si trova in un ambiente rumoroso, come un bar affollato, o un altro potrebbe decidere di togliere l’audio a un video per non disturbare chi gli sta vicino, se si trova per esempio in una biblioteca.

-
- -

Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:

- -

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

- -

Molti paesi trasmettono i film in inglese con sottotitoli nella lingua del paese, e spesso nei film in DVD si trovano disponibili tracce testuali in varie lingue. Per esempio:

- -

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

- -

Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:

- - - -

Implementare le tracce testuali in HTML5

- -

Le tracce testuali da mostrarsi associate a un video in HTML5 devono essere scritte in WebVTT, un formato che contiene stringhe di testo associate a metadati come il momento del video in cui si desidera mostrare ogni stringa, e anche informazioni sullo stile e il posizionamento della stringa. Tali stringhe di testo sono chiamate “cues”.

- -

Un file WebVTT tipico è più o meno così:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-Questo è il primo sottotitolo.
-
-2
-00:00:30.739 --> 00:00:34.074
-Questo è il secondo.
-
-  ...
- -

To get this displayed along with the HTML media playback, you need to:

- - - -

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>
- -

Il risultato sarà un video sottotitolato, simile a questo: 

- -

Video player with standard 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 maggiori dettagli leggi l’articolo (in inglese) Adding captions and subtitles to HTML5 video. Puoi trovare l’esempio che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il codice sorgente). Questo esempio, tramite l’uso di JavaScript, permette agli utenti di scegliere tra differenti sottotitoli. Nota che, per attivare i sottotitoli, devi premere il bottone “CC” e selezionare una opzione tra inglese, tedesco o spagnolo.

- -
-

Nota: le tracce testuali e le trascrizioni contribuiscono anche al SEO, poichè i motori di ricerca danno molta importanza al contenuto testuale. Le tracce testuali possono perfino permettere ai motori di ricerca di ridirigere l’utente a un punto specifico del video.

-
- -

Altro contenuto multimediale

- -

Le sezioni precedenti non trattano tutti i tipi di contenuto multimediale che potresti voler usare sul tuo sito o applicazione. Potresti trovarti a dover gestire giochi, animazioni, slideshow, video inseriti da fonti esterne, o altro contenuto creato usando tecnologie come:

- - - -

Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:

- - - -

Tuttavia, ci sono altri tipi di contenuto multimediale per i quali non è facile implementare l’accessibilità. Per esempio, se stai lavorando su un gioco immersivo in 3D o una applicazione di realtà virtuale, è realmente difficile fornire alternative testuali per tale tipo di esperienza. D’altro canto si può obiettare che le persone con vista ridotta non sono parte del target di pubblico di tali applicazioni.

- -

Dovresti comunque assicurarti che tale tipo di applicazioni abbiano un contrasto dei colori ottimale, di modo che siano più facilmente visualizzabili a persone con vista ridotta o daltonismo. Inoltre dovresti fare tutto il possibile per renderli accessibili da tastiera. Ricorda che è necessario cercare di fare sempre tutto il possibile invece di puntare al 100% dell’accessibilità in ogni situazione, un obiettivo spesso impossibile da raggiungere.

- -

Riassunto

- -

Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.

- -

{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}

- -

 

- -

In questo modulo

- - - -

 

diff --git "a/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" "b/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" deleted file mode 100644 index 09891c8a11..0000000000 --- "a/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" +++ /dev/null @@ -1,422 +0,0 @@ ---- -title: Basi della tecnologia WAI-ARIA -slug: Learn/Accessibilità/WAI-ARIA_basics -tags: - - ARIA - - Accessibilità - - Articolo - - Guida - - HTML - - HTML semantico - - JavaScript - - Principiante - - WAI-ARIA -translation_of: Learn/Accessibility/WAI-ARIA_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}
- -

Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, aver letto i precedenti articoli del corso.
Obiettivo:Acquisire familiarità con la tecnologia WAI-ARIA e imparare a usarla dove necessario per fornire valore semantico addizionale che migliori l'accessibilità.
- -

Cosa è WAI-ARIA?

- -

Cominciamo col dare un'occhiata a cosa è WAI-ARIA, e in che modo ci può essere utile.

- -

Un nuovo set di problemi

- -

Man mano che le applicazioni web cominciarono ad essere sempre più complesse e dinamiche, nuovi problemi di accessibilità iniziarono a manifestarsi.

- -

Per esempio, HTML5 ha introdotto alcuni elementi semantici per definire componenti di uso comune nelle pagine ({{htmlelement("nav")}}, {{htmlelement("footer")}}, ecc.). Prima dell'arrivo di questi elementi, gli sviluppatori si limitavano a usare {{htmlelement("div")}} con ID o classi, per esempio <div class="nav">. Ma questi elementi erano problematici, perchè non fornivano un sistema standard per individuare programmaticamente i componenti di una pagina, dunque i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina era composta. 

- -

La soluzione inizialmente consisteva nell’aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:

- -
<a href="#hidden" class="hidden">Vai alla barra di navigazione</a>
- -

 

- -

Ma questo sistema non è molto preciso, e può essere usato solo quando il lettore di schermo comincia a leggere dalla parte alta della pagina.

- -

Per fare un altro esempio, ad un certo punto le applicazioni cominciarono a includere controlli complessi come selezionatori di data o slider per selezionare valori. HTML5 mette a disposizione alcuni tipi speciali di input nativi, specifici per tali controlli:

- -
<input type="date">
-<input type="range">
- -

Ma questi elementi non sono supportati da tutti i browser, ed inoltre sono molto difficili da personalizzare, rendendoli complicati da integrare nel disegno di un sito. Di conseguenza, gli sviluppatori spesso fanno uso di librerie JavaScript e creano tali controlli come una serie di {{htmlelement("div")}} annidati o elementi di una tabella a cui assegnano classi, e in seguito li personalizzano con CSS e li controllano con funzioni di JavaScript.

- -

Il problema di questo metodo è che i lettori di schermo non riescono ad interpretare di cosa si tratta, e riportano solo la presenza di una serie di elementi dei quali non possono descrivere la funzione.

- -

E arrivò WAI-ARIA

- -

WAI-ARIA è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi per fornire maggior valore semantico e migliorare l'accessibilità dovunque sia necessario. Ci sono tre caratteristiche principali definite nella raccolta:  

- - - -

Un punto importante da tenere in considerazione riguardo gli attributi WAI-ARIA è che non influiscono in alcun modo sulla pagina, eccetto che sulle informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di schermo prendono le informazioni). WAI-ARIA non cambia la struttura della pagina, il DOM o altro, anche se i suoi attributi possono essere utili per selezionare gli elementi in CSS.

- -
-

Nota: puoi trovare una utile lista di tutti i ruoli ARIA e i loro usi, con link a informazioni più approfondite, nella specifica WAI-ARIA: vedi Definizione di Ruoli (in inglese).

- -

La specifica contiene anche una lista delle proprietà e degli stati, con link ad ulteriori informazioni. Vedi  Definizioni di Stati e Proprietà (in inglese).

-
- -

Dove è supportata WAI-ARIA?

- -

A questa domanda non è facile rispondere. È difficile trovare  una risorsa che indichi in maniera completa quali funzionalità di WAI-ARIA sono supportate e dove, perchè:

- -
    -
  1. Ci sono molte funzionalità nella specifica WAI-ARIA.
    2. -
  2. Ci sono moltissime combinazioni possibili di sistemi operativi, browser e lettori di schermo.
    3. -
- -

L'ultimo punto è fondamentale: per poter usare un lettore di schermo il tuo sistema operativo deve avere installato almeno un browser con la necessaria API di accessibilità, che fornisca ai lettori di schermo le informazioni necessarie perchè funzionino. La maggior parte dei sistemi operativi ha di serie uno o due browser che funzionano con i lettori di schermo. Sul sito di Paciello Group si può trovare una guida aggiornata costantemente che fornisce dati sul supporto dei lettori di schermo nei vari sistemi operativi. Vedi l'articolo (in inglese) Guida: browser, sistemi operativi e supporto per i lettori di schermo.

- -

Il seguente passo è assicurarsi che i browser usati supportino la tecnologia ARIA e la trasmettano tramite le loro API, ma anche che i lettori di schermo riconoscano le informazioni che ricevono e le presentino agli utenti in una forma ottimale.

- -
    -
  1. Il supporto dei browser in generale è molto buono. Al momento della stesura di questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-ARIA nei vari browser di circa l'88%.
    2. -
  2. Il supporto di ARIA nei lettori di schermo non è al momento a un livello comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per migliorare la compatibilità con WAI-ARIA.  Puoi farti un'idea del livello di supporto leggendo l'articolo (in inglese) Compatibilità dei lettori di schermo con WAI-ARIA .
    3. -
- -

In questo articolo non spiegheremo tutte le funzionalità di WAI-ARIA e i dettagli sul supporto che hanno. Cercheremo invece di presentare le funzionalità più importanti e utili agli sviluppatori web; in generale se non facciamo riferimento al livello di supporto di una funzionalità, puoi considerare che il supporto è ragionevolmente buono. In caso di eccezioni lo indicheremo esplicitamente.

- -
-

Nota: alcune librerie JavaScript supportano WAI-ARIA. Ciò significa che quando generano elementi IU, come per esempio formulari complessi, aggiungono automaticamente attributi ARIA per migliorarne l'accessibilità. Se stai valutando l'utilizzo di una libreria Javascript per sviluppare elementi IU più rapidamente, dovresti tenere in conto il livello di accessibilità della libreria quando scegli quale usare. Buoni esempi sono jQuery UI (vedi l'articolo in inglese jQuery UI: supporto all'accessibilità), ExtJS, e Dojo/Dijit.

-
- -

Quando dovresti usare WAI-ARIA?

- -

Abbiamo già discusso di alcuni dei problemi che hanno spinto alla creazione di WAI-ARIA, dovuti soprattutto alla crescente complessità delle moderne applicazioni web. Essenzialmente ci sono 4 grandi aree in cui WAI-ARIA è utile: 

- -
    -
  1. Indicatori/riferimenti: gli attributi role possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio {{htmlelement("nav")}}), oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio search, tabgroup, tab, listbox, ecc.
    2. -
  2. Aggiornamento dinamico del contenuto: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare aria-live per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite XMLHttpRequest, o DOM APIs .
    3. -
  3. Migliorare l'accessibilità da tastiera: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano" in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali elementi  (usando tabindex).
    4. -
  4. Accessibilità dei controlli non semantici: quando si usano una serie di <div> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire le indicazioni necessarie tramite una combinazione di ruoli come button, listbox, o tabgroup, e proprietà come aria-required o aria-posinset.
    5. -
- -

Ricorda: dovresti ricorrere a WAI-ARIA solo quando è necessario! Idealmente, dovresti usare sempre funzionalità HTML native per fornire le indicazioni semantiche necessarie ai lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità. 

- -

Ma ricorda, usala solo quando è necessario!

- -
-

Nota: cerca di testare il tuo sito con la maggior varietà possibile di utenti reali: persone non disabili, persone che usano lettori di schermo, persone che navigano con la tastiera, ecc. Queste persone sapranno indicarti cosa funziona e cosa no in maniera molto più accurata di ciò che può emergere se ti limiti ad effettuare test di utilizzo in prima persona.

-
- -

Esempi di uso pratico di WAI-ARIA 

- -

Nella prossima sezione analizzeremo le 4 aree di utilizzo di WAI-ARIA più dettagliatamente, e forniremo alcuni esempi pratici. Prima di continuare però, dovresti attivare un lettore di schermo, per poter testare alcuni degli esempi.

- -

Vedi la sezione (in inglese) sul testing con lettori di schermo per maggiori informazioni.

- -

Indicatori/riferimenti

- -

WAI-ARIA trasmette ai browser l'attributo role, che permette di aggiungere valore semantico extra agli elementi del tuo sito dovunque sia necessario. La principale utilità di questo attributo è che permette agli utenti che usano lettori di schermo di individuare più facilmente gli elementi più comuni delle pagine. Vediamo un esempio:  il nostro sito senza attributi role (vedi la versione live) ha la seguente struttura:

- -
<header>
-  <h1>...</h1>
-  <nav>
-    <ul>...</ul>
-    <form>
-      <!-- search form  -->
-    </form>
-  </nav>
-</header>
-
-<main>
-  <article>...</article>
-  <aside>...</aside>
-</main>
-
-<footer>...</footer>
- -

Se provi a navigare il sito con un lettore di schermo in un browser moderno, riceverai diverse informazioni utili. Per esempio, VoiceOver fornisce le seguenti indicazioni:

- - - -

Se ti rechi nella sezione Rotore di VoiceOver (premendo VO-U), vedrai che la maggior parte degli elementi più importanti sono elencati ordinatamente e si può accedere ad essi rapidamente.

- -

- -

Ma in realtà, la situazione è migliorabile. Il campo di ricerca è un punto di riferimento importante che gli utenti vorranno trovare, ma non compare nella lista degli elementi e non è trattato come un elemento di riferimento, a parte l'indicazione che si tratta di una casella di ricerca (<input type="search">). Inoltre, alcuni browser più vecchi (per esempio IE8), non riconoscono le indicazioni semantiche degli elementi HTML5. 

- -

Possiamo migliorare il tutto usando alcune funzionalità ARIA. Per prima cosa aggiungiamo alcuni attributi role alla nostra struttura HTML. Il nostro  esempio di sito con ruoli aria (vedi la versione live) ha la seguente struttura:

- -
<header>
-  <h1>...</h1>
-  <nav role="navigation">
-    <ul>...</ul>
-    <form role="search">
-      <!-- search form  -->
-    </form>
-  </nav>
-</header>
-
-<main>
-  <article role="article">...</article>
-  <aside role="complementary">...</aside>
-</main>
-
-<footer>...</footer>
- -

C'è anche una funzionalità bonus in questo esempio: all'elemento {{htmlelement("input")}} è stato assegnato l'attributo aria-label, che fornisce ai lettori di schermo un’etichetta descrittiva, anche se non abbiamo incluso un elemento {{htmlelement("label")}}. In casi come questo è molto utile usare l’attributo ARIA. Un campo di ricerca è infatti un elemento molto comune e facilmente riconoscibile, e aggiungere una etichetta visuale potrebbe danneggiare il disegno della pagina.

- -
<input type="search" name="q" placeholder="Scrivi qui ciò che vuoi cercare" aria-label="Campo per cercare nel contenuto del sito">
- -

Se ora usiamo VoiceOver per navigare il sito d'esempio, notiamo alcuni miglioramenti:

- - - -

Inoltre, il sito è ora maggiormente accessibile per utenti che navigano con browser antiquati come IE8; vale la pena includere ruoli ARIA anche per questo. E se per caso il tuo sito è stato costruito usando solo elementi <div>, dovresti decisamente includere i ruoli ARIA per fornire le necessarie semantiche!

- -

Il valore semantico migliorato del campo di ricerca ha mostrato cosa è possibile fare quando ARIA va oltre le semantiche disponibili con HTML5. Potrai sapere molto di più sulle semantiche e il potere delle proprietà/attributi ARIA qui sotto, specialmente nella sezione {{anch("Accessibilità dei controlli non semantici")}}. Per ora, vediamo come ARIA ci può aiutare a gestire gli aggiornamenti del contenuto dinamico.

- -

Aggiornamenti del contenuto dinamico

- -

In generale tutto il contenuto caricato nel DOM può essere facilmente interpretato usando un lettore di schermo, dal contenuto testuale fino al testo alternativo delle immagini. I tradizionali siti statici con contenuto largamente testuale sono dunque facili da rendere accessibili alle persone con deficit visivo.

- -

Il problema è che le applicazioni web moderne spesso non sono composte da testo statico, di solito hanno una gran quantità di contenuto che si aggiorna dinamicamente, cioè contenuto che si agigorna senza che l'intera pagina si ricarichi, tramite meccanismi come XMLHttpRequest, Fetch, o DOM APIs. Queste aree del contenuto sono talvolta chiamate “aree vive”, o  live regions.

- -

Consideriamo un esempio: aria-no-live.html (vedi anche la versione live). In questo esempio troviamo un paragrafo contenente una citazione selezionata casualmente:

- -
<section>
-  <h1>Citazione casuale</h1>
-  <blockquote>
-    <p></p>
-  </blockquote>
-</section>
- -

JavaScript riceve tramite XMLHttpRequest un file JSON contenente una serie di citazioni con il rispettivo autore. Dopo che la prima citazone tratta dal file è stata caricata nel paragrafo si attiva un loop setInterval() che carica una nuova citazione nel paragrafo ogni 10 secondi:

- -
var intervalID = window.setInterval(showQuote, 10000);
- -

Questo sistema funziona correttamente , ma non è ottimale in termini di accessibilità. Gli aggiornamenti del contenuto non sono rilevati dai lettori di schermo, e gli utenti che li usano non possono rendersi conto di ciò che sta succedendo. Questo esempio è molto basico, ma prova a immaginare cosa succederebbe se stessi creando una interfaccia utente più complessa, con molte aree del contenutto che si aggiornano costantemente, come una chat room, un gioco strategico o magari un sito di e-commerce con un carrello della spesa che si aggiorna con i prodotti selezionati dall'utente. Sarebbe impossibile utilizzare l'applicazione con un lettore di schermo, in assenza di un sistema che avverta gli utenti degli aggiornamenti del contenuto.

- -

Fortunatamente WAI-ARIA ci mette a disposizione un utile meccanismo per fornire tali avvertimenti, la proprietà aria-live. Applicarla a un elemento fa sì che i lettori di schermo leggano il contenuto che viene aggiornato. Con quanta frequenza il contenuto viene letto dipende dal valore assegnato:

- - - -

Generalmente, assegnare il valore assertive è sufficiente perchè gli aggiornamenti vengano annunciati in tempo reale, anche se nel caso di aggiornamenti di multiple aree di contenuto che avvengono allo stesso tempo i vari aggiornamenti saranno annunciati in sequenza, quindi con la possibilità di un breve ritardo sul tempo reale. Si raccomanda di usare rude solo per aggiornamenti ad alta priorità che devono "passare davanti" agli altri aggiornamenti in corso.

- -

Prova a realizzare una copia di aria-no-live.html e quotes.json, e modificare l'etichetta <section> così:

- -
<section aria-live="assertive">
- -

D'ora in poi il lettore di schermo leggerà il contenuto ogni volta che quest'ultimo sarà aggiornato.

- -
-

Nota: : la maggior parte dei browser attiverà una security exception se provi ad effettuare un XMLHttpRequest da un URL file://. Per esempio se carichi il file direttamente nel browser (facendo doppio click). Per farlo funzionare, devi caricare il file a un server, per esempio usando GitHub (articolo in inglese), o un server locale come Python's SimpleHTTPServer (articolo in inglese).

-
- -

C'è però una considerazione da tenere in conto: il lettore di schermo legge solo la parte del testo che viene aggiornata. È utile dunque che legga anche l'heading, per aiutare l'utente a ricordare quale sezione della pagina è stata aggiornata. Per farlo, possiamo aggiungere la proprietà aria-atomic alla sezione. Modifica la tua etichetta <section> così:

- -
<section aria-live="assertive" aria-atomic="true">
- -

L'attributo aria-atomic="true" indica al lettore di schermo che deve leggere l'intero contenuto dell'elemento, non solo le parti che sono state aggiornate.  

- -
-

Nota: : puoi vedere l'esempio completo qui: aria-live.html (vedi anche la versione live).

-
- -
-

Nota: : la proprietà aria-relevant è utile per controllare cosa viene letto quando un'area di contenuto viene aggiornata. Per esempio puoi far si che siano lette solo le parti aggiunte o al contrario le parti rimosse dal contenuto.

-
- -

Migliorare l'accessibilità da tastiera

- -

Come abbiamo già detto in altri articoli di questo modulo, uno dei punti forti di HTML in termini di accessibilità è che implementa automaticamente l'accessibilità da tastiera per funzionalità come i bottoni, i campi dei formulari e i link. In generale, puoi sempre usare il tasto TAB per muoverti da un elemento all'altro e il tasto INVIO per selezionare o attivare gli elementi. In alcune circostanze puoi anche usare altri tasti (per esempio le frecce, per muoverti su e giù tra le opzioni di una lista <select>).

- -

Ciononostante, a volte ti troverai a dover scrivere codice che fa uso di elementi non semantici che compiono la funzione di bottoni (o altri tipi di elementi), o codice che usa elementi che possono ricevere focus per scopi diversi dal normale. Forse starai cercando di sistemare del codice mal scritto in precedenza, o di costruire un qualche tipo di widget complesso che richiede tecniche non ortodosse.

- -

Per rendere focalizzabili elementi che normalmente non lo sono, WAI-ARIA estende l'attributo tabindex con alcuni nuovi valori:

- - - -

Abbiamo discusso questi valori in maggior dettaglio e mostrato una implementazione tipica nel nostro articolo sull'accessibilità in HTML, vedi Implementare l'accessibilità da tastiera in un secondo tempo.

- -

Accessibilità dei controlli non semantici

- -

Proseguendo con il tema trattato nella sezione precedente, quando si usa una serie di <div> annidati in congiunto con CSS o JavaScript per creare una funzionalità complessa per l’interfaccia utente, o se si cambia/migliora sostanzialmente un controllo nativo tramite JavaScript, non solo è possibile che l’accessibilità da tastiera ne risulti ridotta, ma anche per gli utenti che usano lettori di schermo potrebbero prodursi difficoltà a comprendere l’uso della funzionalità, se non ci sono indicazioni semantiche o altri indizi. In tali situazioni, ARIA può aiutare a fornire il valore semantico addizionale necessario. 

- -

Validazione di formulari e avvisi di errore

- -

Innanzitutto, rivediamo l’esempio di formulario che avevamo preso in considerazione nell’articolo sull’accessibilità in CSS e JavaScript (vedi Mantieni un uso non intrusivo di JavaScript). Alla fine di tale sezione abbiamo mostrato alcuni attributi ARIA che sono stati aggiunti al messaggio che appare se ci sono errori di validazione quando provi a inviare il formulario:

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- - - -

Possiamo ora procedere oltre con il nostro utilizzo di ARIA, e fornire ulteriore assitenza nella validazione dei dati. Per esempio, perchè non indicare dal principio quali campi sono obbligatori, e quale intervallo di età è permesso introdurre?

- -
    -
  1. A questo punto, salva sul tuo dispositivo una copia dei files  validazione-formulario.html e validazione.js.
    2. -
  2. Aprili entrambi in un editor di testo e dai un’occhiata a come funziona il codice.
    3. -
  3. Per prima cosa, aggiungi un paragrafo come quello che vedi qui sotto giusto prima della etichetta di apertura del formulario <form>, e marca entrambe le etichette <label> del formulario con un asterisco. Questo è il metodo con cui normalmente si segnalano i campi obbligatori agli utenti che non hanno limitazioni visuali. - 
    <p>I campi marcati con un asterisco (*) sono obbligatori.</p>
    -
    4. -
  4. Questa indicazione è utile dal punto di vista visuale, ma non è facile da cogliere per gli utenti che usano lettori di schermo. Fortunatamente, WAI-ARIA fornisce l’attributo  aria-required , che suggerisce al lettore di schermo di indicare all’utente quali sono i campi del formulario che devono essere compilati obbligatoriamente. Aggiorna gli elementi <input> come vedi qui sotto:                                                              
    5. -
  5. - 
    <input type="text" name="name" id="name" aria-required="true">
-
-<input type="number" name="age" id="age" aria-required="true">
    -
    6. -
  6. A questo punto se salvi l’esempio e lo testi con un lettore di schermo dovresti ascoltare qualcosa come “Introduci il tuo nome asterisco, obbligatorio, modifica testo”.
    7. -
  7. Potrebbe inoltre risultare utile indicare agli utenti l’intervallo di anni dentro il quale dovrebbe situarsi il valore dell’età. Spesso tale valore si indica tramite un placeholder, ossia un valore indicativo che appare all’interno del campo quando non è ancora stato compilato. WAI-ARIA include le proprietà aria-valuemin e aria-valuemax per specificare un intervallo di valori minimo e massimo, ma queste proprietà al momento non hanno un supporto ampio; una caratteristica che gode di un migliore supporto è l’attributo HTML5 placeholder, che contiene un messaggio che viene mostrato nel campo quando l’utente non vi ha ancora introdotto nessun valore, e viene letto da un certo numero di lettori di schermo. Aggiorna il campo età come indicato qui: - 
    <input type="number" name="age" id="age" placeholder="introduci un numero compreso tra 1 e 150" aria-required="true">
    -
    8. -
- -
-

Nota: puoi vedere un esempio completo qui: validazione-formulario-aggiornato.html.

-
- -

WAI-ARIA permette inoltre alcune tecniche avanzate di etichettazione dei formulari, che vanno al di là del classico elemento {{htmlelement("label")}}. Abbiamo già discusso sull’utilizzo della proprietà aria-label per rendere un’etichetta {{htmlelement("label")}} invisibile agli utenti che non usano lettori di schermo (vedi la sezione Indicatori/riferimenti sopra). Ci sono anche altre tecniche di etichettazione che fanno uso di proprietà come aria-labelledby, se vuoi usare un elemento non-<label> come etichetta o se vuoi etichettare multipli campi del formulario con la stessa etichetta, e aria-describedby, se vuoi associare informazione aggiuntiva a un campo del formulario e vuoi che il lettore di schermo la legga. Vedi l’articolo in inglese  WebAIM's Advanced Form Labeling per maggiori dettagli.

- -

Ci sono inoltre molte altre proprietà e attributi utili per indicare lo stato di un elemento di un formulario. Per esempio, si può usare aria-disabled="true" per indicare che un campo è disabilitato. Molti browser salteranno i campi disabilitati, e i lettori di schermo non li leggeranno, ma in alcuni casi saranno comunque indicati, dunque è una buona idea includere questo attributo per permettere al lettore di schermo di sapere che un campo è effettivamente disabilitato.

- -

Se esiste la possibilità che lo stato di un campo cambi da disabilitato ad abilitato è buona norma indicarlo all’utente, e  inoltre spiegare le conseguenze di tale cambio. Per esempio, nel nostro formulario demo validazione-formulario-casella-disabilitata.html c’è una casella che, quando è selezionata, abilita un altro campo del formulario, tramite il quale si possono introdurre informazioni aggiuntive. Abbiamo preparato un paragrafo nascosto:

- -
<p class="hidden-alert" aria-live="assertive"></p>
- -

Questo elemento è nascosto alla vista tramite position: absolute. Quando la casella viene selezionata/deselezionata, il contenuto dell’area nascosta si aggiorna per segnalare agli utenti che usano lettore di schermo in che modo la struttura del formulario è cambiata dopo aver selezionato la casella; inoltre si aggiorna anche lo stato dell’attributo aria-disabled e si fornisce anche un indicazione visuale del cambio:

- -
function toggleMusician(bool) {
-  var instruItem = formItems[formItems.length-1];
-  if(bool) {
-    instruItem.input.disabled = false;
-    instruItem.label.style.color = '#000';
-    instruItem.input.setAttribute('aria-disabled', 'false');
-    hiddenAlert.textContent = 'I'Il campo strumenti suonati è ora abilitato; usalo per indicarci quali strumenti sai suonare.';
-  } else {
-    instruItem.input.disabled = true;
-    instruItem.label.style.color = '#999';
-    instruItem.input.setAttribute('aria-disabled', 'true');
-    instruItem.input.removeAttribute('aria-label');
-    hiddenAlert.textContent = ''Il campo Strumenti suonati è ora disabilitato.';
-  }
-}
- -

Descrivere bottoni non semantici come bottoni

- -

Ci è già capitato di discutere della accessiblità nativa di alcuni elementi come bottoni, link o campi di formulario, e dei problemi di accessibilità che sorgono quando si usano elementi sostitutivi per compiere le stesse funzioni di questi elementi. Vedi Controlli di interfaccia utente nell’articolo sull’accessibilità in HTML, e Migliorare l’accessibilità da tastiera, qui sopra). In molti casi è possibile restituire l’accessibilità da tastiera a tali elementi senza troppi problemi, usando tabindex e un poco di JavaScript.

- -

Ma come fare con i lettori di schermo? Non potranno interpretare gli elementi sostitutivi come bottoni. Se facciamo un test con il nostro esempio  div-falsi-bottoni.html e un lettore di schermo, i falsi bottoni saranno segnalati all’utente con frasi come “Cliccami!, gruppo”, che risultano di difficile interpretazione.

- -

Possiamo rimediare al problema usando un ruolo WAI-ARIA. Salva la pagina div-falsi-buttoni.html, e aggiungi role="button" ad ogni <div> che compie la funzione di bottone, come per esempio:

- -
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0" role="button">Cliccami!</div>
- -

Se ora provi a navigare la pagina con un lettore di schermo, i bottoni saranno letti come “Cliccami!, bottone”, e tutto risulterà molto più chiaro.

- -
-

Nota: non dimenticare che usare il corretto elemento semantico è sempre una opzione migliore. Se vuoi creare un bottone e non ci sono ragioni valide per non usare un elemento  <button>, dovresti usare un elemento <button>!

-
- -

Guidare gli utenti nell’uso di widget complessi

- -

Ci sono molti altri ruoli che danno la possibilità di assegnare ad elementi non semantici lo status di comuni elementi dell’interfaccia utente, elementi che vanno al di là di ciò che è disponibile nell’HTML standard, come per esempio  combobox, slider, tabpanel, tree. Puoi trovare alcuni utili esempi nella Deque university code library, per farti un'idea di come tali elementi possono essere resi accessibili.

- -

Prendiamo in considerazione un esempio. Torniamo ad usare il nostro semplice infobox a schede (vedi Nascondere elementi nell’articolo sull’accessibilità in CSS e JavaScript), che puoi trovare qui: infobox a schede (vedi codice sorgente).

- -

Questo esempio funziona perfettamente in termini di accessibilità da tastiera: puoi muoverti facilmente da una scheda all’altra usando il tasto TAB e selezionare una scheda con INVIO per visualizzarne il contenuto. È inoltre abbastanza accessibile se si usa un lettore di schermo, puoi infatti usare gli headings per navigare il contenuto anche senza vederlo. Ciò che però non risulterà del tutto chiaro è in cosa consiste il contenuto stesso: un lettore di schermo riporta il contenuto dell’infobox come composto da un lista di link e da dell’altro contenuto con tre headings. Non da nessuna indicazione di come i contenuti sono relazionati tra loro. Fornire all’utente indicazioni precise su come il contenuto è strutturato è sempre una buona idea.

- -

Abbiamo creato una versione migliorata dell’esempio, chiamata aria-tabbed-info-box.html (vedi versione live). Abbiamo aggiornato l’interfaccia del box così:

- -
<ul role="tablist">
-  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
-</ul>
-<div class="panels">
-  <article class="active-panel" role="tabpanel" aria-hidden="false">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">
-    ...
-  </article>
-</div>
- -
-

Nota: il cambio più evidente è la rimozione dei link che erano presenti precedentemente nell’esempio. Ora si usano i componenti li della lista per identificare le schede. Questo procedimento rende il tutto meno confuso per gli utenti che usano lettori di schermo, in quanto i link che c’erano in precedenza non conducevano da nessuna parte, servivano solo a cambiare di scheda. Inoltre gli attributi aria-setsize e aria-posinset permettono ora di identificare chiaramente le schede tramite il lettore di schermo: in precedenza, con i link, il browser trasmetteva sempre al lettore “1 di 1”, e non “1 di 3”, “2 di 3”, ecc.

-
- -

 

- -

Le nuove funzionalità aggiunte all’infobox di esempio sono le seguenti:

- - - -

Secondo i nostri test, questa nuova struttura ha migliorato sensibilmente l’accessibilità dell’infobox a schede. Le schede sono ora riconosciute come schede (ora il lettore pronuncia “scheda”, o perlomeno “tab”, in inglese), la scheda attualmente selezionata è chiaramente indicata, pronunciando il lettore la parola “selezionata” insieme al nome della scheda, e il lettore di schermo indica anche il numero della scheda in cui si trova l’utente. Inoltre, grazie ai valori di aria-hidden impostati (solo la scheda attualmente selezionata ha il valore aria-hidden="false"), il contenuto non nascosto è il solo che il lettore può leggere, rendendolo il tutto più facile e meno confuso da navigare per l’utente.

- -

 

- -
-

Nota: puoi assegnare l’attributo aria-hidden="true"  a qualsiasi contenuto che vuoi che sia ignorato dai lettori di schermo.

-
- -

Riassunto

- -

Questo articolo non è da considerarsi esaustivo per quanto riguarda tutte le funzionalità disponibili con la tecnologia WAI-ARIA, ma dovrebbe averti fornito informazioni sufficienti a capire come usarla, e come identificare le situazioni più comuni in cui avrai bisogno di ricorrere ad essa.

- -

Vedi anche

- - - -

{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}

diff --git a/files/it/learn/come_contribuire/index.html b/files/it/learn/come_contribuire/index.html deleted file mode 100644 index bd3d90966a..0000000000 --- a/files/it/learn/come_contribuire/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Come contribuire nell'area di MDN dedicata all'apprendimento -slug: Learn/Come_contribuire -tags: - - Apprendimento - - Articolo - - Contribuire - - Didattica - - Glossário - - Guida - - Materiale - - Principiante - - insegnante - - sviluppatore -translation_of: Learn/How_to_contribute ---- -

{{LearnSidebar}}

- -

Se sei qui per la prima volta o dopo un'approfondita ricerca, probabilmente ti interessa contribuire all'area di MDN dedicata all'apprendimento. Questa è una grande notizia!

- -

In questa pagina, troverai tutto ciò che ti occorre per iniziare a migliorare i contenuti dedicati all'apprendimento in MDN. Ci sono molte cose che puoi fare, a seconda del tempo a tua disposizione e se sei un principiante, uno sviluppatore web o un insegnante.

- -
-

Nota: Puoi trovare una guida per scrivere un nuovo articolo nell'area dedicata all'apprendimento su Come scrivere un nuovo articolo per aiutare gli utenti a conoscere il Web.

-
- -

Trova un compito specifico

- -

I contributori stanno utilizzando una bacheca Trello per organizzare i propri compiti. In questo modo puoi trovare dei compiti specifici da fare nel progetto. Per essere coinvolto, basta creare un account Trello e avvisare Chris Mills per ricevere i permessi di scrittura sulla bacheca.

- -

Contribuire è il modo migliore per divertirsi, imparando nuove cose. Se ti senti perso o hai domande, non esitare a raggiungerci nella nostra lista email o canale IRC (dettagli a fine pagina). Chris Mills guida gli argomenti per l'area apprendimento — Puoi anche contattarlo direttamente.

- -

La seguente sezione fornisce delle idee generali di compiti che puoi fare.

- -

Sono un principiante

- -

Questo è meraviglioso! I principianti sono molto importanti e preziosi per creare materiale didattico e raccogliere feedback su di esso. In quanto diretto destinatario di questo materiale, riesci a restituire una prospettiva unica su di esso e ciò ti rende un elemento fondamentale del nostro team. Invece, se stai utilizzando i nostri articoli per imparare qualcosa ma ti trovi in difficoltà o trovi un articolo caotico, puoi sia correggerlo oppure farci sapere del problema affinché possiamo provvedere noi a correggerlo.

- -

Di seguito sono riportati i modi in cui puoi contribuire:

- -
-
Aggiungi tags ai nostri articoli (5 min)
-
Aggiungere dei tag ai contenuti di MDN è uno dei modi più semplici di dare il tuo contributo. Poichè molte delle nostre sezioni utilizzano i tags per aiutare a fornire le giuste informazioni, contribuire a definire i tags stessi è senz'altro un contributo molto prezioso. Da' un'occhiata alla lista dei lemmi del glossario e agli articoli didattici ancora privi di tags per iniziare a contribuire.
-
Leggi e correggi le voci del glossario (5 min)
-
In qualità di principiante, noi abbiamo bisogno della freschezza del tuo sguardo. Se una voce del glossario ti sembra difficile da comprendere, ciò significa che occorre migliorarla. Sentiti libero di operare qualunque cambiamento ritieni necessario. Se non ti sembra di essere in grado tu stesso di apportare eventuali correzioni, puoi comunque segnalarcelo alla nostra mailing list.
-
Scrivi una nuova voce del glossario (20 min)
-
Ecco il modo più efficace per imparare qualcosa di nuovo. Scegli un concetto che vorresti capire meglio e, mentre impari, scrivi la nuova voce del glossario che gli pertiene. Provare a spiegare qualcosa agli altri è un modo efficace di "fissare" quanto stai imparando nel tuo cervello e di elaborare tu stesso il significato delle cose. Tutto ciò, mentre stai cercando di aiutare qualcun altro: si vince tutti!
-
Leggi e controlla un articolo didattico (2 ore)
-
Compito molto simile al precedente (v. sopra); solo richiede maggior tempo, perchè questi articoli in genere sono più lunghi.
-
- -

Sono uno sviluppatore

- -

Fantastico! Le tue competenze tecniche sono proprio quello che ci serve per offrire ai principianti dei contenuti tecnicamente accurati. Poichè questa sezione di MDN è dedicata all'apprendimento del Web, fa in modo che le tue spiegazioni siano il più semplice possibile, ma non così semplici da risultare inutili. E' preferibile essere compresi piuttosto che esageratamente precisi.

- -
-
Leggi e correggi le voci del glossario (5 min)
-
In quanto sviluppatore, vorremmo essere sicuri che farai in modo di rendere i nostri contenuti in maniera tecnicamente accurata ma non pedante. Sentiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sui contenuti prima di intervenire, contattaci via mailing list o IRC channel.
-
Scrivi una nuova voce del glossario (20 min)
-
Rendere più chiaro il linguaggio tecnico è un ottimo metodo per imparare e, allo stesso tempo, per essere tecnicamente precisi. I principianti te ne saranno grati. Ci sono molti termini da definire che richiedono la tua attenzione. Scégline uno e sei pronto per cominciare.
-
Leggi e correggi un articolo didattico (2 ore)
-
Stessa cosa del controllare una voce del glossario (v. sopra); richiede solo un po' più di tempo perchè questi articoli sono generalmente più lunghi.
-
Scrivi un nuovo articolo didattico (4 ore o più)
-
In MDN mancano ancora semplici chiari articoli  dedicati all'utilizzo delle tecnologie per il Web (HTML, CSS, JavaScript, ecc). Ci sono anche contenuti ormai obsoleti che avrebbero bisogno di essere controllati e riorganizzati. Mettiti alla prova e contribuisci a rendere le tecnologie per il Web accessibili anche per i principianti.
-
Crea strumenti didattici interattivi , esempi di codice o esercizi  (? ore)
-
Ciascuno dei nostri articoli didattici prevede quello che chiamiamo materiale di "apprendimento attivo", perchè le persone imparano meglio se fanno loro stessi. Tale materiale è costituito da esercizi o contenuti interattivi, che consentono all'utente di applicare e manipolare i concetti espressi nell'articolo. Esistono diversi modi di creare contenuti didattici per l'apprendimento attivo, dal creare esempi di codice con JSFiddle o simili, alla composizione di contenuti interattivi e del tutto modificabili con Thimble. Scatena la tua fantasia!
-
- -

Sono un insegnante

- -

MDN ha una lunga storia di eccellenza tecnica, ma siamo ancora agli inizi per ciò che riguarda gli strumenti didattici migliori per insegnare ai principianti. Ecco dove il tuo aiuto è prezioso, come insegnante o facilitatore: puoi aiutarci a far sì che il nostro materiale fornisca un percorso didattico efficace e pratico per i nostri lettori.

- -
-
Leggi e correggi una voce del glossario (15 min)
-
Controlla un lemma del glossario e séntiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sul contenuto prima di modificarlo, puoi contattarci tramite la nostra mailing list o IRC channel.
-
Scrivi una nuova voce del glossario (1 ora)
-
Definizioni dei termini chiare e semplici e supervisione dei concetti di base del glossario sono elementi fondamentali per aiutare i principianti. La tua esperienza come educatore può essere molto utile per creare delle voci del glossario efficaci; ci sono molti termini da definire che richiedono la tua attenzione. Scégline uno e datti da fare.
-
Aggiungi illustrazioni e/o schemi agli articoli (1 ora)
-
Come saprai, le illustrazioni sono una parte inestimabile di qualunque contenuto didattico. Ecco una cosa che spesso ci manca qui in MDN e la tua abilità può far la differenza in questa sezione. Scorri gli articoli privi di illustrazioni e scégline uno cui vuoi aggiungere la parte grafica.
-
Leggi e correggi un articolo didattico (2 ore)
-
Compito simile alla correzione delle voci del glossario (v. sopra), ma richiede maggior tempo dal momento che gli articoli sono generalmente più lunghi.
-
Scivi un nuovo articolo didattico (4 ore)
-
Ci servono articoli chiari e semplici sull'ecosistema Web e sugli argomenti inerenti di tipo funzionale. Dal momento che questi articoli didattici hanno lo scopo di essere soprattutto educativi e non di coprire letteralmente tutto quello che c'è da sapere, la tua esperienza riguardo cosa e come sia effettivamente da trattare sarà di grande aiuto.
-
Inventa esercizi, questionari o strumenti didattici interattivi (? ore)
-
Tutti i nostri articoli didattici prevedono materiale di "apprendimento attivo". Tale materiale consiste in contenuti interattivi o esercizi, che aiuteranno gli utenti ad apprendere come utilizzare ed espandere i concetti espressi nell'articolo in questione. Ci sono molti modi in cui tu puoi contribuire qui, dal creare quiz al comporre nuovi contenuti interattivi e modificabili su Thimble. Scatena la tua fantasia!
-
Crea percorsi didattici (? ore)
-
Al fine di fornire tutorials di facile comprensione e nella corretta progressione, ci occorre organizzare i contenuti in percorsi didattici: è un modo di raccogliere contenuti preesistenti e individuare ciò che ancora manca, così da proporre gli argomenti per nuovi articoli didattici ancora da scrivere.
-
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 new file mode 100644 index 0000000000..66702c1bdd --- /dev/null +++ b/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,87 @@ +--- +title: Cascata ed ereditarietà +slug: Conoscere_i_CSS/Cascata_ed_ereditarietà +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

+

Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori. +

Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa. +

link title== Headline text ==== Informazioni: Cascata ed ereditarietà == +Lo stile finale di un elemento può essere definito in molti luoghi diversi, che possono intergire fra loro in modo complesso. +Questa complessa interazione rende i CSS molto potenti, ma può anche rendere una correzione confusa e difficile. +

Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono: +

+ +

Lo stile dell'utente modifica lo stile predefinito del browser. Lo stile dell'autore del documento modifica ulteriormente lo stile. In questa guida tu sei l'autore del documento di esempio, e verrà considerato solo il foglio di stile dell'autore. +

+ +
Esempio +Quando leggi questo articolo della guida nel tuo browser Mozilla, parte dello stile che vedi proviene da quello predefinito del browser per l'HTML. Un altra parte potrebbe essere definita dalle impostazioni del browser nel menu Strumenti>Opzioni, o dal file userContent.css nel tuo profilo del browser. Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki. +
+


+Quando apri il documento di esempio con il browser, gli elementi STRONG sono più marcati del resto del testo. Questo effetto deriva dallo stile predefinito del browser per l'HTML. +

Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio. +

Gli elementi STRONG inoltre ereditano gran parte dello stile dell'elemento P, poiché ne sono figli. Allo stesso modo l'elemento P eredita gran parte dello stile dall'elemento BODY. +

Negi stili in cascata, il foglio di stile dell'autore ha la precedenza, quindi viene il foglio dell'utente ed infine quello predefinito del browser. +

Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore. +

Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida. +

+ + +
Di più... +
I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave !important. +

Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente. +

Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a "Assegnare valori alle proprietà, Cascata ed ereditarietà"(EN) nelle specifiche dei CSS. +

+
+

Azione: Utilizzare l'ereditarietà

+

Modifica il tuo file CSS di esempio. +

Aggiungi la seguente linea facendo copia e incolla. +Non è molto importante dove viene incollata. In ogni caso è più logico aggiungerla all'inizio perché nel documento l'elemento P è genitore dell'elemento STRONG: +

+
p {color: blue; text-decoration: underline;}
+
+

Ora aggiorna il browser e nota i cambiamenti al docuemnto di esempio. +La sottolineatura influenza tutto il testo contenuto nel paragrafo, incluse le lettere iniziali. +L'elemento STRON ha ereditato lo stile sottolineato dall'elemento genitore P. +

Ma gli elementi STRONG continuano ad essere di colore rosso. Questo perché il colore rosso è lo stile proprio dell'elemento, che prevale sull'elemento blu dell'elemento P. +

+ + +
+ + +
Prima +
Cascading Style Sheets +
+		 + + +
Dopo +
Cascading Style Sheets +
+
+


+

+ + +
Esercizi +
Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate: + + +
Cascading Style Sheets +
+
+


+

+

Cos'altro?

+

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione. +

Il foglio di stile d'esempio specifica lo stile per i tag P e STRONG modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo: +I Selettori +

{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pl": "pl/CSS/Na_pocz\u0105tek/Kaskadowo\u015b\u0107_i_dziedziczenie", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a" } ) }} diff --git a/files/it/learn/css/building_blocks/selectors/index.html b/files/it/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..cf0f6662cf --- /dev/null +++ b/files/it/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,231 @@ +--- +title: selettori CSS +slug: Learn/CSS/Building_blocks/Selettori +tags: + - Attributo + - CSS + - Classe + - Impara + - Principiante + - Pseudo + - Selettori +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenze informatiche di base, istallazione di software fondamentali, conoscenze base di gestione dei file, basi di HTML (vedi Introduzione ad HTML) ed avere un'idea di base di come funzionano i CDD (vedi primi passi con i CSS).
Obbiettivo:Apprendere nel dettaglio il funzionamento dei selettori CSS.
+ +

Cos'é un selettore?

+ +

Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come soggetto del selettore.

+ +

Some code with the h1 highlighted.

+ +

Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi h1 oppure una classe come .special.

+ +

Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in Level 3 Selectors specification (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.

+ +

Liste di selettori

+ +

Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un h1 ed anche per la classe .special, potrei scriverlo nel seguente modo.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.

+ +
h1, .special {
+  color: blue;
+}
+ +

Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.

+ +

Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore h1 non presenta errori e la sua dichiarazione verrá eseguita correttamente.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Tuttavia se combinati, né il selettore h1 né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipi di selettori

+ +

I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.

+ +

Selettori di tipo, classe e ID

+ +

Questo gruppo include i selettori usati per gli elementi della pagina HTML come <h1>.

+ +
h1 { }
+ +

Include inoltre i selettori di classe:

+ +
.box { }
+ +

oppure di ID:

+ +
#unique { }
+ +

Selettori di attributo

+ +

Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:

+ +
a[title] { }
+ +

Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classi e pseudo-elementi

+ +

Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe :hover seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:

+ +
a:hover { }
+ +

Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, ::first-line seleziona sempre la prima riga di testo di un elemento (un elemento <p> nell'esempio seguente), come se questa fosse messa dentro un blocco  <span>  e selezionata.

+ +
p::first-line { }
+ +

Combinatori

+ +

L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <article> utilizzando il combinatore (>):

+ +
article > p { }
+ +

Prossimo passo

+ +

Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei selettori di tipo, classe e id.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Tabella riassuntiva dei selettori

+ +

La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelettoreEsempioTutorial sui CSS
Selettore di tipoh1 {  }Selettore di tipo
Selettore universale* {  }Selettore universale
Selettore di classe.box {  }Selettore di classe
Selettore di ID#unique { }Selettore di ID
Selettore di attributoa[title] {  }Selettore di attributo
Pseudo-classip:first-child { }Pseudo-classi
Pseudo-elementip::first-line { }Pseudo-elementi
Combinatore di discendenzaarticle pCombinatore di discendenza
Combinatore di figliarticle > pCombinatore di figli
Combinatore di fratelli adiacentih1 + pCombinatore di fratelli adiacenti
Combinatore di fratelli genericih1 ~ pCombinatore di fratelli generici
+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html deleted file mode 100644 index cf0f6662cf..0000000000 --- a/files/it/learn/css/building_blocks/selettori/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: selettori CSS -slug: Learn/CSS/Building_blocks/Selettori -tags: - - Attributo - - CSS - - Classe - - Impara - - Principiante - - Pseudo - - Selettori -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.

- - - - - - - - - - - - -
Prerequisiti:Conoscenze informatiche di base, istallazione di software fondamentali, conoscenze base di gestione dei file, basi di HTML (vedi Introduzione ad HTML) ed avere un'idea di base di come funzionano i CDD (vedi primi passi con i CSS).
Obbiettivo:Apprendere nel dettaglio il funzionamento dei selettori CSS.
- -

Cos'é un selettore?

- -

Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come soggetto del selettore.

- -

Some code with the h1 highlighted.

- -

Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi h1 oppure una classe come .special.

- -

Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in Level 3 Selectors specification (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.

- -

Liste di selettori

- -

Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un h1 ed anche per la classe .special, potrei scriverlo nel seguente modo.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.

- -
h1, .special {
-  color: blue;
-}
- -

Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.

- -
h1,
-.special {
-  color: blue;
-}
- -

Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.

- -

Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore h1 non presenta errori e la sua dichiarazione verrá eseguita correttamente.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Tuttavia se combinati, né il selettore h1 né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.

- -
h1, ..special {
-  color: blue;
-}
- -

Tipi di selettori

- -

I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.

- -

Selettori di tipo, classe e ID

- -

Questo gruppo include i selettori usati per gli elementi della pagina HTML come <h1>.

- -
h1 { }
- -

Include inoltre i selettori di classe:

- -
.box { }
- -

oppure di ID:

- -
#unique { }
- -

Selettori di attributo

- -

Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:

- -
a[title] { }
- -

Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:

- -
a[href="https://example.com"] { }
- -

Pseudo-classi e pseudo-elementi

- -

Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe :hover seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:

- -
a:hover { }
- -

Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, ::first-line seleziona sempre la prima riga di testo di un elemento (un elemento <p> nell'esempio seguente), come se questa fosse messa dentro un blocco  <span>  e selezionata.

- -
p::first-line { }
- -

Combinatori

- -

L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <article> utilizzando il combinatore (>):

- -
article > p { }
- -

Prossimo passo

- -

Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei selettori di tipo, classe e id.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Tabella riassuntiva dei selettori

- -

La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelettoreEsempioTutorial sui CSS
Selettore di tipoh1 {  }Selettore di tipo
Selettore universale* {  }Selettore universale
Selettore di classe.box {  }Selettore di classe
Selettore di ID#unique { }Selettore di ID
Selettore di attributoa[title] {  }Selettore di attributo
Pseudo-classip:first-child { }Pseudo-classi
Pseudo-elementip::first-line { }Pseudo-elementi
Combinatore di discendenzaarticle pCombinatore di discendenza
Combinatore di figliarticle > pCombinatore di figli
Combinatore di fratelli adiacentih1 + pCombinatore di fratelli adiacenti
Combinatore di fratelli genericih1 ~ pCombinatore di fratelli generici
- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
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 new file mode 100644 index 0000000000..7942e9a4a9 --- /dev/null +++ b/files/it/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,157 @@ +--- +title: CSS leggibili +slug: Conoscere_i_CSS/CSS_leggibili +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 +--- +

+

In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso. +

Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile. +

+

Informazioni: CSS leggibili

+

E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili. +Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile. +

+

Spazi bianchi

+

Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee. +Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili. +

Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose. +

La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni. +

+ + +
Esempi +
Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga: +
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+

Altri preferiscono il metodo "una proprietà per linea": +

+
+
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+
+

Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni: +

+
+
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+
+

Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere): +

+
+
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+
+

Alcuni usano la tabulazione. Altri solo gli spazi. +

+
+

Commenti

+

I commenti nei CSS iniziano con /* e terminano con */. +

I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per isolare temporaneamente alcune parti di codice per scopi di test. +

Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento. +Il resto del documento deve continuare ad avere una sintassi corretta. +

+ + +
Esempio +
Un commento vero e proprio: +
+
/* stile per la lettere iniziale C del primo paragrafo */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+

Un isolamento: +

+
+
/* isolo una porzione del codice
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+ */
+
+
+
+

Raggruppare i selettori

+

Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole. +La dichiarazione verrà applicata a tutti gli elementi selezionati. +

Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate. +

+ + +
Esempi +
Questa regola rende gli elementi H1, H2 e H3 dello stesso colore. +

E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica. +

+
+
/* colore dei titoli */
+h1, h2, h3 {color: navy;}
+
+
+
+

Azione: Aggiungere commenti e migliorare la struttura

+

Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine): +

+
+
strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
+
+

Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno. +

Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+

+ + +
Esercizi +
Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

(Esiste più di un modo per ottenere questo risultato.) +

+
+


+

+

Cos'altro?

+

Il foglio di stile dell'esempio utilizza solamente il testo corsivo (italic) o il testo sottolineato (underline). +La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento: +Stili del testo +

{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} 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 new file mode 100644 index 0000000000..9e65e269af --- /dev/null +++ b/files/it/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,114 @@ +--- +title: Cosa è CSS +slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/it/docs/CSS/Getting_Started", "Getting started")}} Questa è la prima sezione dell'esercitazione "Iniziare (Esercitazione di CSS)" che spiega cosa è CSS. Si creerà un semplice documento su cui lavorare nelle pagine seguenti

+ +

Informazione: Cosa è CSS?

+ +

Cascading Style Sheets (CSS) è un linguaggio per specificare come i documenti sono presentati all'utente.

+ +

Un documento è un insieme di informazioni strutturate utilizzando un linguaggio a marcatori.

+ +
+
Esempi
+ +

Una pagine web come quella che si legge è un documento.
+ Le informazioni che si vedono in una pagina web sono strutturare utilizzando il linguaggio a marcatori HTML  (HyperText Markup Language).
+ Le finestre di dialogo, anche chiamate finestre modali, di una applicazione sono spesso documenti.
+ Tali finestre modali potrebbero essere strutturate utilizzano un linguaggio a marcatori, come XUL. E' questo il caso frequente delle applicazioni di Mozilla, ma non è il caso comune.

+
+ +

In questa esercitazione, i riquadri titolati Maggiori dettagli come quello seguente contengono informazioni facoltative. Se hai fretta di andare avanti con l'esercitazione potresti saltarli, e forse tornare a leggerli più tardi. Diversamente leggerli quando li incontri, e forse seguire i link per imparare di più.

+ +
+
Maggiori dettagli
+ +

Un documento non è un file. Potrebbe o non potrebbe essere memorizzato in un file.

+ +

Per esempio, il documento che stai leggendo non è memorizzaotin un file. Quando il browser web richiede questa pagina, il server interroga un database e genera il documento, traendone le sue parti da molti file. D'altra parte, in questa esercitazione si lavora con documenti che sono memorizzati nei file.

+ +

Per maggiori informazioni sui documenti e i linguaggi a amrcatori, si vedano altre parti di questo sito web—per esempio:

+ + + + + + + + + + + + + + + + + + + + +
HTMLper le pagine web
XMLper i documenti strutturati in generale
SVGper la grafica
XULper le interfacce utente in Mozillafor user interfaces in Mozilla
+ +

Nella Parte II di questa esercitazione si vedranno esempi di questi linguaggi a marcatore.

+
+ +

Presentare un documento ad un utente significa convertirlo in una forma utilizzabile dall'essere umano. Browser, come FireFox, Chrome o Internet Explorer, sono progettati per presentare visivamente i documenti — per esempio, sullo schermo di un computer, un proiettore o una stampante.

+ + + + + + + + +
 
+
Maggiori dettagli
+ CSS non è solo per i browser, e non solo per presentazioni visive. Nella terminologia fomale di CSS, il programma che presenta un documento a un utente è chiamatouser agent (UA). Un browser è solo un tipo di UA. Comunque, nella Parte I dell'esercitazione si lavora esclusivamente con CSS in un browser. + +

Per qualche definizione formale della terminologia relativa a CSS, vedere le Definizioni nelle specifiche CSS.

+
+ +

Azione: Creare un documento

+ +

Utilizzare il proprio computer per creare una nuova cartella ed un nuovo file di testo al suo interno. Il file conterrà il tuo documento.
+ Copia ed incolla il codice HTML mostrato sotto. Salva il file utilizzando il nome doc1.html

+ +
<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+ +

Nel proprio browser, aprire una nuova scheda o una nuova finestra, e aprirvi il file.

+ +

Si dovrebbe vedere il testo con le lettere iniziali in grassetto, come questo:

+ + + + + + + +
Cascading Style Sheets
+ +

Quello che vedi nel tuo browser potrebbe non apparire esattametne uguale a questo, a causa delle impostazioni utilizzate dal browser e da questo wiki. Se ci sono differenze di font, spaziatura e colori, non ha importanza.

+ +

E poi?

+ +

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Il documento ancora non utilizza CSS. Nella prossima sezione si utilizzerà CSS per specificare lo stile.

diff --git a/files/it/learn/css/first_steps/index.html b/files/it/learn/css/first_steps/index.html new file mode 100644 index 0000000000..106bf156d6 --- /dev/null +++ b/files/it/learn/css/first_steps/index.html @@ -0,0 +1,43 @@ +--- +title: Iniziare (Esercitazione di CSS) +slug: Conoscere_i_CSS +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

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.

+ +

Questa esercitazione è principalmente per principianti di CSS, ma va bene anche per chi ha qualche conoscenza base di CSS. Se sei un esperto di CSS qusta esercitazione probabilmente non è molto utile, la pagina principale di CSS elenca risorse più avanzate.

+ + + +

Di cosa hai bisogno per iniziare?

+ +

Per ottenere il massimo da questa esercitazione, hai bisogno di un editor per file di testo e un moderno browser. Devi anche avere una minima conoscenza del loro utilizzo.

+ +

Se non vuoi modificare i file, allora puoi anche solo leggere l'esercitazione e guardare le immagini, ma è il modo meno efficace per imparare.

+ +

Nota:  CSS fornisce un modo di lavorare con il colore, quindi parte di questa esercitazione dipende dal colore. Puoi utilizzare queste parti dell'esercitazione semplicemente se ha un display a colori e una normale visione dei colori.

+ +

Come utilizzare questa esercitazione

+ +

Per utilizzare questa esercitazione, leggi le pagine attentamente e in sequenza. Se salti una pagina, ti potresti trovare in difficoltà nel compredere le pagine successive.

+ +

In ogni pagina, puoi usare la sezione Informazioni per capire come funziona CSS. Usare la sezione Azione per provare ad utilizzare CSS sul proprio computer.

+ +

Per mettere alla prova la propria comprensione, cogli la sfida alla fine di ogni pagina. Le soluzioni alle sfide sono linkate sotto le sfide stesse, quindi non si ha bisogno di guardarle se non lo si vuole.

+ +

Per comprendere CSS in maggiore profondità, leggere le informazioni che si trovano nei box titolati Maggiori dettagli. Utilizzare i collegamenti presenti per trovare informazioni di riferimento su CSS.

+ +

Esercitazione Parte II

+ +

Una seconda parte dell'esercitazione fornisce esempi che mostrano la visibilità di CSS utilizzato con altre tecnologie web e Mozilla

+ +
    +
  1. JavaScript
    2. +
  2. Grafica SVG
    3. +
  3. Dati XML
    4. +
  4. Collegamento XBL
    5. +
  5. Interfacce utente XUL
    6. +
+ +

 

diff --git a/files/it/learn/css/styling_text/definire_stili_link/index.html b/files/it/learn/css/styling_text/definire_stili_link/index.html deleted file mode 100644 index b6bdc7a6fa..0000000000 --- a/files/it/learn/css/styling_text/definire_stili_link/index.html +++ /dev/null @@ -1,438 +0,0 @@ ---- -title: Definire gli stili dei link -slug: Learn/CSS/Styling_text/Definire_stili_link -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Quando si vogliono assegnare degli stili ai link, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza informatica di base, elementi di HTML (leggi Introduction to HTML), elementi di CSS (leggi Introduction to CSS), Fondamenti di testo e font con CSS.
Obbiettivo:Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.
- - - -

Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le best practices viste in Creare gli hyperlink. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le best practices per la definizione degli stili dei link.

- - - -

La prima cosa da capire è il concetto di stato dei link — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti pseudo-classi:

- - - -

Stili predefiniti

- -

L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).

- -
<p><a href="#">A simple link</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

- -
-

Nota: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli # (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il # (cancelletto) invece si connette esclusivamente alla pagina corrente.

-
- -

Quando esplorerete gli stili predefiniti, si noteranno alcune cose:

- - - -

E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:

- - - -

Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:

- - - -
-

Nota: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !

-
- -

Definiamo qualche stile

- -

Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.

- -

Per cominciare, scriviamo il nostro set di stili vuoto:

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, LoVe Fears HAte.

- -

Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

Forniamo anche il seguente esempio HTML a cui applicare il CSS:

- -
<p>There are several browsers available, such as <a href="#">Mozilla
-Firefox</a>, <a href="#">Google Chrome</a>, and
-<a href="#">Microsoft Edge</a>.</p>
- -

Mettendoli insieme il risultato sarà questo:

- -

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

- -

Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:

- - - -

Active learning: Definisci i tuoi stili

- -

In questa sessione di active learning, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.

- -

Se fai un errore, puoi sempre ripartire usando il pulsante Reset. E se rimani bloccato, clicca sul bottone Show solution per inserire l'esempio che ti abbiamo mostrato sopra.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- - - -

Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo il grande esempio fornito da icons8.com.

- -

Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:

- -
<p>For more information on the weather, visit our <a href="#">weather page</a>,
-look at <a href="#">weather on Wikipedia</a>, or check
-out <a href="#">weather on Extreme Science</a>.</p>
- -

Quindi il CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

- -

So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

- -

We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

- -

Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

- -

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.

- -

So that's it — try revisiting the active learning section above and trying this new technique out!

- -
-

Note: Don't worry if you are not familiar with backgrounds and responsive web design yet; these are explained in other places.

-
- - - -

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

- -

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

- -

First, some HTML:

- -
<ul>
-  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
-</ul>
- -

And now our CSS:

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

This gives us the following result:

- -

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

- -

Let's explain what's going on here, focusing on the most interesting parts:

- - - -
-

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

-
- -

Summary

- -

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/it/learn/css/styling_text/styling_links/index.html b/files/it/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..b6bdc7a6fa --- /dev/null +++ b/files/it/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,438 @@ +--- +title: Definire gli stili dei link +slug: Learn/CSS/Styling_text/Definire_stili_link +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Quando si vogliono assegnare degli stili ai link, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza informatica di base, elementi di HTML (leggi Introduction to HTML), elementi di CSS (leggi Introduction to CSS), Fondamenti di testo e font con CSS.
Obbiettivo:Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.
+ + + +

Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le best practices viste in Creare gli hyperlink. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le best practices per la definizione degli stili dei link.

+ + + +

La prima cosa da capire è il concetto di stato dei link — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti pseudo-classi:

+ + + +

Stili predefiniti

+ +

L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).

+ +
<p><a href="#">A simple link</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

+ +
+

Nota: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli # (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il # (cancelletto) invece si connette esclusivamente alla pagina corrente.

+
+ +

Quando esplorerete gli stili predefiniti, si noteranno alcune cose:

+ + + +

E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:

+ + + +

Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:

+ + + +
+

Nota: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !

+
+ +

Definiamo qualche stile

+ +

Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.

+ +

Per cominciare, scriviamo il nostro set di stili vuoto:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, LoVe Fears HAte.

+ +

Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

Forniamo anche il seguente esempio HTML a cui applicare il CSS:

+ +
<p>There are several browsers available, such as <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a>, and
+<a href="#">Microsoft Edge</a>.</p>
+ +

Mettendoli insieme il risultato sarà questo:

+ +

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

+ +

Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:

+ + + +

Active learning: Definisci i tuoi stili

+ +

In questa sessione di active learning, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.

+ +

Se fai un errore, puoi sempre ripartire usando il pulsante Reset. E se rimani bloccato, clicca sul bottone Show solution per inserire l'esempio che ti abbiamo mostrato sopra.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ + + +

Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo il grande esempio fornito da icons8.com.

+ +

Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:

+ +
<p>For more information on the weather, visit our <a href="#">weather page</a>,
+look at <a href="#">weather on Wikipedia</a>, or check
+out <a href="#">weather on Extreme Science</a>.</p>
+ +

Quindi il CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

+ +

So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

+ +

We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

+ +

Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

+ +

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.

+ +

So that's it — try revisiting the active learning section above and trying this new technique out!

+ +
+

Note: Don't worry if you are not familiar with backgrounds and responsive web design yet; these are explained in other places.

+
+ + + +

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

+ +

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

+ +

First, some HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

And now our CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

This gives us the following result:

+ +

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

+ +

Let's explain what's going on here, focusing on the most interesting parts:

+ + + +
+

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

+
+ +

Summary

+ +

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/it/learn/forms/form_validation/index.html b/files/it/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..9557758529 --- /dev/null +++ b/files/it/learn/forms/form_validation/index.html @@ -0,0 +1,846 @@ +--- +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/forms/how_to_build_custom_form_controls/index.html b/files/it/learn/forms/how_to_build_custom_form_controls/index.html new file mode 100644 index 0000000000..288fa8e1c2 --- /dev/null +++ b/files/it/learn/forms/how_to_build_custom_form_controls/index.html @@ -0,0 +1,825 @@ +--- +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/forms/index.html b/files/it/learn/forms/index.html new file mode 100644 index 0000000000..45c0d055dd --- /dev/null +++ b/files/it/learn/forms/index.html @@ -0,0 +1,85 @@ +--- +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/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" "b/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" deleted file mode 100644 index 3d3bc69f60..0000000000 --- "a/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Che aspetto avrà il tuo sito Web? -slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web -tags: - - Basi - - Design - - Fonts - - Grafica - - Web - - imparare -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Che aspetto avrà il tuo sito? spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" 

-
- -

Prima di tutto: pianifica

- -

Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.

- -

Prima di iniziare dovrai rispondere a questi domande:

- -
    -
  1. Di cosa tratterà il tuo sito Web? Ti piacciono i cani, New York, o Pacman?
    2. -
  2. Quali informazioni vorrai portare su quell'argomento? Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.
    3. -
  3. Che aspetto ha il tuo sito Web in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?
    4. -
- -
-

Nota bene: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su Firefox OS Guidelines.

-
- -

Fare uno schizzo del design

- -

Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!

- -

- -
-

Nota bene: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.

- -

I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.

-
- -

Scegliere le tue risorse

- -

A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.

- -

Testo

- -

Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.

- -

Colori del tema

- -

Per scegliere un colore, vai qui e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come #660066. Questo è chiamato codice esadecimale, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.

- -

- -

Immagini

- -

Per scegliere un'immagine, vai su Google Immagini e cerca qualcosa che faccia al caso tuo.

- -
    -
  1. Quando trovi l'immagine che desideri, premi sull'immagine.
    2. -
  2. Premi sul bottone Visualizza immagine.
    3. -
  3. Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli Salva immagine come...,  e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.
    4. -
- -

- -

- -
-

Nota bene: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) Strumenti, poi su 2) Diritti di utilizzo e, infine, sulla scelta che più soddisfa le vostre necessità:

- -

-
- -

Font

- -

Per scegliere un font:

- -
    -
  1. Vai su Google Fonts e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.
    2. -
  2. Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.
    3. -
  3. Premi sul bottone "* Family Selected" nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).
    4. -
  4. Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.
    5. -
- -

- -

 

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

- -

 

- -

In questo modulo

- - - -

 

diff --git a/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html deleted file mode 100644 index 47fb54afda..0000000000 --- a/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Come funziona il Web -slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Come funziona il Web spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.

-
- -

Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.

- -

Client e server

- -

I computer connessi sul web sono chiamati client e server. Il seguente schema semplificato mostra come possono interagire tra loro:

- -

I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client

- - - -

Le restanti componenti del Web

- -

La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.

- -

Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.

- -

- -

Oltre al client e al server dobbiamo anche considerare:

- - - -

Ma allora: cosa accade esattamente?

- -

Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):

- -
    -
  1. Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).
    2. -
  2. Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.
    3. -
  3. Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).
    4. -
  4. Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).
    5. -
- -

Chiarimenti sul DNS

- -

I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: 63.245.215.20.

- -

Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.

- -

I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo IP Checker.

- -

Chiarimenti sui pacchetti

- -

Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.

- -

Vedi anche

- - - -

Credit

- -

Street photo: Street composing, by Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

In questo modulo

- - 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 new file mode 100644 index 0000000000..d7c574320b --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,95 @@ +--- +title: Gestire i file +slug: Learn/Getting_started_with_the_web/Gestire_i_file +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata,  facendo si che essi possano dialogare tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) caricarli su un server. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura  corretta dei files necessari al tuo sito web.

+
+ +

Dove andrebbe collocato il tuo sito web all'interno del tuo computer?

+ +

Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.

+ +
    +
  1. Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata progetti-web (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.
    2. +
  2. Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala sito-test (o qualcosa di più fantasioso).
    3. +
+ +

Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole

+ +

Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:

+ +
    +
  1. Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella test-site e le assegni il nome MyImage.jpg, ma successivamente provi ad aprirla usando myimage.jpg, potrebbe non funzionare.
    2. +
  2. Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: my-file.html o my_file.html.
    3. +
+ +

In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.

+ +

Quale struttura dovrebbe avere il tuo sito?

+ +

La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:

+ +
    +
  1. index.html: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato index.html e salvalo nella cartella test-site.
    2. +
  2. cartella images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata images, nella cartella test-site.
    3. +
  3. cartella styles: Questa cartella racchiude il codice CSS usato per creare il contenuto  grafico  (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata  styles, nella cartella test-site.
    4. +
  4. cartella scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata scripts, nella cartella test-site.
    5. +
+ +
+

Nota: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata Nascondi estensioni per tipi di file conosciuti attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando Opzioni cartella... , deselezionare Nascondi estensioni per tipi di file conosciuti, poi cliccando OK. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!

+
+ +

Percorsi dei file

+ +

Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa sapere dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file index.html, rendendo così possibile mostrare l'immagine scelta nell'articolo "Come dovrebbe apparire il tuo sito web?"

+ +
    +
  1. Copia l'immagine scelta in precedenza nella cartella images.
    2. +
  2. Apri il file index.html, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti  del suo significato per ora - approfondiremo i dettagli più avanti. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>La mia pagina di prova</title>
+  </head>
+  <body>
+    <img src="" alt="La mia immagine di prova">
+  </body>
+</html>
    +
    3. +
  3. La riga <img src="" alt="My test image"> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory images, che a sua volta è nella directory comune a index.html. Scorrendo lo schema strutturale da index.html alla nostra immagine, il percorso che dovremmo avere è: images/your-image-filename. Se ad esempio, la mia immagine si chiama firefox-icon.png, allora il percorso corretto sarà images/firefox-icon.png.
    4. +
  4. Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di src="".
    5. +
  5. Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Alcune regole generali per i percorsi dei file:

+ + + +

For now, this is about all you need to know.

+ +
+

Nota: Il file system di Windows, usa i backslash, non i forward slash, esempio: C:\windows. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.

+
+ +

Cos'altro dovrei fare?

+ +

Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html b/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html deleted file mode 100644 index d7c574320b..0000000000 --- a/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Gestire i file -slug: Learn/Getting_started_with_the_web/Gestire_i_file -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata,  facendo si che essi possano dialogare tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) caricarli su un server. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura  corretta dei files necessari al tuo sito web.

-
- -

Dove andrebbe collocato il tuo sito web all'interno del tuo computer?

- -

Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.

- -
    -
  1. Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata progetti-web (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.
    2. -
  2. Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala sito-test (o qualcosa di più fantasioso).
    3. -
- -

Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole

- -

Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:

- -
    -
  1. Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella test-site e le assegni il nome MyImage.jpg, ma successivamente provi ad aprirla usando myimage.jpg, potrebbe non funzionare.
    2. -
  2. Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: my-file.html o my_file.html.
    3. -
- -

In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.

- -

Quale struttura dovrebbe avere il tuo sito?

- -

La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:

- -
    -
  1. index.html: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato index.html e salvalo nella cartella test-site.
    2. -
  2. cartella images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata images, nella cartella test-site.
    3. -
  3. cartella styles: Questa cartella racchiude il codice CSS usato per creare il contenuto  grafico  (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata  styles, nella cartella test-site.
    4. -
  4. cartella scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata scripts, nella cartella test-site.
    5. -
- -
-

Nota: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata Nascondi estensioni per tipi di file conosciuti attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando Opzioni cartella... , deselezionare Nascondi estensioni per tipi di file conosciuti, poi cliccando OK. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!

-
- -

Percorsi dei file

- -

Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa sapere dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file index.html, rendendo così possibile mostrare l'immagine scelta nell'articolo "Come dovrebbe apparire il tuo sito web?"

- -
    -
  1. Copia l'immagine scelta in precedenza nella cartella images.
    2. -
  2. Apri il file index.html, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti  del suo significato per ora - approfondiremo i dettagli più avanti. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>La mia pagina di prova</title>
-  </head>
-  <body>
-    <img src="" alt="La mia immagine di prova">
-  </body>
-</html>
    -
    3. -
  3. La riga <img src="" alt="My test image"> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory images, che a sua volta è nella directory comune a index.html. Scorrendo lo schema strutturale da index.html alla nostra immagine, il percorso che dovremmo avere è: images/your-image-filename. Se ad esempio, la mia immagine si chiama firefox-icon.png, allora il percorso corretto sarà images/firefox-icon.png.
    4. -
  4. Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di src="".
    5. -
  5. Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Alcune regole generali per i percorsi dei file:

- - - -

For now, this is about all you need to know.

- -
-

Nota: Il file system di Windows, usa i backslash, non i forward slash, esempio: C:\windows. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.

-
- -

Cos'altro dovrei fare?

- -

Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

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 new file mode 100644 index 0000000000..47fb54afda --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,99 @@ +--- +title: Come funziona il Web +slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Come funziona il Web spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.

+
+ +

Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.

+ +

Client e server

+ +

I computer connessi sul web sono chiamati client e server. Il seguente schema semplificato mostra come possono interagire tra loro:

+ +

I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client

+ + + +

Le restanti componenti del Web

+ +

La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.

+ +

Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.

+ +

+ +

Oltre al client e al server dobbiamo anche considerare:

+ + + +

Ma allora: cosa accade esattamente?

+ +

Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):

+ +
    +
  1. Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).
    2. +
  2. Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.
    3. +
  3. Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).
    4. +
  4. Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).
    5. +
+ +

Chiarimenti sul DNS

+ +

I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: 63.245.215.20.

+ +

Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.

+ +

I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo IP Checker.

+ +

Chiarimenti sui pacchetti

+ +

Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.

+ +

Vedi anche

+ + + +

Credit

+ +

Street photo: Street composing, by Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html b/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html deleted file mode 100644 index 933bd4245c..0000000000 --- a/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Pubblicare il tuo sito -slug: Learn/Getting_started_with_the_web/Pubbicare_sito -tags: - - Advanced - - Beginner - - CodingScripting - - FTP - - GitHub - - Google App Engine - - Learn - - Web - - 'l10n:priority' - - publishing - - web server -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
- -
-

Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.

-
- -

Quali opzioni ho?

- -

Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.

- -

Acquistare un hosting e un dominio

- -

Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:

- - - -

Molti siti professionali adottano questa soluzione.

- -

Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta How much does it cost: software per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:

- -

- -

Consigli su hosting e domini

- - - -

Usare una piattaforma online come GitHub o Google App Engine

- -

Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:

- - - -

A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.

- -

Usare un IDE online come CodePen

- -

Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).

- -

Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:

- - - -

- -

Pubblicare con GitHub

- -

Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:

- -
    -
  1. Registra un account GitHub e verifica il tuo indirizzo email.
    2. -
  2. Crea un repository per i tuoi file.
    3. -
  3. Su questa pagina, nella casella Repository name, inserisci username.github.io, dove username è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come mariorossi.github.io.
    - Inoltre, spunta la casella "Initialize this repository with a README" e fai clic su Create repository.
    4. -
  4. Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su Commit changes. -
    -

    Nota: Assicurati che la tua cartella contenga un file chiamato index.html.

    -
    -
    5. -
  5. -

    Apri username.github.io per vedere il tuo sito online. Per esempio, per il nome utente chrisdavidmills, vai a chrisdavidmills.github.io.

    - -
    -

    Nota: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.

    -
    -
    6. -
- -

Per approfondire consulta GitHub Pages Help.

- -

Approfondimenti

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -

In questo modulo

- - 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 new file mode 100644 index 0000000000..933bd4245c --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,128 @@ +--- +title: Pubblicare il tuo sito +slug: Learn/Getting_started_with_the_web/Pubbicare_sito +tags: + - Advanced + - Beginner + - CodingScripting + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - 'l10n:priority' + - publishing + - web server +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+ +
+

Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.

+
+ +

Quali opzioni ho?

+ +

Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.

+ +

Acquistare un hosting e un dominio

+ +

Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:

+ + + +

Molti siti professionali adottano questa soluzione.

+ +

Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta How much does it cost: software per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:

+ +

+ +

Consigli su hosting e domini

+ + + +

Usare una piattaforma online come GitHub o Google App Engine

+ +

Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:

+ + + +

A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.

+ +

Usare un IDE online come CodePen

+ +

Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).

+ +

Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:

+ + + +

+ +

Pubblicare con GitHub

+ +

Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:

+ +
    +
  1. Registra un account GitHub e verifica il tuo indirizzo email.
    2. +
  2. Crea un repository per i tuoi file.
    3. +
  3. Su questa pagina, nella casella Repository name, inserisci username.github.io, dove username è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come mariorossi.github.io.
    + Inoltre, spunta la casella "Initialize this repository with a README" e fai clic su Create repository.
    4. +
  4. Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su Commit changes. +
    +

    Nota: Assicurati che la tua cartella contenga un file chiamato index.html.

    +
    +
    5. +
  5. +

    Apri username.github.io per vedere il tuo sito online. Per esempio, per il nome utente chrisdavidmills, vai a chrisdavidmills.github.io.

    + +
    +

    Nota: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.

    +
    +
    6. +
+ +

Per approfondire consulta GitHub Pages Help.

+ +

Approfondimenti

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +

In questo modulo

+ + 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 new file mode 100644 index 0000000000..3d3bc69f60 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,117 @@ +--- +title: Che aspetto avrà il tuo sito Web? +slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web +tags: + - Basi + - Design + - Fonts + - Grafica + - Web + - imparare +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

Che aspetto avrà il tuo sito? spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" 

+
+ +

Prima di tutto: pianifica

+ +

Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.

+ +

Prima di iniziare dovrai rispondere a questi domande:

+ +
    +
  1. Di cosa tratterà il tuo sito Web? Ti piacciono i cani, New York, o Pacman?
    2. +
  2. Quali informazioni vorrai portare su quell'argomento? Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.
    3. +
  3. Che aspetto ha il tuo sito Web in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?
    4. +
+ +
+

Nota bene: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su Firefox OS Guidelines.

+
+ +

Fare uno schizzo del design

+ +

Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!

+ +

+ +
+

Nota bene: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.

+ +

I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.

+
+ +

Scegliere le tue risorse

+ +

A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.

+ +

Testo

+ +

Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.

+ +

Colori del tema

+ +

Per scegliere un colore, vai qui e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come #660066. Questo è chiamato codice esadecimale, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.

+ +

+ +

Immagini

+ +

Per scegliere un'immagine, vai su Google Immagini e cerca qualcosa che faccia al caso tuo.

+ +
    +
  1. Quando trovi l'immagine che desideri, premi sull'immagine.
    2. +
  2. Premi sul bottone Visualizza immagine.
    3. +
  3. Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli Salva immagine come...,  e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.
    4. +
+ +

+ +

+ +
+

Nota bene: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) Strumenti, poi su 2) Diritti di utilizzo e, infine, sulla scelta che più soddisfa le vostre necessità:

+ +

+
+ +

Font

+ +

Per scegliere un font:

+ +
    +
  1. Vai su Google Fonts e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.
    2. +
  2. Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.
    3. +
  3. Premi sul bottone "* Family Selected" nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).
    4. +
  4. Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.
    5. +
+ +

+ +

 

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

In questo modulo

+ + + +

 

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

- - diff --git a/files/it/learn/javascript/comefare/index.html b/files/it/learn/javascript/comefare/index.html deleted file mode 100644 index 275eb0cf8d..0000000000 --- a/files/it/learn/javascript/comefare/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Risolvere problematiche frequenti nel tuo codice JavaScript -slug: Learn/JavaScript/Comefare -tags: - - Principianti - - imparare -translation_of: Learn/JavaScript/Howto ---- -
R{{LearnSidebar}}
- -

I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.

- -

Errori comuni dei principianti

- -

Ortografia corretta

- -

Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.

- -

Alcune comuni funzioni built-in del browser che causano problemi sono: 

- - - - - - - - - - - - - - - - - - - - - - - - - - -
CorrettoSbagliato
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
- -

Posizione del punto e virgola

- -

Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :

- - - - - - - - - - - - -
CorrettoSbagliato
elem.style.color = 'red';elem.style.color = 'red;'
- -

Funzioni

- -

Ci sono alcune cose che possono andare storte con le funzioni.

- -

Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:

- -
function myFunction() {
-  alert('This is my function.');
-};
- -

Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:

- -
myFunction();
- -

Ambito (scope) della funzione

- -

Ricorda che le funzioni hanno il loro specifico ambito (scope) — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure restituire il valore (return) dalla funzione stessa.

- -

Eseguire codice posto dopo un istruzione return

- -

Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.

- -

Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).

- -

Notazione per gli oggetti opposto al normale assegnamento

- -

Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :

- -
const myNumber = 0;
- -

Con gli Oggetti occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:

- -
const myObject = {
-  name: 'Chris',
-  age: 38
-}
- -

Definizioni Base

- -
-
- -
- -
- -
-
- -

Casi base d'uso

- -
-
-

Generali

- - - -

Variabili

- - - -

Tipi di dati numerici

- - - -

Stringhe

- - -
- -
-

Arrays

- - - -

Debugging JavaScript

- - - -

For more information on JavaScript debugging, see Handling common JavaScript problems. Also, see Other common errors for a description of common errors.

- -

Making decisions in code

- - - -

Looping/iteration

- - -
-
- -

Intermediate use cases

- -
-
-

Functions

- - - -

Objects

- - - -

JSON

- - -
- -
-

Events

- - - -

Object-oriented JavaScript

- - - -

Web APIs

- - -
-
diff --git "a/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" "b/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" deleted file mode 100644 index 1fa4343de8..0000000000 --- "a/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Cosa è andato storto? Problemi con Javacript -slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto -translation_of: Learn/JavaScript/First_steps/What_went_wrong ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
- -

Quando abbiamo realizzato il gioco "Indovina il numero"  nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain the ability and confidence to start fixing simple problems in your own code.
- -

Types of error

- -

Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:

- - - -

Okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.

- -

An erroneous example

- -

To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of number-game-errors.html (see it running live here).

- -
    -
  1. To get started, open the local copy inside your favourite text editor, and your browser.
    2. -
  2. Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!
    3. -
- -
-

Note: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.

-
- -

At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.

- -

Fixing syntax errors

- -

Earlier on in the course we got you to type some simple JavaScript commands into the developer tools JavaScript console (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.

- -
    -
  1. Go to the tab that you've got number-game-errors.html open in, and open your JavaScript console. You should see an error message along the following lines:
    2. -
  2. This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got: -
      -
    • A red "x" to indicate that this is an error.
      • -
    • An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
      • -
    • A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.
      • -
    • The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.
      • -
    • The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
      • -
    -
    3. -
  3. If we look at line 86 in our code editor, we'll find this line: - 
    guessSubmit.addeventListener('click', checkGuess);
    -
    4. -
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. -
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. -
- -
-

Note: See our TypeError: "x" is not a function reference page for more details about this error.

-
- -

Syntax errors round two

- -
    -
  1. Save your page and refresh, and you should see the error has gone.
    2. -
  2. Now if you try to enter a guess and press the Submit guess button, you'll see ... another error!
    3. -
  3. This time the error being reported is "TypeError: lowOrHi is null", on line 78. -
    Note: Null is a special value that means "nothing", or "no value". So lowOrHi has been declared and initialised, but not with any meaningful value — it has no type or value.
    - -
    Note: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkGuess() { ... } block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the checkGuess() function was run by line 86.
    -
    4. -
  4. Have a look at line 78, and you'll see the following code: - 
    lowOrHi.textContent = 'Last guess was too high!';
    -
    5. -
  5. This line is trying to set the textContent property of the lowOrHi variable to a text string, but it's not working because lowOrHi does not contain what it's supposed to. Let's see why this is — try searching for other instances of lowOrHi in the code. The earliest instance you'll find in the JavaScript is on line 48: - 
    var lowOrHi = document.querySelector('lowOrHi');
    -
    6. -
  6. At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is null after this line has been run. Add the following code on line 49: - 
    console.log(lowOrHi);
    - -
    -

    Note: console.log() is a really useful debugging function that prints a value to the console. So it will print the value of lowOrHi to the console as soon as we have tried to set it in line 48.

    -
    -
    7. -
  7. Save and refesh, and you should now see the console.log() result in your console. Sure enough, lowOrHi's value is null at this point, so there is definitely a problem with line 48.
    8. -
  8. Let's think about what the problem could be. Line 48 is using a document.querySelector() method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question: - 
    <p class="lowOrHi"></p>
    -
    9. -
  9. So we need a class selector here, which begins with a dot (.), but the selector being passed into the querySelector() method in line 48 has no dot. This could be the problem! Try changing lowOrHi to .lowOrHi in line 48.
    10. -
  10. Try saving and refreshing again, and your console.log() statement should return the <p> element we want. Phew! Another error fixed! You can delete your console.log() line now, or keep it to reference later on — your choice.
    11. -
- -
-

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

-
- -

Syntax errors round three

- -
    -
  1. Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.
    2. -
  2. At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.
    3. -
  3. Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change addeventListener to .addEventListener. Do this now.
    4. -
- -

A logic error

- -

At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!

- -

There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.

- -
    -
  1. Search for the randomNumber variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44: - - 
    var randomNumber = Math.floor(Math.random()) + 1;
    - And the one that generates the random number before each subsequent game is around line 113:
    2. -
  2. - 
    randomNumber = Math.floor(Math.random()) + 1;
    -
    3. -
  3. To check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: - 
    console.log(randomNumber);
    -
    4. -
  4. Save and refresh, then play a few games — you'll see that randomNumber is equal to 1 at each point where it is logged to the console.
    5. -
- -

Working through the logic

- -

To fix this, let's consider how this line is working. First, we invoke Math.random(), which generates a random decimal number between 0 and 1, e.g. 0.5675493843.

- -
Math.random()
- -

Next, we pass the result of invoking Math.random() through Math.floor(), which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:

- -
Math.floor(Math.random()) + 1
- -

Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1.  We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:

- -
Math.floor(Math.random()*100);
- -

Hence us wanting to add 1, to give us a random number between 1 and 100:

- -
Math.floor(Math.random()*100) + 1;
- -

Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!

- -

Other common errors

- -

There are other common errors you'll come across in your code. This section highlights most of them.

- -

SyntaxError: missing ; before statement

- -

This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the checkGuess() function:

- -
var userGuess = Number(guessField.value);
- -

to

- -
var userGuess === Number(guessField.value);
- -

It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result.

- -
-

Note: See our SyntaxError: missing ; before statement reference page for more details about this error.

-
- -

The program always says you've won, regardless of the guess you enter

- -

This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside checkGuess():

- -
if (userGuess === randomNumber) {
- -

to

- -
if (userGuess = randomNumber) {
- -

the test would always return true, causing the program to report that the game has been won. Be careful!

- -

SyntaxError: missing ) after argument list

- -

This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.

- -
-

Note: See our SyntaxError: missing ) after argument list reference page for more details about this error.

-
- -

SyntaxError: missing : after property id

- -

This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing

- -
function checkGuess() {
- -

to

- -
function checkGuess( {
- -

This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!

- -

SyntaxError: missing } after function body

- -

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

- -

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

- -

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

- -

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

- -
-

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

-
- -

Summary

- -

So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.

- -

See also

- -
- -
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/it/learn/javascript/first_steps/variabili/index.html b/files/it/learn/javascript/first_steps/variabili/index.html deleted file mode 100644 index 38da82e607..0000000000 --- a/files/it/learn/javascript/first_steps/variabili/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Memorizzazione delle informazioni necessarie - Variabili -slug: Learn/JavaScript/First_steps/Variabili -translation_of: Learn/JavaScript/First_steps/Variables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
- -

Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.

- - - - - - - - - - - - -
Prerequisiti:Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript
Obiettivo:Acquisire familiarità con le basi delle variabili JavaScript.
- -

Strumenti di cui hai bisogno

- -

In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere Quali sono gli strumenti di sviluppo del browser per ulteriori informazioni su come accedere a questo strumento).

- -

Cosa è una variabile?

- -

Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:

- -
<button>Press me</button>
- -
const button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('What is your name?');
-  alert('Hello ' + name + ', nice to see you!');
-}
- -

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

- -

In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.

- -

Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:

- -
let name = prompt('What is your name?');
-
-if (name === 'Adam') {
-  alert('Hello Adam, nice to see you!');
-} else if (name === 'Alan') {
-  alert('Hello Alan, nice to see you!');
-} else if (name === 'Bella') {
-  alert('Hello Bella, nice to see you!');
-} else if (name === 'Bianca') {
-  alert('Hello Bianca, nice to see you!');
-} else if (name === 'Chris') {
-  alert('Hello Chris, nice to see you!');
-}
-
-// ... and so on ...
- -

Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.

- -

Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.

- -

Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.

- -
-

Nota:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.

-
- -

- -

Dichiarare una variabile

- -

Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:

- -
let myName;
-let myAge;
- -

Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.

- -
-

Nota: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.

-
- -

Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.

- -
myName;
-myAge;
- -

Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore undefined. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in

- -
scoobyDoo;
- -
-

Nota: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.

-
- -

Inizializzare una Variabile

- -

Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: 

- -
myName = 'Chris';
-myAge = 37;
- -

Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:

- -
myName;
-myAge;
- -

Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: 

- -
let myDog = 'Rover';
- -

Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. 

- -

Differenza tra var e let

- -

A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere  var e let?".

- -

Le ragioni sono in qualche modo storiche.  Ai tempi della creazione di JavaScript, c'era solo var. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così,  let è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da var, risolvendo i suoi problemi nel processo.

- -

Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento let).

- -

Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con var dopo averla inizializzata funzionerà comunque. Per esempio:

- -
myName = 'Chris';
-
-function logName() {
-  console.log(myName);
-}
-
-logName();
-
-var myName;
- -
-

Nota:  Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. 

-
- -

Questo lfunziona a causa di hoisting — leggi var hoisting per maggiori dettagli sull'argomento. 

- -

Hoisting non funziona con  let. Se cambiamo var a let  nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.

- -

In secondo luogo, quando usi  var, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con  let non puoi. Quanto segue funzionerebbe: 

- -
var myName = 'Chris';
-var myName = 'Bob';
- -

Ma il seguente darebbe un errore sulla seconda linea: 

- -
let myName = 'Chris';
-let myName = 'Bob';
- -

Dovresti invece fare questo: 

- -
let myName = 'Chris';
-myName = 'Bob';
- -

Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.

- -

Per queste ragioni e altre, noi raccomandiamo di usare let il più possibile nel tuo codice, piuttosto che var. Non ci sono motivi per usare var, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice.  ( let non è supportato fino fino alla versione 11, il moderno  Windows Edge browser supporta bene let).

- -
-

Nota:  Attualmente stiamo aggiornando il corso per usare più  let piuttosto che var. Abbi pazienza con noi!

-
- -

Aggiornare una variabile

- -

Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: 

- -
myName = 'Bob';
-myAge = 40;
- -

Regole di denominazione delle variabili

- -

Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).

- - - -
-

Nota: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a Lexical grammar — keywords.

-
- -

Esempi di nomi corretti: 

- -
age
-myAge
-init
-initialColor
-finalOutputValue
-audio1
-audio2
- -

Esempi di nomi errati: 

- -
1
-a
-_12
-myage
-MYAGE
-var
-Document
-skjfndskjfnbdskjfb
-thisisareallylongstupidvariablenameman
- -

Esempi di nomi soggetti a errori: 

- -
var
-Document
-
- -

Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. 

- -

Tipi di Variabili

- -

Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.

- -

Finora abbiamo esaminato i primi due, ma che ne sono altri. 

- -

Numeri

- -

Puoi memorizzare numeri nelle variabili, numeri interi come 30  o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:

- -
let myAge = 17;
- -

Stringhe

- -

Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. 

- -
let dolphinGoodbye = 'So long and thanks for all the fish';
- -

Booleani

- -

I booleani sono dei valori vero/falso — possono avere due valori true o false. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:

- -
let iAmAlive = true;
- -

Considerando che in realtà sarebbe usato più così:

- -
let test = 6 < 3;
- -

Questo sta usando l'operatore "minore di" (<) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce false, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.

- -

Arrays

- -

Un  array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:

- -
let myNameArray = ['Chris', 'Bob', 'Jim'];
-let myNumberArray = [10, 15, 40];
- -

Una volta che gli  arrays sono definiti,  è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:

- -
myNameArray[0]; // should return 'Chris'
-myNumberArray[2]; // should return 40
- -

Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.

- -

Puoi imparare molto sugli arrays in un futuro articolo.

- -

Oggetti

- -

In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli
- e altro ancora.

- -

Prova a inserire il seguente codice nella tua console:

- -
let dog = { name : 'Spot', breed : 'Dalmatian' };
- -

Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:

- -
dog.name
- -

Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un  modulo futuro.

- -

Tipizzazione dinamica

- -

JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che,  a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).

- -

Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:

- -
let myString = 'Hello';
- -

Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:

- -
let myNumber = '500'; // oops, questa è ancora una stringa
-typeof myNumber;
-myNumber = 500; // molto meglio - adesso questo è un numero
-typeof myNumber;
- -

Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato typeof- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire string, poiché a quel punto la variabile myNumber contiene una stringa, '500'.
- Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.

- -

Costanti in JavaScript

- -

Molti linguaggi di programmazione hanno il concetto di costante - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).

- -

All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave const, che ci consente di memorizzare valori che non possono mai essere modificati:

- -
const daysInWeek = 7;
-const hoursInDay = 24;
- -

const lavora esattamente come let, eccetto che non puoi dare aconst un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:

- -
const daysInWeek = 7;
-daysInWeek = 8;
- -

Sommario 

- -

Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/it/learn/javascript/first_steps/variables/index.html b/files/it/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..38da82e607 --- /dev/null +++ b/files/it/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,337 @@ +--- +title: Memorizzazione delle informazioni necessarie - Variabili +slug: Learn/JavaScript/First_steps/Variabili +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+ +

Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.

+ + + + + + + + + + + + +
Prerequisiti:Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript
Obiettivo:Acquisire familiarità con le basi delle variabili JavaScript.
+ +

Strumenti di cui hai bisogno

+ +

In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere Quali sono gli strumenti di sviluppo del browser per ulteriori informazioni su come accedere a questo strumento).

+ +

Cosa è una variabile?

+ +

Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:

+ +
<button>Press me</button>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}
+ +

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.

+ +

Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:

+ +
let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...
+ +

Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.

+ +

Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.

+ +

Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.

+ +
+

Nota:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.

+
+ +

+ +

Dichiarare una variabile

+ +

Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:

+ +
let myName;
+let myAge;
+ +

Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.

+ +
+

Nota: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.

+
+ +

Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.

+ +
myName;
+myAge;
+ +

Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore undefined. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in

+ +
scoobyDoo;
+ +
+

Nota: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.

+
+ +

Inizializzare una Variabile

+ +

Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: 

+ +
myName = 'Chris';
+myAge = 37;
+ +

Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:

+ +
myName;
+myAge;
+ +

Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: 

+ +
let myDog = 'Rover';
+ +

Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. 

+ +

Differenza tra var e let

+ +

A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere  var e let?".

+ +

Le ragioni sono in qualche modo storiche.  Ai tempi della creazione di JavaScript, c'era solo var. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così,  let è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da var, risolvendo i suoi problemi nel processo.

+ +

Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento let).

+ +

Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con var dopo averla inizializzata funzionerà comunque. Per esempio:

+ +
myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;
+ +
+

Nota:  Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. 

+
+ +

Questo lfunziona a causa di hoisting — leggi var hoisting per maggiori dettagli sull'argomento. 

+ +

Hoisting non funziona con  let. Se cambiamo var a let  nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.

+ +

In secondo luogo, quando usi  var, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con  let non puoi. Quanto segue funzionerebbe: 

+ +
var myName = 'Chris';
+var myName = 'Bob';
+ +

Ma il seguente darebbe un errore sulla seconda linea: 

+ +
let myName = 'Chris';
+let myName = 'Bob';
+ +

Dovresti invece fare questo: 

+ +
let myName = 'Chris';
+myName = 'Bob';
+ +

Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.

+ +

Per queste ragioni e altre, noi raccomandiamo di usare let il più possibile nel tuo codice, piuttosto che var. Non ci sono motivi per usare var, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice.  ( let non è supportato fino fino alla versione 11, il moderno  Windows Edge browser supporta bene let).

+ +
+

Nota:  Attualmente stiamo aggiornando il corso per usare più  let piuttosto che var. Abbi pazienza con noi!

+
+ +

Aggiornare una variabile

+ +

Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: 

+ +
myName = 'Bob';
+myAge = 40;
+ +

Regole di denominazione delle variabili

+ +

Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).

+ + + +
+

Nota: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a Lexical grammar — keywords.

+
+ +

Esempi di nomi corretti: 

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Esempi di nomi errati: 

+ +
1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Esempi di nomi soggetti a errori: 

+ +
var
+Document
+
+ +

Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. 

+ +

Tipi di Variabili

+ +

Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.

+ +

Finora abbiamo esaminato i primi due, ma che ne sono altri. 

+ +

Numeri

+ +

Puoi memorizzare numeri nelle variabili, numeri interi come 30  o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:

+ +
let myAge = 17;
+ +

Stringhe

+ +

Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. 

+ +
let dolphinGoodbye = 'So long and thanks for all the fish';
+ +

Booleani

+ +

I booleani sono dei valori vero/falso — possono avere due valori true o false. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:

+ +
let iAmAlive = true;
+ +

Considerando che in realtà sarebbe usato più così:

+ +
let test = 6 < 3;
+ +

Questo sta usando l'operatore "minore di" (<) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce false, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.

+ +

Arrays

+ +

Un  array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:

+ +
let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];
+ +

Una volta che gli  arrays sono definiti,  è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:

+ +
myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40
+ +

Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.

+ +

Puoi imparare molto sugli arrays in un futuro articolo.

+ +

Oggetti

+ +

In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli
+ e altro ancora.

+ +

Prova a inserire il seguente codice nella tua console:

+ +
let dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:

+ +
dog.name
+ +

Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un  modulo futuro.

+ +

Tipizzazione dinamica

+ +

JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che,  a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).

+ +

Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:

+ +
let myString = 'Hello';
+ +

Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:

+ +
let myNumber = '500'; // oops, questa è ancora una stringa
+typeof myNumber;
+myNumber = 500; // molto meglio - adesso questo è un numero
+typeof myNumber;
+ +

Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato typeof- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire string, poiché a quel punto la variabile myNumber contiene una stringa, '500'.
+ Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.

+ +

Costanti in JavaScript

+ +

Molti linguaggi di programmazione hanno il concetto di costante - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).

+ +

All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave const, che ci consente di memorizzare valori che non possono mai essere modificati:

+ +
const daysInWeek = 7;
+const hoursInDay = 24;
+ +

const lavora esattamente come let, eccetto che non puoi dare aconst un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:

+ +
const daysInWeek = 7;
+daysInWeek = 8;
+ +

Sommario 

+ +

Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + 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 new file mode 100644 index 0000000000..1fa4343de8 --- /dev/null +++ b/files/it/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,253 @@ +--- +title: Cosa è andato storto? Problemi con Javacript +slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
+ +

Quando abbiamo realizzato il gioco "Indovina il numero"  nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain the ability and confidence to start fixing simple problems in your own code.
+ +

Types of error

+ +

Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:

+ + + +

Okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.

+ +

An erroneous example

+ +

To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of number-game-errors.html (see it running live here).

+ +
    +
  1. To get started, open the local copy inside your favourite text editor, and your browser.
    2. +
  2. Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!
    3. +
+ +
+

Note: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.

+
+ +

At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.

+ +

Fixing syntax errors

+ +

Earlier on in the course we got you to type some simple JavaScript commands into the developer tools JavaScript console (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.

+ +
    +
  1. Go to the tab that you've got number-game-errors.html open in, and open your JavaScript console. You should see an error message along the following lines:
    2. +
  2. This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got: +
      +
    • A red "x" to indicate that this is an error.
      • +
    • An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
      • +
    • A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.
      • +
    • The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.
      • +
    • The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
      • +
    +
    3. +
  3. If we look at line 86 in our code editor, we'll find this line: + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. +
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. +
+ +
+

Note: See our TypeError: "x" is not a function reference page for more details about this error.

+
+ +

Syntax errors round two

+ +
    +
  1. Save your page and refresh, and you should see the error has gone.
    2. +
  2. Now if you try to enter a guess and press the Submit guess button, you'll see ... another error!
    3. +
  3. This time the error being reported is "TypeError: lowOrHi is null", on line 78. +
    Note: Null is a special value that means "nothing", or "no value". So lowOrHi has been declared and initialised, but not with any meaningful value — it has no type or value.
    + +
    Note: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkGuess() { ... } block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the checkGuess() function was run by line 86.
    +
    4. +
  4. Have a look at line 78, and you'll see the following code: + 
    lowOrHi.textContent = 'Last guess was too high!';
    +
    5. +
  5. This line is trying to set the textContent property of the lowOrHi variable to a text string, but it's not working because lowOrHi does not contain what it's supposed to. Let's see why this is — try searching for other instances of lowOrHi in the code. The earliest instance you'll find in the JavaScript is on line 48: + 
    var lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is null after this line has been run. Add the following code on line 49: + 
    console.log(lowOrHi);
    + +
    +

    Note: console.log() is a really useful debugging function that prints a value to the console. So it will print the value of lowOrHi to the console as soon as we have tried to set it in line 48.

    +
    +
    7. +
  7. Save and refesh, and you should now see the console.log() result in your console. Sure enough, lowOrHi's value is null at this point, so there is definitely a problem with line 48.
    8. +
  8. Let's think about what the problem could be. Line 48 is using a document.querySelector() method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question: + 
    <p class="lowOrHi"></p>
    +
    9. +
  9. So we need a class selector here, which begins with a dot (.), but the selector being passed into the querySelector() method in line 48 has no dot. This could be the problem! Try changing lowOrHi to .lowOrHi in line 48.
    10. +
  10. Try saving and refreshing again, and your console.log() statement should return the <p> element we want. Phew! Another error fixed! You can delete your console.log() line now, or keep it to reference later on — your choice.
    11. +
+ +
+

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

+
+ +

Syntax errors round three

+ +
    +
  1. Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.
    2. +
  2. At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.
    3. +
  3. Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change addeventListener to .addEventListener. Do this now.
    4. +
+ +

A logic error

+ +

At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!

+ +

There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.

+ +
    +
  1. Search for the randomNumber variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44: + + 
    var randomNumber = Math.floor(Math.random()) + 1;
    + And the one that generates the random number before each subsequent game is around line 113:
    2. +
  2. + 
    randomNumber = Math.floor(Math.random()) + 1;
    +
    3. +
  3. To check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: + 
    console.log(randomNumber);
    +
    4. +
  4. Save and refresh, then play a few games — you'll see that randomNumber is equal to 1 at each point where it is logged to the console.
    5. +
+ +

Working through the logic

+ +

To fix this, let's consider how this line is working. First, we invoke Math.random(), which generates a random decimal number between 0 and 1, e.g. 0.5675493843.

+ +
Math.random()
+ +

Next, we pass the result of invoking Math.random() through Math.floor(), which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:

+ +
Math.floor(Math.random()) + 1
+ +

Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1.  We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:

+ +
Math.floor(Math.random()*100);
+ +

Hence us wanting to add 1, to give us a random number between 1 and 100:

+ +
Math.floor(Math.random()*100) + 1;
+ +

Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!

+ +

Other common errors

+ +

There are other common errors you'll come across in your code. This section highlights most of them.

+ +

SyntaxError: missing ; before statement

+ +

This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the checkGuess() function:

+ +
var userGuess = Number(guessField.value);
+ +

to

+ +
var userGuess === Number(guessField.value);
+ +

It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result.

+ +
+

Note: See our SyntaxError: missing ; before statement reference page for more details about this error.

+
+ +

The program always says you've won, regardless of the guess you enter

+ +

This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside checkGuess():

+ +
if (userGuess === randomNumber) {
+ +

to

+ +
if (userGuess = randomNumber) {
+ +

the test would always return true, causing the program to report that the game has been won. Be careful!

+ +

SyntaxError: missing ) after argument list

+ +

This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.

+ +
+

Note: See our SyntaxError: missing ) after argument list reference page for more details about this error.

+
+ +

SyntaxError: missing : after property id

+ +

This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing

+ +
function checkGuess() {
+ +

to

+ +
function checkGuess( {
+ +

This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!

+ +

SyntaxError: missing } after function body

+ +

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

+ +

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

+ +

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

+ +

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

+ +
+

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

+
+ +

Summary

+ +

So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.

+ +

See also

+ +
+ +
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/howto/index.html b/files/it/learn/javascript/howto/index.html new file mode 100644 index 0000000000..275eb0cf8d --- /dev/null +++ b/files/it/learn/javascript/howto/index.html @@ -0,0 +1,291 @@ +--- +title: Risolvere problematiche frequenti nel tuo codice JavaScript +slug: Learn/JavaScript/Comefare +tags: + - Principianti + - imparare +translation_of: Learn/JavaScript/Howto +--- +
R{{LearnSidebar}}
+ +

I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.

+ +

Errori comuni dei principianti

+ +

Ortografia corretta

+ +

Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.

+ +

Alcune comuni funzioni built-in del browser che causano problemi sono: 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CorrettoSbagliato
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
+ +

Posizione del punto e virgola

+ +

Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :

+ + + + + + + + + + + + +
CorrettoSbagliato
elem.style.color = 'red';elem.style.color = 'red;'
+ +

Funzioni

+ +

Ci sono alcune cose che possono andare storte con le funzioni.

+ +

Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:

+ +
function myFunction() {
+  alert('This is my function.');
+};
+ +

Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:

+ +
myFunction();
+ +

Ambito (scope) della funzione

+ +

Ricorda che le funzioni hanno il loro specifico ambito (scope) — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure restituire il valore (return) dalla funzione stessa.

+ +

Eseguire codice posto dopo un istruzione return

+ +

Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.

+ +

Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).

+ +

Notazione per gli oggetti opposto al normale assegnamento

+ +

Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :

+ +
const myNumber = 0;
+ +

Con gli Oggetti occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:

+ +
const myObject = {
+  name: 'Chris',
+  age: 38
+}
+ +

Definizioni Base

+ +
+
+ +
+ +
+ +
+
+ +

Casi base d'uso

+ +
+
+

Generali

+ + + +

Variabili

+ + + +

Tipi di dati numerici

+ + + +

Stringhe

+ + +
+ +
+

Arrays

+ + + +

Debugging JavaScript

+ + + +

For more information on JavaScript debugging, see Handling common JavaScript problems. Also, see Other common errors for a description of common errors.

+ +

Making decisions in code

+ + + +

Looping/iteration

+ + +
+
+ +

Intermediate use cases

+ +
+
+

Functions

+ + + +

Objects

+ + + +

JSON

+ + +
+ +
+

Events

+ + + +

Object-oriented JavaScript

+ + + +

Web APIs

+ + +
+
diff --git a/files/it/learn/javascript/objects/basics/index.html b/files/it/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..539df5c2e0 --- /dev/null +++ b/files/it/learn/javascript/objects/basics/index.html @@ -0,0 +1,242 @@ +--- +title: Basi degli oggetti JavaScript +slug: Learn/JavaScript/Oggetti/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi Primi passi e Costruire blocchi).
Obiettivo:Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.
+ +

Basi degli oggetti

+ +

Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.

+ +

Per incomiciare, facciamo una copia locale del nostro file oojs.html. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.

+ +

Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:

+ +
var person = {};
+ +

Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:

+ +
[object Object]
+ +

Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:

+ +
var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+
+ +

Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:

+ +
person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!

+ +
+

Nota: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi oojs-finished.html (e anche la versione funzionante). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.

+
+ +

Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, ['Bob', 'Smith'] e 32). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:

+ +
var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+}
+ +

Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà (properties) del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi (methods) dell'oggetto.

+ +

Un oggetto come questo viene considerato un oggetto letterale — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.

+ +

È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.

+ +

Notazione puntata

+ +

Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da namespace — e deve essere insirito prima per accedere a qualsiasi cosa incapsulata nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — 
+ questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Namespaces nidificati

+ +

È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da

+ +
name: ['Bob', 'Smith'],
+ +

a

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

In questo modo abbiamo effettivamente creato un  sotto-namespace. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:

+ +
person.name.first
+person.name.last
+ +

Importante: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di

+ +
name[0]
+name[1]
+ +

con

+ +
name.first
+name.last
+ +

Altrimenti i tuoi metodi non funzioneranno più.

+ +

Notazione con parentesi quadre

+ +

C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:

+ +
person.age
+person.name.first
+ +

Puoi usare

+ +
person['age']
+person['name']['first']
+ +

Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati array associativi — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.

+ +

Assegnare i membri degli oggetti

+ +

Fino a qui abbiamo solo recuperato (get) valori dei menbri degli oggetti — si possono anche assegnare (set) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:

+ +
person.age
+person['name']['last']
+ +

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

Ora possiamo provare i nostri nuovi membri:

+ +
person['eyes']
+person.farewell()
+ +

Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:

+ +
var myDataName = nameInput.value;
+var myDataValue = nameValue.value;
+ +

e possiamo aggiungere questi nomi e valori nel nostro oggetto person in questo modo:

+ +
person[myDataName] = myDataValue;
+ +

Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto person:

+ +
var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:

+ +
person.height
+ +

Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.

+ +

Che cos'è "this"?

+ +

Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

Forse ti sei chiesto che cos'è "this". La parola chiave this fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso this è equivalente a person. Quindi perché non scrivere invece semplicemente person? Come vedrai nell'articolo Object-oriented JavaScript per principianti quando incominceremo a creare costruttori ecc., this è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto person possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).

+ +

Proviamo ad illustrare ciò che intendiamo con un paio di oggetti person semplificati:

+ +
var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

In questo caso, person1.greeting() visualizza "Hi! I'm Chris."; e person2.greeting() "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, this fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.

+ +

Finora hai usato oggetti tutto il tempo

+ +

Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.

+ +

Quindi quando ha usato un metodo di stringa come:

+ +
myString.split(',');
+ +

Non hai fatto altro che usare un metodo disponibile in una istanza della classe String. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di String, che ha ha disposizione alcuni metodi/proprietà comuni.

+ +

Quando hai acceduto al modello di oggetto documento usando righe come queste:

+ +
var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');
+ +

Tu hai usato i metodi disponibili in una istanza della classe Document. Per ogni pagina web caricara viene crata una istanza di Document chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.

+ +

Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — Array, Math, ecc.

+ +

Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le Notifications API — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:

+ +
var myNotification = new Notification('Hello!');
+ +

Spiegheremo i costruttori in un prossimo articolo.

+ +
+

Nota: È utile pensare al modo in cui gli oggetti comunicano come ad un passaggio di messaggi — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.

+
+ +

Sommario

+ +

Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto person in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.

+ +

Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/it/learn/javascript/objects/index.html b/files/it/learn/javascript/objects/index.html new file mode 100644 index 0000000000..5fa859db74 --- /dev/null +++ b/files/it/learn/javascript/objects/index.html @@ -0,0 +1,51 @@ +--- +title: Introduzione agli oggetti in JavaScript +slug: Learn/JavaScript/Oggetti +tags: + - Articolo + - Guida + - JavaScript + - Oggetti + - Principiante + - Tutorial + - Verifica + - imparare +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura object-oriented (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.

+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli Introduzione a HTML e Introduzione a CSS prima di cimentarvi con JavaScript.

+ +

Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli Primi passi con JavaScript e JavaScript building blocks.

+ +
+

Nota: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio JSBin o Thimble.

+
+ +

Guide

+ +
+
Fondamenti sugli oggetti
+
Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.
+
Object-oriented JavaScript per principianti
+
Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (object-oriented JavaScript, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (object-oriented programming, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .
+
Prototipi di oggetto (object prototypes)
+
I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..
+
Ereditarietà in JavaScript
+
Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.
+
Lavorare con i dati JSON
+
JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.
+
Pratica della costruzione di oggetti
+
Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.
+
+ +

Verifiche

+ +
+
Aggiungere caratteristiche alla demo "bouncing balls"
+
In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.
+
diff --git a/files/it/learn/javascript/objects/json/index.html b/files/it/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..71cf166e15 --- /dev/null +++ b/files/it/learn/javascript/objects/json/index.html @@ -0,0 +1,345 @@ +--- +title: Lavorare con JSON +slug: Learn/JavaScript/Oggetti/JSON +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi Primi passi e Costruzione blocchi) e con i concetti base degli oggetti JS (vedi Introduzione agli oggetti).
Obiettivi:Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.
+ +

No, davvero, cos'è JSON?

+ +

{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da Douglas Crockford. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.

+ +

JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale JSON di JavaScript.

+ +
+

Nota: Convertire una stringa in un oggetto nativo è chiamata deserializzazione, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata serializzazione.

+
+ +

Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione .json, e un {{glossary("tipo MIME")}} application/json.

+ +

Struutura di un JSON 

+ +

Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:

+ +
{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}
+ +

Se carichiamo questo oggetto in un programma, processato in una variabile chiamata superHeroes per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo Fondamentali degli oggetti JavaScript. Per esempio:

+ +
superHeroes.homeTown
+superHeroes['active']
+ +

Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. Per primo abbiamo il nome della variabile — superHeroes.
    2. +
  2. All'interno della variabile vogliamo accedere alla proprietà members, così utilizziamo ["members"].
    3. +
  3. members contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo [1].
    4. +
  4. all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà powers e per ciò usiamo ["powers"].
    5. +
  5. La proprietà powers contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi [2].
    6. +
+ +
+

Note: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio JSONTest.html (vedi il codice sorgente). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.

+
+ +

Arrays as JSON

+ +

Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:

+ +
[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]
+ +

The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example [0]["powers"][0].

+ +

Other notes

+ + + +

Active learning: Working through a JSON example

+ +

So, let's work through an example to show how we could make use of some JSON data on a website.

+ +

Getting started

+ +

To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:

+ +
const header = document.querySelector('header');
+const section = document.querySelector('section');
+ +

We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:

+ +

+ +

Obtaining the JSON

+ +

To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called XHR). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.

+ +
    +
  1. To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code: + 
    let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. To create a request, we need to create a new request object instance from the XMLHttpRequest constructor, using the new keyword. Add the following below your last line: + 
    let request = new XMLHttpRequest();
    +
    3. +
  3. Now we need to open the request using the open() method. Add the following line: + 
    request.open('GET', requestURL);
    + +

    This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:

    + +
      +
    • The HTTP method to use when making the network request. In this case GET is fine, as we are just retrieving some simple data.
      • +
    • The URL to make the request to — this is the URL of the JSON file that we stored earlier.
      • +
    +
    4. +
  4. Next, add the following two lines — here we are setting the responseType to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the send() method: + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code: + 
    request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

Here we are storing the response to our request (available in the response property) in a variable called superHeroes; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the <header> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <section>.

+ +

We have wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.

+ +

Populating the header

+ +

Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:

+ +
function populateHeader(jsonObj) {
+  const myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  const myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

We named the parameter jsonObj, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the homeTown and formed properties of the object.

+ +

Creating the hero information cards

+ +

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

+ +
function showHeroes(jsonObj) {
+  const heroes = jsonObj['members'];
+
+  for (let i = 0; i < heroes.length; i++) {
+    const myArticle = document.createElement('article');
+    const myH2 = document.createElement('h2');
+    const myPara1 = document.createElement('p');
+    const myPara2 = document.createElement('p');
+    const myPara3 = document.createElement('p');
+    const myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    const superPowers = heroes[i].powers;
+    for (let j = 0; j < superPowers.length; j++) {
+      const listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}
+ +

To start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.

+ +

Next, we use a for loop to loop through each object in the array. For each one, we:

+ +
    +
  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
    2. +
  2. Set the <h2> to contain the current hero's name.
    3. +
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
    4. +
  4. Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.
    5. +
  5. Use another for loop to loop through the current hero's superpowers — for each one we create an <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
    6. +
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.
    7. +
+ +
+

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

+
+ +
+

Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

+
+ +

Converting between objects and text

+ +

The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:

+ +
request.responseType = 'json';
+ +

But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

+ + + +

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used parse() to convert it to an actual JavaScript object. The key snippet of code is here:

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  const superHeroesText = request.response; // get the string from the response
+  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

+ +
let myJSON = { "name": "Chris", "age": "38" };
+myJSON
+let myString = JSON.stringify(myJSON);
+myString
+ +

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON.

+ +

Summary

+ +

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/oggetti/basics/index.html b/files/it/learn/javascript/oggetti/basics/index.html deleted file mode 100644 index 539df5c2e0..0000000000 --- a/files/it/learn/javascript/oggetti/basics/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Basi degli oggetti JavaScript -slug: Learn/JavaScript/Oggetti/Basics -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi Primi passi e Costruire blocchi).
Obiettivo:Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.
- -

Basi degli oggetti

- -

Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.

- -

Per incomiciare, facciamo una copia locale del nostro file oojs.html. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.

- -

Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:

- -
var person = {};
- -

Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:

- -
[object Object]
- -

Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:

- -
var person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:

- -
person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!

- -
-

Nota: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi oojs-finished.html (e anche la versione funzionante). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.

-
- -

Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, ['Bob', 'Smith'] e 32). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:

- -
var objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-}
- -

Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà (properties) del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi (methods) dell'oggetto.

- -

Un oggetto come questo viene considerato un oggetto letterale — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.

- -

È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.

- -

Notazione puntata

- -

Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da namespace — e deve essere insirito prima per accedere a qualsiasi cosa incapsulata nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — 
- questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:

- -
person.age
-person.interests[1]
-person.bio()
- -

Namespaces nidificati

- -

È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da

- -
name: ['Bob', 'Smith'],
- -

a

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

In questo modo abbiamo effettivamente creato un  sotto-namespace. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:

- -
person.name.first
-person.name.last
- -

Importante: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di

- -
name[0]
-name[1]
- -

con

- -
name.first
-name.last
- -

Altrimenti i tuoi metodi non funzioneranno più.

- -

Notazione con parentesi quadre

- -

C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:

- -
person.age
-person.name.first
- -

Puoi usare

- -
person['age']
-person['name']['first']
- -

Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati array associativi — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.

- -

Assegnare i membri degli oggetti

- -

Fino a qui abbiamo solo recuperato (get) valori dei menbri degli oggetti — si possono anche assegnare (set) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:

- -
person.age
-person['name']['last']
- -

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

Ora possiamo provare i nostri nuovi membri:

- -
person['eyes']
-person.farewell()
- -

Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:

- -
var myDataName = nameInput.value;
-var myDataValue = nameValue.value;
- -

e possiamo aggiungere questi nomi e valori nel nostro oggetto person in questo modo:

- -
person[myDataName] = myDataValue;
- -

Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto person:

- -
var myDataName = 'height';
-var myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:

- -
person.height
- -

Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.

- -

Che cos'è "this"?

- -

Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

Forse ti sei chiesto che cos'è "this". La parola chiave this fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso this è equivalente a person. Quindi perché non scrivere invece semplicemente person? Come vedrai nell'articolo Object-oriented JavaScript per principianti quando incominceremo a creare costruttori ecc., this è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto person possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).

- -

Proviamo ad illustrare ciò che intendiamo con un paio di oggetti person semplificati:

- -
var person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-var person2 = {
-  name: 'Brian',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

In questo caso, person1.greeting() visualizza "Hi! I'm Chris."; e person2.greeting() "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, this fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.

- -

Finora hai usato oggetti tutto il tempo

- -

Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.

- -

Quindi quando ha usato un metodo di stringa come:

- -
myString.split(',');
- -

Non hai fatto altro che usare un metodo disponibile in una istanza della classe String. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di String, che ha ha disposizione alcuni metodi/proprietà comuni.

- -

Quando hai acceduto al modello di oggetto documento usando righe come queste:

- -
var myDiv = document.createElement('div');
-var myVideo = document.querySelector('video');
- -

Tu hai usato i metodi disponibili in una istanza della classe Document. Per ogni pagina web caricara viene crata una istanza di Document chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.

- -

Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — Array, Math, ecc.

- -

Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le Notifications API — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:

- -
var myNotification = new Notification('Hello!');
- -

Spiegheremo i costruttori in un prossimo articolo.

- -
-

Nota: È utile pensare al modo in cui gli oggetti comunicano come ad un passaggio di messaggi — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.

-
- -

Sommario

- -

Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto person in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.

- -

Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/it/learn/javascript/oggetti/index.html b/files/it/learn/javascript/oggetti/index.html deleted file mode 100644 index 5fa859db74..0000000000 --- a/files/it/learn/javascript/oggetti/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Introduzione agli oggetti in JavaScript -slug: Learn/JavaScript/Oggetti -tags: - - Articolo - - Guida - - JavaScript - - Oggetti - - Principiante - - Tutorial - - Verifica - - imparare -translation_of: Learn/JavaScript/Objects ---- -
{{LearnSidebar}}
- -

In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura object-oriented (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.

- -

Prerequisiti

- -

Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli Introduzione a HTML e Introduzione a CSS prima di cimentarvi con JavaScript.

- -

Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli Primi passi con JavaScript e JavaScript building blocks.

- -
-

Nota: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio JSBin o Thimble.

-
- -

Guide

- -
-
Fondamenti sugli oggetti
-
Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.
-
Object-oriented JavaScript per principianti
-
Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (object-oriented JavaScript, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (object-oriented programming, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .
-
Prototipi di oggetto (object prototypes)
-
I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..
-
Ereditarietà in JavaScript
-
Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.
-
Lavorare con i dati JSON
-
JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.
-
Pratica della costruzione di oggetti
-
Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.
-
- -

Verifiche

- -
-
Aggiungere caratteristiche alla demo "bouncing balls"
-
In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.
-
diff --git a/files/it/learn/javascript/oggetti/json/index.html b/files/it/learn/javascript/oggetti/json/index.html deleted file mode 100644 index 71cf166e15..0000000000 --- a/files/it/learn/javascript/oggetti/json/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Lavorare con JSON -slug: Learn/JavaScript/Oggetti/JSON -translation_of: Learn/JavaScript/Objects/JSON ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
- -

JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi Primi passi e Costruzione blocchi) e con i concetti base degli oggetti JS (vedi Introduzione agli oggetti).
Obiettivi:Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.
- -

No, davvero, cos'è JSON?

- -

{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da Douglas Crockford. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.

- -

JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale JSON di JavaScript.

- -
-

Nota: Convertire una stringa in un oggetto nativo è chiamata deserializzazione, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata serializzazione.

-
- -

Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione .json, e un {{glossary("tipo MIME")}} application/json.

- -

Struutura di un JSON 

- -

Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:

- -
{
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
-  "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
-}
- -

Se carichiamo questo oggetto in un programma, processato in una variabile chiamata superHeroes per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo Fondamentali degli oggetti JavaScript. Per esempio:

- -
superHeroes.homeTown
-superHeroes['active']
- -

Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:

- -
superHeroes['members'][1]['powers'][2]
- -
    -
  1. Per primo abbiamo il nome della variabile — superHeroes.
    2. -
  2. All'interno della variabile vogliamo accedere alla proprietà members, così utilizziamo ["members"].
    3. -
  3. members contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo [1].
    4. -
  4. all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà powers e per ciò usiamo ["powers"].
    5. -
  5. La proprietà powers contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi [2].
    6. -
- -
-

Note: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio JSONTest.html (vedi il codice sorgente). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.

-
- -

Arrays as JSON

- -

Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:

- -
[
-  {
-    "name": "Molecule Man",
-    "age": 29,
-    "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
-  },
-  {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
-]
- -

The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example [0]["powers"][0].

- -

Other notes

- - - -

Active learning: Working through a JSON example

- -

So, let's work through an example to show how we could make use of some JSON data on a website.

- -

Getting started

- -

To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:

- -
<header>
-</header>
-
-<section>
-</section>
- -

Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:

- -
const header = document.querySelector('header');
-const section = document.querySelector('section');
- -

We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

- -

We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:

- -

- -

Obtaining the JSON

- -

To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called XHR). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.

- -
    -
  1. To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code: - 
    let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    -
    2. -
  2. To create a request, we need to create a new request object instance from the XMLHttpRequest constructor, using the new keyword. Add the following below your last line: - 
    let request = new XMLHttpRequest();
    -
    3. -
  3. Now we need to open the request using the open() method. Add the following line: - 
    request.open('GET', requestURL);
    - -

    This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:

    - -
      -
    • The HTTP method to use when making the network request. In this case GET is fine, as we are just retrieving some simple data.
      • -
    • The URL to make the request to — this is the URL of the JSON file that we stored earlier.
      • -
    -
    4. -
  4. Next, add the following two lines — here we are setting the responseType to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the send() method: - 
    request.responseType = 'json';
-request.send();
    -
    5. -
  5. The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code: - 
    request.onload = function() {
-  const superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
    -
    6. -
- -

Here we are storing the response to our request (available in the response property) in a variable called superHeroes; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the <header> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <section>.

- -

We have wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.

- -

Populating the header

- -

Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:

- -
function populateHeader(jsonObj) {
-  const myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  const myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
-  header.appendChild(myPara);
-}
- -

We named the parameter jsonObj, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the homeTown and formed properties of the object.

- -

Creating the hero information cards

- -

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

- -
function showHeroes(jsonObj) {
-  const heroes = jsonObj['members'];
-
-  for (let i = 0; i < heroes.length; i++) {
-    const myArticle = document.createElement('article');
-    const myH2 = document.createElement('h2');
-    const myPara1 = document.createElement('p');
-    const myPara2 = document.createElement('p');
-    const myPara3 = document.createElement('p');
-    const myList = document.createElement('ul');
-
-    myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
-
-    const superPowers = heroes[i].powers;
-    for (let j = 0; j < superPowers.length; j++) {
-      const listItem = document.createElement('li');
-      listItem.textContent = superPowers[j];
-      myList.appendChild(listItem);
-    }
-
-    myArticle.appendChild(myH2);
-    myArticle.appendChild(myPara1);
-    myArticle.appendChild(myPara2);
-    myArticle.appendChild(myPara3);
-    myArticle.appendChild(myList);
-
-    section.appendChild(myArticle);
-  }
-}
- -

To start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.

- -

Next, we use a for loop to loop through each object in the array. For each one, we:

- -
    -
  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
    2. -
  2. Set the <h2> to contain the current hero's name.
    3. -
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
    4. -
  4. Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.
    5. -
  5. Use another for loop to loop through the current hero's superpowers — for each one we create an <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
    6. -
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.
    7. -
- -
-

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

-
- -
-

Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

-
- -

Converting between objects and text

- -

The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:

- -
request.responseType = 'json';
- -

But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

- - - -

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used parse() to convert it to an actual JavaScript object. The key snippet of code is here:

- -
request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
-request.send();
-
-request.onload = function() {
-  const superHeroesText = request.response; // get the string from the response
-  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

- -
let myJSON = { "name": "Chris", "age": "38" };
-myJSON
-let myString = JSON.stringify(myJSON);
-myString
- -

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON.

- -

Summary

- -

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

- -

In this module

- - diff --git a/files/it/learn/server-side/django/introduction/index.html b/files/it/learn/server-side/django/introduction/index.html new file mode 100644 index 0000000000..4eb36683eb --- /dev/null +++ b/files/it/learn/server-side/django/introduction/index.html @@ -0,0 +1,281 @@ +--- +title: Introduzione a Django +slug: Learn/Server-side/Django/Introduzione +tags: + - Introduzione + - Learn + - Principianti + - Python + - django + - programmazione lato server +translation_of: Learn/Server-side/Django/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +
In questo primo articolo su Django risponderemo alla domanda "Cos'è Django?" e forniremo una panoramica su cosa rende speciale questo web framework. Andremo a sottolinearne le principali caratteristiche, incluse alcune delle funzionalità avanzate, che però in questo modulo non avremo tempo di presentare nel dettaglio. Mostreremo poi alcuni dei principali blocchi che compongono un'applicazione Django (sebbene a questo punto non dovreste ancora avere un ambiente di sviluppo in cui poterla testare).
+ + + + + + + + + + + + +
Prerequisiti: +

Conoscenza base del computer. Un'introduzione generale alla programmazione lato server, in particolare ai meccanismi di interazione client-server.

+
Obiettivo:Acquisire familiarità con l'ambiente Django: cos'è, come funziona, quali sono le principali funzionalità che mette a disposizione e i blocchi principali delle applicazioni Django.
+ +

Che cos'è Django?

+ +

Django è un framework web Python di alto livello che consente un rapido sviluppo di siti web sicuri e manutenibili. Costruito da sviluppatori esperti, Django si occupa di gran parte del problema dello sviluppo web, in modo da potersi concentrare sulla scrittura della propria app senza dover reinventare la ruota. È gratuito e open source, ha una comunità fiorente e attiva, un'ottima documentazione e molte opzioni per il supporto gratuito e a pagamento. 

+ +

Django vi aiuta a scrivere software che è:

+ +
+
Completo
+
Django segue la filosofia "Batterie incluse" e fornisce quasi tutto ciò che gli sviluppatori potrebbero voler fare "out of the box". Poiché tutto ciò di cui si ha bisogno è parte di un unico "prodotto", funziona tutto insieme senza soluzione di continuità, segue principi di progettazione coerenti e ha una vasta e aggiornata documentazione.
+
Versatile
+
Django può essere (ed è stato) utilizzato per costruire quasi ogni tipo di sito web - dai sistemi di gestione dei contenuti e wiki, fino ai social network e ai siti di notizie. Può funzionare con qualsiasi framework lato client, e può fornire contenuti in quasi tutti i formati (inclusi HTML, feed RSS, JSON, XML, ecc.). Il sito che state leggendo è basato su Django!
+
Internamente, mentre fornisce scelte per quasi tutte le funzionalità che si possono desiderare (ad esempio, diversi database popolari, motori di modellizzazione, ecc), può anche essere esteso per utilizzare altri componenti se necessario.
+
Sicuro
+
Django aiuta gli sviluppatori ad evitare molti errori di sicurezza comuni, fornendo un framework che è stato progettato per "fare le cose giuste" per proteggere automaticamente il sito web. Ad esempio, Django fornisce un modo sicuro per gestire gli account utente e le password, evitando i comuni errori come l'inserimento di informazioni di sessione nei cookie dove sono vulnerabili (i cookie contengono solo una chiave e i dati reali sono memorizzati nel database) o la memorizzazione diretta delle password piuttosto che l'hash della password.
+
Un hash della password è un valore di lunghezza fissa creato inviando la password attraverso una funzione di hash crittografico. Django può controllare se una password inserita è corretta eseguendola attraverso la funzione hash e confrontando l'uscita con il valore hash memorizzato. Tuttavia, a causa della natura "unidirezionale" della funzione, anche se un valore hash memorizzato è compromesso, è difficile per un aggressore elaborare la password originale.
+
Django consente la protezione contro molte vulnerabilità di default, tra cui SQL injection, cross-site scripting, cross-site request forgery e clickjacking (vedere Sicurezza del sito web per maggiori dettagli su tali attacchi).
+
Scalabile
+
Django utilizza un'architettura basata su componenti "shared-nothing" (ogni parte dell'architettura è indipendente dalle altre e può quindi essere sostituita o modificata se necessario). Avere una chiara separazione tra le diverse parti significa che può scalare per l'aumento del traffico aggiungendo hardware a qualsiasi livello: server di caching, server di database o server di applicazioni. Alcuni dei siti più trafficati hanno scalato con successo Django per soddisfare le loro richieste (ad esempio Instagram e Disqus, per citarne solo due).
+
Manutenibile
+
Il codice Django è scritto utilizzando principi di progettazione e modelli che incoraggiano la creazione di codice manutenibile e riutilizzabile. In particolare, si avvale del principio Don't Repeat Yourself (DRY) per evitare inutili duplicazioni, riducendo la quantità di codice. Django promuove anche il raggruppamento delle funzionalità correlate in "applicazioni" riutilizzabili e, ad un livello più basso, raggruppa il codice correlato in moduli (sulla falsariga del modello Model View Controller (MVC)).
+
Portabile
+
Django è scritto in Python, che funziona su molte piattaforme. Ciò significa che non siete legati a nessuna particolare piattaforma server e potete eseguire le vostre applicazioni su molti tipi di Linux, Windows e Mac OS X. Inoltre, Django è ben supportato da molti web hosting provider, che spesso forniscono infrastrutture e documentazione specifiche per l'hosting dei siti Django.
+
+ +

Da dove proviene?

+ +

Django è stato inizialmente sviluppato tra il 2003 e il 2005 da un team web che si occupava della creazione e della manutenzione dei siti web dei giornali. Dopo aver creato un certo numero di siti, il team ha iniziato a elaborare e riutilizzare un sacco di codice e modelli di design comuni. Questo codice comune si è evoluto in un generico framework di sviluppo web, che è stato "open-sourced" come progetto "Django" nel luglio 2005. 

+ +

Django ha continuato a crescere e migliorare, dalla sua prima release milestone (1.0) nel settembre 2008 fino alla recente versione 2.0 (2017). Ogni release ha aggiunto nuove funzionalità e correzioni di bug, che vanno dal supporto per nuovi tipi di database, motori di template e caching, fino all'aggiunta di funzioni di visualizzazione e classi "generiche" (che riducono la quantità di codice che gli sviluppatori devono scrivere per una serie di attività di programmazione). 

+ +
+

Nota: Date un'occhiata alle note di rilascio sul sito web di Django per vedere cosa è cambiato nelle ultime versioni, e quanto lavoro si sta facendo per rendere Django migliore.

+
+ +

Django è ora un progetto open source fiorente e collaborativo, con molte migliaia di utenti e collaboratori. Pur avendo ancora alcune caratteristiche che riflettono la sua origine, Django si è evoluto in un framework versatile in grado di sviluppare qualsiasi tipo di sito web. 

+ +

Quanto è popolare Django?

+ +

Non c'è una misura disponibile e definitiva della popolarità dei framework lato server (anche se siti come Hot Frameworks tentano di valutare la popolarità usando meccanismi come il conteggio del numero di progetti GitHub e le domande di StackOverflow per ogni piattaforma). Una domanda migliore è se Django è "abbastanza popolare" per scongiurare i problemi delle piattaforme poco popolari. Continua ad evolversi? Puoi chiedere aiuto se ne hai bisogno? C'è la possibilità di ottenere un lavoro retribuito se si impara Django? 

+ +

In base al numero di siti di alto profilo che utilizzano Django, al numero di persone che contribuiscono al codice e al numero di persone che forniscono supporto sia gratuito che a pagamento, allora sì, Django è un framework popolare!

+ +

I siti di alto profilo che utilizzano Django includono: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest e Open Stack (fonte: home page di Django).

+ +

Django è dogmatico?

+ +

I framework web spesso si riferiscono a se stessi come "dogmatici" o "non dogmatici".

+ +

I framework dogmatici sono quelli che hanno dogmi sul "giusto modo" di gestire un particolare compito. Spesso supportano un rapido sviluppo in un particolare dominio (risolvere problemi di un particolare tipo) perché il modo giusto di fare qualsiasi cosa è di solito ben compreso e ben documentato. Tuttavia possono essere meno flessibili nel risolvere i problemi al di fuori del loro dominio principale e tendono ad offrire meno scelte per quali componenti e approcci si possono utilizzare.

+ +

I framework non dogmatici, al contrario, hanno molte meno restrizioni sul modo migliore per collegare i componenti per raggiungere un obiettivo, o anche su quali componenti usare. Con essi è più facile per gli sviluppatori utilizzare gli strumenti più adatti per completare un particolare compito, al anche se devono sostenere un dispendio di energie per trovare da soli quei componenti.

+ +

Django è "mediamente dogmatico", e quindi fornisce il "meglio di entrambi i mondi". Fornisce un insieme di componenti per gestire la maggior parte dei compiti di sviluppo web e uno (o due) modi preferiti per utilizzarli. Tuttavia, l'architettura disaccoppiata di Django significa che di solito è possibile scegliere tra una serie di opzioni diverse, o, se lo si desidera, aggiungere il supporto per quelle completamente nuove.

+ +

Che aspetto ha il codice di Django?

+ +

In un sito web tradizionale basato su dati, un'applicazione web attende le richieste HTTP dal browser web (o da un altro client). Quando una richiesta viene ricevuta, l'applicazione elabora ciò che è necessario in base all'URL ed eventualmente alle informazioni contenute nei dati POST o nei dati GET. A seconda di ciò che è richiesto, può quindi leggere o scrivere informazioni da un database o eseguire altri compiti necessari per soddisfare la richiesta. L'applicazione restituisce quindi una risposta al browser web, spesso creando dinamicamente una pagina HTML che il browser può visualizzare inserendo i dati recuperati nei segnaposto in un modello HTML.

+ +

Le applicazioni web Django tipicamente raggruppano il codice che gestisce ciascuno di questi passaggi in file separati:

+ + + +
+

Nota: Django si riferisce a questa organizzazione come all'architettura "Model View Template (MVT)". Ha molte somiglianze con la più familiare architettura del Model View Controller.

+
+ + + +

Le sezioni seguenti vi daranno un'idea di come sono fatte queste parti principali di un'applicazione Django (approfondiremo i dettagli più avanti nel corso, una volta creato un ambiente di sviluppo).

+ +

Inviare la richiesta alla vista giusta (urls.py)

+ +

Un URL mapper è tipicamente memorizzato in un file chiamato urls.py. Nell'esempio seguente, il mapper (urlpatterns) definisce una lista di mappature tra le routes (specifici URL patterns ) e le corrispondenti funzioni di visualizzazione (view). Se viene ricevuta una richiesta HTTP che ha un URL che corrisponde a uno specifico pattern, allora la funzione di view associata sarà chiamata e passerà la richiesta.

+ +
urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('book/<int:id>/', views.book_detail, name='book_detail'),
+    path('catalog/', include('catalog.urls')),
+    re_path(r'^([0-9]+)/$', views.best),
+]
+
+ +

L'oggetto urlpatterns è una lista di funzioni path() e/o re_path() (le liste Python sono definite usando parentesi quadre, dove gli elementi sono separati da virgole e possono avere una virgola di tracciamento opzionale. Per esempio: [item1, item2, item3,]).

+ +

Il primo argomento per entrambi i metodi è il percorso (pattern) che sarà abbinato. Il metodo path() usa le parentesi angolari per definire le parti di un URL che saranno catturate e passate alla funzione di visualizzazione come argomenti. La funzione re_path() usa un approccio flessibile per la corrispondenza dei pattern, noto come espressione regolare. Ne parleremo in un articolo successivo!

+ +

Il secondo argomento è la funzione che viene chiamata in abbinamento al pattern. La notazione views.book_detail indica che la funzione chiamata book_detail() può essere trovata in un modulo chiamato views (cioè all'interno di un file chiamato views.py)

+ +

Gestione della richiesta (views.py)

+ +

Le views sono il cuore dell'applicazione web, ricevono le richieste HTTP dai client web e restituiscono le risposte HTTP. Nel mezzo, esse mettono a disposizione le altre risorse del framework per accedere ai database, rendere i modelli, ecc. 

+ +

L'esempio seguente mostra una minima funzione di view index(), che avrebbe potuto essere chiamata dal nostro URL mapper nella sezione precedente.  Come tutte le funzioni di view riceve un oggetto HttpRequest come parametro (request) e restituisce un oggetto HttpResponse. In questo caso non facciamo nulla con la richiesta, e la nostra risposta restituisce semplicemente una stringa codificata. Vi mostreremo una richiesta che fa qualcosa di più interessante in una sezione successiva.

+ +
# filename: views.py (Django view functions)
+
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest - the request parameter
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Hello from Django!')
+
+ +
+

Nota: Un po' di Python:

+ + +
+ + + +

Le views sono solitamente salvate in un file chiamato views.py.

+ +

Definizione dei modelli di dati (models.py)

+ +

Le applicazioni web Django gestiscono e interrogano i dati attraverso oggetti Python chiamati modelli (models). I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo ed eventualmente anche la loro dimensione massima, i valori di default, le opzioni della lista di selezione, il testo di aiuto per la documentazione, il testo dell'etichetta per i moduli, ecc. La definizione del modello è indipendente dal database sottostante - è possibile scegliere uno dei diversi modelli come parte delle impostazioni del progetto. Una volta scelto il database che si vuole utilizzare, non è necessario parlare direttamente con esso - basta scrivere la struttura del modello e altro codice, e Django si occupa per voi di tutto il lavoro sporco di comunicazione con il database.

+ +

Il frammento di codice qui sotto mostra un modello Django molto semplice per un oggetto Team. La classe Team è derivata dalla classe django model.Model. Essa definisce il nome del team e il livello del team come campi di caratteri e specifica un numero massimo di caratteri da memorizzare per ogni record. Il team_level può essere uno dei diversi valori, quindi lo definiamo come un campo di scelta e forniamo una mappatura tra le scelte da visualizzare e i dati da memorizzare, insieme ad un valore predefinito. 

+ +
# filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
+
+ +
+

Nota: Un po' di Python:

+ + +
+ +

Interrogare i dati (views.py)

+ +

Il modello Django fornisce una semplice API di interrogazione per la ricerca nel database. Questa può essere confrontata con una serie di campi alla volta utilizzando diversi criteri (ad es. esatto, non sensibile alle maiuscole, maggiore di, ecc.), e può supportare affermazioni complesse (ad esempio, è possibile specificare una ricerca su squadre U11 che hanno un nome di squadra che inizia con "Fr" o finisce con "al"). 

+ +

Il frammento di codice mostra una funzione di visualizzazione (gestore di risorse) per la visualizzazione di tutti i nostri team U09. La linea in grassetto mostra come possiamo usare l'API della query del modello per filtrare per tutti i record dove il campo team_level ha esattamente il testo 'U09' (notare come questo criterio è passato alla funzione filter() come argomento con il nome del campo e il tipo di match separati da un doppio underscore: team_level__exact).

+ +
## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+
+ +
+
+ +

Questa funzione utilizza la funzione render() per creare la HttpResponse che viene inviata al browser. Questa funzione è una scorciatoia; crea un file HTML combinando un template HTML specificato e alcuni dati da inserire nel template (forniti nella variabile denominata "context"). Nella sezione successiva mostriamo come il template ha i dati inseriti per creare l'HTML.

+ +

Visualizzazione dei dati (HTML templates)

+ +

I sistemi di template consentono di specificare la struttura di un documento di output, utilizzando dei segnaposto per i dati che verranno compilati al momento della generazione di una pagina. I template sono spesso usati per creare HTML, ma possono anche creare altri tipi di documenti. Django supporta sia il suo sistema di template nativo che un'altra popolare libreria Python chiamata Jinja2 out of the box (può anche essere realizzata per supportare altri sistemi se necessario). 

+ +

Il frammento di codice mostra come potrebbe apparire il template HTML chiamato dalla funzione render() nella sezione precedente. Questo template è stato scritto partendo dal presupposto che avrà accesso ad una variabile di lista chiamata youngest_teams al momento del rendering (contenuta nella variabile context all'interno della funzione render() di cui sopra). All'interno dello scheletro HTML abbiamo un'espressione che prima controlla se la variabile youngest_teams esiste, e poi la itera in un ciclo for. Su ogni iterazione il template mostra il valore team_name di ogni squadra in un elemento {{htmlelement("li")}}.

+ +
## filename: best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Home page</title>
+</head>
+<body>
+  {% if youngest_teams %}
+    <ul>
+      {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+      {% endfor %}
+    </ul>
+  {% else %}
+    <p>No teams are available.</p>
+  {% endif %}
+</body>
+</html>
+ +

Cos'altro si può fare?

+ +

Le sezioni precedenti mostrano le principali caratteristiche che utilizzerete in quasi tutte le applicazioni web: URL mapping, views, modelli e templates. Solo alcune delle altre cose fornite da Django includono: 

+ + + +

Sommario

+ +

Congratulazioni, hai completato il primo passo del tuo viaggio Django! Ora dovreste aver compreso i principali vantaggi di Django, un po' della sua storia e più o meno come potrebbero essere le parti principali di un'applicazione Django. Dovreste anche aver imparato alcune cose sul linguaggio di programmazione Python, compresa la sintassi per le liste, le funzioni e le classi.

+ +

Avete già visto un po' di vero codice Django qui sopra, ma a differenza del codice lato client, è necessario impostare un ambiente di sviluppo per eseguirlo. Questo è il nostro prossimo passo.
+  

+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

In this module

+ + diff --git a/files/it/learn/server-side/django/introduzione/index.html b/files/it/learn/server-side/django/introduzione/index.html deleted file mode 100644 index 4eb36683eb..0000000000 --- a/files/it/learn/server-side/django/introduzione/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Introduzione a Django -slug: Learn/Server-side/Django/Introduzione -tags: - - Introduzione - - Learn - - Principianti - - Python - - django - - programmazione lato server -translation_of: Learn/Server-side/Django/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -
In questo primo articolo su Django risponderemo alla domanda "Cos'è Django?" e forniremo una panoramica su cosa rende speciale questo web framework. Andremo a sottolinearne le principali caratteristiche, incluse alcune delle funzionalità avanzate, che però in questo modulo non avremo tempo di presentare nel dettaglio. Mostreremo poi alcuni dei principali blocchi che compongono un'applicazione Django (sebbene a questo punto non dovreste ancora avere un ambiente di sviluppo in cui poterla testare).
- - - - - - - - - - - - -
Prerequisiti: -

Conoscenza base del computer. Un'introduzione generale alla programmazione lato server, in particolare ai meccanismi di interazione client-server.

-
Obiettivo:Acquisire familiarità con l'ambiente Django: cos'è, come funziona, quali sono le principali funzionalità che mette a disposizione e i blocchi principali delle applicazioni Django.
- -

Che cos'è Django?

- -

Django è un framework web Python di alto livello che consente un rapido sviluppo di siti web sicuri e manutenibili. Costruito da sviluppatori esperti, Django si occupa di gran parte del problema dello sviluppo web, in modo da potersi concentrare sulla scrittura della propria app senza dover reinventare la ruota. È gratuito e open source, ha una comunità fiorente e attiva, un'ottima documentazione e molte opzioni per il supporto gratuito e a pagamento. 

- -

Django vi aiuta a scrivere software che è:

- -
-
Completo
-
Django segue la filosofia "Batterie incluse" e fornisce quasi tutto ciò che gli sviluppatori potrebbero voler fare "out of the box". Poiché tutto ciò di cui si ha bisogno è parte di un unico "prodotto", funziona tutto insieme senza soluzione di continuità, segue principi di progettazione coerenti e ha una vasta e aggiornata documentazione.
-
Versatile
-
Django può essere (ed è stato) utilizzato per costruire quasi ogni tipo di sito web - dai sistemi di gestione dei contenuti e wiki, fino ai social network e ai siti di notizie. Può funzionare con qualsiasi framework lato client, e può fornire contenuti in quasi tutti i formati (inclusi HTML, feed RSS, JSON, XML, ecc.). Il sito che state leggendo è basato su Django!
-
Internamente, mentre fornisce scelte per quasi tutte le funzionalità che si possono desiderare (ad esempio, diversi database popolari, motori di modellizzazione, ecc), può anche essere esteso per utilizzare altri componenti se necessario.
-
Sicuro
-
Django aiuta gli sviluppatori ad evitare molti errori di sicurezza comuni, fornendo un framework che è stato progettato per "fare le cose giuste" per proteggere automaticamente il sito web. Ad esempio, Django fornisce un modo sicuro per gestire gli account utente e le password, evitando i comuni errori come l'inserimento di informazioni di sessione nei cookie dove sono vulnerabili (i cookie contengono solo una chiave e i dati reali sono memorizzati nel database) o la memorizzazione diretta delle password piuttosto che l'hash della password.
-
Un hash della password è un valore di lunghezza fissa creato inviando la password attraverso una funzione di hash crittografico. Django può controllare se una password inserita è corretta eseguendola attraverso la funzione hash e confrontando l'uscita con il valore hash memorizzato. Tuttavia, a causa della natura "unidirezionale" della funzione, anche se un valore hash memorizzato è compromesso, è difficile per un aggressore elaborare la password originale.
-
Django consente la protezione contro molte vulnerabilità di default, tra cui SQL injection, cross-site scripting, cross-site request forgery e clickjacking (vedere Sicurezza del sito web per maggiori dettagli su tali attacchi).
-
Scalabile
-
Django utilizza un'architettura basata su componenti "shared-nothing" (ogni parte dell'architettura è indipendente dalle altre e può quindi essere sostituita o modificata se necessario). Avere una chiara separazione tra le diverse parti significa che può scalare per l'aumento del traffico aggiungendo hardware a qualsiasi livello: server di caching, server di database o server di applicazioni. Alcuni dei siti più trafficati hanno scalato con successo Django per soddisfare le loro richieste (ad esempio Instagram e Disqus, per citarne solo due).
-
Manutenibile
-
Il codice Django è scritto utilizzando principi di progettazione e modelli che incoraggiano la creazione di codice manutenibile e riutilizzabile. In particolare, si avvale del principio Don't Repeat Yourself (DRY) per evitare inutili duplicazioni, riducendo la quantità di codice. Django promuove anche il raggruppamento delle funzionalità correlate in "applicazioni" riutilizzabili e, ad un livello più basso, raggruppa il codice correlato in moduli (sulla falsariga del modello Model View Controller (MVC)).
-
Portabile
-
Django è scritto in Python, che funziona su molte piattaforme. Ciò significa che non siete legati a nessuna particolare piattaforma server e potete eseguire le vostre applicazioni su molti tipi di Linux, Windows e Mac OS X. Inoltre, Django è ben supportato da molti web hosting provider, che spesso forniscono infrastrutture e documentazione specifiche per l'hosting dei siti Django.
-
- -

Da dove proviene?

- -

Django è stato inizialmente sviluppato tra il 2003 e il 2005 da un team web che si occupava della creazione e della manutenzione dei siti web dei giornali. Dopo aver creato un certo numero di siti, il team ha iniziato a elaborare e riutilizzare un sacco di codice e modelli di design comuni. Questo codice comune si è evoluto in un generico framework di sviluppo web, che è stato "open-sourced" come progetto "Django" nel luglio 2005. 

- -

Django ha continuato a crescere e migliorare, dalla sua prima release milestone (1.0) nel settembre 2008 fino alla recente versione 2.0 (2017). Ogni release ha aggiunto nuove funzionalità e correzioni di bug, che vanno dal supporto per nuovi tipi di database, motori di template e caching, fino all'aggiunta di funzioni di visualizzazione e classi "generiche" (che riducono la quantità di codice che gli sviluppatori devono scrivere per una serie di attività di programmazione). 

- -
-

Nota: Date un'occhiata alle note di rilascio sul sito web di Django per vedere cosa è cambiato nelle ultime versioni, e quanto lavoro si sta facendo per rendere Django migliore.

-
- -

Django è ora un progetto open source fiorente e collaborativo, con molte migliaia di utenti e collaboratori. Pur avendo ancora alcune caratteristiche che riflettono la sua origine, Django si è evoluto in un framework versatile in grado di sviluppare qualsiasi tipo di sito web. 

- -

Quanto è popolare Django?

- -

Non c'è una misura disponibile e definitiva della popolarità dei framework lato server (anche se siti come Hot Frameworks tentano di valutare la popolarità usando meccanismi come il conteggio del numero di progetti GitHub e le domande di StackOverflow per ogni piattaforma). Una domanda migliore è se Django è "abbastanza popolare" per scongiurare i problemi delle piattaforme poco popolari. Continua ad evolversi? Puoi chiedere aiuto se ne hai bisogno? C'è la possibilità di ottenere un lavoro retribuito se si impara Django? 

- -

In base al numero di siti di alto profilo che utilizzano Django, al numero di persone che contribuiscono al codice e al numero di persone che forniscono supporto sia gratuito che a pagamento, allora sì, Django è un framework popolare!

- -

I siti di alto profilo che utilizzano Django includono: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest e Open Stack (fonte: home page di Django).

- -

Django è dogmatico?

- -

I framework web spesso si riferiscono a se stessi come "dogmatici" o "non dogmatici".

- -

I framework dogmatici sono quelli che hanno dogmi sul "giusto modo" di gestire un particolare compito. Spesso supportano un rapido sviluppo in un particolare dominio (risolvere problemi di un particolare tipo) perché il modo giusto di fare qualsiasi cosa è di solito ben compreso e ben documentato. Tuttavia possono essere meno flessibili nel risolvere i problemi al di fuori del loro dominio principale e tendono ad offrire meno scelte per quali componenti e approcci si possono utilizzare.

- -

I framework non dogmatici, al contrario, hanno molte meno restrizioni sul modo migliore per collegare i componenti per raggiungere un obiettivo, o anche su quali componenti usare. Con essi è più facile per gli sviluppatori utilizzare gli strumenti più adatti per completare un particolare compito, al anche se devono sostenere un dispendio di energie per trovare da soli quei componenti.

- -

Django è "mediamente dogmatico", e quindi fornisce il "meglio di entrambi i mondi". Fornisce un insieme di componenti per gestire la maggior parte dei compiti di sviluppo web e uno (o due) modi preferiti per utilizzarli. Tuttavia, l'architettura disaccoppiata di Django significa che di solito è possibile scegliere tra una serie di opzioni diverse, o, se lo si desidera, aggiungere il supporto per quelle completamente nuove.

- -

Che aspetto ha il codice di Django?

- -

In un sito web tradizionale basato su dati, un'applicazione web attende le richieste HTTP dal browser web (o da un altro client). Quando una richiesta viene ricevuta, l'applicazione elabora ciò che è necessario in base all'URL ed eventualmente alle informazioni contenute nei dati POST o nei dati GET. A seconda di ciò che è richiesto, può quindi leggere o scrivere informazioni da un database o eseguire altri compiti necessari per soddisfare la richiesta. L'applicazione restituisce quindi una risposta al browser web, spesso creando dinamicamente una pagina HTML che il browser può visualizzare inserendo i dati recuperati nei segnaposto in un modello HTML.

- -

Le applicazioni web Django tipicamente raggruppano il codice che gestisce ciascuno di questi passaggi in file separati:

- - - -
-

Nota: Django si riferisce a questa organizzazione come all'architettura "Model View Template (MVT)". Ha molte somiglianze con la più familiare architettura del Model View Controller.

-
- - - -

Le sezioni seguenti vi daranno un'idea di come sono fatte queste parti principali di un'applicazione Django (approfondiremo i dettagli più avanti nel corso, una volta creato un ambiente di sviluppo).

- -

Inviare la richiesta alla vista giusta (urls.py)

- -

Un URL mapper è tipicamente memorizzato in un file chiamato urls.py. Nell'esempio seguente, il mapper (urlpatterns) definisce una lista di mappature tra le routes (specifici URL patterns ) e le corrispondenti funzioni di visualizzazione (view). Se viene ricevuta una richiesta HTTP che ha un URL che corrisponde a uno specifico pattern, allora la funzione di view associata sarà chiamata e passerà la richiesta.

- -
urlpatterns = [
-    path('admin/', admin.site.urls),
-    path('book/<int:id>/', views.book_detail, name='book_detail'),
-    path('catalog/', include('catalog.urls')),
-    re_path(r'^([0-9]+)/$', views.best),
-]
-
- -

L'oggetto urlpatterns è una lista di funzioni path() e/o re_path() (le liste Python sono definite usando parentesi quadre, dove gli elementi sono separati da virgole e possono avere una virgola di tracciamento opzionale. Per esempio: [item1, item2, item3,]).

- -

Il primo argomento per entrambi i metodi è il percorso (pattern) che sarà abbinato. Il metodo path() usa le parentesi angolari per definire le parti di un URL che saranno catturate e passate alla funzione di visualizzazione come argomenti. La funzione re_path() usa un approccio flessibile per la corrispondenza dei pattern, noto come espressione regolare. Ne parleremo in un articolo successivo!

- -

Il secondo argomento è la funzione che viene chiamata in abbinamento al pattern. La notazione views.book_detail indica che la funzione chiamata book_detail() può essere trovata in un modulo chiamato views (cioè all'interno di un file chiamato views.py)

- -

Gestione della richiesta (views.py)

- -

Le views sono il cuore dell'applicazione web, ricevono le richieste HTTP dai client web e restituiscono le risposte HTTP. Nel mezzo, esse mettono a disposizione le altre risorse del framework per accedere ai database, rendere i modelli, ecc. 

- -

L'esempio seguente mostra una minima funzione di view index(), che avrebbe potuto essere chiamata dal nostro URL mapper nella sezione precedente.  Come tutte le funzioni di view riceve un oggetto HttpRequest come parametro (request) e restituisce un oggetto HttpResponse. In questo caso non facciamo nulla con la richiesta, e la nostra risposta restituisce semplicemente una stringa codificata. Vi mostreremo una richiesta che fa qualcosa di più interessante in una sezione successiva.

- -
# filename: views.py (Django view functions)
-
-from django.http import HttpResponse
-
-def index(request):
-    # Get an HttpRequest - the request parameter
-    # perform operations using information from the request.
-    # Return HttpResponse
-    return HttpResponse('Hello from Django!')
-
- -
-

Nota: Un po' di Python:

- - -
- - - -

Le views sono solitamente salvate in un file chiamato views.py.

- -

Definizione dei modelli di dati (models.py)

- -

Le applicazioni web Django gestiscono e interrogano i dati attraverso oggetti Python chiamati modelli (models). I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo ed eventualmente anche la loro dimensione massima, i valori di default, le opzioni della lista di selezione, il testo di aiuto per la documentazione, il testo dell'etichetta per i moduli, ecc. La definizione del modello è indipendente dal database sottostante - è possibile scegliere uno dei diversi modelli come parte delle impostazioni del progetto. Una volta scelto il database che si vuole utilizzare, non è necessario parlare direttamente con esso - basta scrivere la struttura del modello e altro codice, e Django si occupa per voi di tutto il lavoro sporco di comunicazione con il database.

- -

Il frammento di codice qui sotto mostra un modello Django molto semplice per un oggetto Team. La classe Team è derivata dalla classe django model.Model. Essa definisce il nome del team e il livello del team come campi di caratteri e specifica un numero massimo di caratteri da memorizzare per ogni record. Il team_level può essere uno dei diversi valori, quindi lo definiamo come un campo di scelta e forniamo una mappatura tra le scelte da visualizzare e i dati da memorizzare, insieme ad un valore predefinito. 

- -
# filename: models.py
-
-from django.db import models
-
-class Team(models.Model):
-    team_name = models.CharField(max_length=40)
-
-    TEAM_LEVELS = (
-        ('U09', 'Under 09s'),
-        ('U10', 'Under 10s'),
-        ('U11', 'Under 11s'),
-        ...  #list other team levels
-    )
-    team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
-
- -
-

Nota: Un po' di Python:

- - -
- -

Interrogare i dati (views.py)

- -

Il modello Django fornisce una semplice API di interrogazione per la ricerca nel database. Questa può essere confrontata con una serie di campi alla volta utilizzando diversi criteri (ad es. esatto, non sensibile alle maiuscole, maggiore di, ecc.), e può supportare affermazioni complesse (ad esempio, è possibile specificare una ricerca su squadre U11 che hanno un nome di squadra che inizia con "Fr" o finisce con "al"). 

- -

Il frammento di codice mostra una funzione di visualizzazione (gestore di risorse) per la visualizzazione di tutti i nostri team U09. La linea in grassetto mostra come possiamo usare l'API della query del modello per filtrare per tutti i record dove il campo team_level ha esattamente il testo 'U09' (notare come questo criterio è passato alla funzione filter() come argomento con il nome del campo e il tipo di match separati da un doppio underscore: team_level__exact).

- -
## filename: views.py
-
-from django.shortcuts import render
-from .models import Team
-
-def index(request):
-    list_teams = Team.objects.filter(team_level__exact="U09")
-    context = {'youngest_teams': list_teams}
-    return render(request, '/best/index.html', context)
-
- -
-
- -

Questa funzione utilizza la funzione render() per creare la HttpResponse che viene inviata al browser. Questa funzione è una scorciatoia; crea un file HTML combinando un template HTML specificato e alcuni dati da inserire nel template (forniti nella variabile denominata "context"). Nella sezione successiva mostriamo come il template ha i dati inseriti per creare l'HTML.

- -

Visualizzazione dei dati (HTML templates)

- -

I sistemi di template consentono di specificare la struttura di un documento di output, utilizzando dei segnaposto per i dati che verranno compilati al momento della generazione di una pagina. I template sono spesso usati per creare HTML, ma possono anche creare altri tipi di documenti. Django supporta sia il suo sistema di template nativo che un'altra popolare libreria Python chiamata Jinja2 out of the box (può anche essere realizzata per supportare altri sistemi se necessario). 

- -

Il frammento di codice mostra come potrebbe apparire il template HTML chiamato dalla funzione render() nella sezione precedente. Questo template è stato scritto partendo dal presupposto che avrà accesso ad una variabile di lista chiamata youngest_teams al momento del rendering (contenuta nella variabile context all'interno della funzione render() di cui sopra). All'interno dello scheletro HTML abbiamo un'espressione che prima controlla se la variabile youngest_teams esiste, e poi la itera in un ciclo for. Su ogni iterazione il template mostra il valore team_name di ogni squadra in un elemento {{htmlelement("li")}}.

- -
## filename: best/templates/best/index.html
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Home page</title>
-</head>
-<body>
-  {% if youngest_teams %}
-    <ul>
-      {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-      {% endfor %}
-    </ul>
-  {% else %}
-    <p>No teams are available.</p>
-  {% endif %}
-</body>
-</html>
- -

Cos'altro si può fare?

- -

Le sezioni precedenti mostrano le principali caratteristiche che utilizzerete in quasi tutte le applicazioni web: URL mapping, views, modelli e templates. Solo alcune delle altre cose fornite da Django includono: 

- - - -

Sommario

- -

Congratulazioni, hai completato il primo passo del tuo viaggio Django! Ora dovreste aver compreso i principali vantaggi di Django, un po' della sua storia e più o meno come potrebbero essere le parti principali di un'applicazione Django. Dovreste anche aver imparato alcune cose sul linguaggio di programmazione Python, compresa la sintassi per le liste, le funzioni e le classi.

- -

Avete già visto un po' di vero codice Django qui sopra, ma a differenza del codice lato client, è necessario impostare un ambiente di sviluppo per eseguirlo. Questo è il nostro prossimo passo.
-  

- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -

In this module

- - -- cgit v1.2.3-54-g00ecf