mozilla
Risultati di ricerca

    HTML5

    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 definisce HTML. 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 permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato HTML5 & compagni ed è spesso abbreviato in HTML5

    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.

    Semantica: descrivere con maggiore precisione il contenuto.
    Connettività: comunicare con il server in modi nuovi e innovativi.
    Offline & Memorizzazione: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.
    Multimedia: rendere audio e video cittadini di prima classe nell'Open Web.
    Effetti e Grafica 2D/3D: usare una gamma molto più ampia di opzioni di rappresentazione.
    Prestazioni & Integrazione: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.
    Accesso ai dispositivi: usare vari dispositivi di input e output.
    Stile: consentire agli autori di realizzare temi più sofisticati.

    Semantica

    Sezioni e struttura in HTML5
    Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: <section> , <article> , <nav> , <header> , <footer> , <aside> e <hgroup>.
    Integrare audio e video in HTML5
    Gli elementi <audio> e <video> permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.
    Forms in HTML5
    Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo type degli <input>, e il nuovo elemento <output>.
    Nuovi elementi semantici
    Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, o <meter>, che accrescono la quantità di elementi validi di HTML5.
    Miglioramenti degli <iframe>
    Utilizzando sandbox, seamless, e gli attributi srcdoc, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento <iframe>.
    MathML
    Permette di incorporare direttamente formule matematiche.
    Introduzione a HTML5
    Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.
    Parser di HTML5-compatibile
    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.

    Connettività

    Web Sockets
    Permette di creare una connessione 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 Communication, 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 a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.
    Eventi online e 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, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.
    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 <input>. C'è anche FileReader.

    Multimedia

    Utilizzare audio e video in HTML5
    Gli elementi <audio> e <video> incorporano e permetto la manipolazione di nuovi contenuti multimediali.
    WebRTC
    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.
    Utilizzo della API Camera
    Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.
    Track e WebVTT
    L'elemento <track> consente capitoli e sottotitoli. WebVTT è un formato di traccia testuale.

    Grafica & Effetti 3D

    Tutorial sui Canvas
    Apprendi il nuovo elemento <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 <canvas>.
    WebGL
    WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi <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, e garantiscono 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.
    Gestori di protocollo basato sul Web
    E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando 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 ed offline
    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
    Permetti al browser di localizzare la posizione dell'utente grazie alla 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 reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).
    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 livello 4, con tutti i livelli intermedi.

    Nuove caratteristiche di stile per lo sfondo
    E' ora possibile aggiungere un'ombra a un box, utilizzandobox-shadow ed impostare sfondi multipli.
    Bordi più fantasiosi
    Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando border-image e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà 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 text-overflow e la sillabazione, ma possono anche applicare un'ombra o controllare più precisamente la decorazione. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola @font-face.
    Nuove impaginazioni 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.

     

    Etichette del documento e nomi di chi ha collaborato alla sua stesura

    Contributors to this page: teoli, Grino, Giona, Mattei, bertuz83
    Ultima modifica di: teoli,