Merge pull request #3682 from google/extern-it

Add external macro to many links in it/.

Author: petele

src/content/it/fundamentals/design-and-ui/media/images.md

@@ -24,7 +24,7 @@ Il Web design reattivo consente di modificare disposizione e contenuti in base a
 <img class="center" src="img/art-direction.png" alt="Esempio di direzione artistica"
 srcset="img/art-direction.png 1x, img/art-direction-2x.png 2x">
 
-In altre circostanze potrebbe essere necessario modificare drasticamente l'immagine, come ad esempio ridimensionarla, ritagliarla o persino sostituirla. In questi casi, le modifiche all'immagine vengono definite 'direzione artistica'. Consulta [responsiveimages.org/demos/](http://responsiveimages.org/demos/) per ulteriori esempi.
+In altre circostanze potrebbe essere necessario modificare drasticamente l'immagine, come ad esempio ridimensionarla, ritagliarla o persino sostituirla. In questi casi, le modifiche all'immagine vengono definite 'direzione artistica'. Consulta [responsiveimages.org/demos/](http://responsiveimages.org/demos/){: .external } per ulteriori esempi.
 
 
 {% include "web/_shared/udacity/ud882.html" %}
@@ -359,7 +359,7 @@ alt="Esempio di pagina che utilizza FontAwesome come icone dei caratteri.">
 {% includecode content_path="web/fundamentals/design-and-ui/media/_code/icon-font.html" region_tag="iconfont"   adjust_indentation="auto" %}
 </pre>
 
-Esistono diversi caratteri per icone gratuiti e a pagamento come [Font Awesome](http://fortawesome.github.io/Font-Awesome/), [Pictos](http://pictos.cc/) e [Glyphicons](http://glyphicons.com/).
+Esistono diversi caratteri per icone gratuiti e a pagamento come [Font Awesome](http://fortawesome.github.io/Font-Awesome/){: .external }, [Pictos](http://pictos.cc/) e [Glyphicons](http://glyphicons.com/).
 
 Equilibra il peso delle richieste HTTP aggiuntive e le dimensioni del file con le esigenze in termini di icone. Ad esempio, se occorrono poche icone è consigliabile l'utilizzo di un'immagine o di uno sprite di immagine.
 
@@ -384,11 +384,11 @@ Spesso le immagini richiedono il download di molti dati e occupano una parte ril
 
 ### Scelta del formato corretto
 
-Esistono due tipi di immagini da prendere in considerazione: [immagini vettoriali](http://it.wikipedia.org/wiki/Grafica_vettoriale) e [immagini raster](http://it.wikipedia.org/wiki/Grafica_raster). Per le immagini raster occorre selezionare il formato di compressione appropriato, come ad esempio GIF, PNG e JPG.
+Esistono due tipi di immagini da prendere in considerazione: [immagini vettoriali](http://it.wikipedia.org/wiki/Grafica_vettoriale){: .external } e [immagini raster](http://it.wikipedia.org/wiki/Grafica_raster). Per le immagini raster occorre selezionare il formato di compressione appropriato, come ad esempio GIF, PNG e JPG.
 
 Le **immagini raster** sono simili alle fotografie e alle altre immagini costituite da una griglia di pixel o punti singoli. Di solito, le immagini raster vengono prodotte da fotocamere o scanner ed è possibile crearle nel browser con l'elemento `canvas`. La dimensione del file è direttamente proporzionale alla dimensione dell'immagine. Aumentando le dimensioni delle immagini raster rispetto a quelle originali si ottiene un effetto sfocato poiché il browser deve riempire in qualche modo i pixel mancanti.
 
-Le **immagini vettoriali**, come logo e line art, vengono definite da un insieme di curve, linee, forme e colori di riempimento, create con programmi come Adobe Illustrator o Inkscape e salvate in un formato vettoriale come ad esempio [SVG](http://css-tricks.com/using-svg/). Le immagini vettoriali vengono realizzate con semplici primitive ed è possibile ridimensionarle senza perdite di qualità o modifiche della dimensione del file.
+Le **immagini vettoriali**, come logo e line art, vengono definite da un insieme di curve, linee, forme e colori di riempimento, create con programmi come Adobe Illustrator o Inkscape e salvate in un formato vettoriale come ad esempio [SVG](http://css-tricks.com/using-svg/){: .external }. Le immagini vettoriali vengono realizzate con semplici primitive ed è possibile ridimensionarle senza perdite di qualità o modifiche della dimensione del file.
 
 Per la scelta del formato corretto è importante prendere in considerazione l'origine dell'immagine (raster o vettoriale) e i contenuti (colori, animazioni, testo e così via). Non esiste un formato adatto a tutti i tipi di immagini: ciascun formato presenta vantaggi e svantaggi.
 
@@ -404,7 +404,7 @@ Per scegliere il formato corretto attieniti alle linee guida seguenti:
 
 È possibile ridurre le dimensioni del file utilizzando il 'post-processing' una volta concluso il salvataggio. Esistono diversi strumenti per la compressione delle immagini: con o senza perdita di informazioni, online, GUI e con riga di comando. È consigliabile eseguire un'ottimizzazione automatizzata dell'immagine come elemento principale del flusso di lavoro in uso.
 
-Esistono diversi strumenti per eseguire un'ulteriore compressione senza perdita di informazioni dei file JPG e PNG senza compromettere la qualità dell'immagine. Per il formato JPG, prova [jpegtran](http://jpegclub.org/) o [jpegoptim](http://freshmeat.net/projects/jpegoptim/), disponibile solo su Linux e da eseguire con l'opzione `strip-all`. Per il formato PNG, prova [OptiPNG](http://optipng.sourceforge.net/) o [PNGOUT](http://www.advsys.net/ken/util/pngout.htm).
+Esistono diversi strumenti per eseguire un'ulteriore compressione senza perdita di informazioni dei file JPG e PNG senza compromettere la qualità dell'immagine. Per il formato JPG, prova [jpegtran](http://jpegclub.org/){: .external } o [jpegoptim](http://freshmeat.net/projects/jpegoptim/), disponibile solo su Linux e da eseguire con l'opzione `strip-all`. Per il formato PNG, prova [OptiPNG](http://optipng.sourceforge.net/) o [PNGOUT](http://www.advsys.net/ken/util/pngout.htm).
 
 ##Utilizzo degli sprite immagine
 

src/content/it/fundamentals/design-and-ui/responsive/index.md

@@ -26,7 +26,7 @@ I formati dello schermo utilizzati da telefoni, 'phablet', tablet, desktop, cons
   </video>
 
 
-Il Responsive Web Design, creato da [Ethan Marcotte in A List Apart](http://alistapart.com/article/responsive-web-design/) risponde alle esigenze di utenti e dispositivi impiegati. La disposizione dei contenuti varia in base alle dimensioni e alle caratteristiche del dispositivo. Ad esempio, un telefono visualizza i contenuti su una sola colonna mentre un tablet ne adopera due.
+Il Responsive Web Design, creato da [Ethan Marcotte in A List Apart](http://alistapart.com/article/responsive-web-design/){: .external } risponde alle esigenze di utenti e dispositivi impiegati. La disposizione dei contenuti varia in base alle dimensioni e alle caratteristiche del dispositivo. Ad esempio, un telefono visualizza i contenuti su una sola colonna mentre un tablet ne adopera due.
 
 
 ## Impostazione del viewport 

src/content/it/fundamentals/getting-started/your-first-multi-screen-site/index.md

@@ -7,7 +7,7 @@ description: È possibile accedere al Web con numerosi dispositivi che spaziano
 
 # Il tuo primo sito per dispositivi multipli {: .page-title }
 
-Caution: This article has not been updated in a while and may not reflect reality. Instead, check out the free [Responsive Web Design](https://udacity.com/ud893) course on Udacity.
+Caution: This article has not been updated in a while and may not reflect reality. Instead, check out the free [Responsive Web Design](https://udacity.com/ud893){: .external } course on Udacity.
 
 {% include "web/_shared/contributors/paulkinlan.html" %}
 

src/content/it/fundamentals/performance/critical-rendering-path/analyzing-crp.md

@@ -14,7 +14,7 @@ L'identificazione e la risoluzione dei colli di bottiglia della performance del
 
 
 
-L'obiettivo di ottimizzare il percorso di rendering critico è quello di consentire al browser di disegnare la pagina il più rapidamente possibile: pagine più veloci offrono un impegno superiore, un maggior numero di pagine visualizzate e [conversione migliore](http://www.google.com/think/multiscreen/success.html). Di conseguenza, vogliamo ridurre il tempo che il visitatore deve trascorrere fissando una pagina vuota attraverso l'ottimizzazione delle risorse che sono caricate e nel relativo ordine.
+L'obiettivo di ottimizzare il percorso di rendering critico è quello di consentire al browser di disegnare la pagina il più rapidamente possibile: pagine più veloci offrono un impegno superiore, un maggior numero di pagine visualizzate e [conversione migliore](http://www.google.com/think/multiscreen/success.html){: .external }. Di conseguenza, vogliamo ridurre il tempo che il visitatore deve trascorrere fissando una pagina vuota attraverso l'ottimizzazione delle risorse che sono caricate e nel relativo ordine.
 
 Per facilitare l'illustrazione di questo processo, iniziamo con il caso più semplice possibile e costruiamo in modo incrementale la nostra pagina affinché includa risorse aggiuntive, stili e logica di applicazione. Durante questo processo, vedremo in che modo le cose possono andare storte e come poter ottimizzare ciascuno di questi casi.
 

src/content/it/fundamentals/performance/critical-rendering-path/constructing-the-object-model.md

@@ -33,7 +33,7 @@ Iniziamo con il caso più semplice possibile: una pagina HTML semplice con un po
 <img src="images/full-process.png" alt="Processo di costruzione di DOM">
 
 1. **Conversione:** il browser legge i byte raw di HTML dal disco o dalla rete e li traduce in caratteri singoli sulla base della codifica specifica del file (ad es. UTF-8).
-1. **Suddivisione in token:** il browser converte le stringhe di caratteri in token distinti specificati da [W3C HTML5 standard](http://www.w3.org/TR/html5/), ad es. "<html>", "<body>" e altre stringhe all'interno di "parentesi uncinate". Ciascun token presenta un significato speciale e una serie di regole.
+1. **Suddivisione in token:** il browser converte le stringhe di caratteri in token distinti specificati da [W3C HTML5 standard](http://www.w3.org/TR/html5/){: .external }, ad es. "<html>", "<body>" e altre stringhe all'interno di "parentesi uncinate". Ciascun token presenta un significato speciale e una serie di regole.
 1. **Lessico:** i token emessi sono convertiti in 'oggetti' che definiscono le loro proprietà e regole.
 1. **Costruzione DOM:** infine, dato che il markup HTML definisce le relazioni tra i tag diversi (alcuni tag sono contenuti all'interno di tag), gli oggetti creati sono collegati in una struttura di dati ad albero che acquisisce anche le relazioni padre-figlio definite nel markup originario: oggetto _HTML_ è parente di oggetto _body_, _body_ è parente di oggetto _paragraph_, e così via.
 
@@ -73,7 +73,7 @@ Perché CSSOM presenta una struttura ad albero? Quando si calcola il set di stil
 
 Per rendere la cosa più concreta, tieni presente la struttura CSSOM di cui sopra. Qualsiasi testo contenuto all'interno del tag _span_ che viene posizionato all'interno dell'elemento corpo avrà una dimensione carattere di 16 pixel e il testo rosso: la direttiva delle dimensioni del font verrà eseguita a catena dal corpo allo span. Tuttavia, se il tag span è figlio di un tag paragrafo (p), allora i relativi contenuti non saranno visualizzati.
 
-Inoltra, tieni presente che la struttura di cui sopra non rappresenta l'albero CSSOM completo e mostra solo gli stili che abbiamo deciso di sostituire nel nostro foglio di stile. Ogni browser offre il proprio set di stili predefiniti, noti anche come `user agent styles` (quello che vediamo quando non ne forniamo di nostri) e i nostri stili semplicemente si sostituiscono a questi predefiniti (ad es. [stili predefiniti IE](http://www.iecss.com/)). Se hai mai ispezionato i tuoi 'computed styles' di Chrome DevTools e ti sei mai domandato da dove provengono tutti gli stili, ora lo sai.
+Inoltra, tieni presente che la struttura di cui sopra non rappresenta l'albero CSSOM completo e mostra solo gli stili che abbiamo deciso di sostituire nel nostro foglio di stile. Ogni browser offre il proprio set di stili predefiniti, noti anche come `user agent styles` (quello che vediamo quando non ne forniamo di nostri) e i nostri stili semplicemente si sostituiscono a questi predefiniti (ad es. [stili predefiniti IE](http://www.iecss.com/){: .external }). Se hai mai ispezionato i tuoi 'computed styles' di Chrome DevTools e ti sei mai domandato da dove provengono tutti gli stili, ora lo sai.
 
 Sei curioso di sapere quanto è durata l'elaborazione CSS? Registra una barra temporale in DevTools e cerca l'evento 'Recalculate Style': a differenza dell'elaborazione DOM, la barra temporale non mostra una voce separata 'Parse CSS', invece acquisisce l'analisi e la costruzione della struttura CSSOM, oltre al calcolo ricorsivo dei computed style sotto questo singolo evento.
 

src/content/it/fundamentals/performance/critical-rendering-path/measure-crp.md

@@ -37,7 +37,7 @@ Quindi cosa significano queste informazioni cronologiche?
 La specifica HTML detta condizioni precise per ogni evento: quando deve essere attivato, quali condizioni devono essere soddisfatte e così via. Per i nostri scopi, ci concentreremo solo su alcuni traguardi relativi al percorso di rendering critico:
 
 * **domInteractive** segna quando DOM è pronto.
-* **domContentLoaded** solitamente segna quando [sia DOM che CSSOM sono pronti](http://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/).
+* **domContentLoaded** solitamente segna quando [sia DOM che CSSOM sono pronti](http://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/){: .external }.
     * In assenza di JavaScript con blocco parser, _DOMContentLoaded_ verrà attivato immediatamente dopo _domInteractive_.
 * **domComplete** segna quando la pagina e tutte le relative sottorisorse sono pronte.
 
@@ -50,7 +50,7 @@ La specifica HTML detta condizioni precise per ogni evento: quando deve essere a
 L'esempio di cui sopra potrebbe sembrare leggermente scoraggiante a prima vista, ma in realtà è davvero abbastanza semplice. Navigation Timing API acquisisce tutte le informazioni temporali pertinenti e il nostro codice attende semplicemente che l'evento `onload` sia attivato — ricorda che l'evento onload si attiva dopo domInteractive, domContentLoaded e domComplete &mdash e calcola la differenza tra le varie informazioni cronologiche.
 <img src="images/device-navtiming-small.png" class="center" alt="Demo di NavTiming">
 
-Detto questo, adesso disponiamo di traguardi specifici da monitorare e una funzione semplice per l'output di queste misurazioni. Invece di stampare queste metriche sulla pagina, puoi anche modificare il codice così da inviarle a una server di analisi ([Google Analytics esegue l'operazione automaticamente](https://support.google.com/analytics/answer/1205784)), che rappresenta un ottimo modo per controllare le performance delle tue pagine che possono trarre beneficio da un lavoro di ottimizzazione.
+Detto questo, adesso disponiamo di traguardi specifici da monitorare e una funzione semplice per l'output di queste misurazioni. Invece di stampare queste metriche sulla pagina, puoi anche modificare il codice così da inviarle a una server di analisi ([Google Analytics esegue l'operazione automaticamente](https://support.google.com/analytics/answer/1205784){: .external }), che rappresenta un ottimo modo per controllare le performance delle tue pagine che possono trarre beneficio da un lavoro di ottimizzazione.
 
 
 

src/content/it/fundamentals/performance/optimizing-content-efficiency/http-caching.md

@@ -139,7 +139,7 @@ Non esiste un metodo di caching migliore di altri. A seconda del tuo schema di t
 
 Alcuni suggerimenti e tecniche da tenere a mente nel definire la strategia di caching:
 
-1. **Utilizza URL coerenti:** se offri il medesimo contenuto su URL diversi, tale contenuto verrà recuperato e memorizzato più volte. Suggerimento: ricorda che [gli URL sono case sensitive](http://www.w3.org/TR/WD-html40-970708/htmlweb.html)!
+1. **Utilizza URL coerenti:** se offri il medesimo contenuto su URL diversi, tale contenuto verrà recuperato e memorizzato più volte. Suggerimento: ricorda che [gli URL sono case sensitive](http://www.w3.org/TR/WD-html40-970708/htmlweb.html){: .external }!
 2. **Assicurati che il server fornisca un token di convalida (ETag):** con i token di convalida non è più necessario trasferire gli stessi byte se la risorsa sul server non è cambiata.
 3. **Individua le risorse che possono essere messe in cache da intermediari:** quelle con risposte identiche per tutti gli utenti sono perfette per essere messe in cache da un CDN e altri intermediari.
 4. **Stabilisci la durata ottimale della cache per ogni risorsa:**risorse diverse possono avere esigenze di refresh diverse. Verifica e stabilisci il valore max-age idoneo per ciascuna.