Un ancien collègue m’a envoyé un E-mail il y a quelques jours me demandant : « Est-ce que tu t’intéresses à l’HTML5 ? Si oui, comptes-tu t’en servir ? Pour quoi ? Et surtout quand ? »

Je l’ai tout d’abord redirigé vers l’article que j’avais déjà écrit à ce sujet, « HTML5, le nouvel argument commercial », que je vous invite à lire dans ce même blog si vous ne l’avez pas déjà fait. En substance, j’indiquais que tout le monde parle d’HTML5 en faisant un amalgame, confondant allègrement avec ce que l’on peut déjà faire en HTML 4 depuis des années et qui commence tout juste à être exploité. Après une brève mise au point sur ce qu’est HTML 4, je vais décrire ce qu’apporte HTML5 et à quoi l’on pourra s’en servir. Analyse.

HTML 4, le CSS et le JavaScript

Avant HTML5, il y avait HTML 4, dont la dernière version, la 4.01, a été validée le 16 décembre 1999, soit trois générations en informatique (une génération étant égale à trois ans). HTML 4 ne définit que le langage basé sur les tags <p>, <br>, <a>, <strong>, … À côté de cela, la norme CSS, dont la dernière version, la 2, a été validée le 12mai1998, définit toutes les règles de mise en page. La norme CSS ne fait pas partie de HTML 4, mais HTML 4 dit que tous les tags qui existaient auparavant pour définir des règles de mise en page, comme <b>, <font>, …, sont dorénavant déconseillés. Un langage de style doit être utilisé à la place. La norme ECMA Script, dans sa version 2.6.2, validée en décembre 1999, est utilisée comme langage de script pour réaliser des opérations dynamiques au sein du navigateur. Enfin, la norme DOM, dont la dernière version 2 a été validée le 13 novembre 2000, permet de faire le lien entre l’arbre HTML, le CSS et le langage de script. Deux implémentations, JScript par Microsoft et JavaScript par Netscape ont longtemps coexisté avec leurs incompatibilités qui ont freiné les ardeurs de plus d’un développeur. C’est d’ailleurs en raison de ces incompatibilités que l’HTML 4 n’a pendant très longtemps pas été utilisé à la hauteur de ses capacités.

L’HTML 4 dynamique est déjà très riche

L’HTML 4 dynamique est déjà très riche. On parle beaucoup d’Ajax. C’est disponible depuis 2001. Des animations ? Cela pullulait sur Internet en 2002. Et tout fonctionne, même sur de très vieux navigateurs comme Internet Explorer 6.

Le renouveau de l’HTML 4 dynamique est surtout du à l’explosion de nouveaux frameworks basés sur JavaScript. Ces frameworks proposent un ensemble de fonctions pour pallier aux défauts ou aux manques de JavaScript et surtout régler ses problèmes d’incompatibilité entre navigateurs. Avec eux, il est plaisant de développer en JavaScript et même facile pour certaines animations. Les frameworks les plus connus sont les suivants : Mootools, Prototype, Dojo, Scriptaculous, Jquery, Ext Js. Chaque framework a ses spécificités. Il est difficile de dire quel est le meilleur. Parfois, il faut même en utiliser plusieurs simultanément, ce qui n’est pas toujours simple.

Avec ces frameworks, on peut faire des animations de type déplacement d’éléments visuels, apparition, disparition, l’échange de données avec le serveur distant, le drag & drop, afficher des tableaux avec dimensionnement et tri automatique des cellules et bien d’autres choses.

Les simples fonctionnalités d’HTML 4 permettent déjà d’aller très loin. De nombreux sites devraient mieux l’exploiter. Ils gagneraient en ergonomie. Et surtout, c’est disponible sur tous les navigateurs Internet.

HTML5 et sa disponibilité

La norme HTML5 inclut dans sa définition tout ce qui est CSS, JavaScript et DOM ainsi que de nouveaux tags, pour faciliter la rechercher sémantique, et de nouvelles fonctions JavaScript. HTML5 a comme grand défaut d’être encore trop jeune. La norme n’est pas finalisée. Les navigateurs qui supportent HTML5 ne sont pas totalement compatibles entre eux. Les fonctionnalités n’existent que partiellement, même sur les dernières versions des navigateurs. HTML5 n’est à exploiter que par ceux que l’on appelle les early adopters, les personnes qui sont férues de nouvelles technologies.

À ce titre, HTML5 n’est pour l’heure utilisé que comme démonstrations techniques sans réelle utilité si ce n’est en mettre plein la vue. Tous les navigateurs se sont mis à HTML5, chacun à leur rythme. Le plus en retard est Microsoft qui n’implémente HTML5 qu’à partir de la version 9, disponible aujourd’hui en version béta et uniquement sur Windows Vista et Windows 7. Les utilisateurs de Windows XP qui représentent encore plus de 50 % des utilisateurs de Windows ne pourront bénéficier d’HTML5 qu’en changeant de système ou de navigateur. Ces personnes étant en majorité peu connaisseuses de la technique, il va être difficile de leur faire changer de navigateur ou de système. Il faudra attendre entre trois et cinq ans avant de pouvoir utiliser sans risque HTML5. Il existe toutefois une solution intermédiaire, Google Chrome frame, dont je parle dans l’article « Google Chrome Frame, la solution pour HTML5 », qui permettrait d’accélérer l’adoption de HTML5.

Les fonctionnalités principales de HTML5

Entrons maintenant dans le vif du sujet et voyons les fonctionnalités propres à HTML5 et en quoi il serait intéressant de les utiliser.

Au sommaire :

• Audio et Vidéo
• Drag & Drop
• Canvas
• La géolocalisation
• Base de données locale
• Mode hors ligne

HTML5 : Audio et Vidéo

L’arrivée des tags Audio et Vidéo ont permis de lancer le buzz de HTML5. Jusque là, il était impossible de lire de l’audio ou de la vidéo avec HTML. Pour le faire, il fallait recourir à des plugins comme Flash. D’ailleurs, Flash est aujourd’hui omniprésent sur toutes les solutions de vidéo en ligne.

Que peut apporter ce support de l’audio et de la vidéo via HTML5 vu que Flash couvre déjà le terrain ? La communauté Open Source clame haut et fort que Flash est propriétaire alors que HTML5 est Open Source. Pour elle, HTML5 doit remplacer Flash en matière de multimédia.

À mon avis, ce n’est qu’une évolution technique qui sera totalement transparente pour les utilisateurs. Que ce soit en Flash ou en HTML5, les sons et les vidéos ne se joueront pas différemment. Si HTML5 ne se limite qu’à cela, ce qui n’est pas le cas, alors HTML5 n’apporte rien d’intéressant.

D’autant plus que la norme décrit la manière de jouer des vidéos, mais ne parle pas du format des vidéos. Il n’en fallait pas plus pour créer une guerre des formats vidéo. Le format H264, appelé également Mpeg 4, semble avoir pris le dessus. Déjà présent dans Flash et utilisé par tous les systèmes de télévision modernes, il est aujourd’hui le plus utilisé. Il est également le meilleur format actuellement existant. Aujourd’hui, seul Firefox ne supporte pas ce format car il n’est pas Open Source. Pourtant, sa licence d’utilisation est gratuite. Firefox préfère le format open source Ogg Vorbis. Très apprécié des défenseurs de l’Open Source, il reste toutefois moins performant que H264. Ce format n’aura pas, à mon avis, droit au chapitre. Firefox devrait se rallier tôt ou tard au H264. A moins que le format WebM prenne le dessus. Ce dernier format, apparu en 2010, est plébiscité par Google qui compte bien, avec sa puissance, l’imposer.

En attendant, les sites Internet bien connus pour la diffusion de vidéos utilisent le format H264 et commencent à utiliser le format WebM. Mais surtout, ils commencent à adapter leur lecteur vidéo en fonction des capacités du navigateur : HTML5 pour ceux qui le supportent, Flash sinon.

HTML5 : Drag & Drop

Avec le support du Drag & Drop natif en HTML5, on est là encore en face d’une fonctionnalité technique qui n’apportera pas grand-chose aux utilisateurs. Le Drag & Drop est en effet possible en HTML 4. C’est certes plus compliqué à mettre en place, mais avec l’aide des frameworks JavaScript existants, cela devient un jeu d’enfant. Pas la peine de s’attarder dessus si ce n’est qu’il sera possible de drag & dropper un ou plusieurs fichiers de son explorateur vers son navigateur. Le système d’envoi de fichier unique existe depuis les premières versions d’HTML, mais son utilisation n’est pas très adaptée. L’envoi de fichiers multiples n’est possible que via l’utilisation d’un widget Flash. Le drag & drop de plusieurs fichiers apporte une avancée ergonomique certaine. Il est à noter que j’utilise d’ores et déjà cette fonctionnalité pour les envois de fichiers multiples avec utilisation d’un widget Flash dans le cas où HTML5 n’est pas supporté.

HTML5 : Canvas

Canvas est la seconde fonctionnalité HTML5 qui a beaucoup fait parler d’elle. Ce n’est ni plus ni moins qu’une zone rectangulaire que l’on peut positionner où l’on veut, y compris sur la totalité de la page, accompagné d’un ensemble de primitives graphiques accessibles par une extension JavaScript afin de dessiner ce que l’on veut.

Jusqu’alors, si l’on voulait faire des graphes ou des camemberts, il fallait générer une image du coté du serveur, le navigateur se limitant seulement à afficher cette image. Si l’on voulait que le graphe soit dynamique, il fallait alors passer par Flash. Animations, bandes dessinées et effets graphiques étaient le domaine réservé de Flash. Canvas apporte ces services à HTML5. Les démonstrations que l’on peut voir ici ou là prouvent que les possibilités sont énormes.

Flash a aujourd’hui plusieurs longueurs d’avance dans ce domaine. Alors qu’en HTML5, nous n’avons pour l’instant qu’un langage avec des fonctionnalités basiques, Flash possède de très nombreuses extensions qui permettent de faciliter les développements. Ces extensions arrivent peu à peu pour HTML5, notamment via le framework Ext Js rebaptisé Sencha.

Personnellement, je ne suis pas un féru des animations graphiques. Toutefois, il m’est arrivé à plusieurs reprises d’être bloqué dans mes développements par les limitations de HTML 4. J’ai notamment dû développer des diagrammes en bâtons en utilisant du CSS. Cela fonctionne plutôt bien. Mais si j’avais voulu faire des courbes, cela devenait mission impossible.

Autre cas d’utilisation : les polices de caractères. La liste des polices de caractères disponibles pour réaliser un site Internet est plus que limitée. Et il est impossible d’y appliquer des effets. Il m’est arrivé à plusieurs reprises de représenter des titres stylisés sous forme d’images créées dynamiquement du coté du serveur. Cette extension me permettra de le faire sans intervention du serveur.

HTML5 :la géolocalisation

La géolocalisation, c’est la possibilité en mobilité de savoir à tout instant où l’on se trouve. Couplé à une autre fonctionnalité disponible via Google Maps, permettant de connaître la distance par la route entre deux points, les possibilités deviennent infinies. L’idée la plus évidente qui nous vient à l’esprit, c’est d’obtenir la liste des restaurants les plus proches de là où l’on se trouve. Mais cela peut s’appliquer à de nombreux autres domaines. Prenons l’exemple de la recherche d’un hébergement. Vous envisagez d’aller dans une ville que vous ne connaissez pas. Où dormir ? Il n’y a aucun site aujourd’hui réellement efficace pour répondre à votre question. Vous devez aller sur les sites de chaînes d’hôtels ou d’associations de gites pour trouver votre bonheur. Malgré cela, ça ne suffit pas. Ces sites vous proposeront leurs solutions dans un département donné. Mais un département, c’est grand. Vous ne saurez pas à quelle distance ces sites se trouvent du point qui vous intéresse. Vous devez donc essayer chaque adresse, une par une, avec Google Maps qui vous indiquera la distance de votre point d’attache. Une perte de temps énorme. À l’aide de la géolocalisation et des fonctionnalités de calcul de distance entre deux points, vous saurez exactement quelle solution d’hébergement est le plus proche de vous, sans effort.

Cet exemple s’applique à tous les domaines où l’on est amené à rechercher un endroit physique.

HTML5 : base de données locale

La possibilité d’avoir accès à une base de données locale ouvre des perspectives énormes. Je n’ai pas lu beaucoup d’articles sur ce sujet hormis le sujet polémique. Là encore, HTML5 définit une base de données locale avec possibilité de faire des requêtes SQL, sans plus de précisions. La communauté Open Source a immédiatement pensé à SQLite, un système de base de données très léger, parfaitement adapté à ce type de situation. Microsoft, de son côté, est plutôt parti du coté de SQL Server Express, sa solution propriétaire. Bien que les deux supportent SQL, leur syntaxe varie, rendant incompatible une application qui ne serait développée que pour l’un d’eux. Cette difficulté technique devrait être levée là encore par des frameworks JavaScript qui assureront l’interopérabilité. La technique est dorénavant bien connue.

Une fois passé cet obstacle technique, rentrons dans le vif du sujet. Que peut-on faire avec une base de données locale ? Tout simplement y stocker des données. Jusque là, le seul moyen d’échanger ou de stocker des informations, c’était de passer par le serveur via des requêtes Ajax. Certaines de ces informations peuvent maintenant être stockées sur le poste client. Ceci peut limiter le nombre d’accès au serveur, mais permet également d’accéder à de l’hyper-personnalisation. Un exemple bien connu est Gmail, le système de mails de Google. Il offre une fonctionnalité Hors Ligne qui permet de stocker ses mails en local afin de pouvoir les relire sans connexion. Dans le domaine de l’hyper-personnalisation, imaginez un site qui vous propose chaque jour une liste de données. Prenons par exemple de la musique. Parmi cette liste, vous sélectionnez les éléments que vous appréciez le plus, moyennement ou pas du tout. Votre choix est mémorisé dans la base de données locale. Chaque jour, une nouvelle liste vous est présentée. Les éléments que vous n’appréciez pas du tout y sont expurgés. Au fil du temps, la liste ne présentera que des éléments que vous appréciez sans que le serveur ait à mémoriser pour tous ses utilisateurs cette liste de préférences.

HTML5 : Mode hors ligne

Le mode hors ligne n’est qu’une extension du concept de base de données locale. Cette fonctionnalité constituera le cœur du système Chrome OS de Google qui devrait sortir courant 2011. Comme son nom l’indique, le mode hors ligne permet d’utiliser son application sans être connecté à Internet. Le principe est simple. Chaque page est constituée d’élements HTML, CSS, JavaScript et images qui sont mémorisés pour être rejoués hors ligne. En l’absence de connexion à Internet, les données sauvegardées sont reprises. Cela va plus loin que le système de cache actuellement existant car les informations y sont stockées de manière structurées pour que l’application fonctionne hors ligne dans son ensemble. Avec le système de cache, certains éléments sont supprimés selon des critères spécifiques qui pourraient aboutir à la non-disponibilité de certains éléments de la page.

Mais le mode hors ligne peut être utilisé en ligne et réduire ainsi drastiquement l’utilisation du réseau. Prenons par exemple un catalogue de produits avec beaucoup d’images. Au fur et à mesure de la navigation de l’utilisateur sur le site, les images des produits sont stockées pour être réutilisées hors ligne. Lorsque l’on sait que le chargement d’une image est beaucoup plus long que le chargement d’un texte, le fait de ne pas avoir à recharger l’image quand l’utilisateur reviendra sur un produit qu’il a déjà vu, pourra drastiquement améliorer son expérience utilisateur.

HTML5 et l’interopérabilité

Nous avons vu avec ces quelques exemples ce que peut nous apporter HTML5. Il y a bien entendu d’autres possibilités non détaillées ici. Mais l’apport principal d’HTML5 sera très certainement l’interopérabilité. En effet, Internet sera de moins en moins utilisé sur un ordinateur. Il se développe à vitesse grand V sur les téléphones portables et maintenant les tablettes tactiles. De nouveaux périphériques vont arriver dans les prochaines années qui permettront d’accéder à Internet autrement. Le point commun de tous ces périphériques sera HTML et donc HTML5. Développer une application en HTML assurera une interopérabilité que l’on n’aura pas forcément avec les autres systèmes. Il n’y a qu’à voir aujourd’hui Flash qui n’est pas encore supporté sur les périphériques Apple iPhone et iPad. Pour développer une application sur Androïd et iPhone, le développement doit être réalisé deux fois avec deux langages différents et incompatibles. Bien qu’en retard, Windows Phone 7 va faire son apparition et nécessitera la maîtrise d’un troisième langage. Sans parler du système Bada de Samsung, Ovi de Nokia, celui de Blackberry et bien d’autres encore. Le point commun de tous ces systèmes ? HTML5 !

HTML5 va se développer rapidement. Certainement plus rapidement qu’on ne l’imagine. Éventuellement au détriment de certains utilisateurs qui n’auront pas voulu ou su mettre à jour leur navigateur. Je pense que d’ici un an, nous aurons déjà de belles applications en HTML5. Et d’ici trois à cinq ans, son utilisation sera généralisée.

Franck Beulé
Chef de projet Agile, expert des technologies de l’Internet et en ergonomie du Web