diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md new file mode 100644 index 0000000000..af6119c22c --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md @@ -0,0 +1,46 @@ +--- +id: 587d774c367417b2b2512a9c +title: Aggiungere un testo alternativo alle immagini per renderle accessibili agli ipovedenti +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cPp7VfD' +forumTopicId: 16628 +dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility +--- + +# --description-- + +Probabilmente hai già avuto modo di vedere un attributo `alt` in un `img` tag in altre sfide. Il testo `alt` descrive il contenuto dell'immagine e fornisce un'alternativa testuale per essa. Un attributo `alt` aiuta nei casi in cui l'immagine non riesce ad essere caricata o non può essere vista da un utente. Anche i motori di ricerca lo usano per comprendere qual è il contenuto di un'immagine per poi includerla nei risultati di ricerca. Ecco un esempio: + +```html +Company logo +``` + +Le persone ipovedenti si affidano agli screen reader per convertire il contenuto del web in un formato audio. Essi non riescono ad ottenere le informazioni se esse sono presentate solo visualmente. Per le immagini gli screen reader possono accedere all'attributo `alt` e leggere il suo contenuto per fornire le informazioni chiave. + +Un buon testo `alt` fornisce al lettore una breve descrizione dell'immagine. Dovresti sempre includere un attributo `alt` nelle tue immagini. Nelle specifiche di HTML5 questo è ormai considerato obbligatorio. + +# --instructions-- + +Camper Cat è sia un ninja del codice che un ninja reale, e sta costruendo un sito web per condividere la sua conoscenza. L'immagine del profilo che vuole utilizzare mostra le sue abilità e dovrebbe essere apprezzata da tutti i visitatori del sito. Aggiungi un attributo `alt` nel tag `img` che spieghi che Camper Cat sta facendo karate. (L'attributo `src` dell'immagine non è collegato a un file reale, quindi dovresti vedere il testo `alt` nel display.) + +# --hints-- + +Il tuo tag `img` dovrebbe avere un attributo `alt` e non dovrebbe essere vuoto. + +```js +assert($('img').attr('alt')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html +Someone doing karate +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md new file mode 100644 index 0000000000..d8d3168510 --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md @@ -0,0 +1,105 @@ +--- +id: 587d778b367417b2b2512aa8 +title: Aggiungere un selettore di data accessibile +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cR3bRbCV' +forumTopicId: 301008 +dashedName: add-an-accessible-date-picker +--- + +# --description-- + +I moduli spesso includono il campo `input`, che può essere usato per creare diversi tipi di controlli. L'attributo `type` indica che tipo di elemento `input` sarà creato. + +Potresti aver notato i tipi di input `text` e `submit` nelle sfide precedenti, e HTML5 ha introdotto anche un'opzione per specificare un campo `date`. A seconda del supporto del browser, un selettore di date appare nel campo `input` quando è selezionato, il che rende la compilazione del modulo più semplice per tutti gli utenti. + +Nei browser più vecchi il tipo sarà predefinito a `text`, quindi è utile mostrare agli utenti il formato di data previsto nella `label` o nel testo `placeholder` per sicurezza. + +Ecco un esempio: + +```html + + +``` + +# --instructions-- + +Camper Cat sta organizzando un torneo di Mortal Kombat e vuole chiedere ai suoi concorrenti di vedere quale data sia la migliore. Aggiungi un tag `input` con un attributo `type` pari a `date`, un attributo `id` pari a `pickdate` e un attributo `name` pari a `date`. + +# --hints-- + +Il tuo codice dovrebbe aggiungere un tag `input` per il campo di selezione della data. + +```js +assert($('input').length == 2); +``` + +Il tuo tag `input` dovrebbe avere un attributo `type` con un valore di `date`. + +```js +assert($('input').attr('type') == 'date'); +``` + +Il tuo tag `input` dovrebbe avere un attributo `id` con un valore di `pickdate`. + +```js +assert($('input').attr('id') == 'pickdate'); +``` + +Il tuo tag `input` dovrebbe avere un attributo `name` con un valore di `date`. + +```js +assert($('input').attr('name') == 'date'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Tournaments

+
+
+
+

Mortal Kombat Tournament Survey

+
+

Tell us the best date for the competition

+ + + + + + + + + +
+
+
+ + +``` + +# --solutions-- + +```html + +
+

Tournaments

+
+
+
+

Mortal Kombat Tournament Survey

+
+

Tell us the best date for the competition

+ + + +
+
+
+ + +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md new file mode 100644 index 0000000000..14ba235d80 --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md @@ -0,0 +1,74 @@ +--- +id: 587d778f367417b2b2512aad +title: >- + Evitare i problemi dovuti al daltonismo scegliendo con cura i colori che trasmettono informazioni +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c437as3' +forumTopicId: 301011 +dashedName: >- + avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information +--- + +# --description-- + +Ci sono diverse forme di daltonismo. Queste forme vanno dalla ridotta sensibilità ad alcune lunghezze d'onda della luce alla totale incapacità di vedere i colori. La forma più comune è una ridotta sensibilità nel rilevare il colore verde. + +Per esempio, se il colore in primo piano e il colore di sfondo sono due verdi simili, un utente daltonico potrebbe non essere in grado di distinguerli. I colori simili sono quelli vicini nel cerchio dei colori, e il loro uso dovrebbe essere evitato quando si comunicano informazioni importanti. + +**Nota:** Alcuni strumenti per la selezione dei colori online consentono di effettuare delle simulazioni visive di come i colori appaiono in diverse forme di daltonismo. Queste sono ottime risorse da utilizzare insieme ai calcolatori di contrasto disponibili in rete. + +# --instructions-- + +Camper Cat sta testando diversi stili per un bottone importante, ma il giallo (`#FFFF33`) usato per il `background-color` e il verde (`#33FF33`) usato per il `color` del testo sono tonalità vicine sulla ruota dei colori e virtualmente indistinguibili per alcuni utenti daltonici. (La loro luminosità simile crea problemi anche con il contrasto). Cambia il `color` del testo usando un blu scuro (`#003366`) per risolvere entrambi i problemi. + +# --hints-- + +Il tuo codice dovrebbe cambiare il valore di `color` per il `button` a blu scuro. + +```js +assert($('button').css('color') == 'rgb(0, 51, 102)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Danger!

+
+ + +``` + +# --solutions-- + +```html + + + + +
+

Danger!

+
+ + +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md new file mode 100644 index 0000000000..6a28df6ee3 --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md @@ -0,0 +1,84 @@ +--- +id: 587d778f367417b2b2512aac +title: Evitare i problemi dovuti al daltonismo usando un contrasto sufficiente +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cmzMEUw' +forumTopicId: 301012 +dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast +--- + +# --description-- + +Il colore rappresenta una grande parte del visual design, ma introduce due problemi di accessibilità. Prima di tutto, non si dovrebbe fare ricorso al solo colore per veicolare informazioni importanti in quanto gli utenti che utilizzano uno screen reader non sarebbero in grado di vederlo. In secondo luogo, i colori usati per il primo piano e per lo sfondo devono avere un contrasto sufficiente affinché le persone daltoniche possano distinguerli. + +Nelle sfide precedenti abbiamo visto come utilizzare delle alternative testuali per risolvere il primo problema. La sfida precedente, invece, ci hamostrato come utilizzare gli strumenti per il controllo del contrasto per aiutarci a risolvere il secondo. Il rapporto di contrasto di 4.5:1 raccomandato dal WCAG vale sia per l'uso di colori che per le combinazioni in scala di grigi. + +Gli utenti daltonici fanno fatica a distinguere alcuni colore da altri - solitamente per la tonalità ma a volte anche per la luminosità. Ricorderai che il rapporto di contrasto è calcolato usando i valori di luminanza (o luminosità) relativa del primo piano e dello sfondo. + +In pratica, il contrasto 4.5:1 può essere raggiunto scurendo (aggiungendo nero) il colore più scuro e schiarendo (aggiungendo bianco) il colore più chiaro. Tonalità scure sulla ruota dei colori sono solitamente quelle di blu, violetto, magenta e rosso, mentre quelle più chiare sono arancione, giallo, verde e blu-verde. + +# --instructions-- + +Camper Cat sta sperimentato colori per il testo e lo sfondo del suo blog, ma la combinazione attuale di verdastro per lo sfondo (`background-color`) e marrone per il testo (`color`) ha un rapporto di contrasto di 2.5:1. È possibile modificare facilmente la luminosità dei colori dal momento che li ha dichiarati usando la proprietà di CSS `hsl()` (che regola la tonalità, la saturazione e la luminosità) modificando il terzo argomento. Aumenta la luminosità di `background-color` dal 35% al 55% e diminuisci la luminosità di `color` dal 20% al 15%. Questo porterà il contrasto a 5.9:1. + +# --hints-- + +Il tuo codice dovrebbe cambiare solamente il valore di luminosità per la proprietà `color` del testo a un valore del 15%. + +```js +assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi)); +``` + +Il tuo codice dovrebbe solamente portare il valore di luminosità per la proprietà `background-color` a un valore del 55%. + +```js +assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Deep Thoughts with Master Camper Cat

+
+
+

A Word on the Recent Catnip Doping Scandal

+

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

+

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+
+ +``` + +# --solutions-- + +```html + + + + +
+

Deep Thoughts with Master Camper Cat

+
+
+

A Word on the Recent Catnip Doping Scandal

+

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

+

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+
+ +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md new file mode 100644 index 0000000000..e4079c697a --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md @@ -0,0 +1,75 @@ +--- +id: 587d778f367417b2b2512aae +title: Dare un significato ai link usando un testo descrittivo +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c437DcV' +forumTopicId: 301013 +dashedName: give-links-meaning-by-using-descriptive-link-text +--- + +# --description-- + +Gli utenti che usano uno screen reader hanno diverse opzioni per il tipo di contenuto che il loro dispositivo legge. Queste opzioni includono saltare a (o oltre) elementi di riferimento, saltare al contenuto principale, o ottenere un riepilogo della pagina dalle intestazioni. Un'altra opzione è di ascoltare solo i link disponibili nella pagina. + +Gli screen reader fanno questo leggendo il testo del link, o quello che c'è tra i tag anchor (`a`). Una lista di "clicca qui" o "continua a leggere" non aiuta. Al contrario, dovresti usare testi brevi ma descrittivi all'interno dei tag `a` per fornire più informazioni a questi utenti. + +# --instructions-- + +Il testo del link che Camper Cat usa, privato del contesto, non è molto descrittivo. Sposta il tag anchor (`a`) in modo che racchiuda il testo `information about batteries` anziché `Click here`. + +# --hints-- + +Il tuo codice dovrebbe spostare gli anchor tag `a` dalla loro posizione intorno alle parole `Click here` per racchiudere le parole `information about batteries`. + +```js +assert( + $('a') + .text() + .match(/^(information about batteries)$/g) +); +``` + +L'elemento `a` dovrebbe avere un attributo `href` con un valore di una stringa vuota `""`. + +```js +assert($('a').attr('href') === ''); +``` + +L'elemento `a` dovrebbe avere un tag di chiusura. + +```js +assert( + code.match(/<\/a>/g) && + code.match(/<\/a>/g).length === code.match(//g).length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+

Defeating your Foe: the Red Dot is Ours!

+

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for information about batteries

+
+ +``` + +# --solutions-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+

Defeating your Foe: the Red Dot is Ours!

+

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for information about batteries

+
+ +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md new file mode 100644 index 0000000000..ffeb4f3029 --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -0,0 +1,115 @@ +--- +id: 587d7789367417b2b2512aa4 +title: Migliorare l'accessibilità dei contenuti audio con l'elemento audio +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cVJVkcZ' +forumTopicId: 301014 +dashedName: improve-accessibility-of-audio-content-with-the-audio-element +--- + +# --description-- + +L'elemento `audio` di HTML5 fornisce un significato semantico quando racchiude un flusso audio o sonoro nel tuo markup. Per essere accessibile da persone sorde o con problemi di udito, un contenuto audio ha anche bisogno di un testo alternativo. Questo risultato può essere ottenuto inserendo un testo vicino all'elemento audio o tramite un link alla trascrizione. + +Il tag `audio` supporta l'attributo `controls`. Questo mostra i comandi di default del browser play, pausa, ecc. e supporta l'uso direttamente da tastiera. Esso è un attributo booleano, cioè non ha bisogno di un valore: la sua presenza all'interno del tag attiva l'impostazione. + +Ecco un esempio: + +```html + +``` + +**Nota:** di solito i contenuti multimediali hanno sia componenti visuali che sonori. Necessitano inoltre di sottotitoli sincronizzati e trascrizioni affinché gli utenti con difficoltà visive e/o uditive possano accedervi. Di solito, uno sviluppatore web non è responsabile per la creazione di sottotitoli e trascrizioni, ma deve sapere come includerli. + +# --instructions-- + +È il momento di prendersi una pausa da Camper Cat e fare la conoscenza di camper Zersiax (@zersiax), un campione in fatto di accessibilità, e un utilizzatore di screen reader. Per ascoltare una clip del suo screen reader in azione, aggiungi un elemento `audio` dopo il `p`. Includi l'attributo `controls`. Quindi aggiungi un tag `source` all'interno dei tag `audio` con l'attributo `src` impostato su `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` e l'attributo `type` impostato su `"audio/mpeg"`. + +**Nota:** la clip audio potrebbe sembrare veloce e difficile da capire, ma questa è la velocità normale per gli utenti di screen reader. + +# --hints-- + +Il tuo codice dovrebbe avere un tag `audio`. + +```js +assert($('audio').length === 1); +``` + +Il tuo elemento `audio` dovrebbe avere un tag di chiusura. + +```js +assert( + code.match(/<\/audio>/g).length === 1 && + code.match(/[\s\S]*<\/audio>/g) +); +``` + +Il tag `audio` dovrebbe avere l'attributo `controls`. + +```js +assert($('audio').attr('controls')); +``` + +Il tuo codice dovrebbe avere un tag `source`. + +```js +assert($('source').length === 1); +``` + +Il tuo tag `source` dovrebbe essere all'interno dei tag `audio`. + +```js +assert($('audio').children('source').length === 1); +``` + +Il valore dell'attributo `src` all'interno del tag `source` dovrebbe corrispondere esattamente al link presente nelle istruzioni. + +```js +assert( + $('source').attr('src') === + 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3' +); +``` + +Il tuo codice dovrebbe includere un attributo `type` all'interno del tag `source` con un valore audio/mpeg. + +```js +assert($('source').attr('type') === 'audio/mpeg'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Real Coding Ninjas

+
+
+

A sound clip of Zersiax's screen reader in action.

+ + + +
+ +``` + +# --solutions-- + +```html + +
+

Real Coding Ninjas

+
+
+

A sound clip of Zersiax's screen reader in action.

+ +
+ +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md new file mode 100644 index 0000000000..e6a5590ef3 --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md @@ -0,0 +1,161 @@ +--- +id: 587d778a367417b2b2512aa5 +title: Migliorare l'accessibilità di un grafico con l'elemento figure +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cGJMqtE' +forumTopicId: 301015 +dashedName: improve-chart-accessibility-with-the-figure-element +--- + +# --description-- + +HTML5 ha introdotto l'elemento `figure`, insieme al relativo `figcaption`. Usati insieme, questi elementi contengono una rappresentazione visiva (come un'immagine, un diagramma o un grafico) e la sua didascalia. Avvolgere questi elementi insieme dà un doppio impulso di accessibilità raggruppando semanticamente i contenuti correlati e fornendo un testo alternativo che spiega la `figure`. + +Per la visualizzazione di dati come nei grafici, la didascalia può essere utilizzata per annotare brevemente le tendenze o i risultati per gli utenti ipovedenti. Un'altra sfida spiegherà come spostare una versione tabulare dei dati del grafico fuori dallo schermo (utilizzando CSS) per chi utilizza uno screen reader. + +Ecco un esempio - nota che il `figcaption` va dentro i tag `figure` e può essere combinato con altri elementi: + +```html +
+ Photo of Camper Cat executing a roundhouse kick +
+
+ Master Camper Cat demonstrates proper form of a roundhouse kick. +
+
+``` + +# --instructions-- + +Camper Cat sta lavorando sodo per creare un grafico a barre che mostra la quantità di tempo settimanale da trascorrere allenandosi in invisibilità, combattimento e armi. Aiutalo a strutturare meglio la sua pagina cambiando il tag `div` che usava con un tag `figure`, e il tag `p` che circonda la didascalia con un tag `figcaption`. + +# --hints-- + +Il tuo codice dovrebbe avere un tag `figure`. + +```js +assert($('figure').length == 1); +``` + +Il tuo codice dovrebbe avere un tag `figcaption`. + +```js +assert($('figcaption').length == 1); +``` + +Il tuo codice non dovrebbe avere alcun tag `div`. + +```js +assert($('div').length == 0); +``` + +Il tuo codice non dovrebbe avere alcun tag `p`. + +```js +assert($('p').length == 0); +``` + +La `figcaption` dovrebbe essere un elemento figlio (child) del tag `figure`. + +```js +assert($('figure').children('figcaption').length == 1); +``` + +Il tuo elemento `figure` dovrebbe avere un tag di chiusura. + +```js +assert( + code.match(/<\/figure>/g) && + code.match(/<\/figure>/g).length === code.match(/
/g).length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Training

+ +
+
+
+ + +
+ +
+

Breakdown per week of time to spend training in stealth, combat, and weapons.

+
+ + +
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
+
© 2018 Camper Cat
+ +``` + +# --solutions-- + +```html + +
+

Training

+ +
+
+
+
+ +
+
Breakdown per week of time to spend training in stealth, combat, and weapons.
+
+
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
+
© 2018 Camper Cat
+ +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md new file mode 100644 index 0000000000..62758bbeee --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md @@ -0,0 +1,119 @@ +--- +id: 587d778a367417b2b2512aa6 +title: Migliorare l'accessibilità dei moduli con l'elemento label +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cGJMMAN' +forumTopicId: 301016 +dashedName: improve-form-field-accessibility-with-the-label-element +--- + +# --description-- + +Migliorare l'accessibilità con l'HTML semantico richiede di usare sia i nomi che gli attributi appropriati per i tag. Le prossime sfide riguardano alcuni possibili scenari significativi in cui si utilizzano gli attributi nei moduli. + +Il tag `label` racchiude il testo per uno specifico elemento di controllo del modulo, di solito il nome o l'etichetta di una delle scelte possibili. Questo fa sì che il significato sia legato all'elemento e rende il modulo più leggibile. L'attributo `for` di un tag `label` associa esplicitamente quella `label` al controllo del modulo, ed è usato dagli screen reader. + +Hai conosciuto i pulsanti di opzione e le loro etichette in una lezione della sezione HTML di base. In quella lezione, abbiamo avvolto l'elemento input del pulsante di opzione all'interno di un elemento `label` insieme al testo dell'etichetta, in modo da rendere il testo cliccabile. Un altro modo per raggiungere questo obiettivo è utilizzare l'attributo `for`, come spiegato in questa lezione. + +Il valore dell'attributo `for` deve essere uguale al valore dell'attributo `id` del controllo del modulo. Ecco un esempio: + +```html +
+ + +
+``` + +# --instructions-- + +Camper Cat si aspetta un sacco di interesse per i suoi post e vuole includere un modulo di iscrizione alla newsletter. Aggiungi un attributo `for` nella `label` dell'email che corrisponda all'`id` del suo campo `input`. + +# --hints-- + +Il tuo codice dovrebbe avere un attributo `for` non vuoto nel tag `label`. + +```js +assert($('label').attr('for')); +``` + +Il valore del tuo attributo `for` dovrebbe corrispondere al valore dell'`id` nell'`input` email. + +```js +assert($('label').attr('for') == 'email'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+
+

Sign up to receive Camper Cat's blog posts by email here!

+ + + + + + + +
+
+
+

The Garfield Files: Lasagna as Training Fuel?

+

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

+
+ +
+

Defeating your Foe: the Red Dot is Ours!

+

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...

+
+ +
+

Is Chuck Norris a Cat Person?

+

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

+
+
© 2018 Camper Cat
+ +``` + +# --solutions-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+
+

Sign up to receive Camper Cat's blog posts by email here!

+ + + + + + + +
+
+
+

The Garfield Files: Lasagna as Training Fuel?

+

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

+
+ +
+

Defeating your Foe: the Red Dot is Ours!

+

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...

+
+ +
+

Is Chuck Norris a Cat Person?

+

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

+
+
© 2018 Camper Cat
+ +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md new file mode 100644 index 0000000000..21e20413cf --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md @@ -0,0 +1,80 @@ +--- +id: 587d778e367417b2b2512aab +title: Migliorare la leggibilità con il testo ad alto contrasto +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cKb3nCq' +forumTopicId: 301017 +dashedName: improve-readability-with-high-contrast-text +--- + +# --description-- + +Il basso contrasto tra i colori di primo piano e di sfondo può rendere il testo difficile da leggere. Un contrasto sufficiente migliora la leggibilità del tuo contenuto, ma cosa significa esattamente "sufficiente"? + +Le linee guida di accessibilità dei contenuti Web (WCAG) raccomandano almeno un rapporto di contrasto di 4.5 a 1 per il testo normale. Il rapporto viene calcolato confrontando i valori relativi di luminanza di due colori. Questo varia da 1:1 per lo stesso colore, o nessun contrasto, a 21:1 per il bianco contro il nero, il contrasto più sostanziale. Esistono molti strumenti di controllo del contrasto disponibili online che calcolano questo rapporto per te. + +# --instructions-- + +La scelta di Camper Cat di un testo grigio chiaro su uno sfondo bianco per il suo recente post sul blog ha un rapporto di contrasto di 1,5:1, che lo rende difficile da leggere. Cambia il `color` del testo dal grigio corrente (`#D3D3D3`) a un grigio più scuro (`#636363`) per migliorare il rapporto di contrasto a 6:1. + +# --hints-- + +Il tuo codice dovrebbe cambiare il valore di `color` per il `body` al grigio più scuro. + +```js +assert($('body').css('color') == 'rgb(99, 99, 99)'); +``` + +Il tuo codice non dovrebbe cambiare il `background-color` del `body`. + +```js +assert($('body').css('background-color') == 'rgb(255, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Deep Thoughts with Master Camper Cat

+
+
+

A Word on the Recent Catnip Doping Scandal

+

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

+

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+
+ +``` + +# --solutions-- + +```html + + + + +
+

Deep Thoughts with Master Camper Cat

+
+
+

A Word on the Recent Catnip Doping Scandal

+

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

+

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+
+ +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md new file mode 100644 index 0000000000..b2b12a594f --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md @@ -0,0 +1,62 @@ +--- +id: 587d774e367417b2b2512a9f +title: Andare direttamente al contenuto usando l'elemento main +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cPp7zuE' +forumTopicId: 301018 +dashedName: jump-straight-to-the-content-using-the-main-element +--- + +# --description-- + +HTML5 ha introdotto diversi nuovi elementi che danno agli sviluppatori più opzioni, incorporando anche funzioni di accessibilità. Questi tag comprendono tra l'altro `main`, `header`, `footer`, `nav`, `article`, e `section`. + +Di default, un browser visualizza questi elementi come fa con il semplice `div`. Tuttavia, usarli dove appropriato dà più significato alla formattazione. Il nome del tag da solo può indicare il tipo di informazione che contiene, aggiungendo significato semantico a quel contenuto. Le tecnologie assistive possono accedere a queste informazioni per fornire ai loro utenti un miglior riepilogo della pagina o delle opzioni di navigazione. + +L'elemento `main` viene utilizzato per avvolgere (indovina) il contenuto principale, e dovrebbe essercene solo uno per pagina. Ha lo scopo di racchiudere le informazioni relative al tema centrale della tua pagina. Non è fatto per includere elementi che si ripetono tra le pagine, come link o banner. + +Inoltre il tag `main` ha una funzione di riferimento incorporata che la tecnologia assistiva può utilizzare per andare rapidamente al contenuto principale. Se hai mai visto un link "Vai al contenuto principale" in cima ad una pagina, usare il tag `main` dà ai dispositivi assistivi quella funzionalità in automatico. + +# --instructions-- + +Camper Cat ha delle grandi idee per la sua pagina di armi ninja. Aiutalo a impostare la formattazione aggiungendo i tag `main` di apertura e chiusura tra `header` e `footer` (trattati in altre sfide). Tieni i tag `main` vuoti per ora. + +# --hints-- + +Il tuo codice dovrebbe avere un tag `main`. + +```js +assert($('main').length == 1); +``` + +I tag `main` dovrebbero stare tra il tag `header` di chiusura e il tag `footer` di apertura. + +```js +assert(code.match(/<\/header>\s*?
\s*?<\/main>/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html +
+

Weapons of the Ninja

+
+ + + +
+``` + +# --solutions-- + +```html +
+

Weapons of the Ninja

+
+
+ +
+
+``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md new file mode 100644 index 0000000000..4d538fde41 --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md @@ -0,0 +1,76 @@ +--- +id: 587d774c367417b2b2512a9d +title: Sapere quando il testo alternativo dovrebbe essere lasciato vuoto +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cM9P4t2' +forumTopicId: 301019 +dashedName: know-when-alt-text-should-be-left-blank +--- + +# --description-- + +Nell'ultima sfida, hai imparato che usando i tag `img`, è obbligatorio includere un attributo `alt`. Tuttavia, a volte le immagini sono già raggruppate con una didascalia che le descrive, o sono utilizzate solo a scopo decorativo. In questi casi, il testo `alt` può sembrare ridondante o inutile. + +Quando un'immagine è già spiegata con del contenuto testuale o non aggiunge altro significato alla pagina, il tag `img` ha ancora bisogno di un attributo `alt`, ma esso può essere impostato su una stringa vuota. Un esempio: + +```html + +``` + +Le immagini di sfondo solitamente cadono nella categoria 'decorativo'. Tuttavia, sono tipicamente applicate con regole CSS e quindi sono escluse dal processo di lettura dello schermo. + +**Nota:** Per le immagini con didascalia, potresti voler includere comunque il testo `alt` poiché aiuta i motori di ricerca a catalogare il contenuto dell'immagine. + +# --instructions-- + +Camper Cat ha scritto lo scheletro della pagina per la sezione blog del suo sito. Vuole aggiungere una separazione visiva tra i suoi due articoli usando l'immagine decorativa di una spada samurai. Aggiungi un attributo `alt` al tag `img` e impostalo su una stringa vuota. (Nota che il link all'immagine sorgente `src` non punta ad un file reale - non preoccuparti che non ci siano spade mostrate nella pagina.) + +# --hints-- + +Il tuo tag `img` dovrebbe avere un attributo `alt`. + +```js +assert(!($('img').attr('alt') == undefined)); +``` + +L'attributo `alt` dovrebbe essere impostato su una stringa vuota. + +```js +assert($('img').attr('alt') == ''); +``` + +# --seed-- + +## --seed-contents-- + +```html +

Deep Thoughts with Master Camper Cat

+
+

Defeating your Foe: the Red Dot is Ours!

+

To Come...

+
+ + + +
+

Is Chuck Norris a Cat Person?

+

To Come...

+
+``` + +# --solutions-- + +```html +

Deep Thoughts with Master Camper Cat

+
+

Defeating your Foe: the Red Dot is Ours!

+

To Come...

+
+ + + +
+

Is Chuck Norris a Cat Person?

+

To Come...

+
+``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md new file mode 100644 index 0000000000..d3e70ffa7e --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md @@ -0,0 +1,244 @@ +--- +id: 587d778d367417b2b2512aaa +title: Rendere gli elementi visibili solo a uno screen reader usando del CSS ad hoc +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cJ8QGkhJ' +forumTopicId: 301020 +dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css +--- + +# --description-- + +Hai notato che tutte le sfide di accessibilità viste finora non hanno utilizzato alcun CSS? Questo mostra quanto è importante utilizzare una struttura logica e dei tag semanticamente significativi intorno al contenuto, prima di introdurre l'aspetto del visual design. + +Tuttavia, la magia dei CSS può anche migliorare l'accessibilità sulla tua pagina quando vuoi nascondere visivamente i contenuti destinati solo agli screen reader. Questo accade quando le informazioni sono in formato visivo (come un grafico), ma gli utenti degli screen reader hanno bisogno di una presentazione alternativa (come una tabella) per accedere ai dati. Il CSS è utilizzato per posizionare gli elementi destinati solo agli screen reader fuori dall'area visiva della finestra del browser. + +Ecco un esempio delle regole CSS che lo rendono possibile: + +```css +.sr-only { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + top: auto; + overflow: hidden; +} +``` + +**Nota:** I seguenti approcci CSS NON fara la stessa cosa: + +
    +
  • display: none; o visibility: hidden; nascondono i contenuti a tutti, compresi gli utenti degli screen reader
  • +
  • Assegnare valori nulli per le dimensioni in pixel, come width: 0px; height: 0px; rimuove l'elemento dal flusso del documento, di conseguenza gli screen reader lo ignoreranno
  • +
+ +# --instructions-- + +Camper Cat ha creato un bel grafico a barre sovrapposte per la sua pagina di allenamento, e ha messo i dati in una tabella per i suoi utenti ipovedenti. La tabella ha già una classe `sr-only`, ma le regole CSS non sono ancora complete. Assegna a `position` il valore `absolute`, a `left` il valore `-10000px`, e a `width` e `height` il valore `1px`. + +# --hints-- + +Il tuo codice dovrebbe impostare la proprietà `position` della classe `sr-only` al valore `absolute`. + +```js +assert($('.sr-only').css('position') == 'absolute'); +``` + +Il tuo codice dovrebbe impostare la proprietà `left` della classe `sr-only` ad un valore di `-10000px`. + +```js +assert($('.sr-only').css('left') == '-10000px'); +``` + +Il tuo codice dovrebbe impostare la proprietà `width` della classe `sr-only` ad un valore di `1` pixel. + +```js +assert(code.match(/width:\s*?1px/gi)); +``` + +Il tuo codice dovrebbe impostare la proprietà `height` della classe `sr-only` ad un valore di `1` pixel. + +```js +assert(code.match(/height:\s*?1px/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Training

+ +
+
+

Master Camper Cat's Beginner Three Week Training Program

+
+ +

[Stacked bar chart]

+
+
Breakdown per week of time to spend training in stealth, combat, and weapons.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & AgilityCombatWeaponsTotal
Week One35210
Week Two45312
Week Three46313
+
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye, world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
© 2018 Camper Cat
+ +``` + +# --solutions-- + +```html + + + + +
+

Training

+ +
+
+

Master Camper Cat's Beginner Three Week Training Program

+
+ +

[Stacked bar chart]

+
+
Breakdown per week of time to spend training in stealth, combat, and weapons.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & AgilityCombatWeaponsTotal
Week One35210
Week Two45312
Week Three46313
+
+
+

Stealth & Agility Training

+

Climb foliage quickly using a minimum spanning tree approach

+

No training is NP-complete without parkour

+
+
+

Combat Training

+

Dispatch multiple enemies with multithreaded tactics

+

Goodbye, world: 5 proven ways to knock out an opponent

+
+
+

Weapons Training

+

Swords: the best tool to literally divide and conquer

+

Breadth-first or depth-first in multi-weapon training?

+
+
© 2018 Camper Cat
+ +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md new file mode 100644 index 0000000000..7088082626 --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md @@ -0,0 +1,106 @@ +--- +id: 587d7790367417b2b2512aaf +title: Rendere i link navigabili con le chiavi di accesso HTML +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cQvmaTp' +forumTopicId: 301021 +dashedName: make-links-navigable-with-html-access-keys +--- + +# --description-- + +HTML offre l'attributo `accesskey` per specificare una scorciatoia da tastiera per attivare o portare il focus su un elemento. L'aggiunta di un attributo `accesskey` può rendere la navigazione più efficiente per chi usa solo la tastiera. + +HTML5 permette di utilizzare questo attributo su qualsiasi elemento, ma esso è particolarmente utile quando viene utilizzato con un elemento interattivo. Questo include link, pulsanti e controlli dei moduli. + +Ecco un esempio: + +```html + +``` + +# --instructions-- + +Camper Cat vuole che i link intorno ai due titoli degli articoli del blog abbiano delle scorciatoie da tastiera, in modo che gli utenti possano passare rapidamente alla storia completa. Aggiungi un attributo `accesskey` ad entrambi i link e imposta il primo a `g` (per Garfield) e il secondo a `c` (per Chuck Norris). + +# --hints-- + +Il tuo codice dovrebbe avere un attributo `accesskey` sul tag `a` con l' `id` di `first`. + +```js +assert($('#first').attr('accesskey')); +``` + +Il tuo codice dovrebbe avere un attributo `accesskey` sul tag `a` con l' `id` di `second`. + +```js +assert($('#second').attr('accesskey')); +``` + +Il tuo codice dovrebbe impostare l'attributo `accesskey` sul tag `a` con l'`id` di `first` a `g`. Nota che c'è differenza tra lettere maiuscole e minuscole. + +```js +assert($('#first').attr('accesskey') == 'g'); +``` + +Il tuo codice dovrebbe impostare l'attributo `accesskey` sul tag `a` con l'`id` di `second` a `c`. Nota che c'è differenza tra lettere maiuscole e minuscole. + +```js +assert($('#second').attr('accesskey') == 'c'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+ + +

The Garfield Files: Lasagna as Training Fuel?

+ + +

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

+
+
+ + +

Is Chuck Norris a Cat Person?

+ + +

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

+
+
© 2018 Camper Cat
+ +``` + +# --solutions-- + +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+ + +

The Garfield Files: Lasagna as Training Fuel?

+ + +

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

+
+
+ + +

Is Chuck Norris a Cat Person?

+ + +

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

+
+
© 2018 Camper Cat
+ +``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md new file mode 100644 index 0000000000..110ade6ebb --- /dev/null +++ b/curriculum/challenges/italian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md @@ -0,0 +1,116 @@ +--- +id: 587d7788367417b2b2512aa3 +title: Rendere più semplice la navigazione dagli screen reader con il riferimento al footer +challengeType: 0 +videoUrl: 'https://scrimba.com/c/crVrDh8' +forumTopicId: 301022 +dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark +--- + +# --description-- + +Simile a `header` e a `nav`, l'elemento `footer` ha un riferimento incorporato che consente alle tecnologie assistive di navigare rapidamente ad esso. Esso viene utilizzato principalmente per contenere informazioni sul copyright o link a documenti correlati che di solito stanno in fondo a una pagina. + +# --instructions-- + +La pagina di allenamento di Camper Cat sta procedendo bene. Sostituisci il `div` usato per contenere le informazioni sul copyright in fondo alla pagina con un elemento `footer`. + +# --hints-- + +Il tuo codice dovrebbe avere un tag `footer`. + +```js +assert($('footer').length == 1); +``` + +Il tuo codice non dovrebbe avere alcun tag `div`. + +```js +assert($('div').length == 0); +``` + +Il tuo codice dovrebbe avere un tag `footer` di apertura e uno di chiusura. + +```js +assert(code.match(/