Tour d'horizon HTML5

http://javascript.training.free.fr/html5

http://javascript.training.free.fr/html5/exemples

par Grégory PAUL - @paulgreg

Sommaire

Bref historique
Contexte
HTML 5
CSS 3
JavaScript
HTML 5 + JavaScript
CSS 3 + JavaScript
WebGL
A venir

Bref historique

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
1999 HTML 4.01
2000 XHTML 1
2002 Tableless design
2004 WHATWG
2005 AJAX
2007 XHTML 2 boudé
2007 Le W3C récupère les travaux du WHATWG
2009 Arrêt des travaux sur XHTML 2
2010 HTML 5 + JavaScript API + CSS 3

Contexte

Nouveaux usages : blog, ecommerce, vidéos, applications en ligne...
Plus d'interactivité native (sans plugin)
Maximiser la compatibilité ascendante
La réponse : HTML5 + API JavaScript + CSS 3

HTML 5

<!DOCTYPE html> & <meta charset="UTF-8">
Nouvelles balises (exemple)
Balises vidéos et audio (exemples audio et video)
Nouveaux champs de formulaire (exemple)
Nouveaux attributs notamment autofocus, placeholder
Certaines balises et attributs dépréciés : frame, frameset, big, font, center, acronym, ...
Intégration de SVG (exemple, autre exemple)
MicroData (exemple)

CSS 3

Multi-colonnes (exemple)
Bordures (exemple)
Gradients (exemple)
Webfonts (exemple)
Manipulation de texte (exemple)
Animations & transitions (exemple)
Flexible box model (exemple, autre exemple)
Nouveaux selecteurs (API)
Media Queries (API)

JavaScript

Geolocation (exemple)
WebWorkers (exemple)
WebSockets (exemple) régression
Orientation (exemple)
Notification (exemple)
sessionStorage & localStorage (exemple)
Web SQL database & IndexedDB (exemple)

HTML 5 + JavaScript

Canvas 2D (exemple 1, 2, 3, 4, 5, 6)
Intégration audio et vidéo (exemple audio et video)
Mode offline (exemple)
Gestion de l'historique (exemple, exemple sur l'événement hashchange et explications)
Edition de contenu (exemple)
Drag & Drop (exemple)
Custom data attribute (exemple)

CSS 3 + JavaScript

Selectors (exemple)
Classlist (exemple)

WebGL

Avant Chrome 9, lancer chrome avec --enable-webgl
Sous Firefox 4, about:config puis enable for all sites
Exemple depuis Learning WebGL
Body Browser de Google

A venir

Ressources