diff options
Diffstat (limited to 'files/it/learn')
72 files changed, 18781 insertions, 0 deletions
diff --git a/files/it/learn/accessibilità/accessibilità_dispositivi_mobili/index.html b/files/it/learn/accessibilità/accessibilità_dispositivi_mobili/index.html new file mode 100644 index 0000000000..46a2b24c4d --- /dev/null +++ b/files/it/learn/accessibilità/accessibilità_dispositivi_mobili/index.html @@ -0,0 +1,336 @@ +--- +title: Accessibilità per dispositivi mobili +slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili +tags: + - Accessibilità + - Articolo + - Mobile + - Principiante + - Responsivo + - Touchscreen + - imparare + - screenreader + - touch +translation_of: Learn/Accessibility/Mobile +--- +<div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibilità")}}</div> + +<p class="summary">L’uso di internet tramite dispositivi mobili è sempre più diffuso, e i sistemi operativi per dispositivi mobili più popolari, Android e iOS, sono dotati di strumenti nativi per l’accessibilità. È dunque importante prendere in considerazione l’accessibilità dei tuoi contenuti su tali piattaforme. Questo articolo tratta specificamente dell’accessibilità per dispositivi mobili.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"><strong>Prerequisiti</strong>:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i <a href="/it/docs/Learn/Accessibilità">precedenti articoli del corso</a><u>.</u></td> + </tr> + <tr> + <th scope="row"><strong>Obiettivo</strong>:</th> + <td>Comprendere i problemi di accessibilità relativi ai dispositivi mobili, e come risolverli.</td> + </tr> + </tbody> +</table> + +<h2 id="Accessibilità_per_dispositivi_mobili"><strong>Accessibilità per dispositivi mobili </strong></h2> + +<p>Lo stato attuale dell’accessibilità, e del supporto degli standard web in generale, è buono nei dispositivi mobili moderni. Sono lontani i giorni in cui i dispositivi mobili utilizzavano tecnologie web completamente differenti dai browser per pc, obbligando gli sviluppatori a fornire siti completamente separati per le due piattaforme (anche se comunque molte aziende continuano a fornire un sito specifico per dispositivi mobili, di solito contenente la parola “mobile” nel dominio).</p> + +<p> </p> + +<p>Oggigiorno, in generale, i dispositivi mobili non hanno problemi a visualizzare correttamente tutti i tipi di siti, e i principali sistemi operativi mobili hanno lettori di schermo nativi. I browser moderni per dispositivi mobili hanno anche un buon supporto per <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a>.</p> + +<p>Per rendere un sito accessibile e usabile su dispositivi mobili devi solo rispettare le buone pratiche generali di disegno e accessibilità web.</p> + +<p> </p> + +<p>Ci sono però alcune eccezioni che richiedono una attenzione particolare; le principali sono:</p> + +<ul> + <li>Meccanismi di controllo: assicurati che i controlli di interfaccia utente, come per esempio i bottoni, siano accessibili sui touchscreen dei dispositivi mobili allo stesso modo in cui lo sono tramite mouse o tastiera su pc o laptop.</li> + <li>Input dell’utente: assicurati che i campi di input richiedano all’utente il minor sforzo possibile (per esempio, nei formulari fai in modo che l’utente debba scrivere il meno possibile).</li> + <li>Disegno responsivo: assicurati che il layout del tuo sito si adatti allo schermo dei dispositivi mobili, mantieni le dimensini delle immagini il più possibile ridotte, e pensa a come ottimizzare le immagini per gli schermi ad alta risouzione. </li> +</ul> + +<h2 id="Riassunto_dei_test_sui_lettori_di_schermo_per_Android_e_iOS"><strong>Riassunto dei test sui lettori di schermo per Android e iOS</strong></h2> + +<p>I più comuni sistemi operativi per dispositivi mobili hanno installati lettori di schermo nativi pienamente funzionanti. Questi funzionano praticamente alla stessa maniera dei lettori di schermo per pc, ma si usano con gesti touch invece che con combinazioni di tasti.</p> + +<p>Prendiamo in considerazione i due principali lettori di schermo per dispositivi mobili: TalkBack per Android e VoiceOver per iOS.</p> + +<h3 id="Android_TalkBack">Android TalkBack</h3> + +<p> </p> + +<p>TalkBack è il lettore di schermo presente di default su Android.</p> + +<p>Per attivarlo, seleziona<em>Impostazioni > Accessibilità > TalkBack</em>, e premi lo switch di attivazione/disattivazione. Inoltre segui qualsiasi altra indicazione che il sistema ti fornisca.</p> + +<p><strong>Nota:</strong> versioni anteriori di TalkBack si attivano con <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">metodi leggermente differenti</a>.</p> + +<p>Quando TalkBack è attivato, i controlli basici del tuo dispositivo Android presenteranno alcune differenze rispetto alla modalità normale. Per esempio:</p> + +<p> </p> + +<ol> + <li>Fare click sull’icona di una app la selezionerà senza aprirla, e il lettore pronuncerà il nome della app.</li> + <li>Fare swipe a destra o a sinistra farà selezionare un’altra app, oppure, se stai navigando un menu, un altro bottone/controllo. Il dispositivo leggerà ogni opzione man mano che le selezioni.</li> + <li>Fare doppio click aprirà la app selezionata o attiverà/disattiverà la opzione selezionata.</li> + <li>Puoi anche “esplorare col dito“: mantieni premuto il dito sullo schermo e fallo scorrere lungo la superficie dello stesso. Il dispositivo leggerà il nome delle varie app o oggetti su cui passerai il dito.</li> +</ol> + +<p>Se vuoi disattivare TalkBack:</p> + +<ol> + <li>Naviga alle <em>Impostazioni</em></li> + <li>Naviga a <em>Accessibilità > TalkBack</em>.</li> + <li>Naviga allo switch di attivazione/disattivazione e disattivalo.</li> +</ol> + +<p><strong>Nota:</strong> puoi navigare alla schermata di inizio in qualsiasi momento facendo swipe in alto e a sinistra lentamente. Se hai più di una schermata di inizio, puoi muoverti da una all’altra facendo swipe con due dita a destra e sinistra.</p> + +<p>Per una lista più completa dei gesti che puoi usare con TalkBack, vedi <a href="https://support.google.com/accessibility/android/answer/6151827?hl=it">Utilizzare i gesti TalkBack</a>.</p> + +<h4 id="Sbloccare_il_telefono"><strong>Sbloccare il telefono</strong></h4> + +<p>Quando TalkBack è attivato, la procedura per sbloccare il telefono cambia leggermente.</p> + +<p>Devi fare swipe con due dita dal basso verso l’alto. Se ci sono una password o un codice impostati, sarai reindirizzato allo schermo dove inserirli.</p> + +<p>Puoi anche esplorare con il dito, troverai il bottone di sblocco nel centro della parte bassa dello schermo. Fai doppio click sul bottone per sbloccare lo schermo.</p> + +<h4 id="Menu_globali_e_locali"><strong>Menu globali e locali</strong></h4> + +<p>TalkBack ti permette di accedere ai menu contestuali locali e globali del dispositivo da qualunque punto del sistema operativo. I menu globali sono quelli che permettono di accedere ai controlli e alle opzioni generali del dispositivo, mentre i menu locali sono relativi alla applicazione o schermata in cui ti trovi al momento.</p> + +<p>Per accedere ai menu:</p> + +<ol> + <li>Per accedere al menu globale, fai swipe veloce verso il basso e poi a destra.</li> + <li>Per accedere al menu locale, fai swipe veloce verso l’alto e poi a destra.</li> + <li>Fai swipe a sinistra o a destra per muoverti da una opzione all’altra.</li> + <li>Quando l’opzione che ti interessa è selezionata, fai doppio click per attivarla o disattivarla.</li> +</ol> + +<p>Per maggiori dettagli su tutte le opzioni disponibili nei menu locali e globali, vedi <a href="https://support.google.com/accessibility/android/answer/6007066?hl=it">Menu contestuali locali e globali</a>.</p> + +<h4 id="Navigare_pagine_web"><strong>Navigare pagine web</strong></h4> + +<p>Puoi usare il menu contestuale locale del browser per trovare le opzioni per navigare le pagine web usando gli headings, i campi dei formulari, i link, ecc., oppure navigare linea per linea.</p> + +<p>Per esempio, con TalkBack attivato:</p> + +<ol> + <li>Apri il tuo web browser.</li> + <li>Attiva la barra URL.</li> + <li>Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: + <ul> + <li>Seleziona la barra URL facendo swipe a destra/sinistra fino a trovarla, e poi fai doppio click.</li> + <li>Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per introdurlo. Ripeti il procedimento per ogni carattere.</li> + <li>Quando hai terminato, seleziona il tasto INVIO e premilo.</li> + </ul> + </li> + <li>Fai swipe a sinistra o destra per muoverti tra i differenti oggetti presenti sulla pagina.</li> + <li>Fai swipe in alto e a destra per aprire il menu contestuale locale.</li> + <li>Fai swipe a destra fino a trovare la opzione "Headings e punti di riferimento".</li> + <li>Fai doppio click per selezionarla. Ora puoi fare swipe a destra o sinistra per muoverti tra headings e punti di riferimento ARIA.</li> + <li>Per ritornare al modo di default, apri il menu contestuale locale facendo swipe in alto a destra, seleziona l’opzione “Default” e fai doppio click per attivarla.</li> +</ol> + +<p><strong>Nota:</strong> Vedi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=it&ref_topic=3529932">Guida introduttiva a TalkBack su Android</a> per una documentazione più completa.</p> + +<h3 id="iOS_VoiceOver">iOS VoiceOver</h3> + +<p> </p> + +<p>Una versione di VoiceOver per dispositivi mobili è inclusa in tutti i sistemi operativi iOS.</p> + +<p>Per attivarlo, vai alla tua app<em>Impostazioni</em>e seleziona<em>Generale>Accessibilità>VoiceOver</em>. Premi lo switch<em>VoiceOver</em>per attivarlo (vedrai anche alcune altre opzioni relative a VoiceOver in questa pagina).</p> + +<p>Quando VoiceOver sarà attivato, i controlli basici del sistema saranno leggermente diversi:</p> + +<p> </p> + +<ol> + <li>Un click singolo selezionerà l’oggetto su cui premi; il dispositivo pronuncerà il nome dell’oggetto selezionato.</li> + <li>Puoi inoltre navigare tra gli oggeti presenti sullo schermo facendo swipe a destra o sinistra per muoverti dall’uno all’altro, o facendo scorrere il dito per lo schermo. Quando troverai l’oggetto che vuoi attivare, rimuovi il dito dallo schermo per selezionarlo.</li> + <li>Per attivare l’oggetto dopo averlo selezionato, per esempio se vuoi aprire una applicazione, fai doppio click in qualsiasi punto dello schermo.</li> + <li>Fai swipe con tre dita per scorrere attraverso una pagina.</li> + <li>Fai click con due dita per eseguire una azione relativa al contesto corrente, come per esempio scattare una foto con la applicazione fotocamera aperta.</li> +</ol> + +<p>Per disattivare VoiceOver, naviga a<em>Impostazioni</em>><em>Generale</em>><em>Accessibilità</em>><em>VoiceOver</em> e premi lo switch<em>VoiceOver</em>.</p> + +<h4 id="Come_usare_il_Rotore"><strong>Come usare il Rotore</strong></h4> + +<p>Quando VoiceOver è attivo, avrai a tua disposizione una funzionalità dei navigazione chiamata Rotore, che ti permette di accedere rapidamente ad alcune opzioni di uso comune. Per usarlo:</p> + +<h4 id="Using_the_Rotor">Using the Rotor</h4> + +<p>When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:</p> + +<ol> + <li>Muovi due dita in circolo per lo schermo, come se stessi usando un vecchio telefono a disco. Il dispositivo pronuncerà il nome delle varie opzioni una dopo l’altra man mano che vai muovendo le dita. Puoi andare avanti e indietro mentre il dispositivo passa da un’opzione all’altra ciclicamente.</li> + <li>Quando hai trovato l’opzione che ti interessa: + <ul> + <li>Rimuovi le dita dallo schermo per selezionarla.</li> + <li>Se si tratta di una opzione il cui valore è aumentabile/diminuibile, come per esempio il Volume o la Velocità di Locuzione, puoi fare swipe verso l’alto o verso il basso per aumentare o diminuire il valore dell’opzione selezionata.</li> + </ul> + </li> +</ol> + +<p>Le opzioni disponibili tramite il Rotore dipendono dal contesto: quando apri il Rotore le opzioni che troverai saranno relative all’applicazione o alla schermata in cui ti trovi (vedi qui sotto per un esempio).</p> + +<h4 id="Navigare_pagine_web_2"><strong>Navigare pagine web</strong></h4> + +<p>Vediamo come navigare in internet usando VoiceOver:</p> + +<ol> + <li>Apri il tuo browser.</li> + <li>Attiva la barra URL.</li> + <li>Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: + <ul> + <li>Seleziona la barra URL facendo swipe a destra o a sinistra fino a trovarla, e poi fai doppio click.</li> + <li>Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per selezionarlo. Fai doppio click per introdurlo. Ripeti il procedimento per ogni carattere.</li> + <li>Quando hai terminato, seleziona il tasto INVIO e premilo.</li> + </ul> + </li> + <li>Fai swipe a sinistra e a destra per muoverti tra i differenti oggetti presenti sulla pagina. Fai doppio click su un oggetto per selezionarlo (per esempio, per seguire un link).</li> + <li>L’opzione del Rotore selzionata per default è la Velocità di Locuzione; puoi fare swipe in su o in giù per aumentare o diminuire la velocità di locuzione del lettore di schermo.</li> + <li>Ora muovi due dita in circolo per lo schermo per aprire il Rotore e far scorrere le sue opzioni. Riportiamo qui alcuni esempi delle opzioni disponibili nel Rotore: + <ul> + <li><em>Velocità di locuzione</em>: cambia la velocità di locuzione del dispositivo.</li> + <li><em>Contenitori</em>: il lettore di schermo si muove per i vari contenitori semantici presenti nella pagina.</li> + <li><em>Headings</em>: il lettore di schermo si muove per i vari heading presenti nella pagina.</li> + <li><em>Links</em>: il lettore di schermo si muove per i vari link presenti nella pagina.</li> + <li><em>Controlli formulario</em>: il lettore di schermo si muove per i vari campi dei formulari presenti nella pagina.</li> + <li><em>Lingue</em>: cambia la lingua della pagina, se sono disponibili differenti traduzioni.</li> + </ul> + </li> + <li>Seleziona <em>Headings</em>. Ora potrai fare swipe in su e in giù per muoverti da un heading all’altro della pagina.</li> +</ol> + +<p><strong>Nota:</strong> per un riferimento più completo sui gesti disponibili in VoiceOver e altri suggerimenti sul testing dell’accessibilità in iOS, vedi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p> + +<h2 id="Meccanismi_di_controllo"><strong>Meccanismi di controllo</strong></h2> + +<p>Nel nostro articolo sull’accessibilità in CSS e JavaScript abbiamo preso in considerazione eventi che sono associati a specifici meccanismi di controllo (vedi <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">eventi specifici del mouse</a><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Altri_problemi_di_accessibilità_con_JavaScript">del mouse</a>). Per ricapitolare, tali eventi causano problemi di accessibilità, perchè altri meccanismi di controllo non possono attivare le funzionalità ad essi associate.</p> + +<p>Ad esempio, l’evento <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a> è ottimale in termini di accessibilità: un gestore di eventi associato ad esso può essere attivato cliccando con il mouse sull’elemento su cui l’evento è impostato, oppure selezionandolo tramite tasto TAB e premendo INVIO, oppure facendo click con un dito su un touchscreen. Prova il nostro <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">esempio-di-bottone-semplice.html</a> (<a href="https://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">vedi la versione live</a>) per capire di cosa parliamo.</p> + +<p>Altri eventi simili, come <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> e <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> possono creare problemi, in quanto i loro gestori di eventi non possono essere attivati usando controli alternativi al mouse.</p> + +<p>Se provi a controllare il nostro esempio di <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">vedi la versione live</a>) tramite tastiera o touchscreen, capirai qual è il problema. Ciò succede perchè stiamo usando un codice come il seguente:</p> + +<pre><code>div.onmousedown = function() { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + movePanel(); +} + +document.onmouseup = stopMove;</code></pre> + +<p>Per abilitare altre forme di controllo, devi usare eventi alternativi equivalenti. Per esempio, gli eventi touch sono pensati specificamente per i dispositivi con touchscreen:</p> + +<pre><code>div.ontouchstart = function(e) { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + positionHandler(e); + movePanel(); +} + +panel.ontouchend = stopMove;</code></pre> + +<p>Presentiamo qui un semplice esempio che mostra come usare gli eventi mouse e touch insieme. Vedi <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">vedi la versione liveee the example live</a>).</p> + +<p><strong>Nota:</strong> puoi vedere esempi di come implementare differenti meccanismi di controllo nell’articolo in inglese <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p> + +<h2 id="Disegno_responsivo"><strong>Disegno responsivo</strong></h2> + +<p> </p> + +<p>Il disegno responsivo è la pratica di realizzare layout e altre caratteristiche delle applicazioni in una forma che cambia dinamicamente secondo alcuni fattori come le dimensioni dello schermo e la risoluzione dello stesso, di modo che le applicazioni siano usabili e accessibili a utenti che usano differenti tipi di dispositivi.</p> + +<p>In particolare, gli aspetti più comuni del disegno responsivo che si devono prendere in considerazione per i dispositivi mobili sono:</p> + +<p> </p> + +<ul> + <li>Idoneità dei layout per dispositivi mobili. Un layout a colonne multiple, per esempio, solitamente non funzionerà molto bene in schermi di dimensioni ridotte. Inoltre potrebbe essere necessario incrementare le le dimensioni dei caratteri perchè siano leggibili. Tali problemi possono essere risolti creando un layout responsivo, facendo uso di tecnologie come <a href="https://developer.mozilla.org/it/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, e <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li> + <li>Dimensioni delle immagini. In generale, i dispositivi con schermi di dimensioni ridotte non necessitano di immagini grandi come quelle che si usano per i monitor dei pc, e inoltre spesso navigano usando connessioni lente. È dunque opportuno fare in modo che la nostra applicazione usi immagini più piccole quando viene visualizzata su schermi di dimensioni ridotte. Per sapere come ottenere ciò, usa <a href="https://developer.mozilla.org/it/docs/Learn/HTML/Multimedia_and_embedding/immagini_reattive">tecniche responsive per immagini</a>.</li> + <li>Schermi ad alta risoluzione. Molti dispositivi mobili hanno schermi ad alta risoluzione, e per fare in modo che su tali schermi le immagini si visualizzino senza sfocature è necessario usare immagini ad alta risoluzione. Ancora una volta, puoi fare ricorso a tecniche responsive per immagini. Inoltre, puoi ricorrere a immagini vettoriali in SVG, un formato che ha un supporto molto ampio nei browser moderni. Gli SVG hanno un peso ridotto e mantengono invariata la qualità dell’immagine, a prescindere dalle dimensioni in cui vengono visualizzati. Vedi l'articolo in inglese <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Usare immagini vettoriali sul web</a> per maggiori dettagli.</li> +</ul> + +<p><strong>Nota:</strong> non forniremo una spiegazione dettagliata delle tecniche di disegno responsivo qui, dato che sono già trattate in altri articoli presenti su questo sito (vedi i link qui sopra).</p> + +<h3 id="Considerazioni_specifiche_per_dispositivi_mobili">Considerazioni specifiche per dispositivi mobili</h3> + +<p>Ci sono altri importanti aspetti da prendere in considerazione per ottimizzare l’accessibilità dei siti sui dispositivi mobili. Riportiamo due esempi qui sotto, e in futuro speriamo di riuscire ad aggiungerne altri.</p> + +<h4 id="Non_disabilitare_lo_zoom"><strong>Non disabilitare lo zoom</strong></h4> + +<p>Utilizzando <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, è possibile disabilitare la funzionalità di zoom, ponendo il seguente codice nella <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/head" title="The HTML <head> element provides general information (metadata) about the document, including its title and links to its scripts and style sheets."><head></a>:</p> + +<pre><code><meta name="viewport" content="user-scalable=no"></code></pre> + +<p>Non dovresti mai farlo, a meno che sia strettamente necessario. Molte persone infatti usano lo zoom per migliorare la visibilità e leggibilità del contenuto, e privare i tuoi utenti di tale possibilità non è una buona pratica. Ci sono alcune situazioni in cui l’uso dello zoom può effettivamente danneggiare la struttura dell’interfaccia utente; in tali casi, se davvero ritieni necessario disabilitare lo zoom, dovresti fornire una funzionalità equivalente, come per esempio dei controlli per aumentare le dimensioni del testo senza alterare altri elementi dell’interfaccia utente.</p> + +<h4 id="Accessibilità_dei_menu"><strong>Accessibilità dei menu</strong></h4> + +<p>È una pratica molto comune, quando un sito viene visualizzato su un dispositivo con schermo di dimensioni ridotte, usare media queries per ridurre il menu di navigazione a un semplice bottone o una icona, che quando vengono premuti si espandono mostrando gli elementi del menu in forma di menu drop-down, o menu a tendina. Di solito si utilizza una icona con tre linee orizzontali, nota come "menu ad hamburger".</p> + +<p> </p> + +<p>Quando implementi un menu di questo tipo, devi assicurarti che l’”hamburger” sia accessibile con gli appropriati meccanismi di controllo (normalmente su dispositivo mobile vi si accede tramite touch), come discusso in {{anch("Meccanismi di controllo")}} più sopra, e che il resto della pagina sia nascosto o comunque disabilitato mentre il menu sia attivo, per evitare confusione durante l’utilizzo dello stesso.</p> + +<p>Qui puoi trovare <a href="http://fritz-weisshart.de/meg_men/">un buon esempio di menu ad hamburger</a>.</p> + +<h2 id="Input_dell’utente"><strong>Input dell’utente</strong></h2> + +<p>Quando si usano dispositivi mobili, inserire dati è di solito un’esperienza più lenta e tediosa che il suo equivalente su pc o laptop. È molto più facile scrivere con una tastiera normale che con una virtuale o una di dimensioni ridotte.</p> + +<p>Per tale ragione, vale la pena cercare di minimizzare il più possibile la quantità di dati da introdurre manualmente sui dispositivi mobili. Per esempio, se vuoi che gli utenti specifichino qual è il loro lavoro, invece di usare un campo di testo aperto puoi usare un menu a selezione {{htmlelement("select")}} contenente le opzioni più comuni (cosa che tra l’altro aiuta anche a migliorare la consistenza dei dati), e offrire tra le opzioni una categoria “Altro” che, se selezionata, fa comparire un campo di testo dove l’utente può scrivere liberamente per specificare la sua occupazione. Puoi vedere un esempio di questa idea alla pagina <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">tipi-di-lavoro-comuni</a> (vedi la <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">versione live</a>).</p> + +<p>Inoltre, vale la pena prendere in considerazione l’uso di tipi di input HTML5 nativi, come per esempio il tipo “date”, che su dispositivi mobili Androd e iOS vengono gestiti automaticamente da widget nativi integrati all’interfaccia che l’utente è già abituato a usare sul dispositivo. Vedi <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">esempi-formulari-html5.html</a> per alcuni esempi (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">versione live</a>). Prova a visualizzare e usare questi esempi su un dispositivo mobile.</p> + +<p> </p> + +<p>Alcuni esempi di tipi di input HTML5 e come appaiono quando sono usati da dispositivo mobile:</p> + +<p> </p> + +<ul> + <li>I tipi <code>number</code>, <code>tel</code>, e <code>email </code>quando selezionati fanno apparire una tastiera virtuale adatta all’inserimento di numeri o numeri di telefono.</li> + <li>I tipi <code>time </code>e <code>date </code>fanno apparire widget di tipo orologio o calendario per la selezione rapida di una ora o una data.</li> +</ul> + +<p>Se vuoi fornire una versione della tua applicazione specifica per dispositivi mobili e diversa da quella per pc e laptop, puoi usare una tecnologia di feature detection per rilevare il tipo di dispositivo su cui l’applicazione viene visualizzata. Vedi l’articolo in inglese <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> per maggiori informazioni sui differenti tipi di input, e anche il nostro articolo in inglese sulla <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection</a>.</p> + +<h2 id="Riassunto"><strong>Riassunto</strong></h2> + +<p>In questo articolo abbiamo riportato alcuni dettagli sui più comuni problemi di accessibilità su dispositivi mobili, e alcune linee guida su come superarli. Abbiamo inoltre fornito indicazioni sull’uso dei più comuni lettori di schermo per dispositivi mobili, per aiutarti nella realizzazione di test di accessibilità.</p> + +<h2 id="Vedi_anche"><strong>Vedi anche</strong></h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Linee guida per lo sviluppo web mobile</a> (in inglese) — Una lista di articoli in inglese presenti sul sito <em>Smashing Magazine</em> che illustrano differenti tecniche di disegno web per dispositivi mobili.</li> + <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Fai funzionare il tuo sito sui dispositivi touch</a> (in inglese) — Utile articolo in inglese sull’utilizzo degli eventi touch per il corretto funzionamento delle interazioni dell’utente con l’applicazione sui dispositivi mobili.</li> +</ul> + +<div>{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibilità/Accessibility_troubleshooting", "Learn/Accessibilità")}}</div> + +<div> +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibiltà</a>?</li> + <li><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></li> + <li><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></li> + <li><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a></li> +</ul> +</div> +</div> diff --git a/files/it/learn/accessibilità/accessibilità_test_risoluzione_problemi/index.html b/files/it/learn/accessibilità/accessibilità_test_risoluzione_problemi/index.html new file mode 100644 index 0000000000..8c0e97dab4 --- /dev/null +++ b/files/it/learn/accessibilità/accessibilità_test_risoluzione_problemi/index.html @@ -0,0 +1,113 @@ +--- +title: 'Test di valutazione: risoluzione di problemi di accessibilità' +slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi +tags: + - Accessibilità + - CSS + - HTML + - JavaScript + - Principiante + - Test di valutazione + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}</div> + +<p class="summary">Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i <a href="it/docs/Learn/Accessibilità">precedenti articoli del corso</a>.</td> + </tr> + <tr> + <th scope="row"><strong>Obiettivo</strong>:</th> + <td>Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.</td> + </tr> + </tbody> +</table> + +<h2 id="Punto_di_partenza"><strong>Punto di partenza</strong></h2> + +<p> </p> + +<p>Come primo passo, dovresti scaricare l’<a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">archivio ZIP contenente i file che compongono il sito di esempio</a>. Decomprimi l’archivio in una cartella locale sul tuo computer.</p> + +<p>Il risultato finale del test dovrebbe apparire così:</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> + +<p>Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.</p> + +<h2 id="Schema_del_progetto"><strong>Schema del progetto</strong></h2> + +<p>Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.</p> + +<h3 id="Colori">Colori</h3> + +<p>Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?</p> + +<h3 id="HTML_semantico">HTML semantico</h3> + +<ol> + <li>Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.</li> + <li>Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?</li> + <li>Il menu di navigazione (racchiuso tra le etichette <code><div class="nav"></code> e <code></div></code>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione<font>.</font></p> +</div> + +<h3 id="Le_immagini">Le immagini</h3> + +<p>Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema<font>?</font></p> + +<h3 id="Il_lettore_audio">Il lettore audio<font> </font></h3> + +<ol> + <li>Il lettore <code><audio></code> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti<font>?</font></li> + <li>Il lettore <code><audio></code> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio<font>?</font></li> +</ol> + +<h3 id="I_formulari">I formulari</h3> + +<ol> + <li>Sarebbe utile aggiungere un’etichetta all’elemento <code><input></code> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo<font>?</font></li> + <li>I due elementi <code><input></code> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS<font>.</font></li> +</ol> + +<h3 id="Il_bottone_mostranascondi_commenti">Il bottone mostra/nascondi commenti</h3> + +<p>Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO<font>?</font></p> + +<h3 id="La_tabella">La tabella</h3> + +<p>La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi<font>?</font></p> + +<h3 id="Altre_considerazioni">Altre considerazioni<font>?</font></h3> + +<p>Puoi indicare due ulteriori idee per rendere il sito più accessibile<font>?</font></p> + +<h2 id="Valutazione"><strong>Valutazione</strong></h2> + +<p>Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">forum di discussione su questo esercizio</a><font>, </font>o nel canale IRC<font> <a href="irc://irc.mozilla.org/mdn">#mdn</a> su <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. </font>In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.</p> + +<p><font>{{PreviousMenu("Learn/Accessibilità/</font>Accessibilità_dispositivi_mobili<font>", "Learn/Accessibilità")}}</font></p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibiltà</a>?</li> + <li><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></li> + <li><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></li> + <li><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </li> +</ul> diff --git a/files/it/learn/accessibilità/cosa_è_accessibilità/index.html b/files/it/learn/accessibilità/cosa_è_accessibilità/index.html new file mode 100644 index 0000000000..52a5c138f8 --- /dev/null +++ b/files/it/learn/accessibilità/cosa_è_accessibilità/index.html @@ -0,0 +1,196 @@ +--- +title: Cosa è l'accessibilità? +slug: Learn/Accessibilità/Cosa_è_accessibilità +tags: + - Accessibilità + - Articolo + - CSS + - HTML + - JavaScript + - Principiante + - Strumenti + - TA + - disabilità + - imparare + - lettore schermo + - tastiera + - tecnologie assistive + - utenti +translation_of: Learn/Accessibility/What_is_accessibility +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}</div> + +<p class="summary">Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML e CSS.</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Acquisire familiarità con il concetto di accessibilità, capire di cosa si tratta e in che modo influisce sulla tua attività di sviluppatore web. </td> + </tr> + </tbody> +</table> + +<h2 id="Dunque_cosa_è_l'accessibilità">Dunque, cosa è l'accessibilità?</h2> + +<p>L'accessibilità è la pratica di rendere i tuoi siti utilizzabili dal maggior numero di persone possibile. Di solito si pensa che il tema dell'accessibilità riguardi solo le persone che soffrono di una disabilità, ma in realtà l'accessibilità è un concetto importante anche per altri gruppi di persone, come coloro che usano dispositivi mobili o chi naviga in internet con una connessione lenta.</p> + +<p>Puoi anche pensare all'accessibilità come alla pratica di trattare tutti alla stessa maniera e dare a tutti le stesse opportunità, indipendentemente dalle loro capacità e circostanze. Così come non è corretto impedire l'accesso a un edificio a una persona che si muove in sedia a rotelle (e infatti gli edifici pubblici devono essere dotati di rampe e ascensori), allo stesso modo non si deve escludere una persona dall'utilizzo di un sito web per il fatto che abbia un handicap o stia usando un dispositivo mobile. Tutti gli utenti devono avere gli stessi diritti.</p> + +<p>Rendere un sito accessibile non solo è la cosa giusta da fare da un punto di vista etico, ma in molti paesi è anche obbligatorio per legge, e inoltre può contribuire a raggiungere categorie di utenti e clienti che altrimenti non potrebbero usare i tuoi servizi o acquistare i tuoi prodotti.</p> + +<p>Rispettare le pratiche di accessibilità è benefico per tutti:</p> + +<ul> + <li>L'uso di HTML semantico (che migliora l'accessibilità) contribuisce anche a migliorare il posizionamento sui motori di ricerca, rendendo il tuo sito più facile da trovare.</li> + <li>Preoccuparsi dell'accessibilità dimostra senso etico, pratico e morale, e migliora la tua immagine pubblica.</li> + <li>Migliorare l'accessibilità di un sito significa renderlo facilmente utilizzabile a più ampi gruppi di utenti, come coloro che usano dispositivi mobili o coloro che navigano con una connessione a internet lenta. </li> + <li>Come già detto, in molti paesi è un obbligo da rispettare per legge.</li> +</ul> + +<h2 id="Quali_tipi_di_disabilità_prendere_in_considerazione">Quali tipi di disabilità prendere in considerazione?</h2> + +<p>Le persone con disabilità sono molto diverse tra loro, così come quelle senza disabilità. Il concetto chiave da imparare è smettere di pensare a come tu stesso usi il computer e navighi in internet, e cominciare a considerare come lo fanno gli altri. I principali tipi di disabilità sono spiegati qui sotto, insieme agli strumenti che le persone disabili usano per navigare il web (conosciuti come <strong>tecnologie assistive</strong>, o <strong>TA</strong>).</p> + +<div class="note"> +<p><strong>Nota</strong>: la Organizzazione Mondiale della Sanità nel suo rapporto (in inglese) <a href="http://www.who.int/mediacentre/factsheets/fs352/en/">Disabilità e salute</a> afferma che "Oltre un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità", e "Tra 110 e 190 milioni di adulti hanno significative difficoltà funzionali". </p> +</div> + +<h3 id="Persone_con_deficit_visivo">Persone con deficit visivo</h3> + +<p>Questa categoria include persone non vedenti, persone con una capacità visiva molto ridotta (ipovedenti), daltonici, ecc. Molte di queste persone usano ingranditori di schermo (sia fisici che software, per esempio la maggior parte dei navigatori è dotata di funzioni di zoom), e alcuni usano lettori di schermo, cioè programmi che leggono a voce alta il contenuto digitale:</p> + +<ul> + <li>Alcuni sono programmi a pagamento, come <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) e <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li> + <li>Altri sono programmi freeware, come <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows e Mac OS X), e <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li> + <li>Alcuni vengono già integrati nel sistema operativo, come <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X e iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome OS), e <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> +</ul> + +<p>È una buona idea acquisire familiarità con i lettori di schermo; dovresti provare a installarne uno e usarlo, per farti una idea di come funziona. Per maggiori dettagli su come usarli, fai riferimento alla nostra guida (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guida al testing dei lettori di schermo su differenti browser</a>. Il video qui sotto inoltre fornisce una breve testimonianza sull'uso dei lettori di schermo.</p> + +<p>{{EmbedYouTube("IK97XMibEws")}}</p> + +<p>In termini statistici, la Organizzazione Mondiale della Sanità stima che "circa 285 milioni di persone nel mondo hanno gravi deficit visivi: 39 milioni sono non vedenti e 246 milioni ipovedenti". (vedi il rapporto in inglese <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">Deficit visivo e cecità</a>). Si tratta di una significativa quantità di utenti, pari quasi alla popolazione degli Stati Uniti, che non potrà usufruire del tuo sito se non lo avrai reso accessibile.</p> + +<h3 id="Persone_con_deficit_uditivo">Persone con deficit uditivo</h3> + +<p>Questa categoria di persone presentano una capacità uditiva molto ridotta o del tutto assente. Le persone con deficit uditivo spesso usano TA (vedi l'articolo in inglese <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Strumenti assistivi per persone con disfunzioni uditive, della voce, dell'apparato fonatorio o del linguaggio</a>), ma non esistono in realtà tecnologie assistive specifiche per l'uso del computer o di internet. </p> + +<p>Ci sono, comunque, tecniche specifiche da tenere in conto per fornire alternative testuali ai contenuti audio, come per esempio trascrizioni o sottotitoli sincronizzati nei video. Più avanti si tratteranno queste tecniche nel dettaglio in un altro articolo.</p> + +<p>Anche le persone con deficit uditivo rappresentano una significativa base di utenza. Come indica la Organizzazione Mondiale della Sanità nel rapporto in inglese <a href="http://www.who.int/mediacentre/factsheets/fs300/en/">Sordità e perdita dell'udito</a>, "360 milioni di persone nel mondo presentano deficit uditivi gravi".</p> + +<h3 id="Persone_con_problemi_di_mobilità">Persone con problemi di mobilità</h3> + +<p>Alcune persone soffrono di disabilità che riguardano il movimento. Ciò può riferirsi a problemi puramente fisici (come la perdita di un arto o uno stato di paralisi), o a disordini di tipo neurologico/genetico che comportano difficoltà nei movimenti o perdita di controllo sugli arti. Alcune persone possono avere difficoltà a compiere i movimenti della mano necessari per usare un mouse, mentre altre possono presentare problemi più gravi, come per esempio uno stato di paralisi estesa, che rende necessario l'uso di un puntatore comandato tramite movimenti della testa per interagire con il computer. </p> + +<p>Questo tipo di disabilità può anche essere dovuto all'età avanzata, piuttosto che a un trauma o una condizione specifica, e può anche essere attribuibile a limitazioni dell'hardware, come nel caso di utenti che non hanno un mouse a disposizione.</p> + +<p>In generale, per gestire questo tipo di limitazioni è necessario sviluppare i propri siti o applicazioni in maniera tale che siano utilizzabili tramite tastiera. Tratteremo l'argomento dell'accessibilità tramite tastiera con articoli specifici più avanti nel modulo, ma nel frattempo ti consigliamo di provare a navigare alcuni siti usando solo la tastiera, per farti un'idea di come funziona. Per esempio, puoi usare il tasto TAB per muoverti da un campo all'altro di un formulario? Puoi trovare ulteriori dettagli sull'uso della tastiera per la navigazione dei siti nella sezione (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Test di accessibilità della navigazione con tastiera su differenti browser</a>.</p> + +<p>Secondo le statistiche, un numero significativo di persone soffre di limitazioni alla mobilità. Il rapporto (in inglese) <a href="http://www.cdc.gov/nchs/fastats/disability.htm">Disabilità e funzionamento (adulti maggiorenni non ricoverati)</a> indica che negli Stati Uniti la percentuale di adulti con difficoltà di funzionamento fisico è del 15,1%.</p> + +<h3 id="Persone_con_deficit_cognitivo">Persone con deficit cognitivo</h3> + +<p>Probabilmente il più ampio range di disabilità è quello compreso in quest'ultima categoria. Il termine deficit cognitivo può infatti riferirsi ad un'ampia gamma di disfunzioni, dalle malattie mentali alle difficoltà di apprendimento, da problemi di comprensione e concentrazione, come <a href="https://it.wikipedia.org/wiki/Sindrome_da_deficit_di_attenzione_e_iperattivit%C3%A0">la sindrome da deficit di attenzione e iperattività</a>, a persone che presentano una forma di <a href="https://it.wikipedia.org/wiki/Autismo">autismo</a>, o persone che soffrono di <a href="https://it.wikipedia.org/wiki/Schizofrenia">schizofrenia</a>, e molti altri tipi di disturbo. Questo tipo di disabilità possono influenzare molte attività della vita quotidiana, causando problemi di memoria, comprensione, attenzione, ecc.</p> + +<p>Le forme più comuni con cui tali forme di disabilità influenzano l'uso di un sito sono: difficoltà nel capire il procedimento da seguire per raggiungere un risultato; difficoltà nel ricordare come ripetere un'azione compiuta precedentemente; un senso di frustrazione causato da alcune caratteristiche del sito che lo rendono confuso e inconsistente nella navigazione.</p> + +<p>Diversamente da altri problemi di accessibilità web, è impossibile fornire linee guida specifiche per risolvere le difficoltà causate da deficit cognitivo; la strategia migliore è di impegnarsi a disegnare i propri siti nella forma più logica, consistente e usabile possibile. Per esempio, assicurati che:</p> + +<ul> + <li>Le pagine siano consistenti: mantieni barra di navigazione, header, contenuto e footer sempre negli stessi posti nelle varie pagine del sito.</li> + <li>Gli strumenti presenti siano ben disegnati e facili da usare.</li> + <li>Procedimenti o azioni lunghi e complessi da realizzare siano divisi in più fasi composte da piccoli passi ordinati logicamente, con indicazioni regolari del punto del processo in cui l'utente si trova, e quanto manca per completarlo.</li> + <li>Il flusso di navigazione sia semplice e logico, con il minor numero possibile di interazioni richieste all'utente. Per esempio, spesso i processi di registrazione e login sono inutilmente complessi.</li> + <li>Le pagine non siano troppo lunghe e dense di informazioni che potrebbero invece essere distribuite su più pagine.</li> + <li>Il linguaggio usato sia semplice e facilmente leggibile, evitando l'uso di termini tecnici o gergali quando non è strettamente necessario.</li> + <li>I punti più importanti del contenuto siano messi in evidenza, per esempio utilizzando il grassetto.</li> + <li>Gli errori di utilizzo compiuti dall'utente vengano evidenziati con chiarezza, e siano accompagnati da messaggi di supporto che spiegano la corretta procedura da seguire.</li> +</ul> + +<p>Queste non sono soltanto tecniche di accessibilità, ma piuttosto buone pratiche di disegno web che saranno utili a chiunque userà i tuoi siti, e dovrebbero essere pratiche standard nel tuo lavoro di sviluppo web.</p> + +<p>In termini statistici, anche in questo caso i numeri sono significativi. Per esempio, il rapporto (in inglese) della Cornell University <a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">Rapporto sullo stato della disabilità 2014</a> (PDF, 511KB) indica che nel 2014 il 4.5% della popolazione degli Stati Uniti di età compresa tra 21 e 64 anni presenta una qualche forma di disabilità cognitiva.</p> + +<div class="note"> +<p><strong>Nota</strong>: La sezione (in inglese) <a href="http://webaim.org/articles/cognitive/">Cognitive</a> del sito WebAIM fornisce utili approfondimenti sulle pratiche riportate sopra, ed è certamente una lettura consigliata.</p> +</div> + +<h2 id="Come_implementare_l'accessibilità_nei_tuoi_progetti">Come implementare l'accessibilità nei tuoi progetti</h2> + +<p>Un mito molto comune sull'accessibilità è che questa sia una sorta di "costoso extra". Questo mito <em>può</em> essere veritiero se:</p> + +<ul> + <li>Stai cercando di implementare l'accessibilità in un sito già costruito che presenta significativi problemi di accessibilità. </li> + <li>Hai cominciato a prendere in considerazione l'accessibilità e i problemi ad essa relativi solo nelle ultime fasi di realizzazione di un progetto.</li> +</ul> + +<p>Se invece l'accessibilità è parte integrante del tuo progetto sin dal principio, il costo per rendere il contenuto accesibile sarà minimo.</p> + +<p>Quando pianifichi un progetto, introduci test di accessibilità nella tua routine di testing, allo stesso modo in cui effettui test per gli altri segmenti di utenza (come per esempio gli utenti che usano pc desktop, iOS o dispositivi mobili, ecc.). Effettua test sin dall'inizio e con frequenza, idealmente facendo uso di test automatizzati che rilevino sistematicamente caratteristiche mancanti (come per esempio mancanza di testo alternativo nelle immagini, o la presenza di link testuali mal costruiti. Vedi l'articolo in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Relazione tra elementi e contesto</a>) ed anche, se possibile, effettuando test con persone disabili per verificare il funzionamento delle caratteristiche più complesse del sito. Per esempio: </p> + +<ul> + <li>Il selettore di date è utilizzabile da persone che navigano con un lettore di schermo?</li> + <li>Se il contenuto si aggiorna dinamicamente, le persone con disabilità visiva ne sono informate correttamente ?</li> + <li>I bottoni sono accessibili usando la tastiera o interfacce multitouch?</li> +</ul> + +<p>Dovresti prendere nota di tutte le potenziali aree problematiche del tuo contenuto su cui sarà necessario intervenire perchè siano rese accessibili, assicurarti che siano testate a sufficienza e pensare a soluzioni o alternative. Il contenuto testuale (come vedrai nel prossimo articolo) è facile da gestire, ma come fare con il contenuto multimediale, o le grafiche 3D? Dovresti considerare il budget a disposizione e pensare a quali possibilità hai per rendere il contenuto accessibile. Per esempio, potresti decidere di pagare qualcuno per trascrivere tutto il contenuto multimediale. Può essere costoso, ma è fattibile.</p> + +<p>Inoltre, devi essere realista. Un sito accessibile al 100% è un ideale irraggiungibile, ci sarà sempre qualche situazione particolare per la quale un utente troverà difficile usare il tuo contenuto, ma devi fare tutto il possibile per evitare che si verifichino tali situazioni. Se hai in mente di includere nel tuo sito uno spettacolare grafico a torta 3D creato con WebGL, dovresti anche includere, come alternativa accessibile, una tabella dati standard. Oppure, potresti addirittura decidere di eliminare il grafico 3D: la tabella è accessibile a tutti, più rapida da creare, richiede meno risorse CPU ed è più facile da mantenere.</p> + +<p>D'altro canto se stai costruendo un sito-galleria per opere d'arte in 3D, non sarebbe ragionevole pretendere che ogni opera fosse perfettamente accessibile alle persone con disabilità visiva, dato che si tratta di un medium interamente visuale.</p> + +<p>Per dimostrare che hai grande considerazione per l'accessibilità e che l'hai inclusa nel tuo progetto, pubblica una dichiarazione di accessibilità sul tuo sito nella quale spieghi in dettaglio la tua politica sull'accessibilità, e quali misure hai adottato per rendere il sito accessibile. Se un utente ti contatta lamentando un problema di accessibilità, assicurati di ascoltarlo con attenzione e chiarire tutti i dettagli, sii empatico, e adotta tutte le misure ragionevoli per risolvere il problema.</p> + +<div class="note"> +<p><strong>Nota</strong>: Il nostro articolo (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Come gestire i problemi di accessibilità più comuni</a> spiega con maggiori dettagli le specifiche di accessibilità che devono essere testate. </p> +</div> + +<p>Per riassumere:</p> + +<ul> + <li>Prendi in considerazione l'accessibilità sin dall'inizio del progetto, e fai test sin da subito e spesso. Così come con qualsiasi altro bug, un problema di accessibilità diventa sempre più costoso da sistemare quanto più tardi viene scoperto.</li> + <li>Tieni a mente che la maggior parte delle pratiche di accessibilità beneficiano tutti gli utenti, non solo quelli con disabilità. Per esempio un codice essenziale, ordinato e semantico non è solo utile per i lettori di schermo, ma è anche più facile e veloce da caricare per i browser, dunque è utile a tutti, soprattutto coloro che usano dispositivi mobili e/o connessioni a internet lente.</li> + <li>Pubblica una dichiarazione di accessibilità sul tuo sito, ascolta con attenzione le segnalazioni di eventuali problemi e fai tutto il possibile per risolverli.</li> +</ul> + +<h2 id="Linee_guida_di_accessibilità_e_legge">Linee guida di accessibilità e legge</h2> + +<p>Ci sono numerose checklist e set di linee guida disponibili per effettuare test basici di accessibilità, e a prima vista possono apparire complicate. Ti consigliamo innanzitutto di acquisire familiarità con le aree più importantidi cui devi occuparti, e di cercare di comprendere le strutture generali delle linee guida che sono più rilevanti al tuo caso specifico.</p> + +<ul> + <li>Per cominciare, il W3C ha pubblicato un documento molto dettagliato che include criteri molto precisi e non-tecnici per conformarsi a uno standard accettabile di accessibilità. Tale documento è chiamato <a href="https://www.w3.org/Translations/WCAG20-it/">Linee guida per l'accessibilità dei contenuti web</a>, e si tratta di una lettura piuttosto lunga. I criteri di accessibilità sono divisi in 4 categorie principali, che spiegano come rendere il contenuto percepibile, utilizzabile, comprensibile e robusto. Una versione molto riassunta del documento si può trovare (in inglese) all'indirizzo <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Non è necessario imparare le linee guida a memoria, sii cosciente delle aree generali di cui devi occuparti, e usa una varietà di tecniche e strumenti per gestire le aree che non sono conformi alle linee guida (vedi sotto per maggiori dettagli).</li> + <li>Tieni in conto inoltre che esiste una legislazione specifica riguardante l'accessibilità web in vari paesi come Stai Uniti, Germania, Inghilterra, Australia ed anche Italia (vedi <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a>).</li> +</ul> + +<p>È una buona idea leggere il testo della legge italiana sull'accessibilità, per familiarizzarsi con essa ed evitare eventuali problemi legali per i tuoi siti.</p> + +<h2 id="API_per_l'accessibilità">API per l'accessibilità</h2> + +<p>I browser fanno uso di alcune <strong>API speciali per l'accessibilità</strong> (fornite dal sistema operativo) che mostrano informazioni utili per le tecnologie assistive (TA). Le TA in generale usano solo informazioni semantiche, dunque non prendono in considerazione aspetti come lo stile di una pagina o gli script in JavaScript. Le informazioni sono strutturate in una <strong>mappa ad albero</strong>.</p> + +<p>Ogni sistema operativo ha la sua API per l'accessibilità:</p> + +<ul> + <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> + <li>Mac OS X: NSAccessibility</li> + <li>Linux: AT-SPI</li> + <li>Android: Accessibility framework</li> + <li>iOS: UIAccessibility</li> +</ul> + +<p>Quando le informazioni semantiche native fornite dagli elementi HTML della tua applicazione web non sono sufficienti, puoi supplementarle con caratteristiche della <a href="https://www.w3.org/TR/wai-aria/">specificazione WAI-ARIA</a> (articolo in inglese), che aggiunge informazione semantica alla mappa ad albero per migliorare l'accessibilità. Puoi sapere di più su WAI-ARIA nel nostro articolo <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">basi di WAI-ARIA</a>.</p> + +<h2 id="Riassunto">Riassunto</h2> + +<p>Questo articolo dovrebbe averti fornito una utile panoramica sull'accessibilità, averti mostrato perchè è importante, e come puoi inserirla nel tuo flusso di lavoro. Dovrebbe inoltre aver suscitato il tuo interesse e un desiderio di conoscere i dettagli su come implementare l'accessibilità nei tuoi progetti. Cominceremo a occuparcene proprio nella prossima sezione, dove spiegheremo come HTML costituisce un'ottima base per l'accessibilità. </p> + +<div>{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}</div> diff --git a/files/it/learn/accessibilità/css_e_javascript_accessibilità/index.html b/files/it/learn/accessibilità/css_e_javascript_accessibilità/index.html new file mode 100644 index 0000000000..6f5e69fea4 --- /dev/null +++ b/files/it/learn/accessibilità/css_e_javascript_accessibilità/index.html @@ -0,0 +1,359 @@ +--- +title: Linee guida di accessibilità per CSS e JavaScript +slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità +tags: + - Accessibilità + - Articolo + - CSS + - Guida + - JavaScript + - colore + - contrasto + - imparare + - nascondere + - non intrusivo +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibilità")}}</div> + +<p class="summary">CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript e una idea chiara di <a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/Cosa_%C3%A8_accessibilit%C3%A0">cosa è l'accessibilità</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Imparare le basi di come utilizzare CSS e JavaScript correttamente per massimizzare l'accessibilità dei propri siti e allo stesso tempo evitare errori che potrebbero ridurla.</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_e_JavaScript_sono_accessibili">CSS e JavaScript sono accessibili?</h2> + +<p>CSS e JavaScript non hanno per l'accessibilità lo stesso livello di importanza che ha HTML, ma possono comunque arrecare grandi danni se usati impropriamente. Per dirlo in un'altra maniera, è importante che tu apprenda alcune linee guida sull'uso di CSS e JavaScript, per evitare di rovinare l'accessibilità dei tuoi documenti web.</p> + +<h2 id="CSS">CSS</h2> + +<p>Cominciamo col dare un'occhiata a CSS.</p> + +<h3 id="Semantiche_corrette_e_aspettative_dell'utente">Semantiche corrette e aspettative dell'utente</h3> + +<p>È possibile usare CSS per modificare <em>in qualsiasi modo</em> l'aspetto di qualsiasi elemento HTML, ma questo non significa che lo devi fare obbligatoriamente. Come abbiamo detto più volte nell'articolo <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a>, dovresti utilizzare sempre l'elemento semantico più appropriato per ogni situazione, a meno che sia davvero impossibile. Se non lo fai, puoi causare confusione e problemi di usabilità a tutti gli utenti, e in particolare a quelli con disabilità. Usare le semantiche corrette significa soprattutto venire incontro alle aspettative degli utenti: gli elementi devono apparire e funzionare secondo certi criteri, a seconda della loro funzione, e gli utenti si aspettano che queste convenzioni siano rispettate. </p> + +<p>Per esempio, un utente che usa lettore di schermo non può navigare una pagina attraverso gli elementi di heading se lo sviluppatore del sito non ha usato gli heading appropriati per etichettare il contenuto. Allo stesso modo, un heading perde la sua funzione visuale se lo hai modificato fino al punto in cui non appare più come un heading.</p> + +<p>La regola generale è che puoi modificare lo stile di un elemento perchè sia congruente con lo stile generale del tuo sito, ma non modificarlo tanto da far si che non appaia o agisca come ci si aspetterebbe. Le sezioni seguenti riassumono i principali elementi HTML da prendere in considerazione.</p> + +<h4 id="Struttura_del_contenuto_testuale_standard">Struttura del contenuto testuale "standard"</h4> + +<p>Heading, paragrafi, liste... Il contenuto testuale principale della tua pagina:</p> + +<pre class="brush: html"><h1>Heading</h1> + +<p>Paragrafo</p> + +<ul> + <li>Lista</li> + <li>Lista di due elementi.</li> +</ul></pre> + +<p>Un codice CSS tipico potrebbe essere il seguente:</p> + +<pre class="brush: css">h1 { + font-size: 5rem; +} + +p, li { + line-height: 1.5; + font-size: 1.6rem; +}</pre> + +<p>Dovresti:</p> + +<ul> + <li>Selezionare dimensioni dei caratteri, altezza delle linee, spazio tra le lettere ecc. con lo scopo di rendere il tuo testo logico, comprensibile e facile da leggere. </li> + <li>Assicurarti che i tuoi headings risaltino rispetto al corpo del testo, tipicamente apparendo in grassetto e con dimensioni del testo maggiori, come è il loro stile di default. Le liste dovrebbero apparire chiaramente come liste. </li> + <li>Assicurarti che il tuo testo abbia un buon contrasto con il colore di fondo.</li> +</ul> + +<p>Vedi gli articoli in inglese <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamenti di testo in HTML </a>e <a href="/en-US/docs/Learn/CSS/Styling_text">Modificare lo stile del testo</a> per maggiori informazioni.</p> + +<h4 id="Testo_enfatizzato">Testo enfatizzato</h4> + +<p>L'etichetta <code><em></code> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <code><strong> </code>ha lo stesso scopo, ma mostra il testo in grassetto:</p> + +<pre class="brush: html"><p>L'acqua è <em>molto calda</em>.</p> + +<p>Le gocce d'acqua che si formano su una suoerficie sono chiamate <strong>condensa</strong>.</p></pre> + +<p>Potresti aggiungere un colore particolare per il testo in evidenza:</p> + +<pre class="brush: css">strong, em { + color: #a60000; +}</pre> + +<p>Ad ogni modo, raramente avrai bisogno di modificare lo stile di elementi enfatizzati. Gli stili standard grassetto e corsivo sono molto riconoscibili, e modificarli potrebbe creare confusione. Per maggiori informazioni sull'enfasi vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Enfasi e importanza</a>.</p> + +<h4 id="Abbreviazioni">Abbreviazioni</h4> + +<p>l'etichetta <code><abbr></code> indica una abbreviazione o un acronimo, e permette, tramite l'attributo <code>title</code>, di fornire la versione estesa della frase o parola abbreviata:</p> + +<pre class="brush: html"><p>Il contenuto di un sito è codificato tramite <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> + +<p>Anche in questo caso potresti voler apportare qualche semplice modifica allo stile:</p> + +<pre class="brush: css">abbr { + color: #a60000; +}</pre> + +<p>Lo standard riconosciuto per indicare le abbreviazioni è una sottolineatura punteggiata, ed è raccomandabile non modificarlo significativamente. Per maggiori dettagli sulle abbreviazioni, vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Abbreviazioni</a>.</p> + +<h4 id="Link">Link</h4> + +<p>I link sono il mezzo con cui ti muovi da un punto all'altro della rete:</p> + +<pre class="brush: html"><p>Visita la <a href="https://www.mozilla.org">homepage di Mozilla</a>.</p></pre> + +<p>Qui sotto sono riportate alcune semplici modifiche allo stile dei link:</p> + +<pre class="brush: css">a { + color: #ff0000; +} + +a:hover, a:visited, a:focus { + color: #a60000; + text-decoration: none; +} + +a:active { + color: #000000; + background-color: #a60000; +}</pre> + +<p>Lo stile di default per i link è la sottolineatura, inoltre si presentano in diversi colori a seconda del loro stato: blu è il colore nello stato di default, viola nel caso il link sia stato visitato, rosso quando si "attiva" cliccandoci sopra. Oltre a ciò, il puntatore del mouse cambia forma quando lo si passa su un link, e il link viene messo in evidenza quando riceve focus (per esempio tramite tast TAB). Nell'immagine qui sotto possiamo vedere l'evidenziazione di un link in Firefox (cornice punteggiata) e Chrome (cornice azzurra):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> + +<p>Puoi modificare lo stile dei link come più ti piace, ma facendo attenzione a fornire agli utenti un feedback quando interagiscono coi link. Quando un link cambia di stato si dovrebbe notare. Inoltre, evita di rimuovere stili di default come il cambio di puntatore del mouse o l'evidenziazione quando un link riceve focus: entrambi sono molto importanti per l'accessibilità degli utenti che usano tastiera.</p> + +<h4 id="Formulari">Formulari</h4> + +<p>I formulari sono elementi che permettono agli utenti di introdurre dati in un sito web:</p> + +<pre class="brush: html"><div> + <label for="nome">Introduci il tuo nome</label> + <input type="text" id="nome" name="nome"> +</div></pre> + +<p>Puoi vedere un buon esempio di uso di CSS in un formulario qui: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (v<a href="http://mdn.github.io/learning-area/accessibility/css/form-css.html">edi anche la versione live</a>).</p> + +<p>La maggior parte del codice CSS che scriverai per i formulari sarà per modificare le dimensioni degli elementi, allineare elementi <code>label</code> e <code>input</code> e migliorarne l'aspetto esteriore.</p> + +<p>Non dovresti comunque modificare troppo il feedback visuale che gli elementi di un formulario mostrano quando ricevono focus, che è in pratica lo stesso dei link (vedi sopra). Puoi modificare l'aspetto delle evidenziazioni applicate agli elementi del formulario quando ricevono focus o hover del puntatore del mouse per far si che lo stile del tuo sito sia consistente sui diversi browser, ma evita di rimuoverle. Come già detto, alcuni utenti contano su tali "segnali" per poter interpretare ciò che sta accadendo mentre navigano un sito.</p> + +<h4 id="Tabelle">Tabelle</h4> + +<p>Prendiamo ora in considerazione le tabelle che si usano per presentare dati.</p> + +<p>Puoi vedere un buon esempio di tabella costruita con HTML e CSS qui: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (v<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">edi anche la versione live</a>).</p> + +<p>Il codice CSS applicato alle tabelle serve in genere a uniformarle allo stile generale del sito e a migliorarle esteticamente. Alcune buone pratiche sono ad esempio far si che gli header(intestazioni di file o colonne) della tabella siano in risalto, per esempio usando il grassetto, e far uso di una alternanza di sfondo chiaro e scuro per rendere più facile la distinzione tra le varie file della tabella.</p> + +<h3 id="Colore_e_contrasto">Colore e contrasto</h3> + +<p>Quando scegli uno schema di colori per il tuo sito, assicurati che il testo abbia un colore che contrasta bene con lo sfondo. Un basso contrasto dei colori può produrre un effetto interessante dal punto di vista estetico, ma renderà molto difficile poter leggere il tuo contenuto alle persone con problemi visivi come il daltonismo.</p> + +<p>C'è un modo molto facile per verificare se il contrasto che hai scelto è abbastanza alto da non causare problemi. Ci sono numerosi siti che ti permettono di introdurre il colore del testo e quello dello sfondo, per verificarne il contrasto. Per esempio il sito <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> è facile da usare, e fornisce una spiegazione (in inglese) dei criteri WCAG (<a href="https://www.w3.org/Translations/WCAG20-it/">Linee guida per l'accessibilità dei contenuti Web</a>) sul contrasto dei colori.</p> + +<div class="note"> +<p><strong>Nota</strong>: un contrasto alto sarà d'aiuto per poter leggere con maggiore facilità anche a chi si connette tramite telefono o tablet in ambienti con molta luce, come un parco o una piazza. </p> +</div> + +<p>Un altro consiglio è di non fare affidamento solo sul colore per fornire un certo tipo di informazioni o segnali, in quanto tali informazioni non potranno essere interpretate da chi non vede i colori. Per esempio, invece di limitarti a marcare in rosso i campi di un formulario che sono da compilare obbligatoriamente, marcali anche con un asterisco.</p> + +<h3 id="Nascondere_elementi">Nascondere elementi</h3> + +<p>Ci sono molte situazioni nelle quali è necessario che non tutto il contenuto sia mostrato allo stesso tempo. Per esempio nel nostro <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info box a schede</a> (vedi <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codice sorgente</a>) abbiamo tre schede con informazioni posizionate una sopra l'altra, e ci sono tre bottoni cliccabili per passare da una scheda all'altra (il box è accessibile anche da tastiera, usando il tasto TAB per spostarsi tra i bottoni e INVIO per selezionare una scheda).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<p>Gli utenti che usano lettori di schermo non avranno problemi a leggere tutte le schede, l'importante è che l'ordine del contenuto sia sensato. Usare <code>position: absolute</code> (come nel nostro esempio) è in generale considerato come uno dei migliori metodi per nascondere contenuto, perchè non impedisce ai lettori di schermo di leggerlo.</p> + +<p>D'altro canto, non dovresti usare {{cssxref("visibility")}}<code>:hidden</code> o {{cssxref("display")}}<code>:none</code>, perchè nascondono il contenuto ai lettori di schermo. A meno che, ovviamente, ci sia una buona ragione per nascondere questo contenuto ai lettori di schermo.</p> + +<div class="note"> +<p><strong>Nota</strong>: l'articolo in inglese <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Contenuto visibile solo ai lettori di schermo</a> fornisce molti più dettagli su questo argomento.</span></p> +</div> + +<h3 id="È_possibile_che_gli_utenti_modifichino_lo_stile_dei_tuoi_elementi">È possibile che gli utenti modifichino lo stile dei tuoi elementi</h3> + +<p id="Accept_that_users_can_override_your_styles">A volte gli utenti alterano gli stili che hai impostato sostituendoli con stili personalizzati. Per esempio:</p> + +<ul> + <li>Vedi gli articoli in inglese <a href="https://www.itsupportguides.com/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-google-chrome/">Come cambiare manualmente il CSS in Chrome</a>, <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/">Firefox</a> e <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Internet Explorer</a>.</li> + <li>Probabilmente è più facile farlo con una estensione, per esempio Stylish, disponibile per <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, e <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> +</ul> + +<p>Gli utenti modificano il CSS per differenti ragioni: un utente con problemi di vista potrebbe voler ingrandire automaticamente il testo su tutti i siti che visita, un utente con daltonismo potrebbe voler aumentare il contrasto dei colori per facilitare la lettura. Qualunque sia la ragione, dovresti tenere in considerazione questa possibilità, e usare un disegno del tuo sito che sia sufficientemente flessibile per poter gestire tali cambi. Per esempio, dovresti assicurarti che l'area dove è situato il tuo contenuto principale può supportare un ingrandimento del testo, mantenendone il formato base e senza farne scomparire parti.</p> + +<h2 id="JavaScript">JavaScript</h2> + +<p> </p> + +<p>Anche JavaScript può causare problemi di accessibilità, dipendendo da come si utilizza.</p> + +<p>JavaScript è un linguaggio molto potente, e possiamo usarlo per compiere un'infinità di funzioni, da semplici aggiornamenti del contenuto o della IU a giochi completi in 2D o 3D. Nessuna regola dice che tutto il contenuto deve essere accessibile al 100% a tutti, ma devi fare tutto il possibile, e cercare di rendere le tue applicazioni il più accessibili possibile.</p> + +<p>Il contenuto e gli elementi funzionali semplici sono relativamente facili da rendere accessibili: per esempio testo, immagini, tabelle, formulari e bottoni. Come abbiamo visto nell'articolo <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a>, le considerazioni chiave sono:</p> + +<ul> + <li>Buone semantiche: usare l'elemento più appropriato per ogni funzione specifica. Per esempio, assicurarsi di usare heading e paragrafi, ed elementi {{htmlelement("button")}} e{{htmlelement("a")}}.</li> + <li>Assicurarsi che il contenuto sia disponibile in forma testuale, o direttamente o tramite <a href="/it/docs/Learn/Accessibilit%C3%A0/HTML_accessibilit%C3%A0#Alternative_testuali">alternative testuali</a>, come per esempio il testo alternativo per le immagini.</li> +</ul> + +<p>Abbiamo inoltre visto un esempio di uso di JavaScript per migliorare l'accessibilità aggiungendo una funzionalità che mancava (vedi <a href="/it/docs/Learn/Accessibilit%C3%A0/HTML_accessibilit%C3%A0#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>). Questo procedimento non è ideale, visto che si dovrebbe usare l'elemento più appropriato per ogni funzione sin dall'inizio, ma dimostra che è possibile intervenire sul codice in situazioni in cui è necessario modificarlo dopo la sua creazione. Un altro modo per migliorare l'accessibilità degli elementi che usano JavaScript non semantico è usare la tecnologia WAI-ARIA per fornire valore semantico extra per gli utenti che usano lettori di schermo. Il prossimo articolo spiegherà in dettaglio come farlo.</p> + +<p>Funzionalità complesse come i giochi in 3D non sono tanto facili da rendere accessibili. Un gioco 3D creato usando <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> si svilupperà su un elemento {{htmlelement("canvas")}} , che al momento non permette di fornire alternative testuali o altre informazioni utili per persone con disabilità visiva. Si può ragionevolmente obbiettare che un tale tipo di gioco non ha nel suo target di utenza persone non vedenti, e in effetti sarebbe esagerato pretendere di renderlo accessibile al 100%. Ma ad ogni modo è consigliabile implementare alcuni elementi di accessibilità come i controlli da tastiera, che permettono di giocare anche a utenti senza mouse, e assicurarsi che lo schema dei colori abbia un contrasto sufficientemente alto per essere usabile da persone con daltonismo.</p> + +<h3 id="Il_problema_di_un_uso_eccessivo_di_JavaScript">Il problema di un uso eccessivo di JavaScript</h3> + +<p>Spesso gli sviluppatori di siti fanno un uso eccessivo di JavaScript. A volte si trovano siti in cui tutto è stato fatto con JavaScript, perfino HTML e CSS sono stati generati con JavaScript. Questo tipo di siti presentano grossi problemi di accessibilità e non solo, ed è sconsigliato sviluppare siti in questo modo.</p> + +<p>Così come devi usare il giusto elemento per ogni funzione, assicurati anche di star usando la giusta tecnologia! Pensa bene se vale davvero la pena ricorrere a JavaScript per creare un pannello informazioni in 3D, mentre un semplice pannello testuale potrebbe essere sufficiente. Chiediti se hai davvero bisogno di un formulario basato su un widget super complesso, quando magari un semplice campo di input testuale andrebbe bene. E non generare tutto il tuo contenuto HTML con JavaScript. </p> + +<h3 id="Mantieni_un_uso_non_intrusivo_di_JavaScript">Mantieni un uso non intrusivo di JavaScript</h3> + +<p>Dovresti usare JavaScript con discrezione quando crei il tuo contenuto. L'idea di base è che JavaScript dovrebbe essere usato quando possibile per migliorare una funzionalità, ma non per costruirla. Le funzioni più basiche del sito dovrebbero essere indipendenti da JavaScript, anche se a volte ciò non è possibile. Una buona pratica è usare funzionalità già presenti nei browser quando è possibile.</p> + +<p>Buoni esempi di uso non intrusivo di JavaScript sono:</p> + +<ul> + <li>Eseguire la validazione dei formulari dal lato cliente, che avvisa istantaneamente l'utente di errori o problemi nei campi che ha riempito, senza dover aspettare che il server controlli i dati e invii una risposta. Senza validazione dal lato cliente, il formulario funzionerà comunque, ma con maggiore lentezza. </li> + <li>Fornire controlli personalizzati per i <code><video></code> HTML5 perchè siano accessibili agli utenti che navigano tramite tastiera, insieme a un link diretto al video da usare se JavaScript non è disponibile (nella maggior parte dei browser i controlli <code><video></code> di default non sono accessibili tramite tastiera).</li> +</ul> + +<p>Per fare un esempio abbiamo creato un semplice formulario con validazione dal lato cliente, vedi: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">versione live</a>). Nella pagina vedrai un formulario, e, quando provi a inviarlo, se avrai lasciato uno o entrambi i campi vuoti apparirà un messaggio di errore per spiegarti qual è il problema.</p> + +<p>Questo tipo di validazione di un formulario è non intrusiva, puoi infatti usare il formulario anche con JavaScript disabilitato, e inoltre il formulario dovrà comunque essere validato anche dal lato server, poichè sarebbe troppo facile per un utente con cattive intenzioni bypassare la validazione dal lato cliente (per esempio disattivando JavaScript nel browser). La validazione dal lato cliente è utile per segnalare istantaneamente eventuali errori all'utente, senza dover attendere la risposta del server, migliorando così l'usabilità del formulario.</p> + +<div class="note"> +<p><strong>Nota</strong>: nel nostro esempio la validazione dal lato server non è stata implementata. </p> +</div> + +<p>Abbiamo inoltre reso la validazione di questo formulario accessibile, usando l'elemento {{htmlelement("label")}} per assicurarci che ogni campo di input abbia associata una etichetta senza alcuna ambiguità, di modo che i lettori di schermo possano leggere il blocco input+etichetta come una sola unità: </p> + +<pre class="brush: html"><label for="nome">Inserisci il tuo nome:</label> +<input type="text" name="nome" id="nome"></pre> + +<p>La validazione avviene solo al momento dell'invio del formulario. In questo modo la IU non viene aggiornata troppo spesso potendo causare confusione negli utenti che usano lettori di schermo (e anche in quelli che non li usano):</p> + +<pre class="brush: js">form.onsubmit = validate; + +function validate(e) { + errorList.innerHTML = ''; + for(var i = 0; i < formItems.length; i++) { + var testItem = formItems[i]; + if(testItem.input.value === '') { + errorField.style.left = '360px'; + createLink(testItem); + } + } + + if(errorList.innerHTML !== '') { + e.preventDefault(); + } +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: in questo esempio stiamo nascondendo e mostrando il messaggio di errore usando <code>position: absolute </code>invece che un altro metodo come <code>visibility: hidden</code> o <code>display: none</code>, perchè in questo modo il lettore di schermo potrà leggerlo senza problemi. </p> +</div> + +<p>Una validazione reale sarebbe molto più complessa, dovremmo controllare che il nome introdotto sembri effettivamente un nome, che l'età sia un numero e che sia realistica (per esempio non può essere un numero negativo, o di 4 cifre). Nell'esempio abbiamo implementato solo un sistema di verifica che controlla se i campi sono stati riempiti o no (<code>if(testItem.input.value === '')</code>).</p> + +<p>Quando la validazione ha terminato con esito positivo, il formulario viene inviato. Se ci sono errori (<code>if(errorList.innerHTML !== '')</code>) l'invio viene bloccato (usando <code><a href="/it/docs/Web/API/Event/preventDefault">preventDefault()</a></code>), e si mostra il messaggio di errore (vedi sotto). Con questo meccanismo gli errori saranno mostrati solo se ci saranno effettivamente errori, migliorando l'usabilità. </p> + +<p>Per ogni campo del formulario che è vuoto al momento dell'invio creiamo un item con un link e lo inseriamo nella lista errori (<code>errorList</code>).</p> + +<pre class="brush: js">function createLink(testItem) { + var listItem = document.createElement('li'); + var anchor = document.createElement('a'); + anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; + anchor.href = '#' + testItem.input.name; + anchor.onclick = function() { + testItem.input.focus(); + }; + listItem.appendChild(anchor); + errorList.appendChild(listItem); +}</pre> + +<p>Ogni link ha una doppia funzionalità: segnala il tipo di errore e inoltre cliccandoci sopra sposta il focus automaticamente sul campo vuoto da riempire.</p> + +<div class="note"> +<p><strong>Nota</strong>: il metodo <code>focus()</code> dell'esempio può creare confusione. Chrome e Edge (e le ultime versioni di IE) sposteranno il focus al campo relativo quando si clicca sul link, senza bisogno della funzione <code>onclick</code>/<code>focus()</code>. Safari si limiterà a evidenziare il campo, ma ha bisogno di <code>onclick</code>/<code>focus()</code> per spostare effettivamente il focus su di esso. Firefox al momento non è in grado di spostare il focus su un campo specifico, quindi il metodo non funzionerà su Firefox. Il problema dovrebbe essere risolto in futuro.</p> +</div> + +<p> </p> + +<p>Inoltre, il messaggio di errore è stato posto in cima nel codice HTML (anche se poi viene visualizzato in un altro punto della pagina usando CSS per posizionarlo), di modo che l'utente, tornando in cima alla pagina, può sapere che errore c'è nel suo formulario e andare direttamente al campo in questione.</p> + +<p>Come annotazione finale, si noti che abbiamo usato alcuni attributi WAI-ARIA nel nostro esempio, per aiutare a risolvere problemi di accessibilità causati da aree del contenuto che si aggiornano costantemente senza che la pagina si ricarichi (di default i lettori di schermo non segnaleranno ciò agli utenti):</p> + +<p> </p> + +<pre><div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> +</div></pre> + +<p>Torneremo a occuparci più dettagliatamente di questo tipo di attributi nel prossimo articolo sulla tecnologia <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: forse starai pensando che HTML5 include già alcuni meccanismi di validazione come gli attributi <code>required</code>, <code>min</code>/<code>minlength</code>, e <code>max</code>/<code>maxlength</code>. Non abbiamo fatto uso di tali attributi nell'esempio, perchè non presentano ancora un livello accettabile di compatibilità nei differenti browser (per esempio Safari non li supporta, Internet Explorer solo a partire dalla versione 10).</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: l'articolo in inglese <a href="http://webaim.org/techniques/formvalidation/">Forme usabili ed accessibili di validazione di formulari e risoluzione di errori</a> fornisce ulteriori utili informazioni su come creare un processo di validazione acessibile.</p> +</div> + +<h3 id="Altri_problemi_di_accessibilità_con_JavaScript">Altri problemi di accessibilità con JavaScript</h3> + +<p>Ci sono altri aspetti relativi all'accessibilità da tenere in conto quando si usa JavaScript. Ne aggiungeremo altri all'articolo in futuro.</p> + +<h4 id="Eventi_specifici_del_mouse">Eventi specifici del mouse</h4> + +<p>Come forse già saprai, le interazioni dell'utente con il sito tramite mouse sono gestite in JavaScript usando i gestori di eventi (event handlers), che ci permettono di eseguire funzioni in risposta a determinati eventi attivati dalle azioni compiute dall’utente con il mouse. Alcuni esempi di eventi specificamente relativi al mouse sono <a href="/en-US/docs/Web/Events/mouseover">mouseover</a>, <a href="/en-US/docs/Web/Events/mouseout">mouseout</a>, <a href="/en-US/docs/Web/Events/dblclick">dblclick</a>, ecc. Le funzionalità associate a tali eventi non sono accessibili usando altri dispositivi, come per esempio la tastiera. </p> + +<p>Per attenuare i problemi di accessibilità che ne derivano, dovresti associare a tali eventi altri eventi simili ma che sono attivati in altra maniera (i cosiddetti gestori di eventi indipendenti dal dispositivo). Per esempio <a href="/en-US/docs/Web/Events/focus">focus</a> e <a href="/en-US/docs/Web/Events/blur">blur</a> forniscono accessibilità per gli utenti che navigano con la tastiera.</p> + +<p>Vediamo ora un esempio che dimostra questo tipo di situazione. Supponiamo che in una pagina del nostro sito ci sia una immagine in miniatura, che si espande quando ci si passa sopra con il puntatore del mouse, oppure quando riceve focus (per esempio pensiamo al catalogo di un sito di e-commerce).</p> + +<p>Abbiamo creato un esempio molto semplice, che puoi trovare qui: <a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">codice sorgente</a>). Il codice ha due funzioni per mostrare o nascondere l'immagine ingrandita; qui sotto vediamo il codice dei gestori degli eventi:</p> + +<pre class="brush: js">imgThumb.onmouseover = showImg; +imgThumb.onmouseout = hideImg; + +imgThumb.onfocus = showImg; +imgThumb.onblur = hideImg;</pre> + +<p>Le prime due linee di codice riguardano il mouse: la prima funzione si attiva al passare il puntatore del mouse sulla miniatura, mentre la seconda si attiva al togliere il puntatore dall'area della miniatura. Questo codice però non permette di vedere l'immagine ingrandita tramite tastiera. Per poterlo fare, abbiamo aggiunto le atre due linee di codice, che attivano le stesse funzioni quando la miniatura riceve focus o lo perde. Si può spostare il focus sulla miniatura usando il tasto TAB, perchè al codice HTML dell'elemento abbiamo aggiunto l'attributo <code>tabindex="0"</code>.</p> + +<p>L'evento <a href="/en-US/docs/Web/Events/click">click</a> è interessante, a prima vista potrebbe sembrare un evento esclusivamente relativo al mouse, ma nella maggior parte dei browser il gestore di eventi <a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> si attiverà anche premendo il tasto INVIO su un link o un elemento di formulario con focus, o quando si clicca sull'elemento con il dito se si usa un dispositivo con touchscreen.</p> + +<p>Tieni presente comunque che questo non funziona nel caso in cui si usi <code>tabindex </code>per dare il focus a un elemento che di default non lo potrebbe avere. In casi come questo devi rilevare quando il tasto specifico è premuto (vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>).</p> + +<h2 id="Riassunto">Riassunto</h2> + +<p> </p> + +<p>Speriamo che questo articolo ti sia servito a capire meglio i problemi di accessibilità relativi all'uso di CSS e JavaScript sui tuoi siti o applicazioni.</p> + +<p>E ora, WAI-ARIA!</p> + +<div>{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibilità/WAI-ARIA_basics", "Learn/Accessibilità")}}</div> diff --git a/files/it/learn/accessibilità/html_accessibilità/index.html b/files/it/learn/accessibilità/html_accessibilità/index.html new file mode 100644 index 0000000000..26129068e4 --- /dev/null +++ b/files/it/learn/accessibilità/html_accessibilità/index.html @@ -0,0 +1,538 @@ +--- +title: 'HTML: una buona base per l''accessibilità' +slug: Learn/Accessibilità/HTML_accessibilità +tags: + - Accessibilità + - Articolo + - Bottoni + - Formulari + - HTML semantico + - Lettore di schermo + - Link + - Principiante + - TA + - Testo Alternativo + - tastiera + - tecnologie assistive +translation_of: Learn/Accessibility/HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}</div> + +<p class="summary">Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML e una idea chiara di <a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">cosa è l'accessibilità</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Acquisire familiarità con le caratteristiche di HTML che hanno effetti positivi sull'accessibilità, e imparare a usarle correttamente nello sviluppo dei propri siti e applicazioni. </td> + </tr> + </tbody> +</table> + +<h2 id="HTML_e_accessibilità">HTML e accessibilità</h2> + +<p> </p> + +<p>Man mano che impari cose nuove su HTML (leggendo nuove risorse, analizzando esempi di codice, ecc.), ti accorgerai sicuramente di un tema ricorrente: l'importanza di usare HTML semantico (a volte chiamato POSH, Plain Old Semantic HTML). Ciò significa utilizzare il più possibile gli elementi HTML più corretti per il proprio scopo.</p> + +<p>Forse ti chiederai perché è tanto importante. Dopotutto, puoi usare un combinazione di CSS e JavaScript per far sì che qualsiasi elemento HTML si comporti esattamente come tu vuoi. Per esempio, un bottone che controlla la riproduzione di un video sul tuo sito si potrebbe codificare così:</p> + +<p> </p> + +<pre class="brush: html"><div>Play video</div></pre> + +<p>Ma, come vedrai in dettaglio più avanti, ha molto più senso usare un elemento più specifico:</p> + +<pre class="brush: html"><button>Play video</button></pre> + +<p>Non solo l'elemento <code><button> </code>presenta di default uno stile più appropriato alla sua funzione (anche se probabilmente in seguito modificherai tale stile), ma è anche perfettamente accessibile con la tastiera. Ciò significa che un utente che usa la tastiera per navigare potrà spostarsi da un bottone all'altro del sito usando il tasto TAB, e premere i bottoni usando INVIO.</p> + +<p>L'HTML semantico non richiede più tempo per essere scritto del codice non-semantico se lo utilizzi con consistenza sin dal principio del progetto, e inoltre presenta numerosi altri benefici che vanno al di là dell'accessibilità:</p> + +<p> </p> + +<ol> + <li><strong>Maggior facilità nello sviluppo</strong> — come già detto in precedenza, gli elementi HTML semantici hanno già integrate in sè alcune funzionalità aggiuntive. inoltre rendono il codice più facile da leggere e interpretare.</li> + <li><strong>Miglior rendimento su dispositivi mobili </strong>— l'HTML semantico è più leggero del non-semantico, e più facile da rendere responsivo.</li> + <li><strong>Utile per il SEO</strong> — i motori di ricerca danno maggior importanza alle parole chiave contenute in heading, link, ecc. rispetto a quelle contenute in generici <code><div></code> non-semantici, dunque i tuoi siti saranno più facili da trovare. </li> +</ol> + +<p>Ora vedremo più in dettaglio come produrre un codice HTML accessibile.</p> + +<div class="note"> +<p><strong>Nota</strong>: È una buona idea installare un lettore di schermo sul tuo computer, così che tu possa testare gli esempi mostrati più avanti. Vedi la guida in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guida ai lettori di schermo</a> per maggiori dettagli.</p> +</div> + +<h2 id="Semantiche_corrette"><strong>Semantiche corrette</strong></h2> + +<p> </p> + +<p>Abbiamo già parlato dell'importanza di usare la giusta semantica, e perchè è importante usare i corretti elementi HTML per ogni situazione. Questa pratica non può essere ignorata, visto che è una delle principali situazioni in cui l'accessibilità viene compromessa se non si agisce propriamente.</p> + +<p>Se si analizzano i siti presenti in rete, si noterà che ci sono casi di utilizzo molto poco ortodosso del codice HTML. Alcuni errori sono dovuti a pratiche ormai in disuso che non sono state debitamente aggiornate, altri semplicemente a ignoranza. In ogni caso, ogni volta che trovi del codice erroneo, dovresti fare il possibile per sistemarlo.</p> + +<p>A volte non sei nella posizione di poter correggere del codice mal scritto, per esempio se le tue pagine si basano su un framework esterno su cui non hai controllo, o se sul tuo sito è presente contenuto di terze parti (come ad esempio banners pubblicitari) che non puoi modificare.</p> + +<p>Comunque, tieni a mente che l'obiettivo non è "tutto o niente". Ogni piccolo miglioramento che riuscirai a implementare sarà utile alla causa dell'accessibilità.</p> + +<h3 id="Contenuto_testuale">Contenuto testuale</h3> + +<p>Uno dei più grandi aiuti per un utente che usa un lettore di schermo è una buona struttura del contenuto, diviso in headings, paragrafi, liste ecc. Un buon esempio può essere il seguente codice:</p> + +<pre class="brush: html example-good line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>Titolo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Questa è la prima sezione del mio documento.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Ecco qui un altro paragrafo.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> + +<ol> + <li>Questa è</li> + <li>una lista</li> + <li>composta da</li> + <li>vari elementi</li> +</ol></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Seconda sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="punctuation token">Questa è la seconda sottosezione del mio documento</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<p>Abbiamo preparato un'altra versione più lunga che puoi provare a navigare con un lettore di schermo (vedi: <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">buone-semantiche.html</a>). Se provi a leggere tale pagina, ti renderai conto che è facile da navigare:</p> + +<ol> + <li>Il lettore di schermo legge ogni etichetta man mano che avanza nella lettura del contenuto, facendoti sapere quale è un heading, quale un paragrafo ecc.</li> + <li>Il lettore si ferma dopo ogni elemento, permettendoti di procedere al ritmo di lettura che ti è più comodo.</li> + <li>Nella maggior parte dei lettori di schermo, puoi saltare al precedente o seguente heading.</li> + <li>Molti lettori di schermo inoltre ti forniscono una lista di tutti gli heading presenti, permettendoti di avere un utile indice per trovare contenuti specifici. </li> +</ol> + +<p>A volte si scrivono headings e paragrafi usando HTML non semantico e salti di linea, come nel caso seguente:</p> + +<pre class="brush: html example-bad line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Titolo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +Questa è la prima sezione del mio documento. +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +Ecco qui un altro paragrafo. +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +1. Questa è +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +2. una lista +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +3. composta da +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +4. vari elementi +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="punctuation token">Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla</span></span>! +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Seconda sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="punctuation token">Questa è la seconda sottosezione del mio documento</span></span>.</code></pre> + +<p>Se provi a leggere questa versione con un lettore di schermo (vedi <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">cattive-semantiche.html</a>), l’esperienza non ti risulterà positiva. Il lettore di schermo non avrà riferimenti che lo guidino, e non potrà fornirti un sommario dei contenuti. L'intera pagina gli apparirà come un blocco unico, e la leggerà tutta in una volta.</p> + +<p>Ci sono inoltre altri problemi che vanno al di là dell'accessibilità: per esempio è difficile applicare stile al contenuto usando CSS, o manipolarlo con JavaScript, perchè non ci sono elementi da usare come selettori.</p> + +<h4 id="Usare_un_linguaggio_chiaro">Usare un linguaggio chiaro</h4> + +<p>Anche il linguaggio che usi può avere un effetto sull'accessibilità. In generale dovresti usare un linguaggio chiaro e non troppo complesso, privo di termini gergali o eccessivamente tecnici. Ciò non è d'aiuto solo alle persone con disabilità cognitive o di altro tipo; è anche utile ad utenti per i quali il testo è scritto in una lingua che non conoscono bene, a utenti di età molto giovane... Di fatto, è utile a tutti! A parte ciò, dovresti anche fare attenzione a non usare termini e caratteri che risultino poco chiari se letti con un lettore di schermo. Per esempio:</p> + +<ul> + <li>Non usare trattini se puoi evitarli. Invece di scrivere "5-7", scrivi "da 5 a 7".</li> + <li>Espandi le abbreviazioni: invece di "gen", scrivi "gennaio".</li> + <li>Cerca di scrivere la forma completa degli acronimi, almeno la prima volta che li usi. Per esempio quando scrivi "HTML" per la prima volta in una pagina, scrivi "Hypertext Markup Language, o HTML".</li> +</ul> + +<h3 id="Layout_di_pagina">Layout di pagina</h3> + +<p>Molto tempo fa, era pratica abituale creare layout di pagina con tabelle HTML, usando le celle di una tabella per contenere header, footer, barra laterale, la colonna del contenuto principale ecc. Questa non è una buona pratica, visto che un lettore di schermo molto probabilmente darà una lettura confusa delle celle, soprattutto se il layout è complesso e presenta sottotabelle secondarie.</p> + +<p>Prova questo esempio: <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">layout-tabella.html</a>, che corrisponde al seguente codice:</p> + +<pre class="brush: html"><table width="1200"> + <!-- fila del titolo della tabella --> + <tr id="titolo"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- fila del menu di navigazione --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Our team</a> + </td> + <td width="200"> + <a href="#" align="center">Projects</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Search query" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Go!</button> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- fila del contenuto principale e sezione laterale --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> + + <!-- contenuto principale --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Related</h2> + + <!-- sezione laterale --> + + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- fila del footer --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </tr> + </table></pre> + +<p> </p> + +<p>Se provi a navigare la pagina con un lettore di schermo, probabilmente ti dirà che c'è una tabella (anche se alcuni lettori di schermo riescono a differenziare i layout a tabella dalle tabelle di dati). Poi dovrai (a seconda del lettore di schermo che stai usando) esplorare la tabella cella per cella, e infine uscirne per poter navigare il contenuto.</p> + +<p>I layout a tabella son una reliquia del passato, avevano senso in un'epoca in cui non tutti i browser supportavano CSS, ma creano confusione per gli utenti che usano lettori di schermo, e inoltre sono una cattiva pratica per molte altre ragioni (per esempio richiedono una quantità maggiore di codice e rendono il disegno meno flessibile). Non usarli!</p> + +<p>Puoi verificare queste affermazioni comparando le tue esperienze precedenti con un <a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">esempio di struttura più moderna del sito</a>, che corrisponde al seguente codice:</p> + +<pre class="brush: html"><header> + <h1>Header</h1> +</header> + +<nav> + <!-- navigazione principale --> +</nav> + +<!-- contenuto principale --> +<main> + + <!-- articolo --> + <article> + <h2>Article heading</h2> + + <!-- contenuto dell'articolo --> + </article> + + <aside> + <h2>Related</h2> + + <!-- contenuto della sezione laterale --> + </aside> + +</main> + +<!-- footer, usato in tutte le pagine del sito --> + +<footer> + <!-- contenuto del footer --> +</footer></pre> + +<p>Se provi questa nuova versione del sito con un lettore di schermo, vedrai che il layout del codice non è più un ostacolo alla lettura del contenuto. Inoltre puoi notare come sia molto più agile e leggero in termini di quantità di codice, cosa che implica una maggior facilità di gestione e mantenimento, e minor utilizzo di banda da parte dell'utente (molto utile per chi ha una connessione lenta).</p> + +<p>Un'altro aspetto da tenere presente quando si creano layout è quello di usare HTML5 semantico, come visto nell'esempio precedente (vedi il compendio in inglese <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sezioni del contenuto</a>). Potresti creare un layout usando solo elementi annidati {{htmlelement("div")}}, ma è molto meglio usare elementi specifici appropriati per distinguere le varie sezioni della pagina, come la sezione con gli elementi di navigazione ({{htmlelement("nav")}}), il footer ({{htmlelement("footer")}}), unità di contenuto che si ripetono ({{htmlelement("article")}}), ecc. Questi elementi forniscono un ulteriore contenuto semantico per i lettori di schermo (e per altri strumenti) per dare agli utenti indicazioni extra riguardo il contenuto che stanno navigando (vedi l'articolo in inglese <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Supporto dei nuovi elementi HTML5 di sezione nei lettori di schermo </a>per farti un'idea dello stato del supporto nei lettori di schermo).</p> + +<div class="note"> +<p><strong>Nota</strong>: oltre ad una buona semantica ed un layout esteticamente apprezzabile, il tuo contenuto dovrebbe essere organizzato in un ordine logico. Puoi sempre muoverlo in seguito utilizzando CSS, ma il codice sorgente dovrebbe essere nel giusto ordine, di modo che gli utenti che usano lettori di schermo lo possano interpretare correttamente. </p> +</div> + +<h3 id="Controlli_di_Interfaccia_Utente">Controlli di Interfaccia Utente</h3> + +<p>Con il termine “controlli IU” intendiamo i componenti di un sito con cui gli utenti interagiscono. I più comuni sono bottoni, link e formulari. In questa sezione analizzeremo gli aspetti basici da tenere in considerazione quando si creano tali elementi. Più avanti gli articoli su WAI-ARIA e multimedia prenderanno in considerazione altri aspetti dell'accessibilità IU.</p> + +<p>Un aspetto chiave dell'accessibilità dei controlli IU è che di default i browser permettono di interagire con essi tramite tastiera. Puoi fare una prova usando il nostro esempio <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">accessibilità-tastiera-nativa.html</a> (vedi il <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">codice sorgente</a>): apri la pagina in una nuova scheda e prova a premere il bottone TAB; dopo averlo premuto qualche volta, dovresti vedere il focus muoversi da un elemento all'altro della pagina. Gli elementi con focus hanno un sistema di evidenziazione per rendere chiaro quale elemento è selezionato al momento. Questo sistema varia leggermente da browser a browser.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> + +<p>Dopo averlo selezionato tramite TAB, puoi usare il tasto INVIO per premere un bottone (nell'esempio i bottoni quando premuti producono un messaggio di avviso); allo stesso modo, premendo INVIO puoi aprire un link che hai selezionato. Inoltre, dopo averlo selezionato con il tasto TAB, puoi scrivere in un campo del formulario, o selezionare un elemento dal menu a tendina usando i tasti freccia della tastiera.</p> + +<div class="note"> +<p><strong>Nota</strong>: i vari browser possono presentare differenti opzioni di controllo da tastiera. Vedi l'articolo in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Accessibilità con la tastiera</a> per maggiori dettagli.</p> +</div> + +<p>In ogni caso tutti i browser sono già preconfigurati per la navigazione con tastiera, l'unica cosa di cui devi preoccuparti è usare gli elementi HTML correttamente. Per esempio:</p> + +<pre class="brush: html example-good"><h1>Links</h1> + +<p>Questo è un link a <a href="https://www.mozilla.org">Mozilla</a>.</p> + +<p>Un altro link, a <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> + +<h2>Bottoni</h2> + +<p> + <button data-message="Questo messaggio viene dal primo bottone">Cliccami!</button> + <button data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</button> + <button data-message="Questo messaggio viene dal terzo bottone">E me!</button> +</p> + +<h2>Formulario</h2> + +<form> + <div> + <label for="name">Inserisci il tuo nome:</label> + <input type="text" id="name" name="name"> + </div> + <div> + <label for="age">Inserisci la tua età:</label> + <input type="text" id="age" name="age"> + </div> + <div> + <label for="mood">Come ti senti?</label> + <select id="mood" name="mood"> + <option>Felice</option> + <option>Triste</option> + <option>Arrabbiato</option> + <option>Preoccupato</option> + </select> + </div> +</form></pre> + +<p>Questo significa usare link, bottoni, elementi del formulario ed etichette appropriatamente (includendo l'elemento {{htmlelement("label")}} nei campi del formulario).</p> + +<p>Purtroppo a volte queste buone pratiche non sono rispettate. Ad esempio, a volte si trovano bottoni codificati usando elementi {{htmlelement("div")}}:</p> + +<pre class="brush: html example-bad"><div data-message="Questo messaggio viene dal primo bottone">Cliccami!</div> +<div data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</div> +<div data-message="Questo messaggio viene dal terzo bottone">E me!</div></pre> + +<p>Questo modo di scrivere codice è altamente sconsigliato: non solo perdi l'accessibilità da tastiera che avresti avuto automaticamente usando l'etichetta {{htmlelement("button")}}, ma perdi anche gli stili CSS di default che l'etichetta {{htmlelement("button")}} contiene.</p> + +<h4 id="Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</h4> + +<p>Risolvere problemi di accessibilità da tastiera in un sito già ultimato può richiedere un certo sforzo (per un esempio vedi la pagina <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">falsi-bottoni-usando-div.html</a> e il suo <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">codice sorgente</a>). In questo esempio abbiamo dato ad alcuni bottoni, erroneamente creati con una etichetta <code><div></code>, la possibilità di ricevere focus tramite tasto TAB fornendo a ognuno l'attributo <code>tabindex="0"</code>:</p> + +<pre class="brush: html"><div data-message="Questo messaggio viene dal primo bottone" tabindex="0">Cliccami!</div> +<div data-message="Questo messaggio viene dal secondo bottone" tabindex="0">Clicca anche me!</div> +<div data-message="Questo messaggio viene dal terzo bottone" tabindex="0">E me!</div></pre> + +<p>L'attributo {{htmlattrxref("tabindex")}} è stato creato per dare agli elementi selezionabili tramite tasto TAB un ordine di focus personalizzato (specificato con numeri positivi in ordine crescente), differente dall'ordine standard con cui sono presenti nel codice sorgente. In generale questa non è una buona pratica, e può causare confusione nell'utente. Questo attributo sarebbe da usare solo in casi particolari, per esempio se il layout mostra gli elementi in una forma molto diversa dal codice sorgente. Ma ci sono altri due possibili usi di <code>tabindex</code> che sono utili per l'accessibilità:</p> + +<ul> + <li><code>tabindex="0"</code>: come mostrato nell'esempio sopra, attribuire un valore di <code>tabindex="0"</code> a un elemento HTML lo rende selezionabile tramite tasto TAB. Questo è l'utilizzo più utile di <code>tabindex</code> per l’accessibilità.</li> + <li><code>tabindex="-1"</code>: questo valore, di per sè nullo, da la possibilità di far sì che un elemento riceva focus programmaticamente, per esempio tramite JavaScript o come destinazione di un link. </li> +</ul> + +<p>L'uso di <code>tabindex </code>rende i bottoni creati erroneamente usando <div> selezionabili tramite tasto TAB, ma non ci permette di cliccarli usando INVIO. Per renderli cliccabili, dobbiamo ricorrere a Javascript: </p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Il tasto ENTER</span> + document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">onclick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p>Spiegazione del codice: abbiamo aggiunto un listener al documento, di modo che il codice rileva ogni occasione in cui un tasto della tastiera viene premuto. Tramite la proprietà <code>KeyCode</code> il codice individua quale tasto è stato premuto. Se il tasto premuto è INVIO, la funzione associata tramite <code>onclick</code> al bottone attualmente selezionato viene eseguita. La linea <code>document.activeElement.onclick()</code> serve proprio a rilevare l'elemento che attualmente sta ricevendo focus nella pagina, in questo caso il bottone che abbiamo selezionato tramite tasto TAB. </p> + +<div class="note"> +<p><strong>Nota</strong>: Tieni presente che questa tecnica funzionerà solo se usi <code>onclick</code>. Usare <code>addEventListener</code> non funzionerà.</p> +</div> + +<p>Come vedi, implementare l'uso della tastiera in un secondo momento non è un lavoro semplice né veloce, e inoltre può causare malfunzionamenti del sito. <strong>È molto meglio utilizzare l'elemento più appropriato per ogni funzionalità del sito sin dal principio.</strong></p> + +<h4 id="Usare_testi_con_significato">Usare testi con significato</h4> + +<p>Una interfaccia utente che presenta une nomenclatura chiara ed esplicativa è utile a tutti, ma avere testi ed etichette curati nei dettagli è particolarmente importante per gli utenti che hanno una disabilità.</p> + +<p>Assicurati che i tuoi bottoni e i tuoi link presentino testi facilmente comprensibili e che distinguano bene un elemento dall'altro. Non usare frasi come "Clicca qui", perchè gli utenti che usano lettori di schermo possono avere difficoltà a distinguere la funzione o destinazione del bottone o link, soprattutto se ce ne sono molti nella pagina. La seguente immagine mostra alcuni campi di un formulario così come sono letti da VoiceOver.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p> + +<p>Assicurati che i nomi che assegni agli elementi abbiano senso anche se letti fuori dal loro contesto, allo stesso modo in cui hanno senso nel contesto del paragrafo in cui sono contenuti. Il seguente esempio mostra un esempio di costruzione corretta del testo di un link:</p> + +<pre class="brush: html example-good"><p>Le balene sono creature davvero straordinarie. <a href="balene.html">Scopri di più sulle balene</a>.</p></pre> + +<p>Mentre questo è un esempio di cattivo uso:</p> + +<pre class="brush: html example-bad"><p>Le balene sono creature davvero straordinarie. Per saperne di più sulle balene, <a href="balene.html">clicca qui</a>.</p></pre> + +<div class="note"> +<p><strong>Nota</strong>: Puoi saperne di più sulle migliori pratiche di implementazione di link nel nostro articolo (in inglese) <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creazione di link</a>. Puoi inoltre vedere esempi di buona costruzione di link nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">buoni-link.html</a> ed esempi di link mal costruiti nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">cattivi-link.html</a>.</p> +</div> + +<p>Un altro elemento importante sono le etichette <code><label></code> dei formulari, che forniscono una indicazione su cosa l'utente deve inserire nel campo del formulario. Il seguente esempio può sembrare una maniera corretta di implementare un campo di formulario:</p> + +<pre class="brush: html example-bad">Scrivi il tuo nome: <input type="text" id="nome" name="nome"></pre> + +<p>Tuttavia, questo campo non sarebbe utile a utenti con disabilità visiva. Non c'è nessuna indicazione non visuale che associ chiaramente il campo di input con il testo "Scrivi il tuo nome:". Se navighi questo elemento con un lettore di schermo, potresti ricevere una descrizione generica tipo "scrivi testo qui".</p> + +<p>Il seguente è un esempio molto migliore:</p> + +<pre class="brush: html example-good"><div> + <label for="nome">Scrivi il tuo nome:</label> + <input type="text" id="nome" name="nome"> +</div></pre> + +<p>Con questo codice, il testo sarà chiaramente associato al campo di input; il lettore di schermo pronuncerà una frase come: "Scrivi il tuo nome: scrivi testo qui". </p> + +<p>Inoltre, nella maggior parte dei browser associare un testo a un campo di input tramite etichetta <code><label></code> permette di selezionare/attivare il campo input cliccando anche sul testo oltre che sul campo stesso. Ciò rende molto più facile selezionare il campo in cui scrivere.</p> + +<div class="note"> +<p><strong>Nota</strong>: Puoi vedere esempi di formulari ben costruiti nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">esempi-di-buoni-form.html</a> ed esempi di formulari poco accessibili nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">esempi-di-cattivi-form.html</a>.</p> +</div> + +<h2 id="Tabelle_dati_accessibili">Tabelle dati accessibili</h2> + +<p>Una tabella dati basica si può scrivere in modo molto semplice, come per esempio:</p> + +<pre class="brush: html"><table> + <tr> + <td>Nome</td> + <td>Età</td> + <td>Genere</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Maschio</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Femmina</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Femmina</td> + </tr> +</table></pre> + +<p>Ma questo codice può causare problemi: non dà agli utenti che usano lettori di schermo la possibilità di associare file e colonne in gruppi di dati relazionati tra loro. Per rendere ciò possibile devi sapere quali elementi della tabella sono header di file o colonne. Nel caso della tabella qui sopra ciò è possibile solo visualizzandola (vedi <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">tabella-incorretta.html</a>).</p> + +<p>Ora invece considera l'esempio <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">tabella gruppi punk</a>. Puoi notare alcune aggiunte nel codice che migliorano l'accessibilità:</p> + +<ul> + <li>Gli header della tabella sono stati definiti usando elementi {{htmlelement("th")}}. Inoltre è stato specificato se sono header di file o colonne, tramite l'uso dell'attributo <code>scope</code>. Questo procedimento permette al lettore di schermo di rilevare gruppi di dati separati e leggerli come contenuto specifico di una fila o colonna.</li> + <li>L'elemento {{htmlelement("caption")}} e l'attributo <code>summary </code>di <code><table></code> hanno funzioni simili. Entrambi si possono definire come un testo alternativo per tabelle, come l’attributo <code>alt text</code> per le immagini, utile per fornire all'utente che usa lettore di schermo un sommario del contenuto della tabella. In genere è preferibile usare <code><caption></code>, perchè è utilizzabile anche da utenti che non navigano con lettore di schermo. Ad ogni modo non è necessario usare entrambi. </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Tables/Advanced">Caratteristiche avanzate delle tabelle HTML e accessibilità</a> per maggiori dettagli sull'accessibilità delle tabelle dati.</p> +</div> + +<h2 id="Alternative_testuali">Alternative testuali</h2> + +<p>Mentre il contenuto testuale è per sua natura accessibile, non si può dire lo stesso per il contenuto multimediale: immagini e video non possono essere visualizzati da persone con disabilità visiva grave, e il contenuto audio è difficile o impossibile da ascoltare per persone con disabilità auditiva. Ci occuperemo dell’accessibilità del contenuto audio e video in un altro articolo, in questa sezione tratteremo il tema dell'accessibilità per gli elementi {{htmlelement("img")}}.</p> + +<p>Proponiamo qui un semplice esempio, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">immagine-accessibile.html</a>, nel quale possiamo vedere 4 copie della stessa immagine.</p> + +<p>Riportiamo qui sotto il relativo codice HTML tradotto all'italiano (nella pagina del link sarà in inglese):</p> + +<pre><img src="dinosauro.png"> + +<img src="dinosauro.png" + alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."> + +<img src="dinosauro.png" + alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi." + title="Il dinosauro rosso di Mozilla"> + + +<img src="dinosauro.png" aria-labelledby="dino-label"> + +<p id="dino-label">Il Tirannosauro Rex rosso di Mozilla: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</p> +</pre> + +<p>La prima immagine, se si usa un lettore di schermo, non è molto accessibile. Per esempio VoiceOver leggerebbe il nome del file come "dinosauro.png, immagine". L'utente saprebbe almeno che nell'immagine è rappresentato un dinosauro di qualche tipo. Ma spesso le immagini che si trovano su internet non hanno neanche un titolo minimamente descrittivo come “dinosauro.png”, e usano invece come titoli codici alfanumerici o nomi generati automaticamente (per esempio da una macchina fotografica), che non forniscono alcun tipo di contesto riguardo al contenuto dell'immagine.</p> + +<div class="note"> +<p><strong>Nota</strong>: non dovresti mai includere contenuto testuale in una immagine. I lettori di schermo non lo possono leggere. Ci sono inoltre altri svantaggi, per esempio non è possibile selezionarlo e copiarlo. Non farlo! </p> +</div> + +<p>Nel caso della seconda immagine, un lettore di schermo leggerà tutto l'attributo <code>alt</code>: "Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.".</p> + +<p>Dunque è importante fornire alle immagini nomi descrittivi, e anche assicurarsi di fornire testo alternativo ogni volta che è possibile. Fai attenzione a fornire nell'attributo <code>alt</code> un testo che sia una rappresentazione il più possible diretta del contenuto dell'immagine. Evita di includere informazioni extra che non riguardano direttamente l'immagine.</p> + +<p>Un altro aspetto da considerare è se un'immagine ha un significato importante nel contesto del contenuto in cui si trova, o se si tratta solo di un'immagine decorativa. Se un’immagine è solo decorativa, è meglio includerla nella pagina con la proprietà background-image di CSS piuttosto che con l’etichetta <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/img" title="L'elemento HTML <img> incorpora un'immagine nel documento."><img></a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Leggi <a href="/it/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini in HTML</a> e I<a href="/it/docs/Learn/HTML/Multimedia_and_embedding/immagini_reattive">mmagini reattive</a> per saperne di più sulle pratiche ottimali per l'implementazione delle immagini.</p> +</div> + +<p>Se desideri fornire informazioni contestuali extra, dovresti includerle nel testo vicino all'immagine, o usare un attributo <code>title</code>, come mostrato nel codice della terza immagine. La maggior parte dei lettori di schermo leggerà il testo alternativo, il testo dell'attributo <code>title</code>, e il nome del file. Inoltre, i browser mostrano il testo contenuto in <code>title</code> quando un utente passa sopra l'immagine con il puntatore del mouse.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> + +<p>Diamo ora un'occhiata al codice della quarta immagine:</p> + +<pre class="brush: html"><img src="dinosauro.png" aria-labelledby="dino-label"> <p id="dino-label">Il Tirannosauro...</p></pre> + +<p>In questo caso non stiamo usando l'attributo <code>alt</code>. Invece, abbiamo presentato la descrizione dell'immagine come un normale paragrafo, le abbiamo assegnato un <code>id</code>, e poi abbiamo usato l'attributo <code>aria-labelledby</code> associandolo all'<code>id</code>. In questo modo i lettori di schermo useranno il paragrafo come testo alternativo per l'immagine. Questo metodo è utile nel caso in cui si voglia usare lo stesso testo alternativo per multiple immagini, procedimento che è sconsigliabile implementare usando l’attributo <code>alt</code></p> + +<div class="note"> +<p><strong>Nota</strong>: <code>aria-labelledby</code> è parte della specificazione <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, che permette agli sviluppatori di aggiungere valore semantico extra al loro codice e migliorare l'accessiblità per i lettori di schermo. Per saperne di più su come funziona, leggi l'articolo <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">basi di WAI-ARIA</a>.</p> +</div> + +<h3 id="Altri_metodi_di_testo_alternativo">Altri metodi di testo alternativo</h3> + +<p>Ci sono anche altri metodi per associare alle immagini un testo che le descriva. Per esempio, c'è un attributo chiamato <code>longdesc</code> che permette di richiamare descrizioni dettagliate delle immagini presenti in una pagina da un documento HTML esterno. Per esempio:</p> + +<pre class="brush: html"><img src="dinosauro.png" longdesc="dino-info.html"></pre> + +<p>Questa può sembrare una soluzione ottimale, soprattutto per immagini con grandi contenuti informativi come grafici che rappresentano statistiche o risultati. Ma purtroppo l'attributo <code>longdesc</code> non è supportato con consistenza dai lettori di schermo, e inoltre il suo contenuto è totalmente inaccessibile agli utenti che non usano lettori di schermo. Si raccomanda dunque di includere la descrizione testuale nella stessa pagina in cui si trova l'immagine, o rimandare alla descrizione con un link standard.</p> + +<p>In HTML5 sono inclusi inoltre altri due elementi, {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, che servono ad associare un elemento figurativo (non necessariamente un'immagine) ad una didascalia: </p> + +<pre class="brush: html"><figure> + <img src="dinosauro.png" alt="Il Tirannosauro di Mozilla"> + <figcaption>Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</figcaption> +</figure></pre> + +<p>Purtroppo anche in questo caso la maggior parte dei lettori di schermo non è ancora in grado di interpretare correttamente gli elementi {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, ma l'uso di questi elementi può essere comunque utile per effettuare modifiche allo stile tramite CSS; inoltre questi elementi danno la possibilità di collocare la descrizione di una immagine nello stesso punto in cui l'immagine è inserita nel codice.</p> + +<h3 id="Attributi_alt_vuoti">Attributi alt vuoti</h3> + +<pre class="brush: html"><h3> + <img src="icona-articolo.png" alt=""> + Tirannosauro Rex: il re dei dinosauti +</h3></pre> + +<p>In alcuni casi un'immagine viene inclusa in una pagina con uno scopo puramente decorativo. Come puoi notare nel codice qui sopra, l'attributo alt dell'immagine è lasciato vuoto. Questo procedimento permette ai lettori di schermo di riconoscere la presenza di un'immagine, evitando però di fornirne una descrizione (pronuncerebbero solo una frase come "immagine").</p> + +<p>La ragione per cui è buona pratica usare un attributo <code>alt</code> vuoto invece di non includerlo del tutto è perchè molti lettori di schermo, nel caso in cui non incontrino nessun attributo <code>alt</code> associato a un'immagine, leggono al suo posto l'URL dell'immagine. Nell'esempio qui sopra, l'immagine ha una funzione decorativa dell'heading a cui è associata. In casi come questo, e in tutti i casi in cui un'immagine ha una funzione puramente decorativa e nessun valore di contenuto, dovresti associarle un attributo <code>alt</code> vuoto (<code>alt=""</code>). Un'alternativa è usare l'attributo ARIA <code>role</code> (con forma: <code>role="presentation"</code>), che indica ai lettori di schermo di non leggere il testo alternativo.</p> + +<div class="note"> +<p><strong>Nota</strong>: se possibile è meglio usare CSS per mostrare immagini con funzione puramente decorativa.</p> +</div> + +<h2 id="Riassunto">Riassunto</h2> + +<p>Dopo aver letto questo articolo dovresti avere un’idea piuttosto chiara di come scrivere HTML accessibile nella maggior parte delle situazioni. Il nostro articolo su WAI-ARIA ti darà informazioni più approfondite, ma con quanto hai già letto e imparato sei in possesso di una buona base. Nei prossimi articoli esploreremo CSS e JavaScript, e come l'accessibilità è influenzata dal loro corretto o incorretto utilizzo.</p> + +<p>{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}</p> diff --git a/files/it/learn/accessibilità/index.html b/files/it/learn/accessibilità/index.html new file mode 100644 index 0000000000..57dee47809 --- /dev/null +++ b/files/it/learn/accessibilità/index.html @@ -0,0 +1,67 @@ +--- +title: Accessibilità +slug: Learn/Accessibilità +tags: + - ARIA + - Accessibilità + - Articoli + - CSS + - Guida accessibilità + - HTML + - Imparare accessibilità + - JavaScript + - Lezioni accessibilità + - Manuale accessibiltà + - Moduli + - Principiante + - Sviluppo Web + - imparare +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Imparare HTML, CSS e Javascript è fondamentale se vuoi diventare uno sviluppatore web, ma la tua preparazione deve andare al di là del semplice utilizzo delle tecnologie di programmazione web: devi imparare ad utilizzarle in modo responsabile, in maniera tale da massimizzare il numero di utenti che possano usufruire pienamente dei tuoi siti, senza lasciare nessuno chiuso fuori. Per ottenere questi risultati devi seguire con attenzione alcune linee guida (che sono indicate nelle sezioni <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>), praticare <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">test su differenti browser</a> e prendere in considerazione l'accessibilità sin dal principio dei tuoi progetti di sviluppo web. In questo modulo ci occuperemo in dettaglio di quest'ultimo aspetto.</p> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Per ottenere il massimo da questo modulo, è consigliabile aver seguito almeno i primi due moduli delle sezioni <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>, oppure, ancor meglio, seguire le varie parti del modulo sull'accessibilità mentre studi (o rivedi) le relative sezioni di <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>. </p> + +<div class="note"> +<p><strong>Nota</strong>: Se stai usando un computer, tablet o altro dispositivo sul quale non hai la possibilità di creare files, puoi testare la maggior parte degli esempi di codice che troverai in questo modulo usando un programma online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guide">Guide</h2> + +<dl> + <dt><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibilità?</a></dt> + <dd>Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.</dd> + <dt><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></dt> + <dd>Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.</dd> + <dt><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></dt> + <dd>CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.</dd> + <dt><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></dt> + <dd>Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.</dd> + <dt><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></dt> + <dd> + <div> + <p>Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.</p> + </div> + </dd> + <dt><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></dt> + <dd>L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili.</dd> +</dl> + +<h2 id="Test_di_valutazione">Test di valutazione</h2> + +<dl> + <dt><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </dt> + <dd>Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.</dd> +</dl> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — un'eccellente serie di video tutorials di Marcy Sutton (in inglese).</li> + <li><a href="https://dequeuniversity.com/resources/">Risorse della Deque University</a> — sono inclusi esempi di codice, punti di riferimento sui lettori di schermo e altre risorse utili (in inglese). </li> + <li><a href="http://webaim.org/resources/">Risorse WebAIM</a> — sono incluse guide, checklist, strumenti e molto altro (in inglese).</li> +</ul> diff --git a/files/it/learn/accessibilità/multimedia/index.html b/files/it/learn/accessibilità/multimedia/index.html new file mode 100644 index 0000000000..f920e59050 --- /dev/null +++ b/files/it/learn/accessibilità/multimedia/index.html @@ -0,0 +1,392 @@ +--- +title: Accessibilità multimediale +slug: Learn/Accessibilità/Multimedia +tags: + - Accessibilità + - Articolo + - Audio + - Didascalie + - HTML + - Immagine + - JavaScript + - Multimedia + - Principiante + - Sottotitoli + - Tracce testuali + - Video +translation_of: Learn/Accessibility/Multimedia +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}</div> + +<p class="summary">Un’altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l’accessibilità di questo tipo di contenuti.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di <a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">cosa è l'accessibilità</a>.</td> + </tr> + <tr> + <th scope="row"><strong>Obiettivo</strong>:</th> + <td>Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli.</td> + </tr> + </tbody> +</table> + +<h2 id="Multimedia_e_accessibilità"><strong>Multimedia e accessibilità</strong></h2> + +<p>Fino ad ora in questo modulo sull’accessibilità abbiamo preso in considerazione le procedure necessarie per rendere accessibili una varietà di contenuti: da semplice contenuto testuale a tabelle di dati, immagini, controlli nativi come campi di formulari e bottoni, e anche strutture e intefacce più complesse (con le quali si usano gli attributi <u><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a></u>).</p> + +<p>Questo articolo si occupa di un’altra classe di contenuti per i quali solitamente non è facile garantire una buona accessibilità: i contenuti multimediali. Immagini, video, elementi <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/canvas" title="Use the HTML <canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><canvas></a>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.</p> + +<p>Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.</p> + +<h2 id="Immagini"><strong>Immagini </strong></h2> + +<p>Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo <u><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l’accessibilità</a></u>: fai riferimento all’articolo per maggiori dettagli. Riassumendo in poche parole l’articolo, per garantire l’accessibilità delle immagini devi assicurarti che al contenuto visuale sia associato un testo alternativo che descriva dettagliatamente l’immagine, e che tale contenuto possa essere letto dai lettori di schermo.</p> + +<p>Per esempio:</p> + +<pre class="brush: html"><img src="dinosaur.png" + alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."> +</pre> + +<h2 id="Controlli_audio_e_video_accessibili"><strong>Controlli audio e video accessibili</strong></h2> + +<p>Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.</p> + +<h3 id="Il_problema_con_i_controlli_nativi_in_HTML5">Il problema con i controlli nativi in HTML5</h3> + +<p>Gli elementi <code>audio</code> e <code>video</code> di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">codice sorgente</a></u> e <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">versione live</a></u>):</p> + +<pre class="brush: html"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Il tuo browser non supporta l’audio in HTML5. Puoi scaricare il file per ascoltarlo. Qui trovi il <a href="viper.mp3">link al file audio.</p> +</audio> + +<br> + +<video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p> +</video></pre> + +<p>L’attributo <code>controls</code> fornisce il bottone play/pausa, uno slider di posizionamento e altri controlli basici di un lettore multimediale generico. In Firefox e Chrome i controlli HTML5 hanno questo aspetto:</p> + +<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p> + +<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> + +<p>Tuttavia, ci sono alcuni problemi associati a questi controlli:</p> + +<ul> + <li>Non sono accessibili da tastiera in nessun browser eccetto Opera</li> + <li>Ogni browser applica ai controllli uno stile e funzionalità differenti, che non sono facilmente modificabili per adattarsi allo stile particolare di un sito o applicazione.</li> +</ul> + +<p>Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.</p> + +<h3 id="Creare_controlli_audio_e_video_personalizzati">Creare controlli audio e video personalizzati</h3> + +<p>Gli elementi audio e video di HTML5 hanno in comune una API, chiamata HTML Media Element, che permette di applicare funzionalità personalizzate ai bottoni e ad altri controlli definiti dallo sviluppatore.</p> + +<p>Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.</p> + +<h4 id="Setup_basico"><strong>Setup basico</strong></h4> + +<p> </p> + +<p>Per prima cosa, salva una copia dei file <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">controlli-custom-start.html</a></u>, <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">controlli-custom-controls.css</a></u>, <u><a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a></u> e <u><a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a></u> in una cartella del tuo hard-disk.</p> + +<p>Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.</p> + +<p>Ora diamo un’occhiata al codice HTML del lettore video:</p> + +<pre class="brush: html"><section class="player"> + <video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p> + </video> + + <div class="controls"> + <button class="playpause">Play</button> + <button class="stop">Stop</button> + <button class="rwd">Rwd</button> + <button class="fwd">Fwd</button> + <div class="time">00:00</div> + </div> +</section></pre> + +<h4 id="Setup_basico_di_JavaScript"><strong>Setup basico di JavaScript</strong></h4> + +<p> </p> + +<p>Abbiamo inserito alcuni bottoni nella barra dei controlli posizionata sotto al video. Tali controlli ovviamente non funzionano di default; è necessario usare JavaScript per assegnargli una funzionalità.</p> + +<p>Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file JavaScript:</p> + +<p> </p> + +<pre class="brush: js">var playPauseBtn = document.querySelector('.playpause'); +var stopBtn = document.querySelector('.stop'); +var rwdBtn = document.querySelector('.rwd'); +var fwdBtn = document.querySelector('.fwd'); +var timeLabel = document.querySelector('.time');</pre> + +<p>In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:</p> + +<pre class="brush: js">var player = document.querySelector('video');</pre> + +<p> </p> + +<p>Questa variabile fa riferimento a un oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.">HTMLMediaElement</a>, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.</p> + +<p>Prima di procedere ad assegnare funzionalità ai nostri bottoni rimuoviamo i controlli nativi, di modo che non si possano verificare conflitti con i nostri controlli personalizzati. Aggiungi il seguente codice, al fondo del tuo file JavaScript:</p> + +<p> </p> + +<pre class="brush: js">player.removeAttribute('controls');</pre> + +<p>Usando questo metodo, anziché quello di evitare di includere l’attributo <code>controls</code> dal principio, ha il vantaggio che, se il nostro codice JavaScript smettesse di funzionare per una qualsiasi ragione, i controlli nativi si riattiveranno automaticamente, permettendo agli utenti di continuare a usare i contenuti multimediali.</p> + +<h4 id="Collegare_i_nostri_bottoni"><strong>Collegare i nostri bottoni</strong></h4> + +<p>Come primo passo, attiviamo il bottone Play/pausa. Possiamo alternare gli stati di play e pausa usando una semplice funzione condizionale, come la seguente. Aggiungila al fondo del tuo codice JavaScript:</p> + +<pre class="brush: js">playPauseBtn.onclick = function() { + if(player.paused) { + player.play(); + playPauseBtn.textContent = 'Pause'; + } else { + player.pause(); + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p>In seguito, aggiungi questo codice, che controlla il bottone Stop:</p> + +<pre class="brush: js">stopBtn.onclick = function() { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; +};</pre> + +<p> </p> + +<p>Non esiste una funzione <code>stop()</code> nativa negli elementi <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.">HTMLMediaElement</a>, dunque al suo posto usiamo <code>pause()</code>, e allo stesso tempo resettiamo a zero il tempo di riproduzione <code>currentTime</code>.</p> + +<p>Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:</p> + +<p> </p> + +<pre class="brush: js">rwdBtn.onclick = function() { + player.currentTime -= 3; +}; + +fwdBtn.onclick = function() { + player.currentTime += 3; + if(player.currentTime >= player.duration || player.paused) { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p> </p> + +<p>Questi bottoni sono controlli molto basici, non fanno altro che far avanzare o tornare indietro il video di 3 secondi ogni volta che vengono cliccati. In una applicazione reale probabilmente vorrai aggiungere uno slider di posizionamento più elaborato o qualcosa di simile.</p> + +<p>Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione <code>currentTime</code> è maggiore del tempo totale <code>duration</code>, o se la riproduzione è in pausa. Se una delle due condizioni è vera fermiamo la riproduzione del video, per evitare che si verifichino errori nel lettore multimediale se l’utente cerca di avanzare oltre la fine del video o quando il video si trova in stato di pausa.</p> + +<p>Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:</p> + +<pre class="brush: js">player.ontimeupdate = function() { + var minutes = Math.floor(player.currentTime / 60); + var seconds = Math.floor(player.currentTime - minutes * 60); + var minuteValue; + var secondValue; + + if (minutes<10) { + minuteValue = "0" + minutes; + } else { + minuteValue = minutes; + } + + if (seconds<10) { + secondValue = "0" + seconds; + } else { + secondValue = seconds; + } + + mediaTime = minuteValue + ":" + secondValue; + timeLabel.textContent = mediaTime; +};</pre> + +<p>Ogni volta che il tempo si aggiorna (ogni secondo), questa funzione viene eseguita. A partire dal valore di currentTime, che si esprime in secondi, la funzione calcola il numero di minuti e secondi trascorsi, aggiunge uno 0 davanti al numero di minuti o secondi se tale numero è inferiore a 10, dà al risultato il formato “minuti:secondi” e infine lo invia al display timeLabel perchè sia mostrato all’utente.</p> + +<h4 id="Ulteriori_letture"><strong>Ulteriori letture</strong></h4> + +<p>Quanto spiegato finora ti dà un’idea basica di come aggiungere funzionalità personalizzate ai lettori audio/video. Per maggiori informazioni su come aggiungere funzionalità più complesse, incluso come utilizzare Flash come fallback per i browser più vecchi, vedi gli articoli (in inglese):</p> + +<ul> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> +</ul> + +<p>Abbiamo inoltre creato un esempio avanzato che mostra come si può creare un sistema orientato ad oggetti che trova ogni lettore audio o video presente in una pagina e gli aggiunge i nostri controlli personalizzati. Vedi <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a></u> (qui trovi il <u><a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">codice sorgente</a></u>).</p> + +<h2 id="Trascrizioni_audio"><strong>Trascrizioni audio</strong></h2> + +<p>Per rendere i contenuti audio accessibili alle persone con difficoltà auditive devi ricorrere a trascrizioni testuali. Le trascrizioni possono includersi nella stessa pagina dove l’audio viene riprodotto, o in una pagina separata collegata ad essa con un link.</p> + +<p>Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:</p> + +<ul> + <li>Servizi commerciali: puoi assumere un trascrittore professionista tramite compagnie come <u><a href="https://scribie.com/">Scribie</a></u>, <u><a href="https://castingwords.com/">Casting Words</a></u>, o <u><a href="https://www.rev.com/">Rev</a></u>. Dedica un po’ di tempo a cercare un’azienda con buona reputazione, che compirà il lavoro con efficienza e serietà. In generale, un maggiore spesa comporterà un migliore risultato; la rapidità e accuratezza del servizio possono variare molto tra le diverse aziende che offrono tali servizi.</li> + <li>Comunità / fai da te: se sei parte di una comunità attiva puoi chiedere un aiuto per effettuare le trascrizioni, o puoi farle tu stesso.</li> + <li>Servizi automatici: esistono servizi di trascrizione automatica, per esempio quando carichi un video su Youtube puoi scegliere di generare sottotitoli/trascrizioni automatici. La qualità della trascrizione automatica è molto variabile, e dipende dalla qualità dell’audio.</li> +</ul> + +<p>NON è una buona pratica quella di pubblicare del contenuto audio e promettere di pubblicare le trascrizioni in un secondo momento. Spesso tali promesse non vengono compiute, danneggiando la fiducia che gli utenti ripongono in chi pubblica il contenuto. Nel caso in cui l’audio che si pubblica sia un dialogo o un evento come una conferenza pubblica, è accettabile pubblicare note riassuntive del contenuto insieme all’audio.</p> + +<h3 id="Esempi_di_trascrizioni">Esempi di trascrizioni</h3> + +<p>Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video <u><a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a></u> e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su <em>Apri trascrizione</em>.</p> + +<p>Se stai creando una interfaccia personalizzata per presentare il tuo contenuto audio e le relative trascrizioni, tieni in considerazione l’idea di includere un pannello-trascrizioni che appare/scompare; vedi il nostro esempio <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">audio-transcript-i</a>u</u> (vedi anche il <u><a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">codice sorgente</a></u>).</p> + +<h3 id="Descrizioni_audio">Descrizioni audio</h3> + +<p> </p> + +<p>Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.</p> + +<p>In molti casi si tratterà di contenuto video, e in tal caso puoi associargli didascalie usando le tecniche descritte nella prossima sezione di questo articolo.</p> + +<p> </p> + +<p>Tuttavia ci sono dei casi limite. Per esempio, potresti dover pubblicare una registrazione audio di una conferenza durante la quale si fa riferimento a una risorsa visuale, come una tabella o un grafico. In tali casi, dovresti fare in modo che tali risorse vengano fornite insieme all’audio e alla trascrizione, avendo cura di porre un link alle risorse nel punto della trascrizione in cui si fa riferimento ad esse. Questo procedimento sarà di aiuto a tutti gli utenti, non solo alle persone con difficoltà auditive.</p> + +<div class="note"> +<p><strong>Nota</strong>: una trascrizione audio sarà utile a vari tipi di utente. Oltre a permettere alle persone con difficoltà auditive di accedere al contenuto audio, sarà molto utile anche agli utenti che navigano con una connessione lenta, che probabilmente preferiscono non scaricare il contenuto audio. Pensa inoltre a un utente che si trova in un ambiente rumoroso, come un pub, e non può udire il contenuto audio correttamente.</p> +</div> + +<h2 id="Tracce_testuali_nei_video"><strong>Tracce testuali nei video</strong></h2> + +<p>Per rendere i contenuti video accessibili a persone con difficoltà auditive o visive, e anche ad altri gruppi di utenti, come per esempio quelli che non capiscono la lingua che si parla nel video, devi associare al contenuto video una traccia testuale.</p> + +<div class="note"> +<p><strong>Nota</strong>: le tracce testuali sono utili ad ogni tipo di utente, non solo a chi ha una disabilità. Per esempio, un utente potrebbe non essere in grado di udire l’audio perchè si trova in un ambiente rumoroso, come un bar affollato, o un altro potrebbe decidere di togliere l’audio a un video per non disturbare chi gli sta vicino, se si trova per esempio in una biblioteca.</p> +</div> + +<p>Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:</p> + +<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p> + +<p>Molti paesi trasmettono i film in inglese con sottotitoli nella lingua del paese, e spesso nei film in DVD si trovano disponibili tracce testuali in varie lingue. Per esempio:</p> + +<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p> + +<p>Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:</p> + +<ul> + <li>Didascalie: sono pensate per persone con difficoltà auditive e includono una trascrizione delle parole che vengono pronunciate nei dialoghi e anche informazioni sul contesto, come per esempio chi sta parlando, lo stato d’animo delle persone, che tipo di musica sta suonando, gli effetti sonori (suono del telefono, passi, pioggia ecc.).</li> + <li>Sottotitoli: rivolti a un pubblico che non capisce la lingua dei dialoghi, sono traduzioni del contenuto audio da una lingua a un’altra. Possono anche contenere informazioni extra sulla scena rappresentata.</li> + <li>Descrizioni: sono descrizioni dettagliate delle scene rappresentate, pensate per persone che non possono vedere il video.</li> + <li>Titoli capitoli: titoli delle varie sezioni in cui si divide un video, per rendere la navigazione dello stesso più facile.</li> +</ul> + +<h3 id="Implementare_le_tracce_testuali_in_HTML5">Implementare le tracce testuali in HTML5</h3> + +<p>Le tracce testuali da mostrarsi associate a un video in HTML5 devono essere scritte in WebVTT, un formato che contiene stringhe di testo associate a metadati come il momento del video in cui si desidera mostrare ogni stringa, e anche informazioni sullo stile e il posizionamento della stringa. Tali stringhe di testo sono chiamate “cues”.</p> + +<p>Un file WebVTT tipico è più o meno così:</p> + +<pre>WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +Questo è il primo sottotitolo. + +2 +00:00:30.739 --> 00:00:34.074 +Questo è il secondo. + + ...</pre> + +<p>To get this displayed along with the HTML media playback, you need to:</p> + +<ul> + <li>Salvare il file in formato .vtt in una cartella.</li> + <li>Associare il file .vtt al lettore usando l’elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track" title="The HTML <track> element is used as a child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web "><track></a>. L’etichetta <code><track></code> deve essere inclusa dentro l’etichetta <code><audio></code> o <code><video></code>, e posizionata dopo tutte le etichette <code><source></code>. Usa l’attributo <u><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#attr-kind">kind</a></u> per specificare se le cues sono sottotitoli (subtitles), didascalie (captions) o descrizioni (descriptions).</li> + <li> + <p>Usa l’attributo <u><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#attr-srclang">srclang</a></u> per indicare al browser in quale lingua sono scritti i sottotitoli.</p> + </li> +</ul> + +<p>Un esempio:</p> + +<pre class="brush: html"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>Il risultato sarà un video sottotitolato, simile a questo: </p> + +<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' 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 maggiori dettagli leggi l’articolo (in inglese) <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Puoi trovare <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">l’esempio</a> che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">codice sorgente</a>). Questo esempio, tramite l’uso di JavaScript, permette agli utenti di scegliere tra differenti sottotitoli. Nota che, per attivare i sottotitoli, devi premere il bottone “CC” e selezionare una opzione tra inglese, tedesco o spagnolo.</p> + +<div class="note"> +<p><strong>Nota</strong>: le tracce testuali e le trascrizioni contribuiscono anche al <u><a href="https://developer.mozilla.org/en-US/docs/Glossary/SEO" title="SEO: SEO (Search Engine Optimization) is the process of making a website more visible in search results, also termed improving search rankings.">SEO</a></u>, poichè i motori di ricerca danno molta importanza al contenuto testuale. Le tracce testuali possono perfino permettere ai motori di ricerca di ridirigere l’utente a un punto specifico del video.</p> +</div> + +<h2 id="Altro_contenuto_multimediale"><strong>Altro contenuto multimediale</strong></h2> + +<p>Le sezioni precedenti non trattano tutti i tipi di contenuto multimediale che potresti voler usare sul tuo sito o applicazione. Potresti trovarti a dover gestire giochi, animazioni, slideshow, video inseriti da fonti esterne, o altro contenuto creato usando tecnologie come:</p> + +<ul> + <li><a href="/it/docs/Web/HTML/Canvas">Canvas HTML5</a></li> + <li>Flash</li> + <li>Silverlight</li> +</ul> + +<p>Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:</p> + +<ul> + <li>Se stai inserendo contenuto audio da fonti esterne tramite un plugin come Flash or Silverlight, probabilmente puoi fornire una trascrizione con lo stesso metodo mostrato qui sopra nella sezione <a href="/it/docs/Learn/Accessibilità/Multimedia#Esempi_di_trascrizioni">Esempi di trascrizioni</a>.</li> + <li>Se stai inserendo contenuto video da fonti esterne tramite un plugin come Flash or Silverlight, puoi ricorrere alle tecniche usate per inserire didascalie/sottotitoli in tali tecnologie. Per esempio vedi gli articoli in inglese <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, o <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> +</ul> + +<p>Tuttavia, ci sono altri tipi di contenuto multimediale per i quali non è facile implementare l’accessibilità. Per esempio, se stai lavorando su un gioco immersivo in 3D o una applicazione di realtà virtuale, è realmente difficile fornire alternative testuali per tale tipo di esperienza. D’altro canto si può obiettare che le persone con vista ridotta non sono parte del target di pubblico di tali applicazioni.</p> + +<p>Dovresti comunque assicurarti che tale tipo di applicazioni abbiano un contrasto dei colori ottimale, di modo che siano più facilmente visualizzabili a persone con vista ridotta o daltonismo. Inoltre dovresti fare tutto il possibile per renderli accessibili da tastiera. Ricorda che è necessario cercare di fare sempre tutto il possibile invece di puntare al 100% dell’accessibilità in ogni situazione, un obiettivo spesso impossibile da raggiungere.</p> + +<h2 id="Riassunto"><strong>Riassunto</strong></h2> + +<p>Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.</p> + +<p>{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}</p> + +<p> </p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibiltà</a>?</li> + <li><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></li> + <li><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></li> + <li><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </li> +</ul> + +<p> </p> diff --git a/files/it/learn/accessibilità/wai-aria_basics/index.html b/files/it/learn/accessibilità/wai-aria_basics/index.html new file mode 100644 index 0000000000..09891c8a11 --- /dev/null +++ b/files/it/learn/accessibilità/wai-aria_basics/index.html @@ -0,0 +1,422 @@ +--- +title: Basi della tecnologia WAI-ARIA +slug: Learn/Accessibilità/WAI-ARIA_basics +tags: + - ARIA + - Accessibilità + - Articolo + - Guida + - HTML + - HTML semantico + - JavaScript + - Principiante + - WAI-ARIA +translation_of: Learn/Accessibility/WAI-ARIA_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}</div> + +<p class="summary">Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, aver letto <a href="/it/docs/Learn/Accessibilità">i precedenti articoli del corso</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Acquisire familiarità con la tecnologia WAI-ARIA e imparare a usarla dove necessario per fornire valore semantico addizionale che migliori l'accessibilità.</td> + </tr> + </tbody> +</table> + +<h2 id="Cosa_è_WAI-ARIA">Cosa è WAI-ARIA?</h2> + +<p>Cominciamo col dare un'occhiata a cosa è WAI-ARIA, e in che modo ci può essere utile.</p> + +<h3 id="Un_nuovo_set_di_problemi">Un nuovo set di problemi</h3> + +<p>Man mano che le applicazioni web cominciarono ad essere sempre più complesse e dinamiche, nuovi problemi di accessibilità iniziarono a manifestarsi.</p> + +<p>Per esempio, HTML5 ha introdotto alcuni elementi semantici per definire componenti di uso comune nelle pagine ({{htmlelement("nav")}}, {{htmlelement("footer")}}, ecc.). Prima dell'arrivo di questi elementi, gli sviluppatori si limitavano a usare {{htmlelement("div")}} con ID o classi, per esempio <code><div class="nav"></code>. Ma questi elementi erano problematici, perchè non fornivano un sistema standard per individuare programmaticamente i componenti di una pagina, dunque i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina era composta. </p> + +<p>La soluzione inizialmente consisteva nell’aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:</p> + +<pre class="brush: html"><a href="#hidden" class="hidden">Vai alla barra di navigazione</a></pre> + +<p> </p> + +<p>Ma questo sistema non è molto preciso, e può essere usato solo quando il lettore di schermo comincia a leggere dalla parte alta della pagina.</p> + +<p>Per fare un altro esempio, ad un certo punto le applicazioni cominciarono a includere controlli complessi come selezionatori di data o slider per selezionare valori. HTML5 mette a disposizione alcuni tipi speciali di input nativi, specifici per tali controlli:</p> + +<pre class="brush: html"><input type="date"> +<input type="range"></pre> + +<p>Ma questi elementi non sono supportati da tutti i browser, ed inoltre sono molto difficili da personalizzare, rendendoli complicati da integrare nel disegno di un sito. Di conseguenza, gli sviluppatori spesso fanno uso di librerie JavaScript e creano tali controlli come una serie di {{htmlelement("div")}} annidati o elementi di una tabella a cui assegnano classi, e in seguito li personalizzano con CSS e li controllano con funzioni di JavaScript.</p> + +<p>Il problema di questo metodo è che i lettori di schermo non riescono ad interpretare di cosa si tratta, e riportano solo la presenza di una serie di elementi dei quali non possono descrivere la funzione.</p> + +<h3 id="E_arrivò_WAI-ARIA">E arrivò WAI-ARIA</h3> + +<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi per fornire maggior valore semantico e migliorare l'accessibilità dovunque sia necessario. Ci sono tre caratteristiche principali definite nella raccolta: </p> + +<ul> + <li><strong>Ruoli </strong>— I ruoli (role) definiscono cosa un elemento è e qual è la sua funzione. Molti sono cosiddetti ruoli di riferimento, che in sostanza replicano il valore semantico degli elementi HTML5. Per esempio<code> role="navigation" </code>({{htmlelement("nav")}}) che corrisponde a <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/nav" title="L'elemento HTML nav (<nav>) rappresenta una sezione della pagina che contiene link ad altre pagine o a parti della pagina corrente: una sezione di navigazione."><nav></a>, o <code>role="complementary"</code> ({{htmlelement("aside")}}), che corrisponde a <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/aside" title="L'elemento HTML <aside> rappresenta una sezione della pagina il cui contenuto è connesso solo marginalmente al resto della pagina, e che dovrebbe essere considerato separato dal resto del contenuto. Queste sezioni sono spesso usate come sidebar. Spesso co"><aside></a>. Ma ce ne sono anche altri che definiscono diverse strutture della pagina che si trovano comunemente nelle IU (Interfacce Utente), come <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, ecc.</li> + <li><strong>Proprietà </strong>— Si tratta delle proprietà degli elementi, che si possono usare per dare agli stessi un significato extra. Per esempio, <code>aria-required="true"</code> specifica che il campo di un formulario deve essere obbligatoriamente compilato per essere valido, mentre <code>aria-labelledby="label"</code> permette di assegnare una ID a un elemento e in seguito usare l'elemento come etichetta per qualsiasi altro elemento nella pagina, anche per multipli elementi allo stesso tempo, cosa che non è possibile con <code><label for="input"></code>. Per esempio, potresti usare aria-labelledby per specificare che una descrizione contenuta in un {{htmlelement("div")}} si usi come etichetta per multiple celle di una tabella, o come testo alternativo di una immagine, senza doverlo ripetere nell'attributo <code>alt</code>. Puoi vedere un esempio d'uso nella sezione Alternative testuali.</li> + <li><strong>Stati</strong> — GLi stati sono proprietà speciali che definiscono le condizioni correnti degli elementi, come per esempio <code>aria-disabled="true"</code>, che specifica a un lettore di schermo che un campo di input di un formulario è al momento disabilitato. Gli stati si distinguono dalle proprietà per il fatto che le proprietà non cambiano durante il ciclo vitale di un'applicazione, mentre gli stati possono essere cambiati, in genere tramite l'uso di JavaScript.</li> +</ul> + +<p>Un punto importante da tenere in considerazione riguardo gli attributi WAI-ARIA è che non influiscono in alcun modo sulla pagina, eccetto che sulle informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di schermo prendono le informazioni). WAI-ARIA non cambia la struttura della pagina, il DOM o altro, anche se i suoi attributi possono essere utili per selezionare gli elementi in CSS.</p> + +<div class="note"> +<p><strong>Nota</strong>: puoi trovare una utile lista di tutti i ruoli ARIA e i loro usi, con link a informazioni più approfondite, nella specifica WAI-ARIA: vedi <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definizione di Ruoli </a>(in inglese).</p> + +<p>La specifica contiene anche una lista delle proprietà e degli stati, con link ad ulteriori informazioni. Vedi <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definizioni di Stati e Proprietà</a> (in inglese).</p> +</div> + +<h3 id="Dove_è_supportata_WAI-ARIA">Dove è supportata WAI-ARIA?</h3> + +<p>A questa domanda non è facile rispondere. È difficile trovare una risorsa che indichi in maniera completa quali funzionalità di WAI-ARIA sono supportate e dove, perchè:</p> + +<ol> + <li>Ci sono molte funzionalità nella specifica WAI-ARIA.</li> + <li>Ci sono moltissime combinazioni possibili di sistemi operativi, browser e lettori di schermo.</li> +</ol> + +<p>L'ultimo punto è fondamentale: per poter usare un lettore di schermo il tuo sistema operativo deve avere installato almeno un browser con la necessaria API di accessibilità, che fornisca ai lettori di schermo le informazioni necessarie perchè funzionino. La maggior parte dei sistemi operativi ha di serie uno o due browser che funzionano con i lettori di schermo. Sul sito di Paciello Group si può trovare una guida aggiornata costantemente che fornisce dati sul supporto dei lettori di schermo nei vari sistemi operativi. Vedi l'articolo (in inglese) <a href="https://developer.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">Guida: browser, sistemi operativi e supporto per i lettori di schermo</a>.</p> + +<p>Il seguente passo è assicurarsi che i browser usati supportino la tecnologia ARIA e la trasmettano tramite le loro API, ma anche che i lettori di schermo riconoscano le informazioni che ricevono e le presentino agli utenti in una forma ottimale.</p> + +<ol> + <li>Il supporto dei browser in generale è molto buono. Al momento della stesura di questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-ARIA nei vari browser di circa l'88%.</li> + <li>Il supporto di ARIA nei lettori di schermo non è al momento a un livello comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per migliorare la compatibilità con WAI-ARIA. Puoi farti un'idea del livello di supporto leggendo l'articolo (in inglese) <a href="https://www.powermapper.com/tests/screen-readers/aria/">Compatibilità dei lettori di schermo con WAI-ARIA</a> .</li> +</ol> + +<p>In questo articolo non spiegheremo tutte le funzionalità di WAI-ARIA e i dettagli sul supporto che hanno. Cercheremo invece di presentare le funzionalità più importanti e utili agli sviluppatori web; in generale se non facciamo riferimento al livello di supporto di una funzionalità, puoi considerare che il supporto è ragionevolmente buono. In caso di eccezioni lo indicheremo esplicitamente.</p> + +<div class="note"> +<p><strong>Nota</strong>: alcune librerie JavaScript supportano WAI-ARIA. Ciò significa che quando generano elementi IU, come per esempio formulari complessi, aggiungono automaticamente attributi ARIA per migliorarne l'accessibilità. Se stai valutando l'utilizzo di una libreria Javascript per sviluppare elementi IU più rapidamente, dovresti tenere in conto il livello di accessibilità della libreria quando scegli quale usare. Buoni esempi sono jQuery UI (vedi l'articolo in inglese <a href="https://jqueryui.com/about/#deep-accessibility-support">jQuery UI: supporto all'accessibilità</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, e <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p> +</div> + +<h3 id="Quando_dovresti_usare_WAI-ARIA">Quando dovresti usare WAI-ARIA?</h3> + +<p>Abbiamo già discusso di alcuni dei problemi che hanno spinto alla creazione di WAI-ARIA, dovuti soprattutto alla crescente complessità delle moderne applicazioni web. Essenzialmente ci sono 4 grandi aree in cui WAI-ARIA è utile: </p> + +<ol> + <li><strong>Indicatori/riferimenti</strong>: gli attributi <code>role</code> possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio {{htmlelement("nav")}}), oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code>, ecc.</li> + <li><strong>Aggiornamento dinamico del contenuto</strong>: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare <code>aria-live</code> per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite <a href="/it/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, o <a href="/it/docs/Web/API/Document_Object_Model">DOM APIs</a> .</li> + <li><strong>Migliorare l'accessibilità da tastiera</strong>: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano" in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali elementi (usando <code>tabindex</code>).</li> + <li><strong>Accessibilità dei controlli non semantici</strong>: quando si usano una serie di <code><div></code> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire le indicazioni necessarie tramite una combinazione di ruoli come <code>button</code>, <code>listbox</code>, o <code>tabgroup</code>, e proprietà come <code>aria-required</code> o <code>aria-posinset</code>.</li> +</ol> + +<p>Ricorda: <strong>dovresti ricorrere a WAI-ARIA solo quando è necessario!</strong> Idealmente, dovresti usare <em>sempre</em> <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">funzionalità HTML native</a> per fornire le indicazioni semantiche necessarie ai lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità. </p> + +<p>Ma ricorda, usala solo quando è necessario!</p> + +<div class="note"> +<p><strong>Nota</strong>: cerca di testare il tuo sito con la maggior varietà possibile di utenti reali: persone non disabili, persone che usano lettori di schermo, persone che navigano con la tastiera, ecc. Queste persone sapranno indicarti cosa funziona e cosa no in maniera molto più accurata di ciò che può emergere se ti limiti ad effettuare test di utilizzo in prima persona.</p> +</div> + +<h2 id="Esempi_di_uso_pratico_di_WAI-ARIA">Esempi di uso pratico di WAI-ARIA </h2> + +<p>Nella prossima sezione analizzeremo le 4 aree di utilizzo di WAI-ARIA più dettagliatamente, e forniremo alcuni esempi pratici. Prima di continuare però, dovresti attivare un lettore di schermo, per poter testare alcuni degli esempi.</p> + +<p>Vedi la sezione (in inglese) sul <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing con lettori di schermo</a> per maggiori informazioni.</p> + +<h3 id="Indicatoririferimenti">Indicatori/riferimenti</h3> + +<p>WAI-ARIA trasmette ai browser l'attributo <code>role</code>, che permette di aggiungere valore semantico extra agli elementi del tuo sito dovunque sia necessario. La principale utilità di questo attributo è che permette agli utenti che usano lettori di schermo di individuare più facilmente gli elementi più comuni delle pagine. Vediamo un esempio: il nostro <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">sito senza attributi role</a> (vedi la <a href="https://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">versione live</a>) ha la seguente struttura:</p> + +<pre class="brush: html"><header> + <h1>...</h1> + <nav> + <ul>...</ul> + <form> + <!-- search form --> + </form> + </nav> +</header> + +<main> + <article>...</article> + <aside>...</aside> +</main> + +<footer>...</footer></pre> + +<p>Se provi a navigare il sito con un lettore di schermo in un browser moderno, riceverai diverse informazioni utili. Per esempio, VoiceOver fornisce le seguenti indicazioni:</p> + +<ul> + <li>Riguardo l'elemento <code><header></code> — "banner, 2 oggetti" (contiene un heading h1 e la barra di navigazione <code><nav></code>).</li> + <li>Riguardo l'elemento <code><nav></code> — "navigazione, 2 oggetti" (contiene una lista e un formulario).</li> + <li>Riguardo l'elemento <code><main></code> — "principale, 2 oggetti" (contiene un articolo e una barra di navigazione laterale).</li> + <li>Riguardo l'elemento <code><aside> </code>— "complementario, 2 oggetti" (contiene un heading h2 e una lista).</li> + <li>Riguardo il campo di ricerca — "Funzione ricerca, casella di testo".</li> + <li>Riguardo l'elemento <code><footer></code> — "pié di pagina 1 oggetto".</li> +</ul> + +<p>Se ti rechi nella sezione Rotore di VoiceOver (premendo VO-U), vedrai che la maggior parte degli elementi più importanti sono elencati ordinatamente e si può accedere ad essi rapidamente.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p> + +<p>Ma in realtà, la situazione è migliorabile. Il campo di ricerca è un punto di riferimento importante che gli utenti vorranno trovare, ma non compare nella lista degli elementi e non è trattato come un elemento di riferimento, a parte l'indicazione che si tratta di una casella di ricerca (<code><input type="search"></code>). Inoltre, alcuni browser più vecchi (per esempio IE8), non riconoscono le indicazioni semantiche degli elementi HTML5. </p> + +<p>Possiamo migliorare il tutto usando alcune funzionalità ARIA. Per prima cosa aggiungiamo alcuni attributi role alla nostra struttura HTML. Il nostro <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">esempio di sito con ruoli aria</a> (vedi la <a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">versione live</a>) ha la seguente struttura:</p> + +<pre class="brush: html"><header> + <h1>...</h1> + <nav role="navigation"> + <ul>...</ul> + <form role="search"> + <!-- search form --> + </form> + </nav> +</header> + +<main> + <article role="article">...</article> + <aside role="complementary">...</aside> +</main> + +<footer>...</footer></pre> + +<p>C'è anche una funzionalità bonus in questo esempio: all'elemento {{htmlelement("input")}} è stato assegnato l'attributo <code>aria-label</code>, che fornisce ai lettori di schermo un’etichetta descrittiva, anche se non abbiamo incluso un elemento {{htmlelement("label")}}. In casi come questo è molto utile usare l’attributo ARIA. Un campo di ricerca è infatti un elemento molto comune e facilmente riconoscibile, e aggiungere una etichetta visuale potrebbe danneggiare il disegno della pagina.</p> + +<pre class="brush: html"><input type="search" name="q" placeholder="Scrivi qui ciò che vuoi cercare" aria-label="Campo per cercare nel contenuto del sito"></pre> + +<p>Se ora usiamo VoiceOver per navigare il sito d'esempio, notiamo alcuni miglioramenti:</p> + +<ul> + <li>Il campo di ricerca viene indicato come un elemento separato, sia mentre si naviga la pagina sia nella sezione Rotore.</li> + <li>Il testo contenuto nell'attributo <code>aria-label</code> viene letto quando il campo riceve focus.</li> +</ul> + +<p>Inoltre, il sito è ora maggiormente accessibile per utenti che navigano con browser antiquati come IE8; vale la pena includere ruoli ARIA anche per questo. E se per caso il tuo sito è stato costruito usando solo elementi <code><div></code>, dovresti decisamente includere i ruoli ARIA per fornire le necessarie semantiche!</p> + +<p>Il valore semantico migliorato del campo di ricerca ha mostrato cosa è possibile fare quando ARIA va oltre le semantiche disponibili con HTML5. Potrai sapere molto di più sulle semantiche e il potere delle proprietà/attributi ARIA qui sotto, specialmente nella sezione {{anch("Accessibilità dei controlli non semantici")}}. Per ora, vediamo come ARIA ci può aiutare a gestire gli aggiornamenti del contenuto dinamico.</p> + +<h3 id="Aggiornamenti_del_contenuto_dinamico">Aggiornamenti del contenuto dinamico</h3> + +<p>In generale tutto il contenuto caricato nel DOM può essere facilmente interpretato usando un lettore di schermo, dal contenuto testuale fino al testo alternativo delle immagini. I tradizionali siti statici con contenuto largamente testuale sono dunque facili da rendere accessibili alle persone con deficit visivo.</p> + +<p>Il problema è che le applicazioni web moderne spesso non sono composte da testo statico, di solito hanno una gran quantità di contenuto che si aggiorna dinamicamente, cioè contenuto che si agigorna senza che l'intera pagina si ricarichi, tramite meccanismi come <a href="/it/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/it/docs/Web/API/Fetch_API">Fetch</a>, o <a href="/it/docs/Web/API/Document_Object_Model">DOM APIs</a>. Queste aree del contenuto sono talvolta chiamate “aree vive”, o <strong>live regions</strong>.</p> + +<p>Consideriamo un esempio: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (vedi anche la <a href="https://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">versione live</a>). In questo esempio troviamo un paragrafo contenente una citazione selezionata casualmente:</p> + +<pre class="brush: html"><section> + <h1>Citazione casuale</h1> + <blockquote> + <p></p> + </blockquote> +</section></pre> + +<p>JavaScript riceve tramite <code>XMLHttpRequest</code> un file JSON contenente una serie di citazioni con il rispettivo autore. Dopo che la prima citazone tratta dal file è stata caricata nel paragrafo si attiva un loop <code>setInterval()</code> che carica una nuova citazione nel paragrafo ogni 10 secondi:</p> + +<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre> + +<p>Questo sistema funziona correttamente , ma non è ottimale in termini di accessibilità. Gli aggiornamenti del contenuto non sono rilevati dai lettori di schermo, e gli utenti che li usano non possono rendersi conto di ciò che sta succedendo. Questo esempio è molto basico, ma prova a immaginare cosa succederebbe se stessi creando una interfaccia utente più complessa, con molte aree del contenutto che si aggiornano costantemente, come una chat room, un gioco strategico o magari un sito di e-commerce con un carrello della spesa che si aggiorna con i prodotti selezionati dall'utente. Sarebbe impossibile utilizzare l'applicazione con un lettore di schermo, in assenza di un sistema che avverta gli utenti degli aggiornamenti del contenuto.</p> + +<p>Fortunatamente WAI-ARIA ci mette a disposizione un utile meccanismo per fornire tali avvertimenti, la proprietà <code>aria-live</code>. Applicarla a un elemento fa sì che i lettori di schermo leggano il contenuto che viene aggiornato. Con quanta frequenza il contenuto viene letto dipende dal valore assegnato:</p> + +<ul> + <li><code>off:</code> valore di default. Gli aggiornamenti non vengono annunciati.</li> + <li><code>polite</code>: gli aggiornamenti vengono annunciati solo quando l'utente è inattivo.</li> + <li><code>assertive</code>: gli aggiornamenti vengono annunciati all'utente il prima possibile.</li> + <li><code>rude</code>: gi aggiornamenti vengono annunciati istantaneamente, interrompendo ciò che l'utente sta facendo.</li> +</ul> + +<p>Generalmente, assegnare il valore <code>assertive</code> è sufficiente perchè gli aggiornamenti vengano annunciati in tempo reale, anche se nel caso di aggiornamenti di multiple aree di contenuto che avvengono allo stesso tempo i vari aggiornamenti saranno annunciati in sequenza, quindi con la possibilità di un breve ritardo sul tempo reale. Si raccomanda di usare <code>rude</code> solo per aggiornamenti ad alta priorità che devono "passare davanti" agli altri aggiornamenti in corso.</p> + +<p>Prova a realizzare una copia di <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> e <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a>, e modificare l'etichetta <code><section></code> così:</p> + +<pre class="brush: html"><section aria-live="assertive"></pre> + +<p>D'ora in poi il lettore di schermo leggerà il contenuto ogni volta che quest'ultimo sarà aggiornato.</p> + +<div class="note"> +<p><strong>Nota</strong>: : la maggior parte dei browser attiverà una security exception se provi ad effettuare un <code>XMLHttpRequest</code> da un URL <code>file://</code>. Per esempio se carichi il file direttamente nel browser (facendo doppio click). Per farlo funzionare, devi caricare il file a un server, per esempio usando <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Using_Github_pages">GitHub</a> (articolo in inglese), o un server locale come <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a> (articolo in inglese).</p> +</div> + +<p>C'è però una considerazione da tenere in conto: il lettore di schermo legge solo la parte del testo che viene aggiornata. È utile dunque che legga anche l'heading, per aiutare l'utente a ricordare quale sezione della pagina è stata aggiornata. Per farlo, possiamo aggiungere la proprietà <code>aria-atomic</code> alla sezione. Modifica la tua etichetta <code><section></code> così:</p> + +<pre class="brush: html"><section aria-live="assertive" aria-atomic="true"></pre> + +<p>L'attributo <code>aria-atomic="true"</code> indica al lettore di schermo che deve leggere l'intero contenuto dell'elemento, non solo le parti che sono state aggiornate. </p> + +<div class="note"> +<p><strong>Nota</strong>: : puoi vedere l'esempio completo qui: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">versione live</a>).</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: : la proprietà <code>aria-relevant</code> è utile per controllare cosa viene letto quando un'area di contenuto viene aggiornata. Per esempio puoi far si che siano lette solo le parti aggiunte o al contrario le parti rimosse dal contenuto.</p> +</div> + +<h3 id="Migliorare_l'accessibilità_da_tastiera">Migliorare l'accessibilità da tastiera</h3> + +<p>Come abbiamo già detto in altri articoli di questo modulo, uno dei punti forti di HTML in termini di accessibilità è che implementa automaticamente l'accessibilità da tastiera per funzionalità come i bottoni, i campi dei formulari e i link. In generale, puoi sempre usare il tasto TAB per muoverti da un elemento all'altro e il tasto INVIO per selezionare o attivare gli elementi. In alcune circostanze puoi anche usare altri tasti (per esempio le frecce, per muoverti su e giù tra le opzioni di una lista <code><select></code>).</p> + +<p>Ciononostante, a volte ti troverai a dover scrivere codice che fa uso di elementi non semantici che compiono la funzione di bottoni (o altri tipi di elementi), o codice che usa elementi che possono ricevere focus per scopi diversi dal normale. Forse starai cercando di sistemare del codice mal scritto in precedenza, o di costruire un qualche tipo di widget complesso che richiede tecniche non ortodosse.</p> + +<p>Per rendere focalizzabili elementi che normalmente non lo sono, WAI-ARIA estende l'attributo <code>tabindex</code> con alcuni nuovi valori:</p> + +<ul> + <li><code>tabindex="0"</code> — come specificato in precedenza, questo valore rende "tabbabili" elementi che normalmente non lo sono. Questo è il valore più utile di <code>tabindex</code>.</li> + <li><code>tabindex="-1"</code> — questo valore permette ad elementi normalmente non tabbabili di ricevere focus programmaticamente, per esempio tramite JavaScript, o come destinazione di un link. </li> +</ul> + +<p>Abbiamo discusso questi valori in maggior dettaglio e mostrato una implementazione tipica nel nostro articolo sull'accessibilità in HTML, vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>.</p> + +<h3 id="Accessibilità_dei_controlli_non_semantici">Accessibilità dei controlli non semantici</h3> + +<p>Proseguendo con il tema trattato nella sezione precedente, quando si usa una serie di <code><div></code> annidati in congiunto con CSS o JavaScript per creare una funzionalità complessa per l’interfaccia utente, o se si cambia/migliora sostanzialmente un controllo nativo tramite JavaScript, non solo è possibile che l’accessibilità da tastiera ne risulti ridotta, ma anche per gli utenti che usano lettori di schermo potrebbero prodursi difficoltà a comprendere l’uso della funzionalità, se non ci sono indicazioni semantiche o altri indizi. In tali situazioni, ARIA può aiutare a fornire il valore semantico addizionale necessario. </p> + +<h4 id="Validazione_di_formulari_e_avvisi_di_errore"><strong>Validazione di formulari e avvisi di errore</strong></h4> + +<p>Innanzitutto, rivediamo l’esempio di formulario che avevamo preso in considerazione nell’articolo sull’accessibilità in CSS e JavaScript (vedi <a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Mantieni_un_uso_non_intrusivo_di_JavaScript">Mantieni un uso non intrusivo di JavaScript</a>). Alla fine di tale sezione abbiamo mostrato alcuni attributi ARIA che sono stati aggiunti al messaggio che appare se ci sono errori di validazione quando provi a inviare il formulario:</p> + +<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<ul> + <li><code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></u></code> trasforma automaticamente l’elemento a cui è applicato in una live region, di modo che i cambi applicati all’elemento vengono letti dal lettore di schermo; inoltre identifica semanticamente l’elemento come un messaggio di allerta (informazione importante relativa al momento/contesto), e rappresenta una migliore e più accessibile maniera di fornire un avviso a un utente (i dialoghi modali come le chiamate <code><u><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert">alert()</a></u></code> presentano un certo numero di problemi di accessibilità; vedi l’articolo (in inglese) <u><a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a></u> scritto da WebAIM).</li> + <li>Il valore <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant="all"</a></u></code> indica al lettore di schermo che deve rileggere il contenuto della lista di errori ogni volta che si verificano cambi in essa, per esempio quando vengono aggiunti o rimossi errori. Ciò risulta utile, in quanto l’utente potrà essere sempre al corrente di quali errori sono presenti sulla lista, non solo di quali sono stati aggiunti o rimossi dalla stessa.</li> +</ul> + +<p>Possiamo ora procedere oltre con il nostro utilizzo di ARIA, e fornire ulteriore assitenza nella validazione dei dati. Per esempio, perchè non indicare dal principio quali campi sono obbligatori, e quale intervallo di età è permesso introdurre?</p> + +<ol> + <li>A questo punto, salva sul tuo dispositivo una copia dei files <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">validazione-formulario.html</a> e <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validazione.js</a>.</li> + <li>Aprili entrambi in un editor di testo e dai un’occhiata a come funziona il codice.</li> + <li>Per prima cosa, aggiungi un paragrafo come quello che vedi qui sotto giusto prima della etichetta di apertura del formulario <code><form></code>, e marca entrambe le etichette <code><label></code> del formulario con un asterisco. Questo è il metodo con cui normalmente si segnalano i campi obbligatori agli utenti che non hanno limitazioni visuali. + <pre class="brush: html"><p>I campi marcati con un asterisco (*) sono obbligatori.</p></pre> + </li> + <li>Questa indicazione è utile dal punto di vista visuale, ma non è facile da cogliere per gli utenti che usano lettori di schermo. Fortunatamente, WAI-ARIA fornisce l’attributo <u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></u> , che suggerisce al lettore di schermo di indicare all’utente quali sono i campi del formulario che devono essere compilati obbligatoriamente. Aggiorna gli elementi <code><input></code> come vedi qui sotto: </li> + <li> + <pre><code><input type="text" name="name" id="name" aria-required="true"> + +<input type="number" name="age" id="age" aria-required="true"></code></pre> + </li> + <li>A questo punto se salvi l’esempio e lo testi con un lettore di schermo dovresti ascoltare qualcosa come “Introduci il tuo nome asterisco, obbligatorio, modifica testo”.</li> + <li>Potrebbe inoltre risultare utile indicare agli utenti l’intervallo di anni dentro il quale dovrebbe situarsi il valore dell’età. Spesso tale valore si indica tramite un placeholder, ossia un valore indicativo che appare all’interno del campo quando non è ancora stato compilato. WAI-ARIA include le proprietà <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> e <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></u></code> per specificare un intervallo di valori minimo e massimo, ma queste proprietà al momento non hanno un supporto ampio; una caratteristica che gode di un migliore supporto è l’attributo HTML5 <code>placeholder</code>, che contiene un messaggio che viene mostrato nel campo quando l’utente non vi ha ancora introdotto nessun valore, e viene letto da un certo numero di lettori di schermo. Aggiorna il campo età come indicato qui: + <pre class="brush: html"><input type="number" name="age" id="age" placeholder="introduci un numero compreso tra 1 e 150" aria-required="true"></pre> + </li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: puoi vedere un esempio completo qui: <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">validazione-formulario-aggiornato.html</a>.</p> +</div> + +<p>WAI-ARIA permette inoltre alcune tecniche avanzate di etichettazione dei formulari, che vanno al di là del classico elemento {{htmlelement("label")}}. Abbiamo già discusso sull’utilizzo della proprietà <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> per rendere un’etichetta {{htmlelement("label")}} invisibile agli utenti che non usano lettori di schermo (vedi la sezione <code><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/WAI-ARIA_basics/Indicatori/riferimenti">Indicatori/riferimenti</a></code> sopra). Ci sono anche altre tecniche di etichettazione che fanno uso di proprietà come <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></u></code>, se vuoi usare un elemento non-<code><label></code> come etichetta o se vuoi etichettare multipli campi del formulario con la stessa etichetta, e <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></u></code>, se vuoi associare informazione aggiuntiva a un campo del formulario e vuoi che il lettore di schermo la legga. Vedi l’articolo in inglese <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling</a> per maggiori dettagli.</p> + +<p>Ci sono inoltre molte altre proprietà e attributi utili per indicare lo stato di un elemento di un formulario. Per esempio, si può usare <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a></u>="true"</code> per indicare che un campo è disabilitato. Molti browser salteranno i campi disabilitati, e i lettori di schermo non li leggeranno, ma in alcuni casi saranno comunque indicati, dunque è una buona idea includere questo attributo per permettere al lettore di schermo di sapere che un campo è effettivamente disabilitato.</p> + +<p>Se esiste la possibilità che lo stato di un campo cambi da disabilitato ad abilitato è buona norma indicarlo all’utente, e inoltre spiegare le conseguenze di tale cambio. Per esempio, nel nostro formulario demo <u><a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">validazione-formulario-casella-disabilitata.html</a></u> c’è una casella che, quando è selezionata, abilita un altro campo del formulario, tramite il quale si possono introdurre informazioni aggiuntive. Abbiamo preparato un paragrafo nascosto:</p> + +<pre class="brush: html"><p class="hidden-alert" aria-live="assertive"></p></pre> + +<p>Questo elemento è nascosto alla vista tramite <code>position: absolute</code><strong>. </strong>Quando la casella viene selezionata/deselezionata, il contenuto dell’area nascosta si aggiorna per segnalare agli utenti che usano lettore di schermo in che modo la struttura del formulario è cambiata dopo aver selezionato la casella; inoltre si aggiorna anche lo stato dell’attributo <code>aria-disabled</code> e si fornisce anche un indicazione visuale del cambio:</p> + +<pre class="brush: js">function toggleMusician(bool) { + var instruItem = formItems[formItems.length-1]; + if(bool) { + instruItem.input.disabled = false; + instruItem.label.style.color = '#000'; + instruItem.input.setAttribute('aria-disabled', 'false'); + hiddenAlert.textContent = 'I'Il campo strumenti suonati è ora abilitato; usalo per indicarci quali strumenti sai suonare.'; + } else { + instruItem.input.disabled = true; + instruItem.label.style.color = '#999'; + instruItem.input.setAttribute('aria-disabled', 'true'); + instruItem.input.removeAttribute('aria-label'); + hiddenAlert.textContent = ''Il campo Strumenti suonati è ora disabilitato.'; + } +}</pre> + +<h4 id="Descrivere_bottoni_non_semantici_come_bottoni">Descrivere bottoni non semantici come bottoni</h4> + +<p>Ci è già capitato di discutere della accessiblità nativa di alcuni elementi come bottoni, link o campi di formulario, e dei problemi di accessibilità che sorgono quando si usano elementi sostitutivi per compiere le stesse funzioni di questi elementi. Vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Controlli_di_Interfaccia_Utente">Controlli di interfaccia utente</a> nell’articolo sull’accessibilità in HTML, e <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics#Migliorare_l'accessibilità_da_tastiera">Migliorare l’accessibilità da tastiera</a>, qui sopra). In molti casi è possibile restituire l’accessibilità da tastiera a tali elementi senza troppi problemi, usando <code>tabindex</code> e un poco di JavaScript.</p> + +<p>Ma come fare con i lettori di schermo? Non potranno interpretare gli elementi sostitutivi come bottoni. Se facciamo un test con il nostro esempio <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">div-falsi-bottoni.html</a> e un lettore di schermo, i falsi bottoni saranno segnalati all’utente con frasi come “Cliccami!, gruppo”, che risultano di difficile interpretazione.</p> + +<p>Possiamo rimediare al problema usando un ruolo WAI-ARIA. Salva la pagina <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">div-falsi-buttoni.html</a>, e aggiungi <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> ad ogni <code><div></code> che compie la funzione di bottone, come per esempio:</p> + +<pre><div data-message="Questo messaggio viene dal primo bottone" tabindex="0" role="button"><code>Cliccami!</code></div></pre> + +<p>Se ora provi a navigare la pagina con un lettore di schermo, i bottoni saranno letti come “Cliccami!, bottone”, e tutto risulterà molto più chiaro.</p> + +<div class="note"> +<p><strong>Nota</strong>: non dimenticare che usare il corretto elemento semantico è sempre una opzione migliore. Se vuoi creare un bottone e non ci sono ragioni valide per non usare un elemento <code><a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/button" title="L'elemento HTML <button> rappresenta un bottone cliccabile."><button></a></code>, dovresti usare un elemento <code><a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/button" title="L'elemento HTML <button> rappresenta un bottone cliccabile."><button></a></code>!</p> +</div> + +<h4 id="Guidare_gli_utenti_nell’uso_di_widget_complessi">Guidare gli utenti nell’uso di widget complessi</h4> + +<p>Ci sono molti altri <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">ruoli</a> che danno la possibilità di assegnare ad elementi non semantici lo status di comuni elementi dell’interfaccia utente, elementi che vanno al di là di ciò che è disponibile nell’HTML standard, come per esempio <code> <a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>. Puoi trovare alcuni utili esempi nella <a href="https://dequeuniversity.com/library/">Deque university code library</a>, per farti un'idea di come tali elementi possono essere resi accessibili.</p> + +<p>Prendiamo in considerazione un esempio. Torniamo ad usare il nostro semplice infobox a schede (vedi <a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Nascondere_elementi">Nascondere elementi</a> nell’articolo sull’accessibilità in CSS e JavaScript), che puoi trovare qui: <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">infobox a schede</a> (vedi <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codice sorgente</a>).</p> + +<p>Questo esempio funziona perfettamente in termini di accessibilità da tastiera: puoi muoverti facilmente da una scheda all’altra usando il tasto TAB e selezionare una scheda con INVIO per visualizzarne il contenuto. È inoltre abbastanza accessibile se si usa un lettore di schermo, puoi infatti usare gli headings per navigare il contenuto anche senza vederlo. Ciò che però non risulterà del tutto chiaro è in cosa consiste il contenuto stesso: un lettore di schermo riporta il contenuto dell’infobox come composto da un lista di link e da dell’altro contenuto con tre headings. Non da nessuna indicazione di come i contenuti sono relazionati tra loro. Fornire all’utente indicazioni precise su come il contenuto è strutturato è sempre una buona idea.</p> + +<p>Abbiamo creato una versione migliorata dell’esempio, chiamata <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> (vedi <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">versione live</a>). Abbiamo aggiornato l’interfaccia del box così:</p> + +<pre class="brush: html"><ul role="tablist"> + <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> +</ul> +<div class="panels"> + <article class="active-panel" role="tabpanel" aria-hidden="false"> + ... + </article> + <article role="tabpanel" aria-hidden="true"> + ... + </article> + <article role="tabpanel" aria-hidden="true"> + ... + </article> +</div></pre> + +<div class="note"> +<p><strong>Nota</strong>: il cambio più evidente è la rimozione dei link che erano presenti precedentemente nell’esempio. Ora si usano i componenti li della lista per identificare le schede. Questo procedimento rende il tutto meno confuso per gli utenti che usano lettori di schermo, in quanto i link che c’erano in precedenza non conducevano da nessuna parte, servivano solo a cambiare di scheda. Inoltre gli attributi <code>aria-setsize</code> e <code>aria-posinset</code> permettono ora di identificare chiaramente le schede tramite il lettore di schermo: in precedenza, con i link, il browser trasmetteva sempre al lettore “1 di 1”, e non “1 di 3”, “2 di 3”, ecc.</p> +</div> + +<p> </p> + +<p>Le nuove funzionalità aggiunte all’infobox di esempio sono le seguenti:</p> + +<ul> + <li>Nuovi ruoli — <a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a>, <a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a>, <a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a> — che identificano le aree più importanti dell’interfaccia: il contenitore delle schede, le schede stesse e i pannelli corrispondenti.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — definisce quale scheda è attualmente selezionata. Quando l’utente seleziona una nuova scheda, il valore di questo attributo viene aggiornato per ogni scheda tramite JavaScript.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — impedisce che un elemento venga letto dal lettore di schermo. Quando l’utente seleziona una nuova scheda, il valore di questo attributo viene aggiornato per ogni scheda tramite JavaScript.</li> + <li><code>tabindex="0"</code> — poichè abbiamo rimosso i link, dobbiamo assegnare questo attributo agli elementi li della lista per renderli focalizzabili tramite tastiera.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — questa proprietà permette di specificare al lettore di schermo che un elemento è parte di una serie, e quanti sono gli elementi che costituiscono la serie. </li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — questa proprietà permette di specificare quale posizione un elemento occupa nella serie. Usata insieme a <code>aria-setsize</code>, questa proprietà fornisce al lettore di schermo informazioni sufficienti perchè possa segnalare all’utente dove si trova correntemente, cioè se nell’elemento “1 di 3”, “2 di 3”, ecc. In molti casi, i browser dovrebbero essere in grado di ricavare questa informazione dalla gerarchia degli elementi, ma è sicuramente di aiuto fornire più indicazioni possibile. </li> +</ul> + +<p>Secondo i nostri test, questa nuova struttura ha migliorato sensibilmente l’accessibilità dell’infobox a schede. Le schede sono ora riconosciute come schede (ora il lettore pronuncia “scheda”, o perlomeno “tab”, in inglese), la scheda attualmente selezionata è chiaramente indicata, pronunciando il lettore la parola “selezionata” insieme al nome della scheda, e il lettore di schermo indica anche il numero della scheda in cui si trova l’utente. Inoltre, grazie ai valori di <code>aria-hidden</code> impostati (solo la scheda attualmente selezionata ha il valore <code>aria-hidden="false"</code>), il contenuto non nascosto è il solo che il lettore può leggere, rendendolo il tutto più facile e meno confuso da navigare per l’utente.</p> + +<p> </p> + +<div class="note"> +<p><strong>Nota</strong>: puoi assegnare l’attributo <code>aria-hidden="true"</code> a qualsiasi contenuto che vuoi che sia ignorato dai lettori di schermo.</p> +</div> + +<h2 id="Riassunto">Riassunto</h2> + +<p>Questo articolo non è da considerarsi esaustivo per quanto riguarda tutte le funzionalità disponibili con la tecnologia WAI-ARIA, ma dovrebbe averti fornito informazioni sufficienti a capire come usarla, e come identificare le situazioni più comuni in cui avrai bisogno di ricorrere ad essa.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a> — guida di riferimento sui ruoli ARIA.</li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a> — guida di riferimento sulle proprietà e gli stati.</li> + <li><a href="https://dequeuniversity.com/library/">Deque university code library</a> — una libreria di utilissimi esempi pratici che mostrano complessi elementi di interfaccia utente resi accessibili usando le funzionalità di WAI-ARIA.</li> + <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA Authoring Practices</a> — dettagliatissime guide di disegno del W3C, che spiegano come implementare differenti tipi di controlli di interfaccia utente complessi, e come renderli accessibili usando le funzionalità di WAI-ARIA.</li> + <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — Una specifica del W3C che definisce, per ogni elemento HTML, quali semantiche di accessibilità (ARIA) sono implementate nativamente dai browser, e quali funzionalità WAI-ARIA puoi usare per fornire semantiche extra se sono necessarie.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}</p> diff --git a/files/it/learn/come_contribuire/index.html b/files/it/learn/come_contribuire/index.html new file mode 100644 index 0000000000..bd3d90966a --- /dev/null +++ b/files/it/learn/come_contribuire/index.html @@ -0,0 +1,88 @@ +--- +title: Come contribuire nell'area di MDN dedicata all'apprendimento +slug: Learn/Come_contribuire +tags: + - Apprendimento + - Articolo + - Contribuire + - Didattica + - Glossário + - Guida + - Materiale + - Principiante + - insegnante + - sviluppatore +translation_of: Learn/How_to_contribute +--- +<p>{{LearnSidebar}}</p> + +<p>Se sei qui per la prima volta o dopo un'approfondita ricerca, probabilmente ti interessa contribuire all'area di MDN dedicata all'apprendimento. Questa è una grande notizia!</p> + +<p><span class="seoSummary">In questa pagina, troverai tutto ciò che ti occorre per iniziare a migliorare i contenuti dedicati all'apprendimento in MDN. Ci sono molte cose che puoi fare, a seconda del tempo a tua disposizione e se sei un <a href="/en-US/Learn/How_to_contribute#I'm_a_beginner">principiante</a>, uno <a href="/en-US/Learn/How_to_contribute#I'm_a_web_developer">sviluppatore web</a> o un <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">insegnante</a>.</span></p> + +<div class="note"> +<p><strong>Nota</strong>: Puoi trovare una guida per scrivere un nuovo articolo nell'area dedicata all'apprendimento su <a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Come scrivere un nuovo articolo per aiutare gli utenti a conoscere il Web</a>.</p> +</div> + +<h2 id="Trova_un_compito_specifico">Trova un compito specifico</h2> + +<p><strong>I contributori stanno utilizzando <a href="https://trello.com/b/LDggrYSV">una bacheca Trello</a> per organizzare i propri compiti. In questo modo puoi trovare dei compiti specifici da fare nel progetto. Per essere coinvolto, basta <a href="https://trello.com/signup">creare un account Trello</a> e avvisare Chris Mills per ricevere i permessi di scrittura sulla bacheca.</strong></p> + +<p>Contribuire è il modo migliore per divertirsi, imparando nuove cose. Se ti senti perso o hai domande, non esitare a raggiungerci nella nostra <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">lista email</a> o <a href="/en-US/docs/MDN/Community#Get_into_IRC">canale IRC</a> (dettagli a fine pagina). <a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> guida gli argomenti per l'area apprendimento — Puoi anche contattarlo direttamente.</p> + +<p>La seguente sezione fornisce delle idee generali di compiti che puoi fare.</p> + +<h2 id="Sono_un_principiante">Sono un principiante</h2> + +<p>Questo è meraviglioso! I principianti sono molto importanti e preziosi per creare materiale didattico e raccogliere feedback su di esso. In quanto diretto destinatario di questo materiale, riesci a restituire una prospettiva unica su di esso e ciò ti rende un elemento fondamentale del nostro team. Invece, se stai utilizzando i nostri articoli per imparare qualcosa ma ti trovi in difficoltà o trovi un articolo caotico, puoi sia correggerlo oppure farci sapere del problema affinché possiamo provvedere noi a correggerlo.</p> + +<p>Di seguito sono riportati i modi in cui puoi contribuire:</p> + +<dl> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Aggiungi tags ai nostri articoli</a> (<em>5 min</em>)</dt> + <dd>Aggiungere dei tag ai contenuti di MDN è uno dei modi più semplici di dare il tuo contributo. Poichè molte delle nostre sezioni utilizzano i tags per aiutare a fornire le giuste informazioni, contribuire a definire i tags stessi è senz'altro un contributo molto prezioso. Da' un'occhiata alla lista dei <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Glossary#No_tags">lemmi del glossario</a> e agli <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Learn#No_tags">articoli didattici </a>ancora privi di tags per iniziare a contribuire.</dd> + <dt><a href="/en-US/docs/Glossary">Leggi e correggi le voci del glossario</a> (<em>5 min</em>)</dt> + <dd>In qualità di principiante, noi abbiamo bisogno della freschezza del tuo sguardo. Se una voce del glossario ti sembra difficile da comprendere, ciò significa che occorre migliorarla. Sentiti libero di operare qualunque cambiamento ritieni necessario. Se non ti sembra di essere in grado tu stesso di apportare eventuali correzioni, puoi comunque segnalarcelo alla <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nostra mailing list</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Scrivi una nuova voce del glossario</a> (<em>20 min</em>)</dt> + <dd>Ecco il modo più efficace per imparare qualcosa di nuovo. Scegli un concetto che vorresti capire meglio e, mentre impari, scrivi la nuova voce del glossario che gli pertiene. Provare a spiegare qualcosa agli altri è un modo efficace di "fissare" quanto stai imparando nel tuo cervello e di elaborare tu stesso il significato delle cose. Tutto ciò, mentre stai cercando di aiutare qualcun altro: si vince tutti!</dd> + <dt><a href="/en-US/Learn/Index">Leggi e controlla un articolo didattico</a> (<em>2 ore</em>)</dt> + <dd>Compito molto simile al precedente (v. sopra); solo richiede maggior tempo, perchè questi articoli in genere sono più lunghi.</dd> +</dl> + +<h2 id="Sono_uno_sviluppatore">Sono uno sviluppatore</h2> + +<p>Fantastico! Le tue competenze tecniche sono proprio quello che ci serve per offrire ai principianti dei contenuti tecnicamente accurati. Poichè questa sezione di MDN è dedicata all'apprendimento del Web, fa in modo che le tue spiegazioni siano il più semplice possibile, ma non così semplici da risultare inutili. E' preferibile essere compresi piuttosto che esageratamente precisi.</p> + +<dl> + <dt><a href="/en-US/docs/Glossary">Leggi e correggi le voci del glossario</a> (<em>5 min</em>)</dt> + <dd>In quanto sviluppatore, vorremmo essere sicuri che farai in modo di rendere i nostri contenuti in maniera tecnicamente accurata ma non pedante. Sentiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sui contenuti prima di intervenire, contattaci via <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing list</a> o <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Scrivi una nuova voce del glossario</a> (<em>20 min</em>)</dt> + <dd>Rendere più chiaro il linguaggio tecnico è un ottimo metodo per imparare e, allo stesso tempo, per essere tecnicamente precisi. I principianti te ne saranno grati. Ci sono <a href="/en-US/docs/Glossary#Contribute">molti termini da definire</a> che richiedono la tua attenzione. Scégline uno e sei pronto per cominciare.</dd> + <dt><a href="/en-US/Learn/Index">Leggi e correggi un articolo didattico</a> (<em>2 ore</em>)</dt> + <dd>Stessa cosa del controllare una voce del glossario (v. sopra); richiede solo un po' più di tempo perchè questi articoli sono generalmente più lunghi.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Scrivi un nuovo articolo didattico</a> (<em>4 ore o più</em>)</dt> + <dd>In MDN mancano ancora semplici chiari articoli dedicati all'utilizzo delle tecnologie per il Web (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, ecc). Ci sono anche contenuti ormai obsoleti che avrebbero bisogno di essere controllati e riorganizzati. Mettiti alla prova e contribuisci a rendere le tecnologie per il Web accessibili anche per i principianti.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Crea strumenti didattici interattivi , esempi di codice o esercizi </a> (<em>? ore</em>)</dt> + <dd>Ciascuno dei nostri articoli didattici prevede quello che chiamiamo materiale di "apprendimento attivo", perchè le persone imparano meglio se fanno loro stessi. Tale materiale è costituito da esercizi o contenuti interattivi, che consentono all'utente di applicare e manipolare i concetti espressi nell'articolo. Esistono diversi modi di creare contenuti didattici per l'apprendimento attivo, dal creare esempi di codice con <a href="http://jsfiddle.net" rel="external">JSFiddle</a> o simili, alla composizione di contenuti interattivi e del tutto modificabili con <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Scatena la tua fantasia!</dd> +</dl> + +<h2 id="Sono_un_insegnante">Sono un insegnante</h2> + +<p>MDN ha una lunga storia di eccellenza tecnica, ma siamo ancora agli inizi per ciò che riguarda gli strumenti didattici migliori per insegnare ai principianti. Ecco dove il tuo aiuto è prezioso, come insegnante o facilitatore: puoi aiutarci a far sì che il nostro materiale fornisca un percorso didattico efficace e pratico per i nostri lettori.</p> + +<dl> + <dt><a href="/en-US/docs/Glossary">Leggi e correggi una voce del glossario</a> (<em>15 min</em>)</dt> + <dd>Controlla un lemma del glossario e séntiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sul contenuto prima di modificarlo, puoi contattarci tramite la <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nostra mailing list</a> o <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Scrivi una nuova voce del glossario</a> (<em>1 ora</em>)</dt> + <dd>Definizioni dei termini chiare e semplici e supervisione dei concetti di base del glossario sono elementi fondamentali per aiutare i principianti. La tua esperienza come educatore può essere molto utile per creare delle voci del glossario efficaci; ci sono <a href="/en-US/docs/Glossary#Contribute">molti termini da definire</a> che richiedono la tua attenzione. Scégline uno e datti da fare.</dd> + <dt><a href="/en-US/docs/tag/needsSchema">Aggiungi illustrazioni e/o schemi agli articoli</a> (<em>1 ora</em>)</dt> + <dd>Come saprai, le illustrazioni sono una parte inestimabile di qualunque contenuto didattico. Ecco una cosa che spesso ci manca qui in MDN e la tua abilità può far la differenza in questa sezione. Scorri gli <a href="/en-US/docs/tag/needsSchema">articoli privi di illustrazioni</a> e scégline uno cui vuoi aggiungere la parte grafica.</dd> + <dt><a href="/en-US/Learn/Index">Leggi e correggi un articolo didattico</a> (<em>2 ore</em>)</dt> + <dd>Compito simile alla correzione delle voci del glossario (v. sopra), ma richiede maggior tempo dal momento che gli articoli sono generalmente più lunghi.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Scivi un nuovo articolo didattico</a> (<em>4 ore</em>)</dt> + <dd>Ci servono articoli chiari e semplici sull'ecosistema Web e sugli argomenti inerenti di tipo funzionale. Dal momento che questi articoli didattici hanno lo scopo di essere soprattutto educativi e non di coprire letteralmente tutto quello che c'è da sapere, la tua esperienza riguardo cosa e come sia effettivamente da trattare sarà di grande aiuto.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Inventa esercizi, questionari o strumenti didattici interattivi</a> (<em>? ore</em>)</dt> + <dd>Tutti i nostri articoli didattici prevedono materiale di "apprendimento attivo". Tale materiale consiste in contenuti interattivi o esercizi, che aiuteranno gli utenti ad apprendere come utilizzare ed espandere i concetti espressi nell'articolo in questione. Ci sono molti modi in cui tu puoi contribuire qui, dal creare quiz al comporre nuovi contenuti interattivi e modificabili su <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Scatena la tua fantasia!</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Crea percorsi didattici</a> (<em>? ore</em>)</dt> + <dd>Al fine di fornire tutorials di facile comprensione e nella corretta progressione, ci occorre organizzare i contenuti in percorsi didattici: è un modo di raccogliere contenuti preesistenti e individuare ciò che ancora manca, così da proporre gli argomenti per nuovi articoli didattici ancora da scrivere.</dd> +</dl> diff --git a/files/it/learn/common_questions/index.html b/files/it/learn/common_questions/index.html new file mode 100644 index 0000000000..966a03b29e --- /dev/null +++ b/files/it/learn/common_questions/index.html @@ -0,0 +1,139 @@ +--- +title: Common questions +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p> + +<h2 id="How_the_Web_works">How the Web works</h2> + +<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p> + +<dl> + <dt> + <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3> + </dt> + <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd> + <dt> + <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3> + </dt> + <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd> + <dt> + <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3> + </dt> + <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd> + <dt> + <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3> + </dt> + <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd> + <dt> + <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3> + </dt> + <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd> + <dt> + <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3> + </dt> + <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd> +</dl> + +<h2 id="Tools_and_setup">Tools and setup</h2> + +<p>Questions related to the tools/software you can use to build websites.</p> + +<dl> + <dt> + <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3> + </dt> + <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd> + <dt> + <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3> + </dt> + <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd> + <dt> + <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3> + </dt> + <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd> + <dt> + <h3 id="How_do_I_set_up_a_basic_working_environment"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">How do I set up a basic working environment?</a></h3> + </dt> + <dd>When working on a web project, you'll want to test it locally before you show it to the world. Some types of code require a server to test, and in this article we'll show you how to set one up. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.</dd> + <dt> + <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> + </dt> + <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> + <dt> + <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> + </dt> + <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> + <dt> + <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3> + </dt> + <dd> + <div> + <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p> + </div> + </dd> + <dt> + <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> + </dt> + <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one fo the most common ways to get a website online so others can access it from their computers.</dd> + <dt> + <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> + </dt> + <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> + <dt> + <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> + </dt> + <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> + <dt> + <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> + </dt> + <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> +</dl> + +<h2 id="Design_and_accessibility">Design and accessibility</h2> + +<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> + +<dl> + <dt> + <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> + </dt> + <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> + <dt> + <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> + </dt> + <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> + <dt> + <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> + </dt> + <dd>This article introduces the basic concepts behind web accessibility.</dd> + <dt> + <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> + </dt> + <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> + <dt> + <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> + </dt> + <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> +</dl> + +<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2> + +<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li> +</ul> diff --git a/files/it/learn/common_questions/thinking_before_coding/index.html b/files/it/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..c88abf5480 --- /dev/null +++ b/files/it/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,180 @@ +--- +title: How do I start to design my website? +slug: Learn/Common_questions/Thinking_before_coding +translation_of: Learn/Common_questions/Thinking_before_coding +--- +<p class="summary">Questo articolo tratta l'importantissimo primo passo di ogni progetto: definisci cosa vuoi realizzare con il tuo sito.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="it"><span title="">Prerequisiti:</span></span></th> + <td><span class="tlid-translation translation" lang="it"><span title="">Nessuno</span></span></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="it">Obbiettivo:</span></th> + <td><span class="tlid-translation translation" lang="it"><span title="">Impara a definire obiettivi per orientare il tuo progetto web.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Sommario"><span class="tlid-translation translation" lang="it"><span title="">Sommario</span></span></h2> + +<p><span class="tlid-translation translation" lang="it"><span title="">Quando si inizia con un progetto Web, molte persone si concentrano sul lato tecnico.</span> <span title="">Ovviamente devi avere familiarità con la tecnica del tuo mestiere, ma ciò che conta davvero è ciò che vuoi realizzare.</span> <span title="">Sì, sembra ovvio, ma troppi progetti falliscono non per mancanza di know-how tecnico, ma per mancanza di obiettivi e visione.</span></span></p> + +<p><span class="tlid-translation translation" lang="it"><span title="">Quindi, quando hai un'idea e vuoi trasformarla in un sito Web, ci sono alcune domande a cui dovresti rispondere prima di ogni altra cosa:</span></span></p> + +<ul> + <li> + <div class="text-wrap tlid-copy-target"> + <div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="it"><span title="">Cosa voglio esattamente realizzare?</span></span></div> + </div> + </li> + <li><span class="tlid-translation translation" lang="it"><span title="">In che modo un sito web mi aiuterà a raggiungere i miei obiettivi?</span></span></li> + <li><span class="tlid-translation translation" lang="it"><span title="">Cosa bisogna fare e in quale ordine per raggiungere i miei obiettivi?</span></span></li> +</ul> + +<p><span class="tlid-translation translation" lang="it"><span title="">Tutto ciò si chiama ideazione del progetto ed è un primo passo necessario per raggiungere il tuo obiettivo, che tu sia un principiante o uno sviluppatore esperto.</span></span></p> + +<h2 id="Apprendimento_attivo"><span class="tlid-translation translation" lang="it"><span title="">Apprendimento attivo</span></span></h2> + +<div class="text-wrap tlid-copy-target"> +<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="it"><span title="">Non è ancora disponibile un apprendimento attivo.</span></span><em><a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started"> Per favore, considera di contribuire</a>.</em></div> +</div> + +<h2 id="Approfondimento">Approfondimento</h2> + +<p><span class="tlid-translation translation" lang="it"><span title="">Un progetto non inizia mai con il lato tecnico.</span> <span title="">I musicisti non faranno mai musica a meno che non abbiano prima un'idea di ciò che vogliono suonare, e lo stesso vale per pittori, scrittori e sviluppatori web.</span> <span title="">La tecnica arriva seconda.</span><br> + <br> + <span title="">La tecnica è ovviamente critica.</span> <span title="">I musicisti devono padroneggiare il loro strumento.</span> <span title="">Ma i bravi musicisti non potranno mai produrre buona musica senza un'idea.</span> <span title="">Pertanto, prima di passare al lato tecnico, ad esempio codice e strumenti, è necessario fare un passo indietro e decidere in dettaglio cosa si desidera fare.</span><br> + <br> + <span title="">La discussione di un'ora con gli amici è un buon inizio, ma inadeguata.</span> <span title="">Devi sederti e strutturare le tue idee per avere una visione chiara di quale percorso devi prendere per trasformare le tue idee in realtà.</span> <span title="">Per fare questo, hai solo bisogno di carta e penna e del tempo per rispondere almeno alle seguenti domande.</span></span></p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="it"><span title="">Nota: ci sono innumerevoli modi per realizzare l'ideazione del progetto.</span> <span title="">Non possiamo metterli tutti qui (un intero libro non sarebbe abbastanza).</span> <span title="">Quello che presenteremo qui è un metodo semplice per gestire ciò che i professionisti chiamano Ideazione del progetto, Pianificazione del progetto e Gestione del progetto.</span></span></p> +</div> + +<h3 id="Cosa_voglio_esattamente_realizzare">Cosa voglio esattamente realizzare?</h3> + +<p>Questa è la domanda più importante a cui rispondere, poiché guida tutto il resto. Elenca tutti gli obiettivi che desideri raggiungere. Può essere qualsiasi cosa: vendere beni per fare soldi, esprimere opinioni politiche, incontrare nuovi amici, fare concerti con i musicisti, collezionare foto di gatti o qualsiasi cosa tu voglia.</p> + +<p>Supponi di essere un musicista. Potresti voler:</p> + +<ul> + <li>Consenti alle persone di ascoltare la tua musica.</li> + <li>Vendi chicche.</li> + <li>Incontra altri musicisti.</li> + <li>Parla della tua musica.</li> + <li>Insegna musica attraverso i video.</li> + <li>Pubblica foto dei tuoi gatti.</li> + <li>Trova una nuova ragazza / ragazzo.</li> +</ul> + +<p>Una volta che hai un tale elenco, devi dare la priorità. Ordina gli obiettivi dal più importante al meno importante:</p> + +<ol> + <li>Trova una nuova ragazza / ragazzo.</li> + <li>Consenti alle persone di ascoltare la tua musica.</li> + <li>Parla della tua musica.</li> + <li>Incontra altri musicisti.</li> + <li>Vendi chicche.</li> + <li>Insegna la musica attraverso i video.</li> + <li>Pubblica foto dei tuoi gatti.</li> +</ol> + +<p>Fare questo semplice esercizio — scrivere obiettivi e classificarli — ti aiuterà quando hai delle decisioni da prendere. (Devo implementare queste funzionalità, utilizzare questi servizi, creare questi design?)</p> + +<p>Quindi ora che hai un elenco prioritario di obiettivi, passiamo alla domanda successiva.</p> + +<h3 id="In_che_modo_un_sito_web_potrebbe_portarmi_ai_miei_obiettivi">In che modo un sito web potrebbe portarmi ai miei obiettivi?</h3> + +<p>Quindi hai un elenco di obiettivi e ritieni di aver bisogno di un sito Web per raggiungere tali obiettivi. Sei sicuro?</p> + +<p>Diamo un'occhiata al nostro esempio. Abbiamo cinque obiettivi collegati alla musica, uno legato alla vita personale (trovare il tuo altro significativo) e le foto di gatti completamente indipendenti. È ragionevole creare un singolo sito Web per coprire tutti questi obiettivi? È addirittura necessario? Dopotutto, decine di servizi web esistenti potrebbero portarti ai tuoi obiettivi senza creare un nuovo sito web.</p> + +<p>Trovare una ragazza / ragazzo è il primo caso in cui ha più senso usare le risorse esistenti piuttosto che costruire un sito completamente nuovo. Perché? Perché dedicheremo più tempo alla costruzione e alla manutenzione del sito Web piuttosto che alla ricerca di una ragazza / ragazzo. Poiché il nostro obiettivo è ciò che conta di più, dovremmo spendere le nostre energie per sfruttare gli strumenti esistenti anziché iniziare da zero. Ancora una volta, ci sono così tanti servizi web già disponibili per mostrare le foto che non vale la pena creare un nuovo sito solo per spargere la voce su quanto siano carini i nostri gatti.</p> + +<p>Gli altri cinque obiettivi sono tutti collegati alla musica. Esistono, naturalmente, molti servizi Web in grado di gestire questi obiettivi, ma in questo caso ha senso creare un sito Web dedicato. Tale sito Web è il modo migliore per <em> aggregare </em> tutte le cose che vogliamo pubblicare in un unico posto (buono per gli obiettivi 3, 5 e 6) e promuovere <em> interazione </em> tra di noi e il pubblico (buono per gli obiettivi 2 e 4). In breve, poiché questi obiettivi ruotano tutti intorno allo stesso argomento, avere tutto in un unico posto ci aiuterà a raggiungere i nostri obiettivi e aiuterà i nostri follower a connettersi con noi.</p> + +<p>In che modo un sito Web può aiutarmi a raggiungere i miei obiettivi? Rispondendo a ciò, troverai il modo migliore per raggiungere i tuoi obiettivi e salvarti da uno sforzo sprecato.</p> + +<h3 id="Cosa_bisogna_fare_e_in_quale_ordine_per_raggiungere_i_miei_obiettivi">Cosa bisogna fare e in quale ordine per raggiungere i miei obiettivi?</h3> + +<p>Ora che sai cosa vuoi realizzare, è tempo di trasformare quegli obiettivi in passaggi attuabili. Come nota a margine, i tuoi obiettivi non sono necessariamente fissati nella pietra. Si evolvono nel tempo anche nel corso del progetto, soprattutto se si incontrano ostacoli imprevisti o si cambia idea.</p> + +<p>Invece di fare una lunga spiegazione, torniamo al nostro esempio con questa tabella:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Obiettivi</th> + <th scope="col">Cose da fare</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">Consenti alle persone di ascoltare la tua musica</td> + <td> + <ol> + <li>Registra musica</li> + <li>Prepara alcuni file audio utilizzabili online (potresti farlo con i servizi web esistenti?) + </li> + <li>Consenti alle persone di accedere alla tua musica su alcune parti del tuo sito web</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Parla della tua musica</td> + <td> + <ol> + <li>Scrivi alcuni articoli per iniziare la discussione</li> + <li>Definisci l'aspetto degli articoli</li> + <li>Pubblica tali articoli sul sito Web (come fare?)</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Incontra altri musicisti</td> + <td> + <ol> + <li>Fornire modi in cui le persone possono contattarti (e-mail? Facebook? Telefono? Posta?) + </li> + <li>Definisci come le persone troveranno quei canali di contatto dal tuo sito web</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Vendi chicche</td> + <td> + <ol> + <li>Crea le chicche</li> + <li>Conserva le chicche</li> + <li>Trova un modo per gestire la spedizione</li> + <li>Trova un modo per gestire il pagamento</li> + <li>Crea un meccanismo sul tuo sito affinché le persone possano effettuare ordini</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Insegna musica attraverso i video</td> + <td> + <ol> + <li>Registra lezioni video</li> + <li>Prepara i file video visualizzabili online (Ancora, potresti farlo con i servizi web esistenti?) + </li> + <li>Consenti alle persone di accedere ai tuoi video su alcune parti del tuo sito web</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>Due cose da notare. Innanzitutto, alcuni di questi articoli non sono correlati al web (ad esempio, registrare musica, scrivere articoli). Spesso queste attività offline sono ancora più importanti del lato web del progetto. Nelle vendite, ad esempio, è molto più importante e richiede molto tempo gestire la fornitura, il pagamento e la spedizione piuttosto che costruire un sito Web in cui le persone possono effettuare ordini.</p> + +<p>In secondo luogo, la definizione di passaggi attuabili porta a nuove domande a cui dovrai rispondere. Di solito ci sono più domande di quanto pensassimo inizialmente. (Ad esempio, dovrei imparare a fare tutto questo da solo, chiedere a qualcuno di farlo per me o utilizzare servizi di terze parti?)</p> + +<h2 id="Conclusione">Conclusione</h2> + +<p>Come puoi vedere, la semplice idea "Voglio creare un sito Web" genera un lungo elenco di cose da fare, che si allunga solo quando ci pensi. Presto potrebbe sembrare travolgente, ma non fatevi prendere dal panico. Non è necessario rispondere a tutte le domande e non è necessario fare tutto sul proprio elenco. Ciò che conta è avere una visione di ciò che vuoi e come arrivarci. Una volta che hai quella visione chiara, devi decidere come e quando farlo. Suddividi i compiti più grandi in piccoli passaggi attuabili. E quei piccoli passi si sommeranno a grandi risultati.</p> + +<p>Da questo articolo, dovresti ora essere in grado di fare un piano approssimativo per la creazione di un sito Web. Un prossimo passo potrebbe essere quello di leggere <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work"> come funziona Internet</a>.</p> diff --git a/files/it/learn/css/building_blocks/index.html b/files/it/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..ef61b8c18b --- /dev/null +++ b/files/it/learn/css/building_blocks/index.html @@ -0,0 +1,89 @@ +--- +title: La costruzione del CSS +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - Principiante + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Questo modulo di apprendimento è il seguito di <a href="/en-US/docs/Learn/CSS/First_steps">Primi passi con il CSS</a>: dopo aver familiarizzato con il linguaggio e la sua sintassi e dopo aver acquisito una minima esperienza di utilizzo, è ora di andare più a fondo. In questo modulo verranno trattati: funzionamento a cascata ed ereditarietà, tutti i tipi di selettori disponibili, unità di misura, dimensioni, stilizzazione di sfondi e contorni, debug e molto altro.</p> + +<p class="summary">Lo scopo del modulo è fornire gli strumenti per sviluppare CSS efficaci e le basi teoriche essenziali, prima di procedere verso discipline più specifiche come la <a href="/it/docs/Learn/CSS/Styling_text">stilizzazione del testo</a> e il <a href="/it/docs/Learn/CSS/CSS_layout">layout CSS</a>.</p> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Per affrontare questo modulo è necessario:</p> + +<ol> + <li>Familiarità con l'utilizzo di computer e navigazione passiva sul Web (ovvero consultare semplicemente i contenuti, senza manipolarli).</li> + <li>Un ambiente di lavoro base come specificato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a> e le conoscenze necessarie a creare e gestire file, come specificato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a>.</li> + <li>Una minima familiarità con l'HTML, come trattato nel modulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione all'HTML</a>.</li> + <li>Comprensione delle basi del CSS come trattato nel modulo <a href="/en-US/docs/Learn/CSS/First_steps">Primi passi con il CSS</a>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guide">Guide</h2> + +<p>Questo modulo contiene i seguenti articoli, che coprono le basi del linguaggio CSS. Lungo il percorso sono previsti vari esercizi per verificare la comprensione dell'argomento.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade ed ereditarietà</a></dt> + <dd>L'obiettivo di questa lezione è sviluppare la comprensione di alcuni dei concetti fondamentali del CSS (il <em>cascade</em>, la specificità e l'ereditarietà) che regolano l'applicazione del CSS all'HTML e la risoluzione dei conflitti.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selettori CSS</a></dt> + <dd>Esiste una grande varietà di selettori CSS, che permettono di selezionare con estrema precisione gli elementi da stilizzare. In questo articolo e nelle sue sotto-sezioni osservando come funzionano nel dettaglio le differenti tipologie. Le sotto-sezioni sono le seguenti: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tipo, classi, e selettori ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selettori di attributi</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classi e pseudo-elementi</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinatori</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Il modello a contenitori CSS</a></dt> + <dd>Ogni elemento CSS è racchiuso in un contenitore. Comprendere il funzionamento dei contenitori è fondamentale per creare layout con il CSS o allineare fra loro gli elementi. In questa lezione studieremo il <em>modello a contenitori</em> del CSS, una premessa necessaria per acquisire dimestichezza con il loro funzionamento e relativa terminologia prima di passare a configurazioni di layout più complesse.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Sfondi e contorni</a></dt> + <dd>In questa lezione accenneremo alle potenzialità creative del CSS mediante la stilizzazione di sfondi e contorni. Affronteremo numerose delle domande più frequenti sul CSS come aggiungere gradienti, immagini di sfondo e angoli arrotondati.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestire direzioni di testo differenti</a></dt> + <dd>Recentemente il CSS si è evoluto per supportare meglio differenti direzioni del contenuto, sia quella da destra verso sinistra che quella dall'alto verso il basso (come il giapponese). Queste differenti direzioni sono chiamate <strong>writing modes</strong>, cioè modalità di scrittura. Introduciamo l'argomento perché più avanti, quando inizieremo a lavorare con i layout, sarà utile capire le modalità di scrittura.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflow dei contenuti</a></dt> + <dd>In questa lezione vedremo un altro importante concetto nel CSS: l'<strong>overflow</strong>. L'overflow si verifica quando il contenuto è troppo per essere adeguatamente racchiuso in un contenitore. In questa guida impareremo di cosa si tratta e come gestirlo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valori e unità CSS</a></dt> + <dd>Ogni proprietà usata nel CSS ha un valore o un insieme di valori consentiti per quella proprietà. In questa lezione affronteremo i valori e le unità più diffusi.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Ridimensionare gli elementi nel CSS</a></dt> + <dd>Nelle precedenti lezioni abbiamo incontrato diversi metodi per ridimensionare elementi in una pagina web utilizzando il CSS. È importante essere in grado di calcolare la dimensione dei diversi elementi nel proprio concetto grafico. In questa lezione riassumeremo i vari metodi per definire la grandezza di un elemento tramite il CSS e alcuni termini riguardo le grandezze che potranno esserti d'aiuto in futuro.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Immagini, contenuti multimediali e moduli</a></dt> + <dd>In questa lezione vedremo come alcuni elementi speciali vengono gestiti nel CSS. Gli elementi di immagini, altri contenuti multimediali e moduli presentano leggere differenze in termini di possibilità di stilizzazione in contenitori regolari. Sapere cosa sia possibile e cosa no può evitare errori frustranti. In questa lezione evidenzieremo le conoscenze più importanti che ci serviranno.</dd> + <dt><a href="/it/docs/Learn/CSS/Building_blocks/Styling_tables">Stili e tabelle</a></dt> + <dd>Stilizzare una tabella HTML non è il lavoro più entusiasmante al mondo, ma a volte tocca a farlo. Questo articolo fornisce una guida per rendere le tabelle HTML graficamente gradevoli, presentando anche tecniche di stilizzazione specifiche.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Fare il debug in CSS</a></dt> + <dd>Un problema comune nello sviluppo del CSS è quando il codice presenta comportamenti imprevisti. Questo articolo fornisce una traccia per compiere il debug di un problema con il CSS e mostra come impiegare i DevTools (gli strumenti per sviluppatore incorporati in tutti i browser moderni) per individuare le anomalie.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizzare il CSS</a></dt> + <dd>Quando si inizia a lavorare su fogli di stile e progetti sempre più corposi, ci si rende conto che mantenere un file CSS di grandi dimensioni può essere impegnativo. In questo articolo affronteremo velocemente alcune buone pratiche per scrivere un foglio CSS facilmente gestibile e altre soluzioni escogitate dai vari sviluppatori per semplificare la gestione del codice.</dd> +</dl> + +<h2 id="Valutazioni">Valutazioni</h2> + +<p>Per chi desidera mettersi alla prova, le seguenti valutazioni sono realizzate appositamente per verificare la comprensione degli argomenti CSS affrontati nelle guide precedenti.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Comprensione delle basi di CSS</a></dt> + <dd>Questa valutazione verifica la comprensione della sintassi CSS di base, selettori, specificità, modelli di contenitori e altro.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Realizza una carta da lettere intestata</a></dt> + <dd>Per fare una buona prima impressione non c'è niente di meglio che scrivere una lettera su carta intestata ricercata. Per superare questa valutazione dovrai realizzare un modello di carta intestata online dalla grafica accattivante.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Un gran bel contenitore</a></dt> + <dd>In questa valutazione faremo pratica con la stilizzazione di sfondi e contorni per realizzare un contenitore che non passa inosservato.</dd> +</dl> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Effetti avanzati di stilizzazione</a></dt> + <dd>Questo articolo è una sorta di scatola dei trucchi: fornisce un'introduzione ad alcune interessanti funzionalità avanzate di stilizzazione come ombre, modalità di fusione e filtri.</dd> +</dl> diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html new file mode 100644 index 0000000000..cf0f6662cf --- /dev/null +++ b/files/it/learn/css/building_blocks/selettori/index.html @@ -0,0 +1,231 @@ +--- +title: selettori CSS +slug: Learn/CSS/Building_blocks/Selettori +tags: + - Attributo + - CSS + - Classe + - Impara + - Principiante + - Pseudo + - Selettori +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscenze informatiche di base, <a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">istallazione di software fondamentali</a>, conoscenze base di <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">gestione dei file</a>, basi di HTML (vedi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione ad HTML</a>) ed avere un'idea di base di come funzionano i CDD (vedi <a href="/en-US/docs/Learn/CSS/First_steps">primi passi con i CSS</a>).</td> + </tr> + <tr> + <th scope="row">Obbiettivo:</th> + <td>Apprendere nel dettaglio il funzionamento dei selettori CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Cosé_un_selettore">Cos'é un selettore?</h2> + +<p>Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come <em>soggetto del selettore</em>.</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi <code>h1</code> oppure una classe come <code>.special</code>.</p> + +<p>Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a> (specifica sui selettori di livello 3), la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.</p> + +<h2 id="Liste_di_selettori">Liste di selettori</h2> + +<p>Nel caso in cui tu abbia piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un <code>h1</code> ed anche per la classe <code>.special</code>, potrei scriverlo nel seguente modo.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.</p> + +<p>Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore <code>h1</code> non presenta errori e la sua dichiarazione verrá eseguita correttamente.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>Tuttavia se combinati, né il selettore <code>h1</code> né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Tipi_di_selettori">Tipi di selettori</h2> + +<p>I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.</p> + +<h3 id="Selettori_di_tipo_classe_e_ID">Selettori di tipo, classe e ID</h3> + +<p>Questo gruppo include i selettori usati per gli elementi della pagina HTML come <code><h1></code>.</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>Include inoltre i selettori di classe:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>oppure di ID:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="Selettori_di_attributo">Selettori di attributo</h3> + +<p>Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Pseudo-classi_e_pseudo-elementi">Pseudo-classi e pseudo-elementi</h3> + +<p>Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe <code>:hover</code> seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, <code>::first-line</code> seleziona sempre la prima riga di testo di un elemento (un elemento <code><p></code> nell'esempio seguente), come se questa fosse messa dentro un blocco <code><span></code> e selezionata.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Combinatori">Combinatori</h3> + +<p>L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <code><article></code> utilizzando il combinatore (<code>></code>):</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Prossimo_passo">Prossimo passo</h2> + +<p>Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">selettori di tipo, classe e id</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Tabella_riassuntiva_dei_selettori">Tabella riassuntiva dei selettori</h2> + +<p>La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selettore</th> + <th scope="col">Esempio</th> + <th scope="col">Tutorial sui CSS</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Type_selectors">Selettore di tipo</a></td> + <td><code>h1 { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Selettore di tipo</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Selettore universale</a></td> + <td><code>* { }</code></td> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Selettore universale</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Class_selectors">Selettore di classe</a></td> + <td><code>.box { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Selettore di classe</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">Selettore di ID</a></td> + <td><code>#unique { }</code></td> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">Selettore di ID</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selettore di attributo</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selettore di attributo</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classi</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classi</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementi</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementi</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Combinatore di discendenza</a></td> + <td><code>article p</code></td> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Combinatore di discendenza</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">Combinatore di figli</a></td> + <td><code>article > p</code></td> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">Combinatore di figli</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Combinatore di fratelli adiacenti</a></td> + <td><code>h1 + p</code></td> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Combinatore di fratelli adiacenti</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Combinatore di fratelli generici</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Combinatore di fratelli generici</a></td> + </tr> + </tbody> +</table> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/it/learn/css/building_blocks/styling_tables/index.html b/files/it/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..990188c01c --- /dev/null +++ b/files/it/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,294 @@ +--- +title: Stili e tabelle +slug: Learn/CSS/Building_blocks/Styling_tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">Applicare stili a tabelle HTML non è il lavoro più stimolante che esista, ma di tanto in tanto va fatto. Questo articolo vi guiderà nel compito di rendere gradevoli le tabelle HTML, usando gli attributi spiegati in articoli precedenti.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Basi HTML (vedi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), tabelle HTML (vedi il modulo tabelle HTML (TBD)), e un'idea di come funzioni un CSS (studia <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Uso efficace degli stili su tabelle HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Una_tipica_tabella_HTML">Una tipica tabella HTML</h2> + +<p>Iniziamo a vedere una tipica tabella HTML. Beh, diciamo tipica — gli esempi di tabella contengono scarpe, meteo, dipendenti; rendiamo le cose più interessanti usando le più famose band punk del Regno Unito. Il codice quindi sarà questo:</p> + +<pre class="brush: html"><table> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... alcune righe rimosse per concisione + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>La tabella è ben formata, è facile applicarle stili, è accessibile, grazie all'uso di attributi come {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, ecc. Però non ha un bell'aspetto quando vista su schermo (vedila su <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>Ha un aspetto rozzo, poco leggibile e noioso. Dobbiamo usare un po' di CSS per rimediare.</p> + +<h2 id="Apprendere_attivamente_Diamo_stile_alla_tabella">Apprendere attivamente: Diamo stile alla tabella</h2> + +<p>In questa sezione di apprendimento attivo daremo stile insieme alla nostra tabella.</p> + +<ol> + <li>Per iniziare, fai una copia in locale del <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">codice di esempio</a>, scarica le immagini (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> e <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), e e metti i tre files in una directory di lavoro sul tuo computer.</li> + <li>Quindi, crea un nuovo file e salvalo col nome <code>style.css</code> nella stessa directory degli altri file.</li> + <li>Collega il file CSS all'interno del codice HTML scrivendo questa riga di HTML all'interno della sezione {{htmlelement("head")}}: + <pre class="brush: html"><link href="style.css" rel="stylesheet" type="text/css"></pre> + </li> +</ol> + +<h3 id="Spaziatura_e_layout">Spaziatura e layout</h3> + +<p>La prima cosa da fare è mettere ordine nella spaziatura/layout, visto che lo stile predefinito è davvero rozzo! Per ottenere questo risultato, mettiamo queste definizioni CSS al file <code>style.css</code>:</p> + +<pre class="brush: css">/* spaziatura */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p>Le definizioni più importanti da notare sono:</p> + +<ul> + <li>Impostare il valore di {{cssxref("table-layout")}} a <code>fixed</code> è una buona idea per le tabelle: ne renderà l'aspetto di default più prevedibile. Di norma, le colonne adattano la loro larghezza in base ai contenuti, il che può portare a strani risultati. Con <code>table-layout: fixed</code>, puoi dimensionare le colonne in base alla larghezza delle intestazioni, e far fluire i contenuti di conseguenza. Ecco perché selezionare le 4 intestazioni con <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Seleziona il figlio <em>n</em>esimo in una sequenza di elementi {{htmlelement("th")}}, dentro un elemento {{htmlelement("thead")}}") e ne impostarne la larghezza in percentuale. L'intera colonna avrà la larghezza dell'intestazione; e le colonne sono a posto. Chris Coyier parla in dettaglio di questa tecnica in <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> + <br> + A questo associamo un {{cssxref("width")}} al 100%, cioè la tabella riempie in larghezza il suo contenitore, in automatico (anche se ci vuole del lavoro per farcela stare su schermi molto stretti).</li> + <li>Impostare l'attributo {{cssxref("border-collapse")}} a <code>collapse</code> è ormai una buona pratica standard. Per default, se imposti i bordi alle caselle, avranno un spazio tra loro, come mostrato dall'immagine: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;"> Non è bellissimo da vedere (anche se magari è ciò che volevi). Con <code>border-collapse: collapse;</code> i bordi collassano diventando singoli, e l'aspetto migliora notevolmente: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>Abbiamo messo un {{cssxref("border")}} intorno alla tabella: <span class="tlid-translation translation" lang="it"><span title="">serve perché poi metteremo dei bordi attorno a intestazione e footer della tabella. L'aspetto sarebbe strano e sconnesso senza un bordo intorno</span> <span title="">alla tabella e avremmo anche spazi vuoti</span></span>.</li> + <li>Impostiamo anche del {{cssxref("padding")}} nei {{htmlelement("th")}} e nei {{htmlelement("td")}} — questo darà un respiro maggiore ai dati rendendo la tabella più leggibile.</li> +</ul> + +<p>A uesto punto, la nostra tabella ha già un aspetto molto migliore:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Semplici_concetti_tipografici">Semplici concetti tipografici</h3> + +<p>Ora diamo una sistemata al contenuto.</p> + +<p>Innanzi tutto, abbiamo trovato un font su <a href="https://www.google.com/fonts">Google Fonts</a> intonato alle nostre band punk. Puoi andare a sceglierne uno diverso se vuoi; devi solo sostituire l'elemento {{htmlelement("link")}} e la {{cssxref("font-family")}} con quelli che Google Fonts ti fornirà.</p> + +<p>Prima, inserisci il seguente elemento {{htmlelement("link")}} nella sezione head, prima dell'altro elemento <code><link></code>:</p> + +<pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> + +<p>Ora aggiungi in testa al tuo file <code>style.css</code> i seguenti attributi CSS:</p> + +<pre class="brush: css">/* tipografia */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p><span class="tlid-translation translation" lang="it"><span title="">Non c'è nulla di specifico per tabelle;</span> <span title="">in generale impostiamo lo stile dei caratteri per rendere tutto di più facile lettura</span></span>:</p> + +<ul> + <li>We have set a global sans-serif font stack; this is purely a stylistic choice. We've also set our custom font on the headings inside the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements, for a nice grungy, punky look.</li> + <li>We've set some {{cssxref("letter-spacing")}} on the headings and cells, as we feel it aids readability. Again, mostly a stylistic choice.</li> + <li>We've center-aligned the text in the table cells inside the {{htmlelement("tbody")}} so that they line up with the headings. By default, cells are given a {{cssxref("text-align")}} value of <code>left</code>, and headings are given a value of <code>center</code>, but generally it looks better to have the alignments set the same for both. The default bold weight on the heading fonts is enough to differentiate their look.</li> + <li>We've right-aligned the heading inside the {{htmlelement("tfoot")}} so that it is visually associated better with its data point.</li> +</ul> + +<p>The result looks a bit neater:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Grafica_e_colori">Grafica e colori</h3> + +<p>Now onto graphics and colors! Because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. Don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful.</p> + +<p>Start by adding the following CSS to your style.css file, again at the bottom:</p> + +<pre class="brush: css">thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>Again, there's nothing specific to tables here, but it is worthwhile to note a few things.</p> + +<p>We've added a {{cssxref("background-image")}} to the {{htmlelement("thead")}} and {{htmlelement("tfoot")}}, and changed the {{cssxref("color")}} of all the text inside the header and footer to white (and given it a {{cssxref("text-shadow")}}) so it is readable. You should always make sure your text contrasts well with your background, so it is readable.</p> + +<p>We've also added a linear gradient to the {{htmlelement("th")}} and {{htmlelement("td")}} elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. It is useful to have multiple nested elements available so you can layer styles on top of one another. Yes, we could have put both the background image and the linear gradient on the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.</p> + +<h4 id="Zebra_striping">Zebra striping</h4> + +<p>We wanted to dedicate a separate section to showing you how to implement <strong>zebra stripes</strong> — alternating rows of color that make the different data rows in your table easier to parse and read. Add the following CSS to the bottom of your <code>style.css</code> file:</p> + +<pre class="brush: css">tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>Earlier on you saw the {{cssxref(":nth-child")}} selector being used to select specific child elements. It can also be given a formula as a parameter, so it will select a sequence of elements. The formula <code>2n-1</code> would select all the odd numbered children (1, 3, 5, etc.) and the formula <code>2n</code> would select all the even numbered children (2, 4, 6, etc.) We've used the <code>odd</code> and <code>even</code> keywords in our code, which do exactly the same things as the aforementioned formulae. In this case we are giving the odd and even rows different (lurid) colors.</li> + <li>We've also added a repeating background tile to all the body rows, which is just a bit of noise (a semi-transparent <code>.png</code> with a bit of visual distortion on it) to provide some texture.</li> + <li>Lastly, we've given the entire table a solid background color so that browsers that don't support the <code>:nth-child</code> selector still have a background for their body rows.</li> +</ul> + +<p>This color explosion results in the following look:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>Now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.</p> + +<h3 id="Stile_del_titolo">Stile del titolo</h3> + +<p>There is one last thing to do with our table — style the caption. To do this, add the following to the bottom of your <code>style.css</code> file:</p> + +<pre class="brush: css">caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>There is nothing remarkable here, except for the {{cssxref("caption-side")}} property, which has been given a value of <code>bottom</code>. This causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="Apprendere_attivamente_Uno_stile_per_la_tua_tabella">Apprendere attivamente: Uno stile per la tua tabella</h2> + +<p>At this point, we'd like you to take our example table HTML (or use some of your own!) and style it to make something considerably better designed and less garish than our table.</p> + +<h2 id="Trucchi_per_gli_stili_delle_tabelle">Trucchi per gli stili delle tabelle</h2> + +<p>Before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above:</p> + +<ul> + <li>Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.</li> + <li>Use {{cssxref("table-layout")}}<code>: fixed</code> to create a more predictable table layout that allows you to easily set column widths by setting {{cssxref("width")}} on their headings ({{htmlelement("th")}}).</li> + <li>Use {{cssxref("border-collapse")}}<code>: collapse</code> to make table elements borders collapse into each other, producing a neater and easier to control look.</li> + <li>Use {{htmlelement("thead")}}, {{htmlelement("tbody")}}, and {{htmlelement("tfoot")}} to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.</li> + <li>Use zebra striping to make alternative rows easier to read.</li> + <li>Use {{cssxref("text-align")}} to line up your {{htmlelement("th")}} and {{htmlelement("td")}} text, to make things neater and easier to follow.</li> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.)</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></li> +</ul> diff --git a/files/it/learn/css/css_layout/flexbox/index.html b/files/it/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..cc88b74d61 --- /dev/null +++ b/files/it/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,344 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<div><a href="/it/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox </a>è un metodo di layout monodimensionale per disporre i componenti in righe oppure in colonne. Quando l'area che li contiene aumenta, i componenti si espandono per colmarne lo spazio, quando invece si restringe anche i componenti si restringono.<br> +Questo articolo comprende i concetti fondamentali.</div> + +<div></div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Le basi di HTML (leggi <a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione a HTML</a>) e nozioni sul funzionamento del CSS (leggi <a href="/en-US/docs/Learn/CSS/First_steps">Introduzione a CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Apprendere l'utilizzo di Flexbox per impostare il layout delle pagine web.</td> + </tr> + </tbody> +</table> + +<h2 id="Perchè_Flexbox">Perchè Flexbox?</h2> + +<p>Per molto tempo, le uniche tecniche affidabili per creare layout CSS compatibili con tutti i browser utilizzavano <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">elementi float</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">posizionamento</a>. Funzionavano a sufficienza, ma erano per alcuni aspetti limitati e frustranti.</p> + +<p>Per esempio con quelle tecniche era difficile o del tutto impossibile definire in maniera flessibile e vantaggiosa le seguenti impostazioni:</p> + +<ul> + <li>Centrare verticalmente un blocco di contenuti all'interno del proprio contenitore.</li> + <li>Fare in modo che i figli di un contenitore occupino lo stesso spazio in larghezza o altezza indipendentemente dalle dimensioni del contenitore stesso.</li> + <li>Fare in modo che in un layout multicolonna, le colonne siano ugualmente alte anche se i loro contenuti differiscono per lunghezza.</li> +</ul> + +<p>Nelle sezioni seguenti apprenderemo come flexbox faciliti notevolmente questi compiti. Iniziamo!</p> + +<h2 id="Introduzione_a_un_semplice_esempio">Introduzione a un semplice esempio</h2> + +<p>Questo articolo presenta una serie di esercizi per aiutare a comprendere il funzionamento di flexbox. Per cominciare copiamo in locale il file di partenza <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> presente in github. Carichiamolo con un browser moderno, ad esempio Firefox o Chrome e facciamo attenzione al codice nell'editor. É possibile in alternativa visionarlo attraverso la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">versione live</a>.</p> + +<p><img alt="Image showing the starting point of Flexbox tutorial" src="https://i.imgur.com/Bih741v.png" style="height: 670px; width: 1310px;"></p> + +<p>Come vediamo la pagina è formata da un {{htmlelement("header")}} contenente il titolo principale, poi un elemento {{htmlelement("section")}} che contiene tre {{htmlelement("article")}}. Partiamo da questa situazione per creare un layout a tre colonne abbastanza comune.</p> + +<h2 id="Individuare_gli_elementi_da_impostare_come_box_flessibili">Individuare gli elementi da impostare come box flessibili</h2> + +<p>Per cominciare occorre scegliere il gruppo di elementi che devono apparire come box flessibili; per farlo occorre impostare un valore particolare della proprietà {{cssxref("display")}} del loro elemento padre. In questo caso specifico desideriamo sistemare gli elementi {{htmlelement("article")}}, perciò agiamo sul loro contenitore {{htmlelement("section")}}:</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>Questa impostazione trasforma <section> in un <strong>contenitore flex</strong> e gli elementi figli in <strong>componenti flex</strong>. Questo è l'aspetto che otteniamo:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>Proprio così: con questa semplice regola abbiamo già ottenuto tutto ciò che volevamo! Il layout diventa multicolonna e le colonne che lo formano sono della medesima larghezza e lunghezza. Tutto ciò avviene grazie ai componenti flex, cioè i figli del contenitore impostato come flex, che, grazie a valori predefiniti, risolvono automaticamente problemi tipici come questo.</p> + +<p>Ripassiamo cosa è avvenuto: l'elemento il cui valore di {{cssxref("display")}} è <code>flex</code> si comporta come un elemento blocco all'interno della pagina, ma i suoi figli vengono disposti come componenti flex. Nella prossima sezione capiremo meglio che cosa significa. Notiamo che in alternativa possiamo usare il valore <code>inline-flex</code> per <code>display</code> cosicché gli elementi figlio diventano comunque componenti flex, ma il contenitore si comporta come un elemento in linea.</p> + +<h2 id="Il_modello_flex">Il modello flex</h2> + +<p>In qualità di componenti flex, gli elementi si dispongono lungo due assi:</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li>L’<strong>asse principale</strong> (main axis) è l'asse che traccia la direzione lungo la quale i componenti si dispongono, corrispondente in senso orizzontale alle righe oppure in senso verticale alle colonne. Definiamo l'inizio e la fine di questo asse <strong>inizio dell'asse principale</strong> (main start) e <strong>termine dell'asse principale</strong> (main end).</li> + <li>L’<strong>asse traverso</strong> (cross axis) è l'asse perpendicolare alla direzione dei componenti flex. Definiamo l'inizio e la fine di questo asse <strong>inizio dell'asse traverso</strong> (cross start) e <strong>termine dell'asse traverso</strong> (cross end).</li> + <li>L'elemento su cui viene impostata la regola <code>display: flex</code>, che nel nostro esempio è {{htmlelement("section")}} è chiamato <strong>contenitore flex</strong> (flex container).</li> + <li>Gli elementi disposti come box flessibili all'interno del contenitore flex vengono chiamati <strong>componenti flex</strong> (flex items), che nel nostro caso sono gli elementi {{htmlelement("article")}}.</li> +</ul> + +<p>Si tengano a mente queste definizioni durante le sezioni successive. In caso di confusione con i termini potete comunque tornare a rileggere questa sezione.</p> + +<h2 id="Colonne_o_righe">Colonne o righe?</h2> + +<p>Flexbox offre una proprietà chiamata flex-direction {{cssxref("flex-direction")}} che indica quale direzione deve seguire l'asse principale, ovvero come vengono disposti i contenuti flexbox;il valore predefinito è <code>row</code>, in modo che i contenuti si schierino in riga secondo il verso della lingua preimpostata dal browser, che per le quelle occidentali è da sinistra a destra.</p> + +<p>Proviamo ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:</p> + +<pre class="brush: css notranslate">flex-direction: column;</pre> + +<p>Come vediamo i componenti tornano a schierarsi in colonna, come in un il flusso normale senza aggiungere CSS. Cancelliamo pure questa dichiarazione dall'esercizio, prima di continuare.</p> + +<div class="note"> +<p><strong>Nota</strong>: Potremmo anche invertire la disposizione dei componenti flex utilizzando i valori <code>row-reverse</code> o <code>column-reverse</code>. Sono da sperimentare!</p> +</div> + +<h2 id="Effettuare_il_Wrapping">Effettuare il Wrapping</h2> + +<p>Il problema che sorge nel layout quando la larghezza o l'altezza vengono esplicitate è che il gruppo dei contenuti flexbox potrebbe eccedere il limite del contenitore, guastando il layout. Diamo un'occhiata all'esempio <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>,di cui viene fornita la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">visione live</a>. Per eseguire le procedure mostrate da questo punto in poi, salvate una copia del file in locale.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>Come vediamo i contenuti figli eccedono effettivamente il limite del loro contenitore. Una possibile soluzione consiste nell'aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:</p> + +<pre class="brush: css notranslate">flex-wrap: wrap;</pre> + +<p>Proviamo anche ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("article")}}:</p> + +<pre class="brush: css notranslate">flex: 200px;</pre> + +<p>Ricaricando possiamo notare il miglioramento che abbiamo ottenuto grazie queste modifiche.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">Adesso possiamo notare che si sono formate un certo numero di righe, ovviamente tante quante ne servono per tutti i contenuti flexbox: quando un contenuto eccede i limiti, scala alla riga successiva. L'impostazione <code>flex: 200px</code> dichiarata per gli articoli significa che ognuno di essi occuperà almeno 200px; questa proprietà verrà discussa con maggior dettaglio più avanti nell'articolo. Notiamo anche che ciascuno degli ultimi contenuti che occupano l'ultima riga è molto più largo in modo da riempirla completamente.</p> + +<p>Possiamo sperimentare ancora: innanzitutto assegnare alla proprietà {{cssxref("flex-direction")}} il valore <code>row-reverse</code>, così da ottenere un layout con numerose righe come il precedente in cui però i contenuti si schierano a partire dall'angolo opposto della finestra del browser e fluiscono in maniera inversa.</p> + +<h2 id="La_forma_contratta_flex-flow">La forma contratta flex-flow</h2> + +<p>Occorre notare a questo punto che esiste una forma contratta, {{cssxref("flex-flow")}, per le proprietà {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}} — }. É possibile per esempio sostituire</p> + +<pre class="brush: css notranslate">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>con</p> + +<pre class="brush: css notranslate">flex-flow: row wrap;</pre> + +<h2 id="Dimensionamento_flessibile_dei_componenti_flex">Dimensionamento flessibile dei componenti flex</h2> + +<p>Ora torniamo al primo esempio per capire come determinare la proporzione che occupa ogni componente flex nello spazio rispetto ai componenti suoi pari. Riapriamo il file locale <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, oppure, come punto di partenza, prendiamo il nuovo file <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> di cui viene fornita anche la<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html"> versione live</a>.</p> + +<p>Cominciamo aggiungendo la seguente regola al termine del nostro CSS:</p> + +<pre class="brush: css notranslate">article { + flex: 1; +}</pre> + +<p>Si indica in questo modo un valore proporzionale, privo di unità di misura, che determina lo spazio che occupa ogni componente flex rispetto agli altri. In questo caso tutti gli elementi {{htmlelement("article")}} hanno valore 1, il che significa, al netto di spaziature interne (padding) ed esterne (margin), che lo spazio verrà equamente ripartito tra tutti i componenti. Questo è un valore relativo a tutti i componenti flex del medesimo gruppo, perciò, se invece di 1 viene scritto un altro valore, 400000 ad esempio, otteniamo lo stesso risultato.</p> + +<p>Di seguito scriviamo questa regola:</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>Si noti, dopo aver ricaricando la pagina, che il terzo componente {{htmlelement("article")}} riempie il doppio dello spazio occupato da ciascuno degli altri due. Lo spazio totale è ora diviso in quattro, cioè una spaziatura per il primo elemento, una per il secondo e due per il terzo (1+1+2=4), quindi il primo e il secondo occupano un quarto (1/4) di spazio ciascuno mentre il terzo ne occupa due quarti (2/4) ovvero la metà.</p> + +<p>Si può anche specificare una misura reale minima al di sotto del quale non è possibile andare. Correggiamo le regole degli articoli in questo modo:</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>Con queste regole affermiamo fondamentalmente quanto segue: "Ogni componente flex occupa almeno 200px nello spazio a disposizione, mentre lo spazio che rimane viene occupato rispettando le unità proporzionali." Ricaricando la pagina possiamo notare la differenza nella ripartizione delle spaziature.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>La potenza di flexbox risiede nella sua flessibilità ovvero nella responsività con cui gestisce il layout: se ridimensioniamo la finestra del browser oppure inseriamo un nuovo elemento {{htmlelement("article")}} il layout continuerà a funzionare bene.</p> + +<h2 id="flex_forma_contratta_al_posto_della_forma_estesa">flex: forma contratta al posto della forma estesa</h2> + +<p>La proprietà {{cssxref("flex")}} rappresenta la forma contratta delle seguenti tre proprietà::</p> + +<ul> + <li>la proporzione, priva di unità di misura reale, di cui abbiamo già discusso, che può essere individualmente espressa utilizzando la forma estesa {{cssxref("flex-grow")}}.</li> + <li>Una seconda unità proporzionale, {{cssxref("flex-shrink")}} che gioca un ruolo importante nel momento in cui i componenti flex stanno per oltrepassare i limiti del contenitore, specificando la misura in cui questi componenti possono restringersi in modo da non sbordare. Questa però è una proprietà piuttosto avanzata di flexbox che eviteremo di approfondire in questo articolo.</li> + <li>Una spaziatura reale minima di cui abbiamo già parlato, che può essere individualmente espressa utilizzando la forma estesa flex-basis {{cssxref("flex-basis")}}.</li> +</ul> + +<p>È consigliabile non utilizzare le forme estese della proprietà flex, a meno che non si possa fare altrimenti, come per esempio sostituire un valore stabilito in precedenza, perché costringono a scrivere una maggior quantità di codice che può risultare in qualche modo confusionario.</p> + +<h2 id="Allineamento_orizzontale_e_verticale">Allineamento orizzontale e verticale</h2> + +<p>Con flexbox è possibile allineare i componenti flex lungo l'asse principale (main axis) o lungo l'asse traverso (cross axis). Facciamo alcune prove con la nuova pagina di esempio, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> di cui è presente anche la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">versione live</a> , per mostrare come creare una bottoniera, o barra degli strumenti, semplice e flessibile.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>Apriamo il codice in locale.</p> + +<p>Aggiungiamo al termine del file CSS la regola seguente:</p> + +<pre class="brush: css notranslate">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p> + +<p>Dopo aver ricaricato la pagina, i bottoni vengono ben centrati, sia orizzontalmente che verticalmente. Abbiamo ottenuto questo risultato operando con due nuove proprietà:</p> + +<p>Attraverso {{cssxref("align-items")}} controlliamo l'allineamento rispetto all'asse traverso (cross axis).</p> + +<ul> + <li>Il valore predefinito è <code>stretch</code>, che allunga o comprime tutti i componenti flex affinché riempiano lo spazio del loro contenitore lungo l’asse traverso (cross axis). In un contenitore che non ha una misura fissa lungo l’asse traverso, tutti quanti suoi componenti assumono la lunghezza del maggiore fra di loro, perciò nel primo esempio dell'articolo tutti i componenti risultano della stessa altezza senza doverlo specificare.</li> + <li>In questo esempio viene invece specificato il valore <code>center</code>, per cui ogni componente si dimensiona in funzione del contenuto che possiede, in base a questa dimensione viene quindi centrato lungo l’asse traverso. Questa è la ragione per cui, in questo esempio, i bottoni che sono centrati in verticale.</li> + <li>Altri valori disponibili sono <code>flex-start</code> e <code>flex-end</code>, che allineano i componenti rispettivamente all’inizio o al temine dell’asse traverso. Per i dettagli vai {{cssxref("align-items")}}.</li> +</ul> + +<p>É possibile sostituire l'impostazione data da align-items {{cssxref("align-items")}} , utilizzando la proprietà {{cssxref("align-self")}} di ogni singolo componente figlio. Ad esempio se proviamo ad aggiungere la seguente regola:</p> + +<pre class="brush: css notranslate">button:first-child { + align-self: flex-end; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p> + +<p>Dopo aver verificato l’effetto, possiamo cancellare questa regola per ritornare alla situazione precedente.</p> + +<p>Attraverso {{cssxref("justify-content")}} controlliamo il tipo di schieramento dei componenti flex lungo l'asse principale (main axis).</p> + +<ul> + <li>Il valore predefinito è <code>flex-start</code>, per cui il gruppo dei componenti si posiziona all'inizio dell'asse principale.</li> + <li>Con <code>flex-end</code>, il gruppo si posiziona al termine.</li> + <li>Con <code>center </code>o altrimenti <code>justify-content</code>, l'allineamento parte dal centro dell'asse principale.</li> + <li>Con <code>space-around</code>, che è il valore utilizzato nell'esempio, i componenti si distribuiscono equamente lungo l'asse principale; inoltre viene creato un margine all'inizio e al termine dell'asse.</li> + <li>Con <code>space-between</code> impostiamo una situazione molto simile a <code>space-around</code>, eccettuati i margini alle estremità che non vengono creati.</li> +</ul> + +<p>É consigliabile sperimentare le proprietà con valori suddetti prima di continuare a leggere l'articolo.</p> + +<h2 id="Ordinare_i_componenti_flex">Ordinare i componenti flex</h2> + +<p>Con flexbox è possibile cambiare l'ordine dei componenti senza intervenire manualmente nel sorgente HTML. Questa opportunità non esisteva con le metodologie di layout precedenti.</p> + +<p>Proviamo ad aggiungere al CSS una nuova semplice regola:</p> + +<pre class="brush: css notranslate">button:first-child { + order: 1; +}</pre> + +<p>Una volta ricaricato notiamo che il bottone con label "Sorriso" si è spostato al termine dell'asse principale. Vediamo in dettaglio cosa è successo:</p> + +<ul> + <li>Il valore predefinito della proprietà {{cssxref("order")}} di tutti i componenti flex è 0.</li> + <li>I componenti flex che hanno un valore di ordine maggiore compaiono dopo a quelli con un ordine minore.</li> + <li>I componenti flex che hanno lo stesso valore compaiono nello stesso ordine del sorgente HTML. Poniamo ad esempio di avere quattro componenti il cui corrispettivo valore è 2, 1, 1 e 0; il loro ordine di apparizione risulterà questo: all'inizio il quarto, poi il secondo, poi il terzo e al termine il primo.</li> + <li>Il terzo appare dopo il secondo perché hanno lo stesso valore order, dunque viene rispettata la successione con cui vengono definiti nel sorgente.</li> +</ul> + +<p>Se impostiamo un valore negativo di order, il componente compare prima di quelli con valore 0. Proviamo ora ad applicare la regola impostando per esempio l'ordine del bottone "Imbarazzo":</p> + +<pre class="brush: css notranslate">button:last-child { + order: -1; +}</pre> + +<h2 id="Flex_box_annidati">Flex box annidati</h2> + +<p>Con flexbox possiamo creare layout piuttosto complessi; è del tutto lecito impostare un componente flex in modo che contenga a sua volta componenti annidati flex che vengono visualizzati come flex box. Diamo un'occhiata a <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">see it live also</a>).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>La struttura HTML è abbastanza semplice, l'elemento {{htmlelement("section")}} contiene gli elementi figli {{htmlelement("article")}}. , il terzo di questi contiene tre {{htmlelement("div")}} :</p> + +<pre class="notranslate">section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>Ora guardiamo il codice che ha creato il layout.</p> + +<p>Innanzitutto, impostiamo i figli di {{htmlelement("section")}} affinché diventino flex box.</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>Quindi valorizziamo alcune proprietà flex all'interno degli stessi {{htmlelement("article")}}. Si noti in particolare la seconda regola, in cui si impone che il terzo elemento {{htmlelement("article")}} abbia a sua volta componenti innestati flex, i quali però devono essere incolonnati.</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>Quindi, impostiamo per il primo <div> la proprietà flex a 1 100px; in modo che abbia un'altezza reale di almeno 100px; la proprietà successiva stabilisce che anche gli elementi figli, cioè i (the {{htmlelement("button")}}, divengano componenti flex; tali elementi si dispongono in riga e allineati a partire dal centro dello spazio disponibile mantenendo i margini alle estremità, proprio come l'esempio del bottone visto in precedenza.</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { + flex:1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>Infine viene definita una regola per la dimensione dei bottoni., ma la parte più interessante è la proprietà flex che ha valore 1 auto; questa impostazione genera un comportamento peculiare che notiamo quando restringiamo la finestra del browser: i bottoni cercano di occupare il massimo dello spazio disponibile, si schierano uno accanto all'altro finché c'è spazio disponibile, e poi scalano alla riga seguente.</p> + +<pre class="brush: css notranslate">button { + flex: 1 auto; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="Compatibilità_tra_browser">Compatibilità tra browser</h2> + +<p>Gran parte delle ultime versioni dei browser supportano flexbox, cioè Firefox, Chrome, Opera, Microsoft Edge, IE 11, le versioni recenti di Android/iOS ecc. Occorre tuttavia considerare anche la presenza delle versioni antiquate dei browser che non supportano flexbox oppure lo fanno solo parzialmente.</p> + +<p>Il problema non incide granché quando ne studiamo e ne proviamo le funzionalità, tuttavia quando si cerca di utilizzare flexbox per creare un sito web reale dobbiamo controllare e assicurarci che l'esperienza utente sia comunque accettabile in quanti più browser possibile.</p> + +<p>Applicare flexbox è un po' più complicato di altre funzionalità CSS. Se per esempio il browser non supporta l'ombreggiatura (drop shadow) è facile che l'usabilità del sito rimanga comunque valida, se invece manca il supporto a flexbox è probabile che il layout della pagina si disintegri rendendola inutilizzabile.</p> + +<p>Le strategie per ovviare ai problemi di compatibilità tra browser vengono affrontate nel modulo <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a>.</p> + +<h2 id="Metti_alla_prova_le_tue_capacità!">Metti alla prova le tue capacità!</h2> + +<p>Questo articolo è denso di informazioni, ma riesci a ricordare quelle più importanti?</p> + +<p>Prima di continuare possiamo verificare la nostra comprensione alla pagina <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p> + +<h2 id="Sommario">Sommario</h2> + +<p>In conclusione dell'articolo sulle basi di flexbox speriamo di aver suscitato interesse e un buon punto di partenza nel nostro percorso di apprendimento. Nel prossimo articolo ci occupiamo di un altro importante aspetto del layout CSS: le Griglie CSS.</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<div> +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> +</ul> +</div> diff --git a/files/it/learn/css/css_layout/index.html b/files/it/learn/css/css_layout/index.html new file mode 100644 index 0000000000..31a85170fa --- /dev/null +++ b/files/it/learn/css/css_layout/index.html @@ -0,0 +1,78 @@ +--- +title: Layout CSS +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">A questo punto abbiamo già visto i fondamenti di CSS, come assegnare uno stile a un testo e come modificare lo stile e l'impostazione dei riquadri nei quali risiede il contenuto. Ora impareremo come posizionare i riquadri rispetto all'area di visualizzazione e l'uno rispetto all'altro. Abbiamo già appreso i prerequisiti necessari per approfondire il layout CSS, analizzare le diverse impostazioni di display, i moderni strumenti di layout quali flexbox, griglia CSS, posizionamento e alcune tecniche legacy che potrebbe comunque tornare utile conoscere.</p> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Per affrontare questo modulo è necessario:</p> + +<ol> + <li>Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [<a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>].</li> + <li>Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].</li> + <li>Comprendere come assegnare uno stile ai riquadri [<a href="it/docs/Learn/CSS/Building_blocks">Styling boxes</a>].</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo <a href="http://jsbin.com/">JSBin</a> oppure <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guide">Guide</h2> + +<p>I seguenti articoli insegnano a utilizzare gli strumenti fondamentali di layout e le tecniche disponibili nel linguaggio CSS. Alla fine delle lezioni è previsto un test di valutazione per verificare la propria comprensione dei metodi di layout applicandoli a una pagina web.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduzione ai layout CSS [Introduction to CSS layout]</a></dt> + <dd>Questo articolo riassume alcune delle caratteristiche dei layout CSS già incontrate nei moduli precedenti (ad esempio i diversi valori di {{cssxref("display")}}) e introduce diversi concetti che affronteremo in questo modulo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flusso normale [Normal flow]</a></dt> + <dd>Gli elementi di una pagina web si dispongono secondo un <em>flusso normale</em>, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox [Flexbox]</a></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox [Flexbox]</a> è un metodo di layout monodimensionale per disporre gli elementi in righe e colonne. Gli elementi si espandono per riempire lo spazio extra e si contraggono per adattarsi a uno spazio più ridotto. Questo articolo ne spiega i concetti fondamentali. Dopo aver studiato la guida potrai testare le tue competenze su flexbox <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">[test your flexbox skills]</a> per accertarti di averlo compreso prima di passare all'argomento successivo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Griglie [Grids]</a></dt> + <dd>La Griglia layout CSS è un sistema bidimensionale di layout per il Web. Permette di disporre i contenuti in righe e colonne, inoltre offre diverse funzionalità per semplificare la costruzione di layout complessi. Questo articolo contiene tutte le informazioni necessarie per iniziare a costruire il layout della pagina, quindi mettere alla prova le proprie abilità sulla griglia <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">[test your grid skills]</a> prima di passare all'argomento successivo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elementi float [Floats]</a></dt> + <dd>Originariamente usata per inserire le immagini all'interno di blocchi di testo, la proprietà {{cssxref("float")}} è diventata uno dei più comuni strumenti per creare layout multicolonna nelle pagine web. Con la comparsa di Flexbox e Griglia è tornata alla sua finalità originale, come spiegato in questo articolo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posizionamento [Positioning]</a></dt> + <dd>Il posizionamento permette di isolare gli elementi dal normale flusso della pagina assegnando loro un comportamento diverso, ad esempio sovrapporsi uno sull'altro o mantenere sempre la stessa posizione all'interno dell'area di visualizzazione del browser. Questo articolo spiega i differenti valori di {{cssxref("position")}} e come utilizzarli.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Layout multicolonna [Multiple-column layout]</a></dt> + <dd>Le specifiche del layout multicolonna offrono un metodo per strutturare il contenuto in colonne come sulla pagina di un quotidiano. L'articolo spiega come sfruttare questa caratteristica.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Design reattivo [Responsive design]</a></dt> + <dd>Con la comparsa di dispositivi di varie dimensioni in grado di accedere al Web, è nato il concetto di web design reattivo (o RWD, dall'inglese Responsive Web Design): un insieme di procedure che permettono alle pagine web di modificare il proprio layout e aspetto per adattarsi a diverse larghezze, risoluzioni, ecc. Si tratta di un'idea che ha cambiato il modo di progettare il Web multi-dispositivo e questo articolo aiuta a capire le principali tecniche necessarie a padroneggiarlo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guida per principianti alle media query [Beginner's guide to media queries]</a></dt> + <dd>Le <strong>media query CSS</strong> danno modo di applicare i fogli di stile CSS solo quando il browser e le condizioni del dispositivo corrispondono alle regole specificate, ad esempio "l'area di visualizzazione è più larga di 480 pixel". Le media query sono un elemento fondamentale del web design reattivo, poiché non solo permettono di stabilire layout differenti a seconda della grandezza dell'area di visualizzazione, ma anche di rilevare altre condizioni dell'ambiente in cui un sito viene riprodotto, ad esempio se l'utente usa un touchscreen o un mouse. In questa lezione impareremo innanzitutto la sintassi usata nelle media query e poi le applicheremo in un esempio reale che mostra come trasformare un design semplice in reattivo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">I metodi di layout legacy [Legacy layout methods]</a></dt> + <dd>Una caratteristica molto comune dei layout CSS sono i sistemi di griglia. Prima della Griglia Layout CSS cercavamo di realizzare l'impaginazione utilizzando elementi float o altre caratteristiche del layout. Il layout veniva concepito come un numero dato di colonne immaginarie (ad esempio 4, 6 o 12) all'interno delle quali inserire i contenuti. In questo articolo vedremo come funzionano questi metodi ormai obsoleti per capirne l'impostazione in caso dovessimo lavorare su progetti più datati.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporto per i browser più datati [Supporting older browsers]</a></dt> + <dd> + <p>In questo modulo consigliamo di usare Flexbox e Griglia quali principali metodi di progettazione. Va però considerato che alcuni utenti potrebbero visualizzare il nostro sito con browser più datati o che, semplicemente, non supportano i metodi da noi scelti. Bisogna sempre tenerne conto nel Web: man mano che nuove funzionalità vengono messe a punto, ciascun browser si concentra sull'implementarne alcune, a scapito di altre. Questo articolo spiega come usare le moderne tecniche del Web senza escludere chi utilizza tecnologia più datata.</p> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]</a></dt> + <dd>Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.</dd> +</dl> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Esempi pratici di posizionamento [Practical positioning examples]</a></dt> + <dd>Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.</dd> +</dl> diff --git a/files/it/learn/css/css_layout/introduction/index.html b/files/it/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..3a3238e551 --- /dev/null +++ b/files/it/learn/css/css_layout/introduction/index.html @@ -0,0 +1,711 @@ +--- +title: Introduzione al layout CSS +slug: Learn/CSS/CSS_layout/Introduction +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">Questo articolo riassume alcune caratteristiche del CSS viste nei moduli precedenti, come ad esempio i diversi valori di {{cssxref("display")}}, e presenta alcuni concetti che verranno trattati nel corso di questo modulo.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Le basi di HTML (leggi <a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione a HTML</a>) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].)</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Offrire una panoramica sulle tecniche di CSS usate nei layout delle pagine web. Ogni tecnica viene approfondita negli articoli a seguire.</td> + </tr> + </tbody> +</table> + +<p>Le tecniche di CSS applicate al layout di pagina permettono di controllare il posizionamento degli elementi contenuti nella pagina web relativamente alla loro posizione predefinita nel flusso normale di layout, agli elementi contigui, al contenitore padre o all'area di visualizzazione/finestra principale. Le tecniche per il layout di pagina che approfondiremo in questo modulo sono:</p> + +<ul> + <li>Flusso normale</li> + <li>La proprietà {{cssxref("display")}}</li> + <li>Flexbox</li> + <li>Griglie</li> + <li>Elementi float</li> + <li>Posizionamento</li> + <li>Layout con tabelle</li> + <li>Layout multicolonna</li> +</ul> + +<p>Ogni tecnica ha i propri casi d'uso, vantaggi e svantaggi. Nessuna di esse è concepita per funzionare in isolamento. Una volta compreso per quale scopo è stato progettato ciascun metodo, risulterà facile scegliere lo strumento di layout più adatto alle diverse esigenze.</p> + +<h2 id="Flusso_normale">Flusso normale</h2> + +<p>Per flusso normale si intende il layout predefinito di una pagina HTML, ovvero come viene visualizzata senza interventi da parte nostra. Ecco un breve esempio di codice HTML:</p> + +<pre class="brush: html notranslate"><p>Amo il mio gatto.</p> + +<ul> + <li>Compra il cibo per gatti</li> + <li>Esercitati</li> + <li>Tira su di morale un amico</li> +</ul> + +<p>Fine!</p></pre> + +<p>Secondo le impostazioni predefinite, il browser visualizza il codice in questo modo:</p> + +<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> + +<p>Notiamo come l'HTML venga visualizzato nell'esatto ordine in cui appare nel codice sorgente, con gli elementi incolonnati uno sotto l'altro: primo paragrafo, elenco non ordinato, secondo paragrafo.</p> + +<p>Gli elementi che compaiono uno sotto l'altro vengono definiti come elementi <em>blocco</em>, al contrario degli elementi <em>in linea</em>, che sono disposti uno accanto all'altro come le singole parole di un paragrafo.</p> + +<div class="note"> +<p><strong>Nota</strong>: La direzione in cui si dispongono i contenuti di elementi blocco viene definita direzione blocco. La direzione blocco è verticale in lingue come l'inglese, che hanno una modalità di scrittura orizzontale. Al contrario, è orizzontale in lingue come il giapponese, che hanno una modalità di scrittura verticale. La corrispondente direzione in linea segue la direzione percorsa dai contenuti lineari, ad esempio quelli di una frase scritta.</p> +</div> + +<p>Nella maggior parte dei casi, il flusso normale è sufficiente a disporre gli elementi nella pagina come ci servono. Tuttavia, per ottenere layout più complessi, occorre modificare la disposizione predefinita grazie ad alcuni strumenti disponibili nel CSS. Partire da un codice HTML ben strutturato è importante, perché permette di ritoccare la disposizione predefinita degli elementi, invece di stravolgerla.</p> + +<p>I metodi per influenzare la disposizione degli elementi con il CSS sono i seguenti:</p> + +<ul> + <li><strong>La proprietà {{cssxref("display")}}</strong>: i valori standard come <code>block</code>, <code>inline</code> o <code>inline-block</code> possono mutare il comportamento degli elementi nel flusso normale, ad esempio far sì che un elemento blocco si comporti come un elemento in linea (per maggiori informazioni vedi Tipi di box CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>]). Esistono anche metodi che influiscono sull'intero layout, ridefinendo il posizionamento degli elementi figlio una volta che assegnamo all'elemento padre che li contiene determinati valori di <code>display</code>. Vedi, per esempio, Griglie CSS [<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a>] e Flexbox [<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>].</li> + <li><strong>Elementi float</strong>: applicando a {{cssxref("float")}} un valore come <code>left</code> è possibile affiancare altri elementi agli elementi blocco, proprio come le illustrazioni contornate da testo nei layout delle riviste cartacee.</li> + <li><strong>La proprietà {{cssxref("position")}}</strong>: permette un preciso posizionamento di elementi box all'interno di altri box. <code>static</code> è il valore predefinito nel flusso normale, ma applicando altri valori è possibile definire un comportamento differente, come ad esempio fissare il box in cima all'area di visualizzazione.</li> + <li><strong>Layout con tabelle</strong>: le caratteristiche utilizzate per lo stile di una tabella HTML possono essere riproposte su elementi non tabellari impostando <code>display: table</code> e altre proprietà associate.</li> + <li><strong>Layout multicolonna</strong>: le proprietà del Layout multicolonna [<a href="/en-US/docs/Web/CSS/CSS_Columns">Multi-column layout</a>] possono distribuire in colonne il contenuto di un blocco, come nella pagina di un quotidiano cartaceo.</li> +</ul> + +<h2 id="La_proprietà_display">La proprietà display</h2> + +<p>I modi principali per realizzare il layout di una pagina via CSS risiedono nei diversi valori della proprietà <code>display</code>. Questa proprietà permette di cambiare l'impostazione predefinita per la visualizzazione di un elemento. Nel flusso normale, tutti gli elementi hanno un valore <code>display</code> predefinito, che definisce il comportamento per cui sono stati progettati. Ad esempio, il fatto che i paragrafi di testo nelle lingue occidentali vengano visualizzati uno sotto l'altro è dovuto al loro stile predefinito <code>display: block</code>. Se all'interno di un paragrafo si inserisce un link in una porzione del testo, il link rimane allineato con il resto del testo invece di andare a capo poiché lo stile predefinito dell'elemento {{htmlelement("a")}} è <code>display: inline</code>.</p> + +<p>Il tipo di visualizzazione predefinito può essere modificato. Ad esempio, l'impostazione predefinita dell'elemento {{htmlelement("li")}} è <code>display: block</code>. Ciò significa che le voci dell'elenco nel documento vengono visualizzate una sotto l'altra, secondo l'impostazione occidentale. Se il valore di display viene modificato in <code>inline</code>, gli elementi dell'elenco verranno visualizzati uno accanto all'altro, come le parole di una frase. La possibilità di modificare il valore di <code>display</code> per tutti gli elementi significa che è possibile mantenere il loro significato semantico definito nell'HTML, indipendentemente dal modo in cui verranno visualizzati. Abbiamo, in sostanza, la possibilità di cambiarne unicamente il comportamento.</p> + +<p>Oltre alla possibilità di cambiare la presentazione dei componenti da <code>block</code> a <code>inline</code> e vice versa, si possono creare layout con metodi più complessi, iniziando proprio dall'impostazione del valore di <code>display</code>. Tuttavia, occorre solitamente abbinarlo ad altre proprietà per realizzare un layout complesso. I due valori principali quando parliamo di layout sono <code>display: flex</code> e <code>display: grid</code>.</p> + +<h2 id="Flexbox">Flexbox</h2> + +<p>Flexbox è l'abbreviazione di Modulo <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>, progettato per facilitare la creazione di layout monodimensionali degli elementi sia in riga che in colonna. Per utilizzare Flexbox, occorre impostare <code>display: flex</code> al padre degli elementi su cui si intende applicare il layout; tutti i figli diretti di tale elemento diventeranno componenti flex. Ecco un semplice esempio.</p> + +<p>Il markup HTML sottostante presenta una classe <code>wrapper</code> associata a un elemento contenitore, nel quale sono presenti tre elementi {{htmlelement("div")}}. Secondo il loro valore predefinito, nel documento d'esempio che ha una direzione di scrittura occidentale, gli elementi dovrebbero essere visualizzati come elementi blocco, uno sotto l'altro.</p> + +<p>Tuttavia, una volta specificato <code>display: flex</code> sul padre, i tre componenti figlio si dispongono in colonna. Questo accade perché essi ora sono <em>componenti flex</em> e assumono il medesimo valore iniziale che Flexbox attribuisce loro attraverso il contenitore padre. In questo caso vengono presentati in riga perché il valore iniziale di {{cssxref("flex-direction")}} impostato dal padre è <code>row</code>. Si allungano tutti fino a raggiungere l'altezza del componente più alto perché il valore iniziale della proprietà {{cssxref("align-items")}} viene impostato a <code>stretch</code> dal padre. Quindi i componenti si distendono fino a raggiungere l'altezza del contenitore flex, che in questo caso è definita dal più alto tra i suoi componenti. Tutti i componenti si schierano al principio del contenitore, lasciando spazio libero alla fine della riga.</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Uno</div> + <div class="box2">Due</div> + <div class="box3">Tre</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>Oltre alle suddette proprietà applicabili al contenitore flex, esistono anche proprietà che possono essere impostate sui componenti figlio. Tra le altre cose, queste proprietà possono cambiare il modo in cui i componenti si flettono, facendoli espandere o contrarre per adattarsi allo spazio disponibile.</p> + +<p>È possibile, per esempio, aggiungere la proprietà {{cssxref("flex")}} a tutti i componenti figlio, con valore <code>1</code>. Questo fa sì che tutti i componenti aumentino in dimensione sino a riempire il contenitore, invece di lasciare dello spazio vuoto alla fine. Se lo spazio aumenta, i componenti si allargano. Se lo spazio diminuisce, si contraggono. Inoltre, se viene aggiunto un nuovo elemento al markup, tutti i componenti diminuiscono la propria dimensione per far spazio al nuovo inserimento continuando a riempire la medesima area, qualsiasi essa sia.</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Uno</div> + <div class="box2">Due</div> + <div class="box3">Tre</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Questa è solo una breve introduzione alle possibilità di Flexbox. Per approfondire l'argomento vai all'articolo <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> +</div> + +<h2 id="Griglia_layout">Griglia layout</h2> + +<p>Mentre Flexbox è stato progettato per il layout monodimensionale, la Griglia layout è stata progettata per essere bidimensionale, cioè per disporre gli elementi in righe e colonne.</p> + +<p>Per passare alla modalità Griglia layout occorre innanzitutto impostare un valore di display specifico, <code>display: grid</code>. L'esempio seguente usa un markup simile a quello visto negli esempi di flex: presenta un contenitore e alcuni elementi figlio. Oltre a usare <code>display: grid</code>, definiamo anche una regola per righe e colonne nell'elemento padre utilizzando rispettivamente le proprietà {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}. Definiamo tre colonne di <code>1fr</code> ciascuna e due righe di <code>100px</code>. Non occorre specificare alcuna regola per gli elementi figlio, che verranno inseriti nelle celle create dalla nostra griglia in maniera automatica.</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Grid_example_1">Grid example 1</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Uno</div> + <div class="box2">Due</div> + <div class="box3">Tre</div> + <div class="box4">Quattro</div> + <div class="box5">Cinque</div> + <div class="box6">Sei</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p>Una volta impostata la griglia, è possibile posizionarvi all'interno i componenti in maniera esplicita invece di affidarsi all'impostazione automatica come nell'esempio precedente. Nel secondo esempio qui sotto viene definita la stessa griglia, ma in questo caso definiamo delle regole anche per i componenti figlio. La linea iniziale e quella finale di ogni componente vengono impostate nelle proprietà {{cssxref("grid-column")}} e {{cssxref("grid-row")}}. Questo fa sì che i componenti seguano tracciati diversi.</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Grid_example_2">Grid example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Uno</div> + <div class="box2">Due</div> + <div class="box3">Tre</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Questi due esempi dimostrano solo una piccola parte delle potenzialità della Griglia layout; per scoprirne altre vedi l'articolo Griglia layout [<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>].</p> +</div> + +<p>La parte restante di questa guida tratta di altri metodi di strutturazione, meno rilevanti per l'impostazione del layout principale della pagina, ma utili per operazioni specifiche. Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.</p> + +<h2 id="Elementi_float">Elementi float</h2> + +<p>Configurando un elemento in float cambiamo il suo comportamento e quello degli elementi che gli succedono nel flusso normale. L'elemento viene spostato a sinistra o a destra e isolato dal flusso normale, il contenuto circostante scorre intorno a questo elemento.</p> + +<p>La proprietà {{cssxref("float")}} ha quattro possibili valori:</p> + +<ul> + <li><code>left</code>: sposta l'elemento a sinistra.</li> + <li><code>right</code>: sposta l'elemento a destra.</li> + <li><code>none</code>: non causa alcuno spostamento ed è il valore predefinito.</li> + <li><code>inherit</code>: "eredita" il valore della proprietà <code>float</code> dall'elemento padre.</li> +</ul> + +<p>Nel seguente esempio, un elemento <code><div></code> viene spostato a sinistra e il suo {{cssxref("margin")}} impostato a destra per creare uno spazio tra il testo e l'elemento. In questo modo, il corpo del testo fluisce intorno al box. Questo è tutto ciò che ci occorre conoscere nel web design moderno a proposito degli elementi float.</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Floats_example">Floats example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html notranslate"><h1>Esempio semplice di float</h1> + +<div class="box">Float</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Gli elementi float vengono spiegati in maniera esauriente nell'articolo sulle proprietà <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float e clear</a>. Prima dell'esistenza di metodi come Flexbox e Griglia layout, gli elementi float venivano utilizzati anche come sistema per suddividere il layout in colonne. È tutt'ora possibile imbattersi in siti web che utilizzano questo sistema. Lo scopriremo nella lezione sui <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">metodi di layout legacy</a>.</p> +</div> + +<h2 id="Tecniche_di_posizionamento">Tecniche di posizionamento</h2> + +<p>Il posizionamento permette di spostare un elemento dalla posizione che assumerebbe nel flusso normale a una nuova posizione. Il posizionamento non è un indicato per creare il layout di un'intera pagina, ma piuttosto per gestire e ritoccare la posizione di un componente specifico.</p> + +<p>Tuttavia, esistono tecniche utili per gestire alcuni modelli di layout basati sulla proprietà {{cssxref("position")}}. Comprendere la tecnica del posizionamento permette anche di capire cos'è il flusso normale e come estromettere un componente da esso.</p> + +<p>I tipi di posizionamento che ci serve conoscere sono cinque:</p> + +<ul> + <li><strong>Posizionamento statico</strong>: è il valore preimpostato sugli elementi e significa semplicemente "inserisci l'elemento nella posizione stabilita dal flusso di layout del documento, nessuna istruzione speciale".</li> + <li><strong>Posizionamento relativo</strong>: permette di cambiare la posizione dell'elemento e spostarlo in relazione al flusso normale, come anche di sovrapporlo ad altri elementi nella pagina.</li> + <li><strong>Posizionamento assoluto</strong>: l'elemento viene completamente isolato dal flusso normale della pagina, come se si trovasse su un livello separato. Da lì è possibile fissarne la posizione ai margini dell'elemento <code><html></code> (o del suo elemento contenitore più prossimo). Questa caratteristica è utile per produrre effetti sul layout come i box a scheda, organizzati come un certo numero di schede disposte una sopra l'altra e mostrate o nascoste a comando. Un altro esempio sono i box di notifica, posti inizialmente al di fuori dello schermo, ma che possono essere richiamati nell'area di visualizzazione usando un pulsante di controllo.</li> + <li><strong>Posizionamento fisso</strong>: assomiglia molto al posizionamento assoluto, con la differenza che àncora l'elemento in relazione all'area di visualizzazione del browser invece che a un altro elemento. Viene usato per creare effetti quali i menu di navigazione che mantengono sempre la stessa posizione sul monitor, anche quando il resto del contenuto scorre.</li> + <li><strong>Posizionamento adesivo</strong>: è un nuovo tipo di posizionamento per cui un elemento si comporta come se fosse impostato su <code>position: static</code> sino a quando non raggiunge un determinato margine dell'area di visualizzazione, a quel punto muta il suo comportamento in <code>position: fixed</code>.</li> +</ul> + +<h3 id="Semplice_esempio_di_posizionamento">Semplice esempio di posizionamento</h3> + +<p>Per familiarizzare con queste tecniche di layout, vediamo un paio di semplici esempi basati sullo stesso codice HTML:</p> + +<pre class="brush: html notranslate"><h1>Posizionamento</h1> + +<p>Elemento blocco essenziale.</p> +<p class="positioned">Elemento blocco essenziale.</p> +<p>Elemento blocco essenziale.</p></pre> + +<p>Il seguente CSS mostra lo stile preimpostato dell'HTML:</p> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> + +<p>L'output mostrato è il seguente:</p> + +<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> + +<h3 id="Posizionamento_relativo">Posizionamento relativo</h3> + +<p>Il posizionamento relativo permette di spostare un componente dalla posizione predefinita che occuperebbe nel flusso normale. Si potrebbe perciò realizzare lo spostamento di un'icona un po' più in basso per allinearla a un'etichetta testuale, aggiungendo la seguente istruzione:</p> + +<pre class="brush: css notranslate">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>In questo caso, il secondo paragrafo ha un attributo {{cssxref("position")}} di valore <code>relative</code> che non produce alcun effetto di per sé. Quindi, aggiungiamo le proprietà {{cssxref("top")}} e {{cssxref("left")}}, che spostano l'elemento associato in basso e a destra. Questo passaggio potrebbe sembrare controintuitivo, ma basta figurarselo come se l'elemento subisse una spinta da sinistra e dall'alto che ne provocasse lo spostamento a destra e in basso.</p> + +<p>Aggiungendo questo codice, si ottiene il seguente risultato:</p> + +<div id="Relative_1"> +<div class="hidden"> +<h6 id="Relative_positioning_example">Relative positioning example</h6> + +<pre class="brush: html notranslate"><h1>Posizionamento relativo</h1> + +<p>Elemento blocco essenziale.</p> +<p class="positioned">Elemento con posizionamento relativo</p> +<p>Elemento blocco essenziale.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> + +<h3 id="Posizionamento_assoluto">Posizionamento assoluto</h3> + +<p>Il posizionamento assoluto serve a rimuovere un elemento dal flusso normale e riposizionarlo stabilendo l'offset dai margini di un blocco contenitore.</p> + +<p>Riprendendo l'originale esempio senza posizionamento, implementiamo il posizionamento assoluto aggiungendo le seguenti regole CSS per:</p> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>In questo caso, assegniamo <code>absolute</code> alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}}. Il codice però produce il risultato seguente.</p> + +<div id="Absolute_1"> +<div class="hidden"> +<h6 id="Absolute_positioning_example">Absolute positioning example</h6> + +<pre class="brush: html notranslate"><h1>Posizionamento assoluto</h1> + +<p>Elemento blocco essenziale.</p> +<p class="positioned">Elemento con posizionamento assoluto.</p> +<p>Elemento blocco essenziale.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> + +<p>La differenza si nota! L'elemento a cui viene assegnato il posizionamento è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso. Gli altri due paragrafi appaiono giustapposti e non influenzati dal primo, come se non esistesse affatto. Le proprietà {{cssxref("top")}} e {{cssxref("left")}} applicate all'elemento producono un effetto diverso a seconda del tipo di posizionamento, se assoluto oppure relativo. In questo caso, l'offset viene calcolato rispetto al lato superiore e sinistro della pagina. L'elemento padre che contiene l'elemento può essere modificato, come spiegato nella lezione dedicata al <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">posizionamento</a>.</p> + +<h3 id="Posizionamento_fisso">Posizionamento fisso</h3> + +<p>Il posizionamento fisso estrae l'elemento a cui è applicato dal flusso del documento allo stesso modo del posizionamento assoluto. Tuttavia, gli offset vengono applicati in relazione all'area di visualizzazione, invece che in relazione al contenitore padre. Poiché il componente rimane fisso rispetto all'area di visualizzazione, siamo in grado di costruire componenti come un menu che rimane fisso mentre il resto della pagina scorre al livello sottostante.</p> + +<p>Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola <code>position: fixed</code>.</p> + +<pre class="brush: html notranslate"><h1>Posizionamento fisso</h1> + +<div class="positioned">Fisso</div> + +<p>Paragrafo 1.</p> +<p>Paragrafo 2.</p> +<p>Paragrafo 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Fixed_positioning_example">Fixed positioning example</h6> + +<pre class="brush: html notranslate"><h1>Posizionamento fisso</h1> + +<div class="positioned">Fisso</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="Posizionamento_adesivo">Posizionamento adesivo</h3> + +<p>L'ultimo tipo di posizionamento a nostra disposizione è il posizionamento adesivo. Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola <code>position: sticky</code> scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in <code>position: fixed</code>.</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Posizionamento adesivo</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Adesivo</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: per saperne di più sul posizionamento, vedi l'articolo Posizionamento [<a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>].</p> +</div> + +<h2 id="Layout_con_tabelle">Layout con tabelle</h2> + +<p>La tabelle HTML sono appropriate per rendere i dati tabulari. Tuttavia, molti anni fa, prima che i vari browser supportassero i più elementari CSS in maniera affidabile, gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella. Questo approccio funzionava, ma presentava molti problemi: i layout basati su tabella non erano reattivi, generavano un markup molto pesante, creavano difficoltà nel processo di debug e a livello semantico (ad esempio, non venivano correttamente interpretati dagli screen reader).</p> + +<p>Il modo in cui una tabella appare nella pagina web si deve a un'impostazione di proprietà CSS che ne definisce il layout. È possibile utilizzare queste proprietà anche per posizionare elementi diversi dalle tabelle. Talvolta, questo utilizzo viene definito come “tabelle CSS”.</p> + +<p>Di seguito viene mostrato un esempio di questo uso. Tuttavia, i layout realizzati con tabelle CSS dovrebbero ormai essere considerati un metodo legacy, riservato a situazioni in cui occorre garantire la compatibilità con browser datati, che non supportano Flexbox e Griglia.</p> + +<p>Diamo un'occhiata all'esempio. Innanzitutto vi sono alcuni semplici markup che generano il modulo HTML. Ogni elemento HTML ha un'etichetta, in più è presente un paragrafo contenente una didascalia. Tutti i campi di input accoppiati alle etichette vengono inseriti in {{htmlelement("div")}} al fine di produrre il layout.</p> + +<pre class="brush: html notranslate"><form> + <p>Prima di tutto, dichiara il tuo nome e la tua età.</p> + <div> + <label for="fname">Nome:</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Cognome:</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Età:</label> + <input type="text" id="age"> + </div> +</form></pre> + +<p>Segue il CSS dell'esempio. Si tratta di un codice CSS piuttosto comune, fatta eccezione per l'impiego della proprietà {{cssxref("display")}}. Gli elementi {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}} e {{htmlelement("input")}} vengono rispettivamente impostati come una tabella, righe di tabella e celle di tabella. Operando fondamentalmente come il markup di una tabella in HTML, i campi input e le didascalie si allineano in maniera corretta. Rimane solo da regolare la dimensione, i margini ecc. per far apparire l'insieme più gradevole.</p> + +<p>Si noti che il paragrafo contenete la didascalia è stato impostato con la regola <code>display: table-caption</code>, che determina un comportamento simile a {{htmlelement("caption")}} all'interno di una tabella. Inoltre, per motivi estetici, ha l'attributo <code>caption-side: bottom;</code>. In questo modo, la didascalia viene visualizzata sotto al modulo, anche se nel codice sorgente è posizionata prima degli elementi <code><input></code>.</p> + +<p>Ciò consente una notevole flessibilità.</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p>Otteniamo il seguente risultato:</p> + +<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p> + +<p>Si veda anche l'esempio dal vivo <strong>[TODO]</strong> e il codice sorgente [<strong>TODO IT</strong> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a>]</p> + +<p>You can also see this example live at <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a> too.)</p> + +<h2 id="Layout_multicolonna">Layout multicolonna</h2> + +<p>Il modulo di layout multicolonna permette di strutturare il contenuto in colonne, in maniera simile al testo di un quotidiano cartaceo. Il layout a colonne non è una visualizzazione ottimale nei siti web, in quanto costringe chi legge a scorrere continuamente su e giù per la pagina. Tuttavia, in alcuni casi, suddividere il contenuto in colonne si rivela utile.</p> + +<p>Il blocco si può trasformare in un contenitore multicolonna grazie alla proprietà {{cssxref("column-count")}}, che indica al browser il numero di colonne desiderate, oppure alla proprietà {{cssxref("column-width")}}, che specifica la larghezza delle colonne (il loro numero viene automaticamente calcolato in base alla larghezza totale del contenitore).</p> + +<p>Nel seguente esempio, un elemento <code><div></code> con classe <code>container</code> contiene un blocco di codice HTML.</p> + +<pre class="brush: html notranslate"><div class="container"> + <h1>Layout multi-colonna</h1> + + <p>Paragrafo 1.</p> + <p>Paragrafo 2.</p> + +</div> +</pre> + +<p>La proprietà <code>column-width</code> con valore 200 pixel viene applicata a questo contenitore, indicando al browser di disporre tante colonne larghe 200 pixel quante sono necessarie per riempirne la larghezza. Lo spazio rimanente viene suddiviso tra le colonne, come spaziatura tra una e l'altra.</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Multicol_example">Multicol example</h6> + +<pre class="brush: html notranslate"> <div class="container"> + <h1>Layout multi-colonna</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css notranslate"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="Sommario">Sommario</h2> + +<p>Questo articolo è un breve compendio di tutte le tecniche che occorre conoscere per sviluppare un layout. Continua la lettura per approfondire ogni singolo aspetto di questa tecnologia!</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="it/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> +</ul> diff --git a/files/it/learn/css/css_layout/normal_flow/index.html b/files/it/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..01e197ad76 --- /dev/null +++ b/files/it/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,108 @@ +--- +title: Flusso normale +slug: Learn/CSS/CSS_layout/Normal_Flow +tags: + - Beginner + - CSS + - Layout + - Learn + - float + - grid + - normal flow +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">Questo articolo illustra il flusso normale ovvero il modo in cui si dispongono gli elementi che formano una pagina web in maniera spontanea, senza manipolazioni.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Le basi di HTML (leggi Introduzione a HTML [<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>]) e nozioni sul funzionamento del CSS (leggi Introduzione al CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].)</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Comprendere come i browser predispongono il layout delle pagine web prima di intervenire su di esso applicando le regole di stile CSS.</td> + </tr> + </tbody> +</table> + +<p>Come specificato nella lezione precedente, che introduceva al layout CSS, gli elementi di una pagina web si dispongono secondo il flusso normale, a meno che non vengano applicate alcune regole CSS che ne mutano il comportamento.<br> + Come premesso, è possibile cambiare il comportamento degli elementi adattando la loro posizione all'interno del flusso oppure estrapolandoli da esso.<br> + La maniera migliore per costruire una pagina web è iniziare impostando una struttura chiara e solida, adatta a essere visualizzata nel flusso normale.<br> + In questo modo ci assicuriamo che il contenuto sia leggibile, anche quando l'utente usa un browser molto limitato oppure un dispositivo che, tramite screen reader, enuncia il contenuto della pagina.<br> + Inoltre, poiché il flusso normale è stato progettato per rendere leggibile il documento, possiamo cominciare da questa impostazione per effettuare le modifiche in maniera armonica, senza forzature.</p> + +<p>Prima di esplorare in maniera approfondita i vari metodi di layout, ripassiamo alcune nozioni apprese nei moduli precedenti sul flusso normale del documento.</p> + +<h2 id="Come_si_dispongono_gli_elementi_con_impostazione_predefinita">Come si dispongono gli elementi con impostazione predefinita?</h2> + +<p>Prima di tutto, il riquadro di un determinato elemento varia a seconda del suo contenuto. Successivamente intervengono altri fattori quali la spaziatura interna, il bordo e il margine esterno, seguendo esattamente la logica del Box Model che abbiamo studiato in precedenza.</p> + +<p>Come da impostazione predefinita, la larghezza del contenuto di un elemento di tipo blocco [<a href="/en-US/docs/Web/HTML/Block-level_elements">block level element</a>] copre il 100% della larghezza dell'elemento padre, mentre l'altezza dipende dall'altezza del suo contenuto. Invece, nel caso degli elementi in linea [<a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>], sia la larghezza che l'altezza dipendono dal contenuto. Non è possibile imporre una larghezza o un'altezza degli elementi in linea, perché essi si posizionano come contenuti fluidi all'interno di un elemento blocco. Se vogliamo stabilire le sue dimensioni, occorre usare <code>display:block</code> per fare in modo che assuma le proprietà di un elemento blocco (oppure <code>display: inline-block</code>, che presenta caratteristiche di entrambi gli stili).</p> + +<p>Il layout del flusso normale, lo abbiamo detto nell'introduzione al layout CSS, è il sistema impiegato dai browser per disporre gli elementi all'interno dell'area di visualizzazione. Come da impostazione predefinita, gli elementi di tipo blocco si dispongono secondo la direzione blocco, determinata dalla proprietà <a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a> dell'elemento padre (che assume valore <em>iniziale</em> horizontal-tb). Ciascun elemento occupa un'intera linea; inoltre è possibile inserire margini per separare i vari elementi. Nel caso di lingue come l'inglese, con la direzione di scrittura preimpostata da sinistra verso destra e dall’alto verso il basso, gli elementi blocco vengono disposti verticalmente dall'alto in basso.</p> + +<p>Gli elementi in linea si comportano diversamente: non occupano una nuova linea ciascuno, bensì si susseguono lungo la medesima linea e si allineano ai contenuti testuali adiacenti sino a riempire l'intera larghezza dell'elemento padre di tipo blocco. Quando non vi è più spazio, gli elementi vanno fluidamente a capo per occupare la linea successiva.</p> + +<p>Se due elementi adiacenti hanno margini contigui, il margine maggiore prevale su quello più esiguo che sparirà del tutto. Questo comportamento, già trattato negli articoli sui CCS di Mozilla, prende il nome di "margin collapsing" (compressione dei margini).</p> + +<p>Il basilare esempio di seguito illustra il comportamento del flusso normale:</p> + +<div id="Normal_Flow"> +<pre class="brush: html notranslate"><h1>Flusso di base del documento</h1> + +<p>Io sono un tipico elemento blocco. L'elemento blocco che viene dopo di me, occupa la linea orizzontale successiva</p> + +<p>Da impostazione predefinita occupiamo il 100% della larghezza del nostro elemento padre, mentre l'altezza di ciascuno è determinata dal suo contenuto. Le nostre larghezza e altezza totali sono uguali a contenuto + margine interno + altezza/larghezza del bordo.</p> + +<p>Siamo separati dai margini. A causa del "margin collapse", tra uno e l'altro di noi rimane un solo margine, il maggiore, mentre il minore si comprime.</p> + +<p>Gli elementi in linea <span>come questo</span> e <span>quest’altro</span> si collocano entrambi sulla stessa linea e, spazio permettendo, sulla stessa linea dei nodi di testo adiacenti. +Gli elementi in linea che eccedono la larghezza dell'elemento padre, <span> se possibile vanno a capo, continuando su una nuova linea, proprio come questo testo,</span>, altrimenti si spostano direttamente sulla linea successiva proprio come la seguente immagine: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: rgba(255,84,104,0.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; +} + +span { + background: white; + border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> + +<h2 id="Sommario">Sommario</h2> + +<p>Ora che abbiamo compreso il flusso normale, cioè il meccanismo predefinito con cui un browser dispone gli elementi nella pagina, passiamo a studiare come cambiare l'impostazione predefinita di visualizzazione al fine di sviluppare il layout secondo la progettazione desiderata.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> +</ul> diff --git a/files/it/learn/css/index.html b/files/it/learn/css/index.html new file mode 100644 index 0000000000..9ffaa802c9 --- /dev/null +++ b/files/it/learn/css/index.html @@ -0,0 +1,65 @@ +--- +title: Impara a stilizzare HTML usando i CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<div>I fogli di stile a cascata - o {{glossary("CSS")}} - sono la seconda tecnologia che dovresti iniziare a imparare dopo l' {{glossary("HTML")}}. Mentre l'HTML è usato per definire la struttura e la semantica del tuo contenuto, i CSS vengono utilizzati per modellarlo e disporlo graficamente. Per esempio puoi utilizzare il CSS per modificare il colore e la dimensione di un testo, animare certi elementi della pagina, aggiungere margini e bordi e molte altre casistiche.</div> + +<div></div> + +<div>Percorso di apprendimento</div> + +<div>Dovresti imparare prima i concetti base dell' HTML prima di cimentarti con i CSS. Ti consigliamo di leggere prima il modulo di introduzione <a href="/it/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.</div> + +<div>Con tale modulo potrai imparare:</div> + +<div></div> + +<ul> + <li>CSS, iniziando con il modulo <a href="it/docs/Learn/CSS/First_steps">Introduzione ai CSS</a></li> + <li>Una semantica <a href="/it/docs/Web/HTML/HTML5">HTML</a> più avanzata</li> + <li><a href="/it/docs/Web/JavaScript/Cos%C3%A8_JavaScript">Javascript</a>, e come usarlo per aggiungere funzionalità dinamiche alle pagine web</li> +</ul> + +<p>Una volta che avrai compreso i fondamenti dell'HTML, ti consigliamo di imparare HTML e CSS contemporaneamente. Questo perchè l'HTML è molto più interessante e più divertente da imparare quando applichi anche i CSS, e non puoi imparare veramente i CSS senza conoscere l'HTML.</p> + +<p>Prima di iniziare questi argomenti, dovresti avere una certa familiarità nell'uso dei computer e nella navigazione sul web. Dovresti avere un ambiente di lavoro di base impostato secondo i dettagli forniti in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a>, e sapere come creare e gestire file, come esposto in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gestire i file</a> — entrambi fanno parte della nostra guida completa per principianti <a href="/en-US/docs/Learn/Getting_started_with_the_web">Primi passi con il web</a>.</p> + +<p>Ti raccomandiamo di completare con <a href="/en-US/docs/Learn/Getting_started_with_the_web">Primi passi con il web</a> prima di continuare con questo argomento. Questo non è assolutamente indispensabile in quanto molti argomenti affrontati nell'articolo sulle basi del CSS sono anche affrontati nella nostra <a href="it/docs/Learn/CSS/First_steps">Introduzione ai CSS</a>, anche se in dettaglio molto maggiore.</p> + +<h2 id="Moduli">Moduli</h2> + +<p>Questo argomento contiene i seguenti moduli, suggeriti in ordine di lettura. Dovresti iniziare con il primo modulo.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduzione al CSS</a></dt> + <dd>Questo modulo ti introdurrà alle basi di come funzionano i CSS, inclusi selettori e proprietà, scrivere regole CSS, applicare CSS ad HTML, come specificare lunghezza, colore ed altri elementi in CSS, ereditarietà e cascata, basi del box model ed il debug di CSS.</dd> + <dt><a href="/it/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>Guardiamo ai fondamenti di formattazione del testo, inclusa l'impostazione del carattere, grassetto e corsivo, la spaziatura di lettere e l'interlinea, ombreggiatura ed altre caratteristiche del testo. Concludiamo il modulo guardando a come applicare un carattere personalizzato alla tua pagina e stilizzando liste e collegamenti.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>Subito dopo diamo un occhio a come stilizzare i contenitori, uno dei passi fondamentali verso la creazione di una pagina web. In questo modulo riepiloghiamo il modello dei contenitori per poi affrontare il controllo della disposizione degli elementi impostando riempimento, bordi e margini, impostando colori di sfondo, immagini ed altre caratteristiche come ombre e filtri sui contenitori.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>A questo punto abbiamo già esaminato i fondamenti dei CSS, come modellare il testo e come modellare e manipolare le caselle in cui si trovano i tuoi contenuti. Ora è il momento di vedere come posizionare le tue box nel posto giusto rispetto al viewport e tra di loro. Abbiamo coperto i prerequisiti necessari in modo che ora possiamo immergerci in profondità nel layout CSS, esaminando diverse impostazioni di visualizzazione, metodi di layout tradizionali che coinvolgono float e posizionamento e nuovi strumenti di layout fangled come flexbox.</dd> +</dl> + +<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> + + + +<p>Usare CSS per risolvere problemi comuni fornisce collegamenti a sezioni di contenuto che spiegano come utilizzare CSS per risolvere problemi molto comuni durante la creazione di una pagina web: Styling Box.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS su MDN</a></dt> + <dd>Il punto d'ingresso principale per la documentazione CSS su MDN, dove troverai documentazione di riferimento dettagliata per tutte le funzionalità del linguaggio CSS. Vuoi conoscere tutti i valori che una proprietà può assumere? Questo è un buon posto dove andare.</dd> +</dl> diff --git a/files/it/learn/css/styling_text/definire_stili_link/index.html b/files/it/learn/css/styling_text/definire_stili_link/index.html new file mode 100644 index 0000000000..b6bdc7a6fa --- /dev/null +++ b/files/it/learn/css/styling_text/definire_stili_link/index.html @@ -0,0 +1,438 @@ +--- +title: Definire gli stili dei link +slug: Learn/CSS/Styling_text/Definire_stili_link +translation_of: Learn/CSS/Styling_text/Styling_links +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">Quando si vogliono assegnare degli stili ai <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">link</a>, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscenza informatica di base, elementi di HTML (leggi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), elementi di CSS (leggi <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fondamenti di testo e font con CSS</a>.</td> + </tr> + <tr> + <th scope="row">Obbiettivo:</th> + <td>Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.</td> + </tr> + </tbody> +</table> + +<h2 id="Uno_sguardo_ai_link">Uno sguardo ai link</h2> + +<p>Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le <em>best practices</em> viste in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creare gli hyperlink</a>. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le <em>best practices</em> per la definizione degli stili dei link.</p> + +<h3 id="Stati_dei_link">Stati dei link</h3> + +<p>La prima cosa da capire è il concetto di <em>stato dei link</em> — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">pseudo-class</a>i:</p> + +<ul> + <li><strong>Link (unvisited)</strong>: è lo stato predefinito in cui il link risiede, quando non è in un altro stato. A questo stato può essere attribuito specificatamente uno stile utilizzando la pseudo-classe {{cssxref(":link")}}.</li> + <li><strong>Visited</strong>: stato del link quando è già stato visitato (esiste nella storia del browser), si può attribuire la pseudo-classe {{cssxref(":visited")}}.</li> + <li><strong>Hover</strong>: stato del link quando si passa il mouse sopra di esso, si può attribuire la pseudo-classe {{cssxref(":hover")}}.</li> + <li><strong>Focus</strong>: stato del link quando è focalizzato (ad esempio se ci si posiziona tramite la tastiera usando il tasto <kbd>Tab</kbd> o simili, oppure via programma usando {{domxref("HTMLElement.focus()")}}) — a questo si può attribuire la pseudo-classe {{cssxref(":focus")}}.</li> + <li><strong>Active</strong>: stato del link quando è attivato (ad esempio cliccandoci sopra), si può attribuire la pseudo-classe {{cssxref(":active")}}.</li> +</ul> + +<h3 id="Stili_predefiniti">Stili predefiniti</h3> + +<p>L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).</p> + +<pre class="brush: html"><p><a href="#">A simple link</a></p> +</pre> + +<pre class="brush: css">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli <code>#</code> (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il <code>#</code> (cancelletto) invece si connette esclusivamente alla pagina corrente.</p> +</div> + +<p>Quando esplorerete gli stili predefiniti, si noteranno alcune cose:</p> + +<ul> + <li>I link sono sottolineati.</li> + <li>I link non visitati sono blu.</li> + <li>I link visitati sono viola.</li> + <li>Passando il mouse sopra un link, il puntatore si trasforma in una manina.</li> + <li>I link con focus attivo sono contornati — dovresti essere in grado di attivare il focus sui link della pagina utilizzando il tasto Tab (su Mac, occorre abilitare l'opzione <em>Full Keyboard Access: All controls</em>premendo <kbd>Ctrl</kbd> + <kbd>F7</kbd>).</li> + <li>I link attivi sono rossi (provare a tenere premuto il mouse sul link quando vi si clicca sopra).</li> +</ul> + +<p>E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:</p> + +<ul> + <li>Utilizzare la sottolineatura solo per i link, e non per altri elementi. Se non si vuole usare la sottolineatura per i link, occorrerebbe evidenziarli in qualche altro modo.</li> + <li>Far reagire i link quando vi si passa il mouse sopra o li si evidenzia con il focus, ed anche in un modo leggermente diverso quando si attivano.</li> +</ul> + +<p>Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:</p> + +<ul> + <li>{{cssxref("color")}} per il colore del testo.</li> + <li>{{cssxref("cursor")}} per lo stile del puntatore del mouse — è consigliabile non disattivare questo stile, a meno che non si abbia una buona ragione.</li> + <li>{{cssxref("outline")}} per l'outline del testo (l'outline è simile al bordo, la sola differenza è che il bordo occupa spazio nel riquadro mentre l'outline no; esso si colloca esternamente rispetto al background). L'outline è considerato un valido aiuto alla accessibilità, pertanto occorre fare una attenta valutazione prima di disattivarlo; si dovrebbero almeno raddoppiare gli stili dati sia per lo stato <em>hover</em>, che per lo stato <em>focus</em>.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !</p> +</div> + +<h3 id="Definiamo_qualche_stile">Definiamo qualche stile</h3> + +<p>Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.</p> + +<p>Per cominciare, scriviamo il nostro set di stili vuoto:</p> + +<pre class="brush: css">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto. Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, <em><strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te</em>.</p> + +<p>Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:</p> + +<pre class="brush: css">body { + width: 300px; + margin: 0 auto; + font-size: 1.2rem; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: #265301; +} + +a:visited { + color: #437A16; +} + +a:focus { + border-bottom: 1px solid; + background: #BAE498; +} + +a:hover { + border-bottom: 1px solid; + background: #CDFEAA; +} + +a:active { + background: #265301; + color: #CDFEAA; +}</pre> + +<p>Forniamo anche il seguente esempio HTML a cui applicare il CSS:</p> + +<pre class="brush: html"><p>There are several browsers available, such as <a href="#">Mozilla +Firefox</a>, <a href="#">Google Chrome</a>, and +<a href="#">Microsoft Edge</a>.</p></pre> + +<p>Mettendoli insieme il risultato sarà questo:</p> + +<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p> + +<p>Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:</p> + +<ul> + <li>Le prime due regole non sono interessanti per la discussione.</li> + <li>La terza regola usa il selettore <code>a</code> per sbarazzarsi della sottolineatura del testo e dell'outline per il focus (che comunque variano a seconda dei browser) , ed aggiunge una piccola quantità di <em>padding</em> ad ogni link — tutto questo diventerà chiaro più avanti.</li> + <li>Per i successivi usiamo i selettori <code>a:link</code> e <code>a:visited</code> per impostare una coppia di variazioni dei colori sui link dei visitati e non visitati, così sono distinti.</li> + <li>Le due regole successive usano <code>a:focus</code> e<code>a:hover</code> per impostare i link del focus e del passaggio del mouse in modo da avere differenti colori di background, più una sottolineatura per evidenziare ulteriormente il link. Qui sono due i punti da notare: + <ul> + <li>La sottolineatura è stata creata usando {{cssxref("border-bottom")}}, e non {{cssxref("text-decoration")}} — alcune persone preferiscono questo stile perché il precedente consente migliori opzioni rispetto al secondo, ed è anche disegnato leggermente pù sottile, in questo modo non taglia le lettere discendenti delle parole da sottolinare (per esempo le code delle g e delle y).</li> + <li>Il valore {{cssxref("border-bottom")}} è stato impostato con <code>1px solid</code>, senza indicare un colore. In questo modo, il bordo adotta lo stesso colore del testo dell'elemento, ed è utile in quei casi in cui il testo usa un colore differente per ciascun caso.</li> + </ul> + </li> + <li>Per ultimo, <code>a:active</code> imposta i link con uno schema di colore invertito quando sono attivati, per render chiaro che sta succedendo qualcosa di importante!</li> +</ul> + +<h3 id="Active_learning_Definisci_i_tuoi_stili">Active learning: Definisci i tuoi stili</h3> + +<p>In questa sessione di <em>active learning</em>, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.</p> + +<p>Se fai un errore, puoi sempre ripartire usando il pulsante <em>Reset</em>. E se rimani bloccato, clicca sul bottone S<em>how solution</em> per inserire l'esempio che ti abbiamo mostrato sopra.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>There are several browsers available, such as <a href="#">Mozilla + Firefox</a>, <a href="#">Google Chrome</a>, and +<a href="#">Microsoft Edge</a>.</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Includere_le_icone_nei_link">Includere le icone nei link</h2> + +<p>Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo <a href="https://icons8.com/web-app/741/external-link">il grande esempio fornito da icons8.com</a>.</p> + +<p>Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:</p> + +<pre class="brush: html"><p>For more information on the weather, visit our <a href="#">weather page</a>, +look at <a href="#">weather on Wikipedia</a>, or check +out <a href="#">weather on Extreme Science</a>.</p></pre> + +<p>Quindi il CSS:</p> + +<pre class="brush: css">body { + width: 300px; + margin: 0 auto; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: blue; +} + +a:visited { + color: purple; +} + +a:focus, a:hover { + border-bottom: 1px solid; +} + +a:active { + color: red; +} + +a[href*="http"] { + background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background-size: 16px 16px; + padding-right: 19px; +}</pre> + +<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p> + +<p>So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">custom bullets on list items</a> in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify <code>no-repeat</code> so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.</p> + +<p>We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.</p> + +<p>Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.</p> + +<p>A final word — how did we select just external links? Well, if you are writing your <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML links</a> properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">attribute selector</a>: <code>a[href*="http"]</code> selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.</p> + +<p>So that's it — try revisiting the active learning section above and trying this new technique out!</p> + +<div class="note"> +<p><strong>Note</strong>: Don't worry if you are not familiar with <a href="/en-US/docs/Learn/CSS/Styling_boxes">backgrounds</a> and <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">responsive web design</a> yet; these are explained in other places.</p> +</div> + +<h2 id="Definire_i_link_come_bottoni">Definire i link come bottoni</h2> + +<p>The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.</p> + +<p>In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.</p> + +<p>First, some HTML:</p> + +<pre class="brush: html"><ul> + <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li> +</ul></pre> + +<p>And now our CSS:</p> + +<pre class="brush: css">body,html { + margin: 0; + font-family: sans-serif; +} + +ul { + padding: 0; + width: 100%; +} + +li { + display: inline; +} + +a { + outline: none; + text-decoration: none; + display: inline-block; + width: 19.5%; + margin-right: 0.625%; + text-align: center; + line-height: 3; + color: black; +} + +li:last-child a { + margin-right: 0; +} + +a:link, a:visited, a:focus { + background: yellow; +} + +a:hover { + background: orange; +} + +a:active { + background: red; + color: white; +}</pre> + +<p>This gives us the following result:</p> + +<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p> + +<p>Let's explain what's going on here, focusing on the most interesting parts:</p> + +<ul> + <li>Our second rule removes the default {{cssxref("padding")}} from the {{htmlelement("ul")}} element, and sets its width to span 100% of the outer container (the {{htmlelement("body")}}, in this case).</li> + <li>{{htmlelement("li")}} elements are normally block by default (see <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">types of CSS boxes</a> for a refresher), meaning that they will sit on their own lines. In this case, we are creating a horizontal list of links, so in the third rule we set the {{cssxref("display")}} property to inline, which causes the list items to sit on the same line as one another — they now behave like inline elements.</li> + <li>The fourth rule — which styles the {{htmlelement("a")}} element — is the most complicated here; let's go through it step by step: + <ul> + <li>As in previous examples, we start by turning off the default {{cssxref("text-decoration")}} and {{cssxref("outline")}} — we don't want those spoiling our look.</li> + <li>Next, we set the {{cssxref("display")}} to <code>inline-block</code> — {{htmlelement("a")}} elements are inline by default and, while we don't want them to spill onto their own lines like a value of <code>block</code> would achieve, we do want to be able to size them. <code>inline-block</code> allows us to do this.</li> + <li>Now onto the sizing! We want to fill up the whole width of the {{htmlelement("ul")}}, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size. To do this, we set the {{cssxref("width")}} to 19.5%, and the {{cssxref("margin-right")}} to 0.625%. You'll notice that all this width adds up to 100.625%, which would make the last button overflow the <code><ul></code> and fall down to the next line. However, we take it back down to 100% using the next rule, which selects only the last <code><a></code> in the list, and removes the margin from it. Done!</li> + <li>The last three declarations are pretty simple and are mainly just for cosmetic purposes. We center the text inside each link, set the {{cssxref("line-height")}} to 3 to give the buttons some height (which also has the advantage of centering the text vertically), and set the text color to black.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> +</ul> + +<p> </p> diff --git a/files/it/learn/css/styling_text/index.html b/files/it/learn/css/styling_text/index.html new file mode 100644 index 0000000000..ce435ca33b --- /dev/null +++ b/files/it/learn/css/styling_text/index.html @@ -0,0 +1,57 @@ +--- +title: Styling text +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt> + <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt> + <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt> + <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt> + <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt> + <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd> +</dl> diff --git a/files/it/learn/getting_started_with_the_web/che_aspetto_avrà_il_tuo_sito_web/index.html b/files/it/learn/getting_started_with_the_web/che_aspetto_avrà_il_tuo_sito_web/index.html new file mode 100644 index 0000000000..3d3bc69f60 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/che_aspetto_avrà_il_tuo_sito_web/index.html @@ -0,0 +1,117 @@ +--- +title: Che aspetto avrà il tuo sito Web? +slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web +tags: + - Basi + - Design + - Fonts + - Grafica + - Web + - imparare +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>Che aspetto avrà il tuo sito?</em> spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" </p> +</div> + +<h2 id="Prima_di_tutto_pianifica">Prima di tutto: pianifica</h2> + +<p>Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.</p> + +<p>Prima di iniziare dovrai rispondere a questi domande:</p> + +<ol> + <li><strong>Di cosa tratterà il tuo sito Web? </strong>Ti piacciono i cani, New York, o Pacman?</li> + <li><strong>Quali informazioni vorrai portare su quell'argomento? </strong>Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.</li> + <li><strong>Che aspetto ha il tuo sito Web </strong>in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?</li> +</ol> + +<div class="note"> +<p><strong>Nota bene</strong>: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su <a href="/it/docs/Archive/B2G_OS">Firefox OS Guidelines</a>.</p> +</div> + +<h2 id="Fare_uno_schizzo_del_design">Fare uno schizzo del design</h2> + +<p>Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>Nota bene</strong>: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.</p> + +<p><span style="font-size: 1.125rem;">I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.</span></p> +</div> + +<h2 id="Scegliere_le_tue_risorse">Scegliere le tue risorse</h2> + +<p>A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.</p> + +<h3 id="Testo">Testo</h3> + +<p>Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.</p> + +<h3 id="Colori_del_tema">Colori del tema</h3> + +<p>Per scegliere un colore, vai <a href="/it/docs/Web/CSS/CSS_Colors/Color_picker_tool">qui</a> e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come <code>#660066</code>. Questo è chiamato <em>codice esadecimale</em>, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 id="Immagini">Immagini</h3> + +<p>Per scegliere un'immagine, vai su <a href="https://images.google.com/?gws_rd=ssl">Google Immagini</a> e cerca qualcosa che faccia al caso tuo.</p> + +<ol> + <li>Quando trovi l'immagine che desideri, premi sull'immagine.</li> + <li>Premi sul bottone <em>Visualizza immagine</em>.</li> + <li>Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli <em>Salva immagine come...</em>, e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<div class="note"> +<p><strong>Nota bene</strong>: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) <strong>Strumenti</strong>, poi su 2) <strong>Diritti di utilizzo </strong>e, infine, sulla scelta che più soddisfa le vostre necessità:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> +</div> + +<h3 id="Font">Font</h3> + +<p>Per scegliere un font:</p> + +<ol> + <li>Vai su <a href="http://www.google.com/fonts">Google Fonts</a> e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.</li> + <li>Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.</li> + <li>Premi sul bottone "* Family Selected"<em> </em>nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).</li> + <li>Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li id="Installing_basic_software"><a href="/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione dei software fondamentali</a></li> + <li id="What_will_your_website_look_like"><a href="/it/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Che aspetto avrà il tuo sito Web</a></li> + <li id="Dealing_with_files"><a href="/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></li> + <li id="HTML_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Basi HTML</a></li> + <li id="CSS_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Basi CSS</a></li> + <li id="JavaScript_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Basi JavaScript</a></li> + <li id="Publishing_your_website"><a href="/it/docs/Learn/Getting_started_with_the_web/Pubblicare_il_tuo_sito">Pubblicare il tuo sito Web</a></li> + <li id="How_the_web_works"><a href="/it/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Come lavora il Web</a></li> +</ul> + +<p> </p> diff --git a/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html new file mode 100644 index 0000000000..47fb54afda --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html @@ -0,0 +1,99 @@ +--- +title: Come funziona il Web +slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>Come funziona il Web</em> spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.</p> +</div> + +<p>Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.</p> + +<h2 id="Client_e_server">Client e server</h2> + +<p>I computer connessi sul web sono chiamati <strong>client</strong> e <strong>server</strong>. Il seguente schema semplificato mostra come possono interagire tra loro:</p> + +<p><img alt="I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> + +<ul> + <li>I client sono tipicamente i dispositivi degli utenti connessi a Internet (ad esempio: il tuo computer connesso alla rete Wi-Fi o il tuo smartphone connesso alla rete mobile) e il software, presente su quei dispositivi, che ha accesso alla rete (solitamente un browser come Firefox o Chrome).</li> + <li>I server sono computer che ospitano pagine web, siti o applicazioni. Quando il dispositivo di un client vuole accedere a una pagina web, una copia della pagina viene scaricata dal server sulla macchina client per essere così visualizzata nel browser dell'utente.</li> +</ul> + +<h2 id="Le_restanti_componenti_del_Web">Le restanti componenti del Web</h2> + +<p>La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.</p> + +<p>Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p>Oltre al client e al server dobbiamo anche considerare:</p> + +<ul> + <li><strong>La tua connessione a Internet</strong>: Ti permette di inviare e ricevere dati nella rete. In sostanza, rappresenta il pezzo di strada tra la tua abitazione e il negozio.</li> + <li><strong>TCP/IP</strong>: Il Protocollo di Controllo di Trasmissione e il Protocollo Internet (TCP e IP in inglese) sono protocolli di comunicazione che definiscono come devono viaggiare i dati attraverso Internet. Sono simili al mezzo di trasporto che ti consente di effettuare un ordine, andare al negozio e fare acquisti. Nel nostro esempio, può trattarsi di una macchina o di una bici (o un qualsiasi altro mezzo con il quale desideri spostarti).</li> + <li><strong>DNS</strong>: Il sistema dei nomi di dominio (Domain Name Servers in inglese) è l'equivalente di una rubrica di indirizzi per i siti web. Quando digiti un indirizzo web nel tuo browser, quest'ultimo si collega al server DNS per trovare l'indirizzo reale del sito prima di recuperare la pagina web. Il browser deve conoscere su quale server è ospitato il sito web, così da poter inviare dei messaggi HTTP nel luogo corretto (leggi di seguito). Questa procedura è simile alla ricerca dell'indirizzo del negozio in modo tale da poterci andare.</li> + <li><strong>HTTP</strong>: Il {{Glossary("Protocol" , "protocollo")}} di trasferimento di un ipertesto (HTTP in inglese) definisce un linguaggio che permette a client e server di comunicare tra loro. È simile al linguaggio che usi per effettuare i tuoi acquisti.</li> + <li><strong>File che costituiscono il sito web</strong>: Un sito web è composto da numerosi e differenti file, i quali possono essere paragonati alle diverse parti delle merci che si acquistano nel negozio. Questi file possono essere distinti in due tipi: + <ul> + <li><strong>File di codice</strong>: I siti web sono sviluppati basandosi soprattutto su HTML, CSS e JavaScript, anche se conoscerai a breve altre tecnologie.</li> + <li><strong>Risorse</strong>: Questa categoria racchiude tutti gli altri oggetti che costituiscono un sito web, ad esempio: immagini, musica, video, documenti Word e PDF.</li> + </ul> + </li> +</ul> + +<h2 id="Ma_allora_cosa_accade_esattamente">Ma allora: cosa accade esattamente?</h2> + +<p>Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):</p> + +<ol> + <li>Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).</li> + <li>Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.</li> + <li>Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).</li> + <li>Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).</li> +</ol> + +<h2 id="Chiarimenti_sul_DNS">Chiarimenti sul DNS</h2> + +<p>I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: <code>63.245.215.20</code>.</p> + +<p>Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.</p> + +<p>I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p> + +<h2 id="Chiarimenti_sui_pacchetti">Chiarimenti sui pacchetti</h2> + +<p>Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li> +</ul> + +<h2 id="Credit">Credit</h2> + +<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> + +<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/it/learn/getting_started_with_the_web/css_basics/index.html b/files/it/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..b229d8f888 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,267 @@ +--- +title: Basi di CSS +slug: Learn/Getting_started_with_the_web/CSS_basics +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>CSS (Cascading Style Sheets) è il codice usato per modellare lo stile delle pagine web. In questo capitolo, CSS Basics, viene spiegato di cosa si ha bisogno per iniziare. Risponderemo a domande come: come faccio a rendere il testo nero o rosso? Come faccio a far visualizzare il contenuto in un certo posto sullo schermo? Come faccio a decorare la pagina web con immagini di sfondo e colori?</p> +</div> + +<h2 id="Quindi_cosa_sono_i_CSS_in_concreto">Quindi, cosa sono i CSS in concreto?</h2> + +<p>Come l'HTML, anche il CSS non è un vero e proprio linguaggio di programmazione. Si tratta di un "linguaggio di stile", che consente cioé di applicare, selettivamente, uno stile agli elementi dei documenti HTML. Per esempio, per selezionare tutti gli elementi paragrafo di una pagina HTML e rendere rosso il testo che contengono, devi scrivere questo CSS:</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>Facciamo una prova: incolliamo le tre righe di CSS nell'editor di testo, in un nuovo file e salviamolo come stile.css nella sottocartella styles.</p> + +<p>Abbiamo ancora bisogno di collegare il CSS al documento HTML, altrimenti non influenzerà il modo in cui il browser visualizza il documento HTML. (Se non avete seguito il nostro progetto, leggete <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> (Gestire i files) e <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics (Nozioni di base di HTML)</a> per scoprire cosa è stato fatto fin qui.</p> + +<ol> + <li>Apriamo il file index.html e incolliamo la seguente riga nella sezione <head>, cioè tra i tag <head> e </head>. + <pre class="brush: html notranslate"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + </li> + <li>Salviamo index.html e apriamolo nel browser. Si dovrebbe vedere qualcosa di simile a questo:</li> +</ol> + +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Se il testo dei paragrafi ora è rosso, congratulazioni! Hai appena scritto il tuo primo CSS funzionante.</p> + +<h3 id="Anatomia_di_un_set_di_regole_CSS">Anatomia di un set di regole CSS</h3> + +<p>Diamo un'occhiata più approfondita al CSS precedente.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p>Tutta la struttura è chiamata "insieme di regole" (rule set), ma spesso anche solo "regola", per brevità. Nota anche i nomi delle singole parti:</p> + +<dl> + <dt>Selettore</dt> + <dd>Il nome dell'elemento HTML all'inizio del set di regole. Seleziona l'elemento o gli elementi a cui applicare la regola (in questo caso, gli elementi p). Per applicare la regola di stile ad un elemento diverso basta cambiare il selettore.</dd> + <dt>Dichiarazione</dt> + <dd>Una sola regola/dichiarazione (color: red;) che definisce una delle proprietà dell'elemento.</dd> + <dt>Proprietà</dt> + <dd>Le proprietà di un dato elemento HTML che è possibile modificare; in questo caso il colore. Il colore è una delle proprietà degli elementi p. Nelle regole dei CSS si sceglie quali proprietà si desidera modificare.</dd> + <dt>Valore della proprietà</dt> + <dd>A destra della proprietà, separato dai due punti, si definisce il valore di quella proprietà, scegliendone uno tra i molti possibili (ci sono molti altri colori oltre al rosso).</dd> +</dl> + +<p>Notate le altre parti importanti della sintassi:</p> + +<ul> + <li>A parte il selettore, ogni gruppo di regole deve essere chiuso tra parentesi graffe ({}).</li> + <li>All'interno di ogni dichiarazione, è necessario utilizzare i due punti (:) per separare proprietà e valore.</li> + <li>All'interno di ogni set di regole, è necessario utilizzare un punto e virgola (;) per separare una dichiarazione da quella successiva.</li> +</ul> + +<p>Quindi, per modificare i valori di molte proprietà in una sola volta, è sufficiente scriverle separate da un punto e virgola; in questo modo:</p> + +<pre class="brush: css notranslate">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 id="Selezionare_più_elementi">Selezionare più elementi</h3> + +<p>È anche possibile selezionare più tipi di elementi e applicare a tutti un unico insieme di regole. Bisogna specificare più selettori separandoli con virgole. Per esempio:</p> + +<pre class="brush: css notranslate">p,li,h1 { + color: red; +}</pre> + +<h3 id="Differenti_tipi_di_selettori">Differenti tipi di selettori</h3> + +<p>Ci sono molti diversi selettori. Fin qui, abbiamo guardato solo ai selettori elemento, che selezionano tutti gli elementi di un tipo; ma siamo in grado di effettuare selezioni più specifiche. Ecco alcuni dei più comuni tipi di selettore:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nome del selettore</th> + <th scope="col">Cosa seleziona</th> + <th scope="col">Esempio</th> + </tr> + </thead> + <tbody> + <tr> + <td>Element selector (a volte chiamato tag o type selector)</td> + <td>Tutti gli elementi HTML del tipo specificato</td> + <td><code>p</code><br> + seleziona gli elementi <code><p></code></td> + </tr> + <tr> + <td>ID selector</td> + <td>L'elemento della pagina con l'ID specificato (in una specifica pagina HTML è consentito un solo elemento con un certo ID).</td> + <td><code>#my-id</code><br> + Seleziona <code><p id="my-id"></code> or <code><a id="my-id"></code></td> + </tr> + <tr> + <td>Class selector</td> + <td>Gli elementi della pagina della classe specificata (in una pagina la classe può essere richiamata più volte).</td> + <td><code>.my-class</code><br> + Selects <code><p class="my-class"></code> and <code><a class="my-class"></code></td> + </tr> + <tr> + <td>Attribute selector</td> + <td>Gli elementi della pagina con l'attributo specificato</td> + <td><code>img[src]</code><br> + Seleziona <code><img src="myimage.png"></code> ma non <code><img></code></td> + </tr> + <tr> + <td>Pseudo class selector</td> + <td>Gli elementi specificati, ma solo quando sono nello stato specificato, ad esempio quando c'è su il mouse.</td> + <td><code>a:hover</code><br> + Seleziona <code><a></code>, ma solo quando il puntatore del mouse si trova sopra il link.</td> + </tr> + </tbody> +</table> + +<p>Ci sono molti altri selettori da conoscere e se ne può trovare un elenco più dettagliato nella nostra <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a> (guida ai selettori).</p> + +<h2 id="Caratteri_e_testo">Caratteri e testo</h2> + +<p>Ora che abbiamo esplorato alcune nozioni di base dei CSS, possiamo aggiungere alcune regole e informazioni in più al nostro file stile.css per dare al nostro esempio un aspetto gradevole. Per cominciare, cerchiamo di migliorare l'aspetto dei caratteri e del testo.</p> + +<ol> + <li>Prima di tutto, andiamo a riprendere i <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">Google Font</a> che abbiamo memorizzato in un posto sicuro. Aggiungiamo il tag <link ...> da qualche parte nella <head> del documento index.html (ancora una volta, in qualsiasi punto tra i tag <head> e </head>. Sarà qualcosa di simile a questo: + + <pre class="brush: html notranslate"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + </li> + <li>Successivamente, eliminiamo la regola creata prima: è stato un buon esercizio, ma il testo rosso in realtà non è una bellezza.</li> + <li>Al suo posto mettiamo le righe seguenti, sostituendo la linea segnaposto con la vera "font-family" ottenuta da Google Font. (Font-family significa semplicemente "famiglia di caratteri" che si desidera utilizzare). Questa regola imposta un font di base e la dimensione del carattere per l'intera pagina (poiché <html> è l'elemento padre di tutta la pagina, essendo tutti gli altri elementi al suo interno, erediteranno tutti gli stessi font-size e font-family): + <pre class="brush: html notranslate">html { + font-size: 10px; /* px significa 'pixels': la dimensione base del carattere è ora alta 10 pixels */ + font-family: segnaposto - questo dovrebbe essere il resto dell'output ottenuto da Google Fonts +}</pre> + + <div class="note"> + <p><strong>Nota</strong>: per spiegare cosa significa "px" è stato aggiunto un "commento". Tutto ciò che, in un documento CSS, sta tra i simboli /* e */ è un <strong>commento CSS</strong> che il browser ignora quando esegue il rendering del codice. In questo modo si possono scrivere utili annotazioni su cosa si sta facendo con quelle regole.</p> + </div> + </li> + <li>Ora impostiamo le dimensioni dei caratteri per gli elementi di testo contenuti all'interno del "corpo" del documento HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Inoltre, centriamo il testo dell'intestazione e regoliamo l'altezza delle linee e la spaziatura dei caratteri per rendere il contenuto un po' più leggibile: + <pre class="brush: css notranslate">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p>È possibile regolare questi valori a piacimento per far apparire il progetto come si vuole, ma dovrebbe essere qualcosa del genere:</p> + +<p><img alt="Immagine della pagina creata, un logo Mozilla e alcuni paragrafi. Impostato un tipo di carattere sans-serif, la dimensione dei caratteri, l'altezza delle linee, la spaziatura tra le lettere e l'intestazione della pagina è stata centrata." src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> + +<h2 id="Box_box_tutta_una_questione_di_box">Box, box, tutta una questione di box</h2> + +<p>Una cosa che noterete riguardo ai CSS è che sono in gran parte assimilabili a contenitori (boxes): se ne modificano le dimensioni, il colore, la posizione, ecc. La maggior parte degli elementi HTML della pagina può essere pensato come un contenitore impilato su un altro.</p> + +<p><img alt="Immagine di una grande pila di casse impilate una sopra l'altra" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>Non a caso, la struttura dei CSS si basa principalmente sul "box model". Ciascuno dei blocchi (o contenitori), occupando spazio sulla pagina, ha proprietà come queste:</p> + +<ul> + <li>padding (imbottitura), lo spazio intorno al contenuto (ad esempio intorno al testo di un paragrafo)</li> + <li>border (bordo), la linea continua che si trova intorno all'imbottitura (padding)</li> + <li>margin (margine), lo spazio intorno al bordo, la parte esterna dell'elemento</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p>In questa sezione usiamo anche:</p> + +<ul> + <li><code>width</code> (larghezza di un elemento)</li> + <li><code>background-color</code>, il colore di sfondo dell'elemento</li> + <li><code>color</code>, il colore del contenuto dell'elemento (abitualmente testo)</li> + <li><code>text-shadow</code>: imposta un ombra per il testo contenuto nell'elemento</li> + <li><code>display</code>: imposta la modalità di visualizzazione dell'elemento (per ora no ti preoccupare di cosa voglia dire)</li> +</ul> + +<p>Adesso, aggiungiamo un po' di regole al documento CSS! Mettiamole in fondo alla pagina e sperimentiamo senza paura modificando i valori per vedere cosa si ottiene.</p> + +<h3 id="Cambiare_il_colore_della_pagina">Cambiare il colore della pagina</h3> + +<pre class="brush: css notranslate">html { + background-color: #00539F; +}</pre> + +<p>Questa regola imposta il colore di sfondo per l'intera pagina. Modificate il codice relativo al colore con quello che avete scelto pianificando il sito.<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color"> (planning your site</a>).</p> + +<h3 id="Formattazione_del_<body>">Formattazione del <body></h3> + +<pre class="brush: css notranslate">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>Qui ci sono diverse dichiarazioni; vediamole una per una:</p> + +<ul> + <li><code>width: 600px;</code> — imposta una larghezza fissa di 600 px</li> + <li><code>margin: 0 auto;</code> — Quando si impostano 2 valori per le proprietà <code>margin</code> o <code>padding</code>, il primo valore sarà riferito ai lati top e bottom (in questo caso li rende uguali a 0), il secondo valore ai lati left e right (in questo caso imposta il valore <code>auto</code> che è uno speciale valore che divide lo spazio disponibile orizzontalmente tra i due lati). Si possono anche usare 1, 3 o 4 valori come documentato <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">qui</a>.</li> + <li><code>background-color: #FF9500;</code> — come già visto, imposta il colore di sfondo dell'elemento. Ho usato un reddish orange per l'elemento <body> per contrastare il dark blue dell'elemento <html>. Vai avanti a sperimentare. Sentiti libero di usare il white o qualunque altro colore ti piaccia.</li> + <li><code>padding: 0 20px 20px 20px;</code> — abbiamo 4 valori di padding, per creare un po' di spazio attorno al contenuto. Questa volta il padding è 0 per il lato top del <body> e 20 pixels per left, bottom e right. I valori si riferiscono, nell'ordine, ai lati top, right, bottom, left (senso orario).</li> + <li><code>border: 5px solid black;</code> — qui si imposta un bordo di 5 pixel di spessore, solid, nero (black) su tutti i lati dell'elemento <body>.</li> +</ul> + +<h3 id="Posizionare_e_formattare_il_titolo_principale_della_pagina">Posizionare e formattare il titolo principale della pagina</h3> + +<pre class="brush: css notranslate"><code>h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</code></pre> + +<p>Potresti aver notato che c'è un orribile spazio in cima all'elemento body. Questo accade perché i browsers applicano alcune formattazioni di default all'elemento {{htmlelement("h1")}} (tra gli altri) anche quando non viene definita alcuna regola nel CSS. Ciò potrebbe sembrare una cattiva idea, ma si vuole che anche un documento non formattato abbia una minima leggibilità. Per eliminare quello spazio abbiamo scavalcato il comportamento del browser impostando <code>margin: 0;</code>.</p> + +<p>Poi abbiamo impostato il padding dei lati top e bottom del titolo a 20 pixels e assegnato al testo lo stesso colore dello sfondo dell'elemento <html>.</p> + +<p>Una proprietà piuttosto interessante che abbiamo usato é <code>text-shadow</code>, che applica un'ombra al testo contenuto nell'elemento. I suoi 4 valori sono i seguenti:</p> + +<ul> + <li>Il primo valore in pixels imposta l' <strong>horizontal offset</strong> (spostamento orizzontale) dell'ombra dal testo — di quanto si sposta; un valore negativo la sposta a sinistra</li> + <li>Il secondo valore in pixels imposta il <strong>vertical offset</strong> (spostamento verticale) — di quanto si sposta in giù; un valore negativo la sposta verso l'alto</li> + <li>Il terzo valore in pixels imposta il <strong>blur radius</strong> (raggio di sfumatura) dell'ombra — un valore più grande determina un'ombra maggiormente offuscata.</li> + <li>Il quarto valore imposta il colore base dell'ombra.</li> +</ul> + +<p>Ancora, proviamo a sperimentare diversi valori per capire quali effetti possiamo ottenere.</p> + +<h3 id="Centrare_limmagine">Centrare l'immagine</h3> + +<pre class="brush: css notranslate">img { + display: block; + margin: 0 auto; +}</pre> + +<p>Infine, centriamo l'immagine per avere un miglior effetto. Possiamo usare il trucco dei margini (<code>margin: 0 auto</code>) come abbiamo già fatto per il body, ma abbiamo anche bisogno di qualcos'altro: l'elemento body è <strong>block level</strong>, ciò significa che prende spazio nella pagina e gli possono essere applicati parametri come i margini e il padding. Le immagini, al contrario, sono elementi <strong>inline</strong>, il che significa che non gli si potrebbe attribuire quei parametri; quindi per applicare all'immagine i margini dobbiamo stabilire che si comporti come i blocchi, usando la regola "<code>display: block;</code>".</p> + +<div class="note"> +<p><strong>Nota</strong>: non preoccuparti se per ora non capisci la regola <code>display: block;</code> e la distinzione tra elementi del block level e inline level. La imparerai studiando più in dettaglio i CSS. Puoi scoprire di più sui possibili valori display nella nostra pagina di riferimento (<a href="/en-US/docs/Web/CSS/display">display reference page</a>).</p> +</div> + +<h2 id="Conclusioni">Conclusioni</h2> + +<p>Se hai seguito tutte le istruzioni in questo articolo dovresti aver ottenuto qualcosa che assomiglia a questo (puoi confrontare <a href="http://mdn.github.io/beginner-html-site-styled/">la nostra versione qui</a>):</p> + +<p><img alt="Il logo mozilla, centrato, titolo e paragrafi. Adesso ha un bello stile con uno sfondo blu per l'intera pagina e arancione per la fascia principale." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> + +<p>Se sei bloccato puoi sempre confrontare il tuo lavoro con il nostro su GitHUb (<a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">finished example code on Github</a>).</p> + +<p>Qui abbiamo solo scalfito la superfice dei CSS. Per scoprire di più vai a vedere <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html b/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html new file mode 100644 index 0000000000..d7c574320b --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html @@ -0,0 +1,95 @@ +--- +title: Gestire i file +slug: Learn/Getting_started_with_the_web/Gestire_i_file +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata, facendo si che essi possano <em>dialogare</em> tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">caricarli su un server</a>. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura corretta dei files necessari al tuo sito web.</p> +</div> + +<h2 id="Dove_andrebbe_collocato_il_tuo_sito_web_all'interno_del_tuo_computer">Dove andrebbe collocato il tuo sito web all'interno del tuo computer?</h2> + +<p>Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.</p> + +<ol> + <li>Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata <code>progetti-web</code> (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.</li> + <li>Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala <code>sito-test</code> (o qualcosa di più fantasioso).</li> +</ol> + +<h2 id="Un_chiarimento_riguardo_gli_spazi_e_la_distinzione_tra_maiuscole_e_minuscole">Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole</h2> + +<p>Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:</p> + +<ol> + <li>Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella <code>test-site</code> e le assegni il nome <code>MyImage.jpg</code>, ma successivamente provi ad aprirla usando <code>myimage.jpg</code>, potrebbe non funzionare.</li> + <li>Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli spazi nei URL), rendendo impossibile aprire tutti i tuoi link. È meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: <code> my-file.html</code> o <code>my_file.html</code>.</li> +</ol> + +<p>In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.</p> + +<h2 id="Quale_struttura_dovrebbe_avere_il_tuo_sito">Quale struttura dovrebbe avere il tuo sito?</h2> + +<p>La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:</p> + +<ol> + <li><code><strong>index.html</strong></code>: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato <code>index.html</code> e salvalo nella cartella <code>test-site</code>.</li> + <li><strong>cartella <code>images</code></strong>: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata <code>images</code>, nella cartella <code>test-site</code>.</li> + <li><strong>cartella <code>styles</code></strong>: Questa cartella racchiude il codice CSS usato per creare il contenuto grafico (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata <code>styles</code>, nella cartella <code>test-site</code>.</li> + <li><strong>cartella <code>scripts</code></strong>: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata <code>scripts</code>, nella cartella <code>test-site</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata <strong>Nascondi estensioni per tipi di file conosciuti</strong> attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando <strong>Opzioni cartella...</strong> , deselezionare <strong>Nascondi estensioni per tipi di file conosciuti</strong>, poi cliccando <strong>OK</strong>. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!</p> +</div> + +<h2 id="Percorsi_dei_file">Percorsi dei file</h2> + +<p>Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa <em>sapere</em> dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file <code>index.html</code>, rendendo così possibile mostrare l'immagine scelta nell'articolo <a href="/it/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Come dovrebbe apparire il tuo sito web?"</a></p> + +<ol> + <li>Copia l'immagine scelta in precedenza nella cartella <code>images</code>.</li> + <li>Apri il file <code>index.html</code>, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti del suo significato per ora - approfondiremo i dettagli più avanti. + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>La mia pagina di prova</title> + </head> + <body> + <img src="" alt="La mia immagine di prova"> + </body> +</html> </pre> + </li> + <li>La riga <code><img src="" alt="My test image"></code> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory <em>images</em>, che a sua volta è nella directory comune a <code>index.html</code>. Scorrendo lo schema strutturale da <code>index.html</code> alla nostra immagine, il percorso che dovremmo avere è: <code>images/your-image-filename</code>. Se ad esempio, la mia immagine si chiama <code>firefox-icon.png</code>, allora il percorso corretto sarà <code>images/firefox-icon.png</code>.</li> + <li>Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di <code>src=""</code>.</li> + <li>Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.</li> +</ol> + +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p>Alcune regole generali per i percorsi dei file:</p> + +<ul> + <li>Per indicare che il file è nella stessa cartella / directory del file HTML richiesto, puoi semplicemente usare il nome del file, ad esempio: <code>my-image.jpg</code>.</li> + <li>Per riferirti ad un file in una sotto cartella / directory, scrivi il nome della directory prima del nome del file e separali con un forward slash (/), ad esempio <code>subdirectory/my-image.jpg</code>.</li> + <li>Per usare un file che si trova in una cartella / directory al di fuori di quella dove risiede il file HTML richiesto, si possono usare due punti (<code>..</code>). Ad esempio se <code>index.html</code> si trova in una sotto cartella / directory di <code>test-site</code> e <code>my-image.jpg</code> è all'interno di <code>test-site</code>, <code>my-image.jpg</code> può essere richiamato da <code>index.html</code> usando <code>../my-image.jpg</code>.</li> + <li>Queste notazioni, possono essere combinate come si preferisce, ad esempio <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li> +</ul> + +<p>For now, this is about all you need to know.</p> + +<div class="note"> +<p><strong>Nota</strong>: Il file system di Windows, usa i backslash, non i forward slash, esempio: <code>C:\windows</code>. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.</p> +</div> + +<h2 id="Cos'altro_dovrei_fare">Cos'altro dovrei fare?</h2> + +<p>Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:</p> + +<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/html_basics/index.html b/files/it/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..8ab4970c7c --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,217 @@ +--- +title: Basi di HTML +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Corso + - Principianti +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>HTML (<strong>H</strong>ypertext Markup Language) è il codice usato per strutturare e visualizzare una pagina web e il suo contenuto. Per esempio, il contenuto potrebbe essere strutturato in una serie di paragrafi, un elenco oppure con immagini e tabelle di dati. Come suggerisce il titolo, questo articolo ti fornirà una comprensione di base dell'HTML e delle sue funzioni.</p> +</div> + +<h2 id="Ma_cosè_veramente_lHTML">Ma cos'è veramente l'HTML?</h2> + +<p>HTML non è un linguaggio di programmazione; è un linguaggio basato sui <em>markup</em>, ed è utilizzato per indicare al browser come visualizzare le pagine web che vengono visitate. Può essere complicato o semplice a seconda di come i web designer ne utilizzano le funzionalità. HTML consiste in una serie di <strong>{{Glossary("element", "elementi")}}</strong>, che vengono usati per raggruppare o impacchettare parti differenti del contenuto, per farlo apparire o agire in uno specifico modo. L'uso dei {{Glossary("tag", "tags")}} può fare di una parola o di un'immagine un hyperlink, ossia un collegamento a qualcos'altro, oppure può rendere il testo in corsivo, il font più grande o più piccolo, eccetera. Per esempio, prendiamo la seguente linea del contenuto:</p> + +<pre class="notranslate">My cat is very grumpy</pre> + +<p>Se vogliamo che la linea venga visualizzata isolatamente, possiamo specificare che è un paragrafo, includendola all'interno di tags che identificano il paragrafo:</p> + +<pre class="brush: html notranslate"><p>My cat is very grumpy</p></pre> + +<h3 id="Anatomia_di_un_elemento_HTML">Anatomia di un elemento HTML</h3> + +<p>Analizziamo in maniera più approfondita l'elemento che identifica il paragrafo.</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Le parti principali dell'elemento sono:</p> + +<ol> + <li><strong>Il tag di apertura:</strong> è il nome dell'elemento (in questo caso, p), incluso tra il <strong>segno di minore</strong> e il <strong>segno di maggiore</strong>. Questo indica dove l'elemento inizia, o dove inizia ad avere effetto — in questo caso indica l'inizio del paragrafo.</li> + <li><strong>Il tag di chiusura:</strong> ha lo stesso formato del tag di apertura ad eccezione della barra che deve precedere il nome dell'elemento. Indica dove termina l'elemento — in questo caso, la fine del paragrafo. Dimenticare di includere il tag di chiusura è uno degli errori più comuni tra i principianti e può portare a risultati imprevisti.</li> + <li><strong>Il contenuto:</strong> Questo rappresenta il contenuto dell'elemento, che nel nostro caso è solo testo.</li> + <li><strong>L'elemento:</strong> Il tag di apertura insieme al tag di chiusura ed al contenuto rappresentano l'elemento.</li> +</ol> + +<p>Gli elementi possono anche avere attributi, come nell'esempio che segue:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Gli attributi contengono informazioni extra sull'elemento che non si desidera appaiano nel contenuto visualizzato. Nell'esempio, <code>class</code> è il <em>nome</em> dell'attributo, e <code>editor-note</code> è il<em> valore</em> dell'attributo. L'attributo <code>class</code> permette di associare un identificatore all'elemento che potrà essere usato in seguito per applicare all'elemento informazioni di stile e altre cose.</p> + +<p>Un attributo dovrebbe sempre avere:</p> + +<ol> + <li>Uno spazio che lo separa dal nome dell'elemento (o dal precedente attributo, se l'elemento ha già uno o più attributi)</li> + <li>Il nome dell'attributo, seguito dal segno di uguale</li> + <li>Il valore dell'attributo incluso tra doppi apici. </li> +</ol> + +<h3 id="Elementi_annidati">Elementi annidati</h3> + +<p>E' possibile anche inserire elementi all'interno di altri elementi — questa modalità è chiamata <strong>nesting (annidamento)</strong>. Se volessimo affermare che "The cat is <strong>very</strong> grumpy", potremmo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, che indica che la parola deve essere fortemente enfatizzata:</p> + +<pre class="brush: html notranslate"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>Bisogna tuttavia assicurarsi che gli elementi siano opportunamente annidati: nell'esempio sopra abbiamo aperto il primo elemento {{htmlelement("p")}}, poi l'elemento <span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;">{{htmlelement("strong")}}</span>, perciò dobbiamo chiudere l'elemento {{htmlelement("strong")}} per primo, poi l'elemento {{htmlelement("p")}}. L'esempio che segue non è corretto:</p> + +<pre class="example-bad brush: html notranslate"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>Gli elementi devono essere aperti e chiusi correttamente in modo che sia chiaro come essi si trovino l'uno all'interno dell'altro. Se si sovrappongono come nell'esempio sopra, il browser web cercherà di interpretare al meglio quello che si sta cercando di dire, ma si potrebbero ottenere risultati inattesi. Quindi non va fatto!</p> + +<h3 id="Elementi_vuoti">Elementi vuoti</h3> + +<p>Alcuni elementi non hanno contenuto, e sono chiamati <strong>elementi vuoti</strong>. Prendiamo l'elemento {{htmlelement("img")}} che abbiamo nel nostro HTML:</p> + +<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Contiene due attributi, ma non c'è il tag di chiusura <code></img></code> e non c'è un testo incluso. Questo perchè un elemento immagine non deve avere effetti su un testo. Il suo scopo è quello di aggiungere un'immagine alla pagina HTML nel punto in cui si trova.</p> + +<h3 id="Anatomia_di_un_documento_HTML">Anatomia di un documento HTML</h3> + +<p>Include la struttura base dei singoli elementi HTML, che non sono tuttavia molto utili da soli. Ora vedremo come singoli elementi sono combinati per formare un'intera pagina HTML. Riguardiamo il codice che abbiamo inserito nel nostro esempio <code>index.html</code> (che abbiamo incontrato per la prima volta nell'articolo <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>):</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p>Abbiamo:</p> + +<ul> + <li><code><!DOCTYPE html></code> — Il doctype. Nella notte dei tempi, quando l'HTML era giovane (circa nel 1991/2), doctypes avevano lo scopo di raggruppare un insieme di regole che la pagina HTML doveva seguire per essere considerata buon HTML, come poteva essere il controllo automatico degli errori e altre cose utili. Tuttavia oggi nessuno se ne interessa e sono ormai solo un artefatto storico che necessitano di essere inclusi perchè tutto funzioni correttamente. Per ora, questo è tutto ciò che occorre sapere.</li> + <li><code><html></html></code> — l'elemento {{htmlelement("html")}}. Questo elemento racchiude tutti i contenuti dell'intera pagina, ed è talvolta noto come elemento radice.</li> + <li><code><head></head></code> — l'elemento {{htmlelement("head")}}. Questo elemento fà da contenitore per tutte le cose che si vuole includere nella pagina HTML che <em>non siano</em> il contenuto che si vuole mostrare ai visitatori della pagina. Tra queste ci sono cose come {{Glossary("keyword", "keywords")}} e una descrizione della pagina che si vuole appaia nei risultati di ricerca, CSS per lo stile dei contenuti, dichiarazione del set di caratteri e altro.</li> + <li><code><meta charset="utf-8"></code> — questo elemento imposta il set di caratteri che il documento deve usare su UTF-8, che include la maggior parte dei caratteri della stragrande maggioranza delle lingue umane scritte. Essenzialmente può gestire qualsiasi contenuto testuale che può essere inserito. Non c'è motivo per non impostarlo, e può evitare di incorrere in problemi in seguito.</li> + <li><code><title></title></code> — l'elemento {{htmlelement("title")}}. Imposta il titolo della pagina, che è il titolo che appare nella scheda del browser in cui è caricata la pagina. E' anche usato per descrivere la pagina quando viene aggiunta ai preferiti.</li> + <li><font color="#333333" face="Consolas"><body></body></font><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> — l'elemento {{htmlelement("body")}}. Contiene </span><em>tutto</em><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> il contenuto che si vuole mostrare agli utenti web quando visitano la pagina, che si tratti di testo, immagini, video, giochi, tracce audio riproducibili o qualsiasi altra cosa.</span></li> +</ul> + +<h2 id="Immagini">Immagini</h2> + +<p>Rivolgiamo ancora la nostra attenzione all'elemento {{htmlelement("img")}}:</p> + +<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Come abbiamo detto prima, quest'elemento aggiunge un'immagine nella pagina, nella posizione in cui si trova. E' l'attributo <code>src</code> (source) che fa questo, contenendo il percorso del file immagine.</p> + +<p>Abbiamo anche incluso l'attributo <code>alt</code> (alternative). In questo attributo viene specificato il testo descrittivo per quegli utenti che non possono visualizzare l'immagine, probabilmente per i seguenti motivi:</p> + +<ol> + <li>Sono ipovedenti. Gli utenti con disabilità visive significative spesso usano strumenti chiamati screen reader che leggono per loro il testo dell'elemento alt</li> + <li>Qualcosa è andato storto causando la mancata visualizzazione dell'immagine. Per esempio, se si prova a modificare deliberatamente il percorso all'interno dell'attributo <code>src</code> per renderlo errato. Salvando e ricaricando la pagina, si dovrebbe vedere qualcosa di simile a ciò che segue, al posto dell'immagine:</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p>Le parole chiave per il testo nell'alt sono "testo descrittivo". Il testo che viene scrito nell'alt dovrebbe fornire al lettore informazioni sufficienti per avere una buona idea di ciò che l'immagine rappresenta. In questo esempio, il testo attuale "My test image" non è per niente adatto. Un'alternativa decisamente migliore per il logo di Firefox potrebbe essere "Il logo di Firefox: una volpe fiammeggiante che circonda la Terra."</p> + +<p>Prova subito a trovare un testo adatto per l'alt delle tua immagine.</p> + +<div class="note"> +<p><strong>Nota</strong>: Scopri di più sull'accessibilità al link <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p> +</div> + +<h2 id="Marcatura_del_testo">Marcatura del testo</h2> + +<p>Questa sezione riguarda alcuni elementi HTML di base che vengono usati per la marcatura del testo.</p> + +<h3 id="Intestazioni">Intestazioni</h3> + +<p>Gli elementi Intestazioni permettono di specificare che alcune parti del contenuto sono titoli — o sottotitoli. Allo stesso modo in cui un libro ha un titolo principale, titoli di capitoli e sottotitoli, così anche un documento HTML. HTML contiene sei livelli di intestazione, {{htmlelement("h1")}}–{{htmlelement("h6")}} sebbene in genere se ne usino da 3 a 4 al massimo:</p> + +<pre class="brush: html notranslate"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></pre> + +<p>Ora prova ad aggiungere un titolo adatto alla tua pagina HTML appena sopra l'elemento {{htmlelement("img")}}.</p> + +<h3 id="Paragrafi">Paragrafi</h3> + +<p>Come spiegato sopra, gli elementi {{htmlelement("p")}} sono usati per contenere paragrafi di testo; verranno usati di frequente per contrassegnare contenuti di testo regolari:</p> + +<pre class="brush: html notranslate"><p>This is a single paragraph</p></pre> + +<p>Aggiungi il tuo testo di esempio (dovresti averlo dall'articolo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) in uno o più paragrafi, direttamente sotto l'elemento {{htmlelement("img")}}.</p> + +<h3 id="Liste">Liste</h3> + +<p>Molti contenuti web sono elenchi, e l'HTML ha elementi speciali per gestirli. La marcatura di liste consiste sempre in almeno due elementi. I tipi più comuni di lista sono le liste ordinate e le liste non ordinate:</p> + +<ol> + <li> + <p><strong>Le liste non ordinate </strong>sono liste in cui l'ordine degli articoli non ha importanza, come in una lista della spesa. Queste sono racchiuse in un elemento {{htmlelement("ul")}}.</p> + </li> + <li><strong>Le liste ordinate</strong> sono liste dove l'ordine degli articoli ha importanza, come in una ricetta. Queste sono racchiuse in un elemento {{htmlelement("ol")}}.</li> +</ol> + +<p>Ogni articolo all'interno delle liste è inserito all'interno di un elemento {{htmlelement("li")}} (list item).</p> + +<p>Per esempio, se volessimo convertire una parte del seguente paragrafo in una lista:</p> + +<pre class="brush: html notranslate"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p>Potremmo modificare la marcatura così:</p> + +<pre class="brush: html notranslate"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></pre> + +<p>Prova ad aggiungere una lista ordinata e una non ordinata alla tua pagina di esempio.</p> + +<h2 id="I_collegamenti">I collegamenti</h2> + +<p>I link sono molto importanti — sono quelli che rendono il web una rete! Per aggiungere un collegamento, si deve usare un semplice elemento — {{htmlelement("a")}} — la "a" è l'abbreviazione di "anchor". Per convertire il testo del paragrafo in un link, seguire i seguenti passaggi:</p> + +<ol> + <li>Scegliere il testo. Noi abbiamo scelto "Mozilla Manifesto".</li> + <li>Includere il testo in un elemento {{htmlelement("a")}}, come segue: + <pre class="brush: html notranslate"><a>Mozilla Manifesto</a></pre> + </li> + <li>Dare all'elemento {{htmlelement("a")}} un attributo <code>href</code>, come segue: + <pre class="brush: html notranslate"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>Compilare il valore di quest'attributo con l'indirizzo web a cui si desidera che il collegamento si colleghi: + <pre class="brush: html notranslate"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p>Si potrebbero ottenere risultati imprevisti se si omettono <code>https://</code> o <code>http://</code>, che sono chiamati <em>protocollo</em>, all'inizio dell'indirizzo web. Dopo aver impostato un link, fare click su di esso per assicurarsi che si colleghi dove desiderato.</p> + +<div class="note"> +<p><code>href</code> potrebbe apparire in un primo momento come una scelta piuttosto oscura per un nome di attributo. Se hai difficoltà a memorizzarlo, ricorda che sta per <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p> +</div> + +<p>Ora puoi aggiungere un link alla tua pagina, se ancora non l'hai fatto.</p> + +<h2 id="Conclusione">Conclusione</h2> + +<p>Se hai seguito tutte le istruzioni di questo articolo, dovresti aver ottenuto una pagina che assomiglia a questa riportata sotto (può essere anche visualizzata da questo link <a href="http://mdn.github.io/beginner-html-site/">view it here</a>):<br> + <br> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>Se ti sei bloccato, puoi sempre confrontare il tuo lavoro con il codice di esempio <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example code</a> che trovi su GitHub.</p> + +<p>Qui, abbiamo solo graffiato la superficie dell'HTML. Per saperne di più, vai al seguente link <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/index.html b/files/it/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..a079b7905b --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/index.html @@ -0,0 +1,59 @@ +--- +title: Primi Passi con il Web +slug: Learn/Getting_started_with_the_web +tags: + - Beginner + - CSS + - Design + - Guide + - HTML + - Índice +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}} +<div></div> +</div> + +<div class="summary"> +<p><em>Primi passi con il Web</em> è una breve introduzione alle tecniche dello sviluppo web. Inizieremo conoscendo e impostando gli strumenti necessari per disegnare una semplice pagina web e pubblicare il tuo codice.</p> +</div> + +<h2 id="La_storia_del_tuo_primo_sito_web">La storia del tuo primo sito web</h2> + +<p>Creare un sito web professionale non è certo un lavoro breve, se ti approcci per la prima volta allo sviluppo web ti suggeriamo di partire imparando le basi. Non abbiamo la pretesa di creare un nuovo Facebook ma non è difficile pubblicare il tuo semplice sito online; inizieremo da qua.</p> + +<p>Seguendo le istruzioni contenute nei successivi articoli vedrai la tua prima pagina web pubblicata. Iniziamo!</p> + +<h3 id="Installare_il_software_fondamentale"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software fondamentale</a></h3> + +<p>Quando si tratta di strumenti per lo sviluppo web ci sono molti software utili. Se stai iniziando potresti essere confuso dalla quantità di editor, framework e strumenti per testing che ci sono. Nella sezione <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software fondamentale</a> puoi trovare guide passo-passo su come installare tutti gli strumenti che ti serviranno per iniziare con lo sviluppo.</p> + +<h3 id="Che_aspetto_avrà_il_tuo_sito_web"><a href="https://wiki.developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avr%C3%A0_il_tuo_sito_web">Che aspetto avrà il tuo sito web?</a></h3> + +<p>Prima di iniziare a disegnare il tuo sito è meglio pensare a come farlo. Quali informazioni intendi mostrare? Che fonts e che colori vuoi usare? <a href="https://wiki.developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avr%C3%A0_il_tuo_sito_web">Come sarà il tuo sito?</a> Ti forniamo un semplice metodo da seguire per pianificare la struttura del sito e il suo contenuto.</p> + +<h3 id="Gestire_i_file"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></h3> + +<p>Un sito web contiene molti file con diversi tipi di contenuto: testuale, codice, css, multimediale e così via. Quando si tratta di costruire un sito è necessario assemblare questi documenti in una struttura concreta ed assicurarsi che questi file possano interfacciasi l'un l'altro. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a> ti spiega come impostare una struttura per il tuo sito e illustra i problemi dei quali essere consapevoli.</p> + +<h3 id="Principi_di_HTML"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Principi di HTML</a></h3> + +<p>Hypertext Markup Language (HTML) è il linguaggio utilizzato per strutturare il contenuto web e fornirgli forma e significato. Consente, per esempio, di crere paragrafi o elenchi puntati; permette inoltre di disporre le immagini all'interno della pagina, di inserire tabelle o altri contenuti. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Principi di HTML</a> mette a disposizione abbastanza informazioni per approcciarsi all'HTML.</p> + +<h3 id="Principi_di_CSS"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Principi di CSS</a></h3> + +<p>Cascading Stylesheets (CSS) è il tipo di codice utilizzato per aggiungere lo stile al sito. Per esempio, preferisci che il testo sia rosso oppure nero? Dove dovrebbe essere posto il contenuto sullo schermo? Che immagini di sfondo o colori dovrebbero essere inseriti per decorare la tua pagina? <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Principi di CSS</a> ti illustra le basi necessarie per iniziare.</p> + +<h3 id="Principi_di_JavaScript"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Principi di JavaScript</a></h3> + +<p>JavaScript è il linguaggio di programmazione usato per aggiungere contenuto interattivo al tuo sito, come giochi, cose che accadono alla pressione di un pulsante o all'inserimento di informazioni in un form, effetti di stile dinamici, animazioni e molto altro. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Principi di JavaScript</a> fornisce un'idea di cosa sia possibile fare con questo interessante linguaggio e di come iniziare.</p> + +<h3 id="Pubblicare_il_tuo_sito"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito</a></h3> + +<p>Una volta completata la scrittura del codice e organizzati i file che compongono il tuo sito è ovvimente necessario porre il tutto online, così che le persone possano trovarlo ed apprezzarlo. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito </a>descrive come compiere questo processo in modo facile e col minimo sforzo.</p> + +<h3 id="Come_funziona_il_Web"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Come funziona il Web</a></h3> + +<p>Quando accedi al tuo sito preferito, accadono una serie di complicati processi in background, dei quali potresti non sapere nulla. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Come funziona il web</a> spiega quello che accade quando visualizzi una pagina sul tuo computer.</p> + +<p>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..8f4871eb46 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,54 @@ +--- +title: Installazione di software fondamentali +slug: Learn/Getting_started_with_the_web/Installing_basic_software +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>In questo articolo, ti mostriamo come eseguire l'installazione di tutti i software necessari per iniziare con lo sviluppo web.</p> +</div> + +<h2 id="Quali_strumenti_utilizzano_i_professionisti">Quali strumenti utilizzano i professionisti?</h2> + +<ul> + <li><strong>Un computer</strong>. Certo, potrebbe sembrare ovvio, ma alcuni di voi staranno leggendo questo articolo su un telefono o sul computer della biblioteca. Per iniziare seriamente con lo sviluppo web, sarebbe meglio investire in un computer di tuo possesso, con un qualsiasi sistema operativo (Windows, Mac, o Linux).</li> + <li><strong>Un editor di testo</strong>, dove scrivere il codice. Si possono utilizzare editor di testo (es. <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> o <a href="https://code.visualstudio.com/">Visual Studio Code</a>), oppure un editor ibrido (es. <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). Editors per documenti da ufficio (es. Word o OpenOffice) non sono adatti allo scopo, siccome fanno affidamento su elementi nascosti che interferiscono con i motori di rendering usati dai browser web.</li> + <li><strong>Web browsers</strong>, per testare il codice. Al momento, i browser più utilizzati sono <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, e <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>. Dovrestii anche testare il tuo sito su dispositivi mobili e sui vecchi web browser che i tuoi visitatori potrebbero ancora usare (come IE 8 - 10, ad esempio).</li> + <li><strong>Un editor grafico</strong>, come <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, o <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, per creare immagini da usare nel tuo sito.</li> + <li><strong>Un version control system</strong>, per gestire i file sui server, collaborare ad un progetto con un team, condividere assets e codici, ed evitare conflitti di modifica. <a href="http://git-scm.com/">Git</a> è attualmente il version control system più utilizzato, ed inoltre il servizio di code hosting fornito da <a href="https://github.com/">GitHub</a>, basato su Git, è molto popolare.</li> + <li><strong>Un programma FTP</strong>, usato su degli account di webhosting più vecchi per gestire i file sui server (<a href="http://git-scm.com/">Git</a> sta pian piano rimpiazzando FTP per questo motivo). Esistono diversi programmi (S)FTP disponibili come ad esempio <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, e <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>Un automation system</strong>, come <a href="http://gruntjs.com/">Grunt</a> o <a href="http://gulpjs.com/">Gulp</a>, per compiere automaticamente attività ripetitive, ad esempio minimizzare il codice ed eseguire test.</li> + <li>Templates, librerie, frameworks, ecc., per velocizzare la scrittura di funzionalità comuni.</li> + <li>Ed anche altri strumenti!</li> +</ul> + +<h2 id="Di_quali_strumenti_ho_bisogno_in_questo_momento">Di quali strumenti ho bisogno, in questo momento?</h2> + +<p>Sembra proprio una lista terrificante, fortunatamente puoi iniziare ad occuparti di web development senza sapere nulla di molto di ciò elencato. In questo articolo ti mostreremo quali sono gli strumenti indispensabili per incominciare — un editor di testo e qualche browser web moderno.</p> + +<h3 id="Installare_un_editor_di_testo">Installare un editor di testo</h3> + +<p>Probabilmente hai già un editor di testo di base nel tuo computer. Windows ha <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> di default mentre macOS ha <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Le distro Linux variano; Ubuntu ha <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> di default.</p> + +<p>Per il web development, puoi probabilmente avere di meglio che NotePad o TextEdit. Noi raccomandiamo di iniziare con <a href="http://brackets.io">Brackets</a>, un editor gratuito che offre anteprime live e suggerimenti sul codice.</p> + +<h3 id="Installare_browser_web_moderni">Installare browser web moderni</h3> + +<p>Per adesso, installeremo solamente un paio di browser web per desktop per testarci il nostro codice. Scegli più sotto il tuo sistema operativo e clicca sui relativi link per scaricare il file d'installazione per il tuo browser preferito:</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> + <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> (Windows 10 contiene Edge di default; se hai Windows 7 o superiore, puoi installare Internet Explorer 11; altrimenti, dovresti installare un browser alternativo)</li> + <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (maxOS e IOS contengono Safari di default)</li> +</ul> + +<p>Prima di andare avanti, dovresti installare almeno due di questi browser e assicurarti di averli pronti per il testing.</p> + +<h3 id="Installazione_di_un_server_Web_locale">Installazione di un server Web locale</h3> + +<p>Alcuni esempi dovranno essere eseguiti da un server Web per funzionare correttamente. Per informazioni su come eseguire questa operazione, vedere Come si configura un server di prova locale? (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a> )</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..bb12f8680e --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,402 @@ +--- +title: Basi di JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - JavaScript +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>JavaScript è un linguaggio di programmazione che aggiunge interattività al tuo sito internet (per esempio: giochi, risposte al premersi di un bottone o inserimento di dati in moduli, stili dinamici e animazioni). Questo articolo ti aiuterà a iniziare il tuo percorso in questo fantastico linguaggio dandoti un'idea di ciò che è possibile costruire (spoiler alert: molte, molte cose).</p> +</div> + +<h2 id="Cosè_JavaScript_davvero">Cos'è JavaScript, davvero?</h2> + +<p>{{Glossary("JavaScript")}} ("JS" per i fan) è un {{Glossary("Dynamic programming language", "linguaggio dinamico di programmazione")}} che, quando applicato a un documento {{Glossary("HTML")}}, può dare interattività dinamica al sito web. Fu inventato da Brendan Eich, co fondatore del Mozilla project, Mozilla Foundation e Mozilla Corporation.</p> + +<p>JavaScript è incredibilmente versatile. Puoi iniziare dal piccolo, con slider (carousel), gallerie di immagini, layout fluttuanti, risposte al premersi di un bottone. Con più esperienza sarai in grado di creare giochi, grafiche animate 2D e 3D, applicazioni con database e molto altro!</p> + +<p>JavaScript è un linguaggio abbastanza compatto ma comunque flessibile. Gli Sviluppatori hanno scritto una grande varietà di plugins e snippets di codice da inserire sopra al linguaggio nativo che è il cuore di JavaScript, aprendo alle potenzialità e alle extra funzionalità del linguaggio, diminuendo gli sforzi. Queste includono:</p> + +<ul> + <li>Application Programming Interfaces per il Browser ({{Glossary("API","APIs")}}) — Le API all'interno dei web browsers regalano funzionalità come la creazione dinamica di HTML e stili CSS, la collezione e manipolazione di streaming video dalla webcam dell'utente o la generazione di grafiche 3D o di audio. </li> + <li>API di terze parti permettono agli Sviluppatori di incorporare funzionalità nei loro siti da altri providers come Twitter o Facebook.</li> + <li>Framework e librerie di terze parti possono essere applicate al tuo HTML per permetterti di costruire siti e applicazioni più rapidamente.</li> +</ul> + +<p>Questo articolo vuole essere una leggera introduzione a JavaScript, non andremo a confoderti parlando dei dettagli e delle differenze tra il linguaggio nativo di JavaScript e tutte le varie librerie e framework che sono state costruite. Potrai imparare più in dettaglio nell'<a href="/en-US/docs/Learn/JavaScript">area di apprendimento JavaScript</a>, oppure nel resto di MDN.</p> + +<p>Sotto introdurremo alcuni aspetti del linguaggio nativo e potrai giocare anche con alcune delle API del browser. Divertiti!</p> + +<h2 id="ciao_mondo">"ciao mondo"</h2> + +<p>Quanto scritto sopra potrebbe sembrare eccitante, e dovrebbe — JavaScript è una delle tecnologie più vivaci e iniziando a usarlo, i tuoi siti si apriranno a nuove dimensioni di potere e creatività.</p> + +<p>Ad ogni modo, JavaScript è un po' più complesso di HTML e CSS (che non sono propriamente linguaggi di programmazione, bensì di markup e di stile). Puoi iniziare con piccole cose come questa qui sotto. Iniziamo con l'aggiungere del JavaScript di base alla nostra pagina creando un esempio "ciao mondo" (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">lo standard negli esempi base di programmazione</a>).</p> + +<div class="warning"> +<p><strong>Importante</strong>: Se non hai seguito il resto del corso, scarica questo <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">esempio</a> e usalo come punto di inizio.</p> +</div> + +<ol> + <li>Per prima cosa andiamo dove abbiamo salvato il nostro sito di test e creiamo una nuova cartella 'scripts' (senza gli apici). Poi al suo interno creiamo un file e chiamiamolo <code>main.js</code> (questo file è uno script di JavaScript).</li> + <li>Poi, nel tuo file <code>index.html </code>inserisci questo elemento in una nuova riga prima del tag di chiusura <code></body></code>: + <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> + </li> + <li>Praticamente stiamo facendo quello che avremmo fatto per un file di stile CSS con {{htmlelement("link")}} - applichiamo il JavaScript alla pagina così che possa avere effetto su questa (e così anche sul CSS e qualsiasi altra cosa sulla pagina).</li> + <li>Ora aggiungi questo snippet di codice al file <code>main.js</code>: + <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); // Seleziono tutti i tag h1 +myHeading.textContent = 'Hello world!'; // Cambio il testo</pre> + </li> + <li>Assicurati che i file HTML e JavaScript siano salvato e carica index.html nel browser. Dovresti vedere qualcosa di simile:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Abbiamo inserito l'elemento script sul fondo della pagina HTML perchè l'HTML carica in ordine lettura, in maniera sincrona. Se il JavaScript venisse caricato prima e non in fondo alla pagina, potrebbe causare dei problemi in quanto sarebbe caricato prima dell'HTML su cui lo script lavorerebbe, ma non sempre è così. Di solito è buona pratica, anche per i tempi di caricamento, inserire il JavaScript a fine pagina HTML, ma ciò può cambiare a seconda delle necessità.</p> +</div> + +<h3 id="Cosè_successo">Cos'è successo?</h3> + +<p>Il testo nell'elemento <code>h1</code> è stato cambiato in "Hellow world!" usando JavaScript. Lo hai fatto utilizzando una funzione chiamata <code>{{domxref("Document.querySelector", "querySelector()")}}</code> per prendere un riferimento del tuo elemento <code>h1</code> e poi salvando l'elemento in una variabile chiamata <code>myHeading</code>. Questo è molto simile a quello che abbiamo fatto con i selettori CSS. Quando vogliamo fare qualcosa con un elemento, dobbiamo prima selezionarlo.</p> + +<p>Dopo aver selezionato l'elemento e averlo inserito nella variabile <code>myHeading</code>, hai cambiato la proprietà <code>{{domxref("Node.textContent", "textContent")}}</code> , una proprietà che fa parte nativamente degli elementi HTML grazie alla <a href="/en-US/docs/Web/API/Document_Object_Model">DOM API</a>, in "Hello world!".</p> + +<div class="note"> +<p><strong>Nota</strong>: Entrambe le funzionalità che hai usato fanno parte della <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, che ti permette di manipolare i documenti HTML.</p> +</div> + +<h2 id="Basi_del_linguaggio">Basi del linguaggio</h2> + +<p>Parliamo di alcune delle funzionalità principali del linguaggio JavaScript, per darti un'idea migliore di come tutto funziona. Inoltre, alcune di queste funzionalità sono comuni a tutti i linguaggi di programmazione. Se riuscirai a padroneggiare queste fondamenta, sarai sulla strada giusta per programmare più o meno tutto!</p> + +<div class="warning"> +<p><strong>Importante</strong>: In questo articolo, prova a inserire il codice di esempio nella tua console di JavaScript per vedere cosa succede. Per maggiori dettagli sulle console di JavaScript vedi <a href="/en-US/Learn/Discover_browser_developer_tools">Scoprire i tool di sviluppo del browser</a></p> +</div> + +<h3 id="Variabili">Variabili</h3> + +<p>{{Glossary("Variable", "Le Variabili")}} sono contenitori dove puoi immagazzinare o salvare dei valori. Puoi iniziare dichiarando una variabile con la parola chiave var, seguita da qualsiasi nome tu voglia (più o meno <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Lexical_grammar">JavaScript Keywords and Preserved Words</a>):</p> + +<pre class="brush: js notranslate">var myVariable; // ok +var _myVariable; // ok +var $myVariable; // ok +var my_Variable; // ok +var -myVariable; // error +var delete; // error, preserved keyword +myVariable; // error</pre> + +<div class="note"> +<p><strong>Nota</strong>: Il punto e virgola indica la fine di un'istruzione; è solo necessario quando devi separare le varie istruzioni su una singola riga, ma è anche buona pratica. Ci sono altre regole per sapere quando usarli e quando non usarli - vedi <a href="https://www.codecademy.com/blog/78">Your Guide to Semicolons in JavaScript</a> per maggiori dettagli.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Puoi chiamare una variabile più o meno con qualsiasi nome ma ci sono alcune regole o restrizioni da seguire (vedi <a href="http://www.codelifter.com/main/tips/tip_020.shtml">questo articolo</a>). Se non sei sicuro puoi <a href="https://mothereff.in/js-variables">controllarne la validità</a>.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: JavaScript è case sensitive quindi <code>myVariable</code> e <code>myvariable</code> sono due variabili diverse. Se riscontri dei problemi nel tuoi codice, controlla le lettere!</p> +</div> + +<p>Dopo aver dichiarato la variabile, puoi dargli un valore:</p> + +<pre class="brush: js notranslate">myVariable = 'Bob';</pre> + +<p>Oppure puoi usare una scorciatoia e unire i passaggi:</p> + +<pre class="brush: js notranslate">var myVariable = 'Bob';</pre> + +<p>Puoi richiamare il valore della variabile chiamandola:</p> + +<pre class="brush: js notranslate">myVariable;</pre> + +<p>Dopo avergli assegnato un valore puoi anche cambiarlo:</p> + +<pre class="notranslate">var myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p>Nota che queste variabili sono di <a href="/en-US/docs/Web/JavaScript/Data_structures">tipi diversi</a>:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Variable</th> + <th scope="col">Explanation</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td>Per denotare che una variabile è una stringa, dovresti metterne il valore tra virgolette.</td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td>I numeri non hanno virgolette intorno a loro.</td> + <td><code>var myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td> + <p>Un valore Vero/Falso. Le parole <code>true</code> e <code>false</code> sono parole chiave in JS e non hanno bisogno di virgolette.</p> + </td> + <td><code>var myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td>Una struttura che ti permette di immagazzinare più valori su un singolo riferimento.</td> + <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> + Riferisciti a ogni membro dell'array:<br> + <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td>Tutto in JavaScript è un oggetto e può essere salvato in una variabile. Tienilo a mente mentre impari.</td> + <td><code>var myVariable = document.querySelector('h1');</code></td> + </tr> + </tbody> +</table> + +<p>Quindi perchè abbiamo bisogno delle variabili? Le variabili sono necessarie per rendere le cose interessanti nella programmazione. Se i valori non potessero cambiare non potremmo fare niente di dinamico, come personalizzare un messaggio di benvenuto o cambiare l'immagine mostrata in una galleria d'immagini.</p> + +<h3 id="Commenti">Commenti</h3> + +<p>Puoi commentare il tuo codice JavaScript come faresti con il CSS:</p> + +<pre class="brush: js notranslate">/* +Qui dentro è un commento +*/</pre> + +<p>Se il tuo commento non contiene più di una riga è a volte più semplice fare un commento <code>inline</code>:</p> + +<pre class="brush: js notranslate" style="font-size: 14px;">// Questo è un commento inline +</pre> + +<h3 id="Operatori">Operatori</h3> + +<p>Un <code>{{Glossary("operatore")}}</code> è un simbolo matematico che produce risultati basandosi su due valori (o variabili). Nella seguente tabella puoi vedere gli operatori più semplici seguiti da alcuni esempi di JavaScript che puoi provare nella tua console.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Operator</th> + <th scope="col">Explanation</th> + <th scope="col">Symbol(s)</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">addizione/concatenazione</th> + <td>Usato per fare la somma tra due numeri o incollare insieme due stringhe.</td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hello " + "world!";</code></td> + </tr> + <tr> + <th scope="row">sottrazione,moltiplicazione,divisione</th> + <td>Queste fanno ciò che ci si aspetta.</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // per moltiplicare in JS si usa l'asterisco<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row">operatore di assegnazione</th> + <td>L'hai già visto. Serve per assegnare un valore a una variabile.</td> + <td><code>=</code></td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">operatore di identità</th> + <td>Fa un test per vedere se due variabili sono uguali o meno e restituisce un valore <code>booleano</code> (<code>true</code>/<code>false</code>)</td> + <td><code>===</code></td> + <td><code>var myVariable = 3;<br> + myVariable === 4; // false</code></td> + </tr> + <tr> + <th scope="row">negazione, non uguale</th> + <td>Restituisce l'opposto logico.</td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>L'espressione di base è <code>true</code> ma restituisce <code>false</code> perchè l'abbiamo negata:</p> + + <p><code>var myVariable = 3;<br> + !(myVariable === 3);</code></p> + + <p>Qui testiamo che <code>myVariable</code> NON E' UGUALE a 3". Questo restituisce <code>false</code> perchè <code>myVariable</code> E' uguale a 3.</p> + + <p><code><code>var myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p>Ci sono molti altri operatori da esplorare, per ora va bene così. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Espressioni e operatori </a>per una lista completa.</p> + +<div class="note"> +<p><strong>Nota</strong>: Mischiare tipi di dati diversi può portare a strani comportamenti quando andiamo a affrontare calcoli quindi stai attento a riferirti alle variabili corretamente per avere il risultato che ti aspetti. Per esempio, "35" + "25" non darà il risultato sperato, questo perchè i numeri sono stati messi tra virgolette e sono diventati stringhe. In questo caso stiamo facendo una concatenazione di stringhe, non un'addizione, quindi il risultato sarà 3525. Togliendo le virgolette il risultato sarà quello che ci aspettavamo.</p> +</div> + +<h3 id="Condizionali">Condizionali</h3> + +<p>I Condizionali sono strutture di codice che ci permettono di testare delle espressioni che restituiscono valore vero o falso, facendo funzionare parti di codice a seconda del risultato. La forma più comune è chiamata <code>if</code> <code>...</code> <code>else</code>. Quindi per esempio:</p> + +<pre class="brush: js notranslate">var iceCream = 'chocolate'; +if (iceCream === 'chocolate') { + alert('Yay, I love chocolate ice cream!'); +} else { + alert('Awwww, but chocolate is my favorite...'); +}</pre> + +<p>L'espressione dentro il condizionale<code> if ( ... ) </code>è il test — questo usa l'operatore di identità (come descritto sopra) per comparare la variabile <code>iceCream</code> con la stringa <code>"chocolate" </code>per vedere se sono uguali. Se la comparazione restituisce true, il primo blocco di codice viene eseguito, altrimenti (<code>else</code>) si passa al secondo blocco di codice.</p> + +<h3 id="Funzioni">Funzioni</h3> + +<p>{{Glossary("Function", "Le Funzioni")}} sono un modo di impacchettare funzionalità che pensi di riutilizzare. Quando hai bisogno di una procedura puoi chiamare una funzione con il suo nome invece di riscrivere lo stesso codice ogni volta. Avrai visto alcuni esempi di usi di funzione, per esempio:</p> + +<ol> + <li> + <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js notranslate">alert('hello!');</pre> + </li> +</ol> + +<p>Queste funzioni, <code>documents.querySelector</code> e <code>alert</code>, sono già presenti nel browser da poter utilizzare quando vuoi.</p> + +<p>Se vedi quaclosa che assomiglia a una variabile ma ha delle parentesi dopo il nome — ( ) — allora probabilmente è una funzione. Le Funzioni spesso prendono degli {{Glossary("Argument", "argomenti")}} — pezzi di dati che gli servono per fare il proprio lavoro. Questi dati vanno all'interno delle parentesi, separati da virgole.</p> + +<p>Per esempio, la funzione <code>alert()</code> fa apparire un box dentro la finestra del browser, ma dobbiamo dargli una stringa come argomento per dire alla funzione cosa scrivere all'interno del pop-up.</p> + +<p>La buona notizia è che puoi definire le tue funzioni — nel prossimo esempio scriviamo una semplice funzione che prende due numeri come argomenti e li moltiplica, restituendo il risultato:</p> + +<pre class="brush: js notranslate">function multiply(num1,num2) { + var result = num1 * num2; + return result; +}</pre> + +<p>Prova a eseguire la funzione sopra nella console con degli argomenti di test. Per esempio:</p> + +<pre class="brush: js notranslate">multiply(4,7); +multiply(20,20); +multiply(0.5,3);</pre> + +<div class="note"> +<p><strong>Nota</strong>: La parola chiave <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> dice al browser di restituire la variabile risultato per renderla utilizzabile al di fuori della funzione. Questo è necessario perchè le cose che vengono definite all'interno di una funzione sono disponibili solo alla funzione. Questo è chiamato {{Glossary("Scope", "scoping")}} (Leggi di più <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">variable scoping</a>.)</p> +</div> + +<h3 id="Eventi">Eventi</h3> + +<p>La vera interattività di un sito dipende dagli eventi. Questi sono strutture di codice che ascoltano le varie cose che succedono nel browser, rispondendo con l'esecuzione di codice. Un esempio ovvio è l'<a href="/en-US/docs/Web/Events/click">evento click </a>che è inizializzato dal browser quando si preme qualcosa con il mouse. Per dimostrarlo, inserisci il seguente codice nella console e poi premi ovunque sulla pagina corrente.</p> + +<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { + alert('Ouch! Stop poking me!'); +}</pre> + +<p>Ci sono molti modi per attaccare un evento a un elemento. Qui selezioniamo un elemento HTML, impostando la proprietà del suo gestore <a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a> a una funzione anonima (i.e. senza nome), che contiene il codice che vogliamo eseguire quando l'elemento viene premuto.</p> + +<p>Nota che</p> + +<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> + +<p>è uguale a</p> + +<pre class="brush: js notranslate">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p>E' solo più corta come soluzione.</p> + +<h2 id="Diamo_i_superpoteri_al_nostro_sito_web_di_esempio">Diamo i superpoteri al nostro sito web di esempio</h2> + +<p>Adesso che abbiamo visto un po' le basi di JavaScript, aggiungiamo alcune funzionalità interessanti al nostro sito di esempio per vedere cos'è possibile fare con JavaScript.</p> + +<h3 id="Aggiungere_un_cambio_immagine">Aggiungere un cambio immagine</h3> + +<p>In questa sezione, aggiungeremo un'ulteriore immagine al nostro sito utilizzando alcune funzionalità della DOM API, usando un po' di JavaScript per scambiare le immagini quando vengono premute.</p> + +<ol> + <li>Prima di tutto, trova un'altra immagine che vorresti usare per il tuo sito. Assicurati che sia della stessa grandezza della prima immagine o più o meno uguale (oppure, se conosci il CSS, applica alcune regole di stile).</li> + <li>Salva quest'immagine nella cartella <code>images</code>.</li> + <li>Rinomina quest'immagine a 'firefox2.png' (senza apici).</li> + <li>Val al tuo <code>main.js</code> file e inserisci il seguente JavaScript. (Se il tuo "hello world" è ancora lì, cancellalo.) + <pre class="brush: js notranslate">var myImage = document.querySelector('img'); + +myImage.onclick = function() { + var mySrc = myImage.getAttribute('src'); + if(mySrc === 'images/firefox-icon.png') { + myImage.setAttribute ('src','images/firefox2.png'); + } else { + myImage.setAttribute ('src','images/firefox-icon.png'); + } +}</pre> + </li> + <li>Salva tutti i file e carica index.html nel browser. Ora quando premi sull'immagine, dovrebbe scambiarsi con la seconda!</li> +</ol> + +<p>Immagazzini un riferimento al tuo elemento immagine nella variabile <code>myImage</code>. Poi definisci il gestore della proprietà <code>onclick</code> della variabile <code>myImage</code> con una funzione anonima. Ora, tutte le volte che l'elemento immagine viene premuto:</p> + +<ol> + <li>Recuperi il valore dell'attributo <code>src</code> dell'immagine.</li> + <li>Usi un condizionale per sapere se il valore <code>src</code> è uguale alla destinazione dell'immagine originale: + <ol> + <li>Se lo è, cambi la destinazione nell'attributo <code>src</code> con quella della seconda immagine, forzando l'altra immagine a essere caricata nell'elemento {{htmlelement("image")}}.</li> + <li>Se non lo è (quindi è già stata scambiata), il valore di <code>src</code> torna a essere quello della destinazione dell'immagine originale.</li> + </ol> + </li> +</ol> + +<h3 id="Aggiungere_un_messaggio_di_benvenuto_personalizzato">Aggiungere un messaggio di benvenuto personalizzato</h3> + +<p>Aggiungiamo un altro po' di codice, cambiando il titolo della pagina in un messaggio personalizzato quando l'utente visita il sito web. Questo messaggio di benvenuto rimarrà in memoria qualora l'utente dovesse lasciare il sito per tornare in un momento successivo — lo salveremo usando la <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Includeremo un'opzione per cambiare l'utente e quindi il messaggio di benvenuto in qualsiasi momento risulti necessario.</p> + +<ol> + <li>In <code>index.html</code>, aggiungiamo la seguente riga prima dell'elemento {{htmlelement("script")}}: + + <pre class="brush: html notranslate"><button>Cambia utente</button></pre> + </li> + <li>In <code>main.js</code>, inserisci il seguente codice alla fine del file, proprio come scritto — questo prende i riferimenti di un nuovo bottone e dell'elemento <code>h1</code>, immagazzinandoli in delle variabili: + <pre class="brush: js notranslate">var myButton = document.querySelector('button'); +var myHeading = document.querySelector('h1');</pre> + </li> + <li>Inserisci questa funzione per personalizzare il messaggio di benvenuto — questo ancora non farà niente ma lo sistemeremo tra poco: + <pre class="brush: js notranslate">function setUserName() { + var myName = prompt('Inserisci il tuo nome.'); + localStorage.setItem('name', myName); + myHeading.textContent = 'Mozilla is cool, ' + myName; +}</pre> + Questa funzione utilizza la funzione <code><a href="/en-US/docs/Web/API/Window.prompt">prompt()</a></code> che fa apparire un piccolo box di dialogo, un po' come <code>alert()</code>. Questo <code>prompt() </code>però chiede all'utente di inserire dei dati, salvandoli in una variabile dopo che l'utente ha premuto <strong>OK</strong>. In questo caso chiediamo all'utente di inserire il proprio nome. Dopo chiamiamo un'API chiamata <code>localStorage</code> che ci permette di immagazzinare dati nel browser per poi recuperarli successivamente. Usiamo la funzione <code>setItem()</code> di <code>localStorage</code> per creare e immagazzinare un oggetto chiamato 'name', impostando il suo valore a quello della variabile <code>myName</code> che contiene il dato inserito dall'utente. Finalmente, impostiamo il <code>textContent</code> dell'elemento <code>h1</code> a una stringa più il valore della variabile <code>myName</code> che contiene il nome dell'utente.</li> + <li>Poi aggiungiamo un blocco <code>if ... else </code>— possiamo chiamare questo codice di inizializzazione per strutturare la app al suo avvio: + <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { + setUserName(); +} else { + var storedName = localStorage.getItem('name'); + myHeading.textContent = 'Mozilla is cool, ' + storedName; +}</pre> + Questo blocco prima usa l'operatore di negazione logica, poi controlla se il dato name esiste nel <code>localStorage</code>. Se non esiste (primo blocco), fa partire la funzione <code>setUserName()</code>, altrimenti recuperiamo il nome dal <code>localStorage</code> con la funzione <code>getItem()</code> e impostiamo <code>textContent</code> dell'elemento <code>h1</code> a una stringa più il valore della stringa restituita da <code>getItem()</code>.</li> + <li>Inserisci il gestore dell'evento <code>onclick</code> dell'elemento <code>button</code>. Quando premuto, la funzione <code>setUserName() </code>viene eseguita. Questo permette all'utente di inserire un nuovo nome quando vogliono, premendo il bottone: + <pre class="brush: js notranslate">myButton.onclick = function() { + setUserName(); +} +</pre> + </li> +</ol> + +<p>Ora quando visitiamo il sito per la prima volta, ti verrà richiesto il tuo username, poi ti sarà dato un messaggio personalizzato. Puoi cambiare il tuo nome quando vuoi premendo il bottone. Come bonus aggiunto, il nome è salvato in localStorage quindi rimane in memoria anche dopo la chiusura del browser mantenendo il messaggio personalizzato quando riaprirai il sito.</p> + +<h2 id="Conclusione">Conclusione</h2> + +<p>Se hai seguito tutte le istruzioni in questo articolo, dovresti avere una pagina così (puoi vedere <a href="https://mdn.github.io/beginner-html-site-scripted/">la nostra versione qui</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p>Se ti blocchi, puoi comparare il tuo lavoro con <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">il nostro esempio finito su Github</a>.</p> + +<p>Abbiamo appena iniziato con JavaScript. Se ti è piaciuto giocare e vorresti avanzare ancora di più, vai al nostro <a href="/en-US/docs/Learn/JavaScript">JavaScript learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html b/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html new file mode 100644 index 0000000000..933bd4245c --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html @@ -0,0 +1,128 @@ +--- +title: Pubblicare il tuo sito +slug: Learn/Getting_started_with_the_web/Pubbicare_sito +tags: + - Advanced + - Beginner + - CodingScripting + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - 'l10n:priority' + - publishing + - web server +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.</p> +</div> + +<h2 id="Quali_opzioni_ho">Quali opzioni ho?</h2> + +<p>Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.</p> + +<h3 id="Acquistare_un_hosting_e_un_dominio">Acquistare un hosting e un dominio</h3> + +<p>Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:</p> + +<ul> + <li>Un hosting, ovvero uno spazio "a noleggio" sul <a href="/en-US/Learn/What_is_a_web_server">server web</a> di una compagnia di hosting dove caricare i file del tuo sito. Il server web rende il contenuto fruibile ai visitatori del tuo sito.</li> + <li>Un <a href="/en-US/Learn/Understanding_domain_names">nome dominio</a>, ovvero un indirizzo univoco attraverso il quale gli utenti possono trovare il tuo sito, come <code>http://www.mozilla.org</code> o <code>http://www.bbc.co.uk</code>. Puoi noleggiare un dominio per il tempo desiderato (minimo un anno) da un <strong>registrar di dominio</strong>.</li> +</ul> + +<p>Molti siti professionali adottano questa soluzione.</p> + +<p>Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> + +<h4 id="Consigli_su_hosting_e_domini">Consigli su hosting e domini</h4> + +<ul> + <li>In questo articolo non intendiamo sponsorizzare compagnie di hosting o registrar di domini specifici. Si possono però reperire facilmente cercando "web hosting" e "domain names" sul proprio motore di ricerca preferito. Tutti i registrar permettono di verificare se il nome di dominio scelto è disponibile o se qualcun altro l'ha già registrato.</li> + <li>Alcuni {{Glossary("ISP", "internet service provider")}} mettono a disposizione lo spazio sufficiente per un piccolo sito web. Anche se hanno funzionalità limitate, sono l'ideale per i tuoi primi esperimenti.</li> + <li>Puoi utilizzare alcuni servizi gratuiti come <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, e <a href="https://wordpress.com/">WordPress</a>. Non sono certo paragonabili ai servizi a pagamento, ma offrono risorse sufficienti per condurre i primi esperimenti.</li> + <li>Molte compagnie offrono soluzioni di hosting e dominio in un unico pacchetto. I servizi gratuiti di solito non hanno bisogno di software FTP per caricare i file: basta trascinarli e rilasciarli nell'interfaccia web.</li> +</ul> + +<h3 id="Usare_una_piattaforma_online_come_GitHub_o_Google_App_Engine">Usare una piattaforma online come GitHub o Google App Engine</h3> + +<p>Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:</p> + +<ul> + <li><a href="https://github.com/">GitHub</a> è un sito di sviluppo di codice sorgente comunitario. Permette agli utenti di caricare il codice in cartelle apposite (repository) controllate mediante <a href="http://git-scm.com/"> Git</a>, un <strong>sistema di controllo versione</strong>. Se non diversamente specificato, il codice caricato su GitHub è open source. Ciò significa che puoi collaborare a progetti altrui e i programmatori di tutto il mondo possono trovare il tuo codice, utilizzarlo, imparare da esso o migliorarlo. GitHub ha una funzionalità molto utile chiamata <a href="https://pages.github.com/">GitHub Pages</a>, che permette di generare un sito web dal codice in tempo reale.</li> + <li><a href="https://cloud.google.com/appengine/">Google App Engine</a> è una piattaforma che permette di sviluppare ed eseguire applicazioni attraverso l'infrastruttura Google, sia per lo sviluppo da zero di applicazioni web multi-tier (un tipo di architettura client-server molto diffusa) che per ospitare un sito web statico. Per maggiori informazioni consulta <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></li> +</ul> + +<p>A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.</p> + +<h3 id="Usare_un_IDE_online_come_CodePen">Usare un IDE online come CodePen</h3> + +<p>Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).</p> + +<p>Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:</p> + +<ul> + <li><a href="https://jsfiddle.net/">JSFiddle</a></li> + <li><a href="https://glitch.com/">Glitch</a></li> + <li><a href="http://jsbin.com/">JS Bin</a></li> + <li><a href="https://codepen.io/">CodePen</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> + +<h2 id="Pubblicare_con_GitHub">Pubblicare con GitHub</h2> + +<p>Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:</p> + +<ol> + <li>Registra un <a href="https://github.com/">account GitHub</a> e verifica il tuo indirizzo email.</li> + <li><a href="https://github.com/new">Crea un repository</a> per i tuoi file.</li> + <li>Su questa pagina, nella casella <em>Repository name</em>, inserisci <em>username</em>.github.io, dove <em>username</em> è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come <em>mariorossi.github.io</em>.<br> + Inoltre, spunta la casella "<em>Initialize this repository with a README</em>" e fai clic su <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> + <li>Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su <em>Commit changes</em>. + <div class="note"> + <p><strong>Nota</strong>: Assicurati che la tua cartella contenga un file chiamato <code>index.html</code>.</p> + </div> + </li> + <li> + <p>Apri <em>username</em>.github.io per vedere il tuo sito online. Per esempio, per il nome utente <em>chrisdavidmills</em>, vai a <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p> + + <div class="note"> + <p><strong>Nota</strong>: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.</p> + </div> + </li> +</ol> + +<p>Per approfondire consulta <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> + +<h2 id="Approfondimenti">Approfondimenti</h2> + +<ul> + <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> + <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> + <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: Un tutorial di Codecademy che mostra altre idee e spiega un po' più nello specifico il processo di creazione e lancio di un sito.</li> + <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a>, di Scott Murray, dà alcune idee utili sui servizi disponibili.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li id="Installing_basic_software"><a href="/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a></li> + <li id="What_will_your_website_look_like"><a href="it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web">Che aspetto avrà il tuo sito Web?</a></li> + <li id="Dealing_with_files"><a href="/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></li> + <li id="HTML_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Basi di HTML</a></li> + <li id="CSS_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Basi di CSS</a></li> + <li id="JavaScript_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Basi di JavaScript</a></li> + <li id="Publishing_your_website"><a href="/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html new file mode 100644 index 0000000000..288fa8e1c2 --- /dev/null +++ b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html @@ -0,0 +1,825 @@ +--- +title: Come costruire form widget personalizzati +slug: Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +<div>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div> + +<p class="summary">Ci sono molti casi in cui <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">i widget del modulo html disponibili</a> non sono abbastanza. Se vuoi eseguire <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">uno styling avanzato</a> su alcuni widget come l'elemento {{HTMLElement("select")}} o sei vuoi fornirli di comportamenti personalizzati, l'unica scelta che hai è quella di costruirti il tuo widget personale.</p> + +<p>In quest'articolo vedremo come costruire questo tipo di widget. A tal fine lavoreremo con un esempio: ricostruire l'elemento {{HTMLElement("select")}} .</p> + +<div class="note"> +<p><strong>Nota:</strong> ci concentreremo sulla costruzione del widget, non su come rendere il codice generico e riutilizzabile; questo comporterebbe del codice JavaScript and la manipolazione del DOM in un contesto sconosciuto, uscendo fuori dallo scopo di quest'articolo.</p> +</div> + +<h2 id="Design_strutture_e_semantica">Design, strutture, e semantica</h2> + +<p>Prima di costruire un widget personalizzato, dovresti cominciare a pensare esattamente cosa vuoi. Questo ti aiuterà a evitare perdite di tempo. In particolare, e' importante definire chiaramente tutti gli stati del tuo widget. Per fare ciò, è bene cominciare da un widget esistente che ha stati e comportamenti ben noti.</p> + +<p>Nel nostro esempio ricostruiremo l'elemento {{HTMLElement("select")}} . Ecco il risultato che vogliamo raggiungere:</p> + +<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> + +<p>Questo screenshot ci illustra i tre stati principali del nostro widget: lo stato normale(a sinistra); lo stato di attivazione ( al centro) and lo stato aperto (a destra).</p> + +<p>In termini di compartamento vogliamo che il nostro widget sia utilizabile con il mouse e con la tastiera, proprio come un ogni widget non modificato. Cominciamo definendo come il widget raggiungerà uno stato:</p> + +<dl> + <dt>Il widget è nel suo stato normale quando:</dt> + <dd> + <ul> + <li>la pagina carica</li> + <li>Il widget era attivo e l'utente fa clico ovunque al di fuori del widget</li> + <li>il widget era attivo e l'utente sposta lo stato attivo su un altro widget usando la tastiera</li> + </ul> + + <div class="note"> + <p><strong>Nota:</strong> Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" title="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">Option+Tab combination</a>.</p> + </div> + </dd> + <dt>Il widget è nel suo stato attivo quando:</dt> + <dd> + <ul> + <li>L'user lo clicca</li> + <li>L'user clicca il tasto tab e lo evidenzia</li> + <li>il widget era aperto and l'user clicca sul widget.</li> + </ul> + </dd> + <dt>Il widget è nello stato di apertura quando:</dt> + <dd> + <ul> + <li>il widget è in uno stato diverso da quello aperto e l'utente fa clic su di esso</li> + </ul> + </dd> +</dl> + +<p>Una volta compreso come cambiare gli stati, e importante definire come cambiare i valori del widget:</p> + +<dl> + <dt>I valori cambiano quando:</dt> + <dd> + <ul> + <li>l'user clicca su un'opzione quando il widget è nello stato di apertura</li> + <li>l'user preme dalla tastiera la frecciasu o giù quando il widget è aperto </li> + </ul> + </dd> +</dl> + +<p>Finalmente, possiamo definire come le opzioni del widget dovranno comportarsi:</p> + +<ul> + <li>Quando il widget è aperto, l'opzione selezionata è evidenziata</li> + <li>Quando il mouse si trova su un'opzione, l'opzione viene evidenziata e l'opzione evidenziata in precedenza viene riportata al suo stato normale</li> +</ul> + +<p>Ai fini del nostro esempio, ci fermeremo qui; comunque, se sei un lettore attendo avrai notato che mancano dei comportamenti. Per esempio: Cosa accadrà se l'user preme tab MENTRE il widget è aperto?La risposta è... Nulla. OK, il comportamento corretto sembra ovvio ma il fatto è che, poiché non è definito nelle nostre specifiche, è molto facile trascurare questo comportamento. Ciò è particolarmente vero in un ambiente di squadra quando le persone che progettano il comportamento del widget sono diverse da quelle che lo implementano.</p> + +<p>Un altro esempio divertente: Cosa succederà se l'user premerà il tasto su o giù mentre il widget è aperto? Questo è un po' più complicato. Se consideri che lo stato attivo e lo stato aperto sono totalmente diversi, la risposta è di nuovo " non succederà niente"!<br> + Perchè non abbiamo definito nessuna interazione con la tastiera quando il widget è aperto.D'altronde, se si considera che lo stato attivo e lo stato aperto si sovrappongono un po', il valore potrebbe cambiare ma l'opzione ma l'opzione non sarà sicuramente evidenziata di conseguenza, ancora una volta perchè non abbiamo definito interazioni con la tastiera con le opzioni quando il widget si trova nel suo stato aperto (abbiamo solo definito cosa dovrebbe accadere quando il widget è aperto, ma nulla dopo).</p> + +<p>le specifiche mancanti sono ovvie, quindi le gestiremo, ma potrebbe rivelare dei problemi in widget nuovi ed esotici, fper cui nessuno ha la minima idea di quale sia il comportamento giusto. E' sempre opportuno utilizzare bene il proprio tempo in questa fase di desgin: se definisci malamente un comportamento, o dimentichi di definirne uno, sarà molto difficile ridefinirlo una volta che gli utenti si saranno abituati. Se hai dubbi, chiedi l'opinione altrui , e se disponi di un budget non esitare in un<a href="http://en.wikipedia.org/wiki/Usability_testing" rel="external" title="http://en.wikipedia.org/wiki/Usability_testing"> user tests</a>. Questo processo è chiamato UX design. Se vuoi conoscere di più a proposito di questo argomento, dovresti controllare le seguenti risorse:</p> + +<ul> + <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li> + <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li> + <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li> +</ul> + +<div class="note"> +<p><strong>Nota: </strong>In molti sistemi c'è un modo per aprire l'elemento {{HTMLElement("select")}} per esaminare tutte le scelte disponibili (lo stesso elemento {{HTMLElement("select")}} ). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the <code>click</code> event.</p> +</div> + +<h3 id="Definire_la_struttura_e_la_semantica_HTML">Definire la struttura e la semantica HTML</h3> + +<p>Ora che le funzionalità basi del nostro widget sono state deficse, e' tempo di cominciare a costruire il nostro widget. Il primo passo è di definire la struttura HTML . Questo è ciò che dobbiamo ricostruire {{HTMLElement("select")}}:</p> + +<pre class="brush: html"><!-- Questo è il nostro container + principale per il nostro widget. + l'attributo tabindex permette + all'utente di concentrarsi sul widget. + Vedremo dopo cos'è meglio + utilizzare con javascript. --> + +<div class="select" tabindex="0"> + + <!-- Questo container verrà usato per stampare il valore corrente del widget --> + <span class="value">Cherry</span> + + <!-- Questo container conterrà tutte le opzioni disponibili per il nostro widget. + dato che sarà una lista, utilizzare l'opzione ul è valido. --> + <ul class="optList"> + <!-- Ogni opzione contiene solo il valore da visualizzare, vedremo dopo come + manipolare il reale valore che vogliamo inviare col form --> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + +</div></pre> + +<p>Nota l'uso del nome delle classi; questi identificano ciascuna parte rilevante indipendentemente dagli effettivi elementi HTML sottostanti utilizzati. Questo è importante per essere sicuri che non legheremo il nostro CSS e JavaScript ad una forte struttura HTML, in modo da poter apportare modifiche all'implementazione in un secondo momento senza rompere il codice che utilizza il widget. Per esempio se desideri implementare l'equivalente dell'elemento {{HTMLElement("optgroup")}}.</p> + +<h3 id="Creare_l'aspetto_grafico_utilizzando_i_CSS">Creare l'aspetto grafico utilizzando i CSS</h3> + +<p>Ora che abbiamo una struttura HTML possiamo cominciare a disegnare il nostro widget. L'intero punto di costruzione di questo widget personalizzato è di essere in grado di modellare questo widget esattamente come vogliamo. Al fine di ciò, divideremo i nostri CSS in due parti: la prima parte sarà necessaria per avere un widget simile a {{HTMLElement("select")}} ,la seconda parte consisterà nella parte grafica in modo che appaia come noi vogliamo.</p> + +<h4 id="Stili_richiesti">Stili richiesti</h4> + +<p>Gli stili richiesti sono quelli necessari per gestire i tre stati del nostro widget.</p> + +<pre class="brush: css">.select { + /* Questo creerà un contesto di posizionamento per l'elenco di opzioni */ + position: relative; + + /*Questo renderà il nostro widget parte del flusso di testo e allo stesso tempo considerevole */ + display : inline-block; +}</pre> + +<p>Abbiamo bisogno di una classe extra "active" per definire il look del nostro widget quando è nello stato di attivazione. Poichè il nostro widget è selezionabile,dobbiamo raddoppiare questo stile personale con la pseudo-classe {{cssxref(":focus")}} In modo da essere sicuri che abbiano lo stesso comportamento.</p> + +<pre class="brush: css">.select.active, +.select:focus { + outline: none; + + /* Questo box-shadow non è richiesto al corretto funzionamento , + tuttavia è importante per essere sicuro che lo stato di attivazione + sia visibile e che lo utilizziamo come valore di defaul, + sentiti libero di modificarlo. */ + box-shadow: 0 0 3px 1px #227755; +}</pre> + +<p>Ora manipoliamo la lista delle opzioni:</p> + +<pre class="brush: css">/* il selettore .select è zucchero sintattico ( traduzione letterale, + concettualmente vuol dire " rendere del codice più dolce, più umano " + per essere sicuri che le classi che definiamo siano quelli all'interno del nostro widget. + */ + +.select .optList { + /* Ciò assicurerà che il nostro elenco di opzioni sia visualizzato sotto il valore + e fuori dal flusso HTML */ + position : absolute; + top : 100%; + left : 0; +}</pre> + +<p>Abbiamo bisogno di una classe extra per manipolare la lista quando le opzioni sono nascoste. Questo è necessario per gestire le differenze tra lo stato attivo e lo stato aperto che non corrispondono esattamente.</p> + +<pre class="brush: css">.select .optList.hidden { + /* Questo è un modo semplice per nascondere la lista in modo accessibile, + parleremo di più sull'accessibilità alla fine */ + max-height: 0; + visibility: hidden; +}</pre> + +<h4 id="Abbellimento">Abbellimento</h4> + +<p>Ora che abbiamo le funzionalità base, possiamo cominciare a divertirci. Quello seguente è solo un esempio di ciò che è possibile, e corrisponderà allo screenshot all'inizio di questo articolo. Dovresti sentirti libero di sperimentare e vedere cosa accade.</p> + +<pre class="brush: css">.select { + /* Tutte le taglie saranno espresse con il valore em per motivi di accessibilità + (per assicurarsi che il widget rimanga ridimensionabile se l'utente usa il + zoom del browser in modalità solo testo). I calcoli sono fatti + assumendo 1em == 16px quale è il valore predefinito nella maggior parte dei browser. + Se ti perdi la conversione di px in em, prova http://riddle.pl/emcalc/ * / + font-size : 0.625em; + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + /* Abbiamo bisogno di spazio extra per la freccia in giù che aggiungeremo + */ + padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : .2em solid #000; /* 2px */ + border-radius : .4em; /* 4px */ + box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */ + + /* La prima dichiarazione serve per i browser che non supportano i gradienti lineari. + La seconda dichiarazione è perché i browser basati su WebKit non hanno ancora una definizione prefissata. + Se vuoi supportare i browser legacy prova http://www.colorzilla.com/gradient-editor/ */ + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + /* poichè i valori possono essere più larghi del nostro widget, dobbiamo essere sicuri + che il widget cambierà dimensione */ + display : inline-block; + width : 100%; + overflow : hidden; + + vertical-align: top; + + /* E se il contenuto va in overflow, è bello avere un bell'elisse . */ + white-space : nowrap; + text-overflow: ellipsis; +}</pre> + +<p>Non abbiamo bisogno di altri elementi per disegnare la freccia in basso; useremo invece lo pseudo-elemento {{cssxref(":after")}}. Comunque potrebbe anche essere implementato usando una semplice immagine di background.</p> + +<pre class="brush: css">.select:after { + content : "▼"; /* utilizziamo il carattere unicode U+25BC; vedi http://www.utf8-chartable.de */ + position: absolute; + z-index : 1; /* importante per la posizione della freccia in modo da evitare + sovrapposizionamenti */ + top : 0; + right : 0; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + height : 100%; + width : 2em; /* 20px */ + padding-top : .1em; /* 1px */ + + border-left : .2em solid #000; /* 2px */ + border-radius: 0 .1em .1em 0; /* 0 1px 1px 0 */ + + background-color : #000; + color : #FFF; + text-align : center; +}</pre> + +<p>ora cominciamo il design della lista delle opzioni:</p> + +<pre class="brush: css">.select .optList { + z-index : 2; /* Dichiariamo esplicitamente che la lista delle opzioni si sovraporrà + alla freccia */ + + /*Questo resetterà lo stile di default degli elementi <ul> */ + list-style: none; + margin : 0; + padding: 0; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + /* Ciò assicurerà che anche se i valori sono inferiori al widget, + l'elenco delle opzioni sarà grande quanto il widget stesso */ + min-width : 100%; + + /*Nel caso in cui l'elenco sia troppo lungo, il suo contenuto si sovrapporrà verticalmente + (che aggiungerà automaticamente una barra di scorrimento verticale) ma mai in orizzontale + (poiché non abbiamo impostato una larghezza, la lista regolerà automaticamente la sua larghezza. + Se non è possibile, il contenuto verrà troncato) */ + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; + + border: .2em solid #000; /* 2px */ + border-top-width : .1em; /* 1px */ + border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */ + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */ + background: #f0f0f0; +}</pre> + +<p>Per le opzioni abbiamo bisogno di aggiungere la classe <code>highlight</code> in modo da identificare il valore che l'user selezionerà (o ha selezionato).</p> + +<pre class="brush: css">.select .option { + padding: .2em .3em; /* 2px 3px */ +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<p>ecco i risultati dei nostri 3 stati:</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Basic state</th> + <th scope="col" style="text-align: center;">Active state</th> + <th scope="col" style="text-align: center;">Open state</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td> + <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td> + <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td> + </tr> + <tr> + <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td> + </tr> + </tbody> +</table> + +<h2 id="Porta_in_vita_il_tuo_widget_con_javascript">Porta in vita il tuo widget con javascript</h2> + +<p>Ora che il nostro designe e la nostra struttura sono pronti possiamo scrivere il codice JavaScript che farà effettivamente lavorare il widget.</p> + +<div class="warning"> +<p><strong>Pericolo:</strong> Il seguente codice è educativo e non dovrebbe essere usato così com'è. Tra le tante cose, come vedremo, non è a prova di futuro e non funzionerà sui browser legacy. Ha anche parti ridondanti che dovrebbero essere ottimizzate nel codice di produzione.</p> +</div> + +<div class="note"> +<p><strong>Nota:</strong> Creare widget riutilizzabili è qualcosa che può essere un po 'complicato. La bozza del componente Web W3C è una delle risposte a questo specifico problema. Il progetto X-Tag è un'implementazione di test di questa specifica; ti invitiamo a dare un'occhiata a questo.</p> +</div> + +<h3 id="Perchè_non_funziona">Perchè non funziona?</h3> + +<p>Prima di cominciare, è importante ricordare qualcosa di fondamentale a proposito di JavaScript: dentro un browser, <strong>è una tecnologia inaffidabile</strong>. Quando stai costruendo widget personalizzati, dovrai fare affidamento su javascript perchè è un filo necessario per legare tutto insieme. Tuttavia, ci sono molti casi in cui JavaScript non può essere eseguito nel browser:</p> + +<ul> + <li>L'user ha bloccato l'utilizzo di javascript: Questo è il caso più insolito di sempre; veramente poche persone bloccano l'utilizzo di JavaScript oggigiorno.</li> + <li>Lo script non si carica. Questo è uno dei casi più comuni, specialmente nel mondo mobile.</li> + <li>Lo script è buggato. Dovresti sempre considerare questa possibilità.</li> + <li>Lo script entra in conflitto con uno script di terze parti. Questo può accadere con gli script di tracciamento o qualsiasi bookmarklet che l'utente utilizza.</li> + <li>Lo script è in conflitto con, o è affetto da, un'estensione del browser (come Firefox's <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> extension o Chrome's <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> ).</li> + <li>L'user sta utilizzando un browser Legacy, e una delle feature che richiedi non è supportata. Ciò si verifica frequentemente quando si utilizzano API all'avanguardia.</li> +</ul> + +<p>Per via di questi rischi, è molto importante considerare seriamente cosa accadrà se JavaScript non funziona. Trattare dettagliatamente questo problema è fuori dallo scopo di questo articolo perché è strettamente legato al modo in cui si desidera rendere generico e riutilizzabile lo script, ma nel nostro esempio considereremo le basi di ciò.</p> + +<p>Nel nostro esempio, se il nostro codice JavaScript non è in esecuzione, ricorreremo alla visualizzazione di un elemento {{HTMLElement("select")}}. Per raggiungere questo abbiamo bisogno di due cose.</p> + +<p>Per prima cosa, dobbiamo aggiungere un normale elemento {{HTMLElement ("select")}} prima di ogni utilizzo del nostro widget personalizzato. Questo è in realtà richiesto anche per poter inviare dati dal nostro widget personalizzato insieme al resto dei dati del nostro modulo;diremo di più a proposito più tardi.</p> + +<pre class="brush: html"><body class="no-widget"> + <form> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> + </form> + +</body></pre> + +<p>Secondo, abbiamo bisogno di due nuove classi per nascondere l'elemento non necessario (cioè, l'elemento "reale" {{HTMLElement ("select")}} se il nostro script non è in esecuzione o il widget personalizzato è in esecuzione) . Nota che per impostazione predefinita, il nostro codice HTML nasconde il nostro widget personalizzato.</p> + +<pre class="brush: css">.widget select, +.no-widget .select { + /*Questo selettore css afferma: + - o abbiamo impostato la classe del corpo su "widget", + quindi nascondiamo l'effettivo elemento {{HTMLElement ("select")}} + - o non abbiamo cambiato la classe del corpo, quindi la classe del corpo + è ancora "no-widget", + quindi gli elementi di classe "select" devono essere nascosti */ + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +}</pre> + +<p>Ora abbiamo solo bisogno di un interruttore JavaScript per determinare se lo script è in esecuzione o meno. Questa opzione è molto semplice: se al momento del caricamento della pagina il nostro script è in esecuzione, rimuoverà la classe no-widget e aggiungerà la classe widget, scambiando così la visibilità dell'elemento {{HTMLElement ("select")}} e del widget personalizzato.</p> + +<pre class="brush: js">window.addEventListener("load", function () { + document.body.classList.remove("no-widget"); + document.body.classList.add("widget"); +});</pre> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Without JS</th> + <th scope="col" style="text-align: center;">With JS</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td> + <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td> + </tr> + <tr> + <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the source code</a></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota:</strong> Se vuoi veramente rendere il tuo codice generico e riutilizzabile, invece di fare un cambio di classe è meglio aggiungere semplicemente la classe del widget per nascondere gli elementi {{HTMLElement ("select")}} e aggiungere dinamicamente l'albero DOM che rappresenta il widget personalizzato dopo ogni {{HTMLElement ("select")}} elemento nella pagina.</p> +</div> + +<h3 id="Rendere_il_lavoro_più_facile">Rendere il lavoro più facile</h3> + +<p>Nel codice che stiamo per costruire, useremo l'API DOM standard per fare tutto il lavoro di cui abbiamo bisogno. Tuttavia, sebbene il supporto dell'API DOM sia diventato molto meglio nei browser, ci sono sempre problemi con i browser legacy (specialmente con il buon vecchio Internet Explorer).</p> + +<p>Se vuoi evitare problemi con i browser legacy, ci sono due modi per farlo: usando un framework dedicato come jQuery, $ dom, prototype, Dojo, YUI, o simili, o facendo il polyfilling della funzione mancante che vuoi usare ( che può essere fatto facilmente attraverso il caricamento condizionale, ad esempio con la libreria yepnope).</p> + +<p>Le funzionalità che intendiamo utilizzare sono le seguenti (ordinate dal più rischioso al più sicuro):</p> + +<ol> + <li>{{domxref("element.classList","classList")}}</li> + <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li> + <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li> +</ol> + +<p>Oltre alla disponibilità di tali funzionalità specifiche, rimane ancora un problema prima dell'avvio. L'oggetto restituito dalla funzione {{domxref ("element.querySelectorAll", "querySelectorAll ()")}} è un {{domxref ("NodeList")}} piuttosto che una matrice. Questo è importante perché gli oggetti Array supportano la funzione forEach, ma {{domxref ("NodeList")}} no. Poiché {{domxref ("NodeList")}} sembra davvero un array e poiché forEach è così comodo da usare, possiamo facilmente aggiungere il supporto di forEach a {{domxref ("NodeList")}} per rendere la nostra vita più facile, così:</p> + +<pre class="brush: js">NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +}</pre> + +<p>We weren't kidding when we said it's easy to do.</p> + +<h3 id="Creazione_di_eventi_Callback">Creazione di eventi Callback</h3> + +<p>Il terreno è pronto, ora possiamo iniziare a definire tutte le funzioni che verranno utilizzate ogni volta che l'utente interagisce con il nostro widget.</p> + +<pre class="brush: js">// Questa funzione verrà utilizzata ogni volta che si desidera disattivare un widget personalizzato +// Richiede un parametro +// seleziona: il nodo DOM con la classe `select` da disattivare +function deactivateSelect(select) { + + // Se il widget non è attivo non c'è nulla da fare + if (!select.classList.contains('active')) return; + + // Abbiamo bisogno di ottenere l'elenco delle opzioni per il widget personalizzato + var optList = select.querySelector('.optList'); + + // Chiudiamo la lista delle opzioni + optList.classList.add('hidden'); + + // e disattiviamo il custom widget + select.classList.remove('active'); +} + +// questa funzione verrà utilizzata ogni volta che l'user(dis)attiverà il widget +// prende due parametri: +// select : il nodo del DOM con le classi 'select' da attivare +// selectList :la lista di tutti i nodi dom con la la classe 'select' + +function activeSelect(select, selectList) { + + // Se il widget è già attivo non c'è niente da fare + if (select.classList.contains('active')) return; + + // Dobbiamo disattivare lo stato attivo su tutti i widget personalizzati + // Perché la funzione deactivateSelect soddisfa tutti i requisiti di + // per ogni funzione di callback, la usiamo direttamente senza usare un intermediario + // funzione anonima. + selectList.forEach(deactivateSelect); + + // E attiviamo lo stato attivo per questo specifico widget + select.classList.add('active'); +} + +// Questa funzione verrà utilizzata ogni volta che l'utente desidera aprire / chiudere l'elenco di opzioni +// Richiede un parametro: +// seleziona: il nodo DOM con l'elenco da attivare +function toggleOptList(select) { + + // L'elenco è tenuto dal widget + var optList = select.querySelector('.optList'); + + // Modifichiamo la classe dell'elenco per mostrarlo / nasconderlo + optList.classList.toggle('hidden'); +} + +// Questa funzione verrà utilizzata ogni volta che sarà necessario evidenziare un'opzione +// Ci vogliono due parametri: +// seleziona: il nodo DOM con la classe `select` contenente l'opzione da evidenziare +// opzione: il nodo DOM con la classe `option` da evidenziare +function highlightOption(select, option) { + + // Otteniamo l'elenco di tutte le opzioni disponibili per il nostro elemento di selezione personalizza + var optionList = select.querySelectorAll('.option'); + + // Rimuoviamo l'evidenziazione da tutte le opzioni + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + // Evidenziamo l'opzione giusta + option.classList.add('highlight'); +};</pre> + +<p> </p> + +<p>Questo è tutto ciò che serve per gestire i vari stati del widget personalizzato.</p> + +<p>Successivamente, associamo queste funzioni agli eventi appropriati:</p> + +<p> </p> + +<pre class="brush: js">// Gestiamo il binding di eventi quando il documento è caricato. +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + // Each custom widget needs to be initialized + selectList.forEach(function (select) { + + // Ogni widget personalizzato deve essere inizializzato + var optionList = select.querySelectorAll('.option'); + + // Ogni volta che un utente passa il mouse su un'opzione, evidenziamo l'opzione data + optionList.forEach(function (option) { + option.addEventListener('mouseover', function () { + // Nota: le variabili `select` e` option` sono le chiusure + // disponibile nell'ambito della nostra chiamata di funzione. + highlightOption(select, option); + }); + }); + + // Ogni volta che l'utente fa clic su un elemento di selezione personalizzato + select.addEventListener('click', function (event) { + // Nota: la variabile `select` è una chiusura + // disponibile nell'ambito della nostra chiamata di funzione. + + // Accendiamo la visibilità dell'elenco di opzioni + toggleOptList(select); + }); + + // Nel caso in cui il widget ottenga lo stato attivo + // Il widget ottiene l'attenzione ogni volta che l'utente fa clic su di esso o ogni volta + // usano la chiave di tabulazione per accedere al widget + select.addEventListener('focus', function (event) { + // Nota: le variabili `select` e` selectList` sono le chiusure + // disponibile nell'ambito della nostra chiamata di funzione. + + // Attiviamo il widget + activeSelect(select, selectList); + }); + + // Nel caso in cui il widget lasci il focus + select.addEventListener('blur', function (event) { + // Nota: la variabile `select` è una chiusura + // disponibile nell'ambito della nostra chiamata di funzione. + + // Disattiamo il widget + deactivateSelect(select); + }); + }); +});</pre> + +<p>A quel punto, il nostro widget cambierà stato in base al nostro progetto, ma il suo valore non viene ancora aggiornato. Lo gestiremo dopo.</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Check out the source code</a></td> + </tr> + </tbody> +</table> + +<h3 id="Gestire_il_valore_del_Widget">Gestire il valore del Widget</h3> + +<p> </p> + +<p>Ora che il nostro widget funziona, dobbiamo aggiungere del codice per aggiornarne il valore in base all'input dell'utente e rendere possibile l'invio del valore insieme ai dati del modulo.</p> + +<p>Il modo più semplice per farlo è usare un widget nativo sotto il cofano. Tale widget terrà traccia del valore con tutti i controlli integrati forniti dal browser e il valore verrà inviato normalmente al momento della presentazione di un modulo. Non ha senso reinventare la ruota quando possiamo fare tutto questo per noi.</p> + +<p>Come visto in precedenza, utilizziamo già un widget di selezione nativo come fallback per motivi di accessibilità; possiamo semplicemente sincronizzare il suo valore con quello del nostro widget personalizzato:</p> + +<p> </p> + +<pre class="brush: js">// Questa funzione aggiorna il valore visualizzato e lo sincronizza con il widget nativo. +// Ci vogliono due parametri: +// seleziona: il nodo DOM con la classe `select` contenente il valore da aggiornare +// indice: l'indice del valore da selezionare +function updateValue(select, index) { + // Abbiamo bisogno di ottenere il widget nativo per il widget personalizzato specificato + // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato + var nativeWidget = select.previousElementSibling; + + // Abbiamo anche bisogno di ottenere il valore segnaposto del nostro widget personalizzato + var value = select.querySelector('.value'); + + // E abbiamo bisogno dell'intero elenco di opzioni + var optionList = select.querySelectorAll('.option'); + + // Impostiamo l'indice selezionato sull'indice di nostra scelta + nativeWidget.selectedIndex = index; + + // Aggiorniamo il valore placeholder di conseguenza + value.innerHTML = optionList[index].innerHTML; + + // E evidenziamo l'opzione corrispondente del nostro widget personalizzato + highlightOption(select, optionList[index]); +}; + +// Questa funzione restituisce l'indice selezionato corrente nel widget nativo +// Richiede un parametro: +// seleziona: il nodo DOM con la classe `select` relativa al widget nativo +function getIndex(select) { + // È necessario accedere al widget nativo per il widget personalizzato specificato + // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato + var nativeWidget = select.previousElementSibling; + + return nativeWidget.selectedIndex; +};</pre> + +<p>Con queste due funzioni, possiamo associare i widget nativi a quelli personalizzati:</p> + +<pre class="brush: js">// Gestiamo il binding di eventi quando il documento è caricato. +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + // Ogni widget personalizzato deve essere inizializzato + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'), + selectedIndex = getIndex(select); + + // Rendiamo focalizzabile il nostro widget personalizzato + select.tabIndex = 0; + +// Facciamo in modo che il widget nativo non sia più focalizzabile + select.previousElementSibling.tabIndex = -1; + + // Ci assicuriamo che il valore selezionato di default sia visualizzato correttamente + updateValue(select, selectedIndex); + + // Ogni volta che un utente fa clic su un'opzione, aggiorniamo di conseguenza il valore + optionList.forEach(function (option, index) { + option.addEventListener('click', function (event) { + updateValue(select, index); + }); + }); + + // Ogni volta che un utente usa la propria tastiera su un widget focalizzato, aggiorniamo di conseguenza il valore + select.addEventListener('keyup', function (event) { + var length = optionList.length, + index = getIndex(select); + + // Quando l'utente preme la freccia giù, passiamo all'opzione successiva + if (event.keyCode === 40 && index < length - 1) { index++; } + +// Quando l'utente preme la freccia su, passiamo all'opzione precedente + if (event.keyCode === 38 && index > 0) { index--; } + + updateValue(select, index); + }); + }); +});</pre> + +<p> </p> + +<p>Nel codice sopra, vale la pena notare l'uso della proprietà tabIndex. L'utilizzo di questa proprietà è necessario per garantire che il widget nativo non acquisisca mai l'attenzione e per assicurarsi che il nostro widget personalizzato ottenga lo stato attivo quando l'utente utilizza la sua tastiera o il suo mouse.</p> + +<p>Con quello, abbiamo finito! Ecco il risultato:</p> + +<p> </p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Check out the source code</a></td> + </tr> + </tbody> +</table> + +<p>Ma aspetta un secondo, abbiamo davvero finito?</p> + +<h2 id="Renderlo_accessibile">Renderlo accessibile</h2> + +<p> </p> + +<p>Abbiamo costruito qualcosa che funziona e sebbene siamo lontani da una casella di selezione completa, funziona bene. Ma quello che abbiamo fatto non è altro che il violino con il DOM. Non ha una vera semantica e, anche se sembra una casella di selezione, dal punto di vista del browser non ne è uno, quindi le tecnologie assistive non saranno in grado di capire che è una casella di selezione. In breve, questa nuova casella di selezione non è accessibile!</p> + +<p>Fortunatamente, esiste una soluzione e si chiama ARIA. ARIA è l'acronimo di "Accessible Rich Internet Application" ed è una specifica W3C specificamente progettata per ciò che stiamo facendo qui: rendere accessibili le applicazioni web e i widget personalizzati. È fondamentalmente un insieme di attributi che estendono l'HTML in modo da poter meglio descrivere ruoli, stati e proprietà come se l'elemento che abbiamo appena escogitato fosse l'elemento nativo per cui tentava di passare. L'utilizzo di questi attributi è estremamente semplice, quindi facciamolo.</p> + +<p> </p> + +<h3 id="L'attributo_'role'">L'attributo 'role'</h3> + +<p> </p> + +<p>L'attributo chiave utilizzato da ARIA è l'attributo 'role'. L'attributo 'role' accetta un valore che definisce per cosa viene usato un elemento. Ogni 'role' definisce i propri requisiti e comportamenti. Nel nostro esempio, useremo 'role listbox'. È un "ruolo composito", ovvero gli elementi con quel ruolo si aspettano di avere figli, ciascuno con un ruolo specifico (in questo caso, almeno un bambino con il ruolo di opzione).</p> + +<p>Vale anche la pena notare che ARIA definisce i ruoli che vengono applicati di default al markup HTML standard. Ad esempio, l'elemento {{HTMLElement ("table")}} corrisponde alla griglia del ruolo e l'elemento {{HTMLElement ("ul")}} corrisponde all'elenco dei ruoli. Poiché utilizziamo un elemento {{HTMLElement ("ul")}}, vogliamo assicurarci che il ruolo listbox del nostro widget sostituisca il ruolo di lista dell'elemento {{HTMLElement ("ul")}}. A tal fine, useremo la presentazione del ruolo. Questo ruolo è stato progettato per farci indicare che un elemento non ha un significato speciale e viene utilizzato esclusivamente per presentare informazioni. Lo applicheremo al nostro elemento {{HTMLElement ("ul")}}.</p> + +<p>Per supportare il ruolo listbox, dobbiamo solo aggiornare il nostro codice HTML in questo modo:</p> + +<p> </p> + +<pre class="brush: html"><! - Aggiungiamo l'attributo role = "listbox" al nostro elemento principale -><div class="select" role="listbox"> + <span class="value">Cherry</span> + <! - Aggiungiamo anche il role = "presentation" all'elemento ul -> + <ul class="optList" role="presentation"> + <! - E aggiungiamo l'attributo role = "option" a tutti gli elementi li -> + <li role="option" class="option">Cherry</li> + <li role="option" class="option">Lemon</li> + <li role="option" class="option">Banana</li> + <li role="option" class="option">Strawberry</li> + <li role="option" class="option">Apple</li> + </ul> +</div></pre> + +<div class="note"> +<p><strong>Nota:</strong> Includere sia l'attributo role sia un attributo class è necessario solo se si desidera supportare i browser legacy che non supportano i selettori dell'attributo CSS. <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">CSS attribute selectors</a>.</p> +</div> + +<h3 id="L'attributo_aria-selected">L'attributo <code>aria-selected</code> </h3> + +<p>Usare l'attributo <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> non è abbastanza. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> fornisce anche molti stati e attributi di proprietà. Più e meglio li usi, più il tuo widget sarà compreso dalle tecnologie assistive. Nel nostro caso, limiteremo il nostro utilizzo a un attributo: <code>aria-selected</code>.</p> + +<p>l'attributo <code>aria-selected</code> è usato per contrassegnare quale opzione è attualmente selezionata; questo consente alle tecnologie assistive di informare l'utente su quale sia la selezione corrente. Lo useremo dinamicamente con JavaScript per contrassegnare l'opzione selezionata ogni volta che l'utente ne sceglie uno. A tal fine, abbiamo bisogno di rivedere la nostra funzione <code>updateValue()</code>:</p> + +<pre class="brush: js">function updateValue(select, index) { + var nativeWidget = select.previousElementSibling; + var value = select.querySelector('.value'); + var optionList = select.querySelectorAll('.option'); + + // Ci assicuriamo che tutte le opzioni non siano selezionate + optionList.forEach(function (other) { + other.setAttribute('aria-selected', 'false'); + }); + + // Ci assicuriamo che l'opzione scelta sia selezionata + optionList[index].setAttribute('aria-selected', 'true'); + + nativeWidget.selectedIndex = index; + value.innerHTML = optionList[index].innerHTML; + highlightOption(select, optionList[index]); +};</pre> + +<p>Ecco il risultato finale di tutti questi cambiamenti (otterrai una sensazione migliore provandola con una tecnologia di assistenza come <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> o <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>):</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the final source code</a></td> + </tr> + </tbody> +</table> + +<h2 id="Conclusioni">Conclusioni</h2> + +<p> </p> + +<p>Abbiamo visto tutti i fondamenti della creazione di un widget di modulo personalizzato, ma come puoi vedere non è banale da fare, e spesso è meglio e più facile affidarsi a librerie di terze parti invece di codificarle da zero da soli (a meno che, ovviamente, il tuo obiettivo è costruire una tale biblioteca).</p> + +<p>Ecco alcune librerie da prendere in considerazione prima di codificare le tue:</p> + +<p> </p> + +<ul> + <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li> + <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li> + <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li> + <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a">And many more…</a></li> +</ul> + +<p>Se vuoi andare avanti, il codice in questo esempio necessita di qualche miglioramento prima che diventi generico e riutilizzabile. Questo è un esercizio che puoi provare ad esibirti. Due suggerimenti per aiutarti in questo: il primo argomento per tutte le nostre funzioni è lo stesso, il che significa che quelle funzioni necessitano dello stesso contesto. Costruire un oggetto per condividere quel contesto sarebbe saggio. Inoltre, è necessario renderlo a prova di funzionalità; cioè, deve essere in grado di funzionare meglio con una varietà di browser la cui compatibilità con gli standard Web utilizzati varia. Divertiti!</p> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p> + +<p> </p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> + +<p> </p> diff --git a/files/it/learn/html/forms/form_validation/index.html b/files/it/learn/html/forms/form_validation/index.html new file mode 100644 index 0000000000..9557758529 --- /dev/null +++ b/files/it/learn/html/forms/form_validation/index.html @@ -0,0 +1,846 @@ +--- +title: Validazione lato client delle form +slug: Learn/HTML/Forms/Form_validation +tags: + - Apprendere + - Esempio + - Forms + - Guida + - HTML + - JavaScript + - Principiante + - Web + - regex +translation_of: Learn/Forms/Form_validation +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div> + +<div>Prima di inviare dati al server, è importante assicurarsi che tutti i campi richiesti della form siano stati inseriti e siano nel formato richiesto. Questa viene chiamata <strong>validazione delle form lato client</strong>, ed aiuta a fare in modo che i dati inviati siano consistenti con quanto richiesto. Questo articolo illustra anche con esempi i concetti base della validazione.</div> + +<div></div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscenze informatiche, ed una ragionevole comprensione di <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Capire che cos'è la validazione delle form lato client, perché è importante e come applicare le varie tecniche per implementarla.</td> + </tr> + </tbody> +</table> + +<p>La validazione lato client è un controllo che va fatto subito ed è una caratteristica importante per una buona esperienza untente; trovando i dati non corretti nel lato client, l'utente li può correggere immediatamente. Se i dati non corretti venissero inviati al server e rifiutati, si assisterebbe ad un considerevole e fastidioso ritardo operativo dovuto al traffico tra client e server per le richieste di correzione.</p> + +<p>Comunque, la validazione lato client <em>non dovrebbe essere considerata</em> una misura di sicurezza sufficiente! La tua app dovrebbe sempre eseguire controlli di sicurezza <strong>anche</strong> nel <em>lato server,</em> perché le validazioni lato client sono troppo facili da bypassare, quindi gli utenti malevoli potrebbero comunque spedire dati non corretti al server. Leggi l'articolo <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a> per farti un idea di quello che <em>potrebbe</em> succedere; in questo articolo non trattiamo la validazione lato server, ma tu dovresti tenerla presente.</p> + +<h2 id="Che_cosè_la_validazione_delle_form">Che cos'è la validazione delle form?</h2> + +<p>Vai su qualche diffuso sito con registrazione delle form e ti accorgerai che ti fornirà informazioni immediate se non inserisci i dati nel formato che loro si aspettano. Otterrai messaggi simili a questi:</p> + +<ul> + <li>"Questo è un camo richiesto" (Non lo puoi lasciare in bianco).</li> + <li>"Per favore inserisci il numero di telefono nel formato xxx-xxxx" (Viene richiesto uno specifico formato di dato per essere considerato valido).</li> + <li>"Per favore inserisci un indirizzo email valido" (la mail inserita non è nel formato corretto).</li> + <li>"La password deve essere compresa tra 8 e 30 caratteri e deve contenere lettere maiuscole, minuscole, simboli e numeri." (Viene richiesto un formato molto particolare).</li> +</ul> + +<p>Questa viene chiamata <strong>validazione della form</strong>. Quando inserisci i dati il browser e/o il web server controllano se i dati sono corretti secondo le regole stabilite dalla applicazione. La validazione fatta dal browser viene chiamata validazione <strong>lato client</strong> e quella fatta dal server viene chiamata validazione <strong>lato server</strong>. Questo articolo si occupa della validazione lato client.</p> + +<p>Se le informazioni hanno il formato corretto, l'applicazione consente che vengano spedite al server il quale di solito le salva in un database. Se invece non sono corrette, viene mandato un messaggo all'utente spiegando l'errore e consentendo di riprovare.</p> + +<p>Noi desideriamo che l'inserimento delle form sia il più facile possibile. Quindi per quale motivo insistiamo per la validazione? I motivi principali sono tre:</p> + +<ul> + <li><strong>Vogliamo che ci arrivino i dati giusti nel formato corretto.</strong> La nostra applicazione potrebbe non funzionare in modo corretto se i dati che ci arrivano sono scorretti o incompleti.</li> + <li><strong>Vogliamo proteggere i dati degli utenti</strong>. Costringendo gli utenti ad inserire password robuste facilitiamo la protezione delle loro informazioni anagrafiche.</li> + <li><strong>Vogliamo proteggere noi stessi</strong>. Ci sono molti modi che gli utenti malevoli possono provare per danneggiare le applicazioni se la form non è protetta (vedi <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).<br> + {{warning("Mai fidarsi dei dati inviati al server dal client. Anche se la form è stata validata correttamente, gli utenti malevoli potrebbero alterare la richiesta di rete.")}}</li> +</ul> + +<h2 id="Differenti_tipi_di_validazione_lato_client">Differenti tipi di validazione lato client</h2> + +<p>Ci sono due tipi di validazione che si possono incontrare nel web:</p> + +<ul> + <li><strong>Validazione built-in della form</strong> usando le funzionalità di validazione delle form di HTML5, di cui parleremo spesso in questo articolo. Questo tipo di validazione di solito non richiedono molto JavaScript. La validazione built-in ha prestazioni migliori di JavaScript, ma non è altrettanto configurabile.</li> + <li><strong>Validazione JavaScript</strong> che viene eseguita scrivendo codice JavaScript. Questa validazione si può configurare come si desidera ma deve essere scritta interamente (oppure si usa una delle molte librerie disponibili).</li> +</ul> + +<h2 id="Usare_la_validazione_built-in_delle_form">Usare la validazione built-in delle form</h2> + +<p>Una delle funzionalità più significative dei <a href="/en-US/docs/Learn/Forms/HTML5_input_types">HTML5 form controls</a> è la capacità di effettuare molte validazioni senza richiedere l'uso di JavaScript. Questo viene fatto usando attributi di validazione negli elementi della form. Lo abbiamo visto anche in altre occasioni, ma ricapitolando:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Specifica che è un campo che deve essere riempito prima di poter invare i dati.</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Specifica la dimensione minima e massima dei campi di testo</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Specifica i valori minimi e massimi dei campi di tipo numerico</li> + <li><code>type</code>: Specifica se il dato deve essere un numero, un indirizzo email o qualche altro tipo predefinito. </li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>: Specifica una <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> che definisce le regole che i dati inseriti devono seguire.</li> +</ul> + +<p>Se i dati inseriti nella form seguono tutte le regole specificate dagli attributi è considerata valida. Altrimenti viene considerata non valida.</p> + +<p>Quando un elemento è valido, le seguenti cose sono vere:</p> + +<ul> + <li>L'elemento è conforme alla pseudo-classe {{cssxref(":valid")}} CSS, che ti consente di applicare uno stile specifico agli elementi validi.</li> + <li>Se l'utente prova ad inviare i dati il browser spedirà la form se non c'è nient altro le la blocca (ad esempio ulteriori validazioni JavaScript).</li> +</ul> + +<p>Quando un elemento non è valido, le seguenti cose sono vere:</p> + +<ul> + <li>L'elemento è conforme alla pseudo-classe {{cssxref(":invalid")}} CSS, e qualche altra pseudo-classe (es. {{cssxref(":out-of-range")}}) in base al tipo di errore che ti consente di applicare uno stile specifico agli elementi non validi.</li> + <li>Se l'utente prova ad inviare i dati il browser blocca la form e visualizza un adeguanto messaggio di errore.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Esistiono alcuni errori che impediscono la spedizione della form, compreso {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o un {{domxref('validityState.customError','customError')}}.</p> +</div> + +<h2 id="Esempi_di_validazione_built-in_delle_form">Esempi di validazione built-in delle form</h2> + +<p>In questa sezione proveremo alcuni degli attributi di cui abbiamo parlato sopra.</p> + +<h3 id="Semplice_esempio_iniziale">Semplice esempio iniziale</h3> + +<p>Incominciamo con un esempio semplice: Un campo di testo che ti permette di scegliere se preferisci le banane o le ciliege (banana or cherry). Questo esempio richiede un semplice testo {{HTMLElement("input")}} con associata una {{htmlelement("label")}} e un pulsante di invio {{htmlelement("button")}}. Il codice sorgente si trova su GitHub su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> con un esempio live.</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or cherry?</label> + <input id="choose" name="i_like"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p> + +<p>Per incominciare fai una copia di <code>fruit-start.html</code> in una directory vuota del tuo disco fisso.</p> + +<h3 id="Lattributo_required">L'attributo required</h3> + +<p>La validazione HTML5 più semplice è l'attributo <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>. Per rendere obbligatorio un campo input aggiungi questo attributo. Se è presente, l'elemento esegue il controllo con la pseudo-classe {{cssxref(':required')}} e la form non viene inviata e visualizza un messaggio d'errore se il campo input è vuoto. Quando è vuoto il campo è considerato non valido anche dalla pseudo-classe {{cssxref(':invalid')}}.</p> + +<p>Aggiungi l'attributo <code>required</code> come si vede qui sotto.</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or cherry? (required)</label> + <input id="choose" name="i_like" required> + <button>Submit</button> +</form></pre> + +<p>Considera il CSS che è incluso nel file d'esempio:</p> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:invalid:required { + background-image: linear-gradient(to right, pink, lightgreen); +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>Questo CSS assegna all'input un bordo rosso a trattini quando il valore non è valido ed una linea nera più sottile quando è valido. Abbiamo anche aggiunto uno sfondo a gradiente quando è richiesto e non valido. Prova il nuovo comportamento nell'esempio sotto:</p> + +<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub come <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">codice sorgente</a>.)</p> +</div> + +<p>Prova ad inviare la form senza un valore. Nota che i campo non valido acquista il focus ed appare il messaggio predefinito ("Per favore inserisci questo campo"), e la form non viene inviata.</p> + +<p>La presenza dell'attributo <code>required</code> in un elemento che lo supporta comporta che l'elemento controlla la pseudoclasse {{cssxref(':required')}} per controllare se contiene un valore oppure no. Se il campo {{HTMLElement("input")}} non ha un valore, attiva la pseudoclasse {{cssxref(':invalid')}}.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Per una buona esperienza utente, indica all'utente quando un campo è richiesto. Non è solo una buona pratica, ma è anche richiesto dalle linee guida <a href="/en-US/docs/Learn/Accessibility">accessibility</a> del WCAG. È anche bene rendere obbligatori i soli campi che ti servono. è inutile rendere obbligatori i campi di cui non hai reale necessità.</p> +</div> + +<h3 id="Validazione_con_una_regular_expression">Validazione con una regular expression</h3> + +<p>Un'altra caratteristica di validazione molto usata è l'attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, che si aspetta una <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> come valore. Una regular expression (regex) è un modello che può essere usato per confrontare una combinazione di caratteri in una stringa, questo li rende ottimi per la validazione delle form e vengono usati anche per un certo numero di altri usi in JavaScript.</p> + +<p>I regex sono abbastanza complessi, e non riusciamo a spiegarli in modo completo in questo articolo. Di seguito riportiamo alcuni esempi per darti un'idea di base su come funzionano.</p> + +<ul> + <li><code>a</code> — Accetta un carattere che deve essere <code>a</code> (non <code>b</code>, nemmeno <code>aa</code>, e così via).</li> + <li><code>abc</code> — Accetta <code>a</code>, seguito da <code>b</code>, seguito da <code>c</code>.</li> + <li><code>ab?c</code> — Accetta <code>a</code>, opzionalmente seguito <code>b</code>, seguito <code>c</code>. ( <code>ac</code> oppure <code>abc</code>)</li> + <li><code>ab*c </code>— Accetta <code>a</code>, opzionalmente seguito da qualsiasi numero di <code>b</code>, seguito da <code>c</code>. ( <code>ac</code> , <code>abc</code>, <code>abbbbbc</code>, e via di seguito).</li> + <li><code>a|b</code> — Accetta un carattere che può essere <code>a</code> o <code>b</code>.</li> + <li><code>abc|xyz</code> — Accetta esattamente <code>abc</code> o esattamente <code>xyz</code> (ma non <code>abcxyz</code> o <code>a</code> o <code>y</code>, e così via).</li> +</ul> + +<p>Ci sono moltissime altre possibilità che non trattiamo. Per la lista completa e molti esempi consulta la nostra documentazione delle <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular expressions</a>.</p> + +<p>Proviamo ad implementare un esemio. Modifica il tuo HTML per aggiungere un attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> come il seguente:</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"> + <button>Submit</button> +</form> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> +</div> + +<p>Che ci da il seguente aggiornamento — prova:</p> + +<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">codice sorgente</a>.)</p> +</div> + +<p>In questo esempio, l'elemento {{HTMLElement("input")}} accetta una di quattro possibili valori: "banana", "Banana", "cherry", o "Cherry". Le regular expressions sono sono sensibili a maiuscole e minuscole, ma noi abbiamo supportato sia le parole minuscole che quelle con la prima maiuscola usando il modello "Aa" racchiuso tra parentesi quadre.</p> + +<p>Prova ora a cambiare il valore dell attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> con gli esempi visti in precedenza e vedi in che modo cambiano i valori che puoi inserire. Prova anche a scrivere qualche regola per conto tuo e cerca di dare un senso alle regole rispetto al esempio della frutta!</p> + +<p>Se un valore di {{HTMLElement("input")}} non soddisfa il modello della regular expression il campo <code>input</code> applicherà la pseudoclasse {{cssxref(':invalid')}}.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Alcuni tipi di elemento {{HTMLElement("input")}} non necessitano di un attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> per essere validati secondo una regular expression. Specificando il tipo <code>email</code>, ad esempio, l'input viene validato con il consolidato modello per la validazione delle email o con il modello per una lista di email separate da virgole se ha anche l'attributo <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: L'elemento {{HTMLElement("textarea")}} non supporta l'attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p> +</div> + +<h3 id="Limitare_la_dimensione_dei_campi">Limitare la dimensione dei campi</h3> + +<p>Puoi limitare la dimensione dei campi testo creati con {{HTMLElement("input")}} o {{HTMLElement("textarea")}} usando gli attributi <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> e <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Un campo non è valido se ha meno caratteri del valore di <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> o maggiore del valore di <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>.</p> + +<p>I browsers spesso non consentono all'utente di inserire più caratteri di quelli consentiti dal campo. Per migliorare l'esperienza utente invece di usare solamente <code>maxlength</code> si può fornire l'indicazione del numero di caratteri residui per dare modo all'utente di regolarsi. Un esempio di questo si trova in Twitter. Con JavaScript esiste una <a href="https://github.com/mimo84/bootstrap-maxlength">soluzione che usa <code>maxlength</code></a>, che si può utilizzare.</p> + +<h3 id="Limitare_i_valori_dei_campi">Limitare i valori dei campi</h3> + +<p>Per i campi numerici (es. <code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code>), gli attirbuti <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> possono essere utilizzati per fornire i limiti di valori validi. Se il campo contiene valori fuori dai limiti non è valido.</p> + +<p>Vediamo un altro esempio. Creiamo una copia del file <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p> + +<p>Ora sostituiamo i contenuto dell'elemento <code><body></code> con il seguente:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> + </div> + <div> + <label for="number">How many would you like?</label> + <input type="number" id="number" name="amount" value="1" min="1" max="10"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<ul> + <li>Si può vedere che abbiamo messo 6 negli attrinuti <code>minlength</code> e <code>maxlength</code> del campo <code>text</code> che corrisponde alla lunghezza delle parole banana e cherry.</li> + <li>Abbiamo anche aggiunto un campo <code>number</code> con un <code>min</code> di uno ed un<code>max</code> di dieci. I numeri fuori dai limiti vengono visualizzati come non validi; gli utenti non possono usare le frecce di incremento e decremento per andare oltre i limiti. Se l'utente inserisce manualmente un dato esterno ai limiti il valore non è valido. Il numero non è obbligatorio quindi se si rimuove il valore, resta comunque valido.</li> +</ul> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +} + +div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Ecco un esempio live:</p> + +<p>{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">codice sorgente</a>.)</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <code><input type="number"></code> (ed anche altri tipi come <code>range</code> e <code>date</code>) possono anche avere l'attributo <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, che specifica il valore minimo di incremento e decremento quando viene usato il campo (ad esempio premendo i pulsanti su e giu dei campi numerici). Nel esempio precedente non abbiamo inserito l'attributo <code>step</code> quindi il valore parte da <code>1</code>. Questo significa che i numeri con la virgola come 3.2, sono anch'essi non validi.</p> +</div> + +<h3 id="Esempio_completo">Esempio completo</h3> + +<p>Ecco un esempio completo che dimostra l'uso delle funzionalità di validazione built-in di HTML:</p> + +<pre class="brush: html notranslate"><form> + <p> + <fieldset> + <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend> + <!-- While only one radio button in a same-named group can be selected at a time, + and therefore only one radio button in a same-named group having the "required" + attribute suffices in making a selection a requirement --> + <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label> + <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label> + </fieldset> + </p> + <p> + <label for="n1">How old are you?</label> + <!-- The pattern attribute can act as a fallback for browsers which + don't implement the number input type but support the pattern attribute. + Please note that browsers that support the pattern attribute will make it + fail silently when used with a number field. + Its usage here acts only as a fallback --> + <input type="number" min="12" max="120" step="1" id="n1" name="age" + pattern="\d+"> + </p> + <p> + <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label> + <input type="text" id="t1" name="fruit" list="l1" required + pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"> + <datalist id="l1"> + <option>Banana</option> + <option>Cherry</option> + <option>Apple</option> + <option>Strawberry</option> + <option>Lemon</option> + <option>Orange</option> + </datalist> + </p> + <p> + <label for="t2">What's your e-mail address?</label> + <input type="email" id="t2" name="email"> + </p> + <p> + <label for="t3">Leave a short message</label> + <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> + </p> + <p> + <button>Submit</button> + </p> +</form></pre> + +<p>Ed ora un po' di CSS per dare stile al HTML:</p> + +<pre class="brush: css notranslate">form { + font: 1em sans-serif; + max-width: 320px; +} + +p > label { + display: block; +} + +input[type="text"], +input[type="email"], +input[type="number"], +textarea, +fieldset { + width : 100%; + border: 1px solid #333; + box-sizing: border-box; +} + +input:invalid { + box-shadow: 0 0 5px 1px red; +} + +input:focus:invalid { + box-shadow: none; +}</pre> + +<p>Questo viene presentato nel modo seguente:</p> + +<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> + +<p>Vedi <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">Validation-related attributes</a> per la lista completa degli attributi che possono essere utilizzati per limitare i valori ed i tipi di input che li supportano.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">codice sorgente</a>.)</p> +</div> + +<h2 id="Validazione_delle_forms_con_JavaScript">Validazione delle forms con JavaScript</h2> + +<p>Sei costretto ad usare JavaScript se desideri controllare l'aspetto dei messaggi nativi d'errore o per conformarti ai browsers più vecchi che non supportano la validazione built-in di HTML. In questa sezione daremo un occhiata a diversi modi per farlo.</p> + +<h3 id="Le_API_di_limitazione_della_validazione">Le API di limitazione della validazione</h3> + +<p>Molti browsers supportano le <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>, che consistono in un gruppo di metodi e proprietà disponibili nelle seguienti interfaccie degli elementi delle form del DOM:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/button"><button></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/output"><output></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/select"><select></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code>)</li> +</ul> + +<p id="Constraint_validation_API_properties">Le API di validazione rendono le seguenti proprietà disponibili per li elementi di cui sopra.</p> + +<ul> + <li><code>validationMessage</code>: Restituisce un messaggio che descrive il limite di validazione che il campo non soddisfa nella lingua del browser. Se il campo non ha limiti di validazione (<code>willValidate</code> è <code>false</code>) o se il valore è valido restituisce una stringa vuota.</li> + <li><code>validity</code>: Restituisce un oggetto <code>ValidityState</code> che contiene alcune proprietà che descrivono lo stato di validità dell'elemento. Puoi trovare tutti i dettagli delle proprietà disponibili nella pagina di riferimento {{domxref("ValidityState")}}; sotto elenchiamo alcuni dei più comuni: + <ul> + <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Restituisce <code>true</code> se il valore non è conforme al modello specificato in {{htmlattrxref("pattern", "input")}}, e <code>false</code> se è conforme. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li> + <li>{{domxref("ValidityState.tooLong", "tooLong")}}: Restituisce <code>true</code> se il valore supera la lunghezza massima specificata in {{htmlattrxref("maxlength", "input")}}, o <code>false</code> se è più corta o ugauale al massimo.Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li> + <li>{{domxref("ValidityState.tooShort", "tooShort")}}: Restituisce <code>true</code> se il valore è più corto della dimensione minima specificata da {{htmlattrxref("minlength", "input")}}, o <code>false</code> se è uguale o maggiore del minimo. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li> + <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Restituisce <code>true</code> se il valore supera il massimo specificato da {{htmlattrxref("max", "input")}}, o <code>false</code> se è inferiore o uguale al massimo. Se è <code>true</code>, l'elemento attiva le pseudoclassi {{cssxref(":invalid")}} e {{cssxref(":out-of-range")}}.</li> + <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Restituisce <code>true</code> se il valore è inferiore al minimo specificato da {{htmlattrxref("min", "input")}}, o <code>false</code> se è maggiore o ugualeal minimo. Se è <code>true</code>, l'elemento attiva le pseudoclassi {{cssxref(":invalid")}} e {{cssxref(":out-of-range")}}.</li> + <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Restituisce <code>true</code> non rispetta la sintassi (quando {{htmlattrxref("type", "input")}} è <code>email</code> o <code>url</code>), o <code>false</code> se la sintassi è corretta. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li> + <li><code>valid</code>: Restituisce <code>true</code> se l'elemento rispetta tutti i parametri di validazione ed è quindi considerato valido, o <code>false</code> se non ne rispetta almeno uno. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":valid")}}; altimenti attiva la pseudocasse {{cssxref(":invalid")}}.</li> + <li><code>valueMissing</code>: Restituisce <code>true</code> se l'elemento possiede l'attributo {{htmlattrxref("required", "input")}}, ma non è stato inserito un valore o <code>false</code> altirmenti. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li> + </ul> + </li> + <li><code>willValidate</code>: Restituisce <code>true</code> se l'elemento verrà validato quando la form verrà spedita; altrimenti <code>false</code>.</li> +</ul> + +<p id="Constraint_validation_API_methods">Le API di validazione rendono anche disponibili i seguenti metodi per gli elementi di cui sopra.</p> + +<ul> + <li><code>checkValidity()</code>: Restituisce <code>true</code> se il valore dell'elemento non ha problemi di validazione; altrimenti <code>false</code>. Se l'elemento non è valido viene anche lanciato un <a href="/en-US/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> event</a> sul elemento.</li> + <li><code>setCustomValidity(<em>message</em>)</code>: Aggiunge un messaggio di errore personalizzato all'elemento; se si imposta il messaggio di errore personalizzato l'elemento viene considerato non valido, e viene visualizzato l'errore specificato. Questo consente di usare codice JavaScript per stabilire condizioni di errore di validazione diversi da quelli messi a disposizione dallo standard HTML5. Il messaggio viene esposto all'utente quando si presenta il problema.</li> +</ul> + +<h4 id="Implementare_un_messaggio_di_errore_personalizzato">Implementare un messaggio di errore personalizzato</h4> + +<p>Come abbiamo visto negli esempi di limiti di validazione HTML5 in precedenza, ogni volta che l'utente tenta di inviare una form non valida, il browser visualizza un messaggio d'errore. Il modo in cui viene visualizzato dipende dal browser.</p> + +<p>Questi messaggi automatizzati hanno due controindicazioni:</p> + +<ul> + <li>Non c'è modo di cambiare il loro aspetto con CSS.</li> + <li>Essi dipendono dalla lingua del browser, che signfica che potresiti avere una pagina scritta in una lingua ed i messaggi di errore in un'altra come si vede in questa immagine presa da Firefox.</li> +</ul> + +<p><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> + +<p>Personalizzare questi messaggi di errore è uno dei casi più comuni di utilizzo delle <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">constraint validation API</a>. Vediamo un piccolo esempio di come fare questo.</p> + +<p>Incominciamo con un po' di HTML semplice (prova ad inserirlo in un file HTML vuoto o usa come base una copia di of <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> come preferisci):</p> + +<pre class="brush: html notranslate"><form> + <label for="mail">I would like you to provide me with an e-mail address:</label> + <input type="email" id="mail" name="mail"> + <button>Submit</button> +</form></pre> + +<p>Ed aggiungi il seguente JavaScript alla pagina:</p> + +<pre class="brush: js notranslate">const email = document.getElementById("mail"); + +email.addEventListener("input", function (event) { + if (email.validity.typeMismatch) { + email.setCustomValidity("I am expecting an e-mail address!"); + } else { + email.setCustomValidity(""); + } +});</pre> + +<p>Qui aggiungiamo un riferimento al campo email ed aggiungiamo un event listener che viene eseguito ogni volta che il valore cambia.</p> + +<p>Nel codici controlliamo se la proprietà <code>validity.typeMismatch</code> del campo emali diventa <code>true</code>, significa che il valore contenuto non corrisponde al modello degli indirizzi email. Se è così viene chiamato il metodo <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> con un messaggio appropriato. Questo rende il campo non valido, in modo che quando viene inviata la form, l'invio fallisce e viene visualizzato il messaggio di errore.</p> + +<p>Se la proprietà <code>validity.typeMismatch</code> restituisce <code>false</code>, chiamiamo il metodo <code>setCustomValidity()</code> con una stringa vuota che rende valido il campo in modo che possa essere spedito.</p> + +<p>Lo puoi provare con:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">codice sorgente</a>.)</p> +</div> + +<h4 id="Un_esempio_più_dettagliato">Un esempio più dettagliato</h4> + +<p>Ora che abbiamo visto un esempio molto semplice, vediamo come possiamo usare le API per costurire un sistema di validazione un po' più complesso.</p> + +<p>Prima di tutto il codice HTML:</p> + +<pre class="brush: html notranslate"><form novalidate> + <p> + <label for="mail"> + <span>Please enter an email address:</span> + <input type="email" id="mail" name="mail" required minlength="8"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <button>Submit</button> +</form></pre> + +<p>Questa semplice form usa l'attributo <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> per disattivare la validazine automatica del browser; questo consente al nostro script di prendere il controllo della validazione. Questo comunque non disabilita il supporto per le API di validazione e l'applicazione delle pseudoclassi CSS come {{cssxref(":valid")}}, ecc. Questo significa che se anche il browser con controlla la validità della form prima di spedire i dati, tu puoi comunque farlo dal solo ed applicare lo stile appropriato.</p> + +<p>Il nostro input da validare è un <code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code>, che è <code>required</code>, ed ha un <code>minlength</code> di 8 caratteri. Proviamo a controllare la validità usando il nostro codice e visualizziamo un messaggio appropriato per ciascun attributo.</p> + +<p>Ci proponiamo di visualizzare il messaggio all'intermo di un elemento <code><span></code>. L'attributo <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> per assicurarci che il nostro messaggio di errore verrà reso disponibile a tutti compresi coloro che usano i lettori di schermo.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Il punto chiave qui è l'uso dell'attributo <code>novalidate</code> per la form che è ciò che impedisce alla form di vidualizzare il proprio messaggio di errore e ci consente invece di visualizzare il nostro messaggio presonalizzato nel DOM in qualche modo scelto da noi.</p> +</div> + +<p>Ora un po' di CSS oer migliorare leggermente il look della form, e fornire qualche tipo di informazione quando il valore non è valido:</p> + +<pre class="brush: css notranslate">body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0 auto; +} + +p * { + display: block; +} + +input[type=email]{ + -webkit-appearance: none; + appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* This is our style for the invalid fields */ +input:invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus:invalid { + outline: none; +} + +/* This is the style of our error messages */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>Ora vediamo il codice JavaScript che implementa l'errore personalizzato di validazione.</p> + +<pre class="brush: js notranslate">// There are many ways to pick a DOM node; here we get the form itself and the email +// input box, as well as the span element into which we will place the error message. +const form = document.getElementsByTagName('form')[0]; + +const email = document.getElementById('mail'); +const emailError = document.querySelector('#mail + span.error'); + +email.addEventListener('input', function (event) { + // Each time the user types something, we check if the + // form fields are valid. + + if (email.validity.valid) { + // In case there is an error message visible, if the field + // is valid, we remove the error message. + emailError.innerHTML = ''; // Reset the content of the message + emailError.className = 'error'; // Reset the visual state of the message + } else { + // If there is still an error, show the correct error + showError(); + } +}); + +form.addEventListener('submit', function (event) { + // if the email field is valid, we let the form submit + + if(!email.validity.valid) { + // If it isn't, we display an appropriate error message + showError(); + // Then we prevent the form from being sent by canceling the event + event.preventDefault(); + } +}); + +function showError() { + if(email.validity.valueMissing) { + // If the field is empty + // display the following error message. + emailError.textContent = 'You need to enter an e-mail address.'; + } else if(email.validity.typeMismatch) { + // If the field doesn't contain an email address + // display the following error message. + emailError.textContent = 'Entered value needs to be an e-mail address.'; + } else if(email.validity.tooShort) { + // If the data is too short + // display the following error message. + emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`; + } + + // Set the styling appropriately + emailError.className = 'error active'; +}</pre> + +<p>I commenti spiegano le cose per bene, ma brevemente:</p> + +<ul> + <li>Ogni volta che cambia il valore dell'input controlliamo per vedere se contiene dati validi. Se lo sono rimuoviamo eventuali messaggi di errore. Se invece ci sono errori eseguiamo <code>showError()</code> per inviare il messaggio appropriato.</li> + <li>Ogni volta che proviamo ad inviare la form controlliamo nuovamente se i dati sono validi. Se è così consentiamo la spedizione. Altrimenti eseguiamo <code>showError()</code> per visaulizzare il messaggio appropriato ed impedire la spedizione della form con <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li> + <li>La funzione <code>showError()</code> utilizza varie proprietà della <code>validity</code> dell'input per determinare il tipo di errore e quindi visualizzare il messaggio appropriato.</li> +</ul> + +<p>Ecco il risultato live:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">codice sorgente</a>.)</p> +</div> + +<p>Le API di validazione ti forniscono uno stumento potente per gestire la validaizone delle form, fornendoti un grande controllo sulla interfaccia utente sopra e sotto quello che puoi fare con i soli HTML e CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Per ulteriori ingormazioni vedi il nostro <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation guide</a>, ed il riferimento <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>.</p> +</div> + +<h3 id="Validare_le_forms_senza_le_built-in_API">Validare le forms senza le built-in API</h3> + +<p>In alcuni casi come ad esempio per i browsers più vecchi o per il supporto ai <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">custom controls</a>, non sarà possibile usare le API di validazione. Potrai ancora utilizzare JavaScript per validare la tua form, ma devi scrivere tutto da solo.</p> + +<p>Per validare la form fatti alcune domande:</p> + +<dl> + <dt>Che tipo di validazione devo eseguire?</dt> + <dd>Devi determinare come validare i tuoi dati: operazioni sulle stringhe, conversioni di tipo, regular expressions, e via discorrendo. Sta tutto a te.</dd> + <dt>Cosa devo fare se la form non è valida?</dt> + <dd>Questo chiaramente è materia di UI. Devi decidere come si deve comportare la form. Deve la form spedire i dati ugualmente? Devi illuminare i campi che sono in errore? Devi visualizzare messaggi di errore?</dd> + <dt>Come posso aiutare l'utente a correggere i dati non validi?</dt> + <dd>Per ridurre la frustrazione dell'utente, è molto importante fornire il maggior numero di informazioni possibili per guidarlo a correggere gli errori. Dovresti fornire suggerimenti sui dati attesi ed anche messaggi di errore chiari e comprensibili. Se vuoi approfondire come approntare la UI adeguata per la validazione, ecco alcuni articoli utili che dovresti leggere: + <ul> + <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> + <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> + <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> + <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> + </ul> + </dd> +</dl> + +<h4 id="Un_esempio_che_non_usa_le_API_di_validazione">Un esempio che non usa le API di validazione</h4> + +<p>Per illustrare questo, quello che segue è una versione semplificata dell'esempio precedente che funziona anche con i browsers più vecchi.</p> + +<p>Il HTML è quasi uguale; abbiamo solo rimosso alcune funzionalità di validazione.</p> + +<pre class="brush: html notranslate"><form> + <p> + <label for="mail"> + <span>Please enter an email address:</span> + <input type="text" class="mail" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <!-- Some legacy browsers need to have the `type` attribute + explicitly set to `submit` on the `button`element --> + <button type="submit">Submit</button> +</form></pre> + +<p>Allo stesso modo, anche il CSS non necessita di grandi modifiche; abbiamo solo trasformato la pseudoclasse {{cssxref(":invalid")}} in una vera classe ed evitato di usare il selettore di attiributo che non funziona con Internet Explorer 6.</p> + +<pre class="brush: css notranslate">body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0 auto; +} + +form { + max-width: 200px; +} + +p * { + display: block; +} + +input.mail { + -webkit-appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* This is our style for the invalid fields */ +input.invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus.invalid { + outline: none; +} + +/* This is the style of our error messages */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>Le modifiche maggiori sono nel codice JavaScript, che richiede una revisione molto più pesante.</p> + +<pre class="brush: js notranslate">// There are fewer ways to pick a DOM node with legacy browsers +const form = document.getElementsByTagName('form')[0]; +const email = document.getElementById('mail'); + +// The following is a trick to reach the next sibling Element node in the DOM +// This is dangerous because you can easily build an infinite loop. +// In modern browsers, you should prefer using element.nextElementSibling +let error = email; +while ((error = error.nextSibling).nodeType != 1); + +// As per the HTML5 Specification +const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + +// Many legacy browsers do not support the addEventListener method. +// Here is a simple way to handle this; it's far from the only one. +function addEvent(element, event, callback) { + let previousEventCallBack = element["on"+event]; + element["on"+event] = function (e) { + const output = callback(e); + + // A callback that returns `false` stops the callback chain + // and interrupts the execution of the event callback. + if (output === false) return false; + + if (typeof previousEventCallBack === 'function') { + output = previousEventCallBack(e); + if(output === false) return false; + } + } +}; + +// Now we can rebuild our validation constraint +// Because we do not rely on CSS pseudo-class, we have to +// explicitly set the valid/invalid class on our email field +addEvent(window, "load", function () { + // Here, we test if the field is empty (remember, the field is not required) + // If it is not, we check if its content is a well-formed e-mail address. + const test = email.value.length === 0 || emailRegExp.test(email.value); + + email.className = test ? "valid" : "invalid"; +}); + +// This defines what happens when the user types in the field +addEvent(email, "input", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + if (test) { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } else { + email.className = "invalid"; + } +}); + +// This defines what happens when the user tries to submit the data +addEvent(form, "submit", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + + if (!test) { + email.className = "invalid"; + error.innerHTML = "I expect an e-mail, darling!"; + error.className = "error active"; + + // Some legacy browsers do not support the event.preventDefault() method + return false; + } else { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } +});</pre> + +<p>Il risultato assomiglia a questo:</p> + +<p>{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}</p> + +<p>Come puoi vedere, non è proprio così difficile costruire un tuo sistema di validazione. La parte difficile è di renderlo abbastanza generico da essere usato su tutte le piattaforme e con ogni form che andarai a creare. Ci sono anche molte librerie pronte che ti aiuntano nella validazione come ad esempio <a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a>.</p> + +<h2 id="Metti_alla_prova_le_tue_capacità!">Metti alla prova le tue capacità!</h2> + +<p>Sei arrivato alla fine di questo articolo, ma riesci a ricordare le informazioni più importanti? Puoi trovare alcuni ulteriori test per verificare che tu abbia recepito questi informazioni prima di proseguire — vedi <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation">Test your skills: Form validation</a>.</p> + +<h2 id="Sommario">Sommario</h2> + +<p>La validazione delle form lato client alle volte richiede JavaScript se desideri configurare lo stile ed i messaggi di errore, ma richiede <em>sempre</em> che tu pensi attentamente all'utente. Ricordati sempre di guidare l'utente ad inserire dati corretti. Quindi assicurati di:</p> + +<ul> + <li>Visualizzare messaggi di errore espliciti.</li> + <li>Sii permissivo per i formati di input non essenziali.</li> + <li>Segnala in modo esatto il punto in cui si verifica l'errore soprattutto se la form è molto grande.</li> +</ul> + +<p>Quando hai controllato che la form è stata compilata correttamente, la puoi inviare. In seguito spieghiamo come <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">spedire i dati delle form</a>.</p> + +<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Your_first_form">La tua prima form</a></li> + <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Come strutturare una form web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">I principali controlli nativi delle form</a></li> + <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">I tipi di input HTML5</a></li> + <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Altri controlli delle form</a></li> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aggiungere stile alle form web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Stili delle form avanzati</a></li> + <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Le pseudo-classi UI</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validazione delle form dal dato client</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Inviare i dati delle form</a></li> +</ul> + +<h3 id="Argomenti_avanzati">Argomenti avanzati</h3> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Come costurire controlli delle form personalizzati</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Inviare le forms con JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Tabella di compatibilità dei controlli per le form</a></li> +</ul> diff --git a/files/it/learn/html/forms/index.html b/files/it/learn/html/forms/index.html new file mode 100644 index 0000000000..45c0d055dd --- /dev/null +++ b/files/it/learn/html/forms/index.html @@ -0,0 +1,85 @@ +--- +title: HTML forms +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Questo modulo fornisce una serie di articoli che ti aiuteranno ad apprendere le parti essenziali dei web forms. I web forms sono dei tool molto potenti per l'interazione con gli utenti - sono usati di solito per la raccolta di dati dagli utenti, o per permettere loro di controllare l'interfaccia utente. Tuttavia, per questioni storiche e tecniche non è sempre chiaro come sfruttare tutto il loro potenziale. Negli articoli che seguono, copriremo tutti gli aspetti essenziali dei web forms includendo anche la realizzazione della loro struttura HTML, dello stile dei controlli del form, della validazione dei dati del form, e dell'invio dei dati al server.</p> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Prima di iniziare questo modulo, dovresti almeno affrontare la nostra parte di <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">introduzione all'HTML</a> A questo punto dovresti trovare le {{anch("guide introduttive")}} facili da capire, e dovresti anche sapere utilizzare la guida base sui <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">Native form controls</a>.</p> + +<p>Sapere utilizzare perfettamente i forms, comunque, richede molto più della semplice conoscenza HTML - avrai anche bisogno di imparare alcune specifiche tecniche per dare uno stile ai controlli del form, ed è richiesta anche un pò di conoscenza di scripting per affronte cose come la validazione e la creazione di controlli del form personalizzati. Pertanto, prima di andare ad affrontare le altre sezioni presenti qui sotto, ti raccomandiamo di abbandonare questa pagina ed imparare prima un pò di CSS e Javascript.</p> + +<p>Il paragrafo qui sopra spiega bene il perchè abbiamo messo i web forms in una pagina a solo, piuttosto che mischiare un pò di questi contenuti nelle aree delle pagine che spiegano HTML, CSS e Javascript — gli elementi del form sono molto più complessi rispetto a tutti gli altri elementi HTML, e richiedono anche un connubio perfetto con le tecniche CSS e Javascript per ottenere il massimo da loro.</p> + +<div class="note"> +<p><strong>Nota bene</strong>: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi file, dovresti provare gli esempi di codice su un programma di coding online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a></p> +</div> + +<h2 id="Guida_introduttiva">Guida introduttiva</h2> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">Il tuo primo form HTML</a></dt> + <dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt> + <dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd> +</dl> + +<h2 id="What_form_widgets_are_available">What form widgets are available?</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></dt> + <dd>We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.</dd> +</dl> + +<h2 id="Validating_and_submitting_form_data">Validating and submitting form data</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt> + <dd>This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></dt> + <dd>Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd> +</dl> + +<h2 id="Advanced_guides">Advanced guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></dt> + <dd>You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></dt> + <dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt> + <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd> +</dl> + +<h2 id="Form_styling_guides">Form styling guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt> + <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt> + <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt> + <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li> + <li><a href="/en-US/docs/Web/HTML/Element/input">HTML <input> types reference</a></li> +</ul> diff --git a/files/it/learn/html/howto/author_fast-loading_html_pages/index.html b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..ff1155be75 --- /dev/null +++ b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,185 @@ +--- +title: Suggerimenti per l'authoring di pagine HTML in rapido caricamento +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages +tags: + - Avanzate + - Guide + - HTML + - Performance + - Web + - siti web +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<p>Questi suggerimenti si basano su conoscenze e sperimentazioni comuni.</p> + +<p>Una pagina Web ottimizzata non solo offre un sito più reattivo per i visitatori, ma riduce anche il carico sui server Web e sulla connessione Internet. Questo può essere cruciale per siti ad alto volume che hanno un picco nel traffico a causa di circostanze insolite come le ultime notizie.</p> + +<p>Ottimizzare le prestazioni di caricamento della pagina non è solo per i contenuti che verranno visualizzati dai visitatori di dispositivi mobili o dial-up a banda stretta. È altrettanto importante per i contenuti a banda larga e può portare a notevoli miglioramenti anche per i tuoi visitatori con le connessioni più veloci.</p> + +<h2 id="Suggerimenti">Suggerimenti</h2> + +<h3 id="Riduzione_del_peso_di_una_pagina">Riduzione del peso di una pagina</h3> + +<p>Il peso della pagina è di gran lunga il fattore più importante nelle prestazioni del caricamento della pagina.</p> + +<p>Riducendo il peso della pagina attraverso l'eliminazione di spazi bianchi e commenti non necessari, comunemente noti come minimizzazione, e spostando script inline e CSS in file esterni, è possibile migliorare le prestazioni di download con il minimo bisogno di altre modifiche nella struttura della pagina.</p> + +<p>Strumenti come <a href="http://www.html-tidy.org">HTML Tidy</a> possono automaticamente rimuovere gli spazi bianchi iniziali e le righe vuote aggiuntive da una sorgente HTML valida. Altri strumenti possono "comprimere" JavaScript riformattando l'origine o offuscando l'origine e sostituendo gli identificatori lunghi con versioni più brevi.</p> + +<h3 id="Riduci_al_minimo_il_numero_di_file">Riduci al minimo il numero di file</h3> + +<p>Riducendo il numero di file referenziati in una pagina web si riduce il numero di connessioni HTTP richieste per scaricare una pagina, riducendo quindi il tempo per l'invio di tali richieste e la ricezione delle loro risposte.</p> + +<p>A seconda delle impostazioni della cache di un browser, può inviare una richiesta con l'intestazione <a href="/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> per ogni file di riferimento, chiedendo se il file è stato modificato dall'ultima volta che è stato scaricato. Troppo tempo trascorso a interrogare l'ultima ora modificata dei file di riferimento può ritardare la visualizzazione iniziale della pagina Web, poiché il browser deve controllare l'ora di modifica per ciascuno di questi file, prima di eseguire il rendering della pagina.</p> + +<p>Se si utilizzano molto le immagini di sfondo nel CSS, è possibile ridurre la quantità di ricerche HTTP necessarie combinando le immagini in una, nota come immagine sprite. Quindi applichi la stessa immagine ogni volta che ne hai bisogno per uno sfondo e regola le coordinate x / y in modo appropriato. Questa tecnica funziona meglio con elementi che avranno dimensioni limitate e non funzionerà per ogni uso di un'immagine di sfondo. Tuttavia, le minori richieste HTTP e la memorizzazione nella cache di immagini singole possono ridurre il tempo di caricamento della pagina.</p> + +<h3 id="Riduci_le_ricerche_di_dominio">Riduci le ricerche di dominio</h3> + +<p>Poiché ogni dominio separato costa tempo in una ricerca DNS, il tempo di caricamento della pagina aumenterà insieme al numero di domini separati che appaiono nei link CSS e JavaScript e image src (es).</p> + +<p>Questo potrebbe non essere sempre pratico; tuttavia, dovresti sempre fare attenzione a utilizzare solo il numero minimo necessario di domini diversi nelle tue pagine.</p> + +<h3 id="Cache_che_riutilizzi_i_contenuti">Cache che riutilizzi i contenuti</h3> + +<p>Assicurati che ogni contenuto che può essere memorizzato nella cache, sia memorizzato nella cache e con i tempi di scadenza appropriati.</p> + +<p>In particolare, prestare attenzione all'intestazione <code>Last-Modified</code>. Consente un'efficiente memorizzazione nella cache della pagina; tramite questa intestazione, le informazioni vengono trasmesse all'agente utente sul file che desidera caricare, ad esempio quando è stata modificata l'ultima volta. La maggior parte dei server Web aggiunge automaticamente l'intestazione <code>Last-Modified</code> alle pagine statiche (ad esempio .html, .css), in base alla data dell'ultima modifica memorizzata nel file system. Con le pagine dinamiche (ad esempio <code>.php</code>, <code>.aspx</code>), questo, ovviamente, non può essere eseguito e l'intestazione non viene inviata.</p> + +<p>Quindi, in particolare per le pagine generate dinamicamente, una piccola ricerca su questo argomento è vantaggiosa. Può essere in qualche modo coinvolto, ma farà risparmiare parecchio nelle richieste di pagine su pagine che normalmente non potrebbero essere memorizzate nella cache.</p> + +<p>Maggiori informazioni:</p> + +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li> + <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li> +</ol> + +<h3 id="Ordina_in_modo_ottimale_i_componenti_della_pagina">Ordina in modo ottimale i componenti della pagina</h3> + +<p>Scarica prima il contenuto della pagina, insieme a qualsiasi CSS o JavaScript che potrebbe essere richiesto per la sua visualizzazione iniziale, in modo che l'utente ottenga la risposta apparente più rapida durante il caricamento della pagina. Questo contenuto è tipicamente testo e può quindi trarre vantaggio dalla compressione del testo durante il trasporto, fornendo così una risposta ancora più rapida all'utente.</p> + +<p>Qualsiasi funzionalità dinamica che richiede il completamento del caricamento della pagina prima di essere utilizzata, dovrebbe inizialmente essere disabilitata e quindi abilitata solo dopo il caricamento della pagina. Ciò causerà il caricamento del JavaScript dopo il contenuto della pagina, che migliorerà l'aspetto generale del caricamento della pagina.</p> + +<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Ridurre il numero di script in linea</h3> + +<p>Gli script in linea possono essere costosi per il caricamento della pagina, poiché il parser deve presupporre che uno script inline possa modificare la struttura della pagina mentre è in corso l'analisi. Ridurre l'uso degli script in linea in generale e ridurre l'uso di <code>document.write()</code> per l'output del contenuto, in particolare, può migliorare il caricamento generale della pagina. Usa i moderni metodi <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> per manipolare il contenuto della pagina per i browser moderni, piuttosto che per gli approcci più vecchi basati su <code>document.write()</code>.</p> + +<h3 id="Usa_CSS_moderno_e_marcatura_valida">Usa CSS moderno e marcatura valida</h3> + +<p>L'uso del CSS moderno riduce la quantità di markup, può ridurre la necessità di immagini (spaziali), in termini di layout, e può molto spesso sostituire immagini di testo stilizzato - che "costano" molto più del testo equivalente e CSS .</p> + +<p>L'utilizzo del markup valido presenta altri vantaggi. Innanzitutto, i browser non avranno bisogno di eseguire correzioni degli errori durante l'analisi dell'HTML (questo a parte il problema filosofico di consentire o meno la variazione del formato nell'input dell'utente, quindi programmaticamente "correggerlo" o normalizzarlo o se, invece, applicare un formato di input rigoroso e senza tolleranza).</p> + +<p>Inoltre, il markup valido consente l'uso gratuito di altri strumenti che possono pre-elaborare le tue pagine web. Ad esempio, <a href="http://tidy.sourceforge.net/">HTML Tidy</a> può rimuovere spazi bianchi e tag finali opzionali; tuttavia, rifiuterà di funzionare su una pagina con gravi errori di markup.</p> + +<h3 id="Parte_del_contenuto">Parte del contenuto</h3> + +<p>Le tabelle per i layout sono un metodo legacy che non dovrebbe essere più utilizzato. Dovrebbero invece essere utilizzati layout che utilizzano <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, or <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">griglie</a>.</p> + +<p>Le tabelle sono ancora considerate un markup valido, ma dovrebbero essere utilizzate per la visualizzazione di dati tabulari. Per aiutare il browser a rendere più veloce la tua pagina, dovresti evitare di annidare le tue tabelle.</p> + +<p>Piuttosto che tabelle di nidificazione profonda come in:</p> + +<pre><table> + <table> + <table> + ... + </table> + </table> +</table></pre> + +<p>usa tabelle o div non annidate come in</p> + +<pre><table>...</table> +<table>...</table> +<table>...</table> +</pre> + +<p>Guarda anche: <a class="external" href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> e specifiche della <a class="external" href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a>.</p> + +<h3 id="Minimizza_e_comprime_risorse_SVG">Minimizza e comprime risorse SVG</h3> + +<p>SVG prodotto dalla maggior parte delle applicazioni di disegno spesso contiene metadati non necessari che possono essere rimossi. Configura i tuoi server applica la compressione gzip per le risorse SVG.</p> + +<h3 id="Minimizza_e_comprimi_le_tue_immagini">Minimizza e comprimi le tue immagini</h3> + +<p>Immagini di grandi dimensioni fanno sì che la tua pagina impieghi più tempo per essere caricata. Prendi in considerazione la possibilità di comprimere le tue immagini prima di aggiungerle alla tua pagina. Strumenti online come Compress Jpeg, Tiny PNG e molti altri strumenti sono disponibili online. Puoi utilizzare strumenti offline come Photoshop e altri.</p> + +<h3 id="Specify_sizes_for_images_and_tables">Specify sizes for images and tables</h3> + +<p>Se il browser è in grado di determinare immediatamente l'altezza e / o la larghezza delle immagini e delle tabelle, sarà in grado di visualizzare una pagina Web senza dover ridisporre il contenuto. Questo non solo accelera la visualizzazione della pagina ma impedisce fastidiose modifiche al layout di una pagina quando la pagina completa il caricamento. Per questo motivo, l'altezza e la larghezza dovrebbero essere specificate per le immagini, quando possibile.</p> + +<p>Le tabelle dovrebbero usare il selettore CSS: combinazione di proprietà:</p> + +<pre> table-layout: fixed; +</pre> + +<p>e dovrebbe specificare le larghezze delle colonne usando gli elementi <code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code> e <code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code>.</p> + +<h3 id="Scegli_saggiamente_i_tuoi_requisiti_user-agent">Scegli saggiamente i tuoi requisiti user-agent</h3> + +<p>Per ottenere i migliori miglioramenti nella progettazione della pagina, assicurarsi che siano richiesti requisiti ragionevoli per l'utente-agente per i progetti. Non richiedere che i tuoi contenuti appaiano pixel perfetti in tutti i browser, specialmente nei browser in versione down.</p> + +<p>Idealmente, i requisiti minimi di base dovrebbero essere basati sulla considerazione dei browser moderni che supportano gli standard pertinenti. Questo può includere versioni recenti di Firefox, Internet Explorer, Google Chrome, Opera e Safari.</p> + +<p>Si noti, tuttavia, che molti dei suggerimenti elencati in questo articolo sono tecniche di senso comune applicabili a qualsiasi agente utente e possono essere applicate a qualsiasi pagina Web, indipendentemente dai requisiti di supporto del browser.</p> + +<h3 id="Utilizzare_async_e_defer_se_possibile">Utilizzare async e defer, se possibile</h3> + +<p>Crea gli script JavaScript in modo tale che siano compatibili sia con <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sia con il <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e usa <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> quando possibile, specialmente se hai più tag di script.<br> + Con ciò, la pagina può interrompere il rendering mentre JavaScript è ancora in fase di caricamento. Altrimenti, il browser non renderà nulla che si trova dopo i tag di script che non hanno questi attributi.</p> + +<p>Nota: sebbene questi attributi siano di grande aiuto per la prima volta in cui viene caricata una pagina, è necessario utilizzarli ma non fare affidamento sul fatto che funzionerà su tutti i browser. Se segui tutte le linee guida per creare un buon codice JavaScript, non è necessario modificare il codice.</p> + +<h2 id="Example_page_structure" name="Example_page_structure">Esempio di struttura della pagina</h2> + +<p>· <code>HTML</code></p> + +<dl> + <dd>· <code>HEAD</code></dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>LINK </code>...<br> + File CSS richiesti per l'aspetto della pagina. Riduci al minimo il numero di file per le prestazioni mantenendo CSS indipendenti in file separati per la manutenzione.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>SCRIPT </code>...File JavaScript per funzioni richieste durante il caricamento della pagina, ma non DHTML che può essere eseguito solo dopo il caricamento della pagina.</dd> + <dd>Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd>· <code>BODY</code></dd> + <dd>· L'utente visualizza il contenuto della pagina in piccoli blocchi (tabelle / div) che possono essere visualizzati senza attendere il download della pagina intera.</dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>SCRIPT </code>...Qualsiasi script che verrà utilizzato per eseguire DHTML. Lo script DHTML in genere può essere eseguito solo dopo che la pagina è stata caricata completamente e tutti gli oggetti necessari sono stati inizializzati. Non è necessario caricare questi script prima del contenuto della pagina. Questo rallenta solo l'aspetto iniziale del caricamento della pagina.</dd> + <dd>Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.</dd> + <dd>Se vengono utilizzate immagini per gli effetti di rollover, è necessario precaricarle qui dopo che il contenuto della pagina è stato scaricato.</dd> + </dl> + </dd> +</dl> + +<h2 id="Link_correlati">Link correlati</h2> + +<ul> + <li>Book: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> + <li>The excellent and very complete <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> + <li>Tools for analyzing and optimizing performance: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> + <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li> +</ul> diff --git a/files/it/learn/html/howto/index.html b/files/it/learn/html/howto/index.html new file mode 100644 index 0000000000..5343bdbaad --- /dev/null +++ b/files/it/learn/html/howto/index.html @@ -0,0 +1,155 @@ +--- +title: Use HTML to solve common problems +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The following links point to solutions to common everyday problems you'll need to solve with HTML.</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basic_structure">Basic structure</h3> + +<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li> +</ul> + +<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3> + +<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Hyperlinks">Hyperlinks</h3> + +<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li> +</ul> + +<h3 id="Images_multimedia">Images & multimedia</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">How to add images to a webpage</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li> +</ul> + +<h3 id="Scripting_styling">Scripting & styling</h3> + +<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li> +</ul> + +<h3 id="Embedded_content">Embedded content</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2> + +<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Forms">Forms</h3> + +<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li> +</ul> + +<h3 id="Tabular_information">Tabular information</h3> + +<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li> +</ul> + +<h3 id="Data_representation">Data representation</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li> +</ul> + +<h3 id="Interactivity">Interactivity</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Advanced_text_semantics">Advanced text semantics</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li> +</ul> + +<h3 id="Advanced_images_multimedia">Advanced images & multimedia</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li> +</ul> + +<h3 id="Performance">Performance</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li> +</ul> +</div> +</div> + +<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p> diff --git a/files/it/learn/html/howto/uso_attributi_data/index.html b/files/it/learn/html/howto/uso_attributi_data/index.html new file mode 100644 index 0000000000..f256a42aaf --- /dev/null +++ b/files/it/learn/html/howto/uso_attributi_data/index.html @@ -0,0 +1,82 @@ +--- +title: Uso degli attributi data +slug: Learn/HTML/Howto/Uso_attributi_data +tags: + - Attributi Di Dati Personalizzati + - Esempi + - Guide + - HTML + - HTML5 + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +<div>{{LearnSidebar}}</div> + +<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-* </code>attributes</a> ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.</p> + +<h2 id="Sintassi_HTML">Sintassi HTML</h2> + +<p>La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con <code>data-</code> è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo <code>data</code> per ottenere ciò:</p> + +<pre class="brush: html"><article + id="electriccars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="Accesso_mediante_JavaScript">Accesso mediante JavaScript</h2> + +<p>Accedere ai valori di questi attributi mediante <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.</p> + +<p>Per ottenere un attributo <code>data</code> attraverso l'oggetto <code>dataset</code>, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo <code>data-</code> (notare che i trattini vengono converti in camelCase).</p> + +<pre class="brush: js">var article = document.getElementById('electriccars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</pre> + +<p>Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare <code>article.dataset.columns = 5</code> cambierebbe il valore dell'attributo a <code>"5"</code>.</p> + +<h2 id="Accesso_mediante_CSS">Accesso mediante CSS</h2> + +<p>E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">contenuti generati</a> in CSS con la funzione {{cssxref("attr")}}:</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>E' possibile anche utilizzare i <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">selettori d'attributi</a> in CSS per cambiare lo stile in base ai dati:</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p>E' possibile vedere tutto ciò all'opera <a href="http://jsbin.com/ujiday/2/edit">in questo esempio JSBin</a>. </p> + +<p>Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">questo screencast</a> per vedere un esempio che utilizza contenuti generati e transizioni CSS (<a href="http://jsbin.com/atawaz/3/edit">esempio JSBin</a>).</p> + +<p>I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.</p> + +<h2 id="Problemi">Problemi</h2> + +<p>Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.</p> + +<p>Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti <a href="http://caniuse.com/#feat=dataset">non supportano <code>dataset</code></a>. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. <span id="result_box" lang="it"><span>Inoltre, le</span></span> <a href="http://jsperf.com/data-dataset">prestazioni di lettura degli attributi data</a> <span lang="it"><span>rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse.</span></span> Inoltre, la <a href="http://jsperf.com/data-dataset">performance di lettura degli attributi data</a> comparata alla memorizzazione in un oggetto JavaScript è bassa.</p> + +<p>Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.</p> + +<p>In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Questo articolo è stato adattato da <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> + <li>Gli attributi personalizzati sono supportati anche da SVG 2; vedi {{domxref("SVGElement.dataset")}} e {{SVGAttr("data-*")}} per ulteriori informazioni.</li> + <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> +</ul> diff --git a/files/it/learn/html/index.html b/files/it/learn/html/index.html new file mode 100644 index 0000000000..c617173ffb --- /dev/null +++ b/files/it/learn/html/index.html @@ -0,0 +1,47 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Apprendimento + - Argomento + - Guida + - HTML + - Introduzione + - Principianti +translation_of: Learn/HTML +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{Glossary('HTML')}} è la maggiore tecnologia del Web che definisce la struttura delle pagine web. Se stai cercando di costruire in sito web, dovresti conosce HTML.</p> + +<p>Non è difficile apprendere le basi, ma HTML è anche un' ampia tecnologia con complesse caratteristiche, per questo non esiste un percorso ben preciso di apprendimento. Suggeriamo di iniziare con il seguire pagine per apprenderne alcune tecniche e conoscenze. Muovetevi dalle basi alle tecniche più avanzate o soltanto attraverso le pagine che vi sembrano più interessanti per voi!</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Le_basi">Le basi</h2> + +<p>inizia da qui se non hai alcuna familiarità con HTML:</p> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduzione ad HTML</a></dt> + <dd>se vi siete mai chiesti cosa accade nel vostro Web browser, è da li che potete iniziare ad imparare.</dd> + <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Risolvere problemi comuni con HTML</a></dt> + <dd>questa serie di articoli è qui per aiutare coloro che usano HTML per risolvere dei problemi davvero molto comuni quando si crea una pagina web:Il rapporto con i titoli, aggiungere immagini o video, enfatizzare contenuti, iniziare ad usare i moduli (ossia i form), etc.</dd> + <dt><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">Scrivere un semplice pagina in HTML</a></dt> + <dd>in questo articolo puoi imparare a creare una semplice pagina web.</dd> + <dt><a href="/en-US/Learn/HTML/HTML_tags">Cosa sono i tag in HTML e come usarli</a></dt> + <dd>Questo articolo copre l'HTML base.Trovi cosa sono i tag e come usarli.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Nel_dettaglio">Nel dettaglio</h2> + +<p>non appena presa più familiarità con HTML, qui puoi trovare informazioni più dettagliate da esplorare:</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Reference">Riferimento HTML </a></dt> + <dd>Nella nostra guida di riferimento, potrai trovare dettagli su ogni singolo elemento ed attributo HTML.</dd> +</dl> +</div> +</div> diff --git a/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html new file mode 100644 index 0000000000..e5496dcb1a --- /dev/null +++ b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html @@ -0,0 +1,953 @@ +--- +title: Fondamenti di testo HTML +slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Imparare/HTML/Introduzione_all_HTML/I_metadati_del_head_HTML", "Imparare/HTML/Introduzione_all_HTML/Creazione_di_collegamenti_ipertestuali", "Imparare/HTML/Introduzione_all_HTML")}}</div> + +<p class="summary">Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come {{glossary("semantica")}}) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'{{glossary ("HTML")}} può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscenza di base dell'HTML, come spiegato in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivi:</th> + <td>Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.</td> + </tr> + </tbody> +</table> + +<h2 id="Le_basi_Intestazioni_e_paragrafi">Le basi: Intestazioni e paragrafi</h2> + +<p>Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p>Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.</p> + +<p>In HTML, ogni paragrafo dev'essere racchiuso in un elemento {{htmlelement("p")}}, in questo modo:</p> + +<pre class="brush: html"><p>Sono un paragrafo, oh si lo sono.</p></pre> + +<p>Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:</p> + +<pre class="brush: html"><h1>Sono il titolo della storia.</h1></pre> + +<p>Ci sono sei elementi di intestazione — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, e {{htmlelement("h6")}}. Ogni elemento rappresenta un livello di contenuto differente nel documento; <code><h1></code> rappresenta l'intestazione principale, <code><h2></code> rappresenta i sottotitoli, <code><h3></code> rappresenta i sub-sottovoci, e cosi via.</p> + +<h3 id="Implementazione_della_gerarchia_strutturale">Implementazione della gerarchia strutturale</h3> + +<p>Come esempio, in una storia, <code><h1></code> rappresenterebbe il titolo della storia, <code><h2></code> rappresenterebbe il titolo di ogni capitolo e <code><h3></code> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.</p> + +<pre class="brush: html"><h1>La noia schiacciante</h1> + +<p>Di Chris Mills</p> + +<h2>Capitolo 1: La notte scura</h2> + +<p>Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...</p> + +<h2>Capitolo 2: Il silenzio eterno</h2> + +<p>Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...</p> + +<h3>Lo spettro parla</h3> + +<p>Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"</p></pre> + +<p>Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:</p> + +<ul> + <li>Preferibilmente potresti usare un solo <code><h1></code> per ogni pagina — questa è l'intestazione di primo livello, e tutti gli altri siedono al di sotto di questo nella gerarchia.</li> + <li>Assicurati di utilizzare i titoli nell'ordine corretto nella gerarchia. Non usare <code><h3></code> per rappresentare i sottotitoli, seguito da <code><h2></code> per rappresentare le sub-sottovoci — questo non ha senso e porterà a risultati inaspettati.</li> + <li>Dei sei livelli di intestazione disponibili, dovresti mirare a non utilizzare più di tre per pagina, a meno che tu non ritenga sia necessario. I documenti con molti livelli (ad esempio una gerarchia di intestazione profonda) diventano ingombranti e difficili da navigare. In tali occasioni, è consigliabile diffondere il contenuto su più pagine, se possibile.</li> +</ul> + +<h3 id="Perché_abbiamo_bisogno_di_una_struttura">Perché abbiamo bisogno di una struttura?</h3> + +<p>Per rispondere a questa domanda, diamo un'occhiata a <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).</p> + +<p>Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p>Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:</p> + +<ul> + <li>Gli utenti che guardano una pagina web tendono a esaminarla velocemente per trovare contenuto rilevante, spesso leggendo solo le intestazioni da cui cominciare (di solito rimaniamo molto poco su una pagina web). Se non riescono a trovare qualcosa di utile in pochi secondi, probabilmente rimarranno frustrati e andranno da qualche altra parte.</li> + <li>i motori di ricerca che indicizzano la tua pagina considerano il contenuto delle intestazioni come importanti parole chiave per influenzare il posizionamento della pagina nella ricerca. Senza intestazioni, la tua pagina avrà una bassa performance in termini di {{glossary("SEO")}} (Search Engine Optimization).</li> + <li>Molti utenti con disabilità visiva spesso non leggono le pagine web; invece le ascoltano. Questo succede utilizzando un software chiamato <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>. Questo software fornisce dei modi per accedere velocemente ad un dato contenuto testuale. Tra le varie tecniche, forniscono uno schema del documento attraverso la lettura delle intestazioni, permettendo agli utenti di trovare velocemente le informazioni di cui hanno bisogno. Se le intestazioni non sono disponibili, saranno costretti ad ascoltare la lettura dell'intero documento.</li> + <li>Per dare uno stile al contenuto con {{glossary("CSS")}}, o fargli fare cose interessanti con {{glossary("JavaScript")}}, hai bisogno di avere elementi intorno al contenuto, in modo che CSS/JavaScript possano lavorarci sopra efficacemente.</li> +</ul> + +<p>Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.</p> + +<h3 id="Apprendimento_attivo_Dare_una_struttura_al_nostro_contenuto">Apprendimento attivo: Dare una struttura al nostro contenuto</h3> + +<p>Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo <em>Input</em> in modo che appaia come un'intestazione e due paragrafi nel campo <em>Output</em>.</p> + +<p>In caso di errore, puoi sempre ripartire da zero usando il pulsante <em>Reset</em>. Se ti blocchi, premi il pulsante <em>Show solution</em> per vedere la risposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">My short story I am a policewoman and my name is Trish. + +My legs are made of cardboard and I am married to a fish.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Perché_abbiamo_bisogno_delle_semantiche">Perché abbiamo bisogno delle semantiche?</h3> + +<p>Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai". Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)</p> + +<p>Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento {{htmlelement("h1")}} è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".</p> + +<pre class="brush: html"><h1>This is a top level heading</h1></pre> + +<p>Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).</p> + +<p>Dall'atro lato, potresti <em>far sembrare</em> qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> + +<p>Questo è un elemento {{htmlelement("span")}}. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.</p> + +<h2 id="Liste">Liste</h2> + +<p>Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.</p> + +<h3 id="Puntata">Puntata</h3> + +<p>La lista puntanta viene utilizzata come mark up per elementi di cui l'ordine non è importante — prepara la tua lista della spesa.</p> + +<pre>milk +eggs +bread +hummus</pre> + +<p>Ogni lista puntata comincia con un {{htmlelement("ul")}} che racchiude la lista:</p> + +<pre class="brush: html"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>L'ultimo step è racchiudere ogni elemento della lista con {{htmlelement("li")}} (list item):</p> + +<pre class="brush: html"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Apprendimento_attivo_prepara_la_tua_lista_a_punti">Apprendimento attivo: prepara la tua lista a punti</h4> + +<p>Prova a editare in diretta l'esempio sottostante per creare la tua lista puntata in HTML.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">milk +eggs +bread +hummus</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Numerata">Numerata</h3> + +<p>La lista numerata viene utilizzata per elementi di cui l'ordine è importante — ecco un esempio:</p> + +<pre>Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</pre> + +<p>La struttura è la stessa della lista puntata ad eccezione che chiuderai la lista di elementi con {{htmlelement("ol")}} element, al posto del <code><ul></code>:</p> + +<pre class="brush: html"><ol> + <li>Drive to the end of the road</li> + <li>Turn right</li> + <li>Go straight across the first two roundabouts</li> + <li>Turn left at the third roundabout</li> + <li>The school is on your right, 300 meters up the road</li> +</ol></pre> + +<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4> + +<p>Try editing the live sample below to create your very own HTML ordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3> + +<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste. + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p> + +<h3 id="Nesting_lists">Nesting lists</h3> + +<p>It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste.</li> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> +</ol></pre> + +<p>Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste. + <ul> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> + </ul> + </li> +</ol></pre> + +<p>Try going back to the previous active learning example and updating the second list like this.</p> + +<h2 id="Emphasis_and_importance">Emphasis and importance</h2> + +<p>In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.</p> + +<h3 id="Emphasis">Emphasis</h3> + +<p>When we want to add emphasis in spoken language, we <em>stress</em> certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late</em>.</p> + +<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p> + +<p>In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)</p> + +<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Strong_importance">Strong importance</h3> + +<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>You can nest strong and emphasis inside one another if desired:</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="Active_learning_Lets_be_important!">Active learning: Let's be important!</h3> + +<p>In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1> +<p>On Sunday January 9th 2010, a gang of goths were + spotted stealing several garden gnomes from a + shopping center in downtown Milwaukee. They were + all wearing green jumpsuits and silly hats, and + seemed to be having a whale of a time. If anyone + has any information about this incident, please + contact the police now.</p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3> + +<p>The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p> + +<p>HTML5 redefined <code><b></code>, <code><i></code> and <code><u></code> with new, somewhat confusing, semantic roles.</p> + +<p>Here's the best rule of thumb: it's likely appropriate to use <code><b></code>, <code><i></code>, or <code><u></code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.</p> + +<ul> + <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li> + <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li> + <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li> +</ul> + +<div class="note"> +<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code><u></code> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.</p> +</div> + +<pre class="brush: html"><!-- scientific names --> +<p> + The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) + is the most common hummingbird in Eastern North America. +</p> + +<!-- foreign words --> +<p> + The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- a known misspelling --> +<p> + Someday I'll learn how to <u>spel</u> better. +</p> + +<!-- Highlight keywords in a set of instructions --> +<ol> + <li> + <b>Slice</b> two pieces of bread off the loaf. + </li> + <li> + <b>Insert</b> a tomato slice and a leaf of + lettuce between the slices of bread. + </li> +</ol></pre> + +<h2 id="Summary">Summary</h2> + +<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/it/learn/html/introduction_to_html/getting_started/index.html b/files/it/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..47a4006b6c --- /dev/null +++ b/files/it/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,649 @@ +--- +title: Cominciare conl'HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">In questo articolo trattiamo le basi dell'HTML, per farti cominciare. Definiamo gli elementi, gli attributi e tutti gli altri termini che puoi aver sentito e vediamo come si integrano nel linguaggio. Vediamo inoltre come sono strutturati un elemento HTML e una tipica pagina e spieghiamo altre importanti caratteristiche del linguaggio. Lungo il percorso, giocheremo con un po' di HTML per mantenere viva l'attenzione.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Alfabetizzazione sull'uso del computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, e conoscenze di base di <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>.</td> + </tr> + <tr> + <th scope="row">Obbiettivo:</th> + <td>Acquisire familiarità col linguaggio HTML e fare un po' di pratica nella scrittura di elementi HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Cos'é_l'HTML">Cos'é l'HTML?</h2> + +<p>L'{{glossary("HTML")}} (HyperText Markup Language) non è un linguaggio di programmazione ma un <em>linguaggio di markup</em>, usato per dire al browser come strutturare le pagine web. Può essere complicato o semplice, a seconda di come lo sviluppatore desidera che sia. Un file HTML è composto da una serie di {{glossary("Element", "elementi")}} usati per racchiudere o marcare parti di contenuto, così che venga mostrato in un certo modo. I {{glossary("Tag", "tag")}} che racchiudono il contenuto, possono renderlo un collegamento a un altra pagina web, formattarlo in carattere <em>italico </em>e così via. Per esempio prendiamo la seguente linea di codice:</p> + +<pre>My cat is very grumpy</pre> + +<p>Se vogliamo che la linea sia isolata, possiamo specificare che è un paragrafo, racchiudendola con due tag ({{htmlelement("p")}})</p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<h2 id="Anatomia_di_un_elemento_HTML">Anatomia di un elemento HTML</h2> + +<p>Esploriamo ulteriormente il nostro elemento.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Le parti sono:</p> + +<ol> + <li><strong>Il tag di apertura:</strong> consiste nel nome dell'elemento (in questo caso, p), racchiuso tra parentesi angolari (minore e maggiore - < >); indica sia il punto dove inizia l'elemento e quando ha effetto — nel caso in esame indica l'inizio del paragrafo.</li> + <li><strong>Il tag di chiusura:</strong> uguale al tag di apertura eccetto che per la presenza di uno slash prima del nome dell'elemento; indica dove finisce l'elemento. Dimenticarsi di mettere il tag di chiusura è un tipico errore e può portare a strani risultati.</li> + <li><strong>Il contenuto:</strong> Ciò che sta fra i due tag; in questo caso è solo testo.</li> + <li><strong>L'elemento:</strong> l'insieme del tag di apertura, tag di chiusura e contenuto è detto "elemento".</li> +</ol> + +<h3 id="Active_learning_creare_il_primo_elemento_HTML">Active learning: creare il primo elemento HTML</h3> + +<p>Modifica la linea sottostante nel campo <em>Input</em> racchiudendola fra i tag <em> e </em> (inserisci il tag {{htmlelement("em")}} all'inizio della riga per <em>aprire l'elemento</em>, e {{htmlelement("/em")}} al termine della riga per <em>chiudere l'elemento</em>), questo evidenzierà il contenuto con il carattere italico. Vedrai l'effetto dei cambiamenti nel campo <em>Output</em>.</p> + +<p>Se fai un errore, puoi sempre usare il pulsante reset per ripristinare la situazione iniziale. Se sei bloccato, premi il pulsante <em>Mostra soluzione</em> per vedere la risposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Codice modificabile<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Premi Esc per uscire dalla textarea (La pressione del tasto Tab, inserirà un carattere di tabulazione).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + Questo è il mio testo. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Mostra</span> soluzion<span class="punctuation token">e"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<em>This is my text.</em>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> + +<h3 id="Elementi_annidati">Elementi annidati</h3> + +<p>Puoi inserire elementi dentro altri elementi: si dice annidare (<strong>nesting)</strong>. Se vogliamo sottolineare che il nostro gatto è MOLTO scontroso (VERY grumpy) possiamo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, per enfatizzarla fortemente.</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>Dovete assicurarvi che gli elementi siano annidati in modo appropriato: nell'esempio viene aperto prima l'elemento <code>p</code> e poi l'elemento <code>strong</code>, dobbiamo perciò chiudere prima l'elemento <code>strong</code> e poi l'elemento <code>p</code>. L'esempio seguente è sbagliato:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>Gli elementi devono essere aperti e chiusi correttamente perché sia chiaro se sono all'interno o all'esterno uno dell'altro. Se si mescolano, come nell'esempio qui sopra, il browser cercherà di indovinare quali erano le tue intenzioni e potrebbe darti risultati inaspettati. Quindi presta attenzione.</p> + +<h3 id="Confronto_tra_elementi_blocco_e_in_linea">Confronto tra elementi "blocco" e "in linea"</h3> + +<p>Ci sono due importanti categorie di elementi in HTML. Questi sono gli elementi di tipo blocco (block level) e elementi in linea (inline).</p> + +<ul> + <li>Gli elementi di tipo block level, occupano un'area (blocco) sulla pagina — appariranno sempre su una nuova linea e qualunque contenuto successivo apparirà anch'esso su una nuova linea. I blocchi, tendenzialmente, sono elementi strutturali della pagina che rappresentano: ad esempio paragrafi, liste, menù di navigazione, piè di pagina, ecc. Un blocco non dovrebbe venir inserito all'interno di un elemento inline, ma può essere annidato in un altro blocco.</li> + <li>Gli elementi inline sono quelli contenuti all'interno degli elementi blocco e delimitano solo piccole parti di contenuto del documento: non interi paragrafi o raggruppamenti di contenuti. Un elemento inline non determina la comparsa di una nuova linea nel documento; normalmente appariranno all'interno di un paragrafo e sono elementi tipo un collegamento ad un'altra pagina o sezione di quella in cui ci si trova ({{htmlelement("a")}}) o elementi di enfatizzazione come {{htmlelement("em")}} o {{htmlelement("strong")}}.</li> +</ul> + +<p>Prendete l'esempio seguente:</p> + +<pre class="brush: html"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p>{{htmlelement("em")}} è un elemento in linea, che viene mostrato nell'esempio sottostante, i tre elementi saranno mostrati sulla stessa linea senza nessuno spazio a separarli.</p> + +<p>{{htmlelement("p")}} è un elemento blocco, quindi ogni elemento dichiarato con questo tag, apparirà su una nuova linea con spazi sopra e sotto (la spaziatura è dovuta alla formattazione di default (<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a>) che il browser applica ai paragrafi).</p> + +<p>{{ EmbedLiveSample('Confronto_tra_elementi_blocco_e_in_linea', 700, 200) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: l'HTML5 ha ridefinito le categorie degli elementi: approfondisci in <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categorie degli elementi di contenuto </a>(en) queste nuove definizioni sono più accurate e meno ambigue di quelle definite precedentemente, ma più complicate da capire rispetto a "blocchi" e "in linea", perciò continueremo a usarle in questa spiegazione.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: I termini "block" e "inline", come usati in questo argomento , non dovrebbero essere confusi con <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">i tipi dei box CSS</a> con lo stesso nome. Anche se correlati per default, cambiare la proprietà display nei CSS non cambia la categoria dell'elemento e non modifica quali elementi potrebberso essere contenuti e quali saranno contenuti. Uno dei motivi per cui HTLM5 a deprecato l'uso di questi termini, riguarda la possibilità che questi vengano confusi.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Nelle pagine di riferimento, troverai delle liste che includono gli elementi di Blocco e quelli In linea — controlla <a href="https://developer.mozilla.org/it/docs/Web/HTML/Block-level_elements">Elementi di tipo blocco </a> e <a href="https://developer.mozilla.org/it/docs/Web/HTML/Inline_elements">Elementi in linea</a>.</p> +</div> + +<h3 id="Elementi_vuoti">Elementi vuoti</h3> + +<p>Non tutti gli elementi seguono il modello: tag di apertura, contenuto, tag di chiusura. Alcuni elementi hanno un unico tag, che è abitualmente usato per includere qualcosa nel documento in quel punto. Per esempio l'elemento {{htmlelement("img")}} inserisce un'immagine nella posizione in cui viene scritto.</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Questo fa apparire ciò che segue:</p> + +<p>{{ EmbedLiveSample('Elementi_vuoti', 700, 300) }}</p> + +<div class="note"> +<p><strong>Note</strong>: Gli elementi vuoti sono a volte chiamati <em>elementi void</em>.</p> +</div> + +<h2 id="Attributi">Attributi</h2> + +<p>Gli elementi possono avere "attributi" che appaiono così:</p> + +<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Gli attributi contengono informazioni extra, riguardanti l'elemento, che non appaiano nel contenuto visualizzato nella pagina. In questo caso, l'attributo <code>class</code> permette di assegnare uno o più nomi che potrà/anno poi essere usato/i per puntare alle regole di stile per quell elemento o altro.</p> + +<p>Un attributo deve avere:</p> + +<ol> + <li>uno spazio tra lui e il nome dell'elemento (o il precedente attributo, se l'elemento ha già uno o più attributi.)</li> + <li>il nome dell'attributo seguito dal segno di uguale</li> + <li>un valore racchiuso tra virgolette</li> +</ol> + +<h3 id="Active_learning_aggiunta_di_attributi_ad_un_elemento">Active learning: aggiunta di attributi ad un elemento</h3> + +<p>Un altro esempio di elemento é {{htmlelement("a")}} — che sta per "anchor" e rende il contenuto dell'elemento un collegamento ipertestuale (hyperlink). Questo elemento può avere diversi attributi, come vediamo qui sotto:</p> + +<ul> + <li><code>href:</code> Il valore di questo attributo è l'indirizzo web a cui si vuole che il link punti, ed a cui verra indirizzato il browser quando verrà cliccato. Ad esempio <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: Questo attributo, fornirà informazioni aggiuntive sul link, come ad esempio il nome della pagina a cui si verrà indirizzati. Ad esempio, <code>title="The Mozilla homepage"</code>. Questo attributo verrà mostrato come tooltip quando ci si posizionerà con il mouse sopra il link.</li> + <li><code>target</code>: L'attributo <code>target</code> indica il modo in cui si aprirà il link. Ad esempio, <code>target="_blank"</code> mostrerà il link in un nuovo tab / finestra. Se si vuol aprire il link nel/la tab/finestra corrente, basterà ometterlo.</li> +</ul> + +<p>Modifica la linea sottostante nel campo <em>Input</em> per farne un link al tuo sito preferito. Per prima cosa, aggiungi l'elemento {{htmlelement("a")}}. Poi specifica gli attributi <code>href</code> e <code>title</code>. Ed infine, specifica l'attributo <code>target</code> affinche il collegamento si aprà in un nuovo/a tab/finestra.Vedrai l'effetto dei cambiamenti nel campo <em>Output</em> mentre digiti. Dovresti vedere un link che mostrerà il valore dell'attributo <code>title</code> quando il puntatore del mouse verrà posizionato sopra e aprirà la pagina definita dal valore dell'attributo <code>href</code>. Ricorda di lasciare uno spazio tra nome dell'elemento e attributi.</p> + +<p>Se hai commesso un errore, puoi sempre tornare allo stato iniziale con il pulsante Reset. Se non riesci proprio a trovare la soluzione, premi il pulsante Mostra soluzione e vedrai la risposta.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">>Input</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Premi Esc per uscire dall'area del codice (La pressione del tasto Tab inserirà un carattere di tabulazione).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="entity token" title="<">&lt;</span>p<span class="entity token" title=">">&gt;</span>Un collegamento al mio sito web preferito.<span class="entity token" title="<">&lt;</span>/p<span class="entity token" title=">">&gt;</span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Mostra</span> soluzion<span class="punctuation token">e"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css">html { + font-family: sans-serif; +} + +<code class="language-css"><span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Nascondi soluzione'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<p>Un collegamento al mio <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">sito web preferito</a>.</p>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p> + +<h3 id="Attributi_booleani">Attributi booleani</h3> + +<p>A volte potrai trovare degli attributi senza alcun valore — questo è consentito. Questo tipo di attributi, sono chiamati attributi booleani, e possono avere un unico valore, che solitamente è uguale al nome dell'attributo stesso. Ad esempio, analizziamo l'attributo {{htmlattrxref("disabled","input")}} che può essere assegnato agli elementi input dei moduli (form) per disabilitarli (renderli grigi) e fare in modo che non possa essere introdotto alcun dato.</p> + +<pre class="brush: html"><input type="text" disabled="disabled"></pre> + +<p>Per brevità, è permesso scriverli come nell'esempio qui sotto (abbiamo incluso anche un campo non disabilitato per confronto, per darti un assaggio di cosa verrà).</p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>Entrambi ti mostreranno il seguente output:</p> + +<p>{{ EmbedLiveSample('Attributi_booleani', 700, 100) }}</p> + +<h3 id="Omettere_le_virgolette_attorno_al_valore_degli_attributi">Omettere le virgolette attorno al valore degli attributi</h3> + +<p>Quando navighi il world wild web, potrai trovare i più strani stili di mark up, inclusi i valori degli attributi senza virgolette: ciò è permesso in alcune circostanze, ma negli altri casi creerà problemi al tuo markup. Per esempio, se riprendiamo il precedente esempio del link, possiamo scriverne una versione base con solo l'attributo href, come qui:</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> + +<p>Tuttavia, appena aggiungeremo l'attributo <code>title</code>, le cose smetteranno di funzionare</p> + +<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> + +<p>A questo punto il browser, fraintenderà il tuo markup, interpretando l'attributo <code>title</code> come tre attributi distinti — un attributo title con valore "The" e due attributi booleani <code>Mozilla</code> e <code>homepage</code>. Non è ovviamente ciò che si intendeva e provocherà errori o comportamenti inaspettati, come nell'esempio live sottostante. Prova a posizionare il mouse sopra il link per vedere qual é il title.</p> + +<p>{{ EmbedLiveSample('Omettere_le_virgolette_attorno_al_valore_degli_attributi', 700, 100) }}</p> + +<p>Il nostro consiglio è di mettere sempre le virgolette — Si evitano questi problemi e si ottiene anche un codice più leggibile.</p> + +<h3 id="Virgolette_singole_o_doppie">Virgolette singole o doppie?</h3> + +<p>In questo articolo noterai che sono state usate le doppie virgolette. Potrai tuttavia trovare le virgolette singole in qualche documento HTML. Si tratta esclusivamente di una questione di stile e sei libero di scegliere quelle che preferisci. Le due linee seguenti sono equivalenti.</p> + +<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>Devi però assicurarti di non mescolarle. L'esempio seguente non funzionerà.</p> + +<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>Se hai usato un tipo di virgolette nel tuo HTML, puoi usare l'altro tipo nel valore dell'attributo senza nessun problema:</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>Se vuoi annidare lo stesso tipo di virgolette, dovrai usare {{anch("Entity references: including special characters in HTML")}}.</p> + +<h2 id="Anatomia_di_un_documento_HTML"><a id="Anatomia di un documento HTML" name="Anatomia di un documento HTML">Anatomia di un documento HTML</a></h2> + +<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Adesso vedremo come gli elementi sono combinati per formare una intera pagina HTML.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Qui abbiamo:</p> + +<ol> + <li><code><!DOCTYPE html></code>: La doctype. Nella notte dei tempi, quando l'HTML era appena nato (about 1991/2), doctypeserano utilizzate per collegare set of rules che la pagina HTML doveva rispettare per essere considerata un buon documento HTML, il che significava determinare automaticamente gli errori e altre cose utili. In genere erano qualcosa tipo questo: + + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + Tuttavia oggi, a nessuno interessa di loro e sono solo un residuo storico che deve essere incluso per far si che tutto funzioni. <code><!DOCTYPE html></code> è la più corta stringa di caratteri che rappresenta una doctype valida; è tutto ciò che serve sapere.</li> + <li><code><html></html></code>: The <code><html></code> element. Questo elemento racchiude tutta la pagina e vi si può riferire come "root", elemento radice.</li> + <li><code><head></head></code>: The <code><head></code> element. Questo elemento serve da contenitore per tutta una serie di cose da includere nel documento HTML che non sono "contenuto" da far visualizzare ai visitatori della tua pagina. Sono incluse cose come le parole chiave e la descrizione della pagina, che vuoi appaia nei risultati dei motori di ricerca, dichiarazioni CSS per formattare il contenuto, dichiarazioni dei set di caratteri e altro. Imparerai di più riguardo a questo nel prossimo articolo della serie.</li> + <li><code><meta charset="utf-8"></code>: Questo elemento imposta il set di caratteri che il tuo documento dovrebbe usare a utf-8, che include la maggior parte dei caratteri di tutti gli alfabeti umani conosciuti. Sostanzialmente può trattare qualsiasi tipo di testo tu voglia introdurre. non c'è ragione per non usare questo set di caratteri e può evitare problemi in seguito.</li> + <li><code><title></title></code>: Questo imposta il titolo della tua pagina, cioè il titolo che appare nella scheda del browser quando la pagina viene caricata e che viene usato per descrivere la pagina quando la salvi tra i preferiti (bookmark).</li> + <li><code><body></body></code>: The <code><body></code> element. Questo elemento contiene tutto ciò che vuoi mostrare agli utenti del web che visitano la pagina, sia che si tratti di testo, sia di immagini o video, giochi, tracce audio o qualsiasi altra cosa.</li> +</ol> + +<h3 id="Active_learning_Aggiungere_alcune_caratteristiche_ad_un_documento_HTML">Active learning: Aggiungere alcune caratteristiche ad un documento HTML</h3> + +<p>If you want to experiment with writing some HTML on your local computer, you can: Se vuoi esercitarti a scrivere un po' di HTML sul tuo computer, puoi:</p> + +<ol> + <li>Copiare il codice HTML della pagina di eempio qui sopra</li> + <li>creare un nuovo file nel tuo editor di testo</li> + <li>incollare il codice nel tuo nuovo file</li> + <li>salvare il file col nome <code>index.html</code></li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Trovi questo modello di base anche nel <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> +</div> + +<p>Adesso puoi aprire il file nel tuo browser e vedere come appare il codice, poi puoi modificare il codice e ricaricare la pagina per vedere i risultati. Inizialmente dovrebbe apparire più o meno così:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Così, in questo esercizio, puoi modificare il codice localmente sul tuo computer come mostrato sopra, o puoi modificare l'esempio sotto (l'esempio modificabile rappresenta solo l'elemento <code><body></code>). Ci piacerebbe che tentassi di realizzare questi passi:</p> + +<ul> + <li>appena sotto l'apertura dell'elemento <code><body></code>, aggiungi un titolo principale per il documento; dovrebbe essere racchiuso tra il tag <code><h1></code> e il corrispondente tag di chiusura <code></h1></code>.</li> + <li>Modifica il paragrafo del contenuto per aggiungere del testo che parla di qualcosa a cui sei interessato.</li> + <li>Metti in risalto tutte le parole importanti racchiudendole tra i tag <code><strong></code> e <code></strong></code> per chiudere l'elemento.</li> + <li>Aggiungi un link nel paragrafo, come <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">spiegato precedentemente</a>.</li> + <li>Aggiungi un'immagine al tuo documento, sotto il paragrafo, come <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">spiegato precedentemente nell'articolo. </a>Avrai dei punti bonus se riesci a lincare un'immagine diversa (una nel tuo computer o una altrove nel web).</li> +</ul> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"> +&lt;p&gt;This is my page&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</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; +} + +img { + max-width: 100%; +} + +.output { + 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 = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ + plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ + My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ +<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p> + +<h3 id="Spazio_bianco_nell'HTML">Spazio bianco nell'HTML</h3> + +<p>Nei precedenti esempi potresti aver notato che molto spazio bianco (vuoto) è incluso nel listato del codice - ciò non è affatto necessario; i due seguenti estratti sono equivalenti:</p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>Non importa quanti spazi usi (includendo sia il carattere spaziatura che le interruzioni di linea), il decodificatore (parser) HTML li riduce tutti ad un unico spazio quando restituisce la pagina. Quindi perché usare così tanti spazi? La risposta é per ottenere leggibilità; è molto più semplice capire cosa fa il tuo codice se lo hai formattato ordinatamente e non solo raggruppato insieme in un grande caos. Nel nostro HTML abbiamo fatto rientrare di due spazi, rispetto all'elemento contenitore, tutti gli elementi annidati. Dipende da te quale stile di formattazione usare (per esempio quanti spazi utilizzare per ogni livello di indentazione), ma devi usare qualche tipo di formattazione.</p> + +<h2 id="Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell'HTML">Elenco di riferimento delle entità: includere caratteri speciali nell'HTML</h2> + +<p>In HTML, i caratteri <code><</code>, <code>></code>,<code>"</code>,<code>'</code> e <code>&</code> sono caratteri speciali. Sono anche parti della sintassi dell'HTML, quindi si pone il problema di come poterli includere nel proprio testo, per indicare ad esempio un "minore di", senza che venga interpretato dal parser come codice, cosa che alcuni browser potrebbero fare.</p> + +<p>Dobbiamo usare speciali codici che rappresentano quei caratteri e che possono quindi essere usati in quelle circostanze. Ognuno di questi codici (character reference) inizia con un ampersand (&) e finisce con un punto e virgola (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Literal character</th> + <th scope="col">Character reference equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>Nell'esempio sotto, puoi vedere 2 paragrafi che parlano di tecnologie web:</p> + +<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> + +<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> + +<p>Nel campo di output istantaneo sotto, puoi vedere che il primo paragrafo è sbagliato, perché il browser pensa che il secondo tag p (<p>) sia l'inizio di un nuovo paragrafo. Il secondo paragrafo funziona perché abbiamo sostituito le parentesi angolate con le entità (character references).</p> + +<p>{{ EmbedLiveSample('Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell\'HTML', 700, 200) }}</p> + +<div class="note"> +<p><strong>Note</strong>: Una tabella di riferimento di tutte le entità disponibili nel linguaggio HTML si trova su Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 id="Commenti_HTML">Commenti HTML</h2> + +<p>In HTML, come in molti linguaggi di programmazione, c'è la possibilità di aggiungere dei "commenti" al codice, che sono ignorati dal browser e sono pertanto invisibili per gli utenti; il loro scopo è di includere nel documento spiegazioni sul funzionamento del codice, su cosa fanno le differenti parti di codice, ecc. Tutto ciò può essere molto utile se ritorni sul codice sei mesi dopo che ci avevi lavorato e non puoi ricordare cosa avevi fatto, o se passi a qualcun'altro il tuo codice perché ci lavori.</p> + +<p>Per far si che una parte del contenuto del documento HTML sia un commento, devi includerlo tra speciali segni, che sono <code><!--</code> and <code>--></code>. Avrai per esempio:</p> + +<pre class="brush: html"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>Come puoi vedere qui sotto, il primo paragrafo appare nell'output , mentre il secondo no.</p> + +<p>{{ EmbedLiveSample('Commenti_HTML', 700, 100) }}</p> + +<h2 id="Riepilogo">Riepilogo</h2> + +<p>Hai raggiunto la fine dell'articolo; spero tu abbia gradito questo tour fra le più elementari regole dell'HTML. A questo punto dovresti capire come appare il linguaggio, come funziona ad un livello base e dovresti essere in grado di scrivere alcuni elementi ed attributi. Questo è il punto perfetto a cui essere adesso, perché nei seguenti articoli della serie rivedremo nei dettagli alcune delle cose già viste e introdurremo alcune nuove caratteristiche del linguaggio. Stay tuned! (Resta sintonizzato!)</p> + +<div class="note"> +<p><strong>Note</strong>: A questo punto, poiché inizi a saperne di più di HTML, potresti anche voler iniziare ad esplorare i Cascading Style Sheets, o <a href="/en-US/docs/Learn/CSS">CSS</a>, che é il linguaggio usato per dare stile e abbellire le pagine web (per esempio cambiare il colore dei font o alterare il layout della pagina). HTML e CSS sono fatti per operare insieme, come presto scoprirai.</p> +</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html new file mode 100644 index 0000000000..de092cd8b9 --- /dev/null +++ b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html @@ -0,0 +1,265 @@ +--- +title: Cosa c'è nella head? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML +tags: + - Guida + - HTML + - Principiante + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">La {{glossary("Head", "head")}} di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il {{htmlelement("title")}}, della pagina, i link ai {{glossary("CSS")}} (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Familiarità con le basi di HTML, spiegate in <a href="/it/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.</td> + </tr> + <tr> + <th scope="row">Obbiettivi:</th> + <td>Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Cosa_è_la_head">Cosa è la head?</h2> + +<p>Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>La head HTML è il contenuto dell'elemento {{htmlelement("head")}} — diversamente dal contenuto dell'elemento {{htmlelement("body")}} (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei {{glossary("Metadata", "metadata")}} relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p>In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.</p> + +<h2 id="Aggiungere_un_title">Aggiungere un <code>title</code></h2> + +<p>Abbiamo già visto l'elemento {{htmlelement("title")}} in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento {{htmlelement("h1")}} che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!</p> + +<ul> + <li>L'elemento {{htmlelement("h1")}} appare nella pagina quando è caricata dal browser — in generale dovrebbe essere usato una sola volta per ogni pagina, per contrassegnare il titolo del contenuto della pagina (il titolo della storia, o l'intestazione delle notizie o qualsiasi cosa sia appropriata al tuo scopo).</li> + <li>L'elemento {{htmlelement("title")}} è il metadata che rappresenta il titolo di tutto il documento HTML (non solo del contenuto del documento).</li> +</ul> + +<h3 id="Active_learning_esaminare_un_sempice_esempio.">Active learning: esaminare un sempice esempio.</h3> + +<ol> + <li>Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>. Per farlo puoi usare uno dei due modi seguenti: + + <ol> + <li>copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;</li> + <li>Premere il tasto "Raw" nella pagina, scegliere <em>File > Save Page As...</em> nel menù del browser e scegliere un posto in cui salvarlo.</li> + </ol> + </li> + <li>Adesso apri il file nel browser. Dovresti vedere questo: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <code><h1></code> e dove appare il contenutodell'elemento <code><title></code>!</p> + </li> + <li>Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!</li> +</ol> + +<p>Il contenuto dell'elemento <code><title></code> è anche usato in altri modi. Per esempio, se provi a salvare la pagina nei preferiti (<em>Bookmarks > Bookmark This Page</em>, in Firefox), vedrai il contenuto del <code><title></code> come nome suggerito per il segnalibro.</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>Il <code><title></code> è usato anche nelle ricerche, come vedrai più avanti.</p> + +<h2 id="Metadata_lelemento_<meta>">Metadata: l'elemento <meta></h2> + +<p>I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento {{htmlelement("meta")}}. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <code><meta></code> che possono essere inseriti nella <head> del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.</p> + +<h3 id="Specificare_la_codifica_dei_caratteri_del_documento">Specificare la codifica dei caratteri del documento</h3> + +<p>Nell'esempio che abbiamo visto, c'era questa riga:</p> + +<pre class="brush: html"><meta charset="utf-8"></pre> + +<p>Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare. <code>utf-8</code> è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Se imposti il set di caratteri <code>ISO-8859-1</code>, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<h3 id="Active_learning_esercitarsi_con_la_codifica_dei_caratteri">Active learning: esercitarsi con la codifica dei caratteri</h3> + +<p>Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <code><title></code> (il <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), prova a cambiare il set dei caratteri (il valore di charset) a <code>ISO-8859-1</code> e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:</p> + +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="Aggiungere_lautore_e_la_descrizione">Aggiungere l'autore e la descrizione</h3> + +<p>Molti <code>elementi <meta></code> includono gli attributi <code>name</code> e <code>content</code> :</p> + +<ul> + <li><code>name</code> specifica di che tipo di elemento meta si tratta; che tipo di informazioni contiene.</li> + <li><code>content</code> specifica il reale contenuto dell'elemento meta.</li> +</ul> + +<p>Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:</p> + +<pre class="brush: html"><meta name="author" content="Chris Mills"> +<meta name="description" content="The MDN Learning Area aims to provide +complete beginners to the Web with all they need to know to get +started with developing web sites and applications."></pre> + +<p>Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.</p> + +<p>Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, o {{glossary("SEO")}}.)</p> + +<h3 id="Active_learning_Luso_della_descrizione_nei_motori_di_ricerca">Active learning: L'uso della descrizione nei motori di ricerca</h3> + +<p>La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.</p> + +<ol> + <li>Vai alla prima pagina di <a href="https://developer.mozilla.org/en-US/">The Mozilla Developer Network</a>.</li> + <li>Guarda il sorgente della pagina (Right/<kbd>Ctrl</kbd> + click sulla pagina, nel menù contestuale scegli <em>View Page Source</em>/Visualizza sorgente pagina).</li> + <li>Trova il meta tag description. Sarà così: + <pre class="brush: html"><meta name="description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both +Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."></pre> + </li> + <li>Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <code><meta></code> description e il contenuto dell'elemento <code><title></code> usati nei risultati della ricerca. — Vale decisamente la pena averli! + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (<a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a>) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Molte proprietà <code><meta></code> non sono più usate. Per esempio, l'elemento <code><meta></code> keyword — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.</p> +</div> + +<h3 id="Altri_tipi_di_metadata">Altri tipi di metadata</h3> + +<p>Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.</p> + +<p>Per esempio, <a href="http://ogp.me/">Open Graph Data</a> è un insieme di metadata (un protocollo) che Facebook ha inventato per avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:</p> + +<pre class="brush: html"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both Web sites +and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p>Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:</p> + +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Aggiungere_icone_personalizzate_al_tuo_sito">Aggiungere icone personalizzate al tuo sito</h2> + +<p>Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.</p> + +<p>Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :</p> + +<ol> + <li>Salvandole nella stessa directory in cui è salvato il file index.html nel formato <code>.ico</code> (molti browser supportano le favicons in formati più comuni, come <code>.gif</code> or <code>.png</code>, ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)</li> + <li>Aggiungendo la seguente riga nella <code><head></code> del docuemnto HTML per creare un riferimento all'icona: + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:</p> + +<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- basic favicon --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.</p> + +<p>Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.</p> + +<h2 id="Applicare_CSS_e_JavaScript_allHTML">Applicare CSS e JavaScript all'HTML</h2> + +<p>Pressoché tutti i siti web, oggi, impiegano i {{glossary("CSS")}} per apparire fantastici e i {{glossary("JavaScript")}} per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento {{htmlelement("link")}} e l'elemento {{htmlelement("script")}} rispettivamente.</p> + +<ul> + <li> + <p>L'elemento {{htmlelement("link")}} va sempre inserito nella head del documento; comprende due attributi: rel="stylesheet", che indica di essere riferito ad un documento foglio di stile (stylesheet); e href, che contiene il percorso fino al file css corrispondente al foglio di stile</p> + + <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>L'elemento {{htmlelement("script")}} non deve necessariamente essere nella head; in effetti, è spesso meglio metterlo al fondo del body del documento (proprio prima di chiudere il tag <code></body></code>), per essere sicuri che il documento HTML sia a disposizione del browser prima che provi ad applicargli il javascript (se il Javascript provasse ad accedere ad un elemento che ancora non esiste, il browser darebbe un errore).</p> + + <pre class="brush: html"><script src="my-js-file.js"></script></pre> + + <p><strong>Note</strong>: l'elemento <code><script></code> può sembrare simile ad un elemento vuoto, ma non lo è e necessita del tag di chiusura. Invece di puntare ad un file esterno contenente uno script, puoi anche decidere di mettere lo script dentro l'elemento <code><script></code> .</p> + </li> +</ul> + +<h3 id="Active_learning_applicare_CSS_e_JavaScript_ad_una_pagina">Active learning: applicare CSS e JavaScript ad una pagina</h3> + +<ol> + <li>Per iniziare questo apprendimento attivo, preleva una copia del nostro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, dello <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> e del file <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.</li> + <li>Apri il file HTML sia nel browser che nel tuo editor di testo</li> + <li>Seguendo le informazioni date precedentemente, aggiungi gli elementi {{htmlelement("link")}} e {{htmlelement("script")}} al tuo HTML così che il CSS e il JavaScript gli siano applicati.</li> +</ol> + +<p>Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").</p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>Il Javascript ha aggiunto una lista vuota alla pagina. Adesso, quando clicchi altrove, si aprirà una finestra di dialogo che chiederà di introdurre del testo per un nuovo punto della lista; quando premi OK, l'elemento della lista verrà aggiunto. Quando clicchi un elemento esistente, si aprirà una finestra di dialogo che ti permetterà di cambiare quell'elemento.</li> + <li>Il CSS ha reso verde il background e più grande il testo. Ha anche dato uno stile al contenuto aggiunto dal JavaScript (ha aggiunto lo sfondo rosso e il bordo nero alla lista generata dal JavaScript).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p> +</div> + +<h2 id="Impostare_la_lingua_principale_del_documento">Impostare la lingua principale del documento</h2> + +<p>In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> al tag HTML di apertura (come visto nel <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p> + +<pre class="brush: html"><html lang="en-US"></pre> + +<p>Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)</p> + +<p>Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:</p> + +<pre class="brush: html"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p>Questi codici sono definiti dalla <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Puoi trovare più informazioni a questo riguardo in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> + +<h2 id="Riepilogo">Riepilogo</h2> + +<p>Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/it/learn/html/introduction_to_html/index.html b/files/it/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..459e8e1302 --- /dev/null +++ b/files/it/learn/html/introduction_to_html/index.html @@ -0,0 +1,67 @@ +--- +title: Introduzione a HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - NeedsTranslation + - Structure + - Text + - TopicStub + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Al suo centro, {{glossary("HTML")}} è un linguaggio abbastanza semplice composto da elementi, che possono essere applicati a parti di testo per dare loro un significato diverso in un documento (è un paragrafo? E' un elenco puntato? E' parte di una tabella?). Struttura un documento in sezioni logiche (Ha un'intestazione? Ha tre colonne di contenuto? Ha un menù di navigazione?). Incorpora contenuto come immagini e video in una pagina. Questo modulo introdurrà i primi due dI questi argomenti introducendo i concetti fondamentali e sintassi di cui tu hai bisogno per comprendere l'HTML.</p> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Prima di iniziare questa sezione non hai bisogno di nessuna nozione di HTML, ma dovresti avere una buona familiarità nell'uso dei computer e nell'uso del web passivo(per esempio guardare il contenuto o usarlo). Dovresti avere un normale ambiente di lavoro come spiegato nel dettaglio in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software base</a> e capire come creare e gestire file, come spiegato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Lavorare con i file</a> — entrambi fanno parte della nostra guida per principianti <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web">Inizia con il web</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: Se stai lavorando su un computer/tablet o un altro device dove non hai la possibilità di creare dei file, potresti provare (almeno la maggior parte) degli esempi di codice in un programma online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guida">Guida</h2> + +<p>Questo modulo contiene i seguenti articoli, che ti guideranno nella teoria di base dell'HTML e ti daranno un'ampia opportunità per testare alcune abilità.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Iniziare con HTML</a></dt> + <dd><span id="result_box" lang="it" style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 89px; position: relative; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"><span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Copre le basi assolute dell'HTML, per iniziare: definiamo elementi, attributi e tutti gli altri termini importanti che potresti aver sentito e dove si adattano alla lingua.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Mostriamo anche come è strutturato un elemento HTML, come è strutturata una tipica pagina HTML e spieghiamo altre importanti funzionalità linguistiche di base.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Lungo la strada, avremo un gioco con HTML, per interessarti!</span></span></dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Cosa c'è nell'intestazione del documento? Metadati in HTML</a></dt> + <dd><span id="result_box" lang="it" style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 89px; position: relative; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"><span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">La testa di un documento HTML è la parte che non viene visualizzata nel browser Web quando la pagina viene caricata.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Contiene informazioni come la pagina {{htmlelement ("title")}}, i collegamenti a {{glossary ("CSS")}} (se vuoi dare uno stile al contenuto HTML con CSS), link a favicon personalizzate e metadati</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">(che sono dati sull'HTML, come chi l'ha scritto, e parole chiave importanti che descrivono il documento).</span></span></dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamenti del testo HTML</a></dt> + <dd><span style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 0px; position: static; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;">Uno dei principali lavori dell'HTML è dare significato al testo (conosciuto anche come semantica), in modo che il browser sappia come visualizzarlo correttamente.</span><span style="background-color: transparent; color: #222222; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"> </span><span style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 0px; position: static; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;">Questo articolo esamina come utilizzare l'HTML per suddividere un blocco di testo in una struttura di intestazioni e paragrafi, aggiungere enfasi / importanza alle parole, creare elenchi e altro.</span></dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creare collegamenti ipertestuali</a></dt> + <dd>I collegamenti ipertestuali sono davvero importanti: sono ciò che rende il Web una rete. Questo articolo mostra la sintassi richiesta per effettuare un collegamento e tratta delle migliori prassi inerenti ai collegamenti.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formattazione avanzata del testo</a></dt> + <dd>Ci sono molti altri elementi in HTML adibiti per la formattazione del testo che non troviamo nell'articolo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fondamentali del testo HTML</a>.Questi elementi sono meno conosciuti tuttavia risulta utile conoscerli. Qui imparerai come creare delle citazioni, elenchi puntati, codice del computer e altro relativo al testo come pedici e apici, informazioni di contatto e altro ancora.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struttura del documento e del sito</a></dt> + <dd>Come per la definizione di parti individuale della tua pagina (come "un paragrafo" o "un'immagine", l'HTML è anche usato per definire aree del tuo sito (come "l'intestazione", "il menù di navigazione" o "la colonna di contenuto principale"). Questo articolo spiega come creare la struttura base di un sito e come trascriverla in codice HTML.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Correggere gli errori in HTML</a></dt> + <dd>Scrivere codice HTML è divertente ma se qualcosa andasse storto e tu non potessi lavorare per comprendere ciò che hai sbagliato, cosa faresti? Questo articolo ti introducerà alcuni utili strumenti che ti possono aiutare.</dd> +</dl> + +<h2 id="Valutazioni">Valutazioni</h2> + +<p>I seguenti test valuteranno la tua comprensione delle basi del codice HTML spiegate nelle guide soprascritte.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Scrivere una lettera</a></dt> + <dd>Tutti noi dobbiamo imparare a scrivere una lettera prima o poi; e questo è anche un utile esempio per valutare le tue competenze di formattazione del testo. In questo test, infatti, ti verrà data una lettera da creare.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Strutturare una pagina di contenuti</a></dt> + <dd>Questo test valuterà le tue abilità sull'uso dell'HTML per strutturare una semplice pagina di contenuti, contenente un header, un footer, un menù di navigazione, contenuto principale e una sidebar.</dd> +</dl> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Alfabetizzazione web di base 1</a></dt> + <dd>Un corso eccellente della fondazione Mozilla che esplora e testa molte delle competenze introdotte nel modulo <em>Introduzione all'HTML.</em> La lettura, la scrittura e la partecipazione sul web vi diventeranno famigliari in questa sesta parte del modulo. Scoprirete su cosa il mondo del web è fondato attraverso produzione e collaborazione.</dd> +</dl> 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_<video>">L'elemento <video></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"><video src="rabbit320.webm" controls> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> +</video></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><video></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><video></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"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>Qui abbiamo tirato fuori l'attributo <code>src</code> dal tag <code><video></code> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <code><source></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><source></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_<video>">Altre caratteristiche dell'elemento <video></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"><video controls width="400" height="400" + autoplay loop muted + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video> +</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_<audio>">L'elemento <audio></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"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> +</audio></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><audio></code> supporta tutte le caratteristiche di <code><video></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 --> 00:00:24.606 +This is the first subtitle. + +2 +00:00:30.739 --> 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><track></code> deve essere annidato dentro <code><audio></code> o <code><video></code>, ma dopo tutti gli elementi <code><source></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"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></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><audio></code> e <code><video></code> alla pagina facendogli mostrare i controlli di default del browser,</li> + <li>dessi a entrambi degli elementi <code><source></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><video></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"><img src="dinosaur.jpg"></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"><img src="images/dinosaur.jpg"></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"><img src="https://www.example.com/images/dinosaur.jpg"></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"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth"></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><a></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"><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"></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"><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"></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"><h2>Input</h2> +<textarea id="code" class="input"> +<img></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</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 = '<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">'; + 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"><div class="figure"> + <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"> + + <p>A T-Rex on display in the Manchester University Museum.</p> +</div></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><figure> + <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"> + + <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> +</figure></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"><h2>Input</h2> +<textarea id="code" class="input"> +</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</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 = '<figure>\n <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 <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; + 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"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></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"><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"></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><meta name="viewport" content="width=device-width"></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 > Web Developer > Responsive Design View - In Firefox, dal sandwich menù -> Sviluppo -> 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 > Web Developer > 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"><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"> +</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"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></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><video></code> and <code><audio></code></a>, The <code><picture></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"><picture> + <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> + <source media="(min-width: 800px)" srcset="elva-800w.jpg"> + <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> +</picture> +</pre> + +<ul> + <li>The <code><source></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><source></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><img></code> above, <code><source></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><picture></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><img></code> element, with <code>src</code> and <code>alt</code>, right before <code></picture></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><source></code> element in this example), and a fallback for browsers that don't support the <code><picture></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><picture></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"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> +</picture> +</pre> + +<ul> + <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li> + <li>In a <code><source></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><picture></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><picture></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 <object> a <iframe> — 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><iframe></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> diff --git a/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html new file mode 100644 index 0000000000..9c3f5af2c4 --- /dev/null +++ b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html @@ -0,0 +1,276 @@ +--- +title: Scrivi una semplice pagina in HTML +slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML +tags: + - Guide + - HTML + - Principianti + - Web Development +translation_of: Learn/Getting_started_with_the_web +--- +<div class="summary"> +<p>In questo articolo impareremo come creare una semplice pagina web con il {{Glossary("HTML")}}.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Hai bisogno di <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">un editore di testo</a> e di sapere <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">come aprire un file in un browser</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Creare una pagina web che puoi visualizzare con il browser.</td> + </tr> + </tbody> +</table> + +<h2 id="Sommario">Sommario</h2> + +<p>La semplice pagina web è solo un documento {{Glossary("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossary("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.</p> + +<h2 id="Apprendimento_attivo">Apprendimento attivo</h2> + +<p>Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.</p> + +<h3 id="Primo_passo_Un_file">Primo passo: Un file</h3> + +<p>una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> +</head> +<body> + This is a page + a simple page +</body> +</html></pre> + +<p>Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".</p> + +<p>Adesso dovresti avere un file sul tuo computer che assomiglia a questo esempio nella cartella (lla somiglianza dipende dal tuo sistema opertivo):</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8383/Capture%20du%202014-08-20%2021:20:25.png" style="height: 72px; width: 365px;"></p> + +<p>Facendo un doppio click sul file si aprirà nel browser, per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8385/Capture%20du%202014-08-20%2021:24:06.png" style="height: 180px; width: 311px;"></p> + +<h3 id="Secondo_passo_Un_web_browser">Secondo passo: Un web browser</h3> + +<p>All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8387/Capture%20du%202014-08-20%2021:28:22.png" style="border-style: solid; border-width: 1px; height: 111px; width: 513px;"></p> + +<p>Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.</p> + +<h3 id="Terzo_passo_Sperimenta_e_impara">Terzo passo: Sperimenta e impara</h3> + +<p>Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.</p> + +<p>La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossary("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.</p> + +<p>Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{HTMLElement("head")}} elemento blocco "block", ed un corpo, contenuto {{HTMLElement("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.</p> + +<p>Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{HTMLElement("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{HTMLElement("title")}} è contenuto all'interno {{HTMLElement("head")}}, per esempio.</p> + +<p>Se vuoi inserire qualcosa come un immagine hai bisogno di aggiungere un tag per l'immagine e la stessa immagine all'interno.Per esempio:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> +</head> +<body> + This is a page + a simple page + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> + now with a unicorn +</body> +</html></pre> + +<p>Modifica il file per includere il tag {{HTMLElement("img")}} come questo:</p> + +<pre class="brush: html"><img src="unicorn_pic.png" alt="Unicorn picture :)" /></pre> + +<p>Può essere inserito in qualsiasi parte {{HTMLElement("body")}} non dimenticare di salvare i cambiamenti apportati alla pagina!</p> + +<p>Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).</p> + +<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p> + +<div class="note"> +<p><strong>Nota:</strong> Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.</p> +</div> + +<p>I documenti necessari perchè questa pagina funzioni adesso assomigliano a qualcosa di questo genere nel desktop:</p> + +<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/8389/Capture%20du%202014-08-20%2021:37:14.png" style="height: 69px; width: 405px;"></p> + +<p>Il risultato mostrato nel browser è questo:</p> + +<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/8499/Capture%20du%202014-09-04%2021:39:16.png" style="border-style: solid; border-width: 1px; height: 404px; width: 664px;"></p> + +<p>Come hai notato il tag{{HTMLElement("img")}} ha<strong> {{Glossary("attribute","attributes")}} </strong>che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.</p> + +<p>Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.</p> + +<h2 id="Più_in_profondità">Più in profondità</h2> + +<h3 id="Questa_non_è_una_pagina_web_molto_carina">Questa non è una pagina web molto carina</h3> + +<p>Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.</p> + +<p>{{Glossary("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente {{Glossary("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.</p> + +<p>Sperimentiamo un poco con il CSS trasformando il testo contenuto nel tag body da nero a blue:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> + <style> + body { + color: blue; + } + </style> +</head> + <body> + <p>This is a some blue text</p> + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> + </body> +</html></pre> + +<p>Nota l'aggiunta{{HTMLElement("style")}} alla pagina all'interno{{HTMLElement("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.</p> + +<p>Vuoi il testo sottolineato? prova ad aggiungere la regola "text-decoration: underline;" allo style:</p> + +<pre class="brush: css">body { + color: blue; + text-decoration: underline; +}</pre> + +<p>Vuoi che il tuo testo abbia una misura ben precisa?Prova aggiungendo "font-size: 42px;" come in esempio:</p> + +<pre class="brush: css">body { + color: blue; + text-decoration: underline; + font-size: 42px; +}</pre> + +<p>Il risultato finale sarà questo:</p> + +<pre class="brush: html"><html> +<head> + <title>Hi there</title> + <style> + body { + color: blue; + text-decoration: underline; + font-size: 42px; + } + </style> +</head> +<body> + <p>This is a blue underlined big text</p> + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> +</body> +</html></pre> + +<p>e se salvi la pagina nel tuo editore e poi riaggiorni il browser la pagina che vedrai sarà la seguente:</p> + +<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/8497/Capture%20du%202014-09-04%2021:40:18.png" style="border-style: solid; border-width: 1px; height: 494px; width: 743px;"></p> + +<h3 id="Andiamo_alla_seconda_pagina">Andiamo alla seconda pagina</h3> + +<p>Quando navighi nel Web spesso incontri {{Glossary("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.</p> + +<h4 id="Collega_due_pagine_locali">Collega due pagine locali</h4> + +<p>Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.</p> + +<p>Nel primo documento possiamo tenere la stessa struttura di prima, la cosa importante è aggiungere un nuovo tag {{HTMLElement("a")}}, così:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Page 1 to ground control</title> +</head> +<body> + This is page 1. + <a href="page2.html" title="to page 2">What is going on on page 2?</a> +</body> +</html></pre> + +<p>La seconda pagina avrà un link che ci fa tornare alla prima pagina:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Page 2 :)</title> +</head> +<body> + This is a page 2. + <a href="page1.html" title="to page 1"><span>Want to go back to page 1? Click here</span></a> +</body> +</html></pre> + +<div class="note"> +<p><strong>Nota:</strong>Assicurati che il nome del file {{HTMLElement("a")}} tag con attributo href sia lo stesso nome del documento creato nel tuo computer.</p> +</div> + +<p>Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.</p> + +<p>Il documento principale dovrebbe avere i due documenti nella stessa cartella, in questa maniera:</p> + +<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/8395/Capture%20du%202014-08-20%2022:06:05.png" style="height: 92px; width: 595px;"></p> + +<p>La Page 1 sarà così visualizzata nel browser:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8397/Capture%20du%202014-08-20%2022:11:31.png" style="border-style: solid; border-width: 1px; height: 114px; width: 365px;"></p> + +<p>e la Page 2 sarà così visualizzata nel browser dopo aver fatto click sul link di Page 1:</p> + +<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/8401/Capture%20du%202014-08-20%2022:15:17.png" style="border-style: solid; border-width: 1px; height: 116px; width: 366px;"></p> + +<div class="note"> +<p><strong>Nota:</strong>Il link che torna alla page 1 è violetto perchè il browser "sa" che in precedenza avevamo visitato la Page 1</p> +</div> + +<p>Se vuoi puoi fare la prova creando più pagine o passare alla prossima sezione per portare tutto questo al lvello successivo.</p> + +<h4 id="Collegamento_ad_un_altra_pagina_web">Collegamento ad un altra pagina web</h4> + +<p>In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>My page</title> +</head> +<body> + One day,...Unicorns are great...See you. + <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia"><span>Want to go know more about unicorns? Wikipedia is right here</span></a> +</body> +</html></pre> + +<p>Potrebbe più o meno assomigliare a questo nel browser:</p> + +<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/8403/Capture%20du%202014-08-20%2022:22:24.png" style="height: 158px; width: 861px;"></p> + +<p>Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un <strong>tooltip.</strong>Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.</p> + +<div class="note"> +<p><strong>Ricorda:</strong> Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.</p> +</div> + +<h2 id="Prossimi_passi">Prossimi passi</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/HTML_tags">Come usare un tag HTML</a>: Ci sono molti tag in HTML qui abbiamo visto solo i base, puoi trovare delle ulteriori risorse qui.</li> + <li><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">Anatomia della pagina web</a>: HTML ha alcune regole e una pagina può avere molto contenuto questo può aiutare a comprendere pagine più complesse come quelle usate in alcuni dei più famosi siti nel Web!</li> + <li><a href="/en-US/docs/Learn/Understanding_links_on_the_web">Comprendere i link</a>: Abbiamo usato esempi molto semplici con i link questo articolo è per te se vuoi capire perchè i "links" sono l'origine del nome del "Web".</li> + <li><a href="/en-US/docs/Learn/Using_images">Usare le immagini</a> and <a href="/en-US/docs/Learn/Adding_audio_and_video">aggiungere audio e video</a> sono utili per aggiungere del contenuto multimediale con il semplice HTML.</li> +</ul> diff --git a/files/it/learn/html/tables/index.html b/files/it/learn/html/tables/index.html new file mode 100644 index 0000000000..af7fae7ac0 --- /dev/null +++ b/files/it/learn/html/tables/index.html @@ -0,0 +1,45 @@ +--- +title: HTML Tables +slug: Learn/HTML/Tables +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - NeedsTranslation + - Tables + - TopicStub +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little <a href="/en-US/docs/Learn/CSS">CSS</a> for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should already have covered the basics of HTML — see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></dt> + <dd>This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></dt> + <dd>In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></dt> + <dd>In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.</dd> +</dl> diff --git a/files/it/learn/index.html b/files/it/learn/index.html new file mode 100644 index 0000000000..c301d38b81 --- /dev/null +++ b/files/it/learn/index.html @@ -0,0 +1,83 @@ +--- +title: Impara il web +slug: Learn +tags: + - Indice(2) + - Principiante + - Web + - imparare +translation_of: Learn +--- +<div class="summary"> +<p>Vuoi creare tuoi siti web e tue applicazioni web? Sei nel posto giusto!</p> +</div> + +<p>C'è molto da imparare sullo sviluppo e sul web design, ma non preoccuparti. Sia che tu abbia appena cominciato a programmare o che tu voglia diventare un programmatore professionista a tutti gli effetti, siamo qui per aiutarti.</p> + +<h2 id="Come_cominciare">Come cominciare</h2> + +<p>Vogliamo conoscerti meglio. In quale descrizione ti riconosci di più?</p> + +<ul class="card-grid"> + <li><span>Sono un principiante</span> + + <p>Benvenuto! Il miglior luogo da cui partire sono la nostra serie di guide <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web">"Cominciare con il web"</a>. Le guide forniscono tutte le basi per farti cominciare con lo sviluppo web.</p> + </li> + <li><span>Conosco il mondo del web</span> + <p>Molto bene! In questo caso ti suggeriamo di scavare più a fondo nelle tecnologie, fino al cuore del Web: <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, e <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a></p> + </li> + <li><span>Ho padronanza con il web</span> + <p>Fantastico! In questo caso potresti essere interessato nell'esplorare le nostre <a href="https://developer.mozilla.org/en-US/docs/Web/Guide">Guide</a> avanzate e i <a href="https://developer.mozilla.org/en-US/docs/Web/Tutorials">Tutorials</a>. Dovresti anche considerare di <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">contribuire nell'Area di Apprendimento</a>. ;)</p> + </li> +</ul> + +<div class="note"> +<p><strong>Nota: </strong>In futuro stiamo pensando di pubblicare più strumenti per facilitarti l'apprendimento, per esempio per programmatori professionisti che stanno cercando di imparare tecniche avanzate, sviluppatori che sono nuovi nel mondo del Web, o per persone che vogliono imparare tecniche di design.</p> +</div> + +<p>{{LearnBox({"title":"Quick learning: Vocabulary"})}}</p> + +<h2 id="Imparare_con_altre_persone">Imparare con altre persone</h2> + +<p>Se hai una domanda o stai ancora pensando cosa fare, Mozilla è una comunità globale di entusiasti del Web, inclusi mentori e insegnanti che sono lieti di aiutarti. Entra in contatto con loro attraverso WebMaker:</p> + +<ul> + <li>Incontra e parla con i mentori e gli insegnanti al <a href="http://discourse.webmaker.org/">forum di discussione</a>.</li> + <li><a href="https://events.webmaker.org/">Trova eventi </a>e impara di più sul web con persone fantastiche.</li> +</ul> + +<h2 id="Condividi_la_conoscenza">Condividi la conoscenza</h2> + +<p>Questa intera Area di Apprendimento è stata costruita attraverso i nostri collaboratori. Abbiamo bisogno di te nella nostra squadra, che tu sia un principiante, un insegnante un esperto sviluppatore web. Se sei interessato, dai un occhio a <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">come puoi aiutare</a>, e ti incoraggiamo di contattarci nella nostra <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing list </a>o nel nostro <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>. :)</p> + +<h2 id="Sotto_categorie">Sotto categorie</h2> + +<ol> + <li><a href="/it/docs/Learn/Getting_started_with_the_web">Introduzione al web</a></li> + <li><a href="/it/docs/Learn">Impara il web</a></li> + <li><a href="/it/docs/Learn/Common_questions">Domande frequenti</a></li> + <li><a href="#">Learn technologies</a> + <ol> + <li><a href="/it/docs/Learn/HTML">HTML</a></li> + <li><a href="/it/docs/Learn/CSS">CSS</a></li> + <li><a href="/it/docs/Learn/JavaScript">JavaScript</a></li> + <li><a href="/it/docs/Learn/Drafts/Python">Python</a></li> + </ol> + </li> + <li><a href="/it/docs/Web/Tutorials">Tutorial</a> + <ol> + <li><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">How to build a web site?</a></li> + <li><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information security basics</a></li> + </ol> + </li> + <li><a href="http://weblitmapper.webmakerprototypes.org/">Learning resources</a></li> + <li><a href="/en-US/Learn/help">Getting help</a> + <ol> + <li><a href="/en-US/Learn/FAQ">FAQ</a></li> + <li><a href="/en-US/docs/Glossary">Glossary</a></li> + <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Ask your questions</a></li> + <li><a href="https://events.webmaker.org/" rel="external">Meet teachers and mentors</a></li> + </ol> + </li> + <li><a href="/en-US/Learn/How_to_contribute">How to contribute</a></li> +</ol> diff --git a/files/it/learn/javascript/building_blocks/index.html b/files/it/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..9b7bed94d3 --- /dev/null +++ b/files/it/learn/javascript/building_blocks/index.html @@ -0,0 +1,59 @@ +--- +title: JavaScript building blocks +slug: Learn/JavaScript/Building_blocks +tags: + - Article + - Assessment + - Beginner + - CodingScripting + - Conditionals + - Functions + - Guide + - Introduction + - JavaScript + - Landing + - Loops + - Module + - NeedsTranslation + - TopicStub + - events + - 'l10n:priority' +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<div>In questo modulo, continueremo con la copertura di tutte le funzionalità fondamentali di Javascript, rivolgendo la nostra attenzione ai tipi di blocco più comuni come istruzioni condizionali, loop, funzioni ed eventi. Avrai già visto queste cose nel corso, ma solo di passaggio -- qui ne discuteremo esplicitamente.</div> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Prima di iniziare questo modulo, dovresti avere un po' di familiarità con le basi di <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> e <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, e dovresti anche aver lavorato nei moduli precedenti, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Se stai lavorantdo su un computer/tablet/altri dispositivi dove non hai la possibilità di creare i tuoi file, potresti provare (la maggior parte) degli esempi di codice in un programma di coding online come <a href="http://jsbin.com/">JSBin</a> opp <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guide">Guide</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Prendi decisioni nel tuo codice — conditionals</a></dt> + <dd>In ogni linguaggio di programmazione, il codice necessita di prendere decisioni ed eseguire azioni di conseguenza a seconda dei diversi input. Per esempio, in un gioco, se le vite del giocatore sono 0, allora la partita termina. In un'app meteo, se viene aperta al mattino, verrà mostrata una figura dell'alba e se è notte una relativa a stelle e luna. In questo articolo esploreremo come funzionano le strutture condizionali in JavaScript</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Cicli di codice (loop)</a></dt> + <dd>A volte è necessario svolgere la stessa attività più di una volta di seguito. Ad esempi, guardando una lista di nomi. Nella programmazione i loop svolgono questo lavoro molto bene. Qui vedremo la struttura dei loop in JavaScript</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funzioni — blocchi di codice riusabile</a></dt> + <dd>Un altro concetto essenziale nel coding sono le <strong>funzioni</strong>. Le <strong>Funzioni</strong> ti consento di memorizzare un pezzo di codice che esegue una singola attività all'interno di un blocco definito e quindi richiamare il codice ogni volta che ne hai bisogno usando un singolo breve comando — invece di dover scrivere lo stesso codice più volte. In questo articolo esploreremo i concetti fondamentali dietro funzioni come la sistassi di base, come invocare e definire funzioni, ambito e parametri.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Costruisci la tua funzione</a></dt> + <dd>Con la maggior parte della teoria essenziale trattata in precedenza, questo articolo offre un'esperienza più pratica. Qui farai un po' di pratica con la creazione della tua funzione personalizzata. Lungo la strada, spiegheremo anche alcuni ulteriori dettagli utili su come gestire le funzioni.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Valori di ritorno delle funzioni</a></dt> + <dd>L'ultimo concetti essenziale che devi sapere sulle funzioni è il tipo di ritorno. Alcune funzioni non ritornano un valore utile dopo l'esecuzione, ma altre lo fanno. É importante capire quali sono i loro valori, come utilizzarli e come fare in modo che le tue funzioni personalizzate restituiscano valori utili</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduzione agli eventi</a></dt> + <dd>Gli eventi sono azioni o occorrenze che si verificano nel sistema che si sta programmando, il sistema ti informa in modo che tu possa rispondere in qualche modo se lo desideri. Ad esempio se l'utente fa click su un pulsante in una pagina Web, è possibile che si desideri rispondere a tale azione visualizzando una casella di informazioni. In quest'ultimo articolo discuteremo alcuni concetti importanti relativi agli eventi e vedremo come funzionano nei browser.</dd> +</dl> + +<h2 id="Valutazioni">Valutazioni</h2> + +<p>La seguente valutazione metterà alla prova la tua comprensione dei principi di base di JavaScript trattati nelle guide sopra.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galleria di immagini (carousel)</a></dt> + <dd>Ora che abbiamo esaminati i blocchi fondamentali di JavaScript, testeremo la tua conoscenza dei loop, funzioni, condizioni ed eventi creando un oggetto abbastanza comune che vedrai su molti siti Web: una galleria di immagini basata su JavaScript.</dd> +</dl> diff --git a/files/it/learn/javascript/comefare/index.html b/files/it/learn/javascript/comefare/index.html new file mode 100644 index 0000000000..275eb0cf8d --- /dev/null +++ b/files/it/learn/javascript/comefare/index.html @@ -0,0 +1,291 @@ +--- +title: Risolvere problematiche frequenti nel tuo codice JavaScript +slug: Learn/JavaScript/Comefare +tags: + - Principianti + - imparare +translation_of: Learn/JavaScript/Howto +--- +<div>R{{LearnSidebar}}</div> + +<p class="summary">I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.</p> + +<h2 id="Errori_comuni_dei_principianti">Errori comuni dei principianti</h2> + +<h3 id="Ortografia_corretta">Ortografia corretta</h3> + +<p>Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.</p> + +<p>Alcune comuni funzioni built-in del browser che causano problemi sono: </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Corretto</th> + <th scope="col">Sbagliato</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>getElementsByTagName()</code></td> + <td><code>getElementbyTagName()</code></td> + </tr> + <tr> + <td><code>getElementsByName()</code></td> + <td><code>getElementByName()</code></td> + </tr> + <tr> + <td><code>getElementsByClassName()</code></td> + <td><code>getElementByClassName()</code></td> + </tr> + <tr> + <td><code>getElementById()</code></td> + <td><code>getElementsById()</code></td> + </tr> + </tbody> +</table> + +<h3 id="Posizione_del_punto_e_virgola">Posizione del punto e virgola</h3> + +<p>Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Corretto</th> + <th scope="col">Sbagliato</th> + </tr> + <tr> + <td><code>elem.style.color = 'red';</code></td> + <td><code>elem.style.color = 'red;'</code></td> + </tr> + </thead> +</table> + +<h3 id="Funzioni">Funzioni</h3> + +<p>Ci sono alcune cose che possono andare storte con le funzioni.</p> + +<p>Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:</p> + +<pre class="brush: js">function myFunction() { + alert('This is my function.'); +};</pre> + +<p>Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:</p> + +<pre class="brush: js">myFunction();</pre> + +<h4 id="Ambito_scope_della_funzione">Ambito (scope) della funzione</h4> + +<p>Ricorda che le <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">funzioni hanno il loro specifico ambito (scope)</a> — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">restituire il valore (return)</a> dalla funzione stessa.</p> + +<h4 id="Eseguire_codice_posto_dopo_un_istruzione_return">Eseguire codice posto dopo un istruzione return</h4> + +<p>Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.</p> + +<p>Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).</p> + +<h3 id="Notazione_per_gli_oggetti_opposto_al_normale_assegnamento">Notazione per gli oggetti opposto al normale assegnamento</h3> + +<p>Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :</p> + +<pre class="brush: js">const myNumber = 0;</pre> + +<p>Con gli <a href="/en-US/docs/Learn/JavaScript/Objects">Oggetti</a> occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:</p> + +<pre class="brush: js">const myObject = { + name: 'Chris', + age: 38 +}</pre> + +<h2 id="Definizioni_Base">Definizioni Base</h2> + +<div class="column-container"> +<div class="column-half"> +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">Cos'è JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">Cos'è una variabile?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Cosa sono le stringhe?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">Cos'è un array?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Cos'è un ciclo?</a></li> +</ul> +</div> + +<div class="column-half"> +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Cos'è una funzione?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Cos'è un evento?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">Cos'è un oggetto?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">Cos'è il formato JSON?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">Cos'è una web API?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Cos'è il DOM?</a></li> +</ul> +</div> +</div> + +<h2 id="Casi_base_duso">Casi base d'uso</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Generali">Generali</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">Come aggiungi JavaScript alla tua pagina?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">Come aggiungi commenti al tuo codice JavaScript?</a></li> +</ul> + +<h3 id="Variabili">Variabili</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">Come dichiari una variabile?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">Come inizializzi una variabile con un valore?</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">Come aggiorni il valore di una variabile?</a> (vedi anche <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">Operatori di assegnamento</a>)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Variable_types">Quali sono i tipi di dato in JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">Cosa significa 'debolmente tipizzato'?</a></li> +</ul> + +<h3 id="Tipi_di_dati_numerici">Tipi di dati numerici</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">Che tipi di numeri tratti nel tuo sviluppo web?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">Come fare matematica di base in JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">Quali sono le regole di precedenza degli operatori e come sono gestite in JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">Come incrementi e decrementi valori in JavaScript?</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">Come confronti i valori in JavaScript?</a> (ad es. vedere qual'è il più grande oppure se un valore è uguale ad un altro).</li> +</ul> + +<h3 id="Stringhe">Stringhe</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">Come crei una stringa in JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">Devi usare singoli o doppi apici?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">Come rappresenti i caratteri di escape nelle stringhe?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">Come unisci le stringhe tra loro?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">Puoi unire stringhe con numeri?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">Come trovi la lunghezza di una stringa?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">Come trovi quale carattere occupa una certa posizione in una stringa?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">Come trovi ed estrai una data sottostringa da una stringa?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">Come cambi minuscole/maiuscole in una stringa?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">Come sostituisci una data sottostringa con un'altra?</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Arrays">Arrays</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">Come crei un array?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">Come accedi e modifichi gli elementi di un array?</a> (include arrays multidimensionali)</li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">Come trovi la lunghezza di un array?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">Come aggiungi e rimuovi elementi di un array?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">Come dividi una stringa in elementi di un array, o unisci elementi di un array a costituire una stringa?</a></li> +</ul> + +<h3 id="Debugging_JavaScript">Debugging JavaScript</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">What are the basic types of error?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools, and how do you access them?</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">How do you log a value to the JavaScript console?</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">How do you use breakpoints and other JavaScript debugging features?</a></li> +</ul> + +<p>For more information on JavaScript debugging, see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a>. Also, see <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">Other common errors</a> for a description of common errors.</p> + +<h3 id="Making_decisions_in_code">Making decisions in code</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">How do you execute different blocks of code, depending on a variable's value or other condition?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">How do you use if ...else statements?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">How do you nest one decision block inside another?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">How do you use AND, OR, and NOT operators in JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">How do you conveniently handle a large number of choices for one condition?</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">How do you use a ternary operator to make a quick choice between two options based on a true or false test?</a></li> +</ul> + +<h3 id="Loopingiteration">Looping/iteration</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">How do you run the same bit of code over and over again?</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">How do you exit a loop before the end if a certain condition is met?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">How do you skip to the next iteration of a loop if a certain condition is met?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">How do you use while and do ... while loops?</a></li> + <li>How do you iterate over the elements in an array?</li> + <li>How do you iterate over the elements in a multidimensional array?</li> + <li>How do you iterate over the members in an object?</li> + <li>How do you iterate over the members of an object nested inside an array?</li> +</ul> +</div> +</div> + +<h2 id="Intermediate_use_cases">Intermediate use cases</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Functions">Functions</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">How do you find functions in the browser?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">What is the difference between a function and a method?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">How do you create your own functions?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">How do you run (call, or invoke) a function?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">What is an anonymous function?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">How do you specify parameters (or arguments) when invoking a function?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">What is function scope?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">What are return values, and how do you use them?</a></li> +</ul> + +<h3 id="Objects">Objects</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">How do you create an object?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Dot_notation">What is dot notation?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">What is bracket notation?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">How do you get and set the methods and properties of an object?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#What_is_this">What is <code>this</code>, in the context of an object?</a></li> + <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">What is object-oriented programming?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">What are constructors and instances, and how do you create them?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">What different ways are there to create objects in JavaScript?</a></li> +</ul> + +<h3 id="JSON">JSON</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#JSON_structure">How do you structure JSON data, and read it from JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">How can you load a JSON file into a page?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">How do you convert a JSON object to a text string, and back again?</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Events">Events</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">What are event handlers and how do you use them?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">What are inline event handlers?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()">What does the <code>addEventListener()</code> function do, and how do you use it?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">Which mechanism should I use to add event code to my web pages?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">What are event objects, and how do you use them?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">How do you prevent default event behaviour?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">What is event delegation, and how does it work?</a></li> +</ul> + +<h3 id="Object-oriented_JavaScript">Object-oriented JavaScript</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">What are object prototypes?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">What is the constructor property, and how can you use it?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">How do you add methods to the constructor?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">How do you create a new constructor that inherits its members from a parent constructor?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">When should you use inheritance in JavaScript?</a></li> +</ul> + +<h3 id="Web_APIs">Web APIs</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?</a></li> +</ul> +</div> +</div> diff --git a/files/it/learn/javascript/first_steps/cosa_è_andato_storto/index.html b/files/it/learn/javascript/first_steps/cosa_è_andato_storto/index.html new file mode 100644 index 0000000000..1fa4343de8 --- /dev/null +++ b/files/it/learn/javascript/first_steps/cosa_è_andato_storto/index.html @@ -0,0 +1,253 @@ +--- +title: Cosa è andato storto? Problemi con Javacript +slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Quando abbiamo realizzato il gioco "Indovina il numero" nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To gain the ability and confidence to start fixing simple problems in your own code.</td> + </tr> + </tbody> +</table> + +<h2 id="Types_of_error">Types of error</h2> + +<p>Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:</p> + +<ul> + <li><strong>Syntax errors</strong>: These are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean!</li> + <li><strong>Logic errors</strong>: These are errors where the syntax is actually correct but the code is not what you intended it to be, meaning that program runs successfully but gives incorrect results. These are often harder to fix than syntax errors, as there usually isn't a resulting error message to direct you to the source of the error.</li> +</ul> + +<p>Okay, so it's not quite <em>that</em> simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.</p> + +<h2 id="An_erroneous_example">An erroneous example</h2> + +<p>To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (see it <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>).</p> + +<ol> + <li>To get started, open the local copy inside your favourite text editor, and your browser.</li> + <li>Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.</p> +</div> + +<p>At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.</p> + +<h2 id="Fixing_syntax_errors">Fixing syntax errors</h2> + +<p>Earlier on in the course we got you to type some simple JavaScript commands into the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.</p> + +<ol> + <li>Go to the tab that you've got <code>number-game-errors.html</code> open in, and open your JavaScript console. You should see an error message along the following lines: <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got: + <ul> + <li>A red "x" to indicate that this is an error.</li> + <li>An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"</li> + <li>A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.</li> + <li>The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.</li> + <li>The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.</li> + </ul> + </li> + <li>If we look at line 86 in our code editor, we'll find this line: + <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre> + </li> + <li>The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn <em>name-of-feature</em>" on your favourite search engine. Here's a shortcut to save you some time in this instance: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li> + <li>So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing <code>addeventListener</code> to <code>addEventListener</code> should fix this. Do this now.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> reference page for more details about this error.</p> +</div> + +<h3 id="Syntax_errors_round_two">Syntax errors round two</h3> + +<ol> + <li>Save your page and refresh, and you should see the error has gone.</li> + <li>Now if you try to enter a guess and press the Submit guess button, you'll see ... another error! <img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>This time the error being reported is "TypeError: lowOrHi is null", on line 78. + <div class="note"><strong>Note</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> is a special value that means "nothing", or "no value". So <code>lowOrHi</code> has been declared and initialised, but not with any meaningful value — it has no type or value.</div> + + <div class="note"><strong>Note</strong>: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the <code>checkGuess() { ... }</code> block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the <code>checkGuess()</code> function was run by line 86.</div> + </li> + <li>Have a look at line 78, and you'll see the following code: + <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre> + </li> + <li>This line is trying to set the <code>textContent</code> property of the <code>lowOrHi</code> variable to a text string, but it's not working because <code>lowOrHi</code> does not contain what it's supposed to. Let's see why this is — try searching for other instances of <code>lowOrHi</code> in the code. The earliest instance you'll find in the JavaScript is on line 48: + <pre class="brush: js">var lowOrHi = document.querySelector('lowOrHi');</pre> + </li> + <li>At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is <code>null</code> after this line has been run. Add the following code on line 49: + <pre class="brush: js">console.log(lowOrHi);</pre> + + <div class="note"> + <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> is a really useful debugging function that prints a value to the console. So it will print the value of <code>lowOrHi</code> to the console as soon as we have tried to set it in line 48.</p> + </div> + </li> + <li>Save and refesh, and you should now see the <code>console.log()</code> result in your console. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> Sure enough, <code>lowOrHi</code>'s value is <code>null</code> at this point, so there is definitely a problem with line 48.</li> + <li>Let's think about what the problem could be. Line 48 is using a <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question: + <pre class="brush: js"><p class="lowOrHi"></p></pre> + </li> + <li>So we need a class selector here, which begins with a dot (.), but the selector being passed into the <code>querySelector()</code> method in line 48 has no dot. This could be the problem! Try changing <code>lowOrHi</code> to <code>.lowOrHi</code> in line 48.</li> + <li>Try saving and refreshing again, and your <code>console.log()</code> statement should return the <code><p></code> element we want. Phew! Another error fixed! You can delete your <code>console.log()</code> line now, or keep it to reference later on — your choice.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> reference page for more details about this error.</p> +</div> + +<h3 id="Syntax_errors_round_three">Syntax errors round three</h3> + +<ol> + <li>Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.</li> + <li>At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.</li> + <li>Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change <code>addeventListener</code> to <code>.addEventListener</code>. Do this now.</li> +</ol> + +<h2 id="A_logic_error">A logic error</h2> + +<p>At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!</p> + +<p>There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.</p> + +<ol> + <li>Search for the <code>randomNumber</code> variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44: + + <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;</pre> + And the one that generates the random number before each subsequent game is around line 113:</li> + <li> + <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre> + </li> + <li>To check whether these lines are indeed the problem, let's turn to our friend <code>console.log()</code> again — insert the following line directly below each of the above two lines: + <pre class="brush: js">console.log(randomNumber);</pre> + </li> + <li>Save and refresh, then play a few games — you'll see that <code>randomNumber</code> is equal to 1 at each point where it is logged to the console.</li> +</ol> + +<h3 id="Working_through_the_logic">Working through the logic</h3> + +<p>To fix this, let's consider how this line is working. First, we invoke <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, which generates a random decimal number between 0 and 1, e.g. 0.5675493843.</p> + +<pre class="brush: js">Math.random()</pre> + +<p>Next, we pass the result of invoking <code>Math.random()</code> through <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:</p> + +<pre>Math.floor(Math.random()) + 1</pre> + +<p>Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1. We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:</p> + +<pre class="brush: js">Math.floor(Math.random()*100);</pre> + +<p>Hence us wanting to add 1, to give us a random number between 1 and 100:</p> + +<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre> + +<p>Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!</p> + +<h2 id="Other_common_errors">Other common errors</h2> + +<p>There are other common errors you'll come across in your code. This section highlights most of them.</p> + +<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3> + +<p>This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the <code>checkGuess()</code> function:</p> + +<pre class="brush: js">var userGuess = Number(guessField.value);</pre> + +<p>to</p> + +<pre class="brush: js">var userGuess === Number(guessField.value);</pre> + +<p>It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (<code>=</code>) — which sets a variable to be equal to a value — with the strict equality operator (<code>===</code>), which tests whether one value is equal to another, and returns a <code>true</code>/<code>false</code> result.</p> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> reference page for more details about this error.</p> +</div> + +<h3 id="The_program_always_says_you've_won_regardless_of_the_guess_you_enter">The program always says you've won, regardless of the guess you enter</h3> + +<p>This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside <code>checkGuess()</code>:</p> + +<pre class="brush: js">if (userGuess === randomNumber) {</pre> + +<p>to</p> + +<pre class="brush: js">if (userGuess = randomNumber) {</pre> + +<p>the test would always return <code>true</code>, causing the program to report that the game has been won. Be careful!</p> + +<h3 id="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3> + +<p>This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.</p> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> reference page for more details about this error.</p> +</div> + +<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3> + +<p>This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing</p> + +<pre class="brush: js">function checkGuess() {</pre> + +<p>to</p> + +<pre class="brush: js">function checkGuess( {</pre> + +<p>This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!</p> + +<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3> + +<p>This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the <code>checkGuess()</code> function.</p> + +<h3 id="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3> + +<p>These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, <em>string</em> would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.</p> + +<p>For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!</p> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> reference pages for more details about these errors.</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.</p> + +<h2 id="See_also">See also</h2> + +<div> +<ul> + <li>There are many other types of errors that aren't listed here; we are compiling a reference that explains what they mean in detail — see the <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li> + <li>If you come across any errors in your code that you aren't sure how to fix after reading this article, you can get help! Ask on the <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tell us what your error is, and we'll try to help you. A listing of your code would be useful as well.</li> +</ul> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/it/learn/javascript/first_steps/index.html b/files/it/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..220f1f25c1 --- /dev/null +++ b/files/it/learn/javascript/first_steps/index.html @@ -0,0 +1,68 @@ +--- +title: JavaScript First Steps +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Module + - NeedsTranslation + - Numbers + - Operators + - TopicStub + - Variables + - 'l10n:priority' + - maths + - strings +translation_of: Learn/JavaScript/First_steps +--- +<p class="summary">{{LearnSidebar}}Nel nostro primo modulo JavaScript, per prima cosa, rispondiamo ad alcune domande fondamentali come "cosa è JavaScript?", "a che cosa assomiglia?", e "cosa può fare?", prima di guidarti nella tua prima esperienza pratica di scrittura JavaScript. Dopodiché, discuteremo dettagliatamente, alcuni elementi chiave, come variabili, stringhe, numeri ed array.</p> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Prima di iniziare questo modulo, non hai bisogno di alcuna precedente conoscenza di JavaScript, ma dovresti avere familiarità con HTML e CSS. Si consiglia di utilizzare i seguenti moduli prima di iniziare su JavaScript:</p> + +<ul> + <li><a href="/it/docs/Learn/Getting_started_with_the_web">Iniziare con il Web</a> (che include <a href="/it/docs/Getting_started_with_the_web/JavaScript_basics">un'introduzione Javascript realmente di base</a>)</li> + <li><a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione ad HTML</a>.</li> + <li><a href="/it/docs/Learn/CSS/Introduction_to_CSS">Introduzione a CSS</a>.</li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong> Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi files, potresti provare (la maggior parte) gli 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> + +<dl> + <dt><a href="/it/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Cosa è JavaScript?</a></dt> + <dd>Benvenuto nel corso JavaScript per principianti di MDN! In questo primo articolo vedremo JavaScript da un livello alto, rispondendo a domande come "cosa è JavaScript?" e "cosa sta facendo?", e assicurandoci che tu sia a tuo agio con lo scopo di JavaScript.</dd> + <dt><a href="/it/docs/Learn/JavaScript/First_steps/A_first_splash">Un primo tuffo in JavaScript</a></dt> + <dd>Ora che hai imparato qualcosa sulla teoria di JavaScript, e cosa puoi fare con esso, stiamo per fornirti un corso accelerato sulle caratteristiche di base di JavaScript attraverso un tutorial totalmente pratico. Qui costruirai un semplice gioco "Indovina il numero", passo dopo passo.</dd> + <dt><a href="/it/docs/Learn/JavaScript/First_steps/What_went_wrong">Cosa è andato storto? Risoluzione dei problemi di JavaScript</a></dt> + <dd>Quando hai costruito il gioco "Indovina il numero" nel precedente articolo, potresti aver trovato che non funzionava. Nessuna paura - questo articolo mira a salvarti dallo strapparti i capelli su questi problemi fornendoti alcuni semplici consigli sul come trovare e correggere gli errori nei programmi JavaScript.</dd> + <dt><a href="/it/docs/Learn/JavaScript/First_steps/Variables">Memorizzare le informazioni ci cui hai bisogno - le Variabili</a></dt> + <dd>Dopo aver letto l'ultima coppia di articoli dovresti sapere cos'è JavaScript, cosa può fare per te, come usarlo con altre tecnologie web, e come le sue principali caratteristiche appaiono da un livello alto. In questo articolo andremo giù fino alle basi reali, guardando come lavorare con i blocchi di costruzione più semplici di JavaScript - Variabili.</dd> + <dt>Matemeatica di base in JavaScript - numeri e operatori</dt> + <dd>A questo punto del corso discuteremo matematica in JavaScript — come possiamo combinare operatori ed altre funzioni per manipolare con successo i numeri per fare i nostri bidding.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt> + <dd>Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt> + <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> + <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt> + <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd> +</dl> diff --git a/files/it/learn/javascript/first_steps/variabili/index.html b/files/it/learn/javascript/first_steps/variabili/index.html new file mode 100644 index 0000000000..38da82e607 --- /dev/null +++ b/files/it/learn/javascript/first_steps/variabili/index.html @@ -0,0 +1,337 @@ +--- +title: Memorizzazione delle informazioni necessarie - Variabili +slug: Learn/JavaScript/First_steps/Variabili +translation_of: Learn/JavaScript/First_steps/Variables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.</p> + +<table class="learn-box"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Acquisire familiarità con le basi delle variabili JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Strumenti_di_cui_hai_bisogno">Strumenti di cui hai bisogno</h2> + +<p>In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Quali sono gli strumenti di sviluppo</a> del browser per ulteriori informazioni su come accedere a questo strumento).</p> + +<h2 id="Cosa_è_una_variabile">Cosa è una variabile?</h2> + +<p>Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:</p> + +<pre class="brush: html notranslate"><button>Press me</button></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('button'); + +button.onclick = function() { + let name = prompt('What is your name?'); + alert('Hello ' + name + ', nice to see you!'); +}</pre> + +<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.</p> + +<p>Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:</p> + +<pre class="example-bad notranslate">let name = prompt('What is your name?'); + +if (name === 'Adam') { + alert('Hello Adam, nice to see you!'); +} else if (name === 'Alan') { + alert('Hello Alan, nice to see you!'); +} else if (name === 'Bella') { + alert('Hello Bella, nice to see you!'); +} else if (name === 'Bianca') { + alert('Hello Bianca, nice to see you!'); +} else if (name === 'Chris') { + alert('Hello Chris, nice to see you!'); +} + +// ... and so on ...</pre> + +<p>Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.</p> + +<p>Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.</p> + +<p>Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.</p> + +<div class="note"> +<p><strong>Nota</strong>:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> + +<h2 id="Dichiarare_una_variabile">Dichiarare una variabile</h2> + +<p>Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:</p> + +<pre class="brush: js notranslate">let myName; +let myAge;</pre> + +<p>Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.</p> + +<div class="note"> +<p><strong>Nota</strong>: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.</p> +</div> + +<p>Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore <kbd>undefined</kbd>. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in</p> + +<pre class="brush: js notranslate">scoobyDoo;</pre> + +<div class="note"> +<p><strong>Nota</strong>: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.</p> +</div> + +<h2 id="Inizializzare_una_Variabile">Inizializzare una Variabile</h2> + +<p>Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: </p> + +<pre class="brush: js notranslate">myName = 'Chris'; +myAge = 37;</pre> + +<p>Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: </p> + +<pre class="brush: js notranslate">let myDog = 'Rover';</pre> + +<p>Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. </p> + +<h2 id="Differenza_tra_var_e_let">Differenza tra var e let</h2> + +<p>A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere <code>var</code> e <code>let</code>?".</p> + +<p>Le ragioni sono in qualche modo storiche. Ai tempi della creazione di JavaScript, c'era solo <code>var</code>. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così, <code>let</code> è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da <code>var</code>, risolvendo i suoi problemi nel processo.</p> + +<p>Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a>).</p> + +<p>Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con <code>var</code> dopo averla inizializzata funzionerà comunque. Per esempio:</p> + +<pre class="brush: js notranslate">myName = 'Chris'; + +function logName() { + console.log(myName); +} + +logName(); + +var myName;</pre> + +<div class="note"> +<p><strong>Nota: </strong> Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. </p> +</div> + +<p>Questo lfunziona a causa di <strong>hoisting</strong> — leggi <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> per maggiori dettagli sull'argomento. </p> + +<p>Hoisting non funziona con <code>let</code>. Se cambiamo <code>var</code> a <code>let</code> nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.</p> + +<p>In secondo luogo, quando usi <code>var</code>, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con <code>let</code> non puoi. Quanto segue funzionerebbe: </p> + +<pre class="brush: js notranslate">var myName = 'Chris'; +var myName = 'Bob';</pre> + +<p>Ma il seguente darebbe un errore sulla seconda linea: </p> + +<pre class="brush: js notranslate">let myName = 'Chris'; +let myName = 'Bob';</pre> + +<p>Dovresti invece fare questo: </p> + +<pre class="brush: js notranslate">let myName = 'Chris'; +myName = 'Bob';</pre> + +<p>Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.</p> + +<p>Per queste ragioni e altre, noi raccomandiamo di usare <code>let</code> il più possibile nel tuo codice, piuttosto che <code>var</code>. Non ci sono motivi per usare <code>var</code>, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice. ( <code>let</code> non è supportato fino fino alla versione 11, il moderno Windows Edge browser supporta bene <code>let</code>).</p> + +<div class="note"> +<p><strong>Nota: </strong> Attualmente stiamo aggiornando il corso per usare più <code>let</code> piuttosto che <code>var</code>. Abbi pazienza con noi!</p> +</div> + +<h2 id="Aggiornare_una_variabile">Aggiornare una variabile</h2> + +<p>Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: </p> + +<pre class="brush: js notranslate">myName = 'Bob'; +myAge = 40;</pre> + +<h3 id="Regole_di_denominazione_delle_variabili">Regole di denominazione delle variabili</h3> + +<p>Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).</p> + +<ul> + <li>Non dovresti usare altri caratteri perchè possono causare errori o essere difficili da capire per un pubblico internazionale. </li> + <li>Non usare l'underscores all'inizio di un nome di una variabile — questo è usato in alcuni costrutti JavaScript per dire cose specifiche, quindi può generare confusione. </li> + <li>Non usare numeri all'inizio di una variabile. Questo non è permesso e causa un errore. </li> + <li>Una convezione sicura alla quale attenersi si chiama <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"notazione a cammello"</a>, dove per unire più parole, si usa il minuscolo per la prima parola e la lettera maiuscola per le seguenti parole. Abbiamo usato questo per i nomi delle variabili in questo articolo. (es: myName)</li> + <li>Creare i nomi delle variabili intuitivi, in modo che descrivano i dati che contengono. Non usare singole lettere / numeri, o lunghe frasi.</li> + <li>Le variabili sono case sensitive — così <code>myage</code> è differente da <code>myAge</code>.</li> + <li>Ultimo punto: devi evitare di usare parole riservate a JavaScript come nomi delle variabili — con questo intendiamo le parole che compongono la sintassi effettiva di JavaScript! Così, non puoi usare parole come <code>var</code>, <code>function</code>, <code>let</code>, e <code>for</code> come nomi di variabili. I browsers li riconoscono come elementi differenti di codice, e così danno errore. </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p> +</div> + +<p>Esempi di nomi corretti: </p> + +<pre class="example-good notranslate">age +myAge +init +initialColor +finalOutputValue +audio1 +audio2</pre> + +<p>Esempi di nomi errati: </p> + +<pre class="example-bad notranslate">1 +a +_12 +myage +MYAGE +var +Document +skjfndskjfnbdskjfb +thisisareallylongstupidvariablenameman</pre> + +<p>Esempi di nomi soggetti a errori: </p> + +<pre class="example-invalid notranslate">var +Document +</pre> + +<p>Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. </p> + +<h2 id="Tipi_di_Variabili">Tipi di Variabili</h2> + +<p>Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.</p> + +<p>Finora abbiamo esaminato i primi due, ma che ne sono altri. </p> + +<h3 id="Numeri">Numeri</h3> + +<p>Puoi memorizzare numeri nelle variabili, numeri interi come 30 o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:</p> + +<pre class="brush: js notranslate">let myAge = 17;</pre> + +<h3 id="Stringhe">Stringhe</h3> + +<p>Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. </p> + +<pre class="brush: js notranslate">let dolphinGoodbye = 'So long and thanks for all the fish';</pre> + +<h3 id="Booleani">Booleani</h3> + +<p>I booleani sono dei valori vero/falso — possono avere due valori <code>true</code> o <code>false</code>. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:</p> + +<pre class="brush: js notranslate">let iAmAlive = true;</pre> + +<p>Considerando che in realtà sarebbe usato più così:</p> + +<pre class="brush: js notranslate">let test = 6 < 3;</pre> + +<p>Questo sta usando l'operatore "minore di" (<code><</code>) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce <code>false</code>, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.</p> + +<h3 id="Arrays">Arrays</h3> + +<p>Un array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:</p> + +<pre class="brush: js notranslate">let myNameArray = ['Chris', 'Bob', 'Jim']; +let myNumberArray = [10, 15, 40];</pre> + +<p>Una volta che gli arrays sono definiti, è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:</p> + +<pre class="brush: js notranslate">myNameArray[0]; // should return 'Chris' +myNumberArray[2]; // should return 40</pre> + +<p>Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.</p> + +<p>Puoi imparare molto sugli arrays in <a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">un futuro articolo</a>.</p> + +<h3 id="Oggetti">Oggetti</h3> + +<p>In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli<br> + e altro ancora.</p> + +<p>Prova a inserire il seguente codice nella tua console:</p> + +<pre class="brush: js notranslate">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre> + +<p>Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:</p> + +<pre class="brush: js notranslate">dog.name</pre> + +<p>Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un <a href="/en-US/docs/Learn/JavaScript/Objects"> modulo futuro.</a></p> + +<h2 id="Tipizzazione_dinamica">Tipizzazione dinamica</h2> + +<p>JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che, a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).</p> + +<p>Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:</p> + +<pre class="brush: js notranslate">let myString = 'Hello';</pre> + +<p>Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:</p> + +<pre class="brush: js notranslate">let myNumber = '500'; // oops, questa è ancora una stringa +typeof myNumber; +myNumber = 500; // molto meglio - adesso questo è un numero +typeof myNumber;</pre> + +<p>Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire <code>string</code>, poiché a quel punto la variabile <code>myNumber</code> contiene una stringa, <code>'500'</code>.<br> + Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.</p> + +<h2 id="Costanti_in_JavaScript">Costanti in JavaScript</h2> + +<p>Molti linguaggi di programmazione hanno il concetto di <em>costante</em> - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).</p> + +<p>All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave <code>const</code>, che ci consente di memorizzare valori che non possono mai essere modificati:</p> + +<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">; +const hoursInDay = 24;</span></span></span></span></pre> + +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code> lavora esattamente come <code>let</code>, eccetto che non puoi dare a<code>const</code> un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:</span></span></span></span></p> + +<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">; +daysInWeek = 8;</span></span></span></span></pre> + +<h2 id="Sommario">Sommario </h2> + +<p>Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">The first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/it/learn/javascript/index.html b/files/it/learn/javascript/index.html new file mode 100644 index 0000000000..faa1dc8f1a --- /dev/null +++ b/files/it/learn/javascript/index.html @@ -0,0 +1,63 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - JavaScript + - Principiante + - ScrtturaCodice +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} è un linguaggio di programmazione che consente la creazione di oggetti complessi in pagine web. Ogni volta che una pagina web fa più che visualizzare semplici informazioni statiche — visualizzando contenuti aggiornati su base temporale, mappe interattive, o animazioni grafiche 2D/3D, o scrolling video jukeboxes, ecc... ecc... — si può presumere che JavaScript sia coinvolto.</p> + +<h2 id="Percorso_di_apprendimento">Percorso di apprendimento</h2> + +<p>JavaScript è sicuramente più difficile da imparare rispetto alle tecnologie ad esso correlate, come <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>. Prima di tentare di imparare JavaScript, <span id="result_box" lang="it"><span>si consiglia vivamente di familiarizzare innanzitutto con almeno queste due tecnologie, e forse anche con altre. Inizia a lavorare sui seguenti moduli:</span></span></p> + +<ul> + <li><a href="/it/docs/Learn/Getting_started_with_the_web">Primi passi nel Web</a></li> + <li><a href="/it/docs/Web/Guide/HTML/Introduction">Introduzione ad HTML</a></li> + <li><a href="/it/docs/Learn/CSS/Introduction_to_CSS">Introduzione a CSS</a></li> +</ul> + +<p>Una pregressa esperienza con altri linguaggi di programmazione può essere senz'altro utile.</p> + +<p>Dopo aver familiarizzato con i concetti base di JavaScript, dovresti essere in grado di imparare argomenti più complessi, per esempio:</p> + +<ul> + <li>JavaScript in profondità, come insegnato nella nostra <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> +</ul> + +<h2 id="Moduli">Moduli</h2> + +<p>Questo tema contiene i seguenti moduli, in un<span class="short_text" id="result_box" lang="it"><span> ordine suggerito per lavorarci sopra.</span></span></p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi JavaScript</a></dt> + <dd>Nel nostro primo modulo JavaScript, rispondiamo dapprima a domande fondamentali come "cos'è JavaScript?", "come è fatto?" e "cosa può fare?", prima di proseguire guidandoti attraverso le prime esperienze di scrittura di codice JavaScript. In seguito, <span id="result_box" lang="it"><span>presentiamo in dettaglio </span></span><span lang="it"><span>alcune caratteristiche chiave di JavaScript, come variabili, stringhe, numeri e matrici (arrays).</span></span></dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Blocchi costruttivi JavaScript</a></dt> + <dd>In questo modulo continuiamo la nostra descrizione di tutte<span id="result_box" lang="it"><span> le principali caratteristiche chiave di JavaScript, rivolgendo la nostra attenzione ai tipi di blocco di codice comunemente incontrati come dichiarazioni condizionali, cicli, funzioni ed eventi. Hai già visto questi elementi nel corso, ma solo di passaggio - qui discuteremo tutto in modo esplicito.</span></span></dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introduzione a oggetti JavaScript</a></dt> + <dd>In JavaScript, <span id="result_box" lang="it"><span>la maggior parte degli elementi sono oggetti, dalle funzionalità di base di JavaScript come stringhe e matrici alle API del browser create sulla base di JavaScript.</span> <span>È anche possibile creare dei propri oggetti per incapsulare funzioni e variabili correlate in pacchetti efficienti (packages)</span></span><span lang="it"><span>. </span></span><span id="result_box" lang="it"><span>La natura orientata agli oggetti di JavaScript è importante che sia compresa se vuoi andare oltre con la tua conoscenza del linguaggio e scrivere codice più efficiente, quindi abbiamo creato questo modulo per aiutarti.</span> <span>Qui insegniamo la teoria degli oggetti e la sua sintassi in dettaglio, vediamo come puoi creare i tuoi oggetti e spieghiamo cosa sono i dati JSON e come lavorarci.</span></span></dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Web APIs lato Client</a></dt> + <dd><span id="result_box" lang="it"><span>Quando si scrive JavaScript sul lato client per siti Web o applicazioni, non si andrà molto lontano prima di iniziare a utilizzare le API </span></span>— <span lang="it"><span>interfacce per la manipolazione di diversi aspetti del browser e del sistema operativo su cui è in esecuzione il sito, o anche dati da altri siti Web</span> <span>o servizi.</span> <span>In questo modulo esploreremo quali sono le API e come utilizzare alcune delle API più comuni che incontrerai spesso nel tuo lavoro di sviluppatore.</span></span></dd> +</dl> + +<h2 id="Risolvere_i_problemi_tipici_di_JavaScript">Risolvere i problemi tipici di JavaScript</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Usa JavaScript per risolvere i problemi tipici</a> <span id="result_box" lang="it"><span>fornisce collegamenti a sezioni di contenuto che spiegano come usare JavaScript per risolvere problemi molto comuni durante la creazione di una pagina web.</span></span></p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript su MDN</a></dt> + <dd><span id="result_box" lang="it"><span>Il punto di ingresso principale per la documentazione base di JavaScript su MDN</span></span> —<span lang="it"><span> qui è possibile trovare documenti di riferimento completi su tutti gli aspetti del linguaggio JavaScript e alcuni tutorial avanzati rivolti a esperti JavaScript.</span></span></dd> + <dt><a href="https://learnjavascript.online/">Imparare JavaScript</a> </dt> + <dd>Un eccellente risorsa (in inglese) per aspiranti sviluppatori web — Imparare JavaScript in un ambiente interattivo, con lezioni brevi e test interattivi, guidati da valutazioni automatiche. le prime 40 lezioni sono gratuite, e il corso completo è disponibile con un piccolo pagamento una tantum. </dd> + <dt><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">Basi di JavaScript su EXLskills</a></dt> + <dd>Impara JavaScript con il corso open-source gratuito di EXLskills che presenta tutto ciò che ti occorre per iniziare a costruire applicazioni in JS.</dd> + <dt><a href="https://www.youtube.com/user/codingmath"> Programmare matematica</a></dt> + <dd><span id="result_box" lang="it"><span>Una eccellente serie di video tutorial per imparare la matematica che devi conoscere per essere un programmatore valido, di</span></span> <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/it/learn/javascript/oggetti/basics/index.html b/files/it/learn/javascript/oggetti/basics/index.html new file mode 100644 index 0000000000..539df5c2e0 --- /dev/null +++ b/files/it/learn/javascript/oggetti/basics/index.html @@ -0,0 +1,242 @@ +--- +title: Basi degli oggetti JavaScript +slug: Learn/JavaScript/Oggetti/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Costruire blocchi</a>).</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Basi_degli_oggetti">Basi degli oggetti</h2> + +<p>Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.</p> + +<p>Per incomiciare, facciamo una copia locale del nostro file <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.</p> + +<p>Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:</p> + +<pre class="brush: js">var person = {};</pre> + +<p>Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:</p> + +<pre class="brush: js">[object Object]</pre> + +<p>Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:</p> + +<pre class="brush: js">var person = { + name: ['Bob', 'Smith'], + age: 32, + gender: 'male', + interests: ['music', 'skiing'], + bio: function() { + alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }, + greeting: function() { + alert('Hi! I\'m ' + this.name[0] + '.'); + } +}; +</pre> + +<p>Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:</p> + +<pre class="brush: js">person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting()</pre> + +<p>Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!</p> + +<div class="note"> +<p><strong>Nota</strong>: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (e anche <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">la versione funzionante</a>). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.</p> +</div> + +<p>Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, <code>['Bob', 'Smith']</code> e <code>32</code>). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:</p> + +<pre class="brush: js">var objectName = { + member1Name: member1Value, + member2Name: member2Value, + member3Name: member3Value +}</pre> + +<p>Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà <strong>(properties)</strong> del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi <strong>(methods)</strong> dell'oggetto.</p> + +<p>Un oggetto come questo viene considerato un <strong>oggetto letterale</strong> — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.</p> + +<p>È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.</p> + +<h2 id="Notazione_puntata">Notazione puntata</h2> + +<p>Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da <strong>namespace</strong> — e deve essere insirito prima per accedere a qualsiasi cosa <strong>incapsulata</strong> nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — <br> + questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:</p> + +<pre class="brush: js">person.age +person.interests[1] +person.bio()</pre> + +<h3 id="Namespaces_nidificati">Namespaces nidificati</h3> + +<p>È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da</p> + +<pre class="brush: js">name: ['Bob', 'Smith'],</pre> + +<p>a</p> + +<pre class="brush: js">name : { + first: 'Bob', + last: 'Smith' +},</pre> + +<p>In questo modo abbiamo effettivamente creato un <strong>sotto-namespace</strong>. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:</p> + +<pre class="brush: js">person.name.first +person.name.last</pre> + +<p><strong>Importante</strong>: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di</p> + +<pre class="brush: js">name[0] +name[1]</pre> + +<p>con</p> + +<pre class="brush: js">name.first +name.last</pre> + +<p>Altrimenti i tuoi metodi non funzioneranno più.</p> + +<h2 id="Notazione_con_parentesi_quadre">Notazione con parentesi quadre</h2> + +<p>C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:</p> + +<pre class="brush: js">person.age +person.name.first</pre> + +<p>Puoi usare</p> + +<pre class="brush: js">person['age'] +person['name']['first']</pre> + +<p>Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati <strong>array associativi</strong> — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.</p> + +<h2 id="Assegnare_i_membri_degli_oggetti">Assegnare i membri degli oggetti</h2> + +<p>Fino a qui abbiamo solo recuperato (<strong>get</strong>) valori dei menbri degli oggetti — si possono anche assegnare (<strong>set</strong>) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:</p> + +<pre class="brush: js">person.age = 45; +person['name']['last'] = 'Cratchit';</pre> + +<p>Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:</p> + +<pre class="brush: js">person.age +person['name']['last']</pre> + +<p>Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:</p> + +<pre class="brush: js">person['eyes'] = 'hazel'; +person.farewell = function() { alert("Bye everybody!"); }</pre> + +<p>Ora possiamo provare i nostri nuovi membri:</p> + +<pre class="brush: js">person['eyes'] +person.farewell()</pre> + +<p>Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:</p> + +<pre class="brush: js">var myDataName = nameInput.value; +var myDataValue = nameValue.value;</pre> + +<p>e possiamo aggiungere questi nomi e valori nel nostro oggetto <code>person</code> in questo modo:</p> + +<pre class="brush: js">person[myDataName] = myDataValue;</pre> + +<p>Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto <code>person</code>:</p> + +<pre class="brush: js">var myDataName = 'height'; +var myDataValue = '1.75m'; +person[myDataName] = myDataValue;</pre> + +<p>Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:</p> + +<pre class="brush: js">person.height</pre> + +<p>Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.</p> + +<h2 id="Che_cos'è_this">Che cos'è "this"?</h2> + +<p>Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:</p> + +<pre class="brush: js">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p>Forse ti sei chiesto che cos'è "this". La parola chiave <code>this</code> fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso <code>this</code> è equivalente a <code>person</code>. Quindi perché non scrivere invece semplicemente <code>person</code>? Come vedrai nell'articolo <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript per principianti</a> quando incominceremo a creare costruttori ecc., <code>this</code> è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto <code>person</code> possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).</p> + +<p>Proviamo ad illustrare ciò che intendiamo con un paio di oggetti <code>person</code> semplificati:</p> + +<pre class="brush: js">var person1 = { + name: 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +var person2 = { + name: 'Brian', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>In questo caso, <code>person1.greeting()</code> visualizza "Hi! I'm Chris."; e <code>person2.greeting()</code> "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, <code>this</code> fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.</p> + +<h2 id="Finora_hai_usato_oggetti_tutto_il_tempo">Finora hai usato oggetti tutto il tempo</h2> + +<p>Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.</p> + +<p>Quindi quando ha usato un metodo di stringa come:</p> + +<pre class="brush: js">myString.split(',');</pre> + +<p>Non hai fatto altro che usare un metodo disponibile in una istanza della classe <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di <code>String</code>, che ha ha disposizione alcuni metodi/proprietà comuni.</p> + +<p>Quando hai acceduto al modello di oggetto documento usando righe come queste:</p> + +<pre class="brush: js">var myDiv = document.createElement('div'); +var myVideo = document.querySelector('video');</pre> + +<p>Tu hai usato i metodi disponibili in una istanza della classe <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Per ogni pagina web caricara viene crata una istanza di <code>Document</code> chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.</p> + +<p>Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, ecc.</p> + +<p>Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:</p> + +<pre class="brush: js">var myNotification = new Notification('Hello!');</pre> + +<p>Spiegheremo i costruttori in un prossimo articolo.</p> + +<div class="note"> +<p><strong>Nota</strong>: È utile pensare al modo in cui gli oggetti comunicano come ad un <strong>passaggio di messaggi</strong> — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.</p> +</div> + +<h2 id="Sommario">Sommario</h2> + +<p>Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto <code>person</code> in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.</p> + +<p>Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> diff --git a/files/it/learn/javascript/oggetti/index.html b/files/it/learn/javascript/oggetti/index.html new file mode 100644 index 0000000000..5fa859db74 --- /dev/null +++ b/files/it/learn/javascript/oggetti/index.html @@ -0,0 +1,51 @@ +--- +title: Introduzione agli oggetti in JavaScript +slug: Learn/JavaScript/Oggetti +tags: + - Articolo + - Guida + - JavaScript + - Oggetti + - Principiante + - Tutorial + - Verifica + - imparare +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura <em>object-oriented</em> (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.</p> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduzione a HTML</a> e <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduzione a CSS</a> prima di cimentarvi con JavaScript.</p> + +<p>Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi con JavaScript</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guide">Guide</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Fondamenti sugli oggetti</a></dt> + <dd>Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript per principianti</a></dt> + <dd>Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (<em>object-oriented JavaScript</em>, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (<em>object-oriented programming</em>, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipi di oggetto (object prototypes)</a></dt> + <dd>I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Ereditarietà in JavaScript</a></dt> + <dd>Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Lavorare con i dati JSON</a></dt> + <dd>JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Pratica della costruzione di oggetti</a></dt> + <dd>Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.</dd> +</dl> + +<h2 id="Verifiche">Verifiche</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Aggiungere caratteristiche alla demo "bouncing balls"</a></dt> + <dd>In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.</dd> +</dl> diff --git a/files/it/learn/javascript/oggetti/json/index.html b/files/it/learn/javascript/oggetti/json/index.html new file mode 100644 index 0000000000..71cf166e15 --- /dev/null +++ b/files/it/learn/javascript/oggetti/json/index.html @@ -0,0 +1,345 @@ +--- +title: Lavorare con JSON +slug: Learn/JavaScript/Oggetti/JSON +translation_of: Learn/JavaScript/Objects/JSON +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Costruzione blocchi</a>) e con i concetti base degli oggetti JS (vedi <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduzione agli oggetti</a>).</td> + </tr> + <tr> + <th scope="row">Obiettivi:</th> + <td>Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.</td> + </tr> + </tbody> +</table> + +<h2 id="No_davvero_cosè_JSON">No, davvero, cos'è JSON?</h2> + +<p>{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.</p> + +<p>JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale — grazie ai metodi dell'oggetto globale <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> di JavaScript.</p> + +<div class="note"> +<p><strong>Nota</strong>: Convertire una stringa in un oggetto nativo è chiamata <em>deserializzazione</em>, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata <em>serializzazione</em>.</p> +</div> + +<p>Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione <code>.json</code>, e un {{glossary("tipo MIME")}} <code>application/json</code>.</p> + +<h3 id="Struutura_di_un_JSON">Struutura di un JSON </h3> + +<p>Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:</p> + +<pre class="brush: json">{ + "squadName": "Super hero squad", + "homeTown": "Metro City", + "formed": 2016, + "secretBase": "Super tower", + "active": true, + "members": [ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + }, + { + "name": "Eternal Flame", + "age": 1000000, + "secretIdentity": "Unknown", + "powers": [ + "Immortality", + "Heat Immunity", + "Inferno", + "Teleportation", + "Interdimensional travel" + ] + } + ] +}</pre> + +<p>Se carichiamo questo oggetto in un programma, processato in una variabile chiamata <code>superHeroes</code> per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Fondamentali degli oggetti JavaScript</a>. Per esempio:</p> + +<pre class="brush: js">superHeroes.homeTown +superHeroes['active']</pre> + +<p>Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array. Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:</p> + +<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre> + +<ol> + <li>Per primo abbiamo il nome della variabile — <code>superHeroes</code>.</li> + <li>All'interno della variabile vogliamo accedere alla proprietà <code>members</code>, così utilizziamo <code>["members"]</code>.</li> + <li><code>members</code> contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo <code>[1]</code>.</li> + <li>all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà <code>powers</code> e per ciò usiamo <code>["powers"]</code>.</li> + <li>La proprietà <code>powers</code> contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi <code>[2]</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> (vedi il <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">codice sorgente</a>). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.</p> +</div> + +<h3 id="Arrays_as_JSON">Arrays as JSON</h3> + +<p>Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:</p> + +<pre class="brush: json">[ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + } +]</pre> + +<p>The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example <code>[0]["powers"][0]</code>.</p> + +<h3 id="Other_notes">Other notes</h3> + +<ul> + <li>JSON is purely a data format — it contains only properties, no methods.</li> + <li>JSON requires double quotes to be used around strings and property names. Single quotes are not valid.</li> + <li>Even a single misplaced comma or colon can cause a JSON file to go wrong, and not work. You should be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly). You can validate JSON using an application like <a href="http://jsonlint.com/">JSONLint</a>.</li> + <li>JSON can actually take the form of any data type that is valid for inclusion inside JSON, not just arrays or objects. So for example, a single string or number would be a valid JSON object.</li> + <li>Unlike in JavaScript code in which object properties may be unquoted, in JSON only quoted strings may be used as properties.</li> +</ul> + +<h2 id="Active_learning_Working_through_a_JSON_example">Active learning: Working through a JSON example</h2> + +<p>So, let's work through an example to show how we could make use of some JSON data on a website.</p> + +<h3 id="Getting_started">Getting started</h3> + +<p>To begin with, make local copies of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:</p> + +<pre class="brush: html"><header> +</header> + +<section> +</section></pre> + +<p>Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:</p> + +<pre class="brush: js">const header = document.querySelector('header'); +const section = document.querySelector('section');</pre> + +<p>We have made our JSON data available on our GitHub, at <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p> + +<p>We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Obtaining_the_JSON">Obtaining the JSON</h3> + +<p>To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called <strong>XHR</strong>). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.</p> + +<ol> + <li>To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code: + <pre class="brush: js">let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre> + </li> + <li>To create a request, we need to create a new request object instance from the <code>XMLHttpRequest</code> constructor, using the <code>new</code> keyword. Add the following below your last line: + <pre class="brush: js">let request = new XMLHttpRequest();</pre> + </li> + <li>Now we need to open the request using the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code> method. Add the following line: + <pre class="brush: js">request.open('GET', requestURL);</pre> + + <p>This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:</p> + + <ul> + <li>The HTTP method to use when making the network request. In this case <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> is fine, as we are just retrieving some simple data.</li> + <li>The URL to make the request to — this is the URL of the JSON file that we stored earlier.</li> + </ul> + </li> + <li>Next, add the following two lines — here we are setting the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code> method: + <pre class="brush: js">request.responseType = 'json'; +request.send();</pre> + </li> + <li>The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code: + <pre class="brush: js">request.onload = function() { + const superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + </li> +</ol> + +<p>Here we are storing the response to our request (available in the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code> property) in a variable called <code>superHeroes</code>; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the <<code>header></code> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <code><section></code>.</p> + +<p>We have wrapped the code in an event handler that runs when the load event fires on the request object (see <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that <code>request.response</code> will definitely be available when we come to try to do something with it.</p> + +<h3 id="Populating_the_header">Populating the header</h3> + +<p>Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:</p> + +<pre class="brush: js">function populateHeader(jsonObj) { + const myH1 = document.createElement('h1'); + myH1.textContent = jsonObj['squadName']; + header.appendChild(myH1); + + const myPara = document.createElement('p'); + myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed']; + header.appendChild(myPara); +}</pre> + +<p>We named the parameter <code>jsonObj</code>, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, set its <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to equal the <code>squadName</code> property of the object, then append it to the header using <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the <code>homeTown</code> and <code>formed</code> properties of the object.</p> + +<h3 id="Creating_the_hero_information_cards">Creating the hero information cards</h3> + +<p>Next, add the following function at the bottom of the code, which creates and displays the superhero cards:</p> + +<pre class="brush: js">function showHeroes(jsonObj) { + const heroes = jsonObj['members']; + + for (let i = 0; i < heroes.length; i++) { + const myArticle = document.createElement('article'); + const myH2 = document.createElement('h2'); + const myPara1 = document.createElement('p'); + const myPara2 = document.createElement('p'); + const myPara3 = document.createElement('p'); + const myList = document.createElement('ul'); + + myH2.textContent = heroes[i].name; + myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; + myPara2.textContent = 'Age: ' + heroes[i].age; + myPara3.textContent = 'Superpowers:'; + + const superPowers = heroes[i].powers; + for (let j = 0; j < superPowers.length; j++) { + const listItem = document.createElement('li'); + listItem.textContent = superPowers[j]; + myList.appendChild(listItem); + } + + myArticle.appendChild(myH2); + myArticle.appendChild(myPara1); + myArticle.appendChild(myPara2); + myArticle.appendChild(myPara3); + myArticle.appendChild(myList); + + section.appendChild(myArticle); + } +}</pre> + +<p>To start with, we store the <code>members</code> property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.</p> + +<p>Next, we use a <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a> to loop through each object in the array. For each one, we:</p> + +<ol> + <li>Create several new elements: an <code><article></code>, an <code><h2></code>, three <code><p></code>s, and a <code><ul></code>.</li> + <li>Set the <code><h2></code> to contain the current hero's <code>name</code>.</li> + <li>Fill the three paragraphs with their <code>secretIdentity</code>, <code>age</code>, and a line saying "Superpowers:" to introduce the information in the list.</li> + <li>Store the <code>powers</code> property in another new constant called <code>superPowers</code> — this contains an array that lists the current hero's superpowers.</li> + <li>Use another <code>for</code> loop to loop through the current hero's superpowers — for each one we create an <code><li></code> element, put the superpower inside it, then put the <code>listItem</code> inside the <code><ul></code> element (<code>myList</code>) using <code>appendChild()</code>.</li> + <li>The very last thing we do is to append the <code><h2></code>, <code><p></code>s, and <code><ul></code> inside the <code><article></code> (<code>myArticle</code>), then append the <code><article></code> inside the <code><section></code>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble getting the example to work, try referring to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> source code (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">running live</a> also.)</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a> article for more information on dot and bracket notation.</p> +</div> + +<h2 id="Converting_between_objects_and_text">Converting between objects and text</h2> + +<p>The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:</p> + +<pre class="brush: js">request.responseType = 'json';</pre> + +<p>But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> object is available in browsers, which contains the following two methods:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: Accepts an object as a parameter, and returns the equivalent JSON string form.</li> +</ul> + +<p>You can see the first one in action in our <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> example (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">source code</a>) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used <code>parse()</code> to convert it to an actual JavaScript object. The key snippet of code is here:</p> + +<pre class="brush: js">request.open('GET', requestURL); +request.responseType = 'text'; // now we're getting a string! +request.send(); + +request.onload = function() { + const superHeroesText = request.response; // get the string from the response + const superHeroes = JSON.parse(superHeroesText); // convert it to an object + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<p>As you might guess, <code>stringify()</code> works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:</p> + +<pre class="brush: js">let myJSON = { "name": "Chris", "age": "38" }; +myJSON +let myString = JSON.stringify(myJSON); +myString</pre> + +<p>Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using <code>stringify()</code> — saving the return value in a new variable — then checking it again.</p> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON">Test your skills: JSON</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> + <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/it/learn/riservatezza,_integrità_e_disponibilità/index.html b/files/it/learn/riservatezza,_integrità_e_disponibilità/index.html new file mode 100644 index 0000000000..23b0a37a89 --- /dev/null +++ b/files/it/learn/riservatezza,_integrità_e_disponibilità/index.html @@ -0,0 +1,69 @@ +--- +title: 'Riservatezza, Integrità e Disponibilità' +slug: 'Learn/Riservatezza,_Integrità_e_Disponibilità' +tags: + - Iniziare + - Principiante + - Sicurezza + - Tutorial +translation_of: 'Archive/Security/Confidentiality,_Integrity,_and_Availability' +--- +<div>{{IncludeSubnav("/en-US/Learn")}}{{draft}}</div> + +<div class="summary" style="margin: 0px 0px 20px; padding: 20px; border: 0px; font-weight: 700; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background: rgb(244, 247, 248);"> +<p style="margin: 0px; padding: 0px; border: 0px;">Questo articolo discute gli obiettivi principali della sicurezza: riservatezza, integrità e disponibilità.</p> +</div> + +<table class="learn-box standard-table" style="background-color: rgb(255, 255, 255); border-collapse: collapse; border-color: rgb(246, 152, 85); border-style: solid; border-width: 1px 1px 1px 5px; color: rgb(77, 78, 83); font-family: open sans,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; margin: 0px 0px 24px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"> + <tbody> + <tr style="margin: 0px; padding: 0px; border: 0px;"> + <th scope="row" style="margin: 0px; padding: 6px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: solid none solid solid; font-style: inherit; font-weight: 700; text-align: right; font-family: 'Open Sans', sans-serif; font-size: 14px; vertical-align: top; background: rgb(252, 225, 206);">Prerquisiti:</th> + <td style="margin: 0px; padding: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid solid solid none; text-align: left; box-shadow: none; font-style: italic; background-color: rgb(254, 249, 245);">Non sono rischiesti prerequisiti per questo articolo.</td> + </tr> + <tr style="margin: 0px; padding: 0px; border: 0px;"> + <th scope="row" style="margin: 0px; padding: 6px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: solid none solid solid; font-style: inherit; font-weight: 700; text-align: right; font-family: 'Open Sans', sans-serif; font-size: 14px; vertical-align: top; background: rgb(252, 225, 206);">Obiettivo:</th> + <td style="margin: 0px; padding: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid solid solid none; text-align: left; box-shadow: none; font-style: italic; background-color: rgb(254, 249, 245);">Imparerai cosa sono riservatezza, integrità e disponibilità e come questi possono influire sui dati e il sistema.</td> + </tr> + </tbody> +</table> + +<h2 id="Sommario">Sommario</h2> + +<p>Il modello classico della sicurezza delle informazioni definisce tre obiettivi di sicurezza: il mantenimento della riservatezza, l'integrità, e la disponibiltà. Ciascun obiettivo tratta un differente aspetto del fornire protezione alle informazioni.</p> + +<h2 id="Apprendimento_Attivo" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">Apprendimento Attivo</h2> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><em>Non sono ancora presenti attività di apprendimento attivo. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;">Prendi in considerazione di contribuire, per favore.</a></em></p> + +<h2 id="Approfondimento" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">Approfondimento</h2> + +<h3 id="Riservatezza">Riservatezza</h3> + +<p><em>Riservatezza</em> significa proteggere le informazioni dagli accessi da parte di soggetti non autorizzati. In altre parole, solo chi è autorizzato a farlo può guadagnare l'accesso ai dati sensibili. Immagina i tuoi dati della banca. Soltanto tu dovresti poter accedervi e l'impiegato della banca che ti sta aiutando con una transazione e nessun altro. Un fallimento nel mantenimento della riservatezza significa che qualcuno che non dovrebbe avere l'accesso è riuscito ad ottenerlo, intenzionalmente o accidentalmente. Un fallimento di riservatezza di questo genere, comunemente conosciuto come <em>breach o violazione, </em>solitamente non è recuperabile. Una volta che il segreto viene svelato, non esiste alcun modo per celarlo di nuovo. Se i tuoi archivi bancari vengono postati su un sito pubblico, chiunque puù conoscere il tuo numero di conto, il tuo estratto conto, ecc... e queste informazioni non possono essere cancellate dalle loro menti, dai fogli, dai computer e qualunque altro posto. Quasi tutti i maggiori incidenti odierni di sicurezza riportati dai media implicano una importante perdita di riservatezza.<em> </em></p> + +<p>Tirando le somme, una violazione della riservatezza significa che qualcuno guadagna l'accesso a delle informazioni a cui non dovrebbe averne.</p> + +<h3 id="Integrità">Integrità</h3> + +<p><em>Integrità</em> vuol dire garantire l'autenticità dell'informazione, che tale informazione non sia alterata e che la sorgente dell'informazione sia autentica. Immagina di avere un sito web e che venda alcuni prodotti su questo sito. Ora, immagina che dei malintenzionati possano fare acquisti sul tuo sito e malevolmente modifichino il prezzo dei tuoi prodotti, potendo in questo modo comprare qualnque cosa a qualunque prezzo scelgano. Questo sarebbe una mancanza di integrità, in quanto le tue informazioni, in questo caso il prezzo del prodotto, è stato modificato pur non avendo mai autorizzato tale modifica. Un altro esempio di fallimento di integrità è quando cerchi di connetteri ad un sito e un malintenzionato frapposto tra te e il sito reindirizzo il tuo traffico in un sito diverso. In questo caso, il sito a cui vieni indirizzato non è autentico.</p> + +<h3 id="Disponibiltà">Disponibiltà</h3> + +<p><em>Disponibilità</em> significa che l'informazione è accessibile agli utenti autorizzati.</p> + +<h2 id="Prossimo_Passo">Prossimo Passo</h2> + +<ul> + <li><a href="/en-US/Learn/Vulnerabilities">Vulnerabilità</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Karen Scarfone, Wayne Jansen, and Miles Tracy</li> + <li>Title: NIST Special Publication 800-123, Guide to General Server Security</li> + <li>Last Updated Date: July 2008</li> + <li>Copyright Information: This document is not subject to copyright.</li> +</ul> +</div> diff --git a/files/it/learn/server-side/django/admin_site/index.html b/files/it/learn/server-side/django/admin_site/index.html new file mode 100644 index 0000000000..6cb1fac11a --- /dev/null +++ b/files/it/learn/server-side/django/admin_site/index.html @@ -0,0 +1,361 @@ +--- +title: 'Django Tutorial Part 4: Django admin site' +slug: Learn/Server-side/Django/Admin_site +tags: + - Articolo + - Codice + - Python + - Script + - Server + - Tutorial + - django + - django_admin + - imparare + - inizio + - nuovo +translation_of: Learn/Server-side/Django/Admin_site +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</div> + +<p class="summary">Dopo aver creato i modelli per la nostra <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, useremo il sito di Django Admin per aggiungere alcuni dati "reali" sui libri. Per prima cosa ti mostreremo come registrare i modelli con il sito di amministrazione, quindi ti mostreremo come accedere e creare alcuni dati. Alla fine dell'articolo mostreremo alcuni modi per migliorare ulteriormente la presentazione del sito di amministrazione.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Prima completa: <a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a>.</td> + </tr> + <tr> + <th scope="row">Obbiettivi:</th> + <td>Per capire i vantaggi e le limitazioni del sito di amministrazione Django, e usarlo per creare alcuni record per i nostri modelli.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>L'applicazione di amministrazione Django può utilizzare i modelli per creare automaticamente un'area del sito che è possibile utilizzare per creare, visualizzare, aggiornare ed eliminare record. Questo può farti risparmiare molto tempo durante lo sviluppo, rendendo molto facile testare i tuoi modelli e capire se hai i dati giusti. L'applicazione di amministrazione può anche essere utile per la gestione dei dati in produzione, a seconda del tipo di sito Web. Il progetto Django lo consiglia solo per la gestione interna dei dati (vale a dire solo per gli amministratori o le persone interne alla tua organizzazione), poiché l'approccio model-centric non è necessariamente la migliore interfaccia possibile per tutti gli utenti e espone molti dettagli inutili sui modelli.</p> + +<p>Tutta la configurazione richiesta per includere l'applicazione di amministrazione nel tuo sito Web è stata eseguita automaticamente quando hai creato il progetto skeleton (per informazioni sulle reali dipendenze necessarie, consulta <a href="https://docs.djangoproject.com/en/2.1/ref/contrib/admin/">Django docs</a>). Di conseguenza, tutto ciò che devi fare per aggiungere i tuoi modelli all'applicazione admin è registrarli. Alla fine di questo articolo forniremo una breve dimostrazione di come è possibile configurare ulteriormente l'area di amministrazione per visualizzare meglio i dati del modello.</p> + +<p>Dopo aver registrato i modelli, mostreremo come creare un nuovo "superutente", accedere al sito e creare alcuni libri, autori, istanze di libri e generi. Questi saranno utili per testare le viste e i modelli che inizieremo a creare nel prossimo tutorial.</p> + +<h2 id="Registrare_i_models">Registrare i models </h2> + +<p>Apri <strong>admin.py</strong> in catalog (<strong>/locallibrary/catalog/admin.py</strong>). Notare che essa già contiene l'istruzione <code>django.contrib.admin</code>:</p> + +<pre class="brush: python">from django.contrib import admin + +# Register your models here. +</pre> + +<p>Registrare i modelli copiando il seguente testo nella parte inferiore del file. Questo codice importa semplicemente i modelli e quindi le chiamate <code>admin.site.register</code> Per registrarli.</p> + +<pre class="brush: python">from catalog.models import Author, Genre, Book, BookInstance + +admin.site.register(Book) +admin.site.register(Author) +admin.site.register(Genre) +admin.site.register(BookInstance) +</pre> + +<div class="note"><strong>Note</strong>: Se hai accettato la sfida di creare un modello per rappresentare il linguaggio naturale di un libro, importalo e registralo anche tu (<a href="/en-US/docs/Learn/Server-side/Django/Models">see the models tutorial article</a>)!</div> + +<p>Questo è il modo più semplice di registrare un modello o modelli con il sito. Il sito di amministrazione è altamente personalizzabile e parleremo di altri modi per registrare i tuoi modelli più in basso.</p> + +<h2 id="Creare_un_superuser">Creare un superuser</h2> + +<p>Per accedere al sito admin, abbiamo bisogno di un account utente con lo stato del personale abilitato. Per poter visualizzare e creare record, abbiamo anche bisogno che questo utente abbia i permessi per gestire tutti i nostri oggetti. Puoi creare un account "superutente" che abbia accesso completo al sito e tutte le autorizzazioni necessarie usando manage.py. Chiamare il seguente comando, nella stessa directory di manage.py, per creare il superutente. Ti verrà richiesto di inserire un nome utente, un indirizzo email e una password complessa.</p> + +<pre class="brush: bash">python3 manage.py createsuperuser +</pre> + +<p>Una volta che questo comando è stato completato, un nuovo superutente sarà stato aggiunto al database. Ora riavvia il server di sviluppo in modo da poter verificare l'accesso:</p> + +<pre class="brush: bash">python3 manage.py runserver + +</pre> + +<h2 id="Loggarsi_come_superuser_e_usare_il_sito">Loggarsi come superuser e usare il sito</h2> + +<p>Per effettuare il login, utilizzare nell'URL <em>/admin</em> (esempio: <a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin</a>) e inserisci le tue nuove credenziali utente e password per superutente (verrai reindirizzato alla pagina di accesso e poi tornerai all'URL di / admin dopo aver inserito i tuoi dettagli). Questa parte del sito mostra tutti i nostri modelli, raggruppati per applicazione installata. È possibile fare clic sul nome di un modello per andare a una schermata in cui sono elencati tutti i record associati e è possibile fare ulteriori clic su tali record per modificarli. Puoi anche fare clic direttamente sul collegamento <strong>add </strong>accanto a ciascun modello per iniziare a creare un record di quel tipo.</p> + +<p><img alt="Admin Site - Home page" src="https://mdn.mozillademos.org/files/13975/admin_home.png" style="display: block; height: 634px; margin: 0px auto; width: 998px;"></p> + +<p>Clicca sul link <strong>Add </strong>a destra di <em>Books</em> per creare un nuovo libro (verrà mostrata una finestra di dialogo come sotto). Nota come il titolo di ogni campo, il tipo di widget utilizzato, e l' <code>help_text</code> (se presente) matcha il valore che hai specificato nel modello. </p> + +<p>Immettere i valori per i campi. Puoi creare nuovi autori o generi premendo il pulsante + vicino ai rispettivi campi (o seleziona i valori esistenti dagli elenchi se li hai già creati). Quando hai finito puoi premere <strong>SAVE</strong>, <strong>Save and add another</strong>, o <strong>Save and continue editing</strong> per salvare il record.</p> + +<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p> + +<div class="note"> +<p><strong>Note</strong>: A questo punto vorremmo che passassi un po 'di tempo ad aggiungere alcuni libri, autori e generi (ad es. Fantasy) alla tua applicazione. Assicurati che ogni autore e genere includa un paio di libri diversi (questo renderà le tue visualizzazioni di lista e di dettaglio più interessanti quando le implementeremo più avanti nella serie di articoli).</p> +</div> + +<p>Al termine dell'aggiunta di libri, fai clic sul link <strong>Home </strong>nel segnalibro in alto per tornare alla pagina principale dell'amministratore. Quindi fare clic sul link <strong>Libri </strong>per visualizzare l'elenco corrente di libri (o su uno degli altri collegamenti per vedere altri elenchi di modelli). Ora che hai aggiunto alcuni libri, l'elenco potrebbe essere simile allo screenshot qui sotto. Viene visualizzato il titolo di ogni libro; questo è il valore restituito nel metodo <strong>__str __ ()</strong> del modello Book che abbiamo specificato nell'ultimo articolo.</p> + +<p><img alt="Admin Site - List of book objects" src="https://mdn.mozillademos.org/files/13935/admin_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 407px; margin: 0px auto; width: 1000px;"></p> + +<p>Da questa lista puoi cancellare libri selezionando la checkbox vicino al libro che non vuoi, e selezionando l'azione <em>delete</em> dalla lista di azioni <em>Action</em>, e premendo il pulsante <strong>Go</strong>. Puoi anche aggiungere nuovi libri, premendo <strong>ADD BOOK</strong>. </p> + +<p>Puoi editare un libro selezionando il suo nome dal link. La pagina di edit, mostrata sotto, è uguale a quella di aggiunta di un nuovo libro. Le differenze principali sono il titolo (<em>Change book</em>) e l'aggiunta di <strong>Delete</strong>, <strong>HISTORY</strong> e <strong>VIEW ON SITE </strong>(questo ultimo bottone appare perchè abbiamo definito il metodo <code>get_absolute_url()</code> nel modello).</p> + +<p><img alt="Admin Site - Book Edit" src="https://mdn.mozillademos.org/files/13977/admin_book_modify.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p> + +<p>Ora torna alla Home page (utilizzando il collegamento Home il percorso breadcrumb) e quindi visualizza gli elenchi Autore e Genere: dovresti averne già abbastanza creati da quando hai aggiunto i nuovi libri, ma sentiti libero di aggiungerne altri.</p> + +<p>Ciò che sicuramente non avrai, sono delle <em>Book Instances</em>, perchè non vengono create da Books (invece possiamo creare un <code>Book</code> da una <code>BookInstance</code> — questo è il funzionamento del campo di tipo <code>ForeignKey</code>). Naviga indietro alla Home page e premi il bottone Add associato. Notare il campo id, largo ed univoco, che viene utilizzato per identificare una singola copia di un libro in una libreria.</p> + +<p><img alt="Admin Site - BookInstance Add" src="https://mdn.mozillademos.org/files/13981/admin_bookinstance_add.png" style="border-style: solid; border-width: 1px; display: block; height: 514px; margin: 0px auto; width: 863px;"></p> + +<p>Crea un numero di questi record per ciascuno dei tuoi libri. Imposta lo stato come Disponibile per almeno alcuni record e In prestito per gli altri. Se lo stato non è Disponibile, imposta anche una data di scadenza futura.</p> + +<p>Questo è tutto! Ora hai imparato come configurare e utilizzare il sito di amministrazione. Hai anche creato record per Book, BookInstance, Genre e Author che saremo in grado di utilizzare una volta create le views e i modelli.</p> + +<h2 id="Configurazione_avanzata">Configurazione avanzata</h2> + +<p>Django fa un buon lavoro nel creare un sito admin di base usando le informazioni dei modelli registrati:</p> + +<ul> + <li>Ogni modello ha un elenco di record individuali, identificati dalla stringa creata con il metodo __str __ () del modello e collegati a viste / moduli di dettaglio per la modifica. Per impostazione predefinita, questa vista ha un menu azioni in alto che è possibile utilizzare per eseguire operazioni di eliminazione di massa sui record.</li> + <li>I form di registrazione dei dettagli del modello per la modifica e l'aggiunta di record contengono tutti i campi nel modello, disposti verticalmente nell'ordine di dichiarazione.</li> +</ul> + +<p>Puoi rendere ancora più semplice da utilizzare l'interfaccia, ecco alcune delle cose che puoi fare:</p> + +<ul> + <li>Visualizzazioni elenco: + <ul> + <li>Aggiungi campi / informazioni aggiuntivi visualizzati per ogni record.</li> + <li>Aggiungi filtri per selezionare i record elencati, in base alla data o ad un altro valore di selezione (ad es. Stato del prestito del libro).</li> + <li>Aggiungi opzioni aggiuntive al menu azioni nelle visualizzazioni elenco e scegli dove questo menu viene visualizzato nel modulo.</li> + </ul> + </li> + <li>Viste dettagliate + <ul> + <li>Scegli quali campi mostrare (o nascondere), oltre al loro raggruppamento, ordine, se sono editabili, widget usati, orientazione, ecc.</li> + <li>Aggiungi campi correlati a un record per consentire la modifica in linea (ad esempio aggiungi la possibilità di aggiungere e modificare i record del libro mentre crei il record dell'autore).</li> + </ul> + </li> +</ul> + +<p>In questa sezione esamineremo alcune modifiche che miglioreranno l'interfaccia per la nostra libreria locale, tra cui l'aggiunta di ulteriori informazioni agli elenchi di modelli di libri e autori e il miglioramento del layout delle loro viste di modifica. Non cambieremo la presentazione del modello Lingua e genere perché hanno solo un campo ciascuno, quindi non c'è alcun vantaggio reale nel farlo!</p> + +<p>Per maggiori informazioni sulle customizzazioni possibili, consultare <a href="https://docs.djangoproject.com/en/2.1/ref/contrib/admin/">The Django Admin site</a> (Django Docs).</p> + +<h3 id="Registrare_una_classe_ModelAdmin">Registrare una classe ModelAdmin</h3> + +<p>Per cambiare la visualizzazione dei modelli nell'interfaccia admin, dovremo definire una classe <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-objects">ModelAdmin</a> e registrarla col modello.</p> + +<p>Cominciamo col modello di <code>Author</code>. Apri <strong>admin.py</strong> nella applicazione catalog (<strong>/locallibrary/catalog/admin.py</strong>). Commentiamo la registrazione originaria (scrivendo prima della riga di codice un carattere) del modello <code>Author</code>:</p> + +<pre class="brush: js"># admin.site.register(Author)</pre> + +<p>Aggiungi una nuova registrazione <code>AuthorAdmin</code>.</p> + +<pre class="brush: python"># Define the admin class +class AuthorAdmin(admin.ModelAdmin): + pass + +# Register the admin class with the associated model +admin.site.register(Author, AuthorAdmin) +</pre> + +<p>Aggiungiamo anche le classi <code>ModelAdmin</code> per <code>Book</code>, e <code>BookInstance</code>. Commentiamo anche qui le vecchie registrazioni:</p> + +<pre class="brush: js"># admin.site.register(Book) +# admin.site.register(BookInstance)</pre> + +<p>Per registrare i nuovi modelli, per i propositi di questa dimostrazione, useremo il decoratore <code>@register</code> (che esegue la stessa azione della sintassi <code>admin.site.register()</code>):</p> + +<pre class="brush: python"># Register the Admin classes for Book using the decorator +@admin.register(Book) +class BookAdmin(admin.ModelAdmin): + pass + +# Register the Admin classes for BookInstance using the decorator +@admin.register(BookInstance) +class BookInstanceAdmin(admin.ModelAdmin): + pass +</pre> + +<p>Attualmente tutte le nostre classi di amministrazione sono vuote (vedi <code>pass</code>) cosi il comportamento di admin non e' cambiato! Ora possiamo estendere queste classi per definire i nostri specifici modelli di comportamento di admin.</p> + +<h3 id="Configurare_le_liste_di_visualizzazione">Configurare le liste di visualizzazione</h3> + +<p>La <em>LocalLibrary</em> attualmente mostra una lista degli autori usando il nome oggetto generato da <code>__str__()</code>. Questo va bene quando hai solo pochi autori, ma una volta che ne hai molti potresti finire per avere dei duplicati. Per differenziarli, o solo perché vuoi mostrare informazioni più interessanti su ciascun autore, puoi utilizzare ad esempio <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display">list_display</a> per aggiungere ulteriori campi alla visualizzazione. </p> + +<p>Sostituisci il tuo codice della classe <code>AuthorAdmin</code> con quello sotto. I campi da mostrare nella lista sono dichiaratiin una <em>tupla </em>nell'ordine desiderato, come mostrato sotto.</p> + +<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin): + list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death') +</pre> + +<p>Naviga ora alla lista degli autori. I campi inseriti nella tupla ora dovrebbero essere mostrati:</p> + +<p><img alt="Admin Site - Improved Author List" src="https://mdn.mozillademos.org/files/14023/admin_improved_author_list.png" style="border-style: solid; border-width: 1px; display: block; height: 302px; margin: 0px auto; width: 941px;"></p> + +<p>Per il nostro modello <code>Book</code> mostreremo anche l'autore, <code>author</code> ed il genere, <code>genre</code>. <code>author</code> è un campo di tipo <code>ForeignKey</code> (uno-a-molti), quindi verrà rappresentato dal valore <code>__str__()</code> per il record associato. Rimpiazza la classe <code>BookAdmin</code> con la versione seguente.</p> + +<pre class="brush: python">class BookAdmin(admin.ModelAdmin): + list_display = ('title', 'author', 'display_genre') +</pre> + +<p>Sfortunatamente non possiamo specificare direttamente il campo <font face="Consolas, Liberation Mono, Courier, monospace">genre </font>in <code>list_display</code> perchè è un campo di tipo <code>ManyToManyField</code> (Django impedisce questa operazione perché ci sarebbe traffico di "accesso" molto costosa al database nel farlo). Invece definiremo una funzione <code>display_genre</code> per prendere le informazioni sotto forma di stringa (la funzione che abbiamo chiamato sopra, la definiremo di seguito).</p> + +<div class="note"> +<p><strong>Note</strong>: Mostrare il <code>genre</code> potrebbe non essere una buona idea qui, a causa del "costo" dell'operazione del database. Ti stiamo mostrando come, perché chiamare le funzioni nei tuoi modelli può essere molto utile per altri motivi, ad esempio per aggiungere un link Elimina accanto a ogni elemento nell'elenco</p> +</div> + +<p>Aggiungi il seguente codice nel tuo modello <code>Book</code> (<strong>models.py</strong>). Questa funzione crea una stringa contenente i primi tre valori del campo <code>genre</code> (se esistono) e creano una <code>short_description</code> che può essere utilizzata nel sito admin per questo metodo.</p> + +<pre class="brush: python"> def display_genre(self): + """Create a string for the Genre. This is required to display genre in Admin.""" + return ', '.join(genre.name for genre in self.genre.all()[:3]) + + display_genre.short_description = 'Genre' +</pre> + +<p>Dopo aver salvato il modello e aver aggiornato admin, apri il sito e vai alla lista di visualizzazione <em>Books</em>; ecco ciò che dovresti vedere:</p> + +<p><img alt="Admin Site - Improved Book List" src="https://mdn.mozillademos.org/files/14025/admin_improved_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 337px; margin: 0px auto; width: 947px;"></p> + +<p>Il modello <code>Genre</code> (ed il modello <code>Language</code>, se ne hai definito uno) entrambi hanno un singolo campo, quindi non ha senso creare un modello aggiuntivo per mostrare campi aggiuntivi.</p> + +<div class="note"> +<p><strong>Note</strong>: potrebbe essere utile aggiornare il modello della lista di <code>BookInstance</code> per mostrare almeno anche lo status e la data di restituzione. L'abbiamo inserita come sfida alla fine di questo capitolo!</p> +</div> + +<h3 id="Aggiungere_dei_filtri_alle_liste">Aggiungere dei filtri alle liste</h3> + +<p>Una volta che hai un sacco di elementi in una lista, può essere utile poter filtrare quali oggetti sono visualizzati. Questo viene fatto elencando i campi nell'attributo <code>list_filter</code>. Rimpiazza la classe corrente <code style="font-style: normal; font-weight: normal;">BookInstanceAdmin</code> con il codice di seguito.</p> + +<pre class="brush: python">class BookInstanceAdmin(admin.ModelAdmin): +<strong> list_filter = ('status', 'due_back')</strong> +</pre> + +<p>La visualizzazione elenco includerà ora una casella filtro sulla destra. Nota come puoi scegliere le date e lo stato per filtrare i valori:</p> + +<p><img alt="Admin Site - BookInstance List Filters" src="https://mdn.mozillademos.org/files/14037/admin_improved_bookinstance_list_filters.png" style="height: 528px; width: 960px;"></p> + +<h3 id="Organizzare_il_layout_della_visualizzazione_dettaglio">Organizzare il layout della visualizzazione dettaglio</h3> + +<p>Per impostazione predefinita, le viste di dettaglio dispongono tutti i campi verticalmente, nel loro ordine di dichiarazione nel modello. È possibile modificare l'ordine di dichiarazione, quali campi vengono visualizzati (o esclusi), se le sezioni vengono utilizzate per organizzare le informazioni, se i campi sono visualizzati orizzontalmente o verticalmente e anche quali widget di modifica vengono utilizzati nei moduli di amministrazione.</p> + +<div class="note"> +<p><strong>Note</strong>: I modelli <em>LocalLibrary</em> sono relativamente semplici, quindi non abbiamo un grosso bisogno di cambiare il layout; ne faremo comunque alcuni, solo a scopo dimostrativo.</p> +</div> + +<h4 id="Controllare_quali_campi_sono_visualizzati_e_come_sono_disposti">Controllare quali campi sono visualizzati e come sono disposti</h4> + +<p>Aggiorna la tua classe <code>AuthorAdmin</code> class e aggiungi la riga di codice <code>fields</code> mostrata sotto in grassetto:</p> + +<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin): + list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death') +<strong> fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]</strong> +</pre> + +<p>L'attributo fields elenca solo i campi che devono essere visualizzati nel modulo, in ordine. I campi vengono visualizzati verticalmente per impostazione predefinita, ma verranno visualizzati orizzontalmente se vengono ulteriormente raggruppati in una tupla (come mostrato nei campi "data" sopra).</p> + +<p>Nel tuo sito web vai alla vista dettagli dell'autore - ora dovrebbe apparire come mostrato di seguito:</p> + +<p><img alt="Admin Site - Improved Author Detail" src="https://mdn.mozillademos.org/files/14027/admin_improved_author_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 282px; margin: 0px auto; width: 928px;"></p> + +<div class="note"> +<p><strong>Note</strong>: Puoi anche utilizzare l'attributo <code>exclude</code> per dichiarare una lista di attributi da escludere dal form (tutti gli altri attributi nel modello saranno mostrati). </p> +</div> + +<h4 id="Organizzare_la_vista_di_dettaglio_in_sezioni">Organizzare la vista di dettaglio in sezioni</h4> + +<p>È possibile aggiungere "sezioni" per raggruppare le informazioni relative al modello all'interno del modulo dettagli, utilizzando l'attributo <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets">fieldsets</a>.</p> + +<p>Nel modello <code>BookInstance</code> abbiamo delle informazioni sul libro (esempio <code>name</code>, <code>imprint</code>, ed <code>id</code>) e sullo stato (<code>status</code>, <code>due_back</code>). Possiamo aggiungere queste informazioni in differenti sezioni aggiungendo il testo in grassetto alla classe <code>BookInstanceAdmin.</code></p> + +<pre class="brush: python">@admin.register(BookInstance) +class BookInstanceAdmin(admin.ModelAdmin): + list_filter = ('status', 'due_back') + +<strong> fieldsets = ( + (None, { + 'fields': ('book', 'imprint', 'id') + }), + ('Availability', { + 'fields': ('status', 'due_back') + }), + )</strong></pre> + +<p>Ogni sezione avrà il suo titolo (o <code>None</code>, se non vuoi un titolo) e una tupla associata di campi in un dizionario - il formato è complicato da descrivere, ma abbastanza facile da capire se si guarda il frammento di codice immediatamente sopra.</p> + +<p>Ora vai a una vista di istanza di un libro nel tuo sito web; il modulo dovrebbe apparire come mostrato di seguito:</p> + +<p><img alt="Admin Site - Improved BookInstance Detail with sections" src="https://mdn.mozillademos.org/files/14029/admin_improved_bookinstance_detail_sections.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 947px;"></p> + +<h3 id="Modifica_in_linea_dei_record_associati">Modifica in linea dei record associati</h3> + +<p>A volte può essere sensato essere in grado di aggiungere record associati nello stesso momento. Ad esempio, può avere senso avere sia le informazioni del libro che le informazioni sulle copie specifiche che si hanno nella stessa pagina di dettaglio.</p> + +<p>Puoi farlo dichiarando <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.inlines">inlines</a>, di tipo <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> (layout orizzontale) o <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.StackedInline">StackedInline</a> (layout verticale, come il modello di default). Puoi aggiungere l'informazione di <code>BookInstance</code> inline nel dettaglio di <code>Book</code> aggiungendo le linee di codice in grassetto vicino a <code>BookAdmin</code>:</p> + +<pre class="brush: python"><strong>class BooksInstanceInline(admin.TabularInline): + model = BookInstance</strong> + +@admin.register(Book) +class BookAdmin(admin.ModelAdmin): + list_display = ('title', 'author', 'display_genre') +<strong> inlines = [BooksInstanceInline]</strong> +</pre> + +<p>Ora vai a una vista per un libro nel tuo sito web: in basso ora dovresti vedere le istanze di libro relative a questo libro (immediatamente sotto i campi di genere del libro):<img alt="Admin Site - Book with Inlines" src="https://mdn.mozillademos.org/files/14033/admin_improved_book_detail_inlines.png" style="border-style: solid; border-width: 1px; display: block; height: 889px; margin: 0px auto; width: 937px;"></p> + +<p>In questo caso, tutto ciò che abbiamo fatto è dichiarare la nostra classe in linea tabellare, che aggiunge solo tutti i campi dal modello in linea. È possibile specificare tutti i tipi di informazioni aggiuntive per il layout, inclusi i campi da visualizzare, il loro ordine, se sono di sola lettura o meno, ecc. (Vedere <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> per ulteriori informazioni). </p> + +<div class="note"> +<p><strong>Note</strong>: Ci sono una serie di limitazioni importanti in questa funzionalità! Nello screenshot qui sopra abbiamo tre istanze di libri esistenti, seguite da tre segnaposti per le nuove istanze di libri (che sembrano molto simili!). Sarebbe meglio NON avere istanze di libri di riserva per impostazione predefinita e aggiungerle semplicemente con un link <strong>Add another Book instance</strong>, o listare le <code>BookInstance</code> come link non leggibili da qui. La prima opzione può essere eseguita impostando l'attributo <code>extra</code> su 0 nel modello <code>BooksInstanceInline</code>, provalo tu stesso</p> +</div> + +<h2 id="Prova_tu">Prova tu</h2> + +<p>Abbiamo imparato molto in questa sezione, quindi ora è il momento di provare alcune cose.</p> + +<ol> + <li>Per la list view di <code>BookInstance,</code> aggiungi un codice che permetta di mostrare libro, status, data di restituzione, e l'id (invece del testo di default restituito da <code>__str__()</code>).</li> + <li>Aggiungi una lista inline di oggetti <code>Book</code> inella scheda di dettaglio di <code>Author</code> usando lo stesso approccio che abbiamo utilizzato per <code>Book</code>/<code>BookInstance</code>.</li> +</ol> + +<ul> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>Questo è tutto! Ora hai imparato come configurare il sito di amministrazione sia nella sua forma più semplice che migliorata, come creare un superutente e come navigare nel sito di amministrazione e visualizzare, eliminare e aggiornare i record. Lungo la strada hai creato un sacco di libri, pubblicazioni, generi e autori che saremo in grado di elencare e visualizzare una volta creati i nostri modelli e le nostre view.</p> + +<h2 id="Ulteriori_letture">Ulteriori letture</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial02/#introducing-the-django-admin">Writing your first Django app, part 2: Introducing the Django Admin</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/contrib/admin/">The Django Admin site</a> (Django Docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/it/learn/server-side/django/authentication/index.html b/files/it/learn/server-side/django/authentication/index.html new file mode 100644 index 0000000000..a0e06c7252 --- /dev/null +++ b/files/it/learn/server-side/django/authentication/index.html @@ -0,0 +1,700 @@ +--- +title: 'Django Tutorial Part 8: User authentication and permissions' +slug: Learn/Server-side/Django/Authentication +tags: + - Articolo + - Forms + - Python + - Server + - Tutorial + - autenticazione + - django + - form + - sessione + - sessioni +translation_of: Learn/Server-side/Django/Authentication +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</div> + +<p class="summary">In questo tutorial ti mostreremo come consentire agli utenti di accedere al tuo sito con i propri account e come controllare cosa possono fare e vedere in base al fatto che abbiano effettuato l'accesso e le relative autorizzazioni. Come parte di questa dimostrazione, estenderemo il sito Web LocalLibrary, aggiungendo pagine di accesso e disconnessione e pagine specifiche per utente e personale per la visualizzazione di libri presi in prestito.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Completare tutti i precedenti argomentioltre che il capitolo <a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivi:</th> + <td>Per capire come impostare e utilizzare l'autenticazione utente e le autorizzazioni.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>Django fornisce un sistema di autenticazioni e permessi, costruito sulla base del framework delle sessioni discusso nel <a href="/en-US/docs/Learn/Server-side/Django/Sessions">precedente tutorial</a>, che consente di verificare le credenziali dell'utente e definire le azioni che ogni utente può eseguire. Il framework include modelli integrati per <code>utenti</code> e <code>gruppi </code>(un modo generico di applicare le autorizzazioni a più di un utente alla volta), permessi / flag che indicano se un utente può eseguire un'attività, formee viste per l'accesso degli utenti e strumenti di visualizzazione per limitare il contenuto.</p> + +<div class="note"> +<p><strong>Note</strong>: Secondo Django il sistema di autenticazione mira ad essere molto generico, e quindi non fornisce alcune funzionalità fornite in altri sistemi di autenticazione web. Le soluzioni per alcuni problemi comuni sono disponibili come pacchetti di terze parti. Ad esempio, limitazione dei tentativi di accesso e autenticazione contro terze parti (ad esempio OAuth).</p> +</div> + +<p>In questa esercitazione ti mostreremo come abilitare l'autenticazione utente nel sito Web LocalLibrary, creare le tue pagine di accesso e di disconnessione, aggiungere autorizzazioni ai tuoi modelli e controllare l'accesso alle pagine. Useremo l'autenticazione / le autorizzazioni per visualizzare elenchi di libri presi in prestito sia per gli utenti che per i bibliotecari.</p> + +<p>Il sistema di autenticazione è molto flessibile e, se lo desideri, puoi creare da zero URL, forms, viste e templates, basta chiamare l'API fornita per accedere all'utente.</p> + +<p>Tuttavia, in questo articolo, utilizzeremo le viste di autenticazione "immagazzinate" in Django e i moduli per le nostre pagine di accesso e di disconnessione. Avremo ancora bisogno di creare alcuni modelli, ma è abbastanza facile. Ti mostreremo anche come creare le autorizzazioni e controllare lo stato e le autorizzazioni di accesso sia nelle viste che nei modelli.</p> + +<h2 id="Abilitare_l'autenticazione">Abilitare l'autenticazione</h2> + +<p>L'autenticazione è stata abilitata automaticamente (nel tutorial 2), quindi non è necessario fare altro in questo punto.</p> + +<div class="note"> +<p><strong>Note</strong>: La configurazione necessaria è stata fatta per noi quando abbiamo creato l'app utilizzando il comando startproject di django-admin. Le tabelle del database per gli utenti e le autorizzazioni del modello sono state create quando abbiamo inizialmente chiamato <code>python manage.py migrate.</code></p> +</div> + +<p>La configurazione è visibile nelle sezioni INSTALLED_APPS e MIDDLEWARE del file di progetto (locallibrary / locallibrary / settings.py), come mostrato di seguito:</p> + +<pre class="brush: python">INSTALLED_APPS = [ + ... +<strong> 'django.contrib.auth', </strong>#Core authentication framework and its default models. +<strong> 'django.contrib.contenttypes', #</strong>Django content type system (allows permissions to be associated with models). + .... + +MIDDLEWARE = [ + ... +<strong> 'django.contrib.sessions.middleware.SessionMiddleware',</strong> #Manages sessions across requests + ... +<strong> 'django.contrib.auth.middleware.AuthenticationMiddleware',</strong> #Associates users with requests using sessions. + .... +</pre> + +<h2 id="Creazione_di_utenti_e_gruppi">Creazione di utenti e gruppi</h2> + +<p>Hai già creato il tuo primo utente quando abbiamo consultato il sito di amministrazione di Django nel tutorial 4 (questo era un superutente, creato con il comando python manage.py createsuperuser). Il nostro superutente è già autenticato e ha tutte le autorizzazioni, quindi avremo bisogno di creare un utente di prova per rappresentare un utente normale del sito. Useremo il sito di amministrazione per creare i nostri gruppi locali e gli accessi al sito Web, poiché è uno dei modi più rapidi per farlo.</p> + +<div class="note"> +<p>Note: Puoi anche creare utenti a livello di programmazione, come mostrato di seguito. Dovresti farlo, ad esempio, se sviluppi un'interfaccia per consentire agli utenti di iscriversi da soli (non si dovrebbe consentire agli utenti di accedere al sito di amministrazione).</p> + +<pre class="brush: python">from django.contrib.auth.models import User + +# Create user and save to the database +user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword') + +# Update fields and then save again +user.first_name = 'John' +user.last_name = 'Citizen' +user.save() +</pre> +</div> + +<p>Di seguito creeremo prima un gruppo e poi un utente. Anche se non abbiamo ancora nessuna autorizzazione da aggiungere per i membri della nostra biblioteca, se è necessario in seguito, sarà molto più facile aggiungerli una volta al gruppo rispetto a ciascun membro. Avviare il server di sviluppo e accedere al sito di amministrazione nel proprio browser Web locale (<code>http:/127.0.0.1:8000/admin/</code>). Accedi al sito usando le credenziali per il tuo account superuser. Il livello principale del sito di amministrazione mostra tutti i tuoi modelli, ordinati per "Applicazione Django". Dalla sezione Autenticazione e autorizzazione, è possibile fare clic sui collegamenti Utenti o Gruppi per visualizzare i record esistenti.</p> + +<p><img alt="Admin site - add groups or users" src="https://mdn.mozillademos.org/files/14091/admin_authentication_add.png" style="border-style: solid; border-width: 1px; display: block; height: 364px; margin: 0px auto; width: 661px;"></p> + +<p>Creiamo un nuovo gruppo per i membri della libreria.</p> + +<ol> + <li>Fare clic sul pulsante Aggiungi (accanto a Gruppo) per creare un nuovo gruppo; inserire il nome "Membri libreria" per il gruppo.<img alt="Admin site - add group" src="https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 561px; margin: 0px auto; width: 800px;"></li> + <li>Non abbiamo bisogno di permessi per il gruppo, quindi basta premere SALVA (verrai indirizzato a un elenco di gruppi).</li> +</ol> + +<p>Ora creiamo un utente:</p> + +<ol> + <li>Torna alla home page del sito admin.</li> + <li>Fai clic sul pulsante Aggiungi accanto a Utenti per aprire la finestra di dialogo Aggiungi utente.<img alt="Admin site - add user pt1" src="https://mdn.mozillademos.org/files/14095/admin_authentication_add_user_prt1.png" style="border-style: solid; border-width: 1px; display: block; height: 409px; margin: 0px auto; width: 800px;"></li> + <li>Immettere un nome utente e una password / conferma appropriati per l'utente del test</li> + <li>Premi <strong>SALVA</strong>.<br> + <br> + Il sito di amministrazione creerà il nuovo utente e ti condurrà immediatamente a una schermata Cambia utente in cui è possibile modificare il nome utente e aggiungere informazioni per i campi facoltativi del modello Utente. Questi campi includono il nome, il cognome, l'indirizzo e-mail e lo stato e le autorizzazioni dell'utente (deve essere impostato solo il flag Attivo). Più in basso è possibile specificare i gruppi e le autorizzazioni dell'utente e visualizzare date importanti relative all'utente (ad esempio la data di iscrizione e l'ultima data di accesso).<img alt="Admin site - add user pt2" src="https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png" style="border-style: solid; border-width: 1px; display: block; height: 635px; margin: 0px auto; width: 800px;"></li> + <li>Nella sezione Gruppi, seleziona Gruppo di membri della biblioteca dall'elenco di Gruppi disponibili, quindi premi la freccia destra tra le caselle per spostarlo nella casella Gruppi scelti.<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li> + <li>Non abbiamo bisogno di fare altro qui, quindi seleziona di nuovo SALVA, per andare alla lista degli utenti.</li> +</ol> + +<p>Questo è tutto! Ora hai un account "membro della libreria normale" che potrai utilizzare per il test (una volta implementate le pagine per consentire loro di accedere).</p> + +<div class="note"> +<p><strong>Note</strong>: Dovresti provare a creare un altro utente membro della libreria. Inoltre, crea un gruppo per i bibliotecari e aggiungi un utente anche a quello!</p> +</div> + +<h2 id="Impostazione_delle_viste_di_autenticazione">Impostazione delle viste di autenticazione</h2> + +<p>Django fornisce quasi tutto ciò che è necessario per creare pagine di autenticazione per gestire login, logout e gestione delle password "out of the box". Ciò include un mappatore di URL, viste e forms, ma non include i template - dobbiamo creare il nostro! In questa sezione, mostreremo come integrare il sistema predefinito nel sito Web di LocalLibrary e creare i modelli. Li inseriremo negli URL principali del progetto.</p> + +<div class="note"> +<p><strong>Note</strong>: Non è necessario utilizzare alcun codice, ma è probabile che lo si desideri perché rende le cose molto più semplici. Dovrai quasi certamente cambiare il codice di gestione del modulo se cambi il tuo modello utente (un argomento avanzato!), Ma anche così, sarai comunque in grado di utilizzare le funzioni di visualizzazione in stock.</p> +</div> + +<div class="note"> +<p><strong>Note: </strong>In questo caso, potremmo inserire ragionevolmente le pagine di autenticazione, inclusi gli URL e i modelli, all'interno della nostra applicazione di catalogo. Tuttavia, se avessimo più applicazioni sarebbe meglio separare questo comportamento di accesso condiviso e renderlo disponibile su tutto il sito, è quello che faremo qui!</p> +</div> + +<h3 id="URL_del_progetto">URL del progetto</h3> + +<p>Aggiungi quanto segue alla fine del file urls.py del progetto (locallibrary / locallibrary / urls.py):</p> + +<pre class="brush: python">#Add Django site authentication urls (for login, logout, password management) +urlpatterns += [ + path('accounts/', include('django.contrib.auth.urls')), +] +</pre> + +<p>Vai a http://127.0.0.1:8000/accounts/ (nota la barra finale in avanti!) E Django mostrerà un errore dicendo che non è stato in grado di trovare questo URL e elenca tutti gli URL che ha provato. Da questo puoi vedere gli URL che funzioneranno, ad esempio:</p> + +<div class="note"> +<p><strong>Note: </strong>Usando il metodo precedente si aggiungono i seguenti URL con i nomi tra parentesi quadre, che possono essere utilizzati per invertire i mapping degli URL. Non è necessario implementare nient'altro: la mappatura degli URL di cui sopra esegue automaticamente la mappatura degli URL sottostanti.</p> + +<pre class="brush: python">accounts/ login/ [name='login'] +accounts/ logout/ [name='logout'] +accounts/ password_change/ [name='password_change'] +accounts/ password_change/done/ [name='password_change_done'] +accounts/ password_reset/ [name='password_reset'] +accounts/ password_reset/done/ [name='password_reset_done'] +accounts/ reset/<uidb64>/<token>/ [name='password_reset_confirm'] +accounts/ reset/done/ [name='password_reset_complete']</pre> +</div> + +<p>Ora prova a navigare verso l'URL di accesso (http://127.0.0.1:8000/accounts/login/). Ciò fallirà di nuovo, ma con un errore che ti dice che ci manca il modello richiesto (registration / login.html) sul percorso di ricerca del modello. Vedrai le seguenti righe elencate nella sezione gialla in alto:</p> + +<pre class="brush: python">Exception Type: TemplateDoesNotExist +Exception Value: <strong>registration/login.html</strong></pre> + +<p>Il passo successivo è creare una directory di registrazione sul percorso di ricerca e quindi aggiungere il file login.html.</p> + +<h3 id="Directory_template">Directory template</h3> + +<p>Gli URL (e le viste implicite) che abbiamo appena aggiunto si aspettano di trovare i loro template associati in una directory /<strong>registration</strong>/ da qualche parte nel percorso di ricerca dei template. Per questo sito, inseriremo le nostre pagine HTML nella cartella <strong>templates / registration /</strong>. Questa directory dovrebbe essere nella directory principale del progetto, cioè nella stessa directory delle cartelle del <strong>catalogo </strong>e della <strong>localibrary</strong>). Si prega di creare queste cartelle ora.</p> + +<div class="note"> +<p><strong>Note:</strong> La struttura delle cartelle dovrebbe essere:<br> + locallibrary (Django project folder)<br> + |_catalog<br> + |_locallibrary<br> + |_templates <strong>(new)</strong><br> + |_registration</p> +</div> + +<p>Per rendere queste directory visibili al caricatore di template (ovvero per inserire questa directory nel percorso di ricerca del modello), aprire le impostazioni del progetto (/locallibrary/locallibrary/settings.py) e aggiornare la riga 'DIRS' della sezione TEMPLATES come mostrato.</p> + +<pre class="brush: python">TEMPLATES = [ + { + ... +<strong> 'DIRS': [os.path.join(BASE_DIR, 'templates')],</strong> + 'APP_DIRS': True, + ... +</pre> + +<h3 id="Login_template">Login template</h3> + +<div class="warning"> +<p><strong>Importante</strong>: I modelli di autenticazione forniti in questo articolo sono una versione molto semplice / leggermente modificata dei modelli di login dimostrativi di Django. Potrebbe essere necessario personalizzarli per uso personale!</p> +</div> + +<p>Crea un nuovo file HTML chiamato /locallibrary/templates/registration/login.html e dagli il seguente contenuto:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + +{% if form.errors %} + <p>Your username and password didn't match. Please try again.</p> +{% endif %} + +{% if next %} + {% if user.is_authenticated %} + <p>Your account doesn't have access to this page. To proceed, + please login with an account that has access.</p> + {% else %} + <p>Please login to see this page.</p> + {% endif %} +{% endif %} + +<form method="post" action="{% url 'login' %}"> +{% csrf_token %} +<table> + +<tr> + <td>\{{ form.username.label_tag }}</td> + <td>\{{ form.username }}</td> +</tr> + +<tr> + <td>\{{ form.password.label_tag }}</td> + <td>\{{ form.password }}</td> +</tr> +</table> + +<input type="submit" value="login" /> +<input type="hidden" name="next" value="\{{ next }}" /> +</form> + +{# Assumes you setup the password_reset view in your URLconf #} +<p><a href="{% url 'password_reset' %}">Lost password?</a></p> + +{% endblock %}</pre> + +<p id="sect1">Questo modello condivide alcune somiglianze con quelli che abbiamo visto prima: estende il nostro template di base e sovrascrive il blocco del contenuto. Il resto del codice è un codice di gestione della forma abbastanza standard, di cui parleremo in un successivo tutorial. Tutto quello che devi sapere per ora è che questo mostrerà un modulo in cui puoi inserire il tuo nome utente e password, e che se inserisci valori non validi ti verrà chiesto di inserire valori corretti quando la pagina si aggiorna.</p> + +<p>Naviga indietro alla login page (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>) una volta salvato il modello, dovresti vedere qualcosa del genere:</p> + +<p><img alt="Library login page v1" src="https://mdn.mozillademos.org/files/14101/library_login.png" style="border-style: solid; border-width: 1px; display: block; height: 173px; margin: 0px auto; width: 441px;"></p> + +<p>Se si tenta di accedere con esito positivo l'utente verrà reindirizzato a un'altra pagina (per impostazione predefinita sarà questa <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>). Il problema qui è che, per impostazione predefinita, Django si aspetta che dopo l'accesso si desideri essere indirizzati a una pagina del profilo, che può essere o non essere il caso. Poiché non hai ancora definito questa pagina, riceverai un altro errore!</p> + +<p>Apri le impostazioni del progetto (/locallibrary/locallibrary/settings.py) e aggiungi il testo in basso alla fine. Ora quando accedi devi essere reindirizzato alla homepage del sito per impostazione predefinita.</p> + +<pre class="brush: python"># Redirect to home URL after login (Default redirects to /accounts/profile/) +LOGIN_REDIRECT_URL = '/' +</pre> + +<h3 id="Logout_template">Logout template</h3> + +<p>Se navighi verso l'URL di disconnessione (http://127.0.0.1:8000/accounts/logout/), vedrai qualche comportamento strano: l'utente verrà disconnesso, ma sarai indirizzato pagina di logout dell'Amministratore. Non è quello che vuoi, se non altro perché il link di accesso su quella pagina ti porta alla schermata di accesso dell'amministratore (e questo è disponibile solo per gli utenti che hanno il permesso is_staff).</p> + +<p>Crea e apri /locallibrary/templates/registration/logged_out.html. Copia il testo qui sotto:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <p>Logged out!</p> + <a href="{% url 'login'%}">Click here to login again.</a> +{% endblock %}</pre> + +<p>Questo modello è molto semplice. Visualizza semplicemente un messaggio che informa che sei stato disconnesso e fornisce un collegamento che puoi premere per tornare alla schermata di accesso. Se vai di nuovo all'URL di logout dovresti vedere questa pagina:</p> + +<p><img alt="Library logout page v1" src="https://mdn.mozillademos.org/files/14103/library_logout.png" style="border-style: solid; border-width: 1px; display: block; height: 169px; margin: 0px auto; width: 385px;"></p> + +<h3 id="Password_reset_templates">Password reset templates</h3> + +<p>Il sistema di reimpostazione della password predefinito utilizza la posta elettronica per inviare all'utente un link di ripristino. È necessario creare moduli per ottenere l'indirizzo e-mail dell'utente, inviare l'e-mail, consentire loro di immettere una nuova password e prendere nota del completamento dell'intero processo.</p> + +<p>I seguenti modelli possono essere utilizzati come punto di partenza.</p> + +<h4 id="Password_reset_form">Password reset form</h4> + +<p>Questo è il modulo utilizzato per ottenere l'indirizzo e-mail dell'utente (per inviare l'e-mail di reimpostazione della password). Crea /locallibrary/templates/registration/password_reset_form.html e dagli il seguente contenuto:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <form action="" method="post"> + {% csrf_token %} + {% if form.email.errors %} + \{{ form.email.errors }} + {% endif %} + <p>\{{ form.email }}</p> + <input type="submit" class="btn btn-default btn-lg" value="Reset password"> + </form> +{% endblock %} +</pre> + +<h4 id="Password_reset_eseguito">Password reset eseguito</h4> + +<p>Questo modulo viene visualizzato dopo che il tuo indirizzo email è stato raccolto. Crea /locallibrary/templates/registration/password_reset_done.html e dagli il seguente contenuto:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p> +{% endblock %} +</pre> + +<h4 id="Password_reset_email">Password reset email</h4> + +<p>Questo modello fornisce il testo dell'email HTML contenente il link di ripristino che invieremo agli utenti. Crea /locallibrary/templates/registration/password_reset_email.html e dagli il seguente contenuto:</p> + +<pre class="brush: html">Someone asked for password reset for email \{{ email }}. Follow the link below: +\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %} +</pre> + +<h4 id="Password_reset_confirm">Password reset confirm</h4> + +<p>Questo modello fornisce il testo dell'email HTML contenente il link di ripristino che invieremo agli utenti. Crea /locallibrary/templates/registration/password_reset_email.html e dagli il seguente contenuto:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + {% if validlink %} + <p>Please enter (and confirm) your new password.</p> + <form action="" method="post"> + {% csrf_token %} + <table> + <tr> + <td>\{{ form.new_password1.errors }} + <label for="id_new_password1">New password:</label></td> + <td>\{{ form.new_password1 }}</td> + </tr> + <tr> + <td>\{{ form.new_password2.errors }} + <label for="id_new_password2">Confirm password:</label></td> + <td>\{{ form.new_password2 }}</td> + </tr> + <tr> + <td></td> + <td><input type="submit" value="Change my password" /></td> + </tr> + </table> + </form> + {% else %} + <h1>Password reset failed</h1> + <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p> + {% endif %} +{% endblock %} +</pre> + +<h4 id="Password_reset_completato">Password reset completato</h4> + +<p>Questo è l'ultimo modello di reimpostazione della password, che viene visualizzato per avvisarti quando la reimpostazione della password è riuscita. Crea /locallibrary/templates/registration/password_reset_complete.html e dagli il seguente contenuto:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <h1>The password has been changed!</h1> + <p><a href="{% url 'login' %}">log in again?</a></p> +{% endblock %}</pre> + +<h3 id="Testare_la_nuova_pagina_di_autenticazione">Testare la nuova pagina di autenticazione</h3> + +<p>Ora che hai aggiunto la configurazione dell'URL e creato tutti questi modelli, le pagine di autenticazione ora dovrebbero funzionare!</p> + +<p>Puoi testare le nuove pagine di autenticazione usando questi URL:</p> + +<ul> + <li><a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a></li> + <li><a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a></li> +</ul> + +<p>Sarai in grado di testare la funzionalità di reimpostazione della password dal link nella pagina di accesso. Tieni presente che Django invierà solo e-mail di ripristino a indirizzi (utenti) già memorizzati nel suo database!</p> + +<div class="note"> +<p><strong>Note</strong>: Il sistema di reimpostazione della password richiede che il tuo sito Web supporti la posta elettronica, che va oltre lo scopo di questo articolo, quindi questa parte non funzionerà ancora. Per consentire il test, inserisci la seguente riga alla fine del tuo file settings.py. Questo registra tutte le e-mail inviate alla console (in questo modo è possibile copiare il link per la reimpostazione della password dalla console).</p> + +<pre class="brush: python">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' +</pre> + +<p>Vedi <a href="https://docs.djangoproject.com/en/2.1/topics/email/">Servizi email</a> (Django docs).</p> +</div> + +<h2 id="Test_verso_utenti_autenticati">Test verso utenti autenticati</h2> + +<p>Questa sezione esamina cosa possiamo fare per controllare selettivamente il contenuto che l'utente vede in base al fatto che sia connesso o meno.</p> + +<h3 id="Testing_nei_templates">Testing nei templates</h3> + +<p>Puoi ottenere informazioni sull'utente attualmente connesso nei modelli con la variabile di modello <code>\{{user}}</code> (questo viene aggiunto al contesto del modello per impostazione predefinita quando imposti il progetto come abbiamo fatto nel nostro scheletro).</p> + +<p>In genere testerai innanzitutto la variabile di modello <code>\{{user.is_authenticated}}</code> per determinare se l'utente è idoneo a vedere contenuti specifici. Per dimostrarlo, aggiorneremo la nostra barra laterale per visualizzare un collegamento "Accedi" se l'utente è disconnesso e un collegamento "Disconnetti" se sono connessi.</p> + +<p>Apri il template (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) e copia il seguente testo nel blocco della barra laterale, immediatamente prima del tag <code>endblock</code>.</p> + +<pre class="brush: html"> <ul class="sidebar-nav"> + + ... + + <strong>{% if user.is_authenticated %}</strong> + <li>User: <strong>\{{ user.get_username }}</strong></li> + <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li> + <strong>{% else %}</strong> + <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li> + <strong>{% endif %} </strong> + </ul></pre> + +<p>Come puoi vedere, utilizziamo i tag if-else-endif per visualizzare in modo condizionale il testo in base al fatto che \{{user.is_authenticated}} sia vero. Se l'utente è autenticato, sappiamo che abbiamo un utente valido, quindi chiamiamo \{{user.get_username}} per visualizzare il loro nome.</p> + +<p>Creiamo gli URL di collegamento di accesso e di disconnessione utilizzando il tag <code>URL</code> e i nomi delle rispettive configurazioni di URL. Nota anche come abbiamo aggiunto <code>?next=\{{request.path}}</code>. Ciò che fa è aggiungere un parametro URL <font face="Consolas, Liberation Mono, Courier, monospace">next</font> contenente l'indirizzo (URL) della pagina corrente, alla fine dell'URL collegato. Dopo che l'utente ha effettuato correttamente l'accesso / uscita, le viste useranno questo valore "<code>next</code>" per reindirizzare l'utente alla pagina in cui hanno prima fatto clic sul collegamento login / logout.</p> + +<div class="note"> +<p><strong>Note</strong>: Provalo! Se ti trovi nella home page e fai clic su Accedi / Esci nella barra laterale, dopo il completamento dell'operazione dovresti tornare alla stessa pagina.</p> +</div> + +<h3 id="Testing_nelle_views">Testing nelle views</h3> + +<p>Se si utilizzano le viste basate sulle funzioni, il modo più semplice per limitare l'accesso alle funzioni è applicare il decoratore login_required alla funzione di visualizzazione, come mostrato di seguito. Se l'utente ha effettuato l'accesso, il codice di visualizzazione verrà eseguito normalmente. Se l'utente non ha effettuato l'accesso, verrà reindirizzato all'URL di accesso definito nelle impostazioni del progetto (settings.LOGIN_URL), passando il percorso assoluto corrente come parametro successivo. Se l'utente riesce ad accedere, verrà riportato a questa pagina, ma questa volta autenticato.</p> + +<pre class="brush: python">from django.contrib.auth.decorators import login_required + +@login_required +def my_view(request): + ...</pre> + +<div class="note"> +<p><strong>Note:</strong> Puoi fare lo stesso genere di cose manualmente testando su request.user.is_authenticated, ma il decoratore è molto più conveniente!</p> +</div> + +<p>Analogamente, il modo più semplice per limitare l'accesso agli utenti che hanno eseguito l'accesso nelle viste basate su classi è derivare da LoginRequiredMixin. Devi dichiarare questo mixin nella prima lista della superclasse, prima della classe della vista principale.</p> + +<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin + +class MyView(LoginRequiredMixin, View): + ...</pre> + +<p>È inoltre possibile specificare un percorso alternativo per reindirizzare l'utente se non sono autenticati (login_url) e un nome parametro URL invece di "next" per inserire il percorso assoluto corrente (redirect_field_name).</p> + +<pre class="brush: python">class MyView(LoginRequiredMixin, View): + login_url = '/login/' + redirect_field_name = 'redirect_to' +</pre> + +<p>Per informazioni ulteriori, consultare <a href="https://docs.djangoproject.com/en/2.1/topics/auth/default/#limiting-access-to-logged-in-users">Django docs here</a>.</p> + +<h2 id="Esempio_—_Elencare_i_libri_correnti_dello_user">Esempio — Elencare i libri correnti dello user</h2> + +<p>Ora che sappiamo come limitare una pagina a un particolare utente, creiamo una vista dei libri che l'utente corrente ha preso in prestito.</p> + +<p>Sfortunatamente, non abbiamo ancora modo per gli utenti di prendere in prestito libri! Quindi, prima di poter creare l'elenco dei libri, estenderemo innanzitutto il modello <code>BookInstance </code>per supportare il concetto di prestito e utilizzare l'applicazione Django Admin per prestare diversi libri al nostro utente di test.</p> + +<h3 id="Models">Models</h3> + +<p>Innanzitutto, dovremo rendere possibile agli utenti un prestito di BookInstance (abbiamo già uno stato e una data di scadenza, ma non abbiamo ancora alcuna associazione tra questo modello e un utente. creane uno usando un campo ForeignKey (uno-a-molti). Abbiamo anche bisogno di un meccanismo semplice per verificare se un libro in prestito è in ritardo.</p> + +<p>Apri <strong>catalog/models.py</strong>, ed importa il modello <code>User</code> model da <code>django.contrib.auth.models:</code></p> + +<pre class="brush: python">from django.contrib.auth.models import User +</pre> + +<p>Successivamente, aggiungi il campo del mutuatario al modello BookInstance:</p> + +<pre class="brush: python">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True) +</pre> + +<p>Mentre siamo qui, aggiungiamo una <a href="https://docs.python.org/3/library/functions.html#property">property</a> che possiamo chiamare dai nostri modelli per capire se una determinata istanza di un libro è in ritardo. Mentre potremmo calcolare questo nel modello stesso, usare una proprietà come mostrato di seguito sarà molto più efficiente.</p> + +<p>Aggiungi questo da qualche parte vicino alla parte superiore del file:</p> + +<pre class="brush: python">from datetime import date</pre> + +<p class="brush: python">Ora aggiungi la seguente definizione di proprietà alla classe BookInstance:</p> + +<pre class="brush: python">@property +def is_overdue(self): + if self.due_back and date.today() > self.due_back: + return True + return False</pre> + +<div class="note"> +<p><strong>Note</strong>: Verifichiamo se due_back è vuoto prima di fare un confronto. Un campo vuoto forza Django a lanciare un errore invece di mostrare la pagina: i valori vuoti non sono confrontabili. Questo non è qualcosa che vorremmo far provare ai nostri utenti!</p> +</div> + +<p>Ora che abbiamo aggiornato i nostri modelli, dovremo effettuare nuove migrazioni sul progetto e quindi applicare tali migrazioni:</p> + +<pre class="brush: bash">python3 manage.py makemigrations +python3 manage.py migrate +</pre> + +<h3 id="Admin">Admin</h3> + +<p>Ora apri il <code>catalogo/admin.py</code> e aggiungi il campo del mutuatario alla classe <code>BookInstanceAdmin </code>sia in <code>list_display </code>che in <code>fielsets</code>, come mostrato di seguito. Questo renderà il campo visibile nella sezione Amministrazione, permettendoci di assegnare un <code>Utente</code> a una <code>BookInstance</code> quando necessario.</p> + +<pre class="brush: python">@admin.register(BookInstance) +class BookInstanceAdmin(admin.ModelAdmin): + list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id') + list_filter = ('status', 'due_back') + + fieldsets = ( + (None, { + 'fields': ('book','imprint', 'id') + }), + ('Availability', { + 'fields': ('status', 'due_back'<strong>,'borrower'</strong>) + }), + )</pre> + +<h3 id="Prestiamo_qualche_libro">Prestiamo qualche libro</h3> + +<p>Ora che è possibile noleggiare libri a un utente specifico, vai a prestare un certo numero di record su BookInstance. Imposta il campo preso in prestito all'utente di test, imposta lo stato "In prestito" e imposta le scadenze sia nel futuro che nel passato.</p> + +<div class="note"> +<p><strong>Note</strong>: Non spiegheremo nuovamente il processo, poiché sai già come utilizzare il sito di amministrazione!</p> +</div> + +<h3 id="View_dei_prestiti">View dei prestiti</h3> + +<p>Ora aggiungeremo una vista per ottenere l'elenco di tutti i libri che sono stati prestati all'utente corrente. Useremo la stessa visualizzazione di elenco generica basata sulla classe che conosciamo, ma questa volta importeremo e deriverà da LoginRequiredMixin, in modo che solo un utente che ha effettuato l'accesso possa chiamare questa vista. Scegliamo anche di dichiarare un template_name, piuttosto che usare l'impostazione predefinita, perché potremmo finire per avere alcuni elenchi diversi di record di BookInstance, con visualizzazioni e modelli diversi.</p> + +<p>Aggiungi quanto segue al catalog/views.py:</p> + +<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin + +class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): + """Generic class-based view listing books on loan to current user.""" + model = BookInstance + template_name ='catalog/bookinstance_list_borrowed_user.html' + paginate_by = 10 + + def get_queryset(self): + return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre> + +<p>Per limitare la nostra query solo agli oggetti BookInstance per l'utente corrente, re-implementiamo get_queryset () come mostrato sopra. Si noti che "o" è il codice memorizzato per "in prestito" e ordiniamo per data di restituzione, in modo che gli elementi più vecchi vengano visualizzati per primi.</p> + +<h3 id="Conf._URL_per_libri_in_prestito">Conf. URL per libri in prestito</h3> + +<p>Ora apri /catalog/urls.py e aggiungi un <code>path()</code> che punta alla vista precedente (puoi semplicemente copiare il testo qui sotto alla fine del file).</p> + +<pre class="brush: python">urlpatterns += [ + path('mybooks/', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'), +]</pre> + +<h3 id="Template_per_i_libri_in_prestito">Template per i libri in prestito</h3> + +<p>Ora, tutto ciò che dobbiamo fare per questa pagina è aggiungere un template. Per prima cosa, crea il file template <code>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</code> e dagli il seguente contenuto:</p> + +<pre class="brush: python">{% extends "base_generic.html" %} + +{% block content %} + <h1>Borrowed books</h1> + + {% if bookinstance_list %} + <ul> + + {% for bookinst in bookinstance_list %} + <li class="{% if bookinst.is_overdue %}text-danger{% endif %}"> + <a href="{% url 'book-detail' bookinst.book.pk %}">\{{bookinst.book.title}}</a> (\{{ bookinst.due_back }}) + </li> + {% endfor %} + </ul> + + {% else %} + <p>There are no books borrowed.</p> + {% endif %} +{% endblock %}</pre> + +<p>Questo modello è molto simile a quelli che abbiamo creato precedentemente per gli oggetti Libro e Autore. L'unica cosa "nuova" qui è che controlliamo il metodo che abbiamo aggiunto nel modello (bookinst.is_overdue) e lo usiamo per cambiare il colore degli elementi scaduti.</p> + +<p>Quando il server di sviluppo è in esecuzione, dovresti essere in grado di visualizzare l'elenco per un utente che ha effettuato l'accesso nel tuo browser all'indirizzo http://127.0.0.1:8000/catalog/mybooks/. Provalo con il tuo utente loggato e disconnesso (nel secondo caso, dovresti essere reindirizzato alla pagina di login).</p> + +<h3 id="Aggiungi_l'elenco_alla_barra_laterale">Aggiungi l'elenco alla barra laterale</h3> + +<p>L'ultimo passo è aggiungere un link per questa nuova pagina nella barra laterale. Inseriremo questo nella stessa sezione in cui vengono visualizzate altre informazioni per l'utente che ha effettuato l'accesso. Aprire il modello di base (/locallibrary/catalog/templates/base_generic.html) e aggiungere la linea in grassetto alla barra laterale come mostrato.</p> + +<pre class="brush: python"> <ul class="sidebar-nav"> + {% if user.is_authenticated %} + <li>User: \{{ user.get_username }}</li> +<strong> <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li></strong> + <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li> + {% else %} + <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li> + {% endif %} + </ul> +</pre> + +<h3 id="Che_cosa_vedo">Che cosa vedo?</h3> + +<p>Quando un utente ha effettuato l'accesso, vedrà il link I miei prestiti nella barra laterale e l'elenco dei libri visualizzati come segue (il primo libro non ha una data di scadenza, che è un bug che speriamo di risolvere in un tutorial successivo!).</p> + +<p><img alt="Library - borrowed books by user" src="https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png" style="border-style: solid; border-width: 1px; display: block; height: 215px; margin: 0px auto; width: 530px;"></p> + +<h2 id="Permessi">Permessi</h2> + +<p>Le autorizzazioni sono associate ai modelli e definiscono le operazioni che possono essere eseguite su un'istanza del modello da un utente che dispone dell'autorizzazione. Per impostazione predefinita, Django aggiunge automaticamente autorizzazioni di aggiunta, modifica ed eliminazione a tutti i modelli, che consentono agli utenti con le autorizzazioni di eseguire le azioni associate tramite il sito di amministrazione. È possibile definire le proprie autorizzazioni per i modelli e concederle ad utenti specifici. È inoltre possibile modificare le autorizzazioni associate a diverse istanze dello stesso modello.</p> + +<p>I test sulle autorizzazioni nelle viste e nei modelli sono quindi molto simili per il test sullo stato di autenticazione (e infatti, il test per un'autorizzazione verifica anche l'autenticazione).</p> + +<h3 id="Models_2">Models</h3> + +<p>Dfeinire permessi è un'azione svolta tramite la sezione "<code>class Meta</code>", utilizzando il campo <code>permissions</code>. È possibile specificare tutte le autorizzazioni necessarie in una tupla, ogni autorizzazione viene definita in una tupla nidificata contenente il nome di autorizzazione e il valore di visualizzazione delle autorizzazioni. Ad esempio, potremmo definire un'autorizzazione per consentire a un utente di contrassegnare che un libro è stato restituito come mostrato:</p> + +<pre class="brush: python">class BookInstance(models.Model): + ... + class Meta: + ... +<strong> permissions = (("can_mark_returned", "Set book as returned"),) </strong> </pre> + +<p>Potremmo quindi assegnare l'autorizzazione a un gruppo "Bibliotecario" nel sito di amministrazione. Apri il catalogo / models.py e aggiungi l'autorizzazione come mostrato sopra. Dovrai rieseguire le tue migrazioni (esegui <code>python3 manage.py makemigrations</code> e <code>python3 manage.py migrate</code>) per aggiornare il database.</p> + +<h3 id="Templates">Templates</h3> + +<p>I permessi correnti di un utente sono storati in una variabile <code>\{{ perms }}</code>. Puoi verificare se l'utente corrente ha un permesso particolare usando il nome specifico della variabile all'interno della "app" Django associata, ad es. <code>\{{ perms.catalog.can_mark_returned }}</code> sarà <code>True</code> se lo user ha i permessi, e <code>False</code> altrimenti. Tipicamente testiamo i permessi utilizzando il tag <code>{% if %}</code> come mostrato:</p> + +<pre class="brush: python">{% if perms.catalog.can_mark_returned %} + <!-- We can mark a BookInstance as returned. --> + <!-- Perhaps add code to link to a "book return" view here. --> +{% endif %} +</pre> + +<h3 id="Views">Views</h3> + +<p>Le autorizzazioni possono essere verificate nella funzione vista utilizzando il decoratore <code>permission_required</code> o in una visualizzazione basata su classi che utilizza <code>PermissionRequiredMixin</code>. Lo schema e il comportamento sono gli stessi dell'autenticazione di accesso, anche se, naturalmente, è possibile che sia necessario aggiungere multiple autorizzazioni.</p> + +<p>Decoratore:</p> + +<pre class="brush: python">from django.contrib.auth.decorators import permission_required + +@permission_required('catalog.can_mark_returned') +@permission_required('catalog.can_edit') +def my_view(request): + ...</pre> + +<p>Views.</p> + +<pre class="brush: python">from django.contrib.auth.mixins import PermissionRequiredMixin + +class MyView(PermissionRequiredMixin, View): + permission_required = 'catalog.can_mark_returned' + # Or multiple permissions + permission_required = ('catalog.can_mark_returned', 'catalog.can_edit') + # Note that 'catalog.can_edit' is just an example + # the catalog application doesn't have such permission!</pre> + +<h3 id="Esempio">Esempio</h3> + +<p>Non aggiorneremo la LocalLibrary qui; forse nel prossimo tutorial!</p> + +<h2 id="Prova_tu">Prova tu</h2> + +<p>In precedenza in questo articolo, vi abbiamo mostrato come creare una pagina per l'utente corrente che elenca i libri che hanno preso in prestito. La sfida ora è creare una pagina simile che sia visibile solo per i bibliotecari, che mostri tutti i libri presi in prestito e che includa il nome di ciascun mutuatario.</p> + +<p>Dovresti essere in grado di seguire lo stesso schema dell'altra vista. La differenza principale è che dovrai limitare la visualizzazione solo ai bibliotecari. Puoi farlo a seconda che l'utente sia un membro del personale (decoratore di funzioni: <code>staff_member_required</code>, template variabile: <code>user.is_staff</code>) ma ti raccomandiamo invece di utilizzare il permesso <code>can_mark_returned</code> e <code>PermissionRequiredMixin</code>, come descritto sopra nella sezione precedente.</p> + +<div class="warning"> +<p><strong>Importante</strong>: Ricordati di non utilizzare il superutente per i test basati sulle autorizzazioni (i controlli delle autorizzazioni restituiscono sempre true per i superutenti, anche se non è ancora stata definita un'autorizzazione!). Invece, crea un utente di libreria e aggiungi il permesso richiesto.</p> +</div> + +<p>Quando hai finito, la tua pagina dovrebbe apparire come lo screenshot qui sotto.</p> + +<p><img alt="All borrowed books, restricted to librarian" src="https://mdn.mozillademos.org/files/14115/library_borrowed_all.png" style="border-style: solid; border-width: 1px; display: block; height: 283px; margin: 0px auto; width: 500px;"></p> + +<ul> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>Lavoro eccellente: ora hai creato un sito Web in cui i membri della biblioteca possono accedere e visualizzare il proprio contenuto e che i bibliotecari (con il permesso corretto) possono utilizzare per visualizzare tutti i libri in prestito ei loro mutuatari. Al momento stiamo ancora solo visualizzando i contenuti, ma gli stessi principi e tecniche sono utilizzati quando si desidera iniziare a modificare e aggiungere dati.</p> + +<p>Nel nostro prossimo articolo, vedremo come è possibile utilizzare i moduli di Django per raccogliere input dell'utente e quindi iniziare a modificare alcuni dei nostri dati memorizzati.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/auth/">User authentication in Django</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/auth/default//">Using the (default) Django authentication system</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/intro/#decorating-class-based-views">Introduction to class-based views > Decorating class-based views</a> (Django docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</p> + +<p> </p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> + +<p> </p> diff --git a/files/it/learn/server-side/django/development_environment/index.html b/files/it/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..75d6cd9ffb --- /dev/null +++ b/files/it/learn/server-side/django/development_environment/index.html @@ -0,0 +1,415 @@ +--- +title: Impostazione ambiente di sviluppo per Django +slug: Learn/Server-side/Django/development_environment +tags: + - Ambiente di sviluppo + - Intro + - Principiante + - Python + - django +translation_of: Learn/Server-side/Django/development_environment +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div> + +<p class="summary">Ora che sai a cosa serve Django, ti mostreremo come creare e testare un ambiente di sviluppo per Django su Windows, Linux (Ubuntu), e macOS — qualsiasi sistema operativo, comune, tu stia usando, questo articolo ti darà tutto il necessario per iniziare a sviluppare applicazioni Django.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Saper aprire un terminale / linea di comando. Saper installare un pacchetto software sul tuo sistema operativo.</td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Avere un ambiente di sviluppo per Django (2.0) sul tuo computer.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica_sullambiente_di_sviluppo_per_Django">Panoramica sull'ambiente di sviluppo per Django</h2> + +<p>Django rende molto semplice impostare il tuo computer per iniziare lo sviluppo di web application. Questa sezione spiega cosa avrai nel tuo ambiente di sviluppo, e fornirà una panoramica delle possibili impostazioni e configurazioni. Il resto dell'articolo spiega il metodo <em>raccomandato</em> per installare l'ambiente di sviluppo di Django su Ubuntu, macOS, e Windows, ed infine come testarlo.</p> + +<h3 id="Cosa_è_lambiente_di_sviluppo_Django">Cosa è l'ambiente di sviluppo Django?</h3> + +<p>L'ambiente di sviluppo è un'installazione di Django sul tuo computer che puoi usare per sviluppare e testare applicazioni Django prima di metterle in ambiente di produzione.</p> + +<p>Gli strumenti principali che Django fornisce sono una serie di script Python per creare e lavorare sui progetti Django, insieme ad un semplice <em>webserver</em> di sviluppo che puoi usare per testare localmente (ad es. sul tuo computer, non su un web server esterno) le applicazione web di Django usando un browser sul tuo computer.</p> + +<p>Ci sono altri strumenti periferici, che formano l'ambiente di sviluppo, che non tratteremo qui. Questi includono cose come <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">editor di testo</a> o IDE per modificare il codice, e uno strumento per gestire il controllo di versione come <a href="https://git-scm.com/">Git</a> per gestire in modo affidabile differenti versioni del tuo codice. Assumiamo che tu abbia già un editor di testo installato.</p> + +<h3 id="Quali_sono_le_opzioni_di_setup_di_Django">Quali sono le opzioni di setup di Django?</h3> + +<p>Django è estremamente flessibile in termni di come e dove può essere installato e configurato. Django può essere:</p> + +<ul> + <li>installato su differenti sistemi operativi.</li> + <li>usato con Python 3 e Python 2.</li> + <li>installato dal codice sorgente, da Python Package Index (PyPi) e in molti altri casi installato dal package manager presente nel sistema operativo installato.</li> + <li>configurato per usare uno o più database, che potrebbero necessitare di essere installati e configurati separatamente.</li> + <li>eseguito sull'ambiente Python di sistema o in un virtual enviroment Python separato.</li> +</ul> + +<p>Ognuna di queste opzioni richiede configurazioni e setup leggermente diverse. La seguente sottosezione spiega alcune di queste possibilità. Per il resto dell'articolo mostreremo come impostare Django in un piccolo numero di sistemi operativi, e questo setup sarà assunto valido per tutto il modulo.</p> + +<div class="note"> +<p><strong>Nota</strong>: Altri possbili metodi di installazione sono descritti nella documentazione ufficiale di Django. Diamo i link al <a href="#furtherreading">documento appropriato</a> più avanti.</p> +</div> + +<h4 id="Quali_sistemi_operativi_sono_supportati">Quali sistemi operativi sono supportati?</h4> + +<p>Le applicazioni Django possono essere eseguite su quasi tutte le macchine che possono eseguire il linguaggio Python 3: Windows, macOS, Linux/Unix, Solaris, per nominarne alcuni. Quasi tutti i computer hanno le caratteristiche per eseguire Django durante lo sviluppo.</p> + +<p>In questo articolo tratteremo dei casi Windows, macOS, e Linux/Unix.</p> + +<h4 id="Quale_versione_di_Python_dovrei_usare">Quale versione di Python dovrei usare?</h4> + +<p>Django esegue sopra Python, e può essere usato sia con Python 2 o Python 3 (o entrambi). Quando scegli una versione devi stare attento che:</p> + +<ul> + <li>Python 2 è la versione legacy del linguaggio e non riceve nessuna novità ma ha un repository enorme per librerie di terze parti da usate da sviluppatori ( alcune delle quali sono sono disponbili per Python 3).</li> + <li>Python 3 è un aggiornamento di Python 2 che, anche se simile, è più consistente e semplice da usare. Python 3 è il futuro del Python e contina ad evolversi.</li> + <li>è possibile usare entrambe le versioni usando librerie di compatibilità (come <a href="http://pythonhosted.org/six/">six</a>), tuttavia non senza un ulteriore sforzo.</li> +</ul> + +<ul> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Storicamente Python 2 era la scelta più realistica, perché poche delle librerie di terze parti erano disponibili per Python 3. Il trend corrente è che molti dei nuovi package su <a href="https://pypi.python.org/pypi">Python Package Index</a> (PyPi) supportano entrambe le versioni di Python. Mentre esistono ancora moli package che sono disponibili esclusivamente per Python 2, scegliere Python 3 è ora una scelta fattibile.</p> +</div> + +<p>Ti raccomandiamo di usare l'ultima versione di Python 3 a meno che il sito non dipenda da librerie di terze parti disponibili solo per Python 2.</p> + +<p>Questo articolo spiegherà come installare un ambiente per Python 3 (il setup equivalente per Python 2 dovrebbe essere molto simile).</p> + +<h4 id="Dove_posso_scaricare_Django">Dove posso scaricare Django?</h4> + +<p>Ci sono tre posti dove scaricare Django:</p> + +<ul> + <li>Il Python Package Repository (PyPi), usando <em>pip</em>. Questo è il modo migliore per avere l'ultima versione stabile di Django.</li> + <li>Installa una versione dal tuo gestore di pacchetti. Distribuzioni di Django incluse nei sistemi operativi offrono un sistema di installazione familiare. Nota che le versioni dei pacchetti possono essere piuttosto vecchie, e possono essere installati solo quelli dell'ambiente Python (che potrebbe non essere quello che volete).</li> + <li>Installarlo da codice sorgente. Puoi prendere e installare l'ultima versione di Python da codice sorgente. Questo non è raccomandato per i novizi, ma sarà necessario quando sarai pronto a contribuire a Django.</li> +</ul> + +<p>Questo articolo mostra come installare Django da PyPi, in modo da avere l'ultima versione stabile.</p> + +<h4 id="Quale_database">Quale database?</h4> + +<p>Django supporta 4 database principali (PostgreSQL, MySQL, Oracle e SQLite), e ci sono librerie che forniscono vari livelli di supporto ai più popolari database SQL e NOSQL. Ti raccomandiamo di scegliere lo stesso database in sviluppo e in produzione (nonostante Django astragga le differenze tra i database usando il suo Object-Relational Mapper (ORM), ci sono <a href="https://docs.djangoproject.com/en/1.10/ref/databases/">potenziali problemi</a> che è bene evitare).</p> + +<p>Per questo articolo (e molti altri di questo modulo) useremo <em>SQLite</em>,che memorizza i dati in un file. SQLite è da intendersi come un database leggero senza supporto per un alto livello di concorrenza. Tutta via è una scelta eccellente per applicazioni che fanno principalmente sola lettura.</p> + +<div class="note"> +<p><strong>Nota</strong>: Django è configurato per usare SQLite di default quando fai partire il tuo progetto usando gli strumenti standard (<em>django-admin</em>). E' una scelta ottima quando stai iniziando perchè non necessita di configurazioni. </p> +</div> + +<h4 id="Installare_da_sistema_o_in_un_ambiente_virtuale_di_Python">Installare da sistema o in un ambiente virtuale di Python?</h4> + +<p>Quando installi Python 3 sul tuo computer hai un singolo ambiente globale (inteso come insieme di pacchetti installati) per il tuo codice Python, che puoi gestire usando <em>pip3</em>. Puoi installare qualsiasi pacchetto Python tu voglia, ma puoi installarne solo una certa versione alla volta. Questo vuol dire che ogni cambiamento che fai in una applicazione Python potenzialmente può aver effetto sulle altre, e quindi puoi avere una sola versione di Django alla volta.</p> + +<p>Sviluppatori Python/Django con un po di esperienza spesso decidono di eseguire le loro applicazioni in un <em>ambiente Python virtuale.</em> Questo permette a gli sviluppatori di avere diversi ambienti di Django in un singolo computer, permettendogli di creare nuovi siti web (usando l'ultima versione corrente di Django) mentre mantengono siti web che fanno affidamento a versioni più vecchie. Gli sviluppatori del team di Django raccomandano di usare questi ambienti virtuali!</p> + +<p>Quando si sta iniziando l'approccio iniziale che usate non è importante. Sebbene l'installazione sia un po' più facile, abbiamo deciso di mostrarti come installare Django direttamente sul Python 3 di sistema.</p> + +<div class="warning"> +<p><strong>Importante</strong>: Il resto dell'articolo mostra come impostare Django in un ambiente con Python 3, su Ubuntu Linux, Mac OS X, e Windows 10.</p> +</div> + +<h2 id="Installare_Python_3">Installare Python 3</h2> + +<p>Per usare Django devi installare <em>Python 3</em> sul tuo sistema operativo. Avrai bisogno anche di <a href="https://pypi.python.org/pypi">Python Package Index</a> — <em>pip3</em> — che viene usato per gestire (installare, aggiornare, e rimuovere) package/librerie Python usate da Django altre tue applicazioni Python.</p> + +<p>Questa sezione mostra brevemente come puoi controllare quali versioni sono presenti, e se necessario installare una nuova versione, per Ubuntu Linux 16.04, Mac OS X, e Windows 10.</p> + +<div class="note"> +<p><strong>Nota</strong>: In base alla tua piattaforma, potrebbe essere possibile installare Python/pip dal gestore di pacchetti del sistema operativo o tramite altri meccanismi. Per molte piattaforme puoi scaricare i file di installazione da <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> usando le istruzioni per il vostro sistema operativo.</p> +</div> + +<h3 id="Ubuntu_16.04">Ubuntu 16.04</h3> + +<p>Ubuntu Linux include Python 3 di default. Puoi aver conferma di questo eseguendo il seguente comando nel terminale bash:</p> + +<pre class="brush: bash notranslate">python3 -V + Python 3.5.2</pre> + +<p>Tuttavia il Python Package Index di cui hai bisogno per installare package Python 3 (incluso Django) <strong>non</strong> è disponibile di default. Puoi installare pip3 dal terminale bash usando:</p> + +<pre class="brush: bash notranslate">sudo apt-get install python3-pip +</pre> + +<h3 id="Mac_OS_X">Mac OS X</h3> + +<p>Mac OS X "El Capitan" non include Python 3. Puoi averne conferma eseguendo il seguente comando nel terminale bash:</p> + +<pre class="brush: bash notranslate">python3 -V + -bash: python3: command not found</pre> + +<p>Puoi installare facilmente Python 3 (inseme a <em>pip3</em>) da <a href="https://www.python.org/">python.org</a>:</p> + +<ol> + <li>Scarica l'installer: + <ol> + <li>Vai su <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> + <li>Seleziona <strong>Download Python 3.5.2</strong> (il <em>minor</em> del numero di versione esatto può essere differente).</li> + </ol> + </li> + <li>Cercare il file usando <em>Finder</em>, fai doppio-click sul file. Segui le istruzioni dell'installazione.</li> +</ol> + +<p>Per essere sicuro della corretta installazione di <em>Python 3</em>:</p> + +<pre class="brush: bash notranslate">python3 -V + Python 3.5.20 +</pre> + +<p>Similmente puoi controllare che <em>pip3</em> sia installato guardando i package disponibili:</p> + +<pre class="brush: bash notranslate">pip3 list</pre> + +<h3 id="Windows_10">Windows 10</h3> + +<p>Windows non include Python di default, ma puoi installarlo facilmente (insieme a <em>pip3</em>) da<a href="https://www.python.org/"> python.org</a>:</p> + +<ol> + <li>Scarica l'installer: + <ol> + <li>Vai su <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> + <li>Seleziona <strong>Download Python 3.5.2</strong> (il <em>minor</em> del numero di versione esatto può essere differente).</li> + </ol> + </li> + <li>Installa Python facendo double-click sul file scaricato e segui le istruzioni</li> +</ol> + +<p>Puoi verificare che Python sia stato installato correttamente digitando sulla linea di comando:</p> + +<pre class="brush: bash notranslate">py -3 -V + Python 3.5.2 +</pre> + +<p>L'installer di Windows contiene <em>pip3</em> (Python package manager) di default. Puoi vedere la lista dei pacchetti installati usando:</p> + +<pre class="brush: bash notranslate">pip3 list +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: L'installer dovrebbe essere impostato ovunque tu voglia, perché il comando di sopra funzioni. Se tuttavia dovessi ottenere un messaggio che Python non può essere trovato, potresti aver dimenticato di aggiungerlo al path di sistema. Puoi farlo eseguendo di nuovo l'installer, scegliendo "Modify" e selezionando "Add Pyhton to environment variables" nella seconda pagina.</p> +</div> + +<h2 id="Utilizzare_Django_allinterno_di_un_ambiente_virtuale_Python">Utilizzare Django all'interno di un ambiente virtuale Python</h2> + +<p>Le librerie che useremo per la creazione dei nostri ambienti virtuali sono <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux e macOS) e <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), che a loro volta utilizzano entrambi il tool <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>. Gli strumenti wrapper creano un'interfaccia coerente per gestire interfacce su tutte le piattaforme.</p> + +<h3 id="Installare_il_software_virtual_environment">Installare il software virtual environment</h3> + +<h4 id="Setup_del_virtual_environment_su_Ubuntu">Setup del virtual environment su Ubuntu</h4> + +<p>Dopo l'installazione di Python e pip puoi installare <em>virtualenvwrapper</em> (che comprende <em>virtualenv</em>). La guida ufficiale di installazione si può trovare <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">qui</a>, oppure seguire le istruzioni sotto.</p> + +<p>Installare il tool utilizzando <em>pip3</em>:</p> + +<pre class="notranslate"><code>sudo pip3 install virtualenvwrapper</code> +</pre> + +<p>Poi aggiungi le seguenti linee alla fine del tuo file di startup della shell (questo è un file nascosto chiamato <strong>.bashrc</strong> nella tua directory home). Questo imposta la posizione in cui dovrebbero vivere i virtual environment, la posizione delle tue directory di sviluppo dei progetti e la posizione dello script installato con questo pacchetto:</p> + +<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 +export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' +export PROJECT_HOME=$HOME/Devel +source /usr/local/bin/virtualenvwrapper.sh</code> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Le variabili <code>VIRTUALENVWRAPPER_PYTHON</code> e <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS</code> puntano alla posizione di installazione normale per Python3, e <code>source /usr/local/bin/virtualenvwrapper.sh</code> punta alla posizione normale dello script <code>virtualenvwrapper.sh</code>. Se il <em>virtualenv</em> non funziona quando lo si testa, una cosa da controllare è che Python e lo script siano nella posizione attesa (e quindi modificare il file di startup adeguatamente).<br> + <br> + Puoi trovare le posizioni corrette per il tuo sistema utilizzando i comandi <code>which virtualenvwrapper.sh</code> e <code>which python3</code>.</p> +</div> + +<p>Poi ricarica il file di startup eseguendo il seguente comando nel terminale:</p> + +<pre class="notranslate"><code>source ~/.bashrc</code></pre> + +<p>A questo punto si dovrebbe vedere un blocco di script che viene eseguito come mostrato sotto:</p> + +<pre class="notranslate"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject +... +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code></pre> + +<p>Ora puoi creare un nuovo ambiente virtuale con il comando <code>mkvirtualenv</code>.</p> + +<h4 id="Setup_di_un_ambiente_virtuale_su_macOS">Setup di un ambiente virtuale su macOS</h4> + +<p>Impostare un <em>virtualenvwrapper</em> su macOS è quasi esattamente la stessa cosa che su Ubuntu (ancora una volta, si possono seguire le istruzioni o della guida <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">official installation</a> oppure quelle qui sotto.</p> + +<p>Installare <em>virtualenvwrapper</em> (e costruire <em>virtualenv</em>) utilizzando <em>pip</em> come mostrato.</p> + +<pre class="notranslate"><code>sudo pip3 install virtualenvwrapper</code></pre> + +<p>Poi aggiungi le seguenti linee alla fine del file di startup della shell.</p> + +<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 +export PROJECT_HOME=$HOME/Devel +source /usr/local/bin/virtualenvwrapper.sh</code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: la variabile <code>VIRTUALENVWRAPPER_PYTHON</code> punta alla normale posizione di installazione per Python3, e <code>source /usr/local/bin/virtualenvwrapper.sh</code> punta alla normale posizione dello script <code>virtualenvwrapper.sh</code>. Se il <em>virtualenv</em> non funziona quando lo si testa, una cosa da controllare è che Python e lo script siano nella posizione attesa (e poi modificare il file di startup adeguatamente).</p> + +<p>Per esempio, un test di installazione su macOS avrà le seguenti linee necessarie nel file di startup:</p> + +<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3 +export PROJECT_HOME=$HOME/Devel +source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</code></pre> + +<p>Puoi trovare le posizioni corrette per il tuo sistema utilizzando i comandi <code>which virtualenvwrapper.sh</code> e <code>which python3</code>.</p> +</div> + +<p>Queste sono le stesse linee come per Ubuntu, ma il file di startup è il file nascosto chiamato (diversamente) <strong>.bash_profile</strong> nella tua cartella home.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Se non riesci a trovare <strong>.bash_profile</strong> per modificarlo nel finder, puoi anche aprirlo nel terminale utilizzando nano.</p> + +<p>I comandi saranno simili a questi:</p> + +<pre class="notranslate"><code>cd ~ # Navigate to my home directory +ls -la #List the content of the directory. YOu should see .bash_profile +nano .bash_profile # Open the file in the nano text editor, within the terminal +# Scroll to the end of the file, and copy in the lines above +# Use Ctrl+X to exit nano, Choose Y to save the file.</code> +</pre> +</div> + +<p>Poi ricarica il file di startup facendo la seguente chiamata nel terminale:</p> + +<pre class="notranslate"><code>source ~/.bash_profile</code></pre> + +<p>A questo punto, si dovrebbero vedere una serie di script che vengono eseguiti (gli stessi script dell'installazione in Ubuntu). Ora dovresti essere in grado di creare un nuovo virtual environment con il comando <code>mkvirtualenv</code>.</p> + +<h4 id="Setup_del_virtual_environment_Windows_10">Setup del virtual environment Windows 10</h4> + +<p>Installare <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> è anche più semplice di settare <em>virtualenvwrapper</em> perché non hai bisogno di configurare dove i tool memorizzano l'informazione dei virtual environment (c'è un valore di dafault). Tutto ciò che devi fare è eseguire il seguente comando nel prompt dei comandi:</p> + +<pre class="notranslate"><code>pip3 install virtualenvwrapper-win</code></pre> + +<p>Ora sei in grado di creare un nuovo virtual environment con il comando <code>mkvirtualenv</code>.</p> + +<h3 id="Creazione_di_un_virtual_environment">Creazione di un virtual environment</h3> + +<p>Una volta installato <em>virtualenvwrapper</em> o <em>virtualenvwrapper-win</em> allora lavorare con virtual environment è molto simile su tutte le piattaforme.</p> + +<p>Ora puoi creare un nuovo virtual environment col comando <code>mkvirtualenv</code> . Quando questo comando viene eseguito vedrai l'ambiente che viene settato (ciò che vedrai è leggermente specifico della piattaforma). Quando il comando viene completato il nuovo ambiente virtuale sarà attivo — potrai vederlo perché l'inizio del prompt sarà il nome dell'environment tra parentesi (sotto mostriamo questo per Ubuntu, ma la linea finale è simile anche per Windows e macOS).</p> + +<pre class="notranslate"><code>$ mkvirtualenv my_django_environment + +Running virtualenv with interpreter /usr/bin/python3 +... +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details +(my_django_environment) ubuntu@ubuntu:~$</code> +</pre> + +<p>Ora che sei dentro il virtual environment puoi installare Django e iniziare a sviluppare.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Da ora in questo articolo (e in effetti nel modulo) considerare che ogni comando venga eseguito in un virtual environment Python come quello che abbiamo settato sopra.</p> +</div> + +<h3 id="Utilizzare_un_Ambiente_Virtuale">Utilizzare un Ambiente Virtuale</h3> + +<p>Ci sono solo pochi altri comandi utili che dovresti conoscere (ce ne sono molti nella documentazione del tool, ma questi sono quelli che userai regolarmente):</p> + +<ul> + <li><code>deactivate</code> — Esci dall'attuale virtual environment Python</li> + <li><code>workon</code> — Elenca i virtual environment disponibili</li> + <li><code>workon name_of_environment</code> — Attiva il virtual environment Python specificato</li> + <li><code>rmvirtualenv name_of_environment</code> — Rimuovi il virtual environment specificato.</li> +</ul> + +<h2 id="Installare_Django">Installare Django</h2> + +<p>Una volta che hai installato <em>Python 3</em> e <em>pip3</em>, e creato un virtual environment, puoi usare <em>pip3</em> per installare Django.</p> + +<pre class="brush: bash notranslate">pip3 install django +</pre> + +<p>Puoi testare se Django è installato eseguendo il seguente comando (questo verifica che Python riesca a trovare il modulo Django):</p> + +<pre class="brush: bash notranslate"># Linux/Mac OS X +python3 -m django --version + 1.10.10 + +# Windows +py -3 -m django --version + 1.10.10 +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Su Windows puoi eseguire script <em>Python 3</em> usando il comando <code>py -3</code>, mentre su Linux/Mac OSX, il comando è <code>python3</code>.</p> +</div> + +<div class="warning"> +<p><strong>Importante</strong>: Il resto di questo <strong>modulo </strong>usa, per invocare Python 3 il comando <em>Linux</em> (<code>python3</code>) . Se stai lavorando su <em>Windows usa</em>: <code>py -3</code></p> +</div> + +<h2 id="Testare_la_tua_installazione">Testare la tua installazione</h2> + +<p>Il test sopra funziona, ma non è molto divertente. Un test più interessante è creare lo scheletro di un progetto e vederlo funzionare. Per farlo, andate tramite linea di comando/terminale dove volete memorizzare le applicazioni Django. Create una cartella per il sito di test ed entrateci.</p> + +<pre class="brush: bash notranslate">mkdir django_test +cd django_test +</pre> + +<p>Ora si può creare lo scheletro di un nuovo sito chiamata "<em>mytestsite</em>" utilizzando il tool <strong>django-admin </strong>come mostrato<strong>.</strong> Dopo la creazione del sito potete esplorare la cartella creata, e troverete lo script principale per la gestione dei progetti, chiamato <strong>manage.py</strong>.</p> + +<pre class="brush: bash notranslate">django-admin startproject mytestsite +cd mytestsite</pre> + +<p>Possiamo avviare il <em>server web di sviluppo</em> dalla cartella usando <strong>manage.py</strong> e il comando <code>runserver</code>.</p> + +<pre class="brush: bash notranslate">$ <strong>python3 manage.py runserver </strong> +Performing system checks... + +System check identified no issues (0 silenced). + +You have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. +Run 'python manage.py migrate' to apply them. + +September 19, 2016 - 23:31:14 +Django version 1.10.1, using settings 'mysite.settings' +Starting development server at http://127.0.0.1:8000/ +Quit the server with CONTROL-C. +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Il comando sopra mostra il comando per Linux/macOS. Per ora potete ignorare il messaggio di avviso "13 unapplied migration(s)"!</p> +</div> + +<p>Una volta che il server è in esecuzione potete vedere il sito usando il web browser e andando sul URL: <code>http://127.0.0.1:8000/</code>. Dovreste vedere un sito simile a questo:</p> + +<p><img alt="Django Skeleton App Homepage - Django 2.0" src="https://mdn.mozillademos.org/files/16288/Django_Skeleton_Website_Homepage_2_1.png"></p> + +<ul> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>Ora avete un ambiente di sviluppo Django funzionante sul vostro computer.</p> + +<p>Nella sezione di test avete visto brevemente come creare un sito web Django usando <code>django-admin startproject</code>, e come avviarlo sul browser usando il web server di sviluppo (<code><strong>python3 manage.py runserver</strong></code>). Nel prossimo articolo costruiremo una applicazione web semplice, ma completa.</p> + +<h2 id="Vedete_anche">Vedete anche</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/1.10/intro/install/">Guida per l'installazione veloce</a> (documenti Django)</li> + <li><a href="https://docs.djangoproject.com/en/1.10/topics/install/">Come installare Django — Guida completa</a> (documenti Django) - include informazioni su come rimuovere Django</li> + <li><a href="https://docs.djangoproject.com/en/1.10/howto/windows/">Come installare Django su Windows</a> (documenti Django)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p> diff --git a/files/it/learn/server-side/django/forms/index.html b/files/it/learn/server-side/django/forms/index.html new file mode 100644 index 0000000000..80c0970f16 --- /dev/null +++ b/files/it/learn/server-side/django/forms/index.html @@ -0,0 +1,678 @@ +--- +title: 'Django Tutorial Part 9: Working with forms' +slug: Learn/Server-side/Django/Forms +translation_of: Learn/Server-side/Django/Forms +--- +<div> {{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</div> + +<p class="summary">In questo tutorial ti mostreremo come lavorare con i form HTML in Django e, in particolare, il modo più semplice per scrivere moduli per creare, aggiornare ed eliminare istanze di modelli. Come parte di questa dimostrazione, estenderemo il sito Web LocalLibrary in modo che i bibliotecari possano rinnovare libri e creare, aggiornare ed eliminare autori utilizzando i nostri moduli (anziché utilizzare l'applicazione di amministrazione).</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Completare il precedente tutorial, compreso: <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions">Django Tutorial Part 8: User authentication and permissions</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivi:</th> + <td>Comprendere come scrivere form per ottenere informazioni dagli utenti e aggiornare il database. Per capire come le generiche viste di modifica dei form basate sulla classe possono semplificare enormemente la creazione di form per lavorare con un singolo modello.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>Un <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Form</a>, o modulo, è un gruppo di uno o più campi/widget su una pagina Web, che può essere utilizzato per raccogliere informazioni dagli utenti per l'invio a un server. I moduli sono un meccanismo flessibile per la raccolta dell'input dell'utente perché ci sono widget adatti per inserire molti tipi diversi di dati, tra cui caselle di testo, caselle di controllo, pulsanti di opzione, selettori di date, ecc. I moduli sono anche un modo relativamente sicuro di condividere i dati con il server, poiché ci consentono di inviare i dati nelle richieste POST con la protezione dalle falsificazioni delle richieste cross-site.</p> + +<p>Anche se finora non abbiamo creato alcun modulo in questo tutorial, li abbiamo già incontrati nel sito di Django Admin. Ad esempio, lo screenshot seguente mostra un modulo per la modifica di uno dei nostri modelli <a href="/en-US/docs/Learn/Server-side/Django/Models">Book</a>, composto da un certo numero di elenchi di selezione e editor di testo.</p> + +<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Lavorare con i moduli Web può essere complicato! Gli sviluppatori devono scrivere HTML per il modulo, convalidare e bonificare correttamente i dati immessi sul server (e possibilmente anche nel browser), ripubblicare il modulo con messaggi di errore per informare gli utenti di eventuali campi non validi, gestire i dati quando sono stati inviati correttamente e infine rispondere all'utente in qualche modo per indicare il successo. <em>Django Forms</em> prende molto del lavoro da tutti questi passaggi, fornendo un framework che consente di definire i form e i loro campi a livello di codice, e quindi utilizzare questi oggetti per generare il codice HTML del modulo e gestire gran parte della convalida e dell'interazione dell'utente.</p> + +<p>In questo tutorial, ti mostreremo alcuni dei modi in cui puoi creare e lavorare con i moduli e, in particolare, in che modo le viste generiche del modulo di modifica possono ridurre in modo significativo la quantità di lavoro necessario per creare moduli da manipolare i tuoi modelli Lungo la strada, estenderemo la nostra applicazione LocalLibrary aggiungendo un modulo per consentire ai bibliotecari di rinnovare i libri della biblioteca e creeremo pagine per creare, modificare ed eliminare libri e autori (riproducendo una versione di base del modulo mostrato sopra per la modifica libri).</p> + +<h2 id="HTML_Forms">HTML Forms</h2> + +<p>Prima, una breve panoramica degli <a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a>. Consideriamo un semplice form, con un singolo campo di testo per inserire il nome di alcuni "team" e la relativa etichetta associata:</p> + +<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p> + +<p>Un form HTML è definito in un insieme di elementi dentro dei tag <code><form>...</form></code>, contenenti almeno un elemento <code>input</code> di <code>type="submit"</code>.</p> + +<pre class="brush: html"><form action="/team_name_url/" method="post"> + <label for="team_name">Enter name: </label> + <input id="team_name" type="text" name="name_field" value="Default name for team."> + <input type="submit" value="OK"> +</form></pre> + +<p>Mentre qui abbiamo solo un campo di testo per inserire il nome del team, un modulo può avere qualsiasi numero di altri elementi di input e le loro etichette associate. L'attributo <code>type</code> del campo definisce quale tipo di widget verrà visualizzato. Il <code>nome e l'ID</code> del campo vengono utilizzati per identificare il campo in JavaScript / CSS / HTML, mentre il <code>value</code> definisce il valore iniziale per il campo quando viene visualizzato per la prima volta. L'etichetta del team corrispondente viene specificata utilizzando il tag label (vedere "Immettere il nome" sopra), con un campo for che contiene il valore id dell'input associato.</p> + +<p>L'input <code>submit</code> verrà visualizzato come un pulsante (predefinito) che può essere premuto dall'utente per caricare i dati in tutti gli altri elementi di input nel modulo sul server (in questo caso, solo il <code>team_name</code>). Gli attributi del form definiscono il metodo HTTP utilizzato perinviare i dati e la destinazione dei dati sul server (<code>action</code>):</p> + +<ul> + <li><code>action</code>: La risorsa / URL in cui i dati devono essere inviati per l'elaborazione quando viene inviato il modulo. Se questo non è impostato (o impostato su una stringa vuota), il modulo verrà inviato nuovamente all'URL della pagina corrente.</li> + <li><code>method</code>: Il metodo HTTP utilizzato per inviare i dati: post o get. + <ul> + <li>Il metodo POST deve essere sempre utilizzato se i dati determinano una modifica al database del server, in quanto ciò può essere reso più resistente agli attacchi delle richieste di falsificazione intersito.</li> + <li>Il metodo GET deve essere utilizzato solo per form che non modificano i dati dell'utente (ad esempio un form di ricerca). È consigliato quando vuoi essere in grado di aggiungere un segnalibro o condividere l'URL.</li> + </ul> + </li> +</ul> + +<p>Il ruolo del server è innanzitutto quello di rendere lo stato del form iniziale - contenente campi vuoti o prepopolati con valori iniziali. Dopo che l'utente ha premuto il pulsante di invio, il server riceverà i dati del modulo con i valori del browser Web e dovrà convalidare le informazioni. Se il modulo contiene dati non validi, il server dovrebbe visualizzare nuovamente il modulo, questa volta con i dati immessi dall'utente nei campi e nei messaggi "validi" per descrivere il problema per i campi non validi. Una volta che il server riceve una richiesta con tutti i dati del modulo validi, può eseguire un'azione appropriata (ad esempio, salvare i dati, restituire il risultato di una ricerca, caricare un file, ecc.) E quindi avvisare l'utente.</p> + +<p>Come potete immaginare, la creazione dell'HTML, la convalida dei dati restituiti, la ri-visualizzazione dei dati inseriti con i rapporti di errore se necessario e l'esecuzione dell'operazione desiderata su dati validi possono richiedere un notevole sforzo per "avere ragione". Django rende tutto molto più semplice, eliminando parte del pesante codice ripetitivo.</p> + +<h2 id="Processo_di_Django_di_gestione_dei_form">Processo di Django di gestione dei form</h2> + +<p>La gestione dei form di Django utilizza tutte le stesse tecniche apprese in precedenti tutorial (per la visualizzazione di informazioni sui nostri models): la vista riceve una richiesta, esegue tutte le azioni richieste inclusa la lettura dei dati dai modelli, quindi genera e restituisce una pagina HTML ( da un modello, in cui passiamo un contesto contenente i dati da visualizzare). Ciò che rende le cose più complicate è che il server deve anche essere in grado di elaborare i dati forniti dall'utente e visualizzare nuovamente la pagina in caso di errori.</p> + +<p>Di seguito viene mostrato un diagramma di flusso del processo di gestione delle richieste di modulo da parte di Django, a partire da una richiesta per una pagina contenente un form (mostrato in verde).</p> + +<p><img alt="Updated form handling process doc." src="https://mdn.mozillademos.org/files/14205/Form%20Handling%20-%20Standard.png" style="display: block; height: 569px; margin: 0px auto; width: 800px;"></p> + +<p>Basandosi sul diagramma sopra, le cose che principalmente svolge Django nella gestione dei form sono:</p> + +<ol> + <li>Mostra il modulo predefinito la prima volta che viene richiesto dall'utente.</li> +</ol> + +<ul> + <li>Il form può contenere campi vuoti (ad es. Se stai creando un nuovo record), oppure può essere precompilato con valori iniziali (ad es. Se stai cambiando un record o hai valori iniziali predefiniti utili).</li> + <li>A questo punto, il form viene definito come non associato, poiché non è associato a nessun dato inserito dall'utente (sebbene possa avere valori iniziali).</li> +</ul> + +<ol> + <li>Riceve i dati da una richiesta di invio e li associa al modulo. + <ul> + <li>Collegare i dati al modulo significa che i dati inseriti dall'utente e gli eventuali errori sono disponibili quando è necessario visualizzare nuovamente il modulo.</li> + </ul> + </li> + <li>Pulisce e valida i dati. + <ul> + <li>La pulizia dei dati esegue la disinfezione dell'input (ad esempio rimuovendo i caratteri non validi che potrebbero essere utilizzati per inviare contenuto dannoso al server) e li converte in tipi coerenti di Python.</li> + <li>La convalida verifica che i valori siano appropriati per il campo (ad es. Sono nel giusto intervallo di date, non sono troppo corti o troppo lunghi, ecc.)</li> + </ul> + </li> + <li>Se i dati non sono validi, visualizza nuovamente il modulo, questa volta con tutti i valori e i messaggi di errore compilati dall'utente per i campi del problema.</li> + <li>Se tutti i dati sono validi, eseguire le azioni richieste (ad esempio, salvare i dati, inviare e-mail, restituire il risultato di una ricerca, caricare un file, ecc.)</li> + <li>Una volta completate tutte le azioni, reindirizza l'utente a un'altra pagina.</li> +</ol> + +<p>Django fornisce una serie di strumenti e approcci per aiutarti con le attività sopra descritte. La più fondamentale è la classe <code>Form</code>, che semplifica sia la generazione di moduli HTML che la pulizia / convalida dei dati. Nella prossima sezione, descriviamo come le form funzionano usando l'esempio pratico di una pagina per consentire ai bibliotecari di rinnovare i libri.</p> + +<div class="note"> +<p><strong>Note:</strong> Capire come si usa Form ti sarà d'aiuto quando discuteremo le classi di form più "di alto livello" di Django.</p> +</div> + +<h2 id="Modulo_di_rinnovo_del_libro_utilizzando_una_Form_e_funzione_vista">Modulo di rinnovo del libro utilizzando una Form e funzione vista</h2> + +<p>Successivamente, aggiungeremo una pagina per consentire ai bibliotecari di rinnovare i libri presi in prestito. Per fare ciò creeremo un modulo che consenta agli utenti di inserire un valore di data. Daremo il campo con un valore iniziale di 3 settimane rispetto alla data corrente (il normale periodo di prestito) e aggiungiamo alcune convalide per garantire che il bibliotecario non possa inserire una data nel passato o una data troppo lontana nel futuro. Quando è stata inserita una data valida, la scriveremo nel campo BookInstance.due_back del record corrente. L'esempio utilizzerà una vista basata sulle funzioni e una classe Form.</p> + +<p>Le seguenti sezioni spiegano come funzionano le form le modifiche da apportare al nostro progetto LocalLibrary in corso.</p> + +<h3 id="Form">Form</h3> + +<p>La classe Form è il cuore del sistema di gestione delle form di Django. Specifica i campi nel modulo, il loro layout, i widget di visualizzazione, le etichette, i valori iniziali, i valori validi e (una volta convalidati) i messaggi di errore associati ai campi non validi. La classe fornisce anche i metodi per eseguire il rendering stesso nei modelli utilizzando formati predefiniti (tabelle, elenchi, ecc.) O per ottenere il valore di qualsiasi elemento (abilitando il rendering manuale a grana fine).</p> + +<h4 id="Dichiarare_un_Form">Dichiarare un Form</h4> + +<p>La sintassi della dichiarazione per una form è molto simile a quella per la dichiarazione di un modello e condivide gli stessi tipi di campo (e alcuni parametri simili). Questo ha senso perché in entrambi i casi dobbiamo garantire che ogni campo gestisca i giusti tipi di dati, sia vincolato a dati validi e abbia una descrizione per la visualizzazione / documentazione. I dati del modulo sono memorizzati nel file forms.py dell'applicazione, all'interno della directory dell'applicazione. Crea e apri il file locallibrary / catalog / forms.py. Per creare un modulo, importiamo la libreria dei moduli, deriviamo dalla classe Form e dichiariamo i campi del modulo. Di seguito è riportata una classe di modulo molto semplice per il modulo di rinnovo del libro della biblioteca: aggiungi questo al nuovo file:</p> + +<pre class="brush: python">from django import forms + +class RenewBookForm(forms.Form): + renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).") +</pre> + +<h4 id="Form_fields">Form fields</h4> + +<p>In questo caso abbiamo un campo singolo <code><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#datefield">DateField</a></code> per inserire la data di rinnovo che renderizzerà in HTML con un valore vuoto, l'etichetta di default "Data di rinnovo:", e qualche utile testo di utilizzo: "Inserire una data tra ora e 4 settimane (predefinito 3 settimane)." Dato che nessuno degli altri argomenti opzionali è specificato, il campo accetterà le date usando il <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#django.forms.DateField.input_formats">input_formats</a>: YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), e sarà visualizzato con il widget standard <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#widget">widget</a>: <a href="https://docs.djangoproject.com/en/2.1/ref/forms/widgets/#django.forms.DateInput">DateInput</a>.</p> + +<p>Esistono molti altri tipi di campi form, che in gran parte riconoscerete dalla loro somiglianza con le classi di campo del modello equivalente: <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#booleanfield"><code>BooleanField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#charfield"><code>CharField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#choicefield"><code>ChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#typedchoicefield"><code>TypedChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#datefield"><code>DateField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#datetimefield"><code>DateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#decimalfield"><code>DecimalField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#durationfield"><code>DurationField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#emailfield"><code>EmailField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#filefield"><code>FileField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#filepathfield"><code>FilePathField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#floatfield"><code>FloatField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#imagefield"><code>ImageField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#integerfield"><code>IntegerField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#genericipaddressfield"><code>GenericIPAddressField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#multiplechoicefield"><code>MultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#typedmultiplechoicefield"><code>TypedMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#nullbooleanfield"><code>NullBooleanField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#regexfield"><code>RegexField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#slugfield"><code>SlugField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#timefield"><code>TimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#urlfield"><code>URLField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#uuidfield"><code>UUIDField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#combofield"><code>ComboField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#multivaluefield"><code>MultiValueField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#splitdatetimefield"><code>SplitDateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#modelmultiplechoicefield"><code>ModelMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#modelchoicefield"><code>ModelChoiceField</code></a>.</p> + +<p>Gli argomenti comuni alla maggior parte dei campi sono elencati di seguito (questi hanno valori predefiniti sensibili):</p> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#required">required</a>: Se <code>True</code>, il campo non può essere lasciato bianco o <code>None</code>. I campi sono obbligatori per default, quindi se impostiamo <code>required=False</code> autorizzeremo dei campi blank nel form.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#label">label</a>: L'etichetta da utilizzare quando si renderizza la pagina in HTML. Se la <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#label">label</a> non viene specificata, Django ne creerà uno dal nome del campo capitalizzando la prima lettera e sostituendo gli underscore con gli spazi (ad esempio la data di rinnovo).</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#label-suffix">label_suffix</a>: Di default i due punti vengono visualizzati dopo l'etichetta (ad esempio, data di rinnovo:). Questo argomento consente di specificare un suffisso diverso contenente altri caratteri.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#initial">initial</a>: Il valore iniziale per il campo quando viene visualizzato il modulo.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#widget">widget</a>: Il widget da mostrare.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#help-text">help_text</a> (come visto sopra): testo di aiuto addizionale da mostrare per spiegare l'uso di un campo del form.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#error-messages">error_messages</a>: Una lista di messaggi di errore per il campo. Puoi sovrascrivere tali messaggi coi tuoi se necessario.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#validators">validators</a>: una lista di funzioni da richiamare quando il campo viene validato.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#localize">localize</a>: Abilita la localizzazione nell'input dei dati del form. Vedere il link per maggiori dettagli.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#disabled">disabled</a>: Il campo viene mostrato ma non è possibile validarlo, se questo attributo è <code>True</code>. Il valore di default è <code>False</code>.</li> +</ul> + +<h4 id="Validazione">Validazione</h4> + +<p>Django offre numerosi posti dove puoi convalidare i tuoi dati. Il modo più semplice per convalidare un singolo campo è sovrascrivere il metodo clean_ <nomecampo> () per il campo che si desidera controllare. Quindi, ad esempio, possiamo effettuare una convalida richiedendo che i valori di renewal_date inseriti siano compresi tra ora e le 4 settimane future implementando clean_renewal_date () come mostrato di seguito.</p> + +<p>Aggiorniamo il file forms.py:</p> + +<pre class="brush: python"><strong>import datetime</strong> + +from django import forms +<strong>from django.core.exceptions import ValidationError +from django.utils.translation import ugettext_lazy as _ +</strong> +class RenewBookForm(forms.Form): + renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).") + +<strong> def clean_renewal_date(self): + data = self.cleaned_data['renewal_date'] + + # Check if a date is not in the past. + if data < datetime.date.today(): + raise ValidationError(_('Invalid date - renewal in past')) + + # Check if a date is in the allowed range (+4 weeks from today). + if data > datetime.date.today() + datetime.timedelta(weeks=4): + raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead')) + + # Remember to always return the cleaned data. + return data</strong></pre> + +<p>Ci sono due cose importanti da notare. Il primo è che otteniamo i nostri dati usando self.cleaned_data ['renewal_date'] e che restituiamo questi dati indipendentemente dal fatto che vengano modificati alla fine della funzione. Questo passaggio ci porta i dati "puliti" e disinfettati da input potenzialmente non sicuri utilizzando i validatori predefiniti e convertiti nel tipo standard corretto per i dati (in questo caso un oggetto datetime.datetime di Python).</p> + +<p>La seconda è che se un valore è al di fuori di quelli ammessi solleviamo un errore di validazione <code>ValidationError</code>, specificando il testo di errore che vogliamo mostrare nel forme se un errore di validazione si è verificato. L'esempio sopra inoltre incapsula il testo in una funzione di traduzione di Django (vedi <a href="https://docs.djangoproject.com/en/2.1/topics/i18n/translation/">Django's translation functions</a>) <code>ugettext_lazy()</code> (importata come <code>_()</code>), che è una good practice in caso tu voglia tradurre il sito successivamente.</p> + +<div class="note"> +<p><strong>Note:</strong> Esistono molti metodi per validare i form, consultare <a href="https://docs.djangoproject.com/en/2.1/ref/forms/validation/">Form and field validation</a> (Django docs). Per esempio, in alcuni casi in cui si hanno diversi campi che dipendono uno dall'altro si può sovrascrivere la funzione <a href="https://docs.djangoproject.com/en/2.1/ref/forms/api/#django.forms.Form.clean">Form.clean()</a> e nuovamente sollevare una <code>ValidationError</code>.</p> +</div> + +<p>Questo è tutto ciò di cui abbiamo bisogno per il form in questo esempio!</p> + +<h3 id="Configurazione_URL">Configurazione URL</h3> + +<p>Prima di creare la nostra vista, aggiungiamo una configurazione URL per la pagina dei rinnovi. Copia la seguente configurazione nella parte inferiore di locallibrary / catalog / urls.py.</p> + +<pre class="brush: python">urlpatterns += [ + path('book/<uuid:pk>/renew/', views.renew_book_librarian, name='renew-book-librarian'), +]</pre> + +<p>La configurazione URL reindirizzerà tutti gli URL con formato <strong>/catalog/book/<em><bookinstance id></em>/renew/</strong> alla funzione <code>renew_book_librarian()</code> in <strong>views.py</strong>, e manderà l'id della <code>BookInstance</code> come parametro con nome <code>pk</code>. Il pattern matcha solamente se <code>pk</code> è un dato <code>uuid</code> correttamente formattato.</p> + +<div class="note"> +<p><strong>Note</strong>: Possiamo nominare qualsiasi cosa ci piaccia dai nostri dati di URL acquisiti anzichè "pk" , perché abbiamo il controllo completo sulla funzione di visualizzazione (non stiamo usando una classe di vista di dettaglio generica che si aspetta parametri con un certo nome). Tuttavia, pk abbreviazione di "chiave primaria", è una convenzione ragionevole da usare!</p> +</div> + +<h3 id="Vista">Vista</h3> + +<p>Come discusso in <a href="#django_form_handling_process">Django form handling process</a>, la vista deve eseguire il rendering del modulo predefinito quando viene chiamato per la prima volta e quindi eseguire nuovamente il rendering con messaggi di errore se i dati non sono validi oppure elaborare i dati e reindirizzare a una nuova pagina se i dati sono validi. Per poter eseguire queste diverse azioni, la vista deve essere in grado di sapere se è stata richiamata per la prima volta per il rendering del modulo predefinito o un tempo successivo per convalidare i dati.</p> + +<p>Per i form che usano una <code>POST</code> per mandare infromazioni al server, il pattern più comune è fare in modo che sia la view ad eseguire i test verso la richiesta di <code>POST</code> (<code>if request.method == 'POST':</code>) identificare le richieste di convalida del modulo e GET (utilizzando un'altra condizione) per identificare la richiesta iniziale di creazione del modulo. Se si desidera inviare i dati utilizzando una richiesta GET, un approccio tipico per identificare se questa è la prima o successiva chiamata alla vista è leggere i dati del modulo (ad esempio, per leggere un valore nascosto nel modulo).</p> + +<p>Il processo di rinnovo del libro verrà scritto nel nostro database, quindi, per convenzione, utilizziamo l'approccio di richiesta POST. Il frammento di codice seguente mostra il modello (molto standard) per questo tipo di visualizzazione delle funzioni.</p> + +<pre class="brush: python">import datetime + +from django.shortcuts import render, get_object_or_404 +from django.http import HttpResponseRedirect +from django.urls import reverse + +from catalog.forms import RenewBookForm + +def renew_book_librarian(request, pk): + book_instance = get_object_or_404(BookInstance, pk=pk) + + # Se è una richiesta di tipo POST allora processa i dati della Form +<strong> if request.method == 'POST':</strong> + + # Crea un'istanza della form e la popola con i dati della richiesta (binding): + form = RenewBookForm(request.POST) + + # Controlla se la form è valida: + <strong>if form.is_valid():</strong> + # process the data in form.cleaned_data as required (here we just write it to the model due_back field) + book_instance.due_back = form.cleaned_data['renewal_date'] + book_instance.save() + + # reindirizza ad un nuovo URL: + return HttpResponseRedirect(reverse('all-borrowed') ) + + # Se la richiesta è GET o un altro metodo crea il form di default +<strong> else:</strong> + proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) + form = RenewBookForm(initial={'renewal_date': proposed_renewal_date}) + + context = { + 'form': form, + 'book_instance': book_instance, + } + + return render(request, 'catalog/book_renew_librarian.html', context)</pre> + +<p>Innanzitutto, importiamo il nostro form (RenewBookForm) e una serie di altri oggetti / metodi utili utilizzati nel corpo della funzione di visualizzazione:</p> + +<ul> + <li><code><a href="https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#get-object-or-404">get_object_or_404()</a></code>: Ritorna uno specifico oggetto da un modello basato sulla propria chiave primaria, e solleva un'eccezione <code>Http404</code> (not found) se il record non esiste. </li> + <li><code><a href="https://docs.djangoproject.com/en/2.1/ref/request-response/#django.http.HttpResponseRedirect">HttpResponseRedirect</a></code>: Questo crea un reindirizzamento verso un URL specificato (codice di stato HTTP 302).</li> + <li><code><a href="https://docs.djangoproject.com/en/2.1/ref/urlresolvers/#django.urls.reverse">reverse()</a></code>: Questo genera un URL da un nome di configurazione URL e un set di argomenti. È l'equivalente Python del tag url che abbiamo utilizzato nei nostri templates.</li> + <li><code><a href="https://docs.python.org/3/library/datetime.html">datetime</a></code>: Una libreria Python per manipolare date e ore.</li> +</ul> + +<p>Nella vista, per prima cosa utilizziamo l'argomento pk in get_object_or_404 () per ottenere l'attuale BookInstance (se questo non esiste, la vista verrà immediatamente chiusa e la pagina mostrerà un errore "non trovato"). Se questa non è una richiesta POST (gestita dalla clausola else), creiamo il form predefinito che passa un valore iniziale per il campo renewal_date (come mostrato in grassetto sotto, questo è 3 settimane dalla data corrente). </p> + +<pre class="brush: python"> book_instance = get_object_or_404(BookInstance, pk=pk) + + # Se la richiesta è GET o un altro metodo crea il form di default + else: + proposed_renewal_date = datetime.date.today() + datetime.timedelta(<strong>weeks=3</strong>) + <strong>form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})</strong> + + context = { + 'form': form, + 'book_instance': book_instance, + } + + return render(request, 'catalog/book_renew_librarian.html', context)</pre> + +<p>Dopo aver creato il modulo, chiamiamo render() per creare la pagina HTML, specificando il modello e un contesto che contiene il nostro form. In questo caso, il contesto contiene anche il nostro BookInstance, che utilizzeremo nel modello per fornire informazioni sul libro che stiamo rinnovando.</p> + +<p>Tuttavia, se si tratta di una richiesta POST, allora creiamo il nostro oggetto form e lo popoliamo con i dati della richiesta. Questo processo è chiamato "binding" e ci consente di convalidare il form. Controlliamo quindi se il form è valido, eseguiamo tutto il codice di convalida su tutti i campi, compreso il codice generico per verificare che il nostro campo data sia effettivamente una data valida e la funzione clean_renewal_date() del nostro from specifico per verificare se la data è nella giusta fascia.</p> + +<pre class="brush: python"> # If this is a POST request then process the Form data + if request.method == 'POST': + + # Create a form instance and populate it with data from the request (binding): +<strong> form = RenewBookForm(request.POST)</strong> + + # Check if the form is valid: + if form.is_valid(): + # process the data in form.cleaned_data as required (here we just write it to the model due_back field) + book_instance.due_back = form.cleaned_data['renewal_date'] + book_instance.save() + + # redirect to a new URL: + return HttpResponseRedirect(reverse('all-borrowed') ) + + context = { + 'form': form, + 'book_instance': book_instance, + } + + return render(request, 'catalog/book_renew_librarian.html', context)</pre> + +<p>Se il form non è valido, viene richiamata nuovamente la funzione <code>render()</code>, ma questa volta il form viene passato al contesto con dei messaggi di errore. </p> + +<p>Se il form è valido, allora possiamo iniziare ad utilizzare i dati, accedendovi tramite l'attributo <code>form.cleaned_data</code> (ad es. <code>data = form.cleaned_data['renewal_date']</code>). Qui salviamo semplicemente i dati nel valore due_back dell'oggetto BookInstance associato.</p> + +<div class="warning"> +<p><strong>Importante</strong>: Anche se è possibile accedere ai dati del form direttamente tramite la richiesta, per esempio utilizzando <code>request.POST['renewal_date']</code> o <code>request.GET['renewal_date']</code> se invece stiamo utilizzando una richiesta GET, Ciò NON è raccomandabile. I dati ripuliti, sanificati, e validati, vengono convertiti in tipi adatti a Python.</p> +</div> + +<p>Il passo finale nella manipolazione dei formè la direzione verso un'altra pagina, generalmente una "success" page. In questo caso utilizziamo <code>HttpResponseRedirect</code> e <code>reverse()</code> per ridirezionare alla vista nominata "<code>all-borrowed'</code> (creata come "challenge" in <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a>). Se non l'hai creata, ridireziona alla home page con URL '/').</p> + +<p>Questo è tutto ciò che ci serviva per il per la manipolazione dei form, ma dobbiamo ancora restringere gli accessi dei bibliotecari. Probabilmente dovremmo creare un nuovo permesso sull'oggetto <code>BookInstance</code> ("<code>can_renew</code>"), ma, per mantenere le cose più semplici, useremo solo il decoratore di funzione <code>@permission_required</code> con il nostro permesso esistente <code>can_mark_returned.</code></p> + +<p>La vista finale è quindi come di seguito. Copiare questo in fondo a <strong>locallibrary/catalog/views.py</strong>.</p> + +<pre><strong>import datetime + +from django.contrib.auth.decorators import permission_required</strong> +from django.shortcuts import get_object_or_404 +from django.http import HttpResponseRedirect +from django.urls import reverse + +from catalog.forms import RenewBookForm + +<strong>@permission_required('catalog.can_mark_returned')</strong> +def renew_book_librarian(request, pk): + """View function for renewing a specific BookInstance by librarian.""" + book_instance = get_object_or_404(BookInstance, pk=pk) + + # If this is a POST request then process the Form data + if request.method == 'POST': + + # Create a form instance and populate it with data from the request (binding): + form = RenewBookForm(request.POST) + + # Check if the form is valid: + if form.is_valid(): + # process the data in form.cleaned_data as required (here we just write it to the model due_back field) + book_instance.due_back = form.cleaned_data['renewal_date'] + book_instance.save() + + # redirect to a new URL: + return HttpResponseRedirect(reverse('all-borrowed') ) + + # If this is a GET (or any other method) create the default form. + else: + proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) + form = RenewBookForm(initial={'renewal_date': proposed_renewal_date}) + + context = { + 'form': form, + 'book_instance': book_instance, + } + + return render(request, 'catalog/book_renew_librarian.html', context) +</pre> + +<h3 id="Il_template">Il template</h3> + +<p>Creiamo il template referenziato nella view (<strong>/catalog/templates/catalog/book_renew_librarian.html</strong>) e copiamo il codice sotto:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <h1>Renew: \{{ book_instance.book.title }}</h1> + <p>Borrower: \{{ book_instance.borrower }}</p> + <p{% if book_instance.is_overdue %} class="text-danger"{% endif %}>Due date: \{{ book_instance.due_back }}</p> + +<strong> <form action="" method="post"> + {% csrf_token %} + <table> + \{{ form.as_table }} + </table> + <input type="submit" value="Submit"> + </form></strong> +{% endblock %}</pre> + +<p>La maggior parte di questo sarà completamente familiare dai tutorial precedenti. Estendiamo il modello di base e quindi ridefiniamo il blocco del contenuto. Siamo in grado di fare riferimento a \{{book_instance}} (e alle sue variabili) perché è stato passato all'oggetto contesto nella funzione render (), e le possiamo usare per elencare il titolo del libro, il mutuatario e la data di scadenza originale.</p> + +<p>Il codice del form è relativamente semplice. Per prima cosa dichiariamo i tag del form, specificando dove deve essere inviato il form (action) e il metodo per inviare i dati (in questo caso un "POST HTTP") - se si richiama la panoramica dei moduli HTML nella parte superiore della pagina, un'azione vuota come mostrato, significa che i dati del modulo saranno postati all'URL attuale della pagina (che è ciò che vogliamo!). All'interno dei tag, definiamo l'input di invio, che un utente può premere per inviare i dati. Il {% csrf_token%} aggiunto appena dentro i tag del modulo fa parte della protezione dalle contraffazioni di Django.</p> + +<div class="note"> +<p><strong>Note:</strong> Aggiungi il {% csrf_token%} a ogni modello Django che crei che utilizza POST per inviare i dati. Ciò ridurrà la possibilità che le form vengano corrotte da utenti malintenzionati</p> +</div> + +<p>Tutto ciò che rimane è la variabile di template \{{form}}, che abbiamo passato al template nel dizionario di contesto. Forse non sorprendentemente, se usato come mostrato, fornisce il rendering predefinito di tutti i campi del modulo, incluse le loro etichette, i widget e il testo della guida: il rendering è come mostrato di seguito:</p> + +<pre class="brush: html"><tr> + <th><label for="id_renewal_date">Renewal date:</label></th> + <td> + <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required> + <br> + <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span> + </td> +</tr> +</pre> + +<div class="note"> +<p><strong>Note:</strong> Forse non è ovvio perché abbiamo solo un campo, ma, per impostazione predefinita, ogni campo è definito nella propria riga della tabella. Questo stesso rendering viene fornito se si fa riferimento alla variabile del template \{{form.as_table}}.</p> +</div> + +<p>Se dovessi inserire una data non valida, avresti anche un elenco degli errori visualizzati nella pagina (mostrati in grassetto sotto).</p> + +<pre class="brush: html"><tr> + <th><label for="id_renewal_date">Renewal date:</label></th> + <td> +<strong> <ul class="errorlist"> + <li>Invalid date - renewal in past</li> + </ul></strong> + <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required> + <br> + <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span> + </td> +</tr></pre> + +<h4 id="Altri_modi_di_usare_le_variabili_template">Altri modi di usare le variabili template</h4> + +<p>Utilizzando<code>\{{ form.as_table }}</code> come mostrato sopra, ogni campo viene renderizzato come riga di una tabella. Puoi anche renderizzare ogni campo come elemento di una lista (usando <code>\{{ form.as_ul }}</code> ) o come un paragrafo (<code>\{{ form.as_p }}</code>).</p> + +<p>È anche possibile avere il controllo completo sul rendering di ogni parte del form, indicizzando le sue proprietà mediante la notazione dei punti. Ad esempio, possiamo accedere a un numero di elementi separati per il nostro campo renewal_date:</p> + +<ul> + <li><code>\{{ form.renewal_date }}:</code> L'intero campo.</li> + <li><code>\{{ form.renewal_date.errors }}</code>: La lista degli errori.</li> + <li><code>\{{ form.renewal_date.id_for_label }}</code>: L'id della label.</li> + <li><code>\{{ form.renewal_date.help_text }}</code>: il testo di aiuto del campo.</li> +</ul> + +<p>Per ulteriori esempi su come eseguire il rendering manuale dei form nei modelli e ciclare dinamicamente sui campi del modello, vedere <a href="https://docs.djangoproject.com/en/2.1/topics/forms/#rendering-fields-manually">Working with forms > Rendering fields manually</a> (Django docs).</p> + +<h3 id="Testare_la_pagina">Testare la pagina</h3> + +<p>Se hai accettato la sfida proposta in <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a> dovresti avere una lista di libri in prestito nella libreria, che saranno visibili solamente allo staff. Possiamo aggiungere un link alla nostra pagina di rinnovo per ogni elemento utilizzando il codice template sotto.</p> + +<pre class="brush: html">{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}</pre> + +<div class="note"> +<p><strong>Note</strong>: Remember that your test login will need to have the permission "<code>catalog.can_mark_returned</code>" in order to access the renew book page (perhaps use your superuser account).</p> +</div> + +<p>In alternativa, puoi costruire manualmente un URL di prova come questo: http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/ (è possibile ottenere un id valido per le librerie navigando a una pagina dei dettagli del libro nella libreria, e copiare il campo id).</p> + +<h3 id="Come_appare">Come appare?</h3> + +<p>Se hai successo, il form di default sarà così:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14209/forms_example_renew_default.png" style="border-style: solid; border-width: 1px; display: block; height: 292px; margin: 0px auto; width: 680px;"></p> + +<p>The form with an invalid value entered will look like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14211/forms_example_renew_invalid.png" style="border-style: solid; border-width: 1px; display: block; height: 290px; margin: 0px auto; width: 658px;"></p> + +<p>The list of all books with renew links will look like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14207/forms_example_renew_allbooks.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 613px;"></p> + +<h2 id="ModelForms">ModelForms</h2> + +<p>La creazione di una classe Form utilizzando l'approccio descritto sopra è molto flessibile, consente infatti di creare qualsiasi tipo di pagina di form che ti piace e associarla a qualsiasi modello o modello. Tuttavia, se hai solo bisogno di un modulo per mappare i campi di un singolo modello, il tuo modello definirà già la maggior parte delle informazioni necessarie nel tuo modulo: campi, etichette, testo della guida, ecc. Invece di ricreare le definizioni del modello nel tuo forma, è più facile usare la classe helper ModelForm per creare il modulo dal tuo modello. Questo ModelForm può quindi essere utilizzato all'interno delle visualizzazioni esattamente nello stesso modo di un modulo ordinario.</p> + +<p>Un modello di base <code>ModelForm</code> contenente gli stessi campi del nostro <code>RenewBookForm</code> è mostrato sotto. Tutto ciò che devi fare è aggiungere una classe <code>class Meta</code> con il modello associato (<code>BookInstance</code>) e un elenco dei campi del modello da includere nel modulo (è possibile includere tutti i campi utilizzando <code>fields = '__all__',</code> oppure è possibile utilizzare <code>exclude </code>(anziché i campi) per specificare i campi da non includere nel modello).</p> + +<pre class="brush: python">from django.forms import ModelForm + +from catalog.models import BookInstance + +class RenewBookModelForm(ModelForm): +<strong> class Meta: + model = BookInstance + fields = ['due_back']</strong> +</pre> + +<div class="note"> +<p><strong>Note</strong>: Questo potrebbe non sembrare tutto molto più semplice del semplice utilizzo di un modulo (e non è in questo caso, perché abbiamo solo un campo). Tuttavia, se hai molti campi, puoi ridurre la quantità di codice in modo abbastanza significativo!</p> +</div> + +<p>Il resto delle informazioni proviene dalle definizioni del campo del modello (ad esempio etichette, widget, testo della guida, messaggi di errore). Se questi non sono corretti, possiamo sostituirli nella nostra classe Meta, specificando un dizionario contenente il campo da modificare e il suo nuovo valore. Ad esempio, in questo modulo potremmo volere un'etichetta per il nostro campo di "Data di rinnovo" (piuttosto che l'impostazione predefinita in base al nome del campo: "Due Back"), e vogliamo anche che il nostro testo di aiuto sia specifico per questo caso d'uso. La Meta sotto mostra come sovrascrivere questi campi, e puoi impostare allo stesso modo widget e messaggi_errore se i valori predefiniti non sono sufficienti.</p> + +<pre class="brush: python">class Meta: + model = BookInstance + fields = ['due_back'] +<strong> labels = {'due_back': _('New renewal date')} + help_texts = {'due_back</strong><strong>': _('Enter a date between now and 4 weeks (default 3).')} </strong> +</pre> + +<p>Per aggiungere la convalida è possibile utilizzare lo stesso approccio di un modulo normale: si definisce una funzione denominata <code>clean_field_name () </code>e si generano eccezioni <code>ValidationError </code>per valori non validi. L'unica differenza rispetto alla nostra forma originale è che il campo del modello è denominato <code>due_back </code>e non "<code>renewal_date</code>". Questa modifica è necessaria poiché il campo corrispondente in <code>BookInstance </code>è chiamato <code>due_back</code>.</p> + +<pre class="brush: python">from django.forms import ModelForm + +from catalog.models import BookInstance + +class RenewBookModelForm(ModelForm): +<strong> def clean_due_back(self): + data = self.cleaned_data['due_back</strong><strong>'] + + # Controlla se la data non è passata. + if data < datetime.date.today(): + raise ValidationError(_('Invalid date - renewal in past')) + + <strong># Controlla se una data è nell'intervallo consentito (+4 settimane da oggi).</strong> + if data > datetime.date.today() + datetime.timedelta(weeks=4): + raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead')) + + # Ricorda di restituire sempre la data pulita. + return data +</strong> + class Meta: + model = BookInstance + fields = ['due_back'] + labels = {'due_back': _('Renewal date')} + help_texts = {'due_back': _('Enter a date between now and 4 weeks (default 3).')} +</pre> + +<p>La classe <code>RenewBookModelForm</code> <code>adesso funziona come la nostra originale RenewBookForm</code>. Puoi importarla e usarla ovunque attualmente usi <code>RenewBookForm</code> a condizione che si aggiorni anche il nome della variabile corrispondente da <code>renewal_date</code> a <code>due_back</code> come nella dichiarazione della seconda Form: <code>RenewBookModelForm(initial={'due_back': proposed_renewal_date}</code>.</p> + +<h2 id="Generic_editing_views">Generic editing views</h2> + +<p>The form handling algorithm we used in our function view example above represents an extremely common pattern in form editing views. Django abstracts much of this "boilerplate" for you, by creating <a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/">generic editing views</a> for creating, editing, and deleting views based on models. Not only do these handle the "view" behavior, but they automatically create the form class (a <code>ModelForm</code>) for you from the model.</p> + +<div class="note"> +<p><strong>Note: </strong>In addition to the editing views described here, there is also a <a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/#formview">FormView</a> class, which lies somewhere between our function view and the other generic views in terms of "flexibility" vs "coding effort". Using <code>FormView</code>, you still need to create your <code>Form</code>, but you don't have to implement all of the standard form-handling patterns. Instead, you just have to provide an implementation of the function that will be called once the submitted is known to be valid.</p> +</div> + +<p>In this section we're going to use generic editing views to create pages to add functionality to create, edit, and delete <code>Author</code> records from our library — effectively providing a basic reimplementation of parts of the Admin site (this could be useful if you need to offer admin functionality in a more flexible way that can be provided by the admin site).</p> + +<h3 id="Views">Views</h3> + +<p>Open the views file (<strong>locallibrary/catalog/views.py</strong>) and append the following code block to the bottom of it:</p> + +<pre class="brush: python">from django.views.generic.edit import CreateView, UpdateView, DeleteView +from django.urls import reverse_lazy + +from catalog.models import Author + +class AuthorCreate(CreateView): + model = Author + fields = '__all__' + initial = {'date_of_death': '05/01/2018'} + +class AuthorUpdate(UpdateView): + model = Author + fields = ['first_name', 'last_name', 'date_of_birth', 'date_of_death'] + +class AuthorDelete(DeleteView): + model = Author + success_url = reverse_lazy('authors')</pre> + +<p>As you can see, to create, update, or delete the views you need to derive from <code>CreateView</code>, <code>UpdateView</code>, and <code>DeleteView</code> (respectively) and then define the associated model.</p> + +<p>For the "create" and "update" cases you also need to specify the fields to display in the form (using the same syntax as for <code>ModelForm</code>). In this case, we show both the syntax to display "all" fields and how you can list them individually. You can also specify initial values for each of the fields using a dictionary of <em>field_name</em>/<em>value</em> pairs (here we arbitrarily set the date of death for demonstration purposes — you might want to remove that!). By default, these views will redirect on success to a page displaying the newly created/edited model item, which in our case will be the author detail view we created in a previous tutorial. You can specify an alternative redirect location by explicitly declaring parameter <code>success_url</code> (as done for the <code>AuthorDelete</code> class).</p> + +<p>The <code>AuthorDelete</code> class doesn't need to display any of the fields, so these don't need to be specified. You do however need to specify the <code>success_url</code>, because there is no obvious default value for Django to use. In this case, we use the <code><a href="https://docs.djangoproject.com/en/2.1/ref/urlresolvers/#reverse-lazy">reverse_lazy()</a></code> function to redirect to our author list after an author has been deleted — <code>reverse_lazy()</code> is a lazily executed version of <code>reverse()</code>, used here because we're providing a URL to a class-based view attribute.</p> + +<h3 id="Templates">Templates</h3> + +<p>The "create" and "update" views use the same template by default, which will be named after your model: <em>model_name</em><strong>_form.html</strong> (you can change the suffix to something other than <strong>_form</strong> using the <code>template_name_suffix</code> field in your view, e.g. <code>template_name_suffix = '_other_suffix'</code>)</p> + +<p>Create the template file <strong>locallibrary/catalog/templates/catalog/author_form.html</strong> and copy in the text below.</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <form action="" method="post"> + {% csrf_token %} + <table> + \{{ form.as_table }} + </table> + <input type="submit" value="Submit"> + </form> +{% endblock %}</pre> + +<p>This is similar to our previous forms and renders the fields using a table. Note also how again we declare the <code>{% csrf_token %}</code> to ensure that our forms are resistant to CSRF attacks.</p> + +<p>The "delete" view expects to find a template named with the format <em>model_name</em><strong>_confirm_delete.html</strong> (again, you can change the suffix using <code>template_name_suffix</code> in your view). Create the template file <strong>locallibrary/catalog/templates/catalog/author_confirm_delete</strong><strong>.html</strong> and copy in the text below.</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + +<h1>Delete Author</h1> + +<p>Are you sure you want to delete the author: \{{ author }}?</p> + +<form action="" method="POST"> + {% csrf_token %} + <input type="submit" value="Yes, delete."> +</form> + +{% endblock %} +</pre> + +<h3 id="URL_configurations">URL configurations</h3> + +<p>Open your URL configuration file (<strong>locallibrary/catalog/urls.py</strong>) and add the following configuration to the bottom of the file:</p> + +<pre class="brush: python">urlpatterns += [ + path('author/create/', views.AuthorCreate.as_view(), name='author_create'), + path('author/<int:pk>/update/', views.AuthorUpdate.as_view(), name='author_update'), + path('author/<int:pk>/delete/', views.AuthorDelete.as_view(), name='author_delete'), +]</pre> + +<p>There is nothing particularly new here! You can see that the views are classes, and must hence be called via <code>.as_view()</code>, and you should be able to recognize the URL patterns in each case. We must use <code>pk</code> as the name for our captured primary key value, as this is the parameter name expected by the view classes.</p> + +<p>The author create, update, and delete pages are now ready to test (we won't bother hooking them into the site sidebar in this case, although you can do so if you wish).</p> + +<div class="note"> +<p><strong>Note</strong>: Observant users will have noticed that we didn't do anything to prevent unauthorized users from accessing the pages! We leave that as an exercise for you (hint: you could use the <code>PermissionRequiredMixin</code> and either create a new permission or reuse our <code>can_mark_returned</code> permission).</p> +</div> + +<h3 id="Testing_the_page">Testing the page</h3> + +<p>First, log in to the site with an account that has whatever permissions you decided are needed to access the author editing pages.</p> + +<p>Then navigate to the author create page: <a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a>, which should look like the screenshot below.</p> + +<p><img alt="Form Example: Create Author" src="https://mdn.mozillademos.org/files/14223/forms_example_create_author.png" style="border-style: solid; border-width: 1px; display: block; height: 184px; margin: 0px auto; width: 645px;"></p> + +<p>Enter values for the fields and then press <strong>Submit</strong> to save the author record. You should now be taken to a detail view for your new author, with a URL of something like <em>http://127.0.0.1:8000/catalog/author/10</em>.</p> + +<p>You can test editing records by appending <em>/update/</em> to the end of the detail view URL (e.g. <em>http://127.0.0.1:8000/catalog/author/10/update/</em>) — we don't show a screenshot, because it looks just like the "create" page!</p> + +<p>Finally, we can delete the page by appending delete to the end of the author detail-view URL (e.g. <em>http://127.0.0.1:8000/catalog/author/10/delete/</em>). Django should display the delete page shown below. Press <strong>Yes, delete.</strong> to remove the record and be taken to the list of all authors.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14221/forms_example_delete_author.png" style="border-style: solid; border-width: 1px; display: block; height: 194px; margin: 0px auto; width: 561px;"></p> + + + +<h2 id="Challenge_yourself">Challenge yourself</h2> + +<p>Create some forms to create, edit, and delete <code>Book</code> records. You can use exactly the same structure as for <code>Authors</code>. If your <strong>book_form.html</strong> template is just a copy-renamed version of the <strong>author_form.html</strong> template, then the new "create book" page will look like the screenshot below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14225/forms_example_create_book.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 595px;"></p> + +<ul> +</ul> + +<h2 id="Summary">Summary</h2> + +<p>Creating and handling forms can be a complicated process! Django makes it much easier by providing programmatic mechanisms to declare, render, and validate forms. Furthermore, Django provides generic form editing views that can do <em>almost all</em> the work to define pages that can create, edit, and delete records associated with a single model instance.</p> + +<p>There is a lot more that can be done with forms (check out our See also list below), but you should now understand how to add basic forms and form-handling code to your own websites.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/forms/">Working with forms</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial04/#write-a-simple-form">Writing your first Django app, part 4 > Writing a simple form</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/api/">The Forms API</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/">Form fields</a> (Django docs) </li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/validation/">Form and field validation</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-editing/">Form handling with class-based views</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/forms/modelforms/">Creating forms from models</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/">Generic editing views</a> (Django docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</p> + + + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/it/learn/server-side/django/generic_views/index.html b/files/it/learn/server-side/django/generic_views/index.html new file mode 100644 index 0000000000..a59f2046f1 --- /dev/null +++ b/files/it/learn/server-side/django/generic_views/index.html @@ -0,0 +1,626 @@ +--- +title: 'Django Tutorial Part 6: Generic list and detail views' +slug: Learn/Server-side/Django/Generic_views +tags: + - Template + - Tutorial + - View + - django + - django view + - imparare + - inizio + - template django + - views + - viste django +translation_of: Learn/Server-side/Django/Generic_views +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</div> + +<p class="summary">Questo tutorial estenderà il nostro sito <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, aggiungendo pagine di elenco e pagine di dettaglio per libri e autori. Qui apprenderemo le viste generiche basate su classi e mostreremo come possono ridurre la quantità di codice che devi scrivere per casi di uso comune. Passeremo inoltre alla gestione degli URL in maggiore dettaglio, mostrando come eseguire la corrispondenza di base dei pattern.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Completare tutti i tutorial precedenti, incluso <a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivi:</th> + <td>Comprendere dove e come utilizzare viste generiche basate su classi e come estrarre modelli dagli URL e passare le informazioni alle viste.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>In questo tutorial completeremo la prima versione del sito Web LocalLibrary aggiungendo pagine di elenco e dettagli per libri e autori (o per essere più precisi, ti mostreremo come implementare le pagine del libro e ti guideremo nella creazione dellle pagine dell'autore in modo che possa farle tu stesso!)</p> + +<p>Il processo è simile alla creazione della pagina indice, che abbiamo mostrato nel precedente tutorial. Dovremo comunque creare mappe URL, viste e template. La differenza principale è che per le pagine di dettaglio avremo la sfida aggiuntiva di estrarre le informazioni dai pattern nell'URL e passarle alla view. Per queste pagine, mostreremo un tipo di view completamente diverso: view di elenco e view di dettaglio generiche e basate su classi. Queste possono ridurre in modo significativo la quantità di codice necessario per la view, semplificandone la scrittura e la manutenzione.</p> + +<p>La parte finale del tutorial mostrerà come impaginare i dati quando si utilizzano view generiche di elenco basate su classi.</p> + +<h2 id="Pagina_lista_di_libri">Pagina lista di libri</h2> + +<p>Nella pagina dell'elenco dei libri verrà visualizzato un elenco di tutti i record di libri disponibili nella biblioteca, a cui è possibile accedere utilizzando l'URL: <code>catalog/books/</code>. La pagina mostrerà un titolo e un autore per ogni record, con il titolo che è un collegamento ipertestuale alla relativa pagina dei dettagli del libro. La pagina avrà la stessa struttura e la stessa navigazione di tutte le altre pagine del sito e, pertanto, possiamo estendere il template di base (<strong>base_generic.html</strong>).</p> + +<h3 id="URL_mapping">URL mapping</h3> + +<p>Apri <strong>/catalog/urls.py</strong> e copia la riga in grassetto sotto. Come per la pagina index, la funzione <code>path()</code> definisce un pattern da matchare con l' URL (<strong>'books/'</strong>), una funzione di view che verrà richiamata se l' URL matcha (<code>views.BookListView.as_view()</code>), e un nome per questa particolare mappatura.</p> + +<pre class="brush: python">urlpatterns = [ + path('', views.index, name='index'), +<strong> </strong>path<strong>('books/', views.BookListView.as_view(), name='books'),</strong> +]</pre> + +<p>Come discusso nel precedente tutorial, l'URL deve avere già matchato <code>/catalog</code>, quindi la view sarà richiamata per l'URL: <code>/catalog/books/</code>.</p> + +<p>La funzione view ha un formato diverso rispetto a prima - questo perché questa vista verrà effettivamente implementata come una classe. Noi erediteremo da una funzione di visualizzazione generica esistente che già fa la maggior parte di ciò che vogliamo, invece di scriverla noi stessi daccapo.</p> + +<p>Per le view class-based di Django, si accede a una funzione view appropriata chiamando il metodo di classe <code>as_view()</code>. Questo fa tutto il lavoro necessario per creare un'istanza della classe e assicurarsi che i giusti metodi handler vengano chiamati per le richieste HTTP in arrivo.</p> + +<h3 id="Viste_(class-based)">Viste (class-based)</h3> + +<p>Potremmo facilmente scrivere la view dell'elenco dei libri come una funzione regolare (proprio come la nostra precedente vista indice), che interrogherebbe il database cercando tutti i libri e quindi chiamerebbe <code>render()</code> per passare l'elenco a un template specificato. Invece, utilizzeremo una view elenco generica basata su classi (<code>ListView</code>) — una classe che eredita da una vista esistente. Poiché la vista generica implementa già la maggior parte delle funzionalità di cui abbiamo bisogno e segue la best practice di Django, saremo in grado di creare una vista elenco più robusta con meno codice, meno ripetizioni e, in definitiva, meno manutenzione.</p> + +<p>Apri <strong>catalog/views.py</strong>, e copia il seguente codice nel file:</p> + +<pre class="brush: python">from django.views import generic + +class BookListView(generic.ListView): + model = Book</pre> + +<p>Ecco fatto! la list view generica effettuerà una query al database per prendere tutti i record per lo specifico model (<code>Book</code>) poi effettuerà un render tramite il template in <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> che creeremo sotto. Dentro al template puoi accedere alla lista dei libri con la variabile <code>object_list</code> OR <code>book_list</code> (cioè, genericamente "<code><em>the_model_name</em>_list</code>").</p> + +<div class="note"> +<p><strong>Nota</strong>: Questo percorso scomodo per la posizione del template non è un errore di stampa: le view generiche cercano i template in <code>/<em>application_name</em>/<em>the_model_name</em>_list.html</code> (<code>catalog/book_list.html</code> in questo caso) dentro l'applicazione <code>/<em>application_name</em>/templates/</code> nella directory (<code>/catalog/templates/)</code>.</p> +</div> + +<p>È possibile aggiungere attributi per modificare il comportamento predefinito sopra. Ad esempio, è possibile specificare un altro file template se è necessario disporre di più viste che utilizzano questo stesso model oppure si potrebbe voler utilizzare un dievrso nome di variabile di template se <code>book_list</code> non è intuitivo per il proprio specifico caso d'uso del template. Probabilmente la variante più utile è quella di modificare/filtrare il sottoinsieme di risultati che vengono restituiti, quindi, invece di elencare tutti i libri, potresti elencare i primi 5 libri letti da altri utenti.</p> + +<pre class="brush: python">class BookListView(generic.ListView): + model = Book + context_object_name = 'my_book_list' # your own name for the list as a template variable + queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war + template_name = 'books/my_arbitrary_template_name_list.html' # Specify your own template name/location</pre> + +<h4 id="Override_dei_metodi_nelle_viste_class-based">Override dei metodi nelle viste class-based</h4> + +<p>Anche se non è necessario farlo qui, puoi anche sovrascrivere alcuni dei metodi di classe.</p> + +<p>Possiamo, per esempio, sovrascrivere <code>get_queryset()</code> per modificare la lista di record restituiti. Questa metodologia è molto più flessibile rispetto all'attributo <code>queryset</code> come abbiamo fatto nel precedente frammento di codice (sebbene in questo caso non ci sia alcun beneficio reale):</p> + +<pre class="brush: python">class BookListView(generic.ListView): + model = Book + + def get_queryset(self): + return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war +</pre> + +<p>Possiamo anche sovrascrivere <code>get_context_data()</code> per passare altre variabili addizionali di context al template (es. la lista di libri è passata per default). Il frammento sotto mostra come aggiungere una variabile "<code>some_data</code>" al context (sarà quindi disponibile come variabile del template).</p> + +<pre class="brush: python">class BookListView(generic.ListView): + model = Book + + def get_context_data(self, **kwargs): + # Call the base implementation first to get the context + context = super(BookListView, self).get_context_data(**kwargs) + # Create any data and add it to the context + context['some_data'] = 'This is just some data' + return context</pre> + +<p>Quando si esegue questa operazione è importante seguire lo schema usato sopra:</p> + +<ul> + <li>Per prima cosa prendi il contesto esistente dalla nostra superclasse.</li> + <li>Quindi aggiungi le tue nuove informazioni di contesto.</li> + <li>Quindi restituisci il nuovo contesto (aggiornato).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Leggi <a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (Django docs) per vedere molti altri esempi di cosa puoi fare.</p> +</div> + +<h3 id="Creare_List_View_template">Creare List View template</h3> + +<p>Crea il file HTML <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> e copia il testo sotto. Come discusso sopra, questo è il file predefinito per un template previsto dalla vista elenco generica basata su classi (per un modello denominato <code>Book</code> in un'applicazione denominata <code>catalog</code>)</p> + +<p>I template per le view generiche sono come qualsiasi altro template (anche se ovviamente il contesto/informazioni passate al template possono differire). Come con il nostro template di <em>index</em>, estendiamo il nostro template di base nella prima riga e poi sostituiamo il blocco denominato <code>content</code>.</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <h1>Book List</h1> + <strong>{% if book_list %}</strong> + <ul> + {% for book in book_list %} + <li> + <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) + </li> + {% endfor %} + </ul> + <strong>{% else %}</strong> + <p>There are no books in the library.</p> + <strong>{% endif %} </strong> +{% endblock %}</pre> + +<p>La view passa il contesto (elenco di libri) di default con <code>object_list</code> e <code>book_list</code> come alias; in ogni caso funzionerà.</p> + +<h4 id="Esecuzione_condizionale">Esecuzione condizionale</h4> + +<p>Usiamo i tag template <code><a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if">if</a></code>, <code>else</code>, ed <code>endif</code> per controllare se la <code>book_list</code> è stata definita e non è vuota. Se <code>book_list</code> è vuota, allora la clausola <code>else</code> mostra un testo alternativo in cui spiega che non sono presenti record da elencare. Se <code>book_list</code> non è vuota, allora iteriamo sulla lista di libri.</p> + +<pre class="brush: html"><strong>{% if book_list %}</strong> + <!-- code here to list the books --> +<strong>{% else %}</strong> + <p>There are no books in the library.</p> +<strong>{% endif %}</strong> +</pre> + +<p>La condizione sopra fa il test su un'unica condizione, ma si possono effettuare ulteriori test e gestire ulteriori casi, per testare condizioni addizionali si può usare ad esempio il tag <code>elif </code>(es. <code>{% elif var2 %}</code>). Per maggiori informazioni sugli operatori condizionali consultare: <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if">if</a>, <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifequal-and-ifnotequal">ifequal/ifnotequal</a>, <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifchanged">ifchanged</a> in <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins">Built-in template tags and filters</a> (Django Docs).</p> + +<h4 id="Cicli_for">Cicli for</h4> + +<p>Il template utilizza i tag <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for">for</a> <code>endfor</code> per ciclare la lista di libri, come sotto. Ogni iterazione popola la variabile di template <code>book</code> con le informazioni per l'elemento corrente della lista.</p> + +<pre class="brush: html">{% for <strong>book</strong> in book_list %} + <li> <!-- code here get information from each <strong>book</strong> item --> </li> +{% endfor %} +</pre> + +<p>Anche se non usato qui, all'interno del loop Django creerà anche altre variabili che puoi usare per tracciare l'iterazione. Ad esempio, è possibile testare la variabile <code>forloop.last</code> per eseguire l'elaborazione condizionale l'ultima volta che viene eseguito il ciclo.</p> + +<h4 id="Accedere_alle_variabili">Accedere alle variabili</h4> + +<p>Il codice all'interno del ciclo crea un item di elenco per ogni libro che mostra sia il titolo (come collegamento alla vista dei dettagli ancora da creare) sia l'autore.</p> + +<pre class="brush: html"><a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) +</pre> + +<p>Accediamo ai campi del record del libro associato utilizzando la "notazione dot" (es. <code>book.title</code> e <code>book.author</code>), dove il testo che segue <code>book</code> è il nome del campo (come definito nel model).</p> + +<p>Possiamo anche chiamare delle <em>functions</em> nel model da dentro il nostro template — in questo caso <code>Book.get_absolute_url()</code> per ottenere un URL che è possibile utilizzare per visualizzare il record di dettaglio associato. Questo funziona a condizione che la funzione non abbia argomenti (non c'è modo di passare argomenti!)</p> + +<div class="note"> +<p><strong>Nota</strong>: Dobbiamo stare attenti agli "effetti collaterali" quando chiamiamo le funzioni nei model. Qui visualizziamo solo un URL, ma una funzione può fare praticamente qualsiasi cosa: non vogliamo rischiare di cancellare il nostro database (per esempio) semplicemente mostrando il nostro template!</p> +</div> + +<h4 id="Update_del_template_di_base">Update del template di base</h4> + +<p>Apri il template di base (<strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong>) ed inserisci <strong>{% url 'books' %} </strong>dentro il link Url per <strong>All books</strong>, come sotto. Questo abiliterà il link in tutte le pagine (possiamo metterlo in pratica con successo ora che abbiamo creato il mapper URL "libri").</p> + +<pre class="brush: python"><li><a href="{% url 'index' %}">Home</a></li> +<strong><li><a href="{% url 'books' %}">All books</a></li></strong> +<li><a href="">All authors</a></li></pre> + +<h3 id="Come_viene_mostrato">Come viene mostrato?</h3> + +<p>Non sarà ancora possibile creare l'elenco dei libri, perché manca ancora una dipendenza: la mappa degli URL per le pagine dei dettagli del libro, necessaria per creare collegamenti ipertestuali a singoli libri. Mostreremo entrambe le viste elenco e dettaglio dopo la prossima sezione.</p> + +<h2 id="Pagina_di_dettaglio_dei_libri">Pagina di dettaglio dei libri</h2> + +<p>La pagina dei dettagli del libro mostrerà le informazioni su un libro specifico, accessibile tramite l'URL <code>catalog/book/<em><id></em></code> (dove <code><em><id></em></code> è la chiave primaria per il libro). Oltre ai campi nel model Book (autore, sommario, ISBN, lingua e genere), elencheremo anche i dettagli delle copie disponibili (<code>BookInstances</code>) compreso lo stato, la data di ritorno prevista, l'edizione e l'id. Ciò consentirà ai nostri lettori non solo di conoscere il libro, ma anche di confermare se/quando è disponibile.</p> + +<h3 id="URL_mapping_2">URL mapping</h3> + +<p>Apri <strong>/catalog/urls.py</strong> e aggiungi l'URL mapper '<strong>book-detail</strong>' mostrato in grassetto qui sotto. Questa funzione <code>path()</code> definisce un pattern, una vista di dettaglio generica basata sulla classe e un nome.</p> + +<pre class="brush: python">urlpatterns = [ + path('', views.index, name='index'), + path('books/', views.BookListView.as_view(), name='books'), +<strong> path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),</strong> +]</pre> + +<p>Per il path dei dettagli del libro, il pattern URL utilizza una sintassi speciale per catturare l'ID specifico del libro che vogliamo vedere. La sintassi è molto semplice: le parentesi angolari definiscono la parte dell'URL da catturare, racchiudendo il nome della variabile che la vista può utilizzare per accedere ai dati acquisiti. Per esempio, <strong><something></strong> , catturerà il pattern marcato, e passerà il valore alla view come variabile con nome "something". Puoi anche far precedere al nome della variabile una <a href="https://docs.djangoproject.com/en/2.1/topics/http/urls/#path-converters">specifica di conversione</a> che definisce il tipo di dato (int, str, slug, uuid, path).</p> + +<p>In questo caso usiamo <code>'<int:pk>'</code><strong> </strong>per acquisire l'id del libro, che deve essere una stringa appositamente formattata e passarla alla vista come parametro chiamato <code>pk</code> (abbreviazione di primary key). Questo è l'ID che viene utilizzato per archiviare il libro in modo univoco nel database, come definito nel Modello Book.</p> + +<div class="note"> +<p><strong>Nota</strong>: Come discusso precedentemente, il nostro URL matchato in realtà è <code>catalog/book/<digits></code> (ma perchè siamo nell'applicazione <strong>catalog</strong> <code>/catalog/</code> è sottinteso).</p> +</div> + +<div class="warning"> +<p><strong>Importante</strong>: La vista di dettaglio generica basata sulla classe prevede di passare un parametro denominato pk. Se stai scrivendo la tua vista funzione puoi usare qualsiasi nome di parametro che ti piace, o addirittura passare le informazioni in un argomento senza nome.</p> +</div> + +<h4 id="Manuale_di_nozioni_avanzate_su_path_matching_ed_espressioni_regolari">Manuale di nozioni avanzate su path matching ed espressioni regolari</h4> + +<div class="note"> +<p><strong>Nota</strong>: Non avrai bisogno di questa sezione per completare il tutorial! Lo forniamo perché conoscere questa opzione rischia di essere utile nel tuo futuro incentrato su Django.</p> +</div> + +<p>Il pattern matching fornito da <code>path()</code> è semplice ed utile per il caso (molto diffuso) in cui vuoi solo catturare ogni stringa od intero. Se è necessario un filtro più raffinato (ad esempio, per filtrare solo le stringhe con un determinato numero di caratteri), è possibile utilizzare il metodo <a href="https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.re_path">re_path()</a>.</p> + +<p>Questo metodo funziona esattamente come <code>path()</code> eccetto per il fatto che permette di specificare un pattern utilizzando una Regex. Vedi: <a href="https://docs.python.org/3/library/re.html">Regular expression</a>. Per esempio, avremmo potuto specificare il path precedente con:</p> + +<pre class="brush: python"><strong>re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong> +</pre> + +<p>Le espressioni regolari sono uno strumento di mappatura dei pattern incredibilmente potente. Sono, francamente, abbastanza non intuitive e spaventose per i principianti. Di seguito è riportato un primer molto breve!</p> + +<p>La prima cosa da sapere è che di solito le espressioni regolari dovrebbero essere dichiarate usando la sintassi "raw string" letterale (cioè, sono incluse come mostrato: <strong>r'<testo della regex>'</strong>).</p> + +<p>Le parti principali della sintassi che devi conoscere per dichiarare i match del pattern sono:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Symbol</th> + <th scope="col">Meaning</th> + </tr> + </thead> + <tbody> + <tr> + <td>^</td> + <td>Matcha l'inizio del testo</td> + </tr> + <tr> + <td>$</td> + <td>Matcha la fine del testo</td> + </tr> + <tr> + <td>\d</td> + <td>Matcha un numero (0, 1, 2, ... 9)</td> + </tr> + <tr> + <td>\w</td> + <td>Matcha una parola word character, es. ogni maiuscola- o minuscola- dell'alfabeto, numero o underscore (_)</td> + </tr> + <tr> + <td>+</td> + <td>Matcha uno o più caratteri precedenti. Ad esempio, per matchare una o più cifre useresti <code>\d+</code>. Per abbinare uno o più caratteri "a", potresti usare <code>a+</code></td> + </tr> + <tr> + <td>*</td> + <td>Abbina zero o più del carattere precedente. Ad esempio, per abbinare niente o una parola che potresti usare <code>\w*</code></td> + </tr> + <tr> + <td>( )</td> + <td>Cattura la parte del pattern all'interno delle parentesi. Tutti i valori acquisiti verranno passati alla vista come parametri senza nome (se vengono catturati più pattern, i parametri associati verranno forniti nell'ordine in cui sono state dichiarate le acquisizioni)</td> + </tr> + <tr> + <td>(?P<<em>name</em>>...)</td> + <td>Cattura il pattern (indicato da ...) come una variabile con nome (in questo caso "name"). I valori catturati sono passati alla view con il nome specificato. La tua view deve dichiarare un argomento con lo stesso nome!</td> + </tr> + <tr> + <td>[ ]</td> + <td>Abbina uno dei caratteri del set. Per esempio, [abc] matcherà con 'a' o 'b' o 'c'. [-\w] restituirà un match con il carattere '-' o con ogni parola.</td> + </tr> + </tbody> +</table> + +<p>La maggioranza degli altri caratteri può essere presa letteralmente!</p> + +<p>Consideriamo alcuni esempi di pattern realistici:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Pattern</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>r'^book/(?P<pk>\d+)$'</strong></td> + <td> + <p>Matcha una stringa che ha <code>book/</code> all'inizio della linea (<strong>^book/</strong>), dopo ha una o più cifre (<code>\d+</code>), e quindi termina (senza caratteri non numerici prima dell'indicatore di fine riga).</p> + + <p>Cattura anche tutte le cifre <strong>(?P<pk>\d+)</strong> e le passa alla vista in un parametro chiamato 'pk'. <strong>I valori catturati vengono sempre passati come una stringa!</strong></p> + + <p>Ad esempio, <code>book/1234</code> invierà una variabile <code>pk = '1234</code>' alla view.</p> + </td> + </tr> + <tr> + <td><strong>r'^book/(\d+)$'</strong></td> + <td>Questo corrisponde agli stessi URL del caso precedente. Le informazioni acquisite verranno inviate come argomento senza nome alla vista.</td> + </tr> + <tr> + <td><strong>r'^book/(?P<stub>[-\w]+)$'</strong></td> + <td> + <p>Matcha una stringa che ha <code>book/</code> all'inizio della linea (<strong>^book/</strong>), quindi ha uno o più caratteri che sono o un carattere '-' o una parola (<strong>[-\w]+</strong>), e si conclude. Cattura anche questo set di caratteri e li passa alla vista in un parametro chiamato 'stub'.</p> + + <p>Questo è uno schema abbastanza tipico per uno "stub". Gli stub sono chiavi primarie basate sull'uso di URL per i dati. È possibile utilizzare uno stub se si desidera che l'URL del libro sia più informativo. Per esempio <code>/catalog/book/the-secret-garden</code> anzichè <code>/catalog/book/33</code>.</p> + </td> + </tr> + </tbody> +</table> + +<p>È possibile acquisire più pattern nello stesso match e quindi codificare molte informazioni diverse in un URL.</p> + +<div class="note"> +<p><strong>Nota</strong>: Come sfida, considera come potresti codificare un URL per elencare tutti i libri pubblicati in un particolare anno, mese, giorno e RE che potrebbero essere utilizzati per abbinarlo.</p> +</div> + +<h4 id="Passare_opzioni_addizionali_nelle_tue_mappe_URL">Passare opzioni addizionali nelle tue mappe URL</h4> + +<p>Una caratteristica che non abbiamo usato qui, ma che potresti trovare di valore, è che puoi dichiarare e passare alla view <a href="https://docs.djangoproject.com/en/2.1/topics/http/urls/#views-extra-options">opzioni aggiuntive</a>. Le opzioni sono dichiarate come dizionario che si passa come terzo argomento non assegnato (senza nome) alla funzione <code>path()</code>. Questo approccio può essere utile se si desidera utilizzare la stessa view per più risorse e passare i dati per configurarne il comportamento in ciascun caso (di seguito forniamo un template diverso in ciascun caso).</p> + +<pre class="brush: python">path('url/', views.my_reused_view, <strong>{'my_template_name': 'some_path'}</strong>, name='aurl'), +path('anotherurl/', views.my_reused_view, <strong>{'my_template_name': 'another_path'}</strong>, name='anotherurl'), +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Entrambe le opzioni extra e i pattern nominati catturati vengono passati alla view come argomenti con nome. Se si utilizza lo stesso nome sia per un pattern catturato che per un'opzione extra, solo il valore del pattern catturato verrà inviato alla vista (il valore specificato nell'opzione aggiuntiva verrà scartato).</p> +</div> + +<h3 id="View_(class-based)">View (class-based)</h3> + +<p>Apri <strong>catalog/views.py</strong>, e copia il seguente codice alla fine del file:</p> + +<pre class="brush: python">class BookDetailView(generic.DetailView): + model = Book</pre> + +<p>Fatto! Tutto ciò che ti serve fare ora è creare un template chiamato <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>, e la view passerà al database l'informazione per lo specifico record di tipo <code>Book</code> estratto dall'URL mapper. All'interno del modello è possibile accedere all'elenco di libri con la variabile template denominata <code>object</code> OR <code>book</code> (cioè genericamente "the_model_name").</p> + +<p>Se necessario, è possibile modificare il template utilizzato e il nome dell'oggetto contesto utilizzato per fare riferimento al libro nel template. È inoltre possibile sovrascrivere i metodi per aggiungere ulteriori informazioni al contesto, ad esempio.</p> + +<h4 id="Cosa_succede_se_il_record_non_esiste">Cosa succede se il record non esiste?</h4> + +<p>Se un record richiesto non esiste, la vista generica basata sulla classe genererà un'eccezione Http404 automaticamente: in produzione, verrà automaticamente visualizzata una pagina appropriata "risorsa non trovata", che è possibile personalizzare se lo si desidera. Solo per darti un'idea di come funziona, il frammento di codice seguente mostra come implementare la vista basata su classi come una funzione se non si stesse utilizzando la vista di dettaglio generica basata sulla classe.</p> + +<pre class="brush: python">def book_detail_view(request, primary_key): + try: + book = Book.objects.get(pk=primary_key) + except Book.DoesNotExist: + raise Http404('Book does not exist') + + return render(request, 'catalog/book_detail.html', context={'book': book}) +</pre> + +<p>La vista prima cerca di ottenere il record del libro specifico dal modello. Se questo fallisce, la vista dovrebbe sollevare un'eccezione Http404 per indicare che il libro è "non trovato". Il passo finale è quindi, come al solito, chiamare render () con il nome del modello e i dati del libro nel parametro di contesto (come dizionario).</p> + +<p>In alternativa, possiamo usare la funzione <code>get_object_or_404()</code> come scorciatoia per sollevare un'eccezione <code>Http404</code> se il record non viene trovato.</p> + +<pre class="brush: python">from django.shortcuts import get_object_or_404 + +def book_detail_view(request, primary_key): + book = get_object_or_404(Book, pk=primary_key) + return render(request, 'catalog/book_detail.html', context={'book': book})</pre> + +<h3 id="Creare_il_template_per_la_vista_dettaglio">Creare il template per la vista dettaglio</h3> + +<p>Crea il file HTML <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong> ed inserisci il seguente contenuto. come discusso precedentmente, questo nome file di default per il template è quello atteso dalla generica class-based <em>detail</em> view (per un modello di nome <code>Book</code> in una applicazione di nome <code>catalog</code>).</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <h1>Title: \{{ book.title }}</h1> + + <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined --> + <p><strong>Summary:</strong> \{{ book.summary }}</p> + <p><strong>ISBN:</strong> \{{ book.isbn }}</p> + <p><strong>Language:</strong> \{{ book.language }}</p> + <p><strong>Genre:</strong> {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}</p> + + <div style="margin-left:20px;margin-top:20px"> + <h4>Copies</h4> + + {% for copy in book.bookinstance_set.all %} + <hr> + <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}">\{{ copy.get_status_display }}</p> + {% if copy.status != 'a' %} + <p><strong>Due to be returned:</strong> \{{copy.due_back}}</p> + {% endif %} + <p><strong>Imprint:</strong> \{{copy.imprint}}</p> + <p class="text-muted"><strong>Id:</strong> \{{copy.id}}</p> + {% endfor %} + </div> +{% endblock %}</pre> + +<ul> +</ul> + +<div class="note"> +<p>Il link dell'autore nel template sopra ha un URL vuoto perché non abbiamo ancora creato una pagina dei dettagli dell'autore. Una volta che esisterà, dovresti aggiornare l'URL in questo modo:</p> + +<pre><a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a> +</pre> +</div> + +<p>Anche se un po 'più grande, quasi tutto in questo template è stato descritto in precedenza:</p> + +<ul> + <li>Estendiamo il nostro template di base e facciamo l'override del blocco "content".</li> + <li>Utilizziamo l'elaborazione condizionale per determinare se visualizzare o meno il contenuto specifico.</li> + <li>Usiamo i loop per scorrere gli elenchi di oggetti.</li> + <li>Accediamo ai campi di context usando la notazione dot (poiché abbiamo usato la vista generica di dettaglio, il context è denominato <code>book</code>, potremmo anche usare "<code>object</code>")</li> +</ul> + +<p>Prima non abbiamo visto la funzione interessante <code>book.bookinstance_set.all()</code>. Questo metodo viene auto-magicamente creato da Django per restituire un set di record <code>BookInstance</code> associati con un particolare <code>Book</code>.</p> + +<pre class="brush: python">{% for copy in book.bookinstance_set.all %} + <!-- code to iterate across each copy/instance of a book --> +{% endfor %}</pre> + +<p>Questo metodo è necessario perchè hai dichiarato una <code>ForeignKey</code> (uno-a-molti) solamente da una parte della relazione. Poichè non hai fatto nulla per dichiarare la relazione negli altri ("molti") modelli, non ci sono alcun campo da cui prendere il set di record associati. Per superare questo problema, Django costruisce un appropriata funzione di nome "reverse lookup" (ricerca inversa) che puoi usare. Il nome della funzione viene costruito con le lettere minuscole del modello in cui la <code>ForeignKey</code> è stata dichiarata, seguita da <code>_set</code> (ovvero la funzione creata in <code>Book</code> è <code>bookinstance_set()</code>).</p> + +<div class="note"> +<p><strong>Nota</strong>: Qui usiamo <code>all()</code> per ottenere tutti i record (di default). Anche se puoi usare il metodo <code>filter()</code> per ricevere un sottoinsieme di record nel tuo codice, non puoi farlo direttamente nei template perchè non puoi specificare argomenti nelle funzioni.</p> + +<p>Fai attenzione anche a non definire un ordine (sulla tua vista class-based o model), altrimenti vedrai anche degli errori dal server di sviluppo come questo:</p> + +<pre>[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637 +/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]> + allow_empty_first_page=allow_empty_first_page, **kwargs) +</pre> + +<p>Ciò si verifica perché <a href="https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects">paginator object</a> si aspetta di vedere alcuni ORDER BY eseguiti sul database sottostante. Senza di esso, non può essere sicuro che i record siano restituiti effettivamente nell'ordine corretto! </p> + +<p>In questo tutorial non abbiamo ancora visto <strong>Pagination</strong> (ancora, ma presto), ma poichè non puoi utilizzare <code>sort_by()</code> e passare un parametro, (stessa cosa con <code>filter()</code>) dovrai scegliere tra tre strade:</p> + +<ol> + <li>Aggiungere un <code>ordering</code> dentro una dichiarazione <code>class Meta</code> nel tuo modello.</li> + <li>Aggiungere un attibuto <code>queryset</code> nella tua view custom class-based, specificando un <code>order_by()</code>.</li> + <li>Aggiungere un metodo <code>get_queryset</code> alla tua view custom class-based e specificando un <code>order_by()</code>.</li> +</ol> + +<p>Se decidi di usare una classe Meta per il model Author (probabilmente non così flessibile come personalizzare la vista basata sulla classe, ma abbastanza facile), ti ritroverai con qualcosa di simile a questo</p> + +<pre>class Author(models.Model): + first_name = models.CharField(max_length=100) + last_name = models.CharField(max_length=100) + date_of_birth = models.DateField(null=True, blank=True) + date_of_death = models.DateField('Died', null=True, blank=True) + + def get_absolute_url(self): + return reverse('author-detail', args=[str(self.id)]) + + def __str__(self): + return f'{self.last_name}, {self.first_name}' + +<strong> class Meta: + ordering = ['last_name']</strong></pre> + +<p>Ovviamente, il campo non necessita di essere un <code>last_name</code>: può essere qualunque altro.</p> + +<p>E per ultimo, ma non meno importante, dovresti ordinare un attributo/colonna che abbia effettivamente un indice (unico o meno) sul tuo database per evitare problemi di prestazioni. Ovviamente, questo non sarà necessario qui, con così pochi libri (e utenti!), ma è qualcosa da tenere a mente per i progetti futuri.</p> +</div> + +<h2 id="Come_viene_visualizzato">Come viene visualizzato?</h2> + +<p>A questo punto, avremmo dovuto creare tutto il necessario per visualizzare sia l'elenco dei libri sia le pagine di dettaglio dei libri. Lancia il comando (<code>python3 manage.py runserver</code>) ed apri sul tuo browser <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>.</p> + +<div class="warning"> +<p><strong>Warning: </strong>Non fare ancora clic su nessun link di autore o di dettaglio dell'autore: creerai quelli nella sfida!</p> +</div> + +<p>Click su <strong>All books</strong> per vedere la lista di tutti i libri. </p> + +<p><img alt="Book List Page" src="https://mdn.mozillademos.org/files/14049/book_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 823px;"></p> + +<p>Quindi fai clic su un link a uno dei tuoi libri. Se tutto è impostato correttamente, dovresti vedere qualcosa come il seguente screenshot.</p> + +<p><img alt="Book Detail Page" src="https://mdn.mozillademos.org/files/14051/book_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 783px; margin: 0px auto; width: 926px;"></p> + +<h2 id="Impaginazione">Impaginazione</h2> + +<p>Se hai appena qualche record, la nostra pagina di elenco dei libri sembrerà a posto. Tuttavia, inserendo decine o centinaia di record la pagina impiegherà più tempo a caricarsi (e avrà troppi contenuti per navigare in modo ragionevole). La soluzione a questo problema è di aggiungere l'impaginazione alle visualizzazioni della lista, riducendo il numero di elementi visualizzati su ciascuna pagina.</p> + +<p>Django ha un eccellente supporto per l'impaginazione built-in. Ancora meglio, questo è incorporato nelle view lista generiche basate su classe, quindi non devi fare molto per abilitarlo!</p> + +<h3 id="Views">Views</h3> + +<p>Apri <strong>catalog/views.py</strong>, ed aggiungi la riga di codice <code>paginate_by</code> mostrata sotto.</p> + +<pre class="brush: python">class BookListView(generic.ListView): + model = Book + <strong>paginate_by = 10</strong></pre> + +<p>Con questa aggiunta, non appena si hanno più di 10 record, la vista inizierà a impaginare i dati che invia al modello. Si accede alle diverse pagine usando i parametri GET - per accedere alla pagina 2 si utilizzerà l'URL: <code>/catalog/books/<strong>?page=2</strong></code>.</p> + +<h3 id="Templates">Templates</h3> + +<p>Ora che i dati sono impaginati, è necessario aggiungere il supporto al template per scorrere il set di risultati. Poiché potremmo volerlo fare in tutte le view elenco, lo faremo in un modo che possa essere aggiunto al template base.</p> + +<p>Apri <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> e copiaci dentro il seguente blocco di paginazione (evidenziato in grassetto qui in basso) sotto il nostro block content. Il codice controlla innanzitutto se l'impaginazione è abilitata nella pagina corrente. In tal caso, aggiunge i collegamenti successivo e precedente se appropriato (e il numero di pagina corrente).</p> + +<pre class="brush: python">{% block content %}{% endblock %} + +<strong>{% block pagination %} + {% if is_paginated %} + <div class="pagination"> + <span class="page-links"> + {% if page_obj.has_previous %} + <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a> + {% endif %} + <span class="page-current"> + <p>Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.</p> + </span> + {% if page_obj.has_next %} + <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a> + {% endif %} + </span> + </div> + {% endif %} +{% endblock %} </strong></pre> + +<p>Il <code>page_obj</code> è un oggetto <a href="https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects">Paginator</a> che esisterà se la paginazione viene utilizzata nella pagina corrente. Ti permette di ottenere tutte le informazioni sulla pagina corrente, le pagine precedenti, quante pagine ci sono, ecc.</p> + +<p>Usiamo <code>\{{ request.path }}</code> per ottenere l'URL della pagina corrente per la creazione dei collegamenti di paginazione. Questo è utile perché è indipendente dall'oggetto che stiamo impaginando.</p> + +<p>Ecco fatto!</p> + +<h3 id="Come_viene_visualizzato_2">Come viene visualizzato?</h3> + +<p>Lo screenshot qui sotto mostra l'aspetto della paginazione: se non hai inserito più di 10 titoli nel tuo database, puoi testarlo più facilmente abbassando il numero specificato in <code>paginate_by.</code></p> + +<p>I link di impaginazione sono visualizzati in basso, con i link successivo / precedente visualizzati a seconda della pagina in cui ti trovi.</p> + +<p><img alt="Book List Page - paginated" src="https://mdn.mozillademos.org/files/14057/book_list_paginated.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 924px;"></p> + +<h2 id="Sfida_te_stesso">Sfida te stesso</h2> + +<p>La sfida in questo articolo è di creare le view di dettaglio e le view di elenco dell'autore richieste per completare il progetto. Questi dovrebbero essere resi disponibili ai seguenti URL:</p> + +<ul> + <li><code>catalog/authors/</code> — lista di tutti gli authors.</li> + <li><code>catalog/author/<em><id></em></code><em> </em>— Vista di dettaglio dell'autore con chiave primaria <em><code><id></code></em></li> +</ul> + +<p>Il codice richiesto per i mappatori di URL e le viste dovrebbe essere praticamente identico all'elenco di libri e alle viste di dettaglio che abbiamo creato sopra. I modelli saranno diversi ma condivideranno un comportamento simile.</p> + +<div class="note"> +<p><strong>Note</strong>:</p> + +<ul> + <li>Una volta creato il mapper URL per la pagina di elenco dell'autore, sarà necessario aggiornare il collegamento <strong>Tutti gli autori</strong> nel modello di base. Segui lo stesso processo che abbiamo fatto quando abbiamo aggiornato il link <strong>Tutti i libri.</strong></li> + <li>Una volta creato il mapper URL per la pagina dei dettagli dell'autore, è necessario aggiornare anche il <a href="#Creating_the_Detail_View_template">template della vista dettagliata dei libri</a> (<strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>) in modo che il link dell'autore punti alla nuova pagina dei dettagli dell'autore (anziché essere un URL vuoto). La linea cambierà per aggiungere il tag template mostrato in grassetto sotto. + <pre class="brush: html"><p><strong>Author:</strong> <a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a></p> +</pre> + </li> +</ul> +</div> + +<p>Quando hai finito, le tue pagine dovrebbero apparire come gli screenshot qui sotto.</p> + +<p><img alt="Author List Page" src="https://mdn.mozillademos.org/files/14053/author_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<ul> +</ul> + +<p><img alt="Author Detail Page" src="https://mdn.mozillademos.org/files/14055/author_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 358px; margin: 0px auto; width: 825px;"></p> + +<ul> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>Congratulazioni, la nostra funzionalità di libreria di base è ora completa!</p> + +<p>In questo articolo, abbiamo imparato come utilizzare la lista generica basata sulla classe e le viste di dettaglio e li abbiamo usati per creare pagine per visualizzare i nostri libri e autori. Lungo la strada abbiamo imparato a conoscere la corrispondenza dei modelli con le espressioni regolari e come puoi passare i dati dagli URL alle tue visualizzazioni. Abbiamo anche imparato qualche altro trucco per l'utilizzo dei modelli. Infine, abbiamo mostrato come impaginare le visualizzazioni degli elenchi in modo che le nostre liste siano gestibili anche quando abbiamo molti record.</p> + +<p>Nei nostri prossimi articoli, estenderemo questa libreria per supportare gli account utente, dimostrando in tal modo l'autenticazione dell'utente, permissons, sessioni e moduli.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-display/">Generic display views</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/intro/">Introduction to class-based views</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins">Built-in template tags and filters</a> (Django docs).</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/pagination/">Pagination</a> (Django docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/it/learn/server-side/django/home_page/index.html b/files/it/learn/server-side/django/home_page/index.html new file mode 100644 index 0000000000..42c8d69eee --- /dev/null +++ b/files/it/learn/server-side/django/home_page/index.html @@ -0,0 +1,419 @@ +--- +title: 'Django Tutorial Parte 5: Creare una Home page' +slug: Learn/Server-side/Django/Home_page +tags: + - Articolo + - Codice + - Script + - Tutorial + - django + - imparare + - lezioni + - server-side + - template django + - viste django +translation_of: Learn/Server-side/Django/Home_page +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div> + +<p class="summary">Ora siamo pronti per aggiungere il codice che mostra la nostra prima pagina completa: una home page per il sito web <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>. La home page mostrerà il numero di record che abbiamo per ogni tipo di modello e fornirà i link di navigazione della barra laterale alle nostre altre pagine. Lungo la strada acquisiremo esperienza pratica nella scrittura di mappe e viste URL di base, nel leggere record dal database e utilizzare i templates.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Leggere <a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django Introduction</a> e <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivi:</th> + <td>Impara a creare semplici mappe url e viste (in cui nessun dato è codificato nell'URL), ottienere dati dai modelli e creare modelli.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>Dopo aver definito i nostri modelli e creato alcuni record della biblioteca iniziale con cui lavorare, è tempo di scrivere il codice che presenta tali informazioni agli utenti. La prima cosa che dobbiamo fare è determinare quali informazioni vogliamo visualizzare nelle nostre pagine e definire gli URL da utilizzare per restituire tali risorse. Quindi creeremo un URL mapper, visualizzazioni e templates per visualizzare le pagine.</p> + +<p>Il diagramma seguente descrive il flusso di dati principale e i componenti richiesti durante la gestione delle richieste e delle risposte HTTP. Siccome abbiamo già implementato il modello, i componenti principali che creeremo sono:</p> + +<ul> + <li>Mapper URL per inoltrare gli URL supportati (e qualsiasi informazione codificata negli URL) alle funzioni di visualizzazione appropriate.</li> + <li>Funzioni view per ottenere i dati richiesti dai model, creare pagine HTML che visualizzano i dati e restituire le pagine all'utente per visualizzarle nel browser.</li> + <li>Template da utilizzare durante il rendering dei dati nelle view.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p> + +<p>Come vedrai nella prossima sezione, abbiamo 5 pagine da visualizzare, che sono troppe informazioni da documentare in un singolo articolo. Pertanto, questo articolo si concentrerà su come implementare la home page e tratteremo le altre pagine in un articolo successivo. Questo dovrebbe darti una buona comprensione end-to-end di come funzionano in pratica i mappatori, le viste e i modelli.</p> + +<h2 id="Definizione_degli_URL_delle_risorse">Definizione degli URL delle risorse</h2> + +<p>Siccome questa <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary </a>è essenzialmente di sola lettura per gli utenti finali, abbiamo solo bisogno di fornire una pagina di destinazione per il sito (una home page) e pagine che visualizzano elenchi e viste di dettaglio per libri e autori.</p> + +<p>Gli URL di cui avremo bisogno per le nostre pagine sono:</p> + +<ul> + <li><code>catalog/</code> — La home page.</li> + <li><code>catalog/books/</code> — Lista di libri.</li> + <li><code>catalog/authors/</code> — Lista di tutti gli autori.</li> + <li><code>catalog/book/<em><id></em></code> — Vista di dettaglio per un libro particolare, con una chiave primaria del campo di <id> (di default). Ad esempio, l'URL per il terzo libro aggiunto alla lista sarà <code>/catalog/book/3</code>.</li> + <li><code>catalog/author/<em><id></em></code><em> </em>— Vista di dettaglio per uno specifico autore con un campo primario <em><code><id></code>. </em>Per esempio l'URL per l'11-esimo autore <code>/catalog/author/11</code>.</li> +</ul> + +<p>I primi tre URL restituiranno la pagina di indice, l'elenco di libri e l'elenco di autori. Questi URL non codificano alcuna informazione aggiuntiva e le query che prelevano i dati dal database saranno sempre le stesse. Tuttavia, i risultati restituiti dalle query dipendono dal contenuto del database.</p> + +<p>Al contrario, gli ultimi due URL mostreranno informazioni dettagliate su uno specifico libro o autore. Questi URL codificano l'identità dell'oggetto da visualizzare (rappresentato da <code><em><id></em></code>. Il mapper URL estrarrà le informazioni codificate e le passerà alla view e la view determinerà dinamicamente quali informazioni ottenere dal database. Codificando le informazioni nell'URL useremo un singolo set di una mappatura url, una view e un template per gestire tutti i libri (o gli autori).</p> + +<div class="note"> +<p><strong>Nota</strong>: Con Django, puoi costruire i tuoi URL come richiesto, puoi codificare le informazioni nel corpo dell'URL come mostrato sopra, o includere i parametri <code>GET</code> nell'URL, per esempio <code>/book/?id=6</code>. Qualunque approccio tu usi, gli URL dovrebbero essere mantenuti puliti, logici e leggibili, come <a href="https://www.w3.org/Provider/Style/URI">raccomandato dagli standard W3C</a>.</p> + +<p>La documentazione di Django consiglia di codificare le informazioni nel corpo dell'URL per ottenere una migliore progettazione dell'URL</p> +</div> + +<p>Come accennato nella panoramica, il resto di questo articolo descrive come costruire la pagina indice.</p> + +<h2 id="Creare_la_pagina_index">Creare la pagina index</h2> + +<p>La prima pagina che creeremo è la pagina indice (<code>catalogo/</code>). La pagina indice includerà alcuni HTML statici, insieme ai "conteggi" generati di diversi record nel database. Per fare questo, creeremo una mappatura URL, una view e un template.</p> + +<div class="note"> +<p><strong>Nota</strong>: Vale la pena prestare molta attenzione in questa sezione. La maggior parte delle informazioni si applica anche alle altre pagine che creeremo.</p> +</div> + +<h3 id="Mappatura_dellURL">Mappatura dell'URL</h3> + +<p>Quando abbiamo creato lo <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">scheletro del website</a>, abbiamo aggiornato il file <strong>locallibrary/urls.py</strong> per garantire che ogni volta che un URL che inizia con <code>catalog/</code> viene ricevuto, il modulo <em>URLConf </em>in <code>catalog.urls</code> elaborerà la sottostringa rimanente.</p> + +<p>Il seguente codice da <strong>locallibrary/urls.py </strong>include il modulo <code>catalog.urls</code>:</p> + +<pre>urlpatterns += [ + path('catalog/', include('catalog.urls')), +] +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Ogni volta che Django incontra la funzione di importazione <code>django.urls.include()</code>, divide la stringa URL al carattere finale designato e invia la sottostringa rimanente al modulo URLconf incluso per un'ulteriore elaborazione.</p> +</div> + +<p>Abbiamo anche creato un placeholder file per il modulo <em>URLConf</em>, chiamato <strong>/catalog/urls.py</strong>. Aggiungi il seguente codice a quel file:</p> + +<pre class="brush: python">urlpatterns = [ +<strong> path('', views.index, name='index'),</strong> +]</pre> + +<p>la funzione <code>path()</code>definisce:</p> + +<ul> + <li>Un pattern URL, che è una stringa vuota: ''. Discuteremo i pattern URL in dettaglio quando lavoreremo sulle altre visualizzazioni.</li> + <li>Una funzione di view che verrà chiamata se il pattern URL viene rilevato: <code>views.index</code>, che è la funzione nominata <code>index()</code> nel file <strong>views.py</strong>. </li> +</ul> + +<p>La funzione <code>path()</code> specifica anche un parametro <code>name</code>, che è un identificatore univoco per questa particolare mappatura degli URL. È possibile utilizzare il name per "invertire" il mapper, ovvero creare dinamicamente un URL che punta alla risorsa che il programma di mappatura è progettato per gestire. Ad esempio, possiamo usare il parametro name per collegarci alla nostra home page da qualsiasi altra pagina aggiungendo il seguente link in un template:</p> + +<pre class="brush: html"><a href="<strong>{% url 'index' %}</strong>">Home</a>.</pre> + +<div class="note"> +<p><strong>Nota</strong>: Potremmo anche mettere un link statico <code><a href="<strong>/catalog/</strong>">Home</a></code>), ma se in futuro cambiassimo il pattern della home page, per esempio, in<code>/catalog/index</code>) i templates non si collegheranno più correttamente. L'utilizzo di una mappatura URL invertita è molto più flessibile e robusto.</p> +</div> + +<h3 id="View_function-based">View (function-based)</h3> + +<p>Una vista è una funzione che elabora una richiesta HTTP, recupera i dati richiesti dal database, esegue il rendering dei dati in una pagina HTML utilizzando un template HTML e quindi restituisce l'HTML generato in una risposta HTTP per far visualizzare la pagina all'utente. La vista dell'indice segue questo modello — raccoglie informazioni sul numero di <code>Book</code>, <code>BookInstance</code>, <code>BookInstance</code> disponibili, e <code>Author</code> presenti nel database, e passa tali informazioni a un template per la visualizzazione.</p> + +<p>Apri <strong>catalog/views.py</strong> e nota che il file già importa la funzione di shortcut <a href="https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#django.shortcuts.render">render()</a> per generare un file HTML usando un template e i dati: </p> + +<pre class="brush: python">from django.shortcuts import render + +# Create your views here. +</pre> + +<p>Incolla le seguenti righe nella parte inferiore del file:</p> + +<pre class="brush: python">from catalog.models import Book, Author, BookInstance, Genre + +def index(request): + """View function for home page of site.""" + + # Generate counts of some of the main objects + num_books = Book.objects.all().count() + num_instances = BookInstance.objects.all().count() + + # Available books (status = 'a') + num_instances_available = BookInstance.objects.filter(status__exact='a').count() + + # The 'all()' is implied by default. + num_authors = Author.objects.count() + + context = { + 'num_books': num_books, + 'num_instances': num_instances, + 'num_instances_available': num_instances_available, + 'num_authors': num_authors, + } + + # Render the HTML template index.html with the data in the context variable + return render(request, 'index.html', context=context)</pre> + +<p>La prima riga importa le classi di modello che useremo per accedere ai dati in tutte le nostre views.</p> + +<p>La prima parte della funzione view recupera il numero di record usando l'attributo <code>objects.all()</code> sulle classi del model. Inoltre prende una lista di oggetti <code>BookInstance</code> che hanno il valore 'a' (Available) nel campo status. Trovi ulteriori informazioni sull'accesso ai dati di modello nel precedente tutorial <a href="/en-US/docs/Learn/Server-side/Django/Models#Searching_for_records">Django Tutorial Part 3: Using models > Searching for records</a>.</p> + +<p>Alla fine della funzione view, chiamiamo la funzione <code>render()</code> per creare una pagina HTML e restituire la pagina come risposta. Questa funzione scorciatoia include una serie di altre funzioni per semplificare un caso d'uso molto comune. La funzione <code>render()</code><strong> </strong>accetta i seguenti parametri:</p> + +<ul> + <li>L'oggetto <code>request</code> originale, che è una <code>HttpRequest</code>.</li> + <li>Un template HTML con dei placeholders per i dati.</li> + <li>Una variabile <code>context</code> (un dizionario Python), che contiene i dati da inserire nei segnaposto.</li> +</ul> + +<p>Approfondiremo <code>context</code> e templates nella prossima sezione. Iniziamo a creare il nostro modello in modo che possiamo effettivamente mostrare qualcosa all'utente!</p> + +<h3 id="Template">Template</h3> + +<p>Un template è un file di testo che definisce la struttura o il layout di un file (come una pagina HTML), utilizzando placeholder per rappresentare contenuto effettivo.</p> + +<p>Django cercherà automaticamente i template in una directory chiamata '<strong>templates</strong>' nella tua applicazione. Ad esempio, nella view index che abbiamo appena aggiunto, la funzione <code>render()</code> si aspetterà di trovare il file <em><strong>index.html</strong> </em>in<em> </em><strong>/locallibrary/catalog/templates/</strong> e solleverà un errore se il file non è presente. Puoi eseguire un controlo salvando i cambiamenti precedenti ed accedendo a <code>127.0.0.1:8000</code> col tuo browser - verrà mostrato un messaggio di errore abbastanza intuitivo: "<code>TemplateDoesNotExist at /catalog/</code>", ed altri dettagli.</p> + +<div class="note"> +<p><strong>Nota</strong>: Sulla base del file delle impostazioni del progetto, Django cercherà i template in un numero di punti, cercando di default nelle applicazioni installate. Puoi trovare ulteriori informazioni su come Django trova i template e su quali formati di modello supporta sulla<a href="https://docs.djangoproject.com/en/2.1/topics/templates/"> sezione Templates della documentazione Django</a>.</p> +</div> + +<h4 id="Estendere_i_templates">Estendere i templates</h4> + +<p>Il template dell'index richiederà un markup HTML standard per la head e il body, insieme alle sezioni di navigazione per collegarsi alle altre pagine del sito che non abbiamo ancora creato e alle sezioni che visualizzano il testo introduttivo e i dati del libro.</p> + +<p>Gran parte della struttura HTML e di navigazione sarà la stessa in ogni pagina del nostro sito. Invece di duplicare il codice su ogni pagina, puoi usare il linguaggio di template di Django per dichiarare un template di base, e quindi estenderlo per sostituire solo i bit che sono diversi per ogni pagina specifica.</p> + +<p>Il seguente frammento di codice è un modello di base di esempio da un file base_generic.html. L'esempio include HTML comune con sezioni per un titolo, una barra laterale e il contenuto principale contrassegnati con i tag di template chiamati <code>block</code> e <code>endblock</code>, mostrati in grassetto. È possibile lasciare i blocchi vuoti o includere il contenuto predefinito da utilizzare durante il rendering delle pagine derivate dal template.</p> + +<div class="note"> +<p><strong>Nota</strong>: I tag Template sono funzioni che è possibile utilizzare in un Template per scorrere gli elenchi, eseguire operazioni condizionali in base al valore di una variabile e così via. Oltre ai tag del template, la sintassi del template consente di fare riferimento alle variabili passate nel template dalla view e utilizzare i <em>template filter</em> per formattare le variabili (ad esempio, per convertire una stringa in lettere minuscole).</p> +</div> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + <strong>{% block title %}</strong><title>Local Library</title><strong>{% endblock %}</strong> +</head> +<body> + <strong>{% block sidebar %}</strong><!-- insert default navigation text for every page --><strong>{% endblock %}</strong> + <strong>{% block content %}</strong><!-- default content text (typically empty) --><strong>{% endblock %}</strong> +</body> +</html> +</pre> + +<p>Quando definiamo un template per una particolare vista, per prima cosa specifichiamo il template di base usando il tag <code>extends</code> — vedere il codice di esempio sotto. Quindi dichiariamo quali sezioni del template vogliamo sostituire (se ce ne sono), usando le sezioni <code>block</code>/<code>endblock</code> come nel template di base. </p> + +<p>Ad esempio, il frammento di codice qui sotto mostra come usare il template tag <code>extends</code> ed effettuare un override del block <code>content</code>. L'HTML generato includerà il codice e la struttura definiti nel template di base, incluso il contenuto di default che hai definito nel blocco <code>title</code>, ma il nuovo blocco <code>content</code> al posto di quello di default.</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <h1>Local Library Home</h1> + <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p> +{% endblock %}</pre> + +<h4 id="Template_di_base_di_LocalLibrary">Template di base di LocalLibrary</h4> + +<p>Utilizzeremo il seguente snippet di codice come modello di base per il sito Web di LocalLibrary. Come puoi vedere, contiene del codice HTML e definisce i blocchi per <code>title</code>, <code>sidebar</code> e <code>content</code>. Abbiamo un titolo di default e una barra laterale predefinita con collegamenti agli elenchi di tutti i libri e gli autori, entrambi racchiusi in blocchi per essere facilmente modificati in futuro.</p> + +<div class="note"> +<p><strong>Nota</strong>: Presentiamo anche due ulteriori tag di template: <code>url</code> e <code>load static</code>. Questi tag verranno spiegati nelle seguenti sezioni.</p> +</div> + +<p>Crea un nuovo file <strong><em>base_generic.html </em></strong>in <strong>/locallibrary/catalog/templates/</strong> e copia il codice sotto nel file:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + {% block title %}<title>Local Library</title>{% endblock %} + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> + <!-- Add additional CSS in static file --> + {% load static %} + <link rel="stylesheet" href="{% static 'css/styles.css' %}"> +</head> +<body> + <div class="container-fluid"> + <div class="row"> + <div class="col-sm-2"> + {% block sidebar %} + <ul class="sidebar-nav"> + <li><a href="{% url 'index' %}">Home</a></li> + <li><a href="">All books</a></li> + <li><a href="">All authors</a></li> + </ul> + {% endblock %} + </div> + <div class="col-sm-10 ">{% block content %}{% endblock %}</div> + </div> + </div> +</body> +</html></pre> + +<p>Il template include CSS da <a href="http://getbootstrap.com/">Bootstrap</a> per migliorare il layout e la presentazione della pagina HTML. Usare di Bootstrap (o di un altro framework web sul lato client) è un modo rapido per creare una pagina attraente che si mostra bene su diverse dimensioni dello schermo.</p> + +<p>Il template di base fa anche riferimento a un file css locale (<strong>styles.css</strong>) che fornisce uno styling aggiuntivo. Crea un file <strong>styles.css</strong> in <strong>/locallibrary/catalog/static/css/</strong> e incolla il seguente codice nel file:</p> + +<pre class="brush: css">.sidebar-nav { + margin-top: 20px; + padding: 0; + list-style: none; +}</pre> + +<h4 id="Il_template_di_index">Il template di index</h4> + +<p>Crea un nuovo file HTML <strong><em>index.html </em></strong>in <strong>/locallibrary/catalog/templates/</strong> and paste the following code in the file. Questo codice estende il nostro template di base sulla prima riga, quindi sostituisce il blocco di <code>content</code> predefinito per il modello. </p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} + <h1>Local Library Home</h1> + <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p> + <h2>Dynamic content</h2> + <p>The library has the following record counts:</p> + <ul> + <li><strong>Books:</strong> <strong>\{{ num_books }}</strong></li> + <li><strong>Copies:</strong> <strong>\{{ num_instances }}</strong></li> + <li><strong>Copies available:</strong> <strong>\{{ num_instances_available }}</strong></li> + <li><strong>Authors:</strong> <strong>\{{ num_authors }}</strong></li> + </ul> +{% endblock %}</pre> + +<p>Nella sezione <em>Dynamic content </em>dichiariamo i placeholders (<em>variabili del template</em>) per le informazioni dalla view che vogliamo includere. Le variabili sono racchiuse tra doppie parentesi graffe (handlebars), come mostrato in grassetto nel codice di esempio. </p> + +<div class="note"> +<p><strong>Nota:</strong> È possibile riconoscere facilmente variabili di template e tag di template (funzioni) - le variabili sono racchiuse tra doppie parentesi (<code>\{{ num_books }}</code>), e i tag sono racchiusi tra parentesi graffe singole con segni di percentuale (<code>{% extends "base_generic.html" %}</code>).</p> +</div> + +<p>La cosa importante da notare qui è che le variabili sono nominate con le <em>keys</em> che passiamo nel dizionario <code>context</code> nella funzione <code>render()</code> della nostra view (vedi esempio sotto). Le variabili saranno sostituite con i loro valori associati quando il modello è renderizzato. </p> + +<pre class="brush: python">context = { + '<strong>num_books</strong>': num_books, + '<strong>num_instances</strong>': num_instances, + '<strong>num_instances_available</strong>': num_instances_available, + '<strong>num_authors</strong>': num_authors, +} + +return render(request, 'index.html', context=context)</pre> + +<h4 id="Referenziare_file_statici_nei_templates">Referenziare file statici nei templates</h4> + +<p>È probabile che il tuo progetto utilizzi risorse statiche, inclusi JavaScript, CSS e immagini. Perché la posizione di questi file potrebbe non essere nota (o potrebbe cambiare) Django ti consente di specificare la posizione nei tuoi template rispetto alle impostazioni globali di <code>STATIC_URL</code>. Lo scheletro del website imposta il valore di <code>STATIC_URL</code> predefinito a '<code>/static/</code>', ma potresti scegliere di ospitarli su una rete di distribuzione dei contenuti o altrove.</p> + +<p>All'interno del template chiami prima il tag di template <code>load</code> che specifica "statico" per aggiungere la libreria modello, come mostrato nell'esempio di codice seguente. È quindi possibile utilizzare il tag del template <code>static</code> e specificare l'URL relativo al file richiesto.</p> + +<pre class="brush: html"><!-- Add additional CSS in static file --> +{% load static %} +<link rel="stylesheet" href="{% static 'css/styles.css' %}"></pre> + +<p>Puoi anche aggiungere una immagine allo stesso modo, per esempio:</p> + +<pre class="brush: html">{% load static %} +<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;"> +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Gli esempi sopra specificano dove si trovano i file, ma Django non li serve di default. Abbiamo configurato il web server di sviluppo per servire i file modificando il mapper URL globale (<strong>/locallibrary/locallibrary/urls.py</strong>) quando <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">abbiamo creato lo scheletro del website</a>, ma è comunque necessario abilitare il file serving in produzione. Lo vedremo più tardi.</p> +</div> + +<p>Per maggiori informazioni sul lavoro con file statici vedere <a href="https://docs.djangoproject.com/en/2.1/howto/static-files/">utilizzare static files</a>.</p> + +<h4 id="Collegarsi_agli_URLs">Collegarsi agli URLs</h4> + +<p>Il template di base sottostante presenta il tag di template URL.</p> + +<pre class="brush: python"><li><a href="{% url 'index' %}">Home</a></li> +</pre> + +<p>Questo tag accetta il nome di una funzione <code>path()</code> chiamata in <strong>urls.py</strong> e i valori per qualsiasi argomento che la vista associata riceverà da quella funzione e restituisce un URL che è possibile utilizzare per collegarsi alla risorsa.</p> + +<h4 id="Configurare_dove_trovare_i_templates">Configurare dove trovare i templates</h4> + +<p>Devi indicare a Django dove cercare i tuoi template nella cartella dei template. Per fare ciò, aggiungi la directory templates all'oggetto TEMPLATES modificando il file <strong>settings.py</strong> come mostrato in grassetto nel seguente esempio di codice:</p> + +<pre class="brush: python">TEMPLATES = [ + { + 'BACKEND': 'django.template.backends.django.DjangoTemplates', + 'DIRS': [ +<strong> os.path.join(BASE_DIR, 'templates'), +</strong> ], + 'APP_DIRS': True, + 'OPTIONS': { + 'context_processors': [ + 'django.template.context_processors.debug', + 'django.template.context_processors.request', + 'django.contrib.auth.context_processors.auth', + 'django.contrib.messages.context_processors.messages', + ], + }, + }, +]</pre> + +<h2 id="Come_viene_renderizzato">Come viene renderizzato?</h2> + +<p>A questo punto abbiamo creato tutte le risorse necessarie per visualizzare la pagina indice. Esegui il serve (<code>python3 manage.py runserver</code>) e apri <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a> nel browser. Se tutto è configurato correttamente, il tuo sito dovrebbe apparire come il seguente screenshot.</p> + +<p><img alt="Index page for LocalLibrary website" src="https://mdn.mozillademos.org/files/14045/index_page_ok.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 874px;"></p> + +<div class="note"> +<p><strong>Nota:</strong> I link <strong>All books</strong> e <strong>All authors</strong> non funzioneranno ancora perché i path, le view e i template per tali pagine non sono definiti. Abbiamo solo inserito i segnaposto per quei link nel template <code>base_generic.html</code>.</p> +</div> + +<h2 id="Prova_tu">Prova tu</h2> + +<p>Ecco un paio di attività per testare la tua familiarità con le query al model, le view e i template.</p> + +<ol> + <li>Il <a href="#The_LocalLibrary_base_template">base template</a> di LocalLibrary include un blocco <code>title</code>. Effettua un override nell' <a href="#The_index_template">index template</a> e crea un nuovo titolo per la pagina. + + <div class="note"> + <p><strong>Consiglio:</strong> La sezione<a href="#Extending_templates"> Extending templates</a> mostra come creare blocchi ed estendere blocchi in altri template.</p> + </div> + </li> + <li>Modifica la <a href="#View_(function-based)">view</a> per generare conteggi per i <em>genres</em> e <em>books</em> che contengono una parola particolare (maiuscole e minuscole) e passano i risultati a <code>context.</code> Lo realizzi in un modo simile alla creazione e all'utilizzo di <code>num_books</code> e <code>num_instances_available</code>. Dopo fai un update dell' <a href="#The_index_template">index template</a> per includere le variabili.</li> +</ol> + +<ul> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>Abbiamo appena creato la home page del nostro sito: una pagina HTML che visualizza un numero di record dal database e collegamenti ad altre pagine ancora da creare. Lungo il percorso abbiamo appreso informazioni fondamentali sui mappatori url, le viste, l'interrogazione del database con i modelli, il passaggio di informazioni a un modello da una vista e la creazione e l'estensione di modelli. Nel prossimo articolo svilupperemo questa conoscenza per creare le restanti quattro pagine del nostro sito web.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial03/">Writing your first Django app, part 3: Views and Templates</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/http/urls/">URL dispatcher</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/http/views/">View functions</a> (DJango docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/templates/">Templates</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/howto/static-files/">Managing static files</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#django.shortcuts.render">Django shortcut functions</a> (Django docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/it/learn/server-side/django/index.html b/files/it/learn/server-side/django/index.html new file mode 100644 index 0000000000..63e9b5ec39 --- /dev/null +++ b/files/it/learn/server-side/django/index.html @@ -0,0 +1,70 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - CodingScripting + - Intro + - Learn + - Principiante + - Python + - Server-side programming + - TopicStub + - django +translation_of: Learn/Server-side/Django +--- +<div>{{LearnSidebar}}<br> +Django è un server-side web framework Python estremamente popolare. Il modulo mostra perché Django è uno dei server web framework più usati, come impostare l'ambiente di sviluppo e come iniziare ad usarlo per creare le tue web application.</div> + +<div></div> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Per iniziare non hai bisogno di nessuna conoscenza di Django. Hai bisogno di capire cosa sono la programmazione web lato server e i framework web, leggendo il modulo <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>.</p> + +<p>E' raccomandata una conoscenza generale dei concetti di programmazione e di <a href="/en-US/docs/Glossary/Python">Python</a>, ma non è essenziale per capire i concetti fondamentali.</p> + +<div class="note"> +<p><strong>Nota</strong>: Python è uno dei linguaggi di programmazione più semplici da leggere e capire per i principianti. Detto questo, se vuoi capire meglio questo modulo su Internet puoi trovare numerosi libri gratuiti e tutorial ( nuovi programmatori potrebbero voler leggere la pagina <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> su python.org wiki).</p> +</div> + +<h2 id="Guide">Guide</h2> + +<dl> + <dt><a href="/it/docs/Learn/Server-side/Django/Introduction">Introduzione a Django</a></dt> + <dd>In questo primo articolo su Django risponderemo alla domanda "Cosa è Django?" e daremo una panoramica su cosa rende questo framework web speciale. Sottolineeremo le caratteristiche principali, inclusa qualche funzionalità avanzata di cui non abbiamo il tempo per parlarne in dettaglio in questo modulo. Mostreremo anche alcuni blocchi principali che compongono una applicazione Django, questo per dare una idea di cosa può fare prima ancora che tu possa configurarlo e iniziare a giocarci.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/development_environment"> Configurare un ambiente di sviluppo per Django</a></dt> + <dd>Ora che sai cosa è Django, mostreremo come configurare e testare un ambiente di sviluppo di Django su Windows, Linux (Ubuntu), e Mac OS X — o qualunque sistema operativo comune tu stia usando, questo articolo ti darà quello che ti server per iniziare lo sviluppo di applicazioni Django.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Il sito "Local Library"</a></dt> + <dd>Primo articolo nella serie di tutorial pratici che spiega cosa imparerai, e fornirà una panoramica del sito web, di esempio, "local library" su cui lavoreremo e che evolverà nei seguenti articoli.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Parte 2: Creare lo scheletro di un sito web</a></dt> + <dd>Questo articolo mostra come puoi creare lo scheletro del progetto che potrai continuare a popolare con impostazioni specifiche, url, modelli, view e template.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/Models">Django Tutorial Parte 3: Usare i modelli</a></dt> + <dd>Questo articolo mostra come definire i modelli per il sito <em>LocalLibrary</em> — i modelli rappresentano le strutture dati usate per memorizzare i dati dell'applicazione, e permette a Django di salvare i dati in un database. Spiega cosa è un modello, come si dichiara e alcuni dei tipi di dati principali. Inoltre mostra brevemente alcuni dei modi principali con cui accedere il modello dei dati.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Parte 4: Django admin site</a></dt> + <dd>Ora che abbiamo creato i modelli per il LocalLibrary website, useremo il sito Django Admin per aggiungere qualche "real" book data. Prima ti mostreremo come registrare i modelli con il sito admin, quindi ti mostreremo come effettuare il login e creare qualche dato. Infine mostriamo qualcuno dei modi con cui puoi migliorare la presentazione del sito admin.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/Home_page">Django Tutorial Parte 5: Creare la nostra home page</a></dt> + <dd>Ora siamo pronti ad aggiungere il codice per visualizzare la nostra prima pagina intera, una home page per il sito <em>LocalLibrary</em> che mostra quanti record abbiamo di ogni tipo di modello e fornisce collegamenti di navigazione della barra laterale alle altre nostre pagine. Lungo la strada acquisiremo esperienza pratica nella scrittura di URL maps e views, ottenendo dei record dal database e usando i templates.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Parte 6: Generic list and detail views</a></dt> + <dd>Questo tutorial estende il nostro sito <em>LocalLibrary</em>, aggiungendo pagine con liste e dettagli dei libri e degli autori. Qui impareremo le generic class-based views, e mostreremo come possono ridurre l'ammontare di codice da scrivere per i casi d'uso comuni. Vedremo anche la gestione degli URL in modo più approfondito, mostrando come effettuare un pattern matching di base.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/Sessions">Django Tutorial Parte 7: Sessions framework</a></dt> + <dd>Questo tutorial estende il nostro sito <em>LocalLibrary</em>, aggiungendo un contatore delle visite basatoi sulle sessioni nella home page. Questo è un esempio relativamente semplice, ma mostra come è possibile utilizzare il session framework per fornire comportamenti persistenti agli utenti anonimi nei propri siti.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/Authentication">Django Tutorial Parte 8: Autenticazione utenti e permessi</a></dt> + <dd>In questo tutorial ti mostreremo come consentire agli utenti di accedere al tuo sito con i loro account e come controllare cosa possono fare e vedere in base al fatto che siano o meno connessi e in base alle loro <em>permissions</em>. Come parte di questa dimostrazione estenderemo il sito <em>LocalLibrary</em>, aggiungendo pagine di accesso e logout e pagine specifiche dell'utente e del personale per la visualizzazione di libri presi in prestito.</dd> + <dt><a href="/it/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Lavorare con i forms</a></dt> + <dd>In questo tutorial ti mostreremo come lavorare con i <a href="/it/docs/Web/Guide/HTML/Forms">Forms HTML</a> in Django, e in particolare il modo più semplice per scrivere forms per creare, aggiornare ed eliminare le istanze del model. Come parte di questa dimostrazione estenderemo il sito <em>LocalLibrary</em> in modo che i bibliotecari possano rinnovare i libri e creare, aggiornare ed eliminare gli autori utilizzando i nostri forms (anziché utilizzare l'applicazione di admin).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> + <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> + <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> + <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's in-built protections handle such threats.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> + <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> +</dl> diff --git a/files/it/learn/server-side/django/introduzione/index.html b/files/it/learn/server-side/django/introduzione/index.html new file mode 100644 index 0000000000..4eb36683eb --- /dev/null +++ b/files/it/learn/server-side/django/introduzione/index.html @@ -0,0 +1,281 @@ +--- +title: Introduzione a Django +slug: Learn/Server-side/Django/Introduzione +tags: + - Introduzione + - Learn + - Principianti + - Python + - django + - programmazione lato server +translation_of: Learn/Server-side/Django/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> + +<div><span class="seoSummary">In questo primo articolo su Django risponderemo alla domanda "Cos'è Django?" e forniremo una panoramica su cosa rende speciale questo web framework. Andremo a sottolinearne le principali caratteristiche, incluse alcune delle funzionalità avanzate, che però in questo modulo non avremo tempo di presentare nel dettaglio.</span> Mostreremo poi alcuni dei principali blocchi che compongono un'applicazione Django (sebbene a questo punto non dovreste ancora avere un ambiente di sviluppo in cui poterla testare).</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td> + <p>Conoscenza base del computer. Un'introduzione generale alla <a href="https://developer.mozilla.org/it/docs/Learn/Server-side/First_steps">programmazione lato server</a>, in particolare ai <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">meccanismi di interazione client-server</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Acquisire familiarità con l'ambiente Django: cos'è, come funziona, quali sono le principali funzionalità che mette a disposizione e i blocchi principali delle applicazioni Django.</td> + </tr> + </tbody> +</table> + +<h2 id="Che_cosè_Django">Che cos'è Django?</h2> + +<p>Django è un framework web Python di alto livello che consente un rapido sviluppo di siti web sicuri e manutenibili. Costruito da sviluppatori esperti, Django si occupa di gran parte del problema dello sviluppo web, in modo da potersi concentrare sulla scrittura della propria app senza dover reinventare la ruota. È gratuito e open source, ha una comunità fiorente e attiva, un'ottima documentazione e molte opzioni per il supporto gratuito e a pagamento. </p> + +<p>Django vi aiuta a scrivere software che è:</p> + +<dl> + <dt>Completo</dt> + <dd>Django segue la filosofia "Batterie incluse" e fornisce quasi tutto ciò che gli sviluppatori potrebbero voler fare "out of the box". Poiché tutto ciò di cui si ha bisogno è parte di un unico "prodotto", funziona tutto insieme senza soluzione di continuità, segue principi di progettazione coerenti e ha una vasta e <a href="https://docs.djangoproject.com/en/stable/">aggiornata documentazione</a>.</dd> + <dt>Versatile</dt> + <dd>Django può essere (ed è stato) utilizzato per costruire quasi ogni tipo di sito web - dai sistemi di gestione dei contenuti e wiki, fino ai social network e ai siti di notizie. Può funzionare con qualsiasi framework lato client, e può fornire contenuti in quasi tutti i formati (inclusi HTML, feed RSS, JSON, XML, ecc.). Il sito che state leggendo è basato su Django!</dd> + <dd>Internamente, mentre fornisce scelte per quasi tutte le funzionalità che si possono desiderare (ad esempio, diversi database popolari, motori di modellizzazione, ecc), può anche essere esteso per utilizzare altri componenti se necessario.</dd> + <dt>Sicuro</dt> + <dd>Django aiuta gli sviluppatori ad evitare molti errori di sicurezza comuni, fornendo un framework che è stato progettato per "fare le cose giuste" per proteggere automaticamente il sito web. Ad esempio, Django fornisce un modo sicuro per gestire gli account utente e le password, evitando i comuni errori come l'inserimento di informazioni di sessione nei cookie dove sono vulnerabili (i cookie contengono solo una chiave e i dati reali sono memorizzati nel database) o la memorizzazione diretta delle password piuttosto che l'hash della password.</dd> + <dd><em>Un hash della password è un valore di lunghezza fissa creato inviando la password attraverso una <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">funzione di hash crittografico</a>. Django può controllare se una password inserita è corretta eseguendola attraverso la funzione hash e confrontando l'uscita con il valore hash memorizzato. Tuttavia, a causa della natura "unidirezionale" della funzione, anche se un valore hash memorizzato è compromesso, è difficile per un aggressore elaborare la password originale.</em></dd> + <dd>Django consente la protezione contro molte vulnerabilità di default, tra cui SQL injection, cross-site scripting, cross-site request forgery e clickjacking (vedere <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Sicurezza del sito web</a> per maggiori dettagli su tali attacchi).</dd> + <dt>Scalabile</dt> + <dd>Django utilizza un'architettura basata su componenti "shared-nothing" (ogni parte dell'architettura è indipendente dalle altre e può quindi essere sostituita o modificata se necessario). Avere una chiara separazione tra le diverse parti significa che può scalare per l'aumento del traffico aggiungendo hardware a qualsiasi livello: server di caching, server di database o server di applicazioni. Alcuni dei siti più trafficati hanno scalato con successo Django per soddisfare le loro richieste (ad esempio Instagram e Disqus, per citarne solo due).</dd> + <dt>Manutenibile</dt> + <dd>Il codice Django è scritto utilizzando principi di progettazione e modelli che incoraggiano la creazione di codice manutenibile e riutilizzabile. In particolare, si avvale del principio Don't Repeat Yourself (DRY) per evitare inutili duplicazioni, riducendo la quantità di codice. Django promuove anche il raggruppamento delle funzionalità correlate in "applicazioni" riutilizzabili e, ad un livello più basso, raggruppa il codice correlato in moduli (sulla falsariga del modello Model View Controller (MVC)).</dd> + <dt>Portabile</dt> + <dd>Django è scritto in Python, che funziona su molte piattaforme. Ciò significa che non siete legati a nessuna particolare piattaforma server e potete eseguire le vostre applicazioni su molti tipi di Linux, Windows e Mac OS X. Inoltre, Django è ben supportato da molti web hosting provider, che spesso forniscono infrastrutture e documentazione specifiche per l'hosting dei siti Django.</dd> +</dl> + +<h2 id="Da_dove_proviene">Da dove proviene?</h2> + +<p>Django è stato inizialmente sviluppato tra il 2003 e il 2005 da un team web che si occupava della creazione e della manutenzione dei siti web dei giornali. Dopo aver creato un certo numero di siti, il team ha iniziato a elaborare e riutilizzare un sacco di codice e modelli di design comuni. Questo codice comune si è evoluto in un generico framework di sviluppo web, che è stato "open-sourced" come progetto "Django" nel luglio 2005. </p> + +<p>Django ha continuato a crescere e migliorare, dalla sua prima release milestone (1.0) nel settembre 2008 fino alla recente versione 2.0 (2017). Ogni release ha aggiunto nuove funzionalità e correzioni di bug, che vanno dal supporto per nuovi tipi di database, motori di template e caching, fino all'aggiunta di funzioni di visualizzazione e classi "generiche" (che riducono la quantità di codice che gli sviluppatori devono scrivere per una serie di attività di programmazione). </p> + +<div class="note"> +<p><strong>Nota</strong>: Date un'occhiata alle <a href="https://docs.djangoproject.com/en/stable/releases/">note di rilascio</a> sul sito web di Django per vedere cosa è cambiato nelle ultime versioni, e quanto lavoro si sta facendo per rendere Django migliore.</p> +</div> + +<p>Django è ora un progetto open source fiorente e collaborativo, con molte migliaia di utenti e collaboratori. Pur avendo ancora alcune caratteristiche che riflettono la sua origine, Django si è evoluto in un framework versatile in grado di sviluppare qualsiasi tipo di sito web. </p> + +<h2 id="Quanto_è_popolare_Django">Quanto è popolare Django?</h2> + +<p>Non c'è una misura disponibile e definitiva della popolarità dei framework lato server (anche se siti come <a href="http://hotframeworks.com/">Hot Frameworks</a> tentano di valutare la popolarità usando meccanismi come il conteggio del numero di progetti GitHub e le domande di StackOverflow per ogni piattaforma). Una domanda migliore è se Django è "abbastanza popolare" per scongiurare i problemi delle piattaforme poco popolari. Continua ad evolversi? Puoi chiedere aiuto se ne hai bisogno? C'è la possibilità di ottenere un lavoro retribuito se si impara Django? </p> + +<p>In base al numero di siti di alto profilo che utilizzano Django, al numero di persone che contribuiscono al codice e al numero di persone che forniscono supporto sia gratuito che a pagamento, allora sì, Django è un framework popolare!</p> + +<p>I siti di alto profilo che utilizzano Django includono: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest e Open Stack (fonte: <a href="https://www.djangoproject.com/">home page di Django</a>).</p> + +<h2 id="Django_è_dogmatico">Django è dogmatico?</h2> + +<p>I framework web spesso si riferiscono a se stessi come "dogmatici" o "non dogmatici".</p> + +<p>I framework dogmatici sono quelli che hanno dogmi sul "giusto modo" di gestire un particolare compito. Spesso supportano un rapido sviluppo in un particolare dominio (risolvere problemi di un particolare tipo) perché il modo giusto di fare qualsiasi cosa è di solito ben compreso e ben documentato. Tuttavia possono essere meno flessibili nel risolvere i problemi al di fuori del loro dominio principale e tendono ad offrire meno scelte per quali componenti e approcci si possono utilizzare.</p> + +<p>I framework non dogmatici, al contrario, hanno molte meno restrizioni sul modo migliore per collegare i componenti per raggiungere un obiettivo, o anche su quali componenti usare. Con essi è più facile per gli sviluppatori utilizzare gli strumenti più adatti per completare un particolare compito, al anche se devono sostenere un dispendio di energie per trovare da soli quei componenti.</p> + +<p>Django è "mediamente dogmatico", e quindi fornisce il "meglio di entrambi i mondi". Fornisce un insieme di componenti per gestire la maggior parte dei compiti di sviluppo web e uno (o due) modi preferiti per utilizzarli. Tuttavia, l'architettura disaccoppiata di Django significa che di solito è possibile scegliere tra una serie di opzioni diverse, o, se lo si desidera, aggiungere il supporto per quelle completamente nuove.</p> + +<h2 id="Che_aspetto_ha_il_codice_di_Django">Che aspetto ha il codice di Django?</h2> + +<p>In un sito web tradizionale basato su dati, un'applicazione web attende le richieste HTTP dal browser web (o da un altro client). Quando una richiesta viene ricevuta, l'applicazione elabora ciò che è necessario in base all'URL ed eventualmente alle informazioni contenute nei dati <code>POST </code>o nei dati <code>GET</code>. A seconda di ciò che è richiesto, può quindi leggere o scrivere informazioni da un database o eseguire altri compiti necessari per soddisfare la richiesta. L'applicazione restituisce quindi una risposta al browser web, spesso creando dinamicamente una pagina HTML che il browser può visualizzare inserendo i dati recuperati nei segnaposto in un modello HTML.</p> + +<p>Le applicazioni web Django tipicamente raggruppano il codice che gestisce ciascuno di questi passaggi in file separati:<img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<ul> + <li><strong>URLs: </strong>Mentre è possibile elaborare le richieste da ogni singolo URL tramite una singola funzione, è molto più gestibile scrivere una funzione di visualizzazione separata per gestire ogni risorsa. Un mappatore di URL viene utilizzato per reindirizzare le richieste HTTP alla vista appropriata in base all'URL della richiesta. Il mappatore URL può anche abbinare particolari modelli di stringhe o cifre che appaiono in un URL, e passarli a una funzione di visualizzazione come dati.<br> + <strong>View:</strong> Una vista è una funzione di gestione delle richieste, che riceve le richieste HTTP e restituisce le risposte HTTP. Le viste accedono ai dati necessari per soddisfare le richieste tramite modelli (<em>models</em>) e delegano la formattazione della risposta ai <em>templates</em>.</li> + <li><strong>Models:</strong> I modelli sono oggetti Python che definiscono la struttura dei dati di un'applicazione e forniscono meccanismi per gestire (aggiungere, modificare, cancellare) e interrogare i record nel database. </li> + <li><strong>Templates:</strong>Un template è un file di testo che definisce la struttura o il layout di un file (come una pagina HTML), con segnaposto utilizzati per rappresentare il contenuto effettivo. Una vista (<em>view</em>) può creare dinamicamente una pagina HTML utilizzando un template HTML, popolandola con i dati di un modello (<em>model</em>). Un template può essere utilizzato per definire la struttura di qualsiasi tipo di file; non deve essere necessariamente HTML!</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Django si riferisce a questa organizzazione come all'architettura "Model View Template (MVT)". Ha molte somiglianze con la più familiare architettura del <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a>.</p> +</div> + +<ul> +</ul> + +<p>Le sezioni seguenti vi daranno un'idea di come sono fatte queste parti principali di un'applicazione Django (approfondiremo i dettagli più avanti nel corso, una volta creato un ambiente di sviluppo).</p> + +<h3 id="Inviare_la_richiesta_alla_vista_giusta_urls.py">Inviare la richiesta alla vista giusta (urls.py)</h3> + +<p>Un URL mapper è tipicamente memorizzato in un file chiamato <strong>urls.py</strong>. Nell'esempio seguente, il mapper (<code>urlpatterns</code>) definisce una lista di mappature tra le routes (specifici URL <em>patterns</em> ) e le corrispondenti funzioni di visualizzazione (<em>view</em>). Se viene ricevuta una richiesta HTTP che ha un URL che corrisponde a uno specifico <em>pattern</em>, allora la funzione di <em>view</em> associata sarà chiamata e passerà la richiesta.</p> + +<pre class="notranslate">urlpatterns = [ + <strong>path('admin/', admin.site.urls), + </strong>path('book/<int:id>/', views.book_detail, name='book_detail'), + path('catalog/', include('catalog.urls')), + re_path(r'^([0-9]+)/$', views.best), +] +</pre> + +<p>L'oggetto <code>urlpatterns </code>è una lista di funzioni <code>path()</code> e/o<code> re_path()</code> (le liste Python sono definite usando parentesi quadre, dove gli elementi sono separati da virgole e possono avere una virgola di tracciamento opzionale. Per esempio: <code>[item1, item2, item3,]</code>).</p> + +<p>Il primo argomento per entrambi i metodi è il percorso (<em>pattern</em>) che sarà abbinato. Il metodo <code>path()</code> usa le parentesi angolari per definire le parti di un URL che saranno catturate e passate alla funzione di visualizzazione come argomenti. La funzione <code>re_path()</code> usa un approccio flessibile per la corrispondenza dei pattern, noto come espressione regolare. Ne parleremo in un articolo successivo!</p> + +<p>Il secondo argomento è la funzione che viene chiamata in abbinamento al pattern. La notazione <code>views.book_detail</code> indica che la funzione chiamata <code>book_detail()</code> può essere trovata in un modulo chiamato <code>views</code> (cioè all'interno di un file chiamato <code>views.py</code>)</p> + +<h3 id="Gestione_della_richiesta_views.py">Gestione della richiesta (views.py)</h3> + +<p>Le <em>views </em>sono il cuore dell'applicazione web, ricevono le richieste HTTP dai client web e restituiscono le risposte HTTP. Nel mezzo, esse mettono a disposizione le altre risorse del framework per accedere ai database, rendere i modelli, ecc. </p> + +<p>L'esempio seguente mostra una minima funzione di view <code>index()</code>, che avrebbe potuto essere chiamata dal nostro URL mapper nella sezione precedente. Come tutte le funzioni di view riceve un oggetto <code>HttpRequest </code>come parametro (<code>request</code>) e restituisce un oggetto <code>HttpResponse</code>. In questo caso non facciamo nulla con la richiesta, e la nostra risposta restituisce semplicemente una stringa codificata. Vi mostreremo una richiesta che fa qualcosa di più interessante in una sezione successiva.</p> + +<pre class="brush: python notranslate"># filename: views.py (Django view functions) + +from django.http import HttpResponse + +def index(request): + # Get an HttpRequest - the request parameter + # perform operations using information from the request. + # Return HttpResponse + return HttpResponse('Hello from Django!') +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Un po' di Python:</p> + +<ul> + <li><a href="https://docs.python.org/3/tutorial/modules.html">I moduli Python </a>sono "librerie" di funzioni, memorizzate in file separati, che potremmo voler utilizzare nel nostro codice. Qui importiamo solo l'oggetto <code>HttpResponse </code>dal modulo <code>django.http</code> in modo da poterlo usare nella nostra view: <code>from django.http import HttpResponse</code> . Ci sono altri modi per importare alcuni o tutti gli oggetti da un modulo.</li> + <li>Le funzioni sono dichiarate usando la parola chiave <code>def </code>come mostrato sopra, con i parametri denominati elencati tra parentesi dopo il nome della funzione; la riga finisce con i due punti. Si noti come le righe successive sono tutte indentate. L'indentazione è importante, in quanto specifica che le linee di codice sono all'interno di quel particolare blocco (l'indentazione obbligatoria è una caratteristica chiave di Python, ed è uno dei motivi per cui il codice Python è così facile da leggere).</li> +</ul> +</div> + +<ul> +</ul> + +<p>Le views sono solitamente salvate in un file chiamato <strong>views.py</strong>.</p> + +<h3 id="Definizione_dei_modelli_di_dati_models.py">Definizione dei modelli di dati (models.py)</h3> + +<p>Le applicazioni web Django gestiscono e interrogano i dati attraverso oggetti Python chiamati modelli (<em>models</em>). I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo ed eventualmente anche la loro dimensione massima, i valori di default, le opzioni della lista di selezione, il testo di aiuto per la documentazione, il testo dell'etichetta per i moduli, ecc. La definizione del modello è indipendente dal database sottostante - è possibile scegliere uno dei diversi modelli come parte delle impostazioni del progetto. Una volta scelto il database che si vuole utilizzare, non è necessario parlare direttamente con esso - basta scrivere la struttura del modello e altro codice, e Django si occupa per voi di tutto il lavoro sporco di comunicazione con il database.</p> + +<p>Il frammento di codice qui sotto mostra un modello Django molto semplice per un oggetto <code>Team</code>. La classe <code>Team </code>è derivata dalla classe django <code>model.Model</code>. Essa definisce il nome del team e il livello del team come campi di caratteri e specifica un numero massimo di caratteri da memorizzare per ogni record. Il <code>team_level</code> può essere uno dei diversi valori, quindi lo definiamo come un campo di scelta e forniamo una mappatura tra le scelte da visualizzare e i dati da memorizzare, insieme ad un valore predefinito. </p> + +<pre class="brush: python notranslate"># filename: models.py + +from django.db import models + +class Team(models.Model): + team_name = models.CharField(max_length=40) + + TEAM_LEVELS = ( + ('U09', 'Under 09s'), + ('U10', 'Under 10s'), + ('U11', 'Under 11s'), + ... #list other team levels + ) + team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11') +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Un po' di Python:</p> + +<ul> + <li> + <p>Python supporta la "programmazione orientata agli oggetti" (object-oriented programming<em> - </em>OOP <em>ndt</em>), uno stile di programmazione in cui organizziamo il nostro codice in oggetti, che includono dati e funzioni correlate per operare su quei dati. Gli oggetti possono anche ereditare/estendere/derivare da altri oggetti, permettendo di condividere il comportamento comune tra oggetti correlati. In Python usiamo la parola chiava <code>class </code>per definire un "prototipo" (<em>blueprint - ntd</em>) di un oggetto. Possiamo creare più <em>istanze </em>specifiche del tipo di oggetto in base al modello nella classe.</p> + + <p>Così, per esempio, qui abbiamo una classe <code>Team</code>, che deriva dalla classe <code>Model</code>. Questo significa che è un modello, e che conterrà tutti i metodi di un modello, ma possiamo anche dargli caratteristiche specializzate proprie. Nel nostro modello definiamo i campi di cui il nostro database avrà bisogno per memorizzare i nostri dati, dando loro nomi specifici. Django utilizza queste definizioni, compresi i nomi dei campi, per creare il database sottostante.</p> + </li> +</ul> +</div> + +<h3 id="Interrogare_i_dati_views.py">Interrogare i dati (views.py)</h3> + +<p>Il modello Django fornisce una semplice API di interrogazione per la ricerca nel database. Questa può essere confrontata con una serie di campi alla volta utilizzando diversi criteri (ad es. esatto, non sensibile alle maiuscole, maggiore di, ecc.), e può supportare affermazioni complesse (ad esempio, è possibile specificare una ricerca su squadre U11 che hanno un nome di squadra che inizia con "Fr" o finisce con "al"). </p> + +<p>Il frammento di codice mostra una funzione di visualizzazione (gestore di risorse) per la visualizzazione di tutti i nostri team U09. La linea in grassetto mostra come possiamo usare l'API della query del modello per filtrare per tutti i record dove il campo <code>team_level</code> ha esattamente il testo 'U09' (notare come questo criterio è passato alla funzione <code>filter()</code> come argomento con il nome del campo e il tipo di match separati da un doppio underscore: <strong>team_level__exact</strong>).</p> + +<pre class="brush: python notranslate">## filename: views.py + +from django.shortcuts import render +from .models import Team + +def index(request): + <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong> + context = {'youngest_teams': list_teams} + return render(request, '/best/index.html', context) +</pre> + +<dl> +</dl> + +<p>Questa funzione utilizza la funzione <code>render()</code> per creare la <code>HttpResponse </code>che viene inviata al browser. Questa funzione è una <em>scorciatoia</em>; crea un file HTML combinando un template HTML specificato e alcuni dati da inserire nel template (forniti nella variabile denominata "<code>context</code>"). Nella sezione successiva mostriamo come il template ha i dati inseriti per creare l'HTML.</p> + +<h3 id="Visualizzazione_dei_dati_HTML_templates">Visualizzazione dei dati (HTML templates)</h3> + +<p>I sistemi di template consentono di specificare la struttura di un documento di output, utilizzando dei segnaposto per i dati che verranno compilati al momento della generazione di una pagina. I template sono spesso usati per creare HTML, ma possono anche creare altri tipi di documenti. Django supporta sia il suo sistema di template nativo che un'altra popolare libreria Python chiamata Jinja2 out of the box (può anche essere realizzata per supportare altri sistemi se necessario). </p> + +<p>Il frammento di codice mostra come potrebbe apparire il template HTML chiamato dalla funzione <code>render()</code> nella sezione precedente. Questo template è stato scritto partendo dal presupposto che avrà accesso ad una variabile di lista chiamata <code>youngest_teams</code> al momento del rendering (contenuta nella variabile <code>context </code>all'interno della funzione <code>render()</code> di cui sopra). All'interno dello scheletro HTML abbiamo un'espressione che prima controlla se la variabile <code>youngest_teams</code> esiste, e poi la itera in un ciclo <code>for</code>. Su ogni iterazione il template mostra il valore <code>team_name</code> di ogni squadra in un elemento {{htmlelement("li")}}.</p> + +<pre class="brush: python notranslate">## filename: best/templates/best/index.html + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Home page</title> +</head> +<body> + {% if youngest_teams %} + <ul> + {% for team in youngest_teams %} + <li>\{\{ team.team_name \}\}</li> + {% endfor %} + </ul> + {% else %} + <p>No teams are available.</p> + {% endif %} +</body> +</html></pre> + +<h2 id="Cosaltro_si_può_fare">Cos'altro si può fare?</h2> + +<p>Le sezioni precedenti mostrano le principali caratteristiche che utilizzerete in quasi tutte le applicazioni web: URL mapping, views, modelli e templates. Solo alcune delle altre cose fornite da Django includono: </p> + +<ul> + <li><strong>Forms</strong>: I forms HTML sono utilizzati per raccogliere i dati degli utenti per l'elaborazione sul server. Django semplifica la creazione, la validazione e l'elaborazione dei moduli.</li> + <li><strong>L'autenticazione dell'utente e i permessi</strong>: Django include un robusto sistema di autenticazione degli utenti e di permessi che è stato costruito pensando alla sicurezza. </li> + <li><strong>Caching</strong>: La creazione dinamica dei contenuti è molto più intensa (e lenta) dal punto di vista computazionale rispetto ai contenuti statici. Django fornisce una cache flessibile in modo da poter memorizzare tutta o parte di una pagina renderizzata in modo che non venga riprodotta, tranne quando necessario.</li> + <li><strong>Sito di amministrazione</strong>: Il sito di amministrazione di Django è incluso di default quando si crea un'applicazione utilizzando lo scheletro di base. Rende banalmente facile fornire una pagina di amministrazione per gli amministratori del sito per creare, modificare e visualizzare qualsiasi modello di dati nel vostro sito</li> + <li><strong>Serialising </strong> Django rende facile serializzare e servire i vostri dati come XML o JSON. Questo può essere utile quando si crea un servizio web (un sito web che serve esclusivamente dati da consumare da altre applicazioni o siti, e non visualizza nulla di per sé), o quando si crea un sito web in cui il codice lato client gestisce tutti i rendering dei dati.</li> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>Congratulazioni, hai completato il primo passo del tuo viaggio Django! Ora dovreste aver compreso i principali vantaggi di Django, un po' della sua storia e più o meno come potrebbero essere le parti principali di un'applicazione Django. Dovreste anche aver imparato alcune cose sul linguaggio di programmazione Python, compresa la sintassi per le liste, le funzioni e le classi.</p> + +<p>Avete già visto un po' di vero codice Django qui sopra, ma a differenza del codice lato client, è necessario impostare un ambiente di sviluppo per eseguirlo. Questo è il nostro prossimo passo.<br> + </p> + +<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/it/docs/Learn/Server-side/Django/Introduzione">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/it/learn/server-side/django/models/index.html b/files/it/learn/server-side/django/models/index.html new file mode 100644 index 0000000000..ec3554f577 --- /dev/null +++ b/files/it/learn/server-side/django/models/index.html @@ -0,0 +1,466 @@ +--- +title: 'Django Tutorial Part 3: Using models' +slug: Learn/Server-side/Django/Models +tags: + - Articolo + - Dati + - Model + - Server + - Tutorial + - data + - django + - imparare + - lezione + - modello + - nuovo +translation_of: Learn/Server-side/Django/Models +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</div> + +<p class="summary">Questo articolo mostra come definire dei modelli per il sito della <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>. Spiega cos'è un modello, come viene dichiarato e alcuni dei principali tipi di campo. Mostra anche brevemente alcuni dei principali modi in cui è possibile accedere ai dati del modello.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a>.</td> + </tr> + <tr> + <th scope="row">Obbiettivi:</th> + <td>Essere in grado di progettare e creare i propri modelli, scegliendo i campi in modo appropriato.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>Le applicazioni web Django accedono e gestiscono i dati tramite oggetti Python denominati modelli. I modelli definiscono la <em>struttura </em>dei dati memorizzati, inclusi i <em>tipi </em>di campo e possibilmente anche la loro dimensione massima,valori predefiniti, opzioni dell'elenco di selezione, testo di aiuto per la documentazione, testo della label per i moduli, ecc. La definizione del modello è indipendente dal database sottostante: è possibile sceglierne uno tra i diversi come parte delle impostazioni del progetto. Una volta scelto il database che si desidera utilizzare, non è necessario interrogarlo direttamente, basta scrivere la struttura del modello e altro codice, e Django gestirà tutto il lavoro sporco di comunicazione con il database.</p> + +<p>Questo tutorial mostra come definire e accedere ai modelli per l'esempio del <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a>.</p> + +<h2 id="Progettare_i_model_per_la_LocalLibrary">Progettare i model per la LocalLibrary</h2> + +<p>Prima di saltare e iniziare a codificare i modelli, vale la pena dedicare alcuni minuti a pensare a quali dati dobbiamo memorizzare e alle relazioni tra i diversi oggetti.</p> + +<p>Sappiamo che abbiamo bisogno di memorizzare informazioni sui libri (titolo, sommario, autore, lingua scritta, categoria, ISBN) e che potremmo avere più copie disponibili (con ID unico globale, stato di disponibilità, ecc.). Potremmo aver bisogno di memorizzare più informazioni sugli autori oltre al loro nome e potrebbero esserci più autori con nomi uguali o simili. Vogliamo essere in grado di ordinare le informazioni in base al titolo del libro, autore, lingua scritta e categoria.</p> + +<p>Quando si progettano i modelli, è logico disporre di modelli separati per ogni "oggetto" (un gruppo di informazioni correlate). In questo caso gli oggetti ovvi sono i libri, le istanze di libri e gli autori</p> + +<p>Potresti anche voler utilizzare i modelli per rappresentare delle opzioni per un elenco di selezione (ad esempio, come un elenco a discesa), piuttosto che codificare le scelte nel sito stesso - questo è consigliato quando tutte le opzioni non sono note in anticipo o potrebbero essere modificate. I candidati ovvi per i modelli in questo caso includono il genere di libro (ad esempio Fantascienza, Poesia francese, ecc.) e la lingua (Inglese, Francese, Giapponese).</p> + +<p>Una volta che abbiamo deciso i nostri modelli e i nostri campi, dobbiamo pensare alle relazioni. Django ti permette di definire relazioni che sono uno a uno (<strong><em>OneToOneField</em></strong>), uno a molti (<em><strong>ForeignKey</strong></em>) e molti a molti (<em><strong>ManyToManyField</strong></em>).Con questo in mente, lo schema di associazione UML qui sotto mostra i modelli che definiremo in questo caso (come schede).</p> + +<p><img alt="LocalLibrary Model UML" src="https://mdn.mozillademos.org/files/16479/local_library_model_uml.png" style="height: 660px; width: 977px;"></p> + +<p>Come sopra, abbiamo creato modelli per book (i dettagli generici del libro), per book instance (lo stato di specifiche copie fisiche del libro disponibile nel sistema) e author. Abbiamo anche deciso di avere un modello per il genere (genre), in modo che i valori possano essere creati/selezionati attraverso l'interfaccia di amministrazione. Abbiamo deciso di non avere un modello per <code>BookInstance:status</code> - abbiamo codificato i valori (<code>LOAN_STATUS</code>) perché non ci aspettiamo che questi cambino. All'interno di ciascuna casella è possibile visualizzare il nome del model, i nomi dei campi e i tipi, nonché i metodi e i relativi tipi di ritorno.</p> + +<p>Il diagramma mostra anche le relazioni tra i modelli, incluse le loro <em>molteplicità</em>. Le molteplicità sono i numeri sul diagramma che mostrano i numeri (massimo e minimo) di ciascun modello che può essere presente nella relazione. Ad esempio, la linea di collegamento tra le caselle mostra che Book e un Genre sono correlati. I numeri vicino al modello Genre mostrano che un Book deve avere uno o più Genres (quanti ne vuoi), mentre i numeri all'altro capo della riga accanto al model Book mostrano che un Genre può avere zero o molti Books associati.</p> + +<div class="note"> +<p><strong>Nota</strong>: La prossima sezione fornisce un manuale di base che spiega come vengono definiti e utilizzati i models. Mentre lo leggi, considera come costruiremo ciascuno dei modelli nel diagramma sopra.</p> +</div> + +<h2 id="Fondamenti_del_modello">Fondamenti del modello</h2> + +<p>Questa sezione fornisce una breve panoramica di come viene definito un model e alcuni dei campi e argomenti di campo più importanti.</p> + +<h3 id="Definizione_del_modello">Definizione del modello</h3> + +<p>I model vengono generalmente definiti nel file <strong>models.py</strong> di una applicazione. Sono implementati come sottoclassi di <code>django.db.models.Model</code>, e possono includere campi, metodi e metadati. Il frammento di codice seguente mostra un modello "tipico", denominato <code>MyModelName</code>:</p> + +<pre>from django.db import models + +class MyModelName(models.Model): + """A typical class defining a model, derived from the Model class.""" + + # Fields + my_field_name = models.CharField(max_length=20, help_text='Enter field documentation') + ... + + # Metadata + class Meta: + ordering = ['-my_field_name'] + + # Methods + def get_absolute_url(self): + """Returns the url to access a particular instance of MyModelName.""" + return reverse('model-detail-view', args=[str(self.id)]) + + def __str__(self): + """String for representing the MyModelName object (in Admin site etc.).""" + return self.my_field_name</pre> + +<p>Nelle sezioni seguenti esploreremo in dettaglio ciascuna funzionalità all'interno del modello:</p> + +<h4 id="Campi">Campi</h4> + +<p>Un modello può avere un numero arbitrario di campi, di qualsiasi tipo - ognuno rappresenta una colonna di dati che vogliamo memorizzare in una delle nostre tabelle del database. Ogni record di database (riga) consisterà in uno di ciascun valore di quei campi. Osserviamo l'esempio seguente:</p> + +<pre class="brush: js">my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')</pre> + +<p>Il nostro esempio precedente ha un singolo campo chiamato <code>my_field_name</code>, di tipo <code>models.CharField</code> — che significa che questo campo conterrà stringhe di caratteri alfanumerici. I tipi di campo vengono assegnati utilizzando classi specifiche, che determinano il tipo di record utilizzato per memorizzare i dati nel database, insieme ai criteri di convalida da utilizzare quando i valori vengono ricevuti da un form HTML (vale a dire ciò che costituisce un valore valido). I tipi di campo possono anche prendere argomenti che specificano ulteriormente come il campo è memorizzato o può essere utilizzato. In questo caso stiamo dando al nostro campo due argomenti:</p> + +<ul> + <li><code>max_length=20</code> — Indica che la lunghezza massima di un valore in questo campo è di 20 caratteri.</li> + <li><code>help_text='Enter field documentation'</code> — fornisce un'etichetta di testo da visualizzare per aiutare gli utenti a sapere quale valore fornire quando questo valore deve essere inserito da un utente tramite un form HTML.</li> +</ul> + +<p>Il nome del campo viene utilizzato per fare riferimento ad esso in query e templates. I campi hanno anche un'etichetta, che è specificata come argomento (<code>verbose_name</code>) o dedotto variando in maiuscola la prima lettera del nome della variabile del campo e sostituendo qualsiasi underscore con uno spazio (ad esempio <code>my_field_name</code> avrebbe una etichetta di default <em>My field name</em>).</p> + +<p>L'ordine in cui i campi sono dichiarati influenzerà il loro ordine predefinito se un modello viene reso in un modulo (ad esempio nel sito di amministrazione), tuttavia questo ordine può essere sovrascritto.</p> + +<h5 id="Argomenti_comuni_nei_campi">Argomenti comuni nei campi</h5> + +<p>I seguenti argomenti comuni possono essere utilizzati per dichiarare molti dei diversi tipi di campo:</p> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#help-text">help_text</a>: Fornisce un'etichetta di testo per i form HTML (ad esempio nel sito di amministrazione), come descritto sopra.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#verbose-name">verbose_name</a>: Un nome leggibile dall'uomo per il campo utilizzato nelle etichette di campo. Se non specificato, Django dedurrà il nome dettagliato predefinito dal nome del campo.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#default">default</a>: Il valore predefinito per il campo. Questo può essere un valore o un oggetto callable, nel qual caso l'oggetto verrà chiamato ogni volta che viene creato un nuovo record.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#null">null</a>: Se <code>True</code>, Django memorizzerà i valori bianchi come <code>NULL</code> nel database per i campi dove questo è appropriato (un campo <code>CharField</code> per esempio memorizzerà invece una stringa vuota). Per default è <code>False</code>.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#blank">blank</a>: Se <code>True</code>, il campo può essere vuoto nelle tue forme. L'impostazione predefinita è <code>False</code>, il che significa che la convalida del modulo di Django ti costringerà a inserire un valore. Spesso usato con <code>null=True</code> , perché se hai intenzione di consentire valori vuoti, vuoi anche che il database sia in grado di rappresentarli in modo appropriato.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#choices">choices</a>: Un gruppo di scelte per questo campo. Se viene fornito, il widget modulo corrispondente predefinito sarà una casella di selezione con queste scelte al posto del campo di testo standard.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#primary-key">primary_key</a>: Se <code>True</code>, imposta il campo corrente come chiave primaria per il modello (una chiave primaria è una colonna di database speciale designata per identificare in modo univoco tutti i diversi record di tabella). Se non viene specificato alcun campo come chiave primaria, Django aggiungerà automaticamente un campo per questo scopo.</li> +</ul> + +<p>Ci sono molte altre opzioni — consultare <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-options">full list of field options here</a>.</p> + +<h5 id="Tipi_di_campo_più_comuni">Tipi di campo più comuni</h5> + +<p>Il seguente elenco descrive alcuni dei tipi di campi più comunemente usati.</p> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.CharField">CharField</a> è usato per definire stringhe di lunghezza fissa di dimensioni medio-piccole. Devi specificare il <code>max_length</code> dei dati memorizzati.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.TextField">TextField</a> viene utilizzato per stringhe di lunghezza arbitraria di grandi dimensioni. Puoi specificare la <code>max_length</code> per il campo, ma questo viene utilizzato solo quando il campo viene visualizzato nei moduli (non viene applicato a livello di database).</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a> è un campo per la memorizzazione di valori interi (numero intero) e per la convalida di valori immessi come numeri interi nei moduli.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#datefield">DateField</a> e <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#datetimefield">DateTimeField</a> sono utilizzati per storare/rappresentare date e data/time (in Python come oggetti <code>datetime.date</code> e <code>datetime.datetime</code>, rispettivamente). Questi campi possono essere dichiarati con dei parametri (mutualmente esclusivi) <code>auto_now=True</code> (per settare la data odierna automaticamente ogni volta che il modello viene salvato), <code>auto_now_add</code> (per settare la data solo quando il modello viene creato per la prima volta) , e <code>default</code> (per settare una data di default che possa essere sovrascritta dall'utente).</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#emailfield">EmailField</a> per storare e validare indirizzi mail.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#filefield">FileField</a> e <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#imagefield">ImageField</a> per uploadare file e immagini rispettivamente (<code>ImageField</code> aggiunge semplicemente ulteriore convalida che il file caricato è un'immagine). Questi hanno parametri per definire come e dove sono memorizzati i file caricati.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#autofield">AutoField</a> tipologia speciale di <code>IntegerField</code> con autoincremento. Una chiave primaria di questo tipo viene automaticamente aggiunta al tuo modello se non ne specifichi esplicitamente una.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#foreignkey">ForeignKey</a> è usato per specificare una relazione uno-a-molti con un altro modello di database (ad esempio, un'auto ha un produttore, ma un produttore può fare molte automobili). Il lato "uno" della relazione è il modello che contiene la chiave.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#manytomanyfield">ManyToManyField</a> è usato per specificare una relazione molti-a-molti (ad esempio un libro può avere diversi generi e ogni genere può contenere diversi libri). Nella nostra app di libreria li useremo in modo molto simile a <code>ForeignKeys</code>, ma possono essere usati in modi più complicati per descrivere le relazioni tra i gruppi. Questi hanno il parametro <code>on_delete</code> per definire cosa succede quando il record associato viene cancellato (ad esempio un valore <code>models.SET_NULL</code> setta il valore a <code>NULL</code>).</li> +</ul> + +<p>Esistono molti altri tipi di campi, compresi i campi per diversi tipi di numeri (interi grandi, interi piccoli, float), booleani, URL, slug, ID univoci e altre informazioni "temporali" (durata, tempo, ecc.) . È possibile visualizzare la <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-types">full list here</a>.</p> + +<h4 id="Metadata">Metadata</h4> + +<p>Puoi dichiarare metadata per il tuo Modello utilizzando <code>class Meta</code>, come mostrato sotto.</p> + +<pre class="brush: python">class Meta: + ordering = ['-my_field_name'] +</pre> + +<p>Una delle funzionalità più utili di questi metadati consiste nel controllare l'ordinamento predefinito dei record restituiti quando si esegue una query sul tipo di modello. A tale scopo, specificare l'ordine di corrispondenza in un elenco di nomi di campi sull'attributo <code>ordering</code> come sopra. L'ordine dipende dal tipo di campo (i campi dei caratteri sono ordinati alfabeticamente, mentre i campi delle date sono ordinati in ordine cronologico). Come mostrato sopra, puoi anteporre il nome del campo al simbolo meno (-) per invertire l'ordine.</p> + +<p>Per esempio, se scegliamo un sort dei libri come nell'esempio per default:</p> + +<pre class="brush: python">ordering = ['title', '-pubdate']</pre> + +<p>i libri saranno ordinati alfabeticamente per titolo, dalla A alla Z e quindi per data di pubblicazione all'interno di ciascun titolo, dal più recente al più vecchio. Un altro attributo comune è <code>verbose_name</code>, un nome dettagliato per la classe in forma singolare e plurale:</p> + +<pre class="brush: python">verbose_name = 'BetterName'</pre> + +<p>Altri attributi utili consentono di creare e applicare nuove "autorizzazioni di accesso" per il modello (le autorizzazioni predefinite vengono applicate automaticamente), consentire l'ordinamento in base a un altro campo o dichiarare che la classe è "astratta" (una classe base per cui non è possibile creare record, e sarà invece derivato da creare altri modelli). Molte altre opzioni di metadati controllano quale database deve essere utilizzato per il modello e come vengono archiviati i dati (questi sono davvero utili solo se è necessario associare un modello a un database esistente).</p> + +<p>La lista completa di opzioni per i metadati: <a href="https://docs.djangoproject.com/en/2.1/ref/models/options/">Model metadata options</a> (Django docs).</p> + +<h4 id="Metodi">Metodi</h4> + +<p>Un modello può avere metodi.</p> + +<p><strong>In ogni caso, in ogni modello è necessario definire il metodo standard della classe Python <code>__str__()</code> per restituire una stringa leggibile dall'uomo per ciascun oggetto.</strong> Questa stringa viene utilizzata per rappresentare singoli record nel sito di amministrazione (e in qualsiasi altro punto è necessario fare riferimento a un'istanza del modello). Spesso questo restituirà un titolo o un campo nome dal modello.</p> + +<pre class="brush: python">def __str__(self): + return self.field_name</pre> + +<p>Un altro metodo comune da includere nei modelli Django è <code>get_absolute_url ()</code>, che restituisce un URL per la visualizzazione di record di modelli individuali sul sito Web (se si definisce questo metodo, Django aggiungerà automaticamente un pulsante "Visualizza sul sito" alle schermate di modifica dei record del modello in il sito di amministrazione). Di seguito viene mostrato un tipico pattern per <code>get_absolute_url ().</code></p> + +<pre class="brush: python">def get_absolute_url(self): + """Returns the url to access a particular instance of the model.""" + return reverse('model-detail-view', args=[str(self.id)]) +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Supponendo che utilizzerai URLs come <code>/myapplication/mymodelname/2</code> per visualizzare record individuali per il tuo modello (dove "2" è l'<code>id</code> per un particolare record), dovrai creare un mapper URL per passare la risposta e l'id a una "model detail view" (vista di dettaglio del modello) (che farà il lavoro richiesto per mostrare il record). la funzione <code>reverse()</code> sopra effettua un "reverse" del tuo url mapper (nel caso sopra nominato <em>'model-detail-view'</em>) per creare un URL nel formato corretto.</p> + +<p>Ovviamente per fare questo lavoro devi ancora scrivere la mappatura degli URL, la vista e il template!</p> +</div> + +<p>Puoi anche definire altri metodi che ti piacciono e chiamarli dal tuo codice o template (a condizione che non prendano alcun parametro).</p> + +<h3 id="Gestone_del_modello">Gestone del modello</h3> + +<p>Una volta definite le classi model, è possibile utilizzarle per creare, aggiornare o eliminare record e per eseguire query per ottenere tutti i record o particolari sottoinsiemi di record. Ti mostreremo come farlo nel tutorial quando definiremo le nostre views, ma ecco un breve sommario.</p> + +<h4 id="Creare_e_modificare_record">Creare e modificare record</h4> + +<p>Per creare un record puoi definire una istanza del modello e poi richiamare <code>save()</code>.</p> + +<pre class="brush: python"># Create a new record using the model's constructor. +record = MyModelName(my_field_name="Instance #1") + +# Save the object into the database. +record.save() +</pre> + +<div class="note"> +<p><strong>Note</strong>: Se non hai dichiarato alcun campo come <code>primary_key</code>, al nuovo record ne verrà assegnato uno automaticamente, con nome del campo <code>id</code>. È possibile interrogare questo campo dopo aver salvato il record precedente, esso dovrebbe avere il valore 1.</p> +</div> + +<p>È possibile accedere ai campi in questo nuovo record e modificarne i valori utilizzando la sintassi dot (.) e per memorizzare nel database i valori modificati devi chiamare <code>save()</code>.</p> + +<pre class="brush: python"># Access model field values using Python attributes. +print(record.id) # should return 1 for the first record. +print(record.my_field_name) # should print 'Instance #1' + +# Change record by modifying the fields, then calling save(). +record.my_field_name = "New Instance Name" +record.save()</pre> + +<h4 id="Ricercare_record">Ricercare record</h4> + +<p>È possibile cercare i record che soddisfano determinati criteri utilizzando l'attributo <code>objects</code> del model (fornito dalla classe base).</p> + +<div class="note"> +<p><strong>Nota</strong>: Spiegare come cercare i record usando il modello "astratto" nei nomi dei campi può generare un po 'di confusione. Nella discussione seguente faremo riferimento a un modello <code>Book</code> con campi <code>title</code> e <code>genre</code>, in cui genre è anche lui un modello con un singolo campo <code>name</code>.</p> +</div> + +<p>Possiamo ottenere tutti i record per un modello come un <code>QuerySet</code>, utilizzando<strong> </strong><code>objects.all()</code><strong>.</strong> Il <code>QuerySet</code> è un oggetto iterabile, ovvero contiene un numero di oggetti che è possibile scorrere/iterare/ciclare.</p> + +<pre class="brush: python">all_books = Book.objects.all() +</pre> + +<p>Il metodo <code>filter()</code> di Django ci consente di filtrare il <code>QuerySet</code> restituito per matchare un campo di testo o numerico specificato a un particolare criterio. Ad esempio, per filtrare i libri che contengono "wild" nel titolo e poi contarli, potremmo fare quanto segue.</p> + +<pre class="brush: python">wild_books = Book.objects.filter(title__contains='wild') +number_wild_books = wild_books.count() +</pre> + +<p>I campi da matchare e il tipo di corrispondenza sono definiti nel nome del parametro del filtro, utilizzando il formato: <code>field_name__match_type</code> (notare il <em>doppio underscore</em> tra <code>title</code> e <code>contains</code> sopra). In alto stiamo filtrando <code>title</code> con una corrispondenza case-sensitive. Esistono molti altri tipi di corrispondenze: <code>icontains</code> (case-insensitive), <code>iexact</code> (corrispondenza esatta case-insensitive), <code>exact</code> (corrispondenza esatta case-sensitive) e <code>in</code>, <code>gt</code> (grater than), <code>startswith</code>, ecc. Consultare la <a href="https://docs.djangoproject.com/en/2.1/ref/models/querysets/#field-lookups">lista completa qui</a>.</p> + +<p>In alcuni casi sarà necessario filtrare su un campo che definisce una relazione uno-a-molti con un altro modello (per esempio una <code>ForeignKey</code>). In questo caso è possibile "indicizzare" i campi all'interno del modello correlato con un doppio underscore aggiuntivo. Quindi, ad esempio, per filtrare i libri con uno specifico pattern genre, dovrai indicizzare al <code>name</code> attraverso il campo <code>genre</code>, come mostrato sotto:</p> + +<pre class="brush: python"># Will match on: Fiction, Science fiction, non-fiction etc. +books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction') +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Puoi usare gli underscores (__) per navigare su tutti i livelli di relazione che ti servono (<code>ForeignKey</code>/<code>ManyToManyField</code>). Per esempio, un <code>Book</code> che aveva diversi tipi, definiti utilizzando un'ulteriore relazione "cover" potrebbe avere un nome di parametro: <code>type__cover__name__exact='hard'.</code></p> +</div> + +<p>C'è molto di più che puoi fare con le query, comprese le ricerche all'indietro dai modelli correlati, concatenare i filtri, restituire un insieme più piccolo di valori, ecc. Per ulteriori informazioni, vedere <a href="https://docs.djangoproject.com/en/2.1/topics/db/queries/">Making queries</a> (Django Docs).</p> + +<h2 id="Definire_i_Models_della_LocalLibrary">Definire i Models della LocalLibrary</h2> + +<p>In questa sezione inizieremo a definire i modelli per la libreria. Apri <em>models.py</em> (in<em> /locallibrary/catalog/</em>). Le righe di codice iniziali importano il modulo <em>models</em>, che contiene la classe di base <code>models.Model</code> da cui i nostri modelli erediteranno.</p> + +<pre class="brush: python">from django.db import models + +# Create your models here.</pre> + +<h3 id="Modello_Genre">Modello Genre</h3> + +<p>Copia il codice del modello <code>Genre</code> mostrato sotto e incollalo alla fine del file <code>models.py</code>. Questo modello viene utilizzato per memorizzare informazioni sulla categoria di libri, ad esempio se si tratta di narrativa o saggistica, storia romantica o militare, ecc. Come menzionato sopra, abbiamo creato il Genre come model piuttosto che come testo libero o elenco di selezione <strong>in modo che i possibili valori possano essere gestiti tramite il database anziché essere hard-coded</strong>.</p> + +<pre class="brush: python">class Genre(models.Model): + """Model representing a book genre.""" + name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)') + + def __str__(self): + """String for representing the Model object.""" + return self.name</pre> + +<p>Il modello ha un singolo campo <code>CharField</code> (<code>name</code>), che descrive il genere (limitato a 200 caratteri e con un <code>help_text</code>. Alla fine del modello definiamo un metodo <code>__str__()</code>, che restituisce semplicemente il nome del genere definito da un particolare record. Nessun nome dettagliato (verbose) è stato definito, quindi il campo nel form verrà chiamato <code>Name</code>.</p> + +<h3 id="Modello_Book">Modello Book</h3> + +<p>Copia il modello Book in basso e incollalo nuovamente nella parte inferiore del file. Il modello del libro rappresenta tutte le informazioni su un libro disponibile in senso generale, ma non una particolare "istanza" fisica o "copia" disponibile per il prestito. Il modello usa un campo <code>CharField</code> per rappresentare <code>title</code> e <code>isbn</code> del libro (notare come <code>isbn</code> specifica la sua etichetta come "ISBN" utilizzando il primo parametro senza nome, in caso contrario la label di default sarebbe "Isbn"). Il modello usa <code>TextField</code> per il <code>summary</code>, perchè potrebbe essere un campo abbastanza lungo.</p> + +<pre class="brush: python">from django.urls import reverse # Used to generate URLs by reversing the URL patterns + +class Book(models.Model): + """Model representing a book (but not a specific copy of a book).""" + title = models.CharField(max_length=200) + + # Foreign Key used because book can only have one author, but authors can have multiple books + # Author as a string rather than object because it hasn't been declared yet in the file + author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True) + + summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book') + isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>') + + # ManyToManyField used because genre can contain many books. Books can cover many genres. + # Genre class has already been defined so we can specify the object above. + genre = models.ManyToManyField(Genre, help_text='Select a genre for this book') + + def __str__(self): + """String for representing the Model object.""" + return self.title + + def get_absolute_url(self): + """Returns the url to access a detail record for this book.""" + return reverse('book-detail', args=[str(self.id)]) +</pre> + +<p>Genre è un campo <code>ManyToManyField</code>, in modo che un libro possa avere più generi e un genere possa avere molti libri. L'autore è dichiarato come <code>ForeignKey</code>, quindi ogni libro avrà un solo autore, ma un autore può avere molti libri (in pratica un libro potrebbe avere più autori, ma non in questa implementazione semplificata!)</p> + +<p>In entrambi i tipi di campo, la classe del modello correlata viene dichiarata come il primo parametro senza nome utilizzando la classe del modello o una stringa contenente il nome del modello correlato. È necessario utilizzare il nome del modello come stringa se la classe associata non è stata ancora definita in questo file prima che venga referenziata! Gli altri parametri di interesse nel campo <code>author</code> sono <code>null=True,</code> che consente al database di memorizzare un valore <code>Null</code> se nessun autore viene selezionato e <code>on_delete=models.SET_NULL</code>, che imposterà il valore dell'autore su <code>Null</code> se l'autore associato al record viene cancellato.</p> + +<p>Inoltre il modello definisce <code>__str__()</code> , utilizzando il titolo del libro <code>title</code> per rappresentare un record di <code>Book</code>. L'ultimo metodo, <code>get_absolute_url()</code> ritorna un URL che può essere usato per accedere a un record di dettaglio per questo modello (per farlo funzionare dovremo definire una mappatura URL che abbia il nome <code>book-detail</code>, e una view e un template associati).</p> + +<h3 id="Modello_BookInstance">Modello BookInstance</h3> + +<p>Copia il modello <code>BookInstance</code> sotto gli altri modelli. <code>BookInstance</code> rappresenta una copia specifica di un libro che potrebbe essere presa in prestito da qualcuno e include informazioni sul fatto che la copia sia disponibile o sulla data in cui è prevista la restituzione, o dettagli sulla versione e un ID univoco per il libro nella biblioteca.</p> + +<p>Alcuni metodi e campi suoneranno familiari. Il modello utilizza</p> + +<ul> + <li><code>ForeignKey</code> per identificare il <code>Book</code> (ogni book ha possibilità di avere molte copie, ma una copia può avere un solo <code>Book</code>).</li> + <li><code>CharField</code> per rappresentare l'edizione del libro.</li> +</ul> + +<pre class="brush: python">import uuid # Required for unique book instances + +class BookInstance(models.Model): + """Model representing a specific copy of a book (i.e. that can be borrowed from the library).""" + id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text='Unique ID for this particular book across whole library') + book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True) + imprint = models.CharField(max_length=200) + due_back = models.DateField(null=True, blank=True) + + LOAN_STATUS = ( + ('m', 'Maintenance'), + ('o', 'On loan'), + ('a', 'Available'), + ('r', 'Reserved'), + ) + + status = models.CharField( + max_length=1, + choices=LOAN_STATUS, + blank=True, + default='m', + help_text='Book availability', + ) + + class Meta: + ordering = ['due_back'] + + def __str__(self): + """String for representing the Model object.""" + return f'{self.id} ({self.book.title})'</pre> + +<p>Dichiaramo una ulteriore serie di nuovi campi di altri tipi:</p> + +<ul> + <li><code>UUIDField</code> usato per l'<code>id</code> per impostarlo come <code>primary_key</code> per questo modello. Questo tipo di campo alloca un valore globalmente univoco per ogni istanza (una per ogni libro che è possibile trovare nella biblioteca).</li> + <li><code>DateField</code> usato per la data <code>due_back</code> (data in cui il libro dovrebbe ritornare disponibile dopo essere stato in prestito o in manutenzione). Questo valore può essere <code>blank</code> o <code>null</code> (necessario per quando il libro è disponibile). Il metadato del modello (<code>Class Meta</code>) utilizza questo campo per ordinare i record quando vengono restituiti da una query.</li> + <li><code>status</code> è un <code>CharField</code> che definisce una scelta/lista di selezione. Come puoi vedere, definiamo una tupla contenente tuple di coppie chiave-valore (<strong>LOAN_STATUS</strong>) e la passiamo all'argomento di <strong>choices</strong>. Il valore in una coppia chiave/valore è un valore di visualizzazione che un utente può selezionare, mentre le chiavi sono i valori che vengono effettivamente salvati se l'opzione è selezionata. Abbiamo anche impostato un valore predefinito di "m" (<em>manutenzione</em>) poiché i libri inizialmente non saranno disponibili prima di essere immagazzinati sugli scaffali.</li> +</ul> + +<p><code>__str__()</code> rappresenta l'oggetto <code>BookInstance</code> usando una combinazione del suo id univoco e del titolo del libro.</p> + +<div class="note"> +<p><strong>Nota</strong>: un po' di Python:</p> + +<ul> + <li>A partire da Python 3.6, puoi utilizzare la sintassi di interpolazione delle stringhe (anche nota come f-strings): <code>f'{self.id} ({self.book.title})'</code>.</li> + <li>in altre versioni di questo tutorial, più vecchie, usavamo una stringa formattata (<a href="https://www.python.org/dev/peps/pep-3101/">formatted string</a>), che è un altro modo valido di formattare le stringhe in Python (esempio: <code>'{0} ({1})'.format(self.id,self.book.title)</code>).</li> +</ul> +</div> + +<h3 id="Modello_Autore">Modello Autore</h3> + +<p>Copia il modello <code>Author</code> (che trovi qui sotto) dopo il codice esistente in <strong>models.py</strong>.</p> + +<pre class="brush: python">class Author(models.Model): + """Model representing an author.""" + first_name = models.CharField(max_length=100) + last_name = models.CharField(max_length=100) + date_of_birth = models.DateField(null=True, blank=True) + date_of_death = models.DateField('Died', null=True, blank=True) + + class Meta: + ordering = ['last_name', 'first_name'] + + def get_absolute_url(self): + """Returns the url to access a particular author instance.""" + return reverse('author-detail', args=[str(self.id)]) + + def __str__(self): + """String for representing the Model object.""" + return f'{self.last_name}, {self.first_name}' + +</pre> + +<p>Tutti i campi/metodi dovrebbero ora essere familiari. Il modello definisce un autore avente un nome, un cognome, una data di nascita e la data di morte (entrambe opzionali). Esso specifica che per impostazione predefinita <code>__str__()</code> restituisca il nome nell'ordine <em>cognome</em> <em>nome</em>. Il metodo <code>get_absolute_url()</code> inverte il mapping degli URL di <code>author-detail</code> per ottenere l'URL per la visualizzazione di un singolo autore.</p> + +<h2 id="Rieseguire_le_migrazioni_del_database">Rieseguire le migrazioni del database</h2> + +<p>Tutti i modelli sono stati creati. Rilanciamo la migrazione del database per aggiungerli effettivamente al database.</p> + +<pre><code>python3 manage.py makemigrations +python3 manage.py migrate</code></pre> + +<h2 id="Modello_del_linguaggio_—_Sfida">Modello del linguaggio — Sfida</h2> + +<p>Immagina che un benefattore locale doni un certo numero di nuovi libri scritti in un'altra lingua (diciamo, Farsi). La sfida è capire come questi sarebbero meglio rappresentati nel nostro sito web della biblioteca e poi aggiungerli ai model.</p> + +<p>Alcune considerazioni:</p> + +<ul> + <li>"Language" dovrebbe essere associato con <code>Book</code>, <code>BookInstance</code>, o altri objects?</li> + <li>I diversi linguaggi dovrebbero essere rappresentati utilizzando un model, una casella di testo o una lista codificata a mano?</li> +</ul> + +<p>Dopo aver deciso, aggiungi il campo. Puoi vedere cosa abbiamo deciso su Github <a href="https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py">here</a>.</p> + +<p>Non dimenticare di rieffettuare le migrazioni dopo ogni cambiamento al tuo modello.</p> + +<pre><code>python3 manage.py makemigrations</code><code> +python3 manage.py migrate</code></pre> + +<ul> +</ul> + +<ul> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>In questo articolo abbiamo appreso come sono definiti i modelli, quindi abbiamo utilizzato queste informazioni per progettare e implementare modelli appropriati per il sito Web LocalLibrary.</p> + +<p>A questo punto ci allontaneremo brevemente dalla creazione del sito e controlleremo il sito di amministrazione di Django. Questo sito ci permetterà di aggiungere alcuni dati alla biblioteca, che possiamo quindi visualizzare usando le nostre view e template (ancora da creare).</p> + +<h2 id="Consulta_anche">Consulta anche</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial02/">Writing your first Django app, part 2</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/db/queries/">Making queries</a> (Django Docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/querysets/">QuerySet API Reference</a> (Django Docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/it/learn/server-side/django/sessions/index.html b/files/it/learn/server-side/django/sessions/index.html new file mode 100644 index 0000000000..0706090bd5 --- /dev/null +++ b/files/it/learn/server-side/django/sessions/index.html @@ -0,0 +1,195 @@ +--- +title: 'Django Tutorial Part 7: Sessions framework' +slug: Learn/Server-side/Django/Sessions +tags: + - Articolo + - Principiante + - Python + - Server + - django + - sessioni +translation_of: Learn/Server-side/Django/Sessions +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}</div> + +<p class="summary">Questo tutorial estende il nostro sito <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, aggiungendo un contatore di visite session-based alla home page. Questo è un esempio relativamente semplice, ma mostra come si può usare il session framework per fornire comportamento persistente per utenti anonimi nei tuoi siti.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Completa tutti gli argomenti dei tutorial precedenti, compreso <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Capire come vengono utilizzate le sessioni.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>Il sito <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> che abbiamo creato nei precedenti tutorial permette agli utenti di navigare tra i libri e gli autori nel catalogo. Anche se il contenuto viene generato dinamicamente dal database, ogni utente essenzialmente avrà accesso alle stesse pagine e e gli stessi tipi di informazione quando utilizzano il sito.</p> + +<p>In una biblioteca "reale" potresti desiderare di fornire agli utenti individuali una esperienza customizzata, basata sul loro precedente utilizzo del sito, preferenze, ecc. Per esempio, potresti nascondere messaggi di avviso di cui gli utenti hanno già preso conoscenza la prossima volta che essi visitano il sito, o archiviare e rispettare le loro preferenze (ad esempio, il numero di risultati di ricerca che vogliono mostrato su ogni pagina). </p> + +<p>Il session framework ti consente di implementare questo tipo di comportamento, permettendoti di memorizzare e recuperare dati arbitrari su una base di visitstore per sito (per-site-visitor). </p> + +<h2 id="Cosa_sono_le_sessioni">Cosa sono le sessioni?</h2> + +<p>Tutte le comunicazioni tra browser web e i server avvengono attraverso il prootocollo HTTP, che è <em>stateless</em>. Il fatto che il protocollo sia stateless significa che i messagggi tra il client e il server sono completamente indipendenti da ciascuno degli altri— non esiste la nozione di "sequenza" o comportamento basato sui precedenti messaggi. Di conseguenza, se vuoi avere un sito che tenga traccia delle relazioni che sono in attive con un client, hai bisogno di implementarlo tu stesso.</p> + +<p>Le sessioni sono il meccanismo utilizzato da Django (e dalla maggior parte dell'Internet) per tenere traccia dello "stato" tra il sito e un particolare browser. Le sessioni ti consentono di memorizzare dati arbitrari per browser, e avere questi dati disponibili per il sito ogni volta che il browser si connette. Item individuali di dati associati con la sessione sono quindi referenziati con una "key", la quale è utilizzata sia per rchiviare che per recuperare i dati.</p> + +<p>Django utilizza un cookie contenente uno speciale <em>session id</em> per identificare ciascun browser e la sua sessione associata col sito. I <em>dati</em> della sessione effettiva sono archiviati nel database del sito di default (questo è più sicuro del memorizzare i dati in un cookie, dove sono più vulnerabili a utenti malevoli). Si può configurare Django per memorizzare i dati della sessione in altre posizioni (nella cache, nei file, nei "secure" cookie), ma la posizione di default è una opzione buona e relativamente sicura.</p> + +<h2 id="Abilitare_le_sessioni">Abilitare le sessioni</h2> + +<p>Le sessioni sono state abilitate automaticamente quando abbiamo <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">creato lo scheletro del sito web</a> (nel tutorial 2).</p> + +<p>La configurazione è imnpostata nelle sezioni <code>INSTALLED_APPS</code> e <code>MIDDLEWARE</code> del file di progetto (<strong>locallibrary/locallibrary/settings.py</strong>), come mostrato qui sotto:</p> + +<pre class="brush: python">INSTALLED_APPS = [ + ... +<strong> 'django.contrib.sessions',</strong> + .... + +MIDDLEWARE = [ + ... +<strong> 'django.contrib.sessions.middleware.SessionMiddleware',</strong> + ....</pre> + +<h2 id="Utilizzo_delle_sessioni">Utilizzo delle sessioni</h2> + +<p>Si può accedere all'attributo <code>session</code> nell view dal parametro <code>request</code> (una <code>HttpRequest</code> passata dentro come primo argomento alla view). Questo attributo sessione rappresenta la connessione specifica con l'utente attuale (o per essere più precisi, la connessione al browser attuale, come identificato dal session id nel cookie del browser per questo sito).</p> + +<p>L'attributo <code>session</code> è un oggetto simile a un dizionario (dictionary-like) che puoi leggere e scrivere quante volte vuoi nella tua view, modificandolo come desiderato. Si possono effettuare tutte le normali operazioni dei dictionary, inclusa la cancellazione di tutti i dati, testare se una chiave è presente, ciclare sui dati, ecc. Il più delle volte userete solo l'API standard "dictionary" per ottenere valori e impostare valori.</p> + +<p>I frammenti di codice sotto mostrano come si può ottenere, impostare, e cancellare alcuni dati con la key "<code>my_car</code>", associata alla sessione corrente (browser). </p> + +<div class="note"> +<p><strong>Nota</strong>: Una delle cose belle di Django è che non c'è bisogno di pensare ai meccanismi che legano la sessione alla tua attuale richiesta nella tua view. Se dovessimo usare i frammenti di codice qui sotto nella nostra view, sapremmo che l'informazione su <code>my_car</code> è associata solo al browser che ha inviato la richiesta corrente.</p> +</div> + +<pre class="brush: python"># Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present +my_car = request.session['my_car'] + +# Get a session value, setting a default if it is not present ('mini') +my_car = request.session.get('my_car', 'mini') + +# Set a session value +request.session['my_car'] = 'mini' + +# Delete a session value +del request.session['my_car'] +</pre> + +<p>L'API offre anche un certo numero di altri metodi che sono usati principalmente per gestire il cookie associato alla sessione. Per esampio, ci sono metodi per testare che i cookie sono supportati nel browser client, per impostare e controllare la data di scadenza del cookie, e per cancellare le sessioni scadute dal data store. Puoi trovare informazioni sulla API completa in <a href="https://docs.djangoproject.com/en/2.1/topics/http/sessions/">How to use sessions</a> (Django docs).</p> + +<h2 id="Salvare_i_dati_di_sessione">Salvare i dati di sessione</h2> + +<p>Di default, Django salva solamente il database di sessione e invia il session cookie al client quando la sessione è stata <em>modificata</em> (assegnata) o<em>cancellata</em>. Se si sta aggiornando qualche dato utilizzando la sua session key come mostrato nella precedente sezione, allora non devi preoccuparti di questo! Per esempio:</p> + +<pre class="brush: python"># This is detected as an update to the session, so session data is saved. +request.session['my_car'] = 'mini'</pre> + +<p>Se si stanno aggiornando alcune informazioni <em>all'interno</em> dei dati di sessione, allora Django non riconoscerà che hai fatto una modifica alla sessione e salva i dati (per esempio, se dovessi modificare i dati "<code>wheels</code>" all'interno dei tuoi dati "<code>my_car</code>", come mostrato sotto). In questo caso avrai bisogno di contrassegnare esplicitamente la sessione come modificata.</p> + +<pre class="brush: python"># Session object not directly modified, only data within the session. Session changes not saved! +request.session['my_car']['wheels'] = 'alloy' + +# Set session as modified to force data updates/cookie to be saved. +<code>request.session.modified = True</code> +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Si può modificare il comportamento in modo che il sito aggiorni il database/invii cookie su ciascuna request aggiungendo <code>SESSION_SAVE_EVERY_REQUEST = True</code> nelle tue impostazioni di progetto (<strong>locallibrary/locallibrary/settings.py</strong>).</p> +</div> + +<h2 id="Semplice_esempio_—_ottenere_il_conteggio_delle_visite">Semplice esempio — ottenere il conteggio delle visite</h2> + +<p>Come esempio semplice del mondio reale, aggiorneremo la nostra biblioteca per dire all'utente attuale quante volte essi hanno visitato la home page della <em>LocalLibrary</em>. </p> + +<p>Apri <strong>/locallibrary/catalog/views.py</strong>, e effettua le modifiche mostrate in grassetto sotto. </p> + +<pre class="brush: python">def index(request): + ... + + num_authors = Author.objects.count() # The 'all()' is implied by default. + +<strong> # Number of visits to this view, as counted in the session variable. + num_visits = request.session.get('num_visits', 0) + request.session['num_visits'] = num_visits + 1</strong> + +<strong> context = { + 'num_books': num_books, + 'num_instances': num_instances, + 'num_instances_available': num_instances_available, + 'num_authors': num_authors, + 'num_visits': num_visits, + }</strong> + + # Render the HTML template index.html with the data in the context variable. + return render(request, 'index.html', context=context)</pre> + +<p>Qui prima otteniamo il valore della session key <code>'num_visits'</code>, impostiamo il valore a 0 se esso non è stato precedentemente impostato. Ogni volta che viene ricevuta una richiesta, allora si incrementa il valore e lo si memorizza di nuovo nella sessione (per la prossima volta che l'utente visita la pagina). La variabile <code>num_visits</code> viene quindi passata al template nella nostra variabile context.</p> + +<div class="note"> +<p><strong>Nota</strong>: Potremmo anche verificare se i cookie sono anche supportati nel browser qui (vedi <a href="https://docs.djangoproject.com/en/2.1/topics/http/sessions/">How to use sessions</a> per esempi) o progettare la nostra UI in modo che non importa se i cookie sono supportati o meno.</p> +</div> + +<p>Aggiungi la linea che trovi alla fine del blocco qui sotto al tuo template HTML principale (<strong>/locallibrary/catalog/templates/index.html</strong>) alla fine della sezione "Dynamic content" per mostrare la variabile context:</p> + +<pre class="brush: html"><h2>Dynamic content</h2> + +<p>The library has the following record counts:</p> +<ul> + <li><strong>Books:</strong> \{{ num_books }}</li> + <li><strong>Copies:</strong> \{{ num_instances }}</li> + <li><strong>Copies available:</strong> \{{ num_instances_available }}</li> + <li><strong>Authors:</strong> \{{ num_authors }}</li> +</ul> + +<strong><p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p></strong> +</pre> + +<p>Salva le modifiche e riavvia il server di test. Ogni volta che tu farai un refresh della pagina, il numero dovrebbe aggiornarsi.</p> + +<ul> +</ul> + +<h2 id="Riepilogo">Riepilogo</h2> + +<p>Ora sai come è facile utilizzare per migliorare la tua interazione con utenti <em>anonimi</em>. </p> + +<p>Nei nostri prossimi articoli spiegheremo il framework per l'autenticazione ed autorizzazione (permessi), e ti mostreremo come supportare gli account user.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/http/sessions/">How to use sessions</a> (Django docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}</p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/it/learn/server-side/django/skeleton_website/index.html b/files/it/learn/server-side/django/skeleton_website/index.html new file mode 100644 index 0000000000..1f5d7117ff --- /dev/null +++ b/files/it/learn/server-side/django/skeleton_website/index.html @@ -0,0 +1,406 @@ +--- +title: 'Django Tutorial Parte 2: Creare lo scheletro di un sito web' +slug: Learn/Server-side/Django/skeleton_website +tags: + - Articolo + - Guida + - Intro + - Introduzione + - Principianti + - Tutorial + - backend + - django + - imparare +translation_of: Learn/Server-side/Django/skeleton_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div> + +<p class="summary">Questo secondo articolo del nostro <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial Django</a> mostra come creare uno "scheletro" di progetto di un sito web come base, che potrà poi essere popolato con le impostazioni specifiche del sito, con i path, con i modelli, le view, e i template.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Creare un ambiente di sviluppo Django</a>. Visita: <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial</a>.</td> + </tr> + <tr> + <th scope="row">Obiettivi:</th> + <td>Essere in grado di utilizzare i tool Django per iniziare il tuo progetto web.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>Questo articolo mostra come creare uno "scheletro" di un sito web, che potrà poi essere popolato con impostazioni specifiche del sito, con i path, con i model, le view, e i template (discuteremo di questo in successivi articoli).</p> + +<p>Il processo è semplice:</p> + +<ol> + <li>Utilizzare lo strumento <code>django-admin</code> per creare la cartella del progetto, i templates di file di base e lo script di gestione del progetto (<strong>manage.py</strong>).</li> + <li>Utilizzare <strong>manage.py</strong> per creare una o più <em>applicazioni</em><span style="line-height: 1.5;">.</span> + <div class="note"> + <p><strong>Nota</strong>: un sito Web può essere costituito da una o più sezioni, ad es. sito principale, blog, wiki, area download, ecc. Django ti incoraggia a sviluppare questi componenti come <em>applicazioni</em> separate, che potrebbero poi essere riutilizzate in diversi progetti, se necessario. </p> + </div> + </li> + <li>Registrare le nuove applicazioni per includerle nel progetto<span style="line-height: 1.5;">. </span></li> + <li>Collegare il mapper url/path per ciascuna applicazione<span style="line-height: 1.5;">.</span></li> +</ol> + +<p>Per il <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">sito web Local Library</a> la cartella del sito web e la sua cartella di progetto saranno chiamate <em>locallibrary</em>, e avremo solo un'applicazione chiamata <em>catalog</em>. La struttura delle cartelle di livello superiore sarà quindi la seguente:</p> + +<pre class="brush: bash"><code>locallibrary/ # Cartella Sito Web + manage.py # Script per eseguire i tool di Django per questo progetto (creato utilizzando django-admin) + locallibrary/ # Cartella sito web/progetto (creata utilizzando django-admin) + catalog/ # Cartella Application (creata utilizzando manage.py)</code> +</pre> + +<p>Le sezioni seguenti illustrano in dettaglio le fasi del processo e mostrano come testare le modifiche. Alla fine dell'articolo discuteremo alcune delle altre configurazioni a livello di sito che potresti fare anche in questa fase.</p> + +<h2 id="Creare_il_progetto">Creare il progetto</h2> + +<p>Per prima cosa apri un prompt dei comandi / terminale, assicurati di essere nel tuo <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">virtual environment</a>, accedi a dove vuoi archiviare le tue app Django (mettile in un posto facilmente reperibile, all'interno della tua cartella documenti) e crea una cartella per il tuo nuovo sito web (in questo caso: <em>django_projects</em>). Poi entra nella cartella col comando cd:</p> + +<pre class="brush: bash">mkdir django_projects +cd django_projects</pre> + +<p>Crea il nuovo progetto utilizzando il comando <code>django-admin startproject</code> come mostrato, poi naviga fino alla cartella.</p> + +<pre class="brush: bash">django-admin startproject locallibrary +cd locallibrary</pre> + +<p>lo strumento <code>django-admin</code> crea una struttura cartella/file come mostrata sotto:</p> + +<pre class="brush: bash"><em>locallibrary/</em> + manage.py + <em>locallibrary/</em> + __init__.py + settings.py + urls.py + wsgi.py</pre> + +<p>la cartella corrente dovrebbe somigliare alla seguente:</p> + +<pre class="syntaxbox">../django_projects/locallibrary/</pre> + +<p>La sottocartella del progetto <em>locallibrary</em> è l'entry point per il sito Web:</p> + +<ul> + <li><strong>__init__.py è</strong> un file vuoto che indica a Python di trattare questa directory come un pacchetto Python.</li> + <li><strong>settings.py</strong> contiene tutte le impostazioni del sito web. Qui è dove registriamo tutte le applicazioni che creiamo, la posizione dei nostri file statici, i dettagli di configurazione del database, ecc.</li> + <li><strong>urls.py</strong> definisce i mapping url-to-view del sito. Mentre questo potrebbe contenere tutto il codice di mappatura dell'URL, è più comune delegare parte della mappatura a particolari applicazioni, come vedremo più avanti.<span style="line-height: 1.5;"> </span></li> + <li><strong style="line-height: 1.5;">wsgi.py</strong><span style="line-height: 1.5;"> </span>è usato per aiutare la tua applicazione Django a comunicare con il server web.</li> +</ul> + +<p>Lo script <strong>manage.py</strong> viene utilizzato per creare applicazioni, lavorare con i database e avviare il server web di sviluppo. </p> + +<h2 id="Creare_l'applicazione_di_catalogo">Creare l'applicazione di catalogo</h2> + +<p>Quindi, esegui il seguente comando per creare l'applicazione <em>catalog</em> che risiederà all'interno del nostro progetto di localibrary (deve essere eseguito nella stessa cartella di manage.py del tuo progetto):</p> + +<pre class="brush: bash">python3 manage.py startapp catalog</pre> + +<div class="note"> +<p><strong>Note</strong>: il comando precedente è per Linux / macOS X. Su Windows il comando dovrebbe essere:</p> + +<p> <code>py -3 manage.py startapp catalog</code></p> + +<p>Se stai lavorando con Windows rimpiazza <code>python3</code> con <code>py -3</code> in tutto questo modulo.</p> + +<p>Se stai usando la versione di Python 3.7.0 o superiore, devi usare solo:</p> + +<p><code>py manage.py startapp catalog</code></p> +</div> + +<p>Lo strumento crea una nuova cartella e la popola con i file per le diverse parti dell'applicazione (mostrate in grassetto sotto). La maggior parte dei file ha un nome utile in base al loro scopo (ad esempio, le viste dovrebbero essere memorizzate in <strong>views.py</strong>, models in <strong>models.py</strong>, i test <strong>tests.py</strong>, le configurazioni per l'amministrazione in <strong>admin.py</strong>, le applicazioni in <strong>apps.py</strong>) e contenere un minimo di codice per il lavoro con gli oggetti associati.</p> + +<p>La directory del progetto aggiornata dovrebbe essere così ora:</p> + +<pre class="brush: bash"><em>locallibrary/</em> + manage.py + <em>locallibrary/ +</em><strong> <em>catalog/</em> + admin.py + apps.py + models.py + tests.py + views.py + __init__.py + <em>migrations/</em></strong> +</pre> + +<p>Inoltre abbiamo:</p> + +<ul> + <li>Una cartella <em>migrations</em>, usata per memorizzare le "migrazioni" — file che ti permettono di aggiornare automaticamente il tuo database mentre modifichi i tuoi models.</li> + <li><strong>__init__.py</strong> — un file vuoto creato qui in modo che Django / Python riconoscerà la cartella come un file <a href="https://docs.python.org/3/tutorial/modules.html#packages">Python Package</a> e ti permette di usare i suoi oggetti all'interno di altre parti del progetto.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Hai notato cosa manca nella lista dei file sopra? Mentre c'è un posto per le tue viste e modelli, non c'è nessun posto per te per mettere i tuoi mapping url, templates e file statici. Ti mostreremo come crearli più avanti (non sono necessari in tutti i siti Web ma sono necessari in questo esempio).</p> +</div> + +<h2 id="Registrare_l'applicazione_catalog">Registrare l'applicazione catalog</h2> + +<p>Ora che l'applicazione è stata creata, dobbiamo registrarla nel progetto in modo che venga inclusa quando vengono eseguiti tutti gli strumenti (ad esempio per aggiungere modelli al database). Le applicazioni vengono registrate aggiungendole alla lista <code>INSTALLED_APPS</code> in project settings. </p> + +<p>Aprire il file di project settings <strong>django_projects/locallibrary/locallibrary/settings.py</strong> e cerca la definizione della lista <code>INSTALLED_APPS</code>. Quindi aggiungi una nuova riga alla fine dell'elenco, come mostrato in grassetto sotto.</p> + +<pre class="brush: bash">INSTALLED_APPS = [ + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', +<strong> 'catalog.apps.CatalogConfig', </strong> +]</pre> + +<p>La nuova riga specifica l'oggetto di configurazione dell'applicazione (<code>CatalogConfig</code>) che è stato generato per te in <strong>/locallibrary/catalog/apps.py</strong> quando hai creato l'applicazione.</p> + +<div class="note"> +<p><strong>Nota</strong>: Noterai che ci sono già molti altri INSTALLED_APPS (e MIDDLEWARE, più in basso nel file delle impostazioni).. Questi abilitano il supporto per il <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">sito Django administration</a> e, di conseguenza, molte delle funzionalità che utilizza (incluse sessioni, autenticazione, ecc.).</p> +</div> + +<h2 id="Specificare_il_database">Specificare il database</h2> + +<p>Questo è anche il punto in cui normalmente si specifica il database da utilizzare per il progetto - è logico utilizzare lo stesso database per lo sviluppo e la produzione laddove possibile, al fine di evitare piccole differenze di comportamento. Per le differenti opzioni si rimanda a <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#databases">Databases</a> (Django docs). </p> + +<p>Useremo il database SQLite per questo esempio, perché non ci aspettiamo di richiedere molti accessi simultanei su un database dimostrativo, e anche perché non richiede lavoro aggiuntivo per impostarlo! Puoi vedere come è configurato questo database in <strong>settings.py</strong> (ulteriori informazioni sono incluse anche di seguito):</p> + +<pre class="brush: python">DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), + } +} +</pre> + +<p>Poichè usiamo SQLite, non abbiamo bisogno di altri setup. Andiamo avanti!</p> + +<h2 id="Altre_impostazioni_per_il_progetto">Altre impostazioni per il progetto</h2> + +<p>Il file <strong>settings.py</strong> viene anche usato per configurare un certo numero di altre impostazioni, ma a questo punto probabilmente si desidera solo modificare <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-TIME_ZONE">TIME_ZONE</a> — che dovrebbe essere impostato uguale ad una delle stringhe standard presenti nella lista <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">List of tz database time zones</a> (la colonna TZ contiene i valori da sostituire). Cambia la tua <code>TIME_ZONE</code> con una di queste stringhe, per esempio:</p> + +<pre class="brush: python">TIME_ZONE = 'Europe/Rome'</pre> + +<p>Queste altre due impostazioni invece non le cambierai ora, ma dovresti comunque conoscerle:</p> + +<ul> + <li><code>SECRET_KEY</code>. Questa è una chiave segreta utilizzata come parte della strategia di sicurezza del sito web di Django. Se non stai proteggendo questo codice in fase di sviluppo, dovrai utilizzare un codice diverso (magari letto da una variabile o file di ambiente) quando lo metti in produzione.</li> + <li><code>DEBUG</code>. Consente di visualizzare i log di debug in caso di errore, piuttosto che le risposte del codice di stato HTTP. Questo dovrebbe essere impostato su <code>False</code> in produzione in quanto le informazioni di debug sono utili per gli aggressori, ma per ora possiamo tenerlo impostato su <code>True</code>.</li> +</ul> + +<h2 id="Collegare_il_mapper_URL">Collegare il mapper URL</h2> + +<p>Il sito Web viene creato con un file di mappatura URL (<strong>urls.py</strong>) nella cartella del progetto. Sebbene sia possibile utilizzare questo file per gestire tutti i mapping degli URL, è più frequente rinviare i mapping all'applicazione associata.</p> + +<p>Aprite <strong>locallibrary/locallibrary/urls.py,</strong> notare il testo istruttivo che spiega alcuni modi per utilizzare il mappatore URL.</p> + +<pre class="brush: python">"""locallibrary URL Configuration + + +L'elenco "urlpatterns" indirizza gli URL alle viste. Per maggiori informazioni vedi: + https://docs.djangoproject.com/en/2.1/topics/http/urls/ +Esempi: +Views basate su funzioni + 1. Aggiungere un import: from my_app import views + 2. Aggiungere un URL a urlpatterns: path('', views.home, name='home') +Views basate su classi + 1. Aggiungere un import: from other_app.views import Home + 2. Aggiungere un URL a urlpatterns: path('', Home.as_view(), name='home') +Includere un altro URLconf + 1. Importare la funzione include(): from django.urls import include, path + 2. Aggiungere URL a urlpatterns: path('blog/', include('blog.urls')) +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +</pre> + +<p>Le mappature URL sono gestite tramite la variabile <code>urlpatterns</code>, che è una <em>list</em> Python di funzioni <code>path()</code>. Ogni funzione <code>path()</code> associa un pattern URL a una <em>view specifica</em>, che verrà visualizzata quando il pattern viene matchato, o con un altro elenco di codice di test pattern URL (in questo secondo caso, il pattern diventa "base URL" per i pattern definiti nel modulo target). La <em>list</em> <code>urlpatterns</code> definisce inizialmente una singola funzione che associa tutti gli URL con il pattern <em>admin/</em> al modulo <code>admin.site.urls</code>, che contiene le definizioni di mappatura URL proprie dell'applicazione di Amministrazione.</p> + +<div class="note"> +<p><strong>Nota</strong>: il percorso (route) in <code>path()</code> è una stringa che definisce un pattern URL da matchare. Questa stringa potrebbe includere una variabile con nome (tra parentesi angolari), ad es. <code>'catalog/<id>/'</code>. Questo pattern corrisponderà a un URL come<strong> <code>/catalog/</code></strong><code>any_chars<strong>/</strong></code> e passerà <em>any_chars </em>alla view come una stringa con nome di parametro<em><strong> </strong></em><code>id</code>. Discuteremo ulteriormente i metodi path e i route patterns in successivi argomenti.</p> +</div> + +<p>Aggiungi le linee qua sotto alla fine del file per aggiungere un nuovo elemento alla lista <code>urlpatterns</code>. Questo nuovo elemento della lista include un <code>path()</code> che inoltra richieste con il pattern <code>catalog/</code> al modulo <code>catalog.urls</code> (il file con il relativo URL <strong>/catalog/urls.py</strong>).</p> + +<pre class="brush: python"># Use include() to add paths from the catalog application +from django.urls import include +from django.urls import path + +urlpatterns += [ + path('catalog/', include('catalog.urls')), +] + +</pre> + +<p>Adesso reindirizziamo il root URL del nostro sito (cioè <code>127.0.0.1:8000</code>) all'URL <code>127.0.0.1:8000/catalog/</code>; questa è l'unica app che useremo in questo progetto. Per fare ciò, useremo una speciale funzione (<code>RedirectView</code>), che prende come primo argomento il nuovo URL relativo verso cui fare il redirect (<code>/catalog/</code>) quando il pattern URL specificato nella funzione <code>path()</code> viene matchato (il root URL, in questo caso).</p> + +<p>Aggiungere le seguenti linee di codice, sempre alla fine del file:</p> + +<pre class="brush: python">#Add URL maps to redirect the base URL to our application +from django.views.generic import RedirectView +urlpatterns += [ + path('', RedirectView.as_view(url='/catalog/', permanent=True)), +] +</pre> + +<p>Lasciare il primo parametro della funzione path vuoto per implicare '/'. Se scrivi il primo parametro come '/' Django ti darà il seguente avviso quando avvii il server di sviluppo:</p> + +<pre class="brush: python">System check identified some issues: + +WARNINGS: +?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'. +Remove this slash as it is unnecessary. +If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'. +</pre> + +<p>Django non utilizza file statici come CSS, JavaScript e immagini per impostazione predefinita, ma può essere utile per lo sviluppo del server Web durante la creazione del sito. Come aggiunta finale a questo mapper URL, è possibile abilitare la pubblicazione di file statici durante lo sviluppo aggiungendo le seguenti righe.</p> + +<p>Aggiungi il seguente blocco di codice alla fine del file:</p> + +<pre><code># Use static() to add url mapping to serve static files during development (only) +from django.conf import settings +from django.conf.urls.static import static + +urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Ci sono diversi modi per estendere la list <code>urlpatterns</code> (nel nostro esempio utiliziamo l'operatore append <code>+=</code> per separare chiaramente il codice nuovo e da quello vecchio). Avremmo potuto semplicemente includere tutto nella definizione originale della list:</p> + +<pre class="brush: python">urlpatterns = [ + path('admin/', admin.site.urls), + path('catalog/', include('catalog.urls')), + path('', RedirectView.as_view(url='/catalog/', permanent=True)), +] + <code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> +</pre> + +<p>Inoltre, abbiamo aggiunto la linea di import (<code>from django.urls import include</code>) insieme al codice che la utilizza, ma comunemente si preferisce mettere tutti gli import all'inizio del file Python.</p> +</div> + +<p>Come ultimo passaggio, crea un file all'interno della cartella del tuo catalogo chiamato <strong>urls.py</strong> e aggiungi il testo seguente per definire gli <code>urlpatterns</code> importati (vuoti). Qui è dove aggiungeremo i nostri modelli, mentre costruiamo l'applicazione.</p> + +<pre class="brush: python">from django.urls import path +from . import views + +urlpatterns = [ + +] +</pre> + +<h2 id="Test_del_framework_del_sito_Web">Test del framework del sito Web</h2> + +<p>A questo punto abbiamo uno scheletro completo. Il sito Web in realtà non fa ancora nulla, ma vale la pena eseguirlo per assicurarsi che nessuno dei nostri cambiamenti abbia infranto nulla.</p> + +<p>Prima di farlo, dovremmo prima eseguire una <em>migrazione del database</em>. Questo aggiorna il nostro database per includere tutti i modelli nelle nostre applicazioni installate (e rimuove alcuni avvisi di build).</p> + +<h3 id="Effettuare_migrazioni_di_database">Effettuare migrazioni di database</h3> + +<p>Django utilizza un Object-Relational-Mapper (ORM) per mappare le definizioni di modello nel codice Django alla struttura dati utilizzata dal database sottostante. Quando cambiamo le definizioni dei nostri modelli, Django tiene traccia delle modifiche e può creare script di migrazione del database (in <strong>/locallibrary/catalog/migrations/</strong>) per migrare automaticamente la struttura dati sottostante nel database in modo che corrisponda al modello.</p> + +<p>Quando abbiamo creato il sito Django ha aggiunto automaticamente un numero di modelli per l'uso da parte della sezione admin del sito (che vedremo in seguito). Eseguire i seguenti comandi per definire le tabelle per tali modelli nel database (assicurarsi di essere nella directory che contiene <strong>manage.py</strong>):</p> + +<pre class="brush: bash">python3 manage.py makemigrations +python3 manage.py migrate +</pre> + +<div class="warning"> +<p><strong>Importante</strong>: Avrai bisogno di eseguire i suddetti comandi ogni volta che i tuoi modelli cambiano in modo tale da influenzare la struttura dei dati che devono essere memorizzati (inclusi sia l'aggiunta che la rimozione di interi modelli e singoli campi).</p> +</div> + +<p>Il comando <code>makemigrations</code> crea (ma non applica) le migrazioni per tutte le applicazioni installate nel progetto (puoi anche specificare il nome dell'applicazione per eseguire semplicemente una migrazione per un singolo progetto). Questo ti dà la possibilità di controllare il codice per queste migrazioni prima che vengano applicate - quando sei un esperto di Django puoi scegliere di modificarle direttamente!</p> + +<p>Il comando <code>migrate</code> applica effettivamente le migrazioni al tuo database (Django tiene traccia di quelli che sono stati aggiunti al database corrente).</p> + +<div class="note"> +<p><strong>Nota</strong>: Consulta <a href="https://docs.djangoproject.com/en/2.1/topics/migrations/">Migrations</a> (Django docs) per info aggiuntive sui comandi meno usati nelle migrazioni.</p> +</div> + +<h3 id="Testare_il_sito_web">Testare il sito web</h3> + +<p>Durante lo sviluppo è possibile testare il sito Web utilizzando il <em>server web di sviluppo</em> e quindi visualizzandolo sul browser web locale.</p> + +<div class="note"> +<p><strong>Nota</strong>: Il web server di sviluppo non è abbastanza robusto o performante per l'uso in produzione, ma è un modo molto semplice per far funzionare il tuo sito Django durante lo sviluppo per testarlo in modo rapido. Per impostazione di default il sito si troverà sul tuo computer all'indirizzo (<code>http://127.0.0.1:8000/)</code>, ma puoi anche specificare altri computer sulla tua rete su cui hostare il sito. Per ulteriori informazioni, vedere <a href="https://docs.djangoproject.com/en/2.1/ref/django-admin/#runserver">django-admin and manage.py: runserver</a> (Django docs).</p> +</div> + +<p>Eseguire il server Web di sviluppo chiamando il comando <em>runserver</em> (nella stessa directory di <strong>manage.py</strong>):</p> + +<pre class="brush: bash">python3 manage.py runserver + + Performing system checks... + + System check identified no issues (0 silenced). + August 15, 2018 - 16:11:26 + Django version 2.1, using settings 'locallibrary.settings' + Starting development server at http://127.0.0.1:8000/ + Quit the server with CTRL-BREAK. +</pre> + +<p>Una volta attivato il server, puoi vedere il sito visitando il seguente indiriizzo sul browser web locale <code>http://127.0.0.1:8000/</code>. Dovresti vedere la seguente pagina di errore:</p> + +<p><img alt="Django Debug page for Django 2.0" src="https://mdn.mozillademos.org/files/15729/django_404_debug_page.png"></p> + +<p>Non preoccuparti! Questa pagina di errore è prevista perché non abbiamo alcuna pagina/URL definita nel modulo <code>catalogs.urls</code> (a cui siamo reindirizzati quando otteniamo un URL alla radice del sito).</p> + +<div class="note"> +<p><strong>Nota</strong>: La pagina sopra mostra una grande funzionalità di Django - registrazione automatica del debug. Verrà visualizzata una schermata di errore con informazioni utili ogni volta che non è possibile trovare una pagina o qualsiasi errore viene generato dal codice. In questo caso possiamo vedere che l'URL che abbiamo fornito non corrisponde a nessuno dei nostri pattern URL (come elencato). Il logging verrà disattivato in produzione (quando mettiamo il sito sul Web), nel qual caso verrà pubblicata una pagina meno informativa ma più user-friendly.</p> +</div> + +<p>Ora sappiamo che Django sta funzionando! </p> + +<div class="note"> +<p><strong>Nota</strong>: Dovresti rieffettuare le migrazioni ogni volta che fai dei cambiamenti significativi, non richiedono molto tempo!</p> +</div> + +<h2 id="Sfida_te_stesso">Sfida te stesso</h2> + +<p>La cartella <strong>catalog/ </strong>contiene file per le views, models, e altre parti dell'applicazione. Apri questi file e studiali. </p> + +<p>Come hai visto sopra, una mappatura URL per il sito di amministrazione è già stata aggiunta nella <strong>urls.py</strong> del progetto. Passa all'area di amministrazione nel tuo browser e vedi cosa succede (puoi dedurre l'URL corretto dalla mappatura sopra).</p> + +<ul> +</ul> + +<h2 id="Sommario">Sommario</h2> + +<p>Abbiamo creato uno scheletro completo del nostro progetto web, che potremo ora popolare con urls, models, views e templates.</p> + +<p>Ora che lo scheletro per <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> è completo e funzionante, è ora di scrivere del codice per far fare al nostro sito cosa vogliamo fargli fare. </p> + +<h2 id="Consulta_anche">Consulta anche</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial01/">Writing your first Django app - part 1</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/applications/#configuring-applications">Applications</a> (Django Docs). Contiene informazioni su come configurare le applicazioni.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/it/learn/server-side/django/tutorial_local_library_website/index.html b/files/it/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..eeabfd4a01 --- /dev/null +++ b/files/it/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,79 @@ +--- +title: 'Django Tutorial: The Local Library website' +slug: Learn/Server-side/Django/Tutorial_local_library_website +tags: + - Articolo + - Guida + - Principiante + - Scripting + - Tutorial + - django + - imparare + - lato-server +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div> + +<p class="summary">Il primo articolo della serie di tutorial pratici spiega ciò che imparerai, e fornisce una panoramica del sito web di esempio "local library" con cui andremo a lavorare e che faremo evolvere nei prossimi articoli.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Leggere la <a href="/en-US/docs/Learn/Server-side/Django/Introduction">Introduzione a Django</a>. Per i seguenti articoli sarà anche necessario avere predisposto un <a href="/en-US/docs/Learn/Server-side/Django/development_environment"> ambiente di sviluppo Django</a>. </td> + </tr> + <tr> + <th scope="row">Obiettivo:</th> + <td>Presentare l'applicazione di esempio utilizzata in questo tutorial, e mettere in grado i lettori di capire quali argomenti saranno trattati.</td> + </tr> + </tbody> +</table> + +<h2 id="Panoramica">Panoramica</h2> + +<p>Benvenuti al tutorial Django MDN "Local Library", nel quale sviluppiamo un sito web che potrebbe essere utilizzato per gestire il catalogo per una biblioteca locale.</p> + +<p>In questa serie di articoli tutorial vedrai come:</p> + +<ul> + <li>Usare i tool di Django per creare lo scheletro di un sito web e un'applicazione.</li> + <li>Avviare e arrestare il server di sviluppo.</li> + <li>Creare models per rappresentare i dati dell'applicazione.</li> + <li>Utilizzare il sito di amministrazione Django-admin per popolare i dati del tuo sito.</li> + <li>Creare view per recuperare dati specifici in risposta a richieste diverse e template per fare il rendering dei dati come HTML da visualizzare nel browser.</li> + <li>Creare mapper per associare pattern URL diversi a view specifiche.</li> + <li>Aggiungere autorizzazione utente e sessioni per controllare il comportamento del sito e l'accesso ad esso.</li> + <li>Lavorare con i form.</li> + <li>Scrivere codice di test per la tua app.</li> + <li>Usare efficacemente la sicurezza di Django.</li> + <li>Distribuire la tua applicazione in produzione.</li> +</ul> + +<p>Hai già imparato qualcosa riguardo ad alcuni di questi argomenti e hai toccato brevemente gli altri. Alla fine della serie di tutorial dovresti sapere abbastanza per sviluppare semplici app Django da solo.</p> + +<h2 id="Il_sito_web_LocalLibrary">Il sito web LocalLibrary</h2> + +<p><em>LocalLibrary</em> è il nome di un sito web che creeremo e faremo evolvere durante il corso di questa serie di tutorial. Come ti aspetteresti, lo scopo del sito è quello di fornire un catalogo online per un piccola biblioteca locale, in cui gli utenti possono ricercare i libri disponibili e gestire i loro account.</p> + +<p>Questo esempio è stato scelto con cura poichè può essere scalato per mostrare pochi o molti dettagli di cui necessitiamo, e può essere utilizzato per mostrare quasi tutte le feature di Django. In modo più importante, ci permette di fornire un percorso <em>guidato</em> attraverso le più importanti funzionalità nel web framework Django:</p> + +<ul> + <li>Nei primi pochi articoli tutorial definiremo una semplice biblioteca <em>browse-only (solo sfogliabile)</em> che i membri della biblioteca possono utilizzare per trovare che libri sono disponibili. Questo ci permette di esplorare le operazioni che sono comuni in quasi tutti i siti web: leggere e visualizzare contenuti da un database.</li> + <li>Mentre progrediamo, l'esempio biblioteca naturalmente si estende per dimostrare feature più avanzate di Django. Per esempio possiamo estendere la biblioteca per permettere agli utenti di prenotare libri, e utilizzare ciò per dimostrare come utilizzare i form, e supportare l'autenticazione utente.</li> +</ul> + +<p>Anche se questo è un esempio molto estensibile, viene chiamato <em><strong>Local</strong>Library</em> per una ragione — stiamo sperando di mostrare le informazioni minime che possano aiutare a metterti in funzione con Django rapidamente. Di conseguenza, archivieremo informazioni su libri, copie di libri, autori e altre informazioni chiave. Non memorizzeremo tuttavia informazioni circa altri elementi che una biblioteca potrebbe archiaviare, o forniremo l'infrastruttura necessaria per supportare più siti di biblioteche o altre feature di "grandi biblioteche". </p> + +<h2 id="Sono_bloccato_dove_posso_trovare_il_sorgente">Sono bloccato, dove posso trovare il sorgente?</h2> + +<p>Man mano che so segue il tutorial forniremo i frammenti di codice appropriati da copiare e incollare in ciascun punto, e ci sarà altro codice che speriamo tu estenda da solo (con un po' di guida).</p> + +<p>Se ci si blocca, si può trovare la versione completamente sviluppata del sito web <a href="https://github.com/mdn/django-locallibrary-tutorial">su Github qui</a>.</p> + +<h2 id="Sommario">Sommario</h2> + +<p>Ora che sai un po' di più sul sito web <em>LocalLIbrary</em> e cosa stai per andare a imparare, è tempo di iniziare a creare un <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">scheletro di progetto</a> per contenere il nostro esempio.</p> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p> diff --git a/files/it/learn/server-side/express_nodejs/index.html b/files/it/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..d6a55af9c8 --- /dev/null +++ b/files/it/learn/server-side/express_nodejs/index.html @@ -0,0 +1,75 @@ +--- +title: Express web framework (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Codice + - Express + - Express.js + - Intro + - JavaScript + - Node + - Principiante + - Scripting + - Server + - node.js +translation_of: Learn/Server-side/Express_Nodejs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Express è un framework di tipo unopinionated, scritto in Javascript ed hostato dentro un amiente di runtime Node.js. Qusto modulo illustra i benefici chiave di questo framework, come configurare un ambiente di sviluppo, e come compiere alcuni compiti comuni di sviluppo e deploy.</p> + +<h2 id="Prerequisiti">Prerequisiti</h2> + +<p>Prima di iniziare dovrai esssere in grado di capire cosa sia la programmazione lato server e che cosa sia un framework, preferibilmente leggendo i topics <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>. Una infarinatura generale di programmazione e <a href="/en-US/docs/Web/JavaScript">JavaScript</a> è altamente raccomandata, ma non necessaria per comprendere i concetti chiave.</p> + +<div class="note"> +<p>Nota: questo sito Web offre molte risorse utili per l'apprendimento di JavaScript nel contesto dello sviluppo lato client: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>. Il linguaggio e i concetti fondamentali di JavaScript sono gli stessi per lo sviluppo lato server su Node.js e questo materiale sarà rilevante. Node.js offre API aggiuntive per supportare funzionalità utili in ambienti senza browser (es. per creare un server HTTP ed accedere al file system, ma non supporta le API per lavorare sul browser o interagire con il DOM).</p> + +<p>Questa guida fornirà alcune informazioni su come lavorare con Node.js e Express, e ci sono numerose altre eccellenti risorse su Internet e nei libri - alcune delle quali disponibili ai seguenti link <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) e <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p> +</div> + +<h2 id="Guide">Guide</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node: una introduzione</a></dt> + <dd>In questo primo articolo rispondiamo alle domande "Cos'è Node?" e "Cos'è Express?" e faremo una panoramica di ciò che rende speciale la struttura web Express. Descriveremo le caratteristiche principali e mostreremo alcuni dei principali elementi costitutivi di un'applicazione Express (sebbene a questo punto non avrete ancora un ambiente di sviluppo in cui testarlo).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Creare un ambiente di sviluppo Node (Express)</a></dt> + <dd>Ora che sai a cosa serve Express, ti mostreremo come configurare e testare un ambiente di sviluppo Node/Express su Windows, Linux (Ubuntu) e Mac OS X. Qualunque sia il sistema operativo che stai usando, questo articolo dovrebbe darti quello che ti serve per iniziare a sviluppare applicazioni Express.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial Express: Il sito Local Library</a></dt> + <dd>Il primo articolo della nostra serie di tutorial pratica spiega cosa imparerai e fornirà una panoramica del sito web di esempio della "biblioteca locale" che elaboreremo e svilupperemo in articoli successivi.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Parte 2: Creare lo scheletro del sito</a></dt> + <dd>Questo articolo mostra come è possibile creare uno "scheletro" di un sito web, che può poi essere popolato con percorsi, modelli/viste e database specifici del sito.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Parte 3: Usare un Database (con Mongoose)</a></dt> + <dd>Questo articolo introduce brevemente i database per Node / Express. Poi continua a mostrare come possiamo usare <a href="http://mongoosejs.com/">Mongoose</a> per fornire l'accesso al database per il sito Web LocalLibrary. Spiega come vengono dichiarati lo schema e i modelli dell'oggetto, i tipi di campo principali e la convalida di base. Mostra anche brevemente alcuni dei principali modi in cui è possibile accedere ai dati del modello.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Parte 4: Routeing e controllers</a></dt> + <dd>In questo tutorial imposteremo i percorsi (codice di gestione degli URL) con le funzioni di gestione "fittizia" per tutti gli endpoint delle risorse che saranno necessari nel sito Web di LocalLibrary. Al termine, avremo una struttura modulare per il nostro codice di gestione del routing, che possiamo estendere con le funzioni di gestione reale nei seguenti articoli. Avremo anche una buona conoscenza di come creare percorsi modulari usando Express.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Parte 5: Mostrare i dati della libreria</a></dt> + <dd>Siamo ora pronti per aggiungere le pagine che visualizzano i libri del sito Web LocalLibrary e altri dati. Le pagine includeranno una home page che mostra quanti record abbiamo di ogni tipo di modello e lista e pagine di dettaglio per tutti i nostri modelli. Lungo la strada, acquisiremo esperienza pratica nell'ottenere record dal database e utilizzare modelli.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Utilizzare i form</a></dt> + <dd>Vedremo come lavorare con i<a href="/en-US/docs/Web/Guide/HTML/Forms"> Forms</a> in Express, usando Pug, e in particolare come creare forms per eseguire operazioni CRUD.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Parte 7: Deployare in produzion</a>e</dt> + <dd>Ora hai creato un sito Web di LocalLibrary fantastico, vorrai installarlo su un server Web pubblico in modo che sia accessibile al personale della biblioteca e ai membri su Internet. Questo articolo fornisce una panoramica di come si può trovare un host per la distribuzione del sito Web e di cosa è necessario fare per rendere il sito pronto per la produzione.</dd> +</dl> + +<h2 id="Consulta_anche">Consulta anche</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installare LocalLibrary su PWS/Cloud Foundry</a></dt> + <dd>Questo articolo fornisce una dimostrazione pratica di come installare LocalLibrary sul <a href="http://run.pivotal.io/">Pivotal Web Services PaaS cloud</a>: si tratta di un'alternativa open source completa di Heroku, il servizio cloud PaaS utilizzato nella parte 7 del tutorial, sopra elencato. PWS/Cloud Foundry Merita sicuramente un'occhiata se stai cercando una alternativa ad Heroku o vuoi provare qualcos'altro.</dd> +</dl> + +<h2 id="Aggiungere_altri_tutorials">Aggiungere altri tutorials</h2> + +<div> +<p>Questa è la fine degli articoli del tutorial (per ora). Se desideri estenderlo, altri argomenti interessanti da trattare sono:</p> + +<ul> + <li>Utilizzo delle sessioni.</li> + <li>Autenticazioni.</li> + <li>Autorizzazioni e permessi degli utenti.</li> + <li>Testing di una applicazione Express.</li> + <li>Sicurezza delle applicazioni Express.</li> +</ul> + +<p>And of course, it would be excellent to have an assessment task!</p> +</div> diff --git a/files/it/learn/server-side/index.html b/files/it/learn/server-side/index.html new file mode 100644 index 0000000000..35d72b3443 --- /dev/null +++ b/files/it/learn/server-side/index.html @@ -0,0 +1,52 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p> + +<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p> + +<p>A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd> +</dl> |