Quand j'ai parlé récemment des nouveautés de Firefox 1.5 Beta 1, je me suis concentré sur l'utilisateur. Certes, l'utilisateur final est au centre des préoccupations du travail de Mozilla Foundation, et ce n'est pas le moindre de ses mérites.

Pourtant, les améliorations de Gecko, le moteur de rendu, sont très nombreuses, et elles touchent essentiellement le développeur Web, l'autre "clientèle" de Firefox. Parmi elles, il en est une famille de fonctionnalités qui me tient à coeur : celle touchant au domaine du graphisme. En effet, on a beau dire que le Web est multimedia[1], car il intègre de la musique, du texte, des images et des animations, il n'en reste pas moins que le graphisme est à la fois essentiel pour certaines applications et limité à l'image fixe (formats JPEG et PNG) ou un peu animée (format breveté GIF, avec tous les problèmes que cela a posé). Pour faire des choses plus complexes, il faut soit recourir à Flash, voire, à l'extrême limite, demander au serveur de générer dynamiquement une image qu'on va recharger. C'est pauvre, bien pauvre, d'autant qu'il n'y a pas d'interaction au sein de la page dans aucun des deux cas, les objets Flash n'étant pas visibles depuis le DOM. En substance, pour ceux qui commencent à mouliner à vide avec les yeux écarquillés, il n'est pas simple de faire interagir un formulaire avec un graphique. L'objet Flash, l'image sur le serveur et le formulaire sont dans trois mondes différents... Pour les applications de type Ajax, qui ne jurent que par l'interactivité, ça la fiche bigrement mal. C'est là qu'arrivent deux technos qui bouchent le trou béant que je viens de décrire. Il s'agit respectivement de SVG et de Canvas.

SVG et Canvas sont deux technologies très différentes dans leur approche. SVG est dans la droite ligne des technologies du W3C à base de XML, ce qui est à la fois une qualité et un défaut. SVG est supporté nativement par Opera (dans sa version Tiny) et par Firefox 1.5, ainsi que par Internet Explorer, quand il est équipé d'un plug-in optionnel fourni par Adobe.

A l'inverse, Canvas est une approche simplifiée (certains diront simpliste) qui permet simplement de dessiner dans une zone du document, via une API JavaScript. Canvas est supporté par Safari, qui l'utilise d'ailleurs largement pour dessiner les Widgets du magnifique Dashboard.

Mais un dessin vaut mieux que de longs discours, dit-on, et c'est encore plus vrai pour des fonctions graphiques ! Voici donc quelques démonstrations de Canvas, réalisées par Infernal Quack :

Pour ceux qui n'ont pas encore installé Firefox 1.5 Beta 1 ou supérieux, voici ce que vous devriez voir :

Je pense qu'il ne s'agit là que d'un tout début, et l'immense galerie de Widgets Dashboard (plus de 1000) devrait nous ouvrir les yeux sur les possibilités immenses du graphisme intégré dans les applications Web.

Et comme on ne va pas se quitter comme cela, parce qu'il faut bien respecter les tradition du Standblog, j'ai peine à résister à vous faire un petit teasing (ça faisait longtemps) : j'ai suggéré à un brillant développeur français[2] de nous faire une petite application de démo de canvas, application qui devrait sortir prochainement. Stay tuned!.

Pour en savoir plus

Notes

[1] que ce terme semble maintenant vieillot !

[2] Non, ça n'est pas Olivier Meunier, il est bien trop occupé à bidouiller nos serveurs !