initial commit

4 files changed, 934 insertions, 0 deletions

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
new file mode 100644
index 0000000000..3c15046cd4
--- /dev/null
+++ b/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">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.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Competenze base sui computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">software di base installato</a>, conoscenze base di gestione dei file (<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>), familiarità coi fondamenti di HTML (come trattati in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>) e con <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini in HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivi:</th>
+   <td>Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Audio_e_video_nel_web">Audio e video nel web</h2>
+
+<p>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 <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (e più tardi <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>). 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à.</p>
+
+<p>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.</p>
+
+<p>Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">campioni audio, video e esempi di codice</a> per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi {{glossary("OVP","OVPs")}} (online video providers - fornitori di video online) come <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, e <a href="https://vimeo.com/">Vimeo</a>, e fornitori di audio online, come <a href="https://soundcloud.com/">Soundcloud</a>. 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.</p>
+</div>
+
+<h3 id="L'elemento_&lt;video>">L'elemento &lt;video&gt;</h3>
+
+<p>L'elemento {{htmlelement("video")}} permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:</p>
+
+<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.webm"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Le caratteristiche sono:</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>Come per l'elemento {{htmlelement("img")}}, l'attributo <code>src</code> contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilessia</a>). Si può usare sia l'attributo <code>controls</code> per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate <a href="/en-US/docs/Web/API/HTMLMediaElement">API JavaScript</a>. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.</dd>
+ <dt>Il paragrafo tra i tag <code>&lt;video&gt;</code></dt>
+ <dd>Questo paragrafo è chiamato <strong>fallback content</strong> (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <code>&lt;video&gt;</code>, 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.</dd>
+</dl>
+
+<p>Il video integrato apparirà più o meno così:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>Puoi provare l'esempio qui: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">try the example</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">codice sorgente</a>).</p>
+
+<h3 id="Supportare_molti_formati">Supportare molti formati</h3>
+
+<p>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.</p>
+
+<p>Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati <strong>container formats</strong> (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.</p>
+
+<p>Anche le tracce audio e video hanno diversi formati, per esempio:</p>
+
+<ul>
+ <li>Un contenitore WebM in genere include l'audio Ogg Vorbis con un video VP8/VP9. Ciò è supportato principalmente in Firefox e Chrome.</li>
+ <li>Un MP4 spesso include audio AAC o MP3 con video H.264. Questa soluzione è principalmente supportata in Internet Explorer e Safari.</li>
+ <li>Il più vecchio contenitore Ogg tende ad andare verso l'audio Ogg Vorbis e il video Ogg Theora. Questa soluzione era supportata principalmente in Firefox e Chrome, ma è sostanzialmente stata rimpiazzata dal formato di migliore qualità WebM.</li>
+</ul>
+
+<p>Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: non è così semplice, come puoi vedere nella nostra tabella<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> audio-video codec compatibility table</a>. 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.</p>
+</div>
+
+<p>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 <strong>{{Glossary("Codec","Codecs")}}</strong>, 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à.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> ti potresti chiedere il perché di questa situazione. I formati <strong>MP3 </strong> (for audio) and <strong>MP4/H.264</strong> (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.</p>
+</div>
+
+<p>Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">updated example</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">try it live here</a>, also):</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Qui abbiamo tirato fuori l'attributo <code>src</code> dal tag <code>&lt;video&gt;</code> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <code>&lt;source&gt;</code> 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.</p>
+
+<p>Ogni elemento <code>&lt;source&gt;</code> ha un attributo <code>type</code>; è 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.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: il nostro <a href="/en-US/docs/Web/HTML/Supported_media_formats">articolo sui formati media supportati </a>contiene alcuni comuni {{glossary("MIME type","MIME types")}}.</p>
+</div>
+
+<h3 id="Altre_caratteristiche_dell'elemento_&lt;video>">Altre caratteristiche dell'elemento &lt;video&gt;</h3>
+
+<p>Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:</p>
+
+<pre class="brush: html">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Questo ci darà un output simile a questo:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Le nuove funzionalità sono:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} e {{htmlattrxref("height","video")}}</dt>
+ <dd>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 <strong>aspect ratio</strong>. 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.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>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.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Questo attributo fa si che il video parta con l'audio disattivato per default.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>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.</dd>
+</dl>
+
+<p>Puoi trovare gli esempi sopra su <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (also <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>). Nota che non abbiamo incluso l'attributo <code>autoplay</code> nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!</p>
+
+<h3 id="L'elemento_&lt;audio>">L'elemento &lt;audio&gt;</h3>
+
+<p>L'elemento {{htmlelement("audio")}} funziona esattamente come l'elemento {{htmlelement("video")}}, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Ciò produce qualcosa del genere, in un browser:</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi riprodurre<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html"> the audio demo live</a> on Github (also see the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">audio player source code</a>.)</p>
+</div>
+
+<p>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:</p>
+
+<ul>
+ <li>l'elemento {{htmlelement("audio")}} non supporta gli attributi <code>width</code>/<code>height</code> — non essendoci la componente video, non c'è nulla a cui poter assegnare larghezza o altezza.</li>
+ <li>non supporta neanche l'attributo <code>poster</code> — per la stessa ragione: nessuna componente visiva.</li>
+</ul>
+
+<p>A parte ciò,  <code>&lt;audio&gt;</code> supporta tutte le caratteristiche di <code>&lt;video&gt;</code> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.</p>
+
+<h2 id="Mostrare_le_traccie_testuali_(sottotitoli)_dei_video">Mostrare le traccie testuali (sottotitoli) dei video</h2>
+
+<p>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:</p>
+
+<ul>
+ <li>molta gente ha invalidità uditive (difficoltà di ascolto, sordità) e non può sentire l'audio.</li>
+ <li>altri potrebbero non essere in grado di sentire perchè si trovano in un ambiente rumoroso (come un bar affollato quando viene trasmesso un evento sportivo) o potrebbero voler evitare di disturbare gli altri, se si trovano in un ambiente silenzioso (come una bibblioteca).</li>
+ <li>le persone che non parlano la lingua del video, potrebbero desiderare una trascrizione o una traduzione che gli aiuti a capire il contenuto del media.</li>
+</ul>
+
+<p>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 <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> e l'elemento {{htmlelement("track")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.</p>
+</div>
+
+<p>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 <strong>cues (battute)</strong>, e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:</p>
+
+<dl>
+ <dt>subtitles</dt>
+ <dd>Traduzioni di materiale straniero, per chi non capisce la lingua</dd>
+ <dt>captions</dt>
+ <dd>trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.</dd>
+ <dt>timed descriptions</dt>
+ <dd>testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.</dd>
+</dl>
+
+<p>Un tipico file WebVTT appare così:</p>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+  ...</code>
+</pre>
+
+<p>Per visualizzarlo insieme al riproduttore di media HTML, devi:</p>
+
+<ol>
+ <li>salvarlo come file <code>.vtt</code> in un posto adatto</li>
+ <li>collegare il file <code>.vtt</code>con l'elemento {{htmlelement("track")}}. Questo elemento <code>&lt;track&gt;</code> deve essere annidato dentro <code>&lt;audio&gt;</code> o <code>&lt;video&gt;</code>, ma dopo tutti gli elementi <code>&lt;source&gt;</code>. Usa l'attributo {{htmlattrxref("kind","track")}} per specificare se le battute sono <code>subtitles</code>, <code>captions</code>, o <code>descriptions</code>. Inoltre, usa l'attributo {{htmlattrxref("srclang","track")}} per dire al browser in quale lingua sono scritti i sottotitoli.</li>
+</ol>
+
+<p>Ecco un esempio:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>Ciò produrrà un video coi sottotitoli visualizzati più o meno così:</p>
+
+<p><img alt='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."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>Per avere più dettagli, leggi <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Puoi trovare l'esempio sviluppato in questo articolo qui: <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a>, su Github, scritto da Ian Devlin (guarda anche il <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">codice sorgente)</a>. 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. </p>
+
+<div class="note">
+<p><strong>Nota</strong>: 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.</p>
+</div>
+
+<h2 id="Active_learning_Includere_un_proprio_audio_o_video">Active learning: Includere un proprio audio o video</h2>
+
+<p>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 <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> e <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Ci piacerebbe che facessi un tentativo!</p>
+
+<p>Se non sai generare acun video o audio, allora puoi usare i nostri <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">campioni di file video e audio</a> per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.</p>
+
+<p>Ci piacerebbe che:</p>
+
+<ol>
+ <li>salvassi i tuoi file audio e video in una nuova directory sul tuo computer,</li>
+ <li>creassi un nuovo file <code>index.html</code> nella stessa directory,</li>
+ <li>aggiungessi gli elementi <code>&lt;audio&gt;</code> e <code>&lt;video&gt;</code> alla pagina facendogli mostrare i controlli di default del browser,</li>
+ <li>dessi a entrambi degli elementi <code>&lt;source&gt;</code> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo <code>type</code>,</li>
+ <li>dessi all'elemento <code>&lt;video&gt;</code> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.</li>
+</ol>
+
+<p>Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.</p>
+
+<h2 id="Conclusioni">Conclusioni</h2>
+
+<p>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")}}.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{htmlelement("audio")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("track")}}</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Aggiungere captions e subtitles ai video HTML5</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Distribuire Audio and Video</a>: MOLTI dettagli su come mettere audio e video nelle pagine web usando HTML e JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipolazione di Audio e Video</a>: MOLTI dettagli sulla manipolazione di audio e video usando JavaScript (per esempio come aggiungere dei filtri).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
diff --git a/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html
new file mode 100644
index 0000000000..5015ad5516
--- /dev/null
+++ b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -0,0 +1,352 @@
+---
+title: Immagini in HTML
+slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">All'inizio, il Web era fatto di solo testo ed era piuttosto noioso. Fortunatamente, non è passato molto prima che venisse aggiunta la possibilità di integrare immagini (e altri tipi di contenuto più interessanti) nelle pagine web. Ci sono altri tipi di contenuti multimediali da considerare, ma è logico cominciare con l'elemento {{htmlelement("img")}}, usato per introdurre una singola immagine. In questo articolo vedremo in profondità come usarlo, le nozioni fondamentali, come commentarlo con il titolo usando l'elemento {{htmlelement("figure")}} e come si collega alle immagini di background coi CSS.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Alfabetizzazione di base sui computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">software basilare installato</a>, conoscenze di base su <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">gestione dei file</a>, familiarità con i fondamenti di HTML (come trattati in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivi:</th>
+   <td>Imparare ad introdurre semplici immagini in HTML, commentarle con i titoli e come collegarle alle immagini di background coi CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Come_facciamo_a_mettere_un'immagine_in_una_pagina_web">Come facciamo a mettere un'immagine in una pagina web?</h2>
+
+<p>Per mettere una semplice immagine in una pagina web, usiamo l'elemento {{htmlelement("img")}}. Si tratta di un elemento vuoto (significa che non ha un contenuto testuale ne un tag di chiusura) che richiede un attributo per poter funzionare — <code>src</code> (pronounciato <em>sarc</em>, a volte chiamato col suo nome intero <em>source</em>). L'attributo <code>src</code> contiene un percorso (path) che punta all'immagine che si vuole mettere nella pagina, che può essere un URL relativo o assoluto; nello stesso modo in cui il valore dell'attributo <code>href</code> dell'elemento {{htmlelement("a")}} punta alla risorsa da linkare (si dovrebbe leggere <a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</a> per rinfrescarsi la memoria prima di continuare).</p>
+
+<p>Quindi, per esempio, se l'immagine è chiamata <code>dinosaur.jpg</code> ed è collocata nella stessa directory della pagina HTML, la si può inserire così:</p>
+
+<pre class="brush: html">&lt;img src="dinosaur.jpg"&gt;</pre>
+
+<p>Se l'immagine si trova in una sottodirectory <code>images</code> della directory in cui si trova la pagina HTML (che è la soluzione raccomandata da Google per scopi di indicizzazione e {{glossary("SEO")}}), allora si può fare così:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+
+<p>E così via.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: I motori di ricerca leggono anche il nome del file dell'immagine e ne tengono conto per la SEO — si dovrebbe perciò dare al file un nome descrittivo ("<code>dinosaur.jpg</code>" è meglio di "<code>img835.png</code>").</p>
+</div>
+
+<p>Si potrebbe inserire l'immagine usando l'URL assoluto, per esempio:</p>
+
+<pre class="brush: html">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+
+<p>Ma ciò è inutile, poiché fa fare al browser più lavoro, ricavando nuovamente l'indirizzo IP daccapo dal server DNS quando, quasi sempre, le immagini saranno salvate sullo stesso server web dell'HTML.</p>
+
+<div class="warning">
+<p><strong>Attenzione:</strong> la maggior parte delle immagini è coperta da copyright. Non si deve mostrare un'immagine nel proprio sito, a meno che 1) si sia proprietari dell'immagine 2) si sia ricevuto esplicito permesso scritto dal proprietario dell'immagine, o 3) si abbia prova che l'immagine è di pubblico dominio. Le violazioni al copyright sono illegali ed immorali.</p>
+
+<p>Inoltre, non si deve <strong>mai</strong> far puntare l'attributo <code>src</code> ad una immagine ospitata sul sito di qualcun altro senza avere il permesso: questo comportamento è chiamato "hotlinking" — nuovamente, rubare la larghezza di banda di qualcun altro è illegale e sbagliato (in più rallenta la tua pagina e non si ha il controllo sull'immagine, che potrebbe venir rimossa o sostituita con qualcosa di inappropriato).</p>
+</div>
+
+<p>Il codice riportato sopra dovrebbe dare il seguente risultato:</p>
+
+<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: elementi come {{htmlelement("img")}} e {{htmlelement("video")}} sono a volte indicati come <strong>replaced elements</strong> (elementi sostituiti), perché il contenuto dell'elemento e la dimensione sono determinati da una risorsa esterna (file immagine o video) e non dal contenuto dell'elemento stesso.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: si possono trovare gli esempi di questa sezione in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">codice sorgente</a>.)</p>
+</div>
+
+<h3 id="Testo_alternativo">Testo alternativo</h3>
+
+<p>Il prossimo atrtibuto che guarderemo è <code>alt</code> — il suo valore si suppone che sia una descrizione dell'immagine in forma di testo, che possa essere usata in situazioni nelle quali l'immagine non può essere vista o mostrata. Per esempio, il nostro codice potrebbe essere modificato così:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"&gt;</pre>
+
+<p>Il modo più semplice per testare il funzionamento di questo attributo è di scrivere male il nome del file nell'attributo src (ad esempio dinosooor.jpg); in questo caso il browser non mostrerà l'immagine perché non la troverà e al suo posto mostrerà il testo alternativo.</p>
+
+<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>Perciò, perché mai dovresti visualizzare o aver bisogno del testo alternativo? Può essere utile in numerose situazioni:</p>
+
+<ul>
+ <li>L'utente è ipovedente e utilizza uno screen reader per leggere il web — in un caso come questo è davvero essenziale avere a disposizione un testo alternativo.</li>
+ <li>Come ipotizzato prima si potrebbe aver scritto male il nome del file dell'immagine.</li>
+ <li>Il browser non supporta il tipo di file dell'immagine. Alcune persone usano ancora browser solo testo, come <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, che mostrano il testo alternativo di ogni immagine.</li>
+ <li>Si vuole che il testo sia utilizzato dai motori di ricerca per indicizzare le immagini — I motori di ricerca possono rispondere alle interrogazioni cercando il testo che combacia con la stringa ricercata anche all'interno del testo alternativo delle immagini.</li>
+ <li>Fornire una alternativa agli utenti che hanno disabilitato le immagini per ridurre il consumo di banda e le distrazioni (comportamento diffuso nei paesi in cui l'ampiezza di banda è limitata e costosa).</li>
+</ul>
+
+<p>Cosa si dovrebbe scrivere, esattamente, come valore dell'attributo <code>alt</code>? DIpende dal motivo per cui l'immagine si trova li; in altre parole: cosa si perde se l'immagine non viene vista?</p>
+
+<ul>
+ <li><strong>Decorazione. </strong>Se l'immagine è solo una decorazione e non è parte del contenuto, si può lasciare vuoto, add a blank <code>alt=""</code>, così, per esempio, uno screen reader non perde tempo a leggere contenuto privo di utilità per l'utente. Le immagini decorative non fanno realmente parte del contenuto HTML — {{anch("CSS background images")}} dovrebbero essere usati per introdurre decorazioni — ma se è inevitabile, la miglior cosa da fare è lasciare l'attributo in bianco (<code>alt=""</code>).</li>
+ <li><strong>Contenuto.</strong> Se l'immagine fornisce informazioni significative, fornire le stesse informazioni in forma sintetica con <code>alt</code> text, o ancora meglio, nel testo principale che tutti possono vedere. Non scrivere <code>alt</code> text ridondanti (quanto sarebbe noioso per un utente vedente se tutti i paragrafi fossero scritti due volte di seguito?). Se l'immagine è adeguatamente descritta nel testo principale, si può nuovamente lasciare <code>alt=""</code>.</li>
+ <li><strong>Link.</strong> Se si mette una immagine in un elemento {{htmlelement("a")}} per usarla come link, si dovrebbe comunque fornire un link testuale accessibile (<a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">accessible link text</a>) — in questi casi si può sia scriverlo all'interno dell'elemento <code>&lt;a&gt;</code> o all'interno dell'attributo <code>alt</code> dell'immagine, se si pensa che funzioni meglio.</li>
+ <li><strong>Text.</strong> Non si dovrebbe scrivere del testo nelle immagini (se ad esempio il titolo principale ha bisogno di un effetto ombra, si possono usare i CSS piuttosto che far diventare il testo una immagine). Se davvero non si può evitare di farlo, si dovrebbe comunque fornire il testo tramite l'attributo <code>alt</code>.</li>
+</ul>
+
+<p>La chiave è consentire una esperienza proficua anche quando non si può fruire delle immagini, così che gli utenti non perdano alcun contenuto. Provate a disattivare le immagini nel browser e a vedere qual è il risultato; ci si renderà subito conto di quanto inutili siano degli alt text come "logo" o "il mio posto preferito" quando le immagini non sono visibili:</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La WebAIM's <a href="http://webaim.org/techniques/alttext/">Alternative text guide</a> fornisce più dettagli e se si vogliono più informazioni è sicuramente una buona lettura.</p>
+</div>
+
+<h3 id="Larghezza_e_altezza">Larghezza e altezza</h3>
+
+<p>Si possono usare gli attributi <code>width</code> e <code>height</code> per specificare la larghezza e l'altezza dell'immagine (si possono ricavare le misure in diversi modi: per esempio su un Mac si può usare la combinazione di tasti <kbd>Cmd</kbd> + <kbd>I</kbd> per ottenere le informazioni sull'immagine). Tornando all'esempio, si può fare così:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"&gt;</pre>
+
+<p>In circostanze normali ciò non produce differenze nella visualizzazione, ma se l'immagine non dovesse essere visualizzata (per esempio si è appena aperta la pagina e l'immagine non è ancora stata visualizzata) si noterà che il browser riserva dello spazio per farvi apparire l'immagine:</p>
+
+<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>È una buona cosa da fare — produce un più rapido e fluido caricamento della pagina.</p>
+
+<p>Non si dovrebbe alterare la dimensione dell'immagine per mezzo degli attributi HTML — se si imposta una dimensione troppo grande si otterrà un'immagine sgranata, sfocata; se la si imposta più piccola vuol dire che si spreca banda per far scaricare un'immagine più grande di ciò di cui abbiamo bisogno. Se non si mantiene il corretto rapporto tra le dimensioni (<a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29">aspect ratio</a>) l'immagine risulterà distorta. Si dovrebbe usare un editor di immagini per ridimensionare l'immagine secondo le proprie necessità, prima di metterla su internet.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: se si ha la necessità di alterare le dimensioni dell'immagine, lo si dovrebbe fare coi CSS piuttosto che con l'HTML.</p>
+</div>
+
+<h3 id="Titoli_delle_immagini">Titoli delle immagini</h3>
+
+<p>Come per i<a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E"> link</a>, si può aggiungere un attributo <code>title</code> per fornire ulteriori informazioni di supporto. Nell'esempio, possiamo fare così:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
+
+<p>Ciò produce un tooltip, proprio come accade per i "title" dei link.</p>
+
+<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
+
+<p>I title delle immagini non sono essenziali per aggiungere qualcosa di significativo e spesso è meglio aggiungere queste informazioni di supporto nel testo principale dell'articolo, piuttosto che attaccarle all'immagine. Sono tuttavia utili in alcune circostanze; per esempio in una galleria di immagini, dove non si ha lo spazio per le didascalie.</p>
+
+<h3 id="Apprendimento_attivo_inserire_un'immagine">Apprendimento attivo: inserire un'immagine</h3>
+
+<p>Ok, adesso è il tuo turno! In questa sezione active learning ci piacerebbe fare un semplice esercizio. Sei stato istruito su un fondamentale elemento {{htmlelement("img")}}; ci piacerebbe che inserissi l'immagine reperibile al seguente URL:</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Si, prima abbiamo detto di non fare mai degli "hotlink" a immagini su altri server, ma questo è solo a scopo dimostrativo — ti assolveremo, per questa volta.</p>
+
+<p>Ci piacerebbe anche che:</p>
+
+<ul>
+ <li>aggiungessi alt text e verificassi che funziona sbagliando l'URL dell'immagine;</li>
+ <li>impostassi le corrette <code>width</code> e <code>height</code> (suggerimento: è larga 200px e alta 171px) e poi sperimentassi altri valori per vedere l'effetto;</li>
+ <li>impostassi un <code>title</code> per l'immagine.</li>
+</ul>
+
+<p>Se fai un errore, puoi sempre resettare con l'apposito bottone. Se sei proprio bloccato, premi il bottone <em>Show solution</em> .</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&lt;img&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum"&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h2 id="Aggiungere_note_alle_immagini_(con_figures_e_figure_captions)">Aggiungere note alle immagini (con figures e figure captions)</h2>
+
+<p>Parlando di didascalie, ci sono molti modi per aggiungerle ad una immagine: per esempio non c'è niente ad impedirti di fare così:</p>
+
+<pre class="brush: html">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Questo è ok — produce l'effetto voluto ed è facilmente modificabile con i CSS; ma c'è un problema — non c'è niente che colleghi semanticamente l'immagine alla sua didascalia e ciò può creare problemi agli screen readers; per esempio, quando hai 50 immagini e 50 didascalie, cosa collega una all'altra?</p>
+
+<p>Una soluzione migliore è usare gli elementi dell'HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}} che sono appositamente stati creati per questa ragione: fornire un contenitore semantico per le immagini, che colleghi chiaramente ogni immagine con la sua didascalia; il nostro esempio può essere riscritto così:</p>
+
+<pre>&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>L'elemento {{htmlelement("figcaption")}} dice al browser e alle tecnologie per l'accessibilità (assistive technology) che la didascalia descrive il restante contenuto dell'elemento {{htmlelement("figure")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: dal punto di vista dell'accessibilità, le didascalie e l'{{htmlattrxref('alt','img')}} text hanno ruoli distinti. Le didascalie beneficiano anche coloro che possono vedere l'immagine, mentre il testo alternativo ({{htmlattrxref('alt','img')}} text) fornisce le stesse funzionalità di una immagine che però, manca. Perciò captions e <code>alt</code> text non dovrebbero dire la stessa cosa, perché quando l'immagine manca, appaiono entrambe. Provate a disattivare le immagini nel browser e a vedere l'effetto che fa.</p>
+</div>
+
+<p>Notate che una "figure" non deve necessariamente essere un'immagine — una figure è una unità indipendente di contenuto che:</p>
+
+<ul>
+ <li>esprime il concetto in maniera sintetica e facile da afferrare</li>
+ <li>può comparire in vari punti del flusso lineare della pagina</li>
+ <li>fornisce informazioni essenziali di supporto al testo principale.</li>
+</ul>
+
+<p>Una figure potrebbe essere costituita da diverse immagini, un frammento di codice, audio o video, equazioni, una tabella o altro.</p>
+
+<h3 id="Active_learning_creare_una_figure">Active learning: creare una figure</h3>
+
+<p>In questa sezione di apprendimento attivo, ci piacerebbe che prendessi il codice della precedente sezione active learning e lo trasformassi in una figure:</p>
+
+<ul>
+ <li>annidalo in un elemento {{htmlelement("figure")}}</li>
+ <li>copia il testo dell'attributo <code>title</code>, rimuovi l'attributo <code>title</code>, quindi metti il testo copiato in un elemento {{htmlelement("figcaption")}} sotto all'immagine.</li>
+</ul>
+
+<p>Se fai un errore puoi resettare con l'apposito bottone; se sei proprio bloccato premi il pulsante <em>Show solution</em>.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;figure&gt;\n  &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171"&gt;\n  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
+
+<h2 id="CSS_e_immagini_di_background">CSS e immagini di background</h2>
+
+<p>Puoi anche usare i CSS per inserire immagini nelle pagine web (e anche i JavaScript, ma questa è tutta un'altra storia). Le proprietà dei CSS {{cssxref("background-image")}} — e le altre proprietà <code>background-*</code> — sono usate per controllare il posizionamento delle immagini di sfondo (background). Per esempio, per mettere un'immagine di sfondo ad ogni paragrafo di una pagina, si può fare così:</p>
+
+<pre class="brush: css">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>Le immagini risultanti sono presumibilmente più facili da posizionare e controllare delle immagini HTML, quindi perché complicarsi la vita con le immagini HTML? Come suggerito precedentemente, le immagini introdotte con i CSS hanno solo scopo decorativo — se vuoi aggiungere qualcosa di carino alla tua pagina per migliorare l'effetto visivo, va bene; ma queste immagini non hanno alcun significato semantico — non possonoavere alcun testo equivalente, sono invisibili per gli screen readers, etc. Per questo, servono le immagini HTML.</p>
+
+<p>Quindi, se una immagine ha un contenuto significativo, si dovrebbe inserirla tramite l'HTML; se è puramente decorativa, lo si dovrebbe fare tramite i CSS.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: imparerai molto di più riguardo a <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> nel nostro <a href="/en-US/docs/Learn/CSS">CSS</a> topic.</p>
+</div>
+
+<h2 id="Conclusioni">Conclusioni</h2>
+
+<p>Per ora è tutto — abbiamo trattato le immagini e le didascalie nei dettagli. Nel prossimo articolo cambieremo marcia e vevremo come usare l'HTML per includere video e audio nelle pagine web.</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
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
new file mode 100644
index 0000000000..cc3dbd7892
--- /dev/null
+++ b/files/it/learn/html/multimedia_and_embedding/immagini_reattive/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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{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")}}</div>
+
+<div>
+<p class="summary">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 <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Dovresti già conoscere <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> e come <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">aggiungere immagini a una pagina web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>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.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Perché_le_immagini_reattive">Perché le immagini reattive?</h2>
+
+<p>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:</p>
+
+<p><img alt="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." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+
+<p>Ciò funziona bene su un dispositivo con uno schermo ampio, come un laptop o un desktop (you can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">see the example live</a> and find the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">source code</a> on Github). Non discuteremo molto dei CSS, salvo che per dire questo:</p>
+
+<ul>
+ <li>il contenuto del body è stato fissato ad una larghezza massima di 1200 pixels — sopra a questa larghezza il body rimarrà a 1200px e si centrerà orizzontalmente nella pagina. Sotto a questa larghezza, il body verrà visualizzato al 100% della larghezza della pagina.</li>
+ <li>L'immagine di testa è impostata in modo che il suo centro sia sempre nel centro della testata, indipendentemente dalla larghezza della stessa. Così, se il sito è visto in uno schermo più stretto, i dettagli importanti nel centro dell'immagine (le persone) rimangono visibili, mentre ai lati viene perso ciò che eccede. L'altezza è di 200 px.</li>
+ <li>Le immagini nel contenuto sono impostate in modo che se l'elemento body diventa più stretto delle immagini, queste iniziano a ridursi per rimanere sempre al''interno del body, piuttosto che strabordare.</li>
+</ul>
+
+<p>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.</p>
+
+<p><img alt="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." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
+
+<p>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 <strong>art direction problem</strong>.</p>
+
+<p>Inoltre, non c'è bisogno di includere immagini così grandi se la pagina vien vista sui piccoli schermi dei portatili. - Questa è nota come <strong>resolution switching problem</strong>. Una immagine raster è definita da un certo numero di pixel di larghezza e da un certo numero in altezza; come abbiamo visto parlando di <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a>, 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.</p>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<p>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 (<em>Responsive image technologies</em>) 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 (<em>resolution switching</em>), o immagini diverse adatte a spazi di allocazione di dimensione diversa (<em>art direction</em>.)</p>
+
+<div class="note">
+<p><strong>Nota</strong>: 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.) </p>
+</div>
+
+<h2 id="Come_creare_immagini_reattive">Come creare immagini reattive?</h2>
+
+<p>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 <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS hanno probabilmente migliori strumenti per il responsive design</a> dell'HTML; ne parleremo in un successivo modulo sui CSS.</p>
+
+<h3 id="Cambiare_risoluzione_dimensioni_differenti">Cambiare risoluzione: dimensioni differenti</h3>
+
+<p>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.</p>
+
+<pre class="brush: html">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>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 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">reponsive.html</a> su Github (vedere anche <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">il codice sorgente</a>):</p>
+
+<pre class="brush: html">&lt;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"&gt;</pre>
+
+<p>Gli attributi <code>srcset</code> e <code>sizes</code> 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:</p>
+
+<p><strong><code>srcset</code></strong> definisce il set di immagini tra le quali vogliamo che il browser scelga e quali dimensioni hanno. Prima di ogni virgola, scriviamo:</p>
+
+<ol>
+ <li>un <strong>nome di file immagine</strong> (<code>elva-fairy-480w.jpg</code>.)</li>
+ <li>uno spazio</li>
+ <li>la <strong>dimensione della larghezza dell'immagine in pixels</strong> (<code>480w</code>) — 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 <kbd>Cmd</kbd> + <kbd>I</kbd> per aprire la scheramta di informazioni).</li>
+</ol>
+
+<p><strong><code>sizes</code></strong> 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:</p>
+
+<ol>
+ <li>una <strong>media condition</strong> (<code>(max-width:480px)</code>) — imparerete di più a questo riguardo nella sezione sui <a href="/en-US/docs/Learn/CSS">CSS</a>, 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".</li>
+ <li>uno spazio</li>
+ <li>La <strong>larghezza della posizione</strong> che l'immagine occuperà quando si realizza la condizione (<code>440px</code>.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Per la larghezza della posizione, si può fornire una misura assoluta (<code>px</code>, <code>em</code>) 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.</p>
+</div>
+
+<p>Quindi, definiti questi attributi, il browser farà:</p>
+
+<ol>
+ <li>verifica della larghezza del suo dispositivo</li>
+ <li>calcolo di quale sia la prima condizione tra la lista dell'atributo <code>sizes</code> ad essere vera</li>
+ <li>Look at the slot size given to that media query.</li>
+ <li>Caricamento dell'immagine elencata nell'attributo <code>srcset</code> che maggiormente si avvicina alla dimensione della posizione (slot) scelta.</li>
+</ol>
+
+<p>Fatto! Così a questo punto, se un browser col supporto con una larghezza della viewport di 480px carica la pagina, la <code>(max-width: 480px)</code> media condition sarà vera, perciò verrà scelta la slot da <code>440px</code>, quindi sarà caricata la <code>elva-fairy-480w.jpg</code>, poiché la sua larghezza (<code>480w</code>) è la più vicina ai <code>440px</code>. 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.</p>
+
+<p>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.</p>
+
+<div class="note">
+<p><strong>Note</strong>: nell'elemento {{htmlelement("head")}} del documento si troverà la linea <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>: 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).</p>
+</div>
+
+<h3 id="Utili_strumenti_di_sviluppo">Utili strumenti di sviluppo</h3>
+
+<p>Ci sono alcuni utili <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> 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 (<code>not-responsive.html</code>), poi sono andato in <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools &gt; Web Developer &gt; Responsive Design View - In Firefox, dal sandwich menù -&gt; Sviluppo -&gt; Modalità visualizzazione flessibile</em>), che ti permette di guardare il layout della tua pagina come se fosse visto attraverso dispositivi con diversa dimensione dello schermo.</p>
+
+<p>Ho impostato la larghezza viewport a 320px e poi a 480px; per ciascuna sono andato nel <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector</a>, 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.</p>
+
+<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+
+<p>Dopo, si può controllare se <code>srcset</code> sta funzionando impostando la larghezza viewport come si desidera (impostatela stretta, per esempio), aprendo il Network Inspector (<em>Tools &gt; Web Developer &gt; Network</em>), 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.</p>
+
+<p><img alt="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" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Modificare_la_risoluzione_stessa_dimensione_diverse_risoluzioni">Modificare la risoluzione: stessa dimensione, diverse risoluzioni</h3>
+
+<p>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 <code>srcset</code> con il descrittore x (x-descriptors) e senza <code>sizes</code> — una sintassi piuttosto semplice! Puoi trovare un esempio di come appare in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (vedere anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">codice sorgente</a>):</p>
+
+<pre class="brush: html">&lt;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"&gt;
+</pre>
+
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">In questo esempio è stato applicato il seguente CSS all'immagine per farle avere una larghezza di 320 pixels sullo schermo (also called CSS pixels):</p>
+
+<pre class="brush: css">img {
+  width: 320px;
+}</pre>
+
+<p>In questo caso <code>sizes</code> non è necessario — il browser calcola qual è la risoluzione del display su cui è mostrato e fornisce l'immagine più appropriata tra quelle elencate in <code>srcset</code>. 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 <code>elva-fairy-320w.jpg</code> (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 <code>elva-fairy-640w.jpg</code>. L'immagine a 640px è di 93KB, mentre quella a 320px è di soli 39KB.</p>
+
+<h3 id="Art_direction">Art direction</h3>
+
+<p>To recap, the <strong>art direction problem</strong> 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.</p>
+
+<p>Returning to our original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> example, we have an image that badly needs art direction:</p>
+
+<pre class="brush: html">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
+
+<p>Let's fix this, with {{htmlelement("picture")}}! Like <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> and <code>&lt;audio&gt;</code></a>, The <code>&lt;picture&gt;</code> 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 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> looks like so:</p>
+
+<pre class="brush: html">&lt;picture&gt;
+  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
+  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
+  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>The <code>&lt;source&gt;</code> elements include a <code>media</code> attribute that contains a media condition — as with the first <code>srcset</code> example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, If the viewport width is 799px wide or less, the first <code>&lt;source&gt;</code> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.</li>
+ <li>The <code>srcset</code> attributes contain the path to the image to display. Note that just as we saw with <code>&lt;img&gt;</code> above, <code>&lt;source&gt;</code> can take a <code>srcset</code> attribute with multiple images referenced, and a <code>sizes</code> attribute too. So you could offer multiple images via a <code>&lt;picture&gt;</code> element, but then also offer multiple resolutions of each one too. Realistically, you probably won't want to do this kind of thing very often.</li>
+ <li>In all cases, you must provide an <code>&lt;img&gt;</code> element, with <code>src</code> and <code>alt</code>, right before <code>&lt;/picture&gt;</code>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second <code>&lt;source&gt;</code> element in this example), and a fallback for browsers that don't support the <code>&lt;picture&gt;</code> element.</li>
+</ul>
+
+<p>This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:</p>
+
+<p><img alt="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." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="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" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You should use the <code>media</code> attribute only in art direction scenarios; when you do use <code>media</code>, don't also offer media conditions within the <code>sizes</code> attribute.</p>
+</div>
+
+<h3 id="Why_can't_we_just_do_this_using_CSS_or_JavaScript">Why can't we just do this using CSS or JavaScript?</h3>
+
+<p>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 <code>srcset</code>. 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.</p>
+
+<ul>
+</ul>
+
+<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3>
+
+<p>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.</p>
+
+<p><code>&lt;picture&gt;</code> lets us continue catering to older browsers. You can supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p>
+
+<pre class="brush: html">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li>
+ <li>In a <code>&lt;source&gt;</code> element, you can only refer to images of the type declared in <code>type</code>.</li>
+ <li>As before, you're welcome to use comma-separated lists with <code>srcset</code> and <code>sizes</code>, as needed.</li>
+</ul>
+
+<h2 id="Active_learning_Implementing_your_own_responsive_images">Active learning: Implementing your own responsive images</h2>
+
+<p>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 <code>&lt;picture&gt;</code>, and a resolution switching example that uses <code>srcset</code>.</p>
+
+<ol>
+ <li>Write some simple HTML to contain your code (use <code>not-responsive.html</code> as a starting point, if you like)</li>
+ <li>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.)</li>
+ <li>Use the <code>&lt;picture&gt;</code> element to implement an art direction picture switcher!</li>
+ <li>Create multiple image files of different sizes, each showing the same picture.</li>
+ <li>Use <code>srcset</code>/<code>size</code> to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Use the browser devtools to help work out what sizes you need, as mentioned above.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>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:</p>
+
+<ul>
+ <li><strong>Art direction</strong>: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in close for a mobile layout. This can be solved using the {{htmlelement("picture")}} element.</li>
+ <li><strong>Resolution switching</strong>: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. This can be solved using <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images), and the {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} attributes.</li>
+</ul>
+
+<p>This also draws to a close the entire <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excellent introduction to responsive images</a></li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+</ul>
+
+<div>{{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")}}</div>
diff --git a/files/it/learn/html/multimedia_and_embedding/index.html b/files/it/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..8e1f49dad8
--- /dev/null
+++ b/files/it/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,71 @@
+---
+title: Multimedialità e incorporamento
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Assessment
+  - Audio
+  - Beginner
+  - CodingScripting
+  - Flash
+  - Guide
+  - HTML
+  - Images
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - SVG
+  - TopicStub
+  - Video
+  - iframes
+  - imagemaps
+  - responsive
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">Finora, in questo corso abbiamo visto molto testo. Molto. Testo. Ma il Web sarebbe veramente noisoso con nient'altro che il testo, quindi cominciamo a vedere come rendere il Web animato, con contenuti più interessanti! Questo modulo esplora come usare l'HTML per inserire la multimedialità nelle tue pagine web, inclusi i differenti modi di aggiunta di immagini, e come incorporare video, audio e persino altre intere pagine web.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di cominciare questo modulo, dovresti avere una ragionevole conoscenza delle basi dell'HTML, trattate in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione all'HTML</a>. Se non hai esaminato questo modulo (o qualcosa di simile), prima studialo, poi torna qui!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: se stai lavorando su un computer/tablet/altro dispositivo dove non hai la possibilità di creare propri file, potresti provare (la maggior parte degli) esempi di codice in un programma di codifica online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<p>Questo modulo contiene i seguenti articoli, che ti porteranno attraverso tutti i fondamenti dell'incorporazione della multimedialità nelle pagine web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini nell'HTML</a></dt>
+ <dd>Ci sono altri tipi di multimedialità da considerare, ma è logico cominciare con l'umile elemento {{htmlelement("img")}}, usato per inserire una semplice immagine in una pagina web. In questo articolo vedremo come usarlo in profondità, a cominciare dalle basi, annotandolo con didascalie grazie all'elemento {{htmlelement("figure")}}, e come si relaziona con le immagini di sfondo CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenuti video e audio</a></dt>
+ <dd>In seguito, vedremo come usare gli elemeti HTML5 {{htmlelement("video")}} e {{htmlelement("audio")}} per inserire video e audio nelle nostre pagine, a cominciare dalle basi, fornendo l'accesso a differenti formati di file per differenti browser, aggiungendo didascalie e sottotitoli, e come aggiungere le alternative per browser più vecchi.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Da &lt;object&gt; a &lt;iframe&gt; — altre tecnologie di integrazione</a></dt>
+ <dd>A questo punto ci piacerebbe fare qualche passo di lato, dando un'occhiata ad una coppia di elementi che ti permettono di integrare un'ampia varietà di tipi di contenuti nella tua pagina web: gli elementi {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. Gli <code>&lt;iframe&gt;</code> servono ad integrare altre pagine web, e gli altri due ti permettono di integrare PDF, SVG e anche Flash — una tecnologia sulla via del disuso, ma che ancora vedi in maniera semi-regolare.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Aggiungere grafiche vettoriali al Web</a></dt>
+ <dd>Le grafiche vettoriali possono essere molto utili in certe situazioni. A differenza dei regolari formati come PNG/JPG, esse non si distorcono/pixellano quando aumenti lo zoom — possono rimanere armoniose quando scalate. Questo articolo introduce cosa sono le grafiche vettoriali e come includere il popolare formato {{glossary("SVG")}} nelle pagine web.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Immagini reattive</a></dt>
+ <dd>Con così tanti tipi di dispositivi differenti in grado ora di navigare il Web — dai telefoni mobili ai computer da scrivania — un concetto essenziale per padroneggiare il moderno mondo web è il disegno reattivo (responsive design). Questo si riferisce alla creazione di pagine web che possono automaticamente cambiare le loro caratteristiche per adattarsi a differenti dimensioni dello schermo, risoluzioni, ecc. Questo sarà visto più in dettaglio nel successivo modulo CSS, ma per il momento vedremo gli strumenti a disposizione dell'HTML per creare immagini reattive, incluso l'elemento {{htmlelement("picture")}}.</dd>
+</dl>
+
+<h2 id="Valutazioni">Valutazioni</h2>
+
+<p>Le seguenti valutazioni testeranno il tuo apprendimento delle basi dell'HTML viste nelle guide qui sopra.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Splash page di Mozilla</a></dt>
+ <dd>In questa valutazione, noi testeremo la tua conoscenza di alcune delle tecniche discusse negli articoli di questo modulo, portandoti ad aggiungere alcuni video e immagini alla stravagante splash page tutta riguardo Mozilla!</dd>
+</dl>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Aggiungi una hitmap sulla parte superiore di una immagine</a></dt>
+ <dd>Le mappe di immagini forniscono un meccanismo per collegare differenti parti di una immagine a differenti posti (pensa ad una mappa, che ti rimanda ad ulteriori informazioni riguardo ciascun differente Paese quando gli clicchi sopra). Questa tecnica può qualche volta essere utile.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Letteratura base sul Web 2</a></dt>
+ <dd>
+ <p>Un eccellente corso della fondazione Mozilla, che esplora e testa alcune delle capacità trattate nel modulo <em>Multimedialità e incorporamento</em>. Immergiti più in profondità nelle nozioni fondamentali sulla composizione di pagine web, disegno per l'accessibilità, condivisione risorse, uso di media online e lavoro libero.</p>
+ </dd>
+</dl>