Évolution de l’interactivité web : notre perspective sur le HTML5

S’il y a un mot qui a acquis une popularité et une reconnaissance inégalée dans les dernières années dans le domaine du web, c’est bien le fameux HTML5. À ceux pour qui le terme est toujours nébuleux, le HTML5, c’est la plus récente norme au niveau de la structure des pages web à avoir été décrétée par les grands normalisateurs du web, le W3C. En gros, c’est un ensemble de règles qui régissent tous les éléments que les différents navigateurs devraient comprendre et implanter.

Un paquet de règles, en soi, ça n’a rien de très excitant. Alors, pourquoi le HTML5 est-il si novateur ? De tous les temps, les normes html permettaient d’afficher du contenu textuel et des images. Pour rendre le tout plus dynamique et riche, la solution la plus répandue jusqu’à tout récemment était l’utilisation d’une extension (plugin) installée sur le navigateur, tel que Flash Player par exemple. La grosse lacune à ce jour, c’est que les appareils mobiles (téléphones, tablettes) ne supportent pas, pour la plupart, lesdits plugins ! Mais voilà qu’avec quelques nouvelles balises, HTML5 change tout en permettant maintenant d’intégrer des contenus plus riches aux sites web, sans obliger l’utilisateur à installer quoi que ce soit sur son navigateur.

En tant qu’équipe interactive chez Absolunet, Yanick Legault et moi travaillons principalement avec tout ce qui touche l’interactivité : animation, vidéo, audio, etc. C’est pourquoi notre perspective sur le HTML5 est essentiellement axée sur ces éléments. Bien que la nouvelle norme intègre plusieurs nouveaux éléments sémantiques, ce qui nous intéresse vraiment c’est ce qui bouge, ce qu’on voit, ce qu’on entend et ce que l’utilisateur peut percevoir. À cet égard, le HTML5 nous offre maintenant les balises <video> et <audio>, qui permettent respectivement  — vous l’aurez deviné — d’intégrer des vidéos et des sons directement dans la page web. Quant à elle, la nouvelle balise <canvas> offre une surface permettant de dessiner et/ou animer plusieurs éléments : vecteurs, images, vidéos, etc.

Nos premières expérimentations nous ont laissés un peu dubitatifs. Les performances n’étaient pas celles espérées et le dessin sur le canvas s’avérait très gourmand au niveau du processeur. Une animation saccadée, qui « lag », ça ne passe avec nous. Heureusement, c’était il y a déjà un certain temps, et nos plus récentes expériences ont été fort encourageantes ! Par exemple, en quelques lignes de Javascript, nous pouvions dessiner environ 30 000 images dans un canvas à chaque « scroll » de page,  sans ralentissement matériel. Par la suite, nous avons pu dématérialiser les images en milliers de pixels et obtenir une animation fluide et très impressionnante. La relève HTML5 pour une technologie telle que Flash est très prometteuse. La technologie évolue rapidement et son implantation est de plus en plus efficace.

Par contre, si nous croyons qu’il est maintenant possible d’obtenir des résultats similaires et tout aussi performants en HTML5 + javascript qu’avec un plugin, il faut tout de même savoir que le développement n’est pas sans heurts. Comme chaque navigateur propose sa propre implémentation des standards, il faut parfois beaucoup plus de travail pour qu’une expérience soit la même partout. Par exemple, dans le cas des vidéos, chaque navigateur supporte une compression différente. Il faudra donc exporter minimalement 3 formats vidéos différents. Par ailleurs, si les navigateurs les plus récents supportent le HTML5, ce ne sont pas la majorité des utilisateurs qui ont la dernière version de leur navigateur. Il faut donc prévoir une version fonctionnelle pour ceux-ci. Dans le cas du vidéo, il pourrait s’agir d’un lecteur vidéo Flash. Enfin, comme la technologie en est encore à ses débuts, elle demande beaucoup plus de recherche et développement pour obtenir les résultats souhaités. L’absence d’outils tels qu’un IDE (integrated development environment) rend d’autant plus ardu le développement.

Mais halte au pessimisme, car la médaille a toujours deux côtés. L’utilisation du HTML5 a l’avantage non-négligeable de permettre au contenu d’être beaucoup plus accessible et mieux référençable, puisque celui-ci n’est pas pris dans un plugin qui le rend indéchiffrable pour les moteurs de recherche ou lecteurs d’écran. On pourrait donc produire un site disponible et lisible pour tous les navigateurs, même mobiles, tout en améliorant progressivement l’expérience utilisateur selon les capacités matérielles de l’utilisateur.

Ainsi donc, le HTML5 est très prometteur. Il y a fort à parier qu’avec l’augmentation des capacités matérielles de nos appareils, nous pourrons bientôt offrir une expérience utilisateur encore plus riche, sur de plus en plus de plate-formes et des animations de plus en plus impressionnantes et complexes. Qu’adviendra-t-il alors des outils, comme Flash, qui servaient jusqu’alors à cet effet ? Eux aussi pourront évoluer, et leur utilité se redéfinira. Par exemple, la dernière version du plugin Flash, le Flash Player 11, permet maintenant de réaliser des éléments en 3d et de les rendre en temps réel, tout en profitant de l’accélération matérielle de l’ordinateur pour ce faire. Les possibilités en interactivité se multiplient donc sans cesse et il ne nous reste qu’à mettre la main à la pâte pour les explorer et repousser nos propres limites continuellement.

Pour un bon exemple de ce qui peut être développé en HTML5, je vous conseille le site www.pirateslovedaisies.com, un jeu de pirates tout HTML5.