mozilla

Revision 337925 of HTML5

  • Revision slug: HTML/HTML5
  • Revision title: HTML5
  • Revision id: 337925
  • 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:

  • Un 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 con il solo HTML5

Progettato per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie di HTML5, classificate in parecchi gruppi in base alla propria funzione. Semantica: permettono di descrivere con maggiore precisione qual'è il contenuto. Connettività: permettono di comunicare con il server in modi nuovi e innovativi. Offline & Memorizzazione: permettono 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: permette una gamma molto più netta di opzioni di presentazione. Prestazioni & IntegrazioneI: fornisce una maggiore ottimizzazione della velocità e un migliore utilizzo delle risorse hardware del computer. Accesso ai dispositivi: permette l'utilizzo di vari dispositivi di input e output, ed anche di Stile facendo scrivere agli autori 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: A look at improvements to web forms 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 direttametne formule matematiche.
Introduzione a HTML5
Questo articolo introduce 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 sottoposse eventi al client, invce del classico paradigma in 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 controlla 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 lascia rilevare alle applicazioni ed estensione se c'è o no una connessione internet attiva, nonché quando la connessione si attiva o disattiva.
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 ad elevate prestazioni su tali stai tramite indici.
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.
Using the Camera API
Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.
Traccia e WebVTT
L'elemento {{HTMLElement("track")}} consente capitole 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 da queste attività di rallentare gli eventi interattivi.
XMLHttpRequest Livello 2
Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variando in base al tempo e alle azioni dell'utente. Questa è la tecnologia dietro Ajax.
JIT-motori JavaScript compilati
La nuova generazione di motori JavaScript sono molto più potenti, garantendo a 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. Learn more about this feature.
Drag and drop
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
Focus management in HTML
The new HTML5 activeElement and hasFocus attributes are supported.
Web-based protocol handlers
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.
requestAnimationFrame
Allows to control animations rendering to obtain optimal performance.
Fullscreen API
Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
Pointer Lock API
Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.
Online and offline events
In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.

Accesso ai Dispositivi

Using the Camera API
Allows to use, manipulate and store an image from the computer's camera.
Touch events
Handlers to react to events created by a user pressing touch screens.
Using geolocation
Let browsers locate the position of the user using geolocation.
Detecting device orientation
Let get the information when the device on which runs the browser change orientation. This can be used as an input device (e.g. to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
Pointer Lock API
Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.

Stile

CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification anymore and the different modules are not all at level 3: some are at level 1 and some at level 4, with all the intermediate levels covered.

New background styling features
It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and multiple backgrounds can be set.
More fancy borders
Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.
Animating your style
Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a trigerring event, you can know control mobile elements on your page.
Typography improvement
Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and hyphenation, but also can a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.
New presentational layouts
In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layout, and the CSS flexible box layout.

 

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>Un 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 con il solo<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 di HTML5, classificate in parecchi gruppi in base alla propria funzione. <em>Semantica</em>: permettono di descrivere con maggiore precisione qual'è il contenuto. <em>Connettività</em>: permettono di comunicare con il server in modi nuovi e innovativi. <em>Offline &amp; Memorizzazione</em>: permettono 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>: permette una gamma molto più netta di opzioni di presentazione. <em>Prestazioni &amp; IntegrazioneI</em>: fornisce una maggiore ottimizzazione della velocità e un migliore utilizzo delle risorse hardware del computer. <em>Accesso ai dispositivi</em>: permette l'utilizzo di vari dispositivi di input e output, ed anche di <em>Stile</em> facendo scrivere agli autori temi più sofisticati.</p>
<div class="cleared row topicpage-table">
  <div class="section">
    <h2 id="Semantics" 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: A look at improvements to web forms 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 direttametne 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 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="Connectivity" 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 sottoposse eventi al client, invce del classico paradigma in 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 controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd>
    </dl>
    <h2 id="Offline_.26_storage" 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 lascia rilevare alle applicazioni ed estensione se c'è o no una connessione internet attiva, nonché quando la connessione si attiva o disattiva.</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 ad elevate prestazioni su tali stai tramite indici.</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">Using the Camera API</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 capitole e sottotitoli. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> è un formato di traccia testuale.</dd>
    </dl>
    <h2 id="3D.2C_graphics_.26_effects" 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="Performance_.26_integration" 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 da 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, variando in base al tempo e 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 a 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. Learn more about this feature.</dd>
      <dt>
        <a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
      <dd>
        The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd>
      <dt>
        <a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt>
      <dd>
        The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
      <dt>
        <a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
      <dd>
        You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
      <dt>
        <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
      <dd>
        Allows to control animations rendering to obtain optimal performance.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
      <dd>
        Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd>
      <dt>
        <a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
      <dd>
        Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.</dd>
      <dt>
        <a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
      <dd>
        In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd>
    </dl>
    <h2 id="Device_access" 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">Using the Camera API</a></dt>
      <dd>
        Allows to use, manipulate and store an image from the computer's camera.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt>
      <dd>
        Handlers to react to events created by a user pressing touch screens.</dd>
      <dt>
        <a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt>
      <dd>
        Let browsers locate the position of the user using geolocation.</dd>
      <dt>
        <a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt>
      <dd>
        Let get the information when the device on which runs the browser change orientation. This can be used as an input device (e.g. to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd>
      <dt>
        <a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
      <dd>
        Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.</dd>
    </dl>
    <h2 id="Styling" 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> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification anymore and the different modules are not all at level 3: some are at level 1 and some at level 4, with all the intermediate levels covered.</p>
    <dl>
      <dt>
        New background styling features</dt>
      <dd>
        It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd>
      <dt>
        More fancy borders</dt>
      <dd>
        Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd>
      <dt>
        Animating your style</dt>
      <dd>
        Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a trigerring event, you can know control mobile elements on your page.</dd>
      <dt>
        Typography improvement</dt>
      <dd>
        Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd>
      <dt>
        New presentational layouts</dt>
      <dd>
        In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
    </dl>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision