HTML 5

Une vue d'ensemble de ce qu'apporte HTML 5. C'est autant qu'un successeur à HTML 4, une plateforme pour les applications en ligne ou même locales (notamment avec Metro).

Le nouveau format crée un standard pour de nombreuses fonctionnalités auparavant disponibles sous forme de plugins, et permet ainsi de créer des sites plus évolués accessibles à tous les internautes.

Graphisme dans la page

Canvas permet d'intégrer des dessins vectoriels dans une page. Ce peut être des graphiques par exemple. Il peut aussi être utilisé pour l'interface d'une application et remplace ainsi Flash.
Canvas est programmable par JavaScript: les graphismes sont dynamiques et interactifs.
De nombreuses librairies sont disponibles pour faciliter la tâche du webmaster.

Tutoriel Canvas.

Widgets

Les widgets insérés dans les pages dans des iFrames peuvent communiquer entre eux par envoi de messages.
Ces Widgets obtiennent souvent des informations de sites tiers, c'est le cas par exemple du widget RSS de Google. Ces informations peuvent être reliées à celles d'autres widgets et déterminés par elles.

Widgets. Composants d'interface graphique.
Combobox.
Bouton SVG, Canvas ou standard. Comment étendre HTML 5 avec de nouveaux objets de formulaire.
Barre de progression en HTML 5 et équivalent HTML 4.

Application Web

On a le choix entre Canvas et les objets de formulaire pour créer l'interface d'une application. Ces objets sont plus nombreux et plus évolués avec la version 5 de HTML.
Créer une application en ligne aussi évoluée qu'une application locale devient plus facile. Pour l'utilisateur l'avantage est dans la portabilité universelle, l'absence d'installation, la mise à jour automatique, et l'utilisation sur différents matériels.
Le mode hors ligne de HTML 5 a rendu Gears de Google obsolète. Il permet de faire fonctionner une copie locale d'une application web et dispense de liaison internet.

Liste de tous les objets de formulaire.
Les nouveaux attributs de HTML 5.
Frameworks.
Moteurs de jeux 3D.
Glisser et déposer dans une page HTML. Démonstration avec des images et le panier d'une boutique en ligne.
Compatibilité des nouvelles technologies du Web. Comme on l'a fait pour les objets de formulaire, test de Worker, WebSocket, etc.
Outils.

Video et audio

HTML 5 dispose de son propre lecteur video ou audio, personnalisable par CSS. Il dispense de plugins pour les intégrer dans une page, permet aussi d'afficher une image de remplacement, de charger le fichier en tâche de fond et d'aller directement en un point de la vidéo (comme le fait déjà Youtube) ou la bande son.

WebM. Un codec video pour HTML 5.

Persistence des données

Grâce à des variables de stockage dont l'espace de visibilité est la session, les données plus importantes que ce que permettent les cookies sont conservées localement. C'est aussi beaucoup plus simple pour le développeur.

IndexedDB, démonstrations

Microformats

Il aident à extraire des données d'une page grâce à des formats standards similaires à celui de RSS.
Un exemple en est l'utilisation par Google de la description de recettes de cuisine dans un microformat intégré au code de la page, pour mieux les présenter dans ses pages de résultats.

Simplification

Outre la balise vidéo, HTML 5 apporte des simplifications au design des pages. Le glisser-déposer est une fonction nouvellement incluse de base dans le format.
Les nouvelles balises <section> aident à organiser une page.
Mais les balises actuelles peuvent êtres étendues et simplifiées, un exemple:

<!DOCTYPE html>

Documents et widgets HTML