diff options
Diffstat (limited to 'files/it/web/guide/html/html5')
| -rw-r--r-- | files/it/web/guide/html/html5/index.html | 167 | ||||
| -rw-r--r-- | files/it/web/guide/html/html5/introduction_to_html5/index.html | 22 |
2 files changed, 189 insertions, 0 deletions
diff --git a/files/it/web/guide/html/html5/index.html b/files/it/web/guide/html/html5/index.html new file mode 100644 index 0000000000..be6fc91a82 --- /dev/null +++ b/files/it/web/guide/html/html5/index.html @@ -0,0 +1,167 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> è l'ultima evoluzione dello standard che definisce <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Il termine rappresenta due concetti differenti:</p> + +<ul> + <li>Una nuova versione del <em>linguaggio</em> HTML, con nuovi elementi, attributi e comportamenti</li> + <li>Un più ampio insieme di tecnologie che permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato <em>HTML5 & compagni</em> ed è spesso abbreviato in<em> HTML5</em></li> +</ul> + +<p>Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.</p> + +<ul> + <li><em>Semantica</em>: descrivere con maggiore precisione il contenuto.</li> + <li><em>Connettività</em>: comunicare con il server in modi nuovi e innovativi.</li> + <li><em>Offline & Memorizzazione</em>: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.</li> + <li><em>Multimedia</em>: rendere audio e video cittadini di prima classe nell'Open Web.</li> + <li><em>Effetti e Grafica 2D/3D</em>: usare una gamma molto più ampia di opzioni di rappresentazione.</li> + <li><em>Prestazioni & Integrazione</em>: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.</li> + <li><em>Accesso ai dispositivi</em>: usare vari dispositivi di input e output.</li> + <li><em>Stile:</em> consentire agli autori di realizzare temi più sofisticati.</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="Semantica" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantica</h2> + +<dl> + <dt><a href="/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title=" +Sezioni e Struttura di un Documento HTML5">Sezioni e struttura in HTML5</a></dt> + <dd>Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: {{HTMLElement("section")}} , {{HTMLElement("article")}} , {{HTMLElement("nav")}} , {{HTMLElement("header")}} , {{HTMLElement("footer")}} , {{HTMLElement("aside")}} e {{HTMLElement("hgroup")}}.</dd> + <dt><a href="/it/docs/HTML/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Integrare audio e video in HTML5</a></dt> + <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.</dd> + <dt><a href="/it/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Forms in HTML5</a></dt> + <dd>Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo {{htmlattrxref("type", "input")}} degli {{HTMLElement("input")}}, e il nuovo elemento {{HTMLElement("output")}}.</dd> + <dt>Nuovi elementi semantici</dt> + <dd>Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, che accrescono la quantità di <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementi validi di HTML5</a>.</dd> + <dt>Miglioramenti degli {{HTMLElement("iframe")}}</dt> + <dd>Utilizzando {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e gli attributi {{htmlattrxref("srcdoc", "iframe")}}, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento {{HTMLElement("iframe")}}.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Permette di incorporare direttamente formule matematiche.</dd> + <dt><a href="/it/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduzione a HTML5</a></dt> + <dd>Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Parser di HTML5-compatibile</a></dt> + <dd>Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.</dd> +</dl> + +<h2 id="Connettività" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connettività</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-event inviati</a></dt> + <dd>Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd> +</dl> + +<h2 id="Offline_Memorizzazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & Memorizzazione</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Risorse Offline: la cache dell'applicazione</a></dt> + <dd>Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online e offline</a></dt> + <dd>Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)</a></dt> + <dd>La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Utilizzare file da applicazioni web</a></dt> + <dd>Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> con <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> dell'elemento <span style="font-family: monospace;">{{HTMLElement("input")}}</span>. C'è anche <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Utilizzare audio e video in HTML5</a></dt> + <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di nuovi contenuti multimediali.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzo della API Camera</a></dt> + <dd>Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.</dd> + <dt>Track e WebVTT</dt> + <dd>L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> è un formato di traccia testuale.</dd> +</dl> + +<h2 id="Grafica_Effetti_3D" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Grafica & Effetti 3D</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Tutorial Canvas">Tutorial sui Canvas</a></dt> + <dd>Apprendi il nuovo elemento <code>{{HTMLElement("canvas")}}</code> e come disegnare grafica ed altri oggetti in Firefox</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API di testo per gli elementi <code><canvas></code> di HTML5</a></dt> + <dd>Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Prestazioni_integrazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Prestazioni & integrazione</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Usare i web workers">Web Workers</a></dt> + <dd>Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Livello 2</dt> + <dd>Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-motori JavaScript compilati</dt> + <dd>La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">L'attributo contentEditable: trasforma il tuo sito web in un wiki!</a></dt> + <dd>HTML5 ha standardizzato l'attributo contentEditable.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag & drop</a></dt> + <dd>Le API per il drag & drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestione del focus in HTML</a></dt> + <dd>Sono supportati i nuovi attributiHTML5 <code>activeElement</code> e <code>hasFocus</code>.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Gestori di protocollo basato sul Web</a></dt> + <dd>E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo <code>navigator.registerProtocolHandler()</code>.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online ed offline</a></dt> + <dd>Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.</dd> +</dl> + +<h2 id="Accesso_ai_Dispositivi" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Accesso ai Dispositivi</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzare le API Camera</a></dt> + <dd>Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventi Touch</a></dt> + <dd>Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Utilizzare la geolocalizzazione</a></dt> + <dd>Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Rilevazione orientamento del dispositivo</a></dt> + <dd>Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd> +</dl> + +<h2 id="Stile" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Stile</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.</p> + +<dl> + <dt>Nuove caratteristiche di stile per lo sfondo</dt> + <dd>E' ora possibile aggiungere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">sfondi multipli</a>.</dd> + <dt>Bordi più fantasiosi</dt> + <dd>Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.</dd> + <dt>Anima il tuo stile</dt> + <dd>Utilizzando le <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">Transizioni CSS</a> per animare il passaggio tra stati, o utilizzando le <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">Animazioni CSS</a> per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.</dd> + <dt>Miglioramenti tipografici</dt> + <dd>Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">sillabazione</a>, ma possono anche applicare <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">un'ombra</a> o controllare più precisamente la <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorazione</a>. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.</dd> + <dt>Nuove impaginazioni per la presentazione</dt> + <dd>Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">Impaginazione CSS a colonna multipla</a>, e <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">l'impaginazione CSS a box flessibile</a>.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/it/web/guide/html/html5/introduction_to_html5/index.html b/files/it/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..14fe305eb6 --- /dev/null +++ b/files/it/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,22 @@ +--- +title: Introduzione a HTML5 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> è la quinta revisione e l'ultima versione dello standard HTML. Propone nuove funzionalità che forniscono il supporto dei rich media, la creazione di applicazioni web in grado di interagire con l'utente, con i suoi dati locali e i servers, in maniera più facile ed efficiente di prima.</p> +<p>Poiché HTML5 è ancora in fase di sviluppo, inevitabilmente ci saranno altre modifiche alle specifiche. Pertanto al momento non tutte le funzioni sono supportate da tutti i browser. Tuttavia Gecko, e per estensione Firefox, supporta HTML5 in maniera ottimale, e gli sviluppatori continuano a lavorare per supportare ancora più funzionalità. Gecko ha iniziato a supportare alcune funzionalità di HTML5 dalla versione 1.8.1. È possibile trovare un elenco di tutte le funzionalità HTML5 che Gecko supporta attualmente nella <a href="/it/HTML/HTML5" title="it/HTML/HTML5">pagina principale di HTML5</a>. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p> +<h2 id="Dichiarare_che_un_documento_contiene_mark-up_HTML5_con_il_doctype_HTML">Dichiarare che un documento contiene mark-up HTML5 con il doctype HTML</h2> +<p>Il doctype per HTML5 è semplicissimo. Per specificare che il vostro contenuto HTML utilizza HTML5, basta dichiarare:</p> +<pre class="brush:html;"><!DOCTYPE html> +</pre> +<p>Così facendo persino i browser che attualmente non supportano HTML5 entreranno in modalità standard, cioè interpreteranno il codice HTML in modo compatibile con HTML5, ignorando le nuove funzionalità di HTML5 se non le supportano.</p> +<p>È molto più semplice rispetto ai precedenti doctype, oltre che più breve, quindi più facile da ricordare e riduce anche la quantità di byte scaricati dall'utente.</p> +<h2 id="Dichiarare_il_set_di_caratteri_con_<meta_charset>">Dichiarare il set di caratteri con <code><meta charset></code></h2> +<p>Indicare il set di caratteri che verrà utilizzato è solitamente la prima cosa da fare in un documento HTML. La specifica precedente richiedeva un elemento {{HTMLElement("meta")}} molto complesso. Ora è facilissimo:</p> +<pre class="brush:html;"><meta charset="UTF-8"></pre> +<p>Ricordati di inserire questo tag subito dopo l'apertura del {{HTMLElement("head") }}, perché alcuni browser riavviano il parsing di un documento HTML se il set di caratteri dichiarato è diverso da quello che avevano previsto. Inoltre consigliamo sempre di usare il set UTF-8, ove possibile, perché semplifica la gestione dei caratteri nei documenti utilizzando diversi script.</p> +<p>Nota bene: HTML5 limita il set di caratteri validi a quelli compatibili con ASCII e che usano almeno 8 bit. Ciò è stato deciso per motivi di sicurezza e per prevenire alcuni tipi di attacchi.</p> +<h2 id="Usare_il_nuovo_parser_HTML5">Usare il nuovo parser HTML5</h2> +<p>La regola di parsing di HTML5, che analizza il significato del mark-up, è stata definita con maggiore precisione in HTML5. Fino all'introduzione di HTML5, le uniche regole riguardavano il mark-up <em>valido</em>, quindi il comportamento del parser in caso di errori (e la maggior parte dei siti web ne ha almeno uno) era indefinito. In sostanza, tutti i browser si comportavano in modo diverso. Ora, di fronte a errori nel mark-up, tutti i browser conformi devono comportarsi esattamente nello stesso modo.</p> +<p>Questo obbligo aiuta non poco gli sviluppatori. Anche se tutti i browser moderni ora applicano queste regole di analisi HTML5, alcuni utenti navigano ancora con browser non compatibili con HTML5. Tenete a mente che è ancora altamente raccomandato stendere mark-up valido, in modo che il codice sia facile da leggere e mantenere nel tempo, e diminuisca notevolmente la probabilità di incompatibilità con i vari browser più datati.</p> +<p>Non preoccuparti — non devi cambiare nulla del tuo sito Web — gli sviluppatori dei browser hanno già fatto tutto per te!</p> |