Questo articolo è stato aggiornato per riflettere lo stato attuale di HTML5, che è completamente implementato. Gli esempi qui elencati sono ancora validi, ma potresti voler visitare le nostre categorie di tutorial per lo sviluppo web per HTML e HTML5 per informazioni più recenti sulle migliori pratiche di sviluppo Web HTML ed esempi di codice.
Ci sono diversi articoli che elencano alcune importanti funzionalità imminenti di HTML5, che possono funzionare su determinati browser. Questo tutorial per lo sviluppatore web ti mostrerà come utilizzare alcune funzionalità di HTML 5 ORA!
Funzionalità HTML5
Funzionalità di HTML 5 che sono utili proprio adesso includere:
- Lavoratori Web: alcune applicazioni Web utilizzano script pesanti per eseguire funzioni. I Web Worker utilizzano thread in background separati per l’elaborazione e non influisce sulle prestazioni di una pagina Web.
- video: puoi incorporare video senza plug-in o codec proprietari di terze parti. Il video diventa facile come incorporare un’immagine.
- Tela: questa funzione consente a uno sviluppatore web di eseguire il rendering della grafica al volo. Come per il video, non è necessario un plug-in.
- Cache dell’applicazione: le pagine Web inizieranno a memorizzare sempre più informazioni localmente sul computer del visitatore. Funziona come i cookie, ma dove i cookie sono piccoli, la nuova funzionalità consente file molto più grandi. Google Gears ne è un eccellente esempio in azione.
- Geolocalizzazione: meglio conosciuto per l’uso su dispositivi mobili, la geolocalizzazione viene fornita con HTML5.
Se vuoi sapere se una delle funzionalità di cui sopra funziona su un determinato browser, puoi testarlo Modernizzatore. Questa piccola libreria JavaScript è utile anche per rilevare CSS3. Dal sito web di Modernizer, “Modernizr è una piccola e semplice libreria JavaScript che ti aiuta a sfruttare le tecnologie web emergenti (CSS3, HTML 5) pur mantenendo un buon livello di controllo sui browser meno recenti che potrebbero non supportare ancora queste nuove tecnologie. “
La sintassi Modernizer è intuitiva:
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
Inserisci semplicemente il file JavaScript modernizr-1.1.js nella tua pagina e aggiungi una classe di “no-js” nell’elemento . È quindi possibile utilizzare l’oggetto JavaScript Modernizr e le varie classi CSS che allega all’elemento html. Ecco un esempio di come farlo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learning HTML5</title> <script src="https://www.htmlgoodies.com/html/html-5-features-what-web-developers-can-use-now/modernizr.min.js"></script> </head> <body> Your web page here. </body> </html>
Per quelli di voi con un occhio attento, avrete notato il semplificato
Se stai ancora usando,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
come tuo doctype, puoi semplificarlo e abbreviarlo in questo momento. Funziona in tutti i browser. Puoi anche accorciare,
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Per
<meta charset="utf-8">
Inoltre, puoi abbreviare il riferimento al tuo CSS da:
<style type="text/css">
Per
Se usi JavaScript nella tua pagina web, puoi anche abbreviare la sintassi lì. Ecco il codice originale da parte di una casella di ricerca di Google:
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
Puoi abbreviarlo eliminando “text/javascript”. Ho testato tutto quanto sopra nel mio sito personale e tutto funziona ancora in Internet Explorer, Firefox e Chrome. L’ho già detto e lo ripeto, per me la parte migliore di HTML5 è il codice più pulito, più semplice e più breve. A lungo termine, le pagine Web funzioneranno più velocemente e senza intoppi che mai con meno possibilità di errori di codifica.
Visita la nostra sezione HTML per tutorial di sviluppo web più aggiornati con HTML e HTML5.