mozilla

Revision 338079 of HTML5

  • Revision slug: HTML/HTML5
  • Revision title: HTML5
  • Revision id: 338079
  • Created:
  • Creator: Grino
  • Is current revision? No
  • Comment

Revision Content

Esempi HTML5

Una collezione di esempi che mostrano le utlime tecnologie HTML in azione

HTML5_Logo_128.png

HTML5 è l'ultima evoluzione dello standard che definisceHTML. Il termine rappresenta due concetti differenti:

  • Una nuova versione del linguaggio HTML, con nuovi elementi, attributi e comportamenti
  • Un più ampio insieme di tecnologie che permetto siti web e applicazzioni più diversificate e potenti: Questo insieme è chiamato HTML5 & compagni ed è spesso abbreviato in HTML5

Progettato per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in parecchi gruppi in base alla propria funzione. Semantica: permettere di descrivere con maggiore precisione qual'è il contenuto. Connettività: permettere di comunicare con il server in modi nuovi e innovativi. Offline & Memorizzazione: permettere alle pagine web di immagazzinare dati sul client per operare offline più efficientemente. Multimedia: realizzare audio e video cittadini di prima classe nell'Open Web. Effetti e Grafica 2D/3D: permettere una gamma molto più netta di opzioni di presentazione. Prestazioni & Integrazione: fornire una maggiore ottimizzazione della velocità e un migliore utilizzo delle risorse hardware del computer. Accesso ai dispositivi: permettere l'utilizzo di vari dispositivi di input e output, ed anche di Stile consentendo agli autori di realizzare temi più sofisticati.

Semantica

Sezioni e contorni in HTML5
Uno sguardo al nuovo elemento di sezionamento e contorno in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} and {{HTMLElement("hgroup")}}.
Utilizzare audio e video in HTML5
Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permettono la manipolazione di nuovi contenuti multimediali.
Moduli in HTML5
Uno sguardo ai miglioramenti dei moduli web in HTML5: le API di convalida dei vincoli, parecchi nuovi attributi, nuovi valori per {{HTMLElement("input")}}, l'attributo {{htmlattrxref("type", "input")}} e il nuovo elemento {{HTMLElement("output")}}.
Nuovi elementi semantici
Accanto a sezioni, media e elementi dei moduli, 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 elementi validi di HTML5.
Miglioramenti in {{HTMLElement("iframe")}}
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")}}.
MathML
Permette di incorporare direttamente formule matematiche.
Introduzione a HTML5
Questo articolo introduce al come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.
HTML5-analizzatore compatibile
L'analizzatore che converte i byte di un documento HTML nel DOM, è stato esteso ed ora definisce precisamente il comportamento da usare in tutti i casi, anche quando incotra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.

Connettività

Web Sockets
Permette di creare una connesione permanente tra la pagina ed il server e di scambiare dati non HTML attraverso questo mezzo.
Server-event inviati
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.
WebRTC
Questa tecnologia, in cui RTC sta per Real Time Comunication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.

Offline & Memorizzazione

Risorse Offline: la cache dell'applicazione
Firefox supporta pienamente le specifiche offline di HTML5. La maggior parte degli altri hanno un qualche livello di supporto per le risorse offline.
Eventi online and offline
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.
Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)
La memorizzazione lato client, persistene e di sessione, permette alle applicazioni web di immagazzianre strutture dati lato clien.
IndexedDB
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.
Utilizzare file da applicazioni web
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 multiple con type file dell'elemento {{HTMLElement("input")}}. C'è anche FileReader.

Multimedia

Utilizzare audio e video in HTML5
Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di vuovi contenuti multimediali.
WebRTC
Questa tecnologia, in cui RTC sta per Real Time Comunication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.
Utilizzo della API Camera
Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.
Traccia e WebVTT
L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. WebVTT è un formato di traccia testuale.

Grafica & Effetti 3D

Esercitazione sui Canvas
Apprendi il nuovo elemento {{HTMLElement("canvas")}} e come disegnare grafica ed altri oggetti in Firefox
API di testo per gli elementi <canvas>  di HTML5
Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.
WebGL
WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.
SVG
Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.

Prestazioni & integrazione

Web Workers
Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.
XMLHttpRequest Livello 2
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 Ajax.
JIT-motori JavaScript compilati
La nuova generazione di motori JavaScript sono molto più potenti, garantendo maggiori prestazioni.
History API
Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.
L'attributo contentEditable: trasforma il tuo sito web in un wiki!
HTML5 ha standardizzato l'attributo contentEditable.
Drag & drop
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.
Gestione del focus in HTML
Sono supportati i nuovi attributiHTML5 activeElement e hasFocus.
Gestiori di protocollo basato sul Web
E' ora possibile registrare applicazioni web come gestori di protocollo utilizzanto il metodo navigator.registerProtocolHandler().
requestAnimationFrame
Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.
Fullscreen API
Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.
Pointer Lock API
Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.
Eventi online e offline events
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.

Accesso ai Dispositivi

Utilizzare le API Camera
Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.
Eventi Touch
Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.
Utilizzare la geolocalizzazione
Lascia che il browser localizzi la posizione dell'utente utilizzando la geolocalizzazione.
Rilevazione orientamento del dispositivo
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 ragiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (portaritratto o panorama).
Pointer Lock API
Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.

Stile

CSS è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come CSS3, 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 di livello 4, con tutti i livelli intermedi.

Nuove caratteristiche di stile per lo sfondo
E' ora possibile mettere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare sfondi multipli.
Bordi più fantasiosi
Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le sue proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.
Anima il tuo stile
Utilizzando le Transizioni CSS per animare il passaggio tra stati, o utilizzando le Animazioni CSS per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.
Miglioramenti tipografici
Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la sillabazione, ma possono anche applicare un'ombra o controllare più precisamente la sua decorazione. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.
Nuove impaginazione per la presentazione
Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: Impaginazione CSS a colonna multipla, e l'impaginazione CSS a box flessibile.

 

Revision Source

<div class="callout-box">
  <div style="font:normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;">
    Esempi HTML5</div>
  <p>Una <a href="/en-US/demos/tag/tech:html5" title="demos/tag/tech:css3/">collezione di esempi</a> che mostrano le utlime tecnologie HTML in azione</p>
  <p><a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="internal default" src="/@api/deki/files/6020/=HTML5_Logo_128.png" style="" /></a></p>
</div>
<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 permetto siti web e applicazzioni più diversificate e potenti: Questo insieme è chiamato <em>HTML5 &amp; compagni</em> ed è spesso abbreviato in<em> HTML5</em></li>
</ul>
<p>Progettato per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in parecchi gruppi in base alla propria funzione. <em>Semantica</em>: permettere di descrivere con maggiore precisione qual'è il contenuto. <em>Connettività</em>: permettere di comunicare con il server in modi nuovi e innovativi. <em>Offline &amp; Memorizzazione</em>: permettere alle pagine web di immagazzinare dati sul client per operare offline più efficientemente. <em>Multimedia</em>: realizzare audio e video cittadini di prima classe nell'Open Web. <em>Effetti e Grafica 2D/3D</em>: permettere una gamma molto più netta di opzioni di presentazione. <em>Prestazioni &amp; Integrazione</em>: fornire una maggiore ottimizzazione della velocità e un migliore utilizzo delle risorse hardware del computer. <em>Accesso ai dispositivi</em>: permettere l'utilizzo di vari dispositivi di input e output, ed anche di <em>Stile</em> consentendo agli autori di realizzare temi più sofisticati.</p>
<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="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Semantica</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e contorni in HTML5</a></dt>
      <dd>
        Uno sguardo al nuovo elemento di sezionamento e contorno in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} and {{HTMLElement("hgroup")}}.</dd>
      <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 permettono la manipolazione di nuovi contenuti multimediali.</dd>
      <dt>
        <a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Moduli in HTML5</a></dt>
      <dd>
        Uno sguardo ai miglioramenti dei moduli web in HTML5: le API di convalida dei vincoli, parecchi nuovi attributi, nuovi valori per {{HTMLElement("input")}}, l'attributo {{htmlattrxref("type", "input")}} e il nuovo elemento {{HTMLElement("output")}}.</dd>
      <dt>
        Nuovi elementi semantici</dt>
      <dd>
        Accanto a sezioni, media e elementi dei moduli, 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 in {{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="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduzione a HTML5</a></dt>
      <dd>
        Questo articolo introduce al 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">HTML5-analizzatore compatibile</a></dt>
      <dd>
        L'analizzatore che converte i byte di un documento HTML nel DOM, è stato esteso ed ora definisce precisamente il comportamento da usare in tutti i casi, anche quando incotra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.</dd>
    </dl>
    <h2 id="Connettivit.C3.A0" 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="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Connettività</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
      <dd>
        Permette di creare una connesione 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 Comunication, 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_.26_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="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Offline &amp; 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 pienamente le specifiche offline di HTML5. La maggior parte degli altri 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 and 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, persistene e di sessione, permette alle applicazioni web di immagazzianre strutture dati lato clien.</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="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />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 vuovi 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 Comunication, 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>
        Traccia 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_.26_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="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Grafica &amp; Effetti 3D</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Esercitazione 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>&lt;canvas&gt;</code>&nbsp; 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_.26_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="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Prestazioni &amp; integrazione</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/DOM/Using_web_workers" title="Using 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, garantendo 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 &amp; drop</a></dt>
      <dd>
        Le API per il drag &amp; 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">Gestiori di protocollo basato sul Web</a></dt>
      <dd>
        E' ora possibile registrare applicazioni web come gestori di protocollo utilizzanto 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 e offline events</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="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />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>
        Lascia che il browser localizzi la posizione dell'utente utilizzando la 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 ragiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (portaritratto o panorama).</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="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />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 di livello 4, con tutti i livelli intermedi.</p>
    <dl>
      <dt>
        Nuove caratteristiche di stile per lo sfondo</dt>
      <dd>
        E' ora possibile mettere 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 sue 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 sua <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 impaginazione 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>&nbsp;</p>
Revert to this revision