Qu'est-ce que le HTML5 ?

Le HTML5, ce n'est pas que de nouveaux éléments. Le HTML5 amène aussi son lot d'API JavaScript, qui vont nous permettre de faire des choses assez intéressantes qui n'étaient pas ou peu possibles avant.

Ce premier chapitre va être l'occasion de faire le tour des nouveautés apportées par le HTML5, avant de commencer l'étude de certaines API JavaScript comme Audio et Video, mais aussi Drag & Drop et bien d'autres choses !

Rappel des faits

On parle beaucoup du HTML5, mais au fond qu'est-ce que c'est ?

Le HTML5 n'est pas juste le successeur du HTML 4, il est bien plus que ça ! Alors que les langages HTML 4 et autres XHTML se focalisaient juste sur le contenu des pages Web, le HTML5 se focalise sur les applications Web et l'interactivité, sans toutefois délaisser l'accessibilité et la sémantique. Le HTML5 se positionne également comme concurrent des technologies Flash et Silverlight !

Le logo de HTML 5

Accessibilité et sémantique

Le HTML5 apporte dès lors de nouveaux éléments comme<nav>,<header>,<article>,<figure>… qui améliorent l'accessibilité, ainsi que des éléments comme<mark>ou<data>qui améliorent la sémantique (c'est-à-dire le sens qu'on donne aux textes).

Applications Web et interactivité

Mais ce qui nous intéresse surtout, c'est ce qui concerne les applications Web et l'interactivité ! Le HTML5 apporte de nombreux éléments comme<video>,<datagrid>,<meter>,<progress>,<output>… ainsi que de nouveaux types pour les éléments<input>, commetel,url,date,number…

Et ce n'est pas tout ! Le HTML5 spécifie aussi un certain nombre d'API JavaScript. Ces API JavaScript sont des techniques que nous allons pouvoir utiliser pour développer des applications Web et ajouter de l'interactivité. Parmi ces API JavaScript, on trouve par exemple l'API Drag & Drop, qui va nous permettre de réaliser des glisser-déposer de façon assez simple.

Concurrencer Flash (et Silverlight)

Le Flash a souvent été décrié car peu accessible, lourd, et nécessitant un plugin appelé Flash Player. Mais le Flash avait le gros avantage de faciliter la lecture de contenus multimédias, de façon quasi multiplateforme et sur tous les navigateurs, ce que ne permettait pas le HTML. En HTML, il a toujours été possible d'insérer du contenu multimédia avec l'élément<embed>, mais l'utilisateur devait disposer de certains plugins en fonction du format de la vidéo lue (QuickTime, Windows Media Player, RealPlayer…). Bref, au niveau du multimédia, le Flash mettait tout le monde d'accord !

Le HTML5 se place en concurrent du Flash, en fournissant des outils analogues de façon native :<video>,<audio>et surtout<canvas>. Il est donc possible dès à présent de lire des vidéos en HTML5 sans nécessiter ni Flash, ni un autre plugin contraignant. L'élément<canvas>permettra de dessiner et donc de réaliser des animations, comme on le ferait avec Flash et Silverlight !

Les API JavaScript

Nous allons rapidement faire le tour des différentes API apportées par le HTML5. Certaines seront vues plus en détail par la suite, comme les API Drag & Drop et File, ainsi que Audio et Video.

Anciennes API désormais standardisées ou améliorées

History : gérer l'historique

Avec le JavaScript, il a toujours été possible d'avancer et de reculer dans l'historique de navigation, c'est-à-dire simuler l'effet des boutonsPrécédentetSuivantdu navigateur. L'API History permet désormais de faire plus, notamment en stockant des données lors de la navigation. Cela est utile pour les applications basées sur l'AJAX, où il est rarement possible de revenir en arrière.

Sélecteurs CSS : deux nouvelles méthodes

Le HTML5 apporte les méthodesquerySelector()etquerySelectorAll(), qui permettent d'atteindre des éléments sur base de sélecteurs CSS, dont les nouveaux sélecteurs CSS3 !

Timers : rien ne change, mais c'est standardisé

Le HTML5 standardise enfin les fonctions temporelles , commesetInterval(),clearInterval(),setTimeout()etclearTimeout().

Nouvelles API

`ContentEditable`

ContentEditableest une technique, inventée par Microsoft pour Internet Explorer, qui permet de rendre éditable un élément HTML. Cela permet à l'utilisateur d'entrer du texte dans un<div>, ou bien de créer une interface WYSIWYG (What You See Is What You Get, c'est-à-dire « ce que vous voyez est ce que vous obtenez »), comme Word.

Web Storage

Le Web Storage est, d'une certaine manière, le successeur des fameux cookies. Cette API permet de conserver des informations dans la mémoire du navigateur, pendant le temps que vous naviguez, ou pour une durée beaucoup plus longue. Les cookies fournissent plus ou moins 4 KB de stockage, alors que le Web Storage en propose 5 MB pour la plupart des navigateurs et 10 MB pour Internet Explorer. Cependant, le Web Storage n'est pas accessible par les serveurs Web, les cookies sont donc toujours de rigueur.

Pour enregistrer une valeur, c'est tout simple, il suffit de faire :

localStorage.setItem('nom-de-ma-cle', 'valeur de la clé');

Il faut donc donner un nom à la clé pour pouvoir récupérer la valeur plus tard :

alert(localStorage.getItem('nom-de-ma-cle'));

Si les données ne doivent être gardées en mémoire que pendant le temps de la navigation (elles seront perdues si l'utilisateur ferme son navigateur), il convient d'utilisersessionStorageau lieu delocalStorage.

Web SQL Database

C'est en quelque sorte une évolution du Web Storage. Le Web Storage ne permet que de stocker des valeurs sous forme de clé, alors que le Web SQL Database fournit une base de données complète ! C'est aussi plus complexe à utiliser, d'autant plus que Firefox ne l'implémente pas et utilise un autre type de base de données : IndexedDB .

HTML5 – Les API JavaScript

WebSocket

Le WebSocket permet à une page Web de communiquer avec le serveur Web de façon bidirectionnelle : ça veut dire que le serveur peut envoyer des informations à la page, tout comme cette dernière peut envoyer des informations au serveur. C'est en quelque sorte une API approfondie duXMLHttpRequest. C'est plus complexe, car cela nécessite un serveur adapté.

Geolocation

L'API de géolocalisation permet, comme son nom le laisse entendre, de détecter la position géographique du visiteur. Mais attention, cela ne fonctionne que si l'utilisateur donne son accord, en réglant les paramètres de navigation de son navigateur.

Workers et Messaging

L'API Workers permettent d'exécuter du code en tâche de fond. Ce code est alors exécuté en parallèle de celui de la page. Si le code de la page rencontre une erreur, ça n'affecte pas le code du Worker et inversement.

Le Worker est capable d'envoyer des messages au script principal via l'API Messaging. Le script principal peut aussi envoyer des messages au Worker. L'API Messaging peut aussi être utilisée pour envoyer et recevoir des messages entre une<iframe>et sa page mère, même si elles ne sont pas hébergées sur le même domaine.

Offline Web Application

Cette API sert à rendre disponible une page Web même si la connexion n'est pas active. Il suffit de spécifier une liste de fichiers que le navigateur doit garder en mémoire.

Quand la page est hors ligne, il convient d'utiliser une API comme Web Storage pour garder en mémoire des données, comme des e-mails à envoyer une fois la connexion rétablie, dans le cas d'un webmail.

Nouvelles API que nous allons étudier

Dans les chapitres suivants, nous allons porter notre attention sur quatre API :

Canvas : elle a été introduite par Apple au sein de son navigateur Safari et permet de « dessiner » en JavaScript. Pour cela, il faut utiliser le nouvel élément HTML5<canvas>. Nous allons y consacrer un chapitre !
Drag & Drop : cette API est issue d'Internet Explorer et permet de réaliser des glisser-déposer de façon relativement simple. Nous allons y revenir en détail.
File : celle-ci va permettre de manipuler les fichiers de manière standard, sans passer par une quelconque extension navigateur. Nous allons également y revenir en détail.
Audio/Video : rien de bien sorcier ici, ces API servent à manipuler les fichiers audio et vidéo. C'est d'ailleurs le sujet du prochain chapitre !

En résumé

Le HTML5 est la nouvelle mouture du langage de balisage HTML. Il a été conçu afin d'améliorer l'accessibilité et la sémantique et augmenter l'interactivité avec l'utilisateur.
Cette nouvelle version n'est pas qu'un amas de nouvelles balises. Elle apporte aussi de nouvelles technologies utilisables au sein du JavaScript.
Parmi les nouvelles API apportées par le HTML5, nous en étudierons quatre : Canvas, Drag & Drop, File et Audio/Video.

Dynamisez vos sites web avec JavaScript !