Aller au contenu | Aller au menu | Aller à la recherche

jeudi, février 11 2010

Faire du drag and drop avec flash en utilisant canvas

À Zoomorama, Flash nous rend bien service. De par ses performances au niveau rendu, il nous permet de développer notre navigateur de documents zoomable, notre "ZoomViewer", que l'on peut intégrer dans une page web. Seul souci avec Flash : il ne connait pas le drag and drop.

Lire la suite...

mardi, février 2 2010

La puissance de HTML5 dans vos applis web

Paul Rouget vient de sortir une nouvelle démo montrant les possibilités techniques de Firefox pour les développeurs web. Ici cependant, c'est plus qu'une démo, c'est une véritable petite application concrète.

Il s'agit d'un outil, qui permet d'envoyer des images sur twitpic et comportant un éditeur d'image. Vous sélectionnez les images que vous voulez envoyer, vous les retouchez éventuellement, et vous les envoyez. Visualisez la video, c'est carrément génial, d'un point de vue technique. C'est du jamais vu dans une application web HTML (je ne parle pas d'applet java ou flash, souvent lourdes et peu ergonomiques).

demo_editeur_twitpic.png

Coté technique donc, voici ce qui est utilisé :

  • HTML5 Canvas: on ne présente plus l'élement <canvas>, qui permet d'avoir une zone dans la page web où l'on peut "dessiner" programmativement. Les images que l'on a glisser dans l'application sont "injectées" dans un canvas. Cela permet alors de les modifier, de proposer à l'utilisateur une mini application de retouche, avec des fonctions de découpage, de décoration, de mirroir etc. Avec Canvas, on peut aller très très loin. Voir par exemple cet outil, sketchpad, un paint-like bien plus beau que l'original :-)
  • HTML5 Drag and Drop: Paul utilise les évènements drag-and-drop, pour permettre, d'une part, de glisser des fichiers de votre bureau ou explorateur de fichiers vers l'application, mais aussi de glisser les images à l'intérieur de l'application entre les différentes fonctionnalités (glisser une image précédemment sélectionnée vers la poubelle par exemple).
  • File API : permet dans l'application d'avoir des informations sur les fichiers, à partir de ce qui est indiqué dans un <input type="file"> ou un évènement drag and drop qui concerne un fichier. Ça permet à l'application de réagir ensuite en fonction du type du fichier, de sa taille etc..
  • HTML5 localStorage: localStorage est un objet javascript qui permet de stocker ce que l'on veut, durablement, coté client. Il est utilisé ici pour stocker les images sélectionnées, en attendant de les envoyer vers twitpic. L'image, affichée en fait via un canvas (ce qui permet de la modifier), est en fait transformée en data URL. Cette URL est alors stockée dans localeStorage.
  • HTML5 Application Cache : toute la machinerie permettant de continuer à faire fonctionner l'application même en étant déconnecté, est utilisée. En particulier, un manifest "offline" est utilisé pour indiquer les fichiers de ressources (js, css) à stocker durablement dans le cache du navigateur, de manière à pouvoir recharger l'application, même en étant déconnecté. En fait, c'est comme si l'application était stockée en local. De plus, les évènements offline et online sont écoutés, pour pouvoir autoriser ou non la publication des images.
  • Cross Site xmlHTTPRequest, un mécanisme http permettant d'autoriser ou non à une application web (ici la demo) de communiquer avec une autre application web (ici twitpic).

Toutes ces technologies, dorénavant présente dans Firefox 3.6 et déjà plus ou moins dans d'autres navigateurs (je n'ai pas vérifié, ça ne va pas tarder en tout cas), offrent de bien belles perspectives en matières d'applications web puissantes et agréables à utiliser. À quand de telles fonctionnalités dans mon outil de blog préféré, pour faciliter l'insertion et la retouche de nouvelles images dans un billet sans ouvrir de lourdes applications graphiques desktop ? ;-)

Cerise sur le gâteau : cette application fonctionne parfaitement dans la version mobile de Firefox, qui est sortie hier pour Maemo :-)

mardi, septembre 22 2009

De la 3D dans Firefox

L'extension canvas 3D permet depuis 2 ans, d'utiliser l'element <canvas> pour faire de la 3D, en profitant de l'accélération matériel apportée par openGL.

S'en est suivi la naissance d'un groupe de travail en mars dernier, au Khronos Group, pour normaliser une API, appelée communément WebGL, dérivée d'OpenGL ES 2.0, qui sera adaptée aux application web. Mozilla et d'autres éditeurs participent à ce groupe.

En juin dernier, le code de l'extension Canvas 3D a été intégré dans le trunk de Mozilla, et ce n'est que depuis quelques jours que ce code a été activé par défaut dans les compilations nocturnes de Firefox (en l'occurence, cela sera disponible pour Firefox 3.7, il est trop tard pour Firefox 3.6 qui sortira d'ici la fin de l'année). Il y a eu aussi des changements dans l'API du contexte 3D de l'élement <canvas>, afin de coller au plus près aux derniers brouillons de WebGL.

Nous voilà donc avec des nightlies de Firefox permettant de faire de la 3D. Le développeur de canvas 3D, Vlad Vukićević, vient de publier une démo, qui permet de visualiser une creature en 3D.

J'ai fait un screencast de la demo executée avec une nightly de Firefox (fichier Ogg/Theora, et désolé, pas d'utilisation de la balise video dans ce billet, impossible de l'utiliser avec dotclear ! grrrrrr)

Mise à jour : deux nouvelles démos ! À voir ici et .

mercredi, juin 17 2009

Des articles intéressants sur hacks.mozilla.org

Zut, j'ai oublié de vous signaler la publication de ma démo sur hacks.mozilla.org, que je vous avez promis. Je ne suis plus au point en matière de teasing, vous avez connu mieux sur ce blog, n'est-ce pas ? :-)

Donc voilà ma démo, à tester avec Firefox 3.5b99 au moins. Si des développeurs spécialisés sur Webkit (Riiiiik !), Opera ou Konqueror, pouvaient jeter un coup d'oeil voir si je peux améliorer ça pour leur navigateur préféré respectif... (Ouai, je m'y prend un peu tard, mais là, je n'ai plus la tête hors de l'eau, tellement ma todo list est lourde, et j'ai un tuba pour éviter de me noyer).

Bon sinon, sur hacks.mozilla.org, il y a des articles que j'ai vraiment aimé jusqu'ici, et finalement bien plus impressionnant que ma petite démo, et que je veux vous faire partager (pour ceux qui ne suivent pas hacks.m.o) :

Et puis il y a aussi ce débat (ici et ) sur la qualité de Theora par rapport à ce qu'on peut avoir dans YouTube par ex. Conclusion, Theora, c'est bon, mangez-en !

Et ce n'est pas fini, mon petit doigt me dit qu'il va y avoir encore de belle demo sur les nouvelles technologies web :-)

jeudi, mars 26 2009

Différences entre documents et API

Mozilla et Khronos annoncent la création d'un standard ouvert pour définir une API 3D en javascript, sur l'élément canvas en particulier. (voir le billet de Tristan pour plus d'info).

Comme à l'époque de l'apparition de canvas, resurgissent les questionnements sur l'utilité d'une API[1] face à des formats existants comme SVG pour la 2D, et X3D/WRML pour la 3D. Pour quoi faire une API alors que des formats existent ?

Réponse : parce que ce n'est pas du tout fait pour le même usage.

Un document (SVG,X3D ou autre), c'est statique. Je peux le trimballer où je veux. D'ailleurs, je n'ai pas à le "programmer". Je sors un outils comme Inkscape pour faire un joli dessin ou logo avec ma souris, je l'enregistre au format SVG, et je peux alors le lier dans une page web, l'utiliser comme îcone d'un programme (dans le bureau KDE par ex). Comme c'est du vectoriel, je peux l'afficher en gros, en petit. Je peux l'envoyer par mail, le compresser, le détruire. Bref. C'est un document comme n'importe quel document, et c'est utilisable en dehors du contexte web.

Canvas, c'est comme si vous aviez un tableau blanc dans votre page web. Et avec son API 2D et bientôt 3D, c'est comme si vous disposiez de crayons de couleurs et autres outils de dessin.

Ainsi, avec canvas et ses API, je ne peux pas faire la même chose qu'avec un document. Ce que je dessine avec mes crayons de programmeur, je ne peux pas le trimballer où je veux. Je ne peux pas en faire un document.

Par contre je peux faire d'autres choses que je ne peux faire avec un document. Je peux faire des animations, sans être limité à la structure d'un format d'un document. Je dessine ce que je veux, d'une manière simple, et surtout dynamiquement. C'est donc idéal par exemple pour représenter à l'écran des choses qui bougent tout le temps. Il est impossible par exemple d'utiliser un document SVG pour dessiner une scène 3D dans laquelle le point de vue change tous le temps (comme dans un jeu comme Quake). Ce serait en tout cas absolument inefficace. Essayez donc de réaliser la même chose que cette démo 3D, avec du SVG ou X3D. Bon courage ! D'ailleurs, la future API 3D va être utile pour ce genre d'application : les performances seront bien meilleures qu'avec l'api 2D actuelle de canvas, et la programmation sera simplifiée.

Il n'y a pas, bien sûr, que les jeux où canvas est utile. Représenter des graphes de statistiques dynamiquement, manipuler le rendu d'autres éléments HTML, comme dans une des démos de Paul, faire des éditeurs de dessins, ou l'utiliser comme surface de rendu d'un éditeur de texte et j'en passe et des meilleurs... L'utilisation de canvas va bien au délà de ce qu'on peut faire avec un document SVG/X3D.

À contrario, utiliser canvas pour afficher simplement un logo, aussi complexe qu'il serait, est assez ridicule, vu le nombre de lignes de code qu'il faudrait taper. Utiliser un document SVG est plus pertinent. Mieux que du PNG d'ailleurs, puisqu'on peut utiliser le même document pour afficher le logo en taille différente, ce qui permet de diminuer les temps de téléchargement (le SVG est placé dans le cache du navigateur). C'est d'ailleurs je pense l'une des raisons de l'implémentation de SVG dans les navigateurs modernes destinés aux mobiles et cie...

Bref, les usages de SVG/X3D et de canvas ne sont pas les mêmes, et n'ont d'ailleurs pas les mêmes résultats. C'est comme si on comparait un 4x4 et une voiture de sport. Ces deux types de véhicules permettent tout deux de se déplacer. Ils ont 4 roues, un volant, un moteur. Mais on ne les utilisent pas forcement pour les mêmes raisons et de la même façon. Si on veut faire une course sur circuit, on utilisera une voiture de sport. Mais si on veut rouler sur des chemins accidentés, on utilisera un 4x4.

Notes

[1] API= Application Programming Interface; C'est un ensemble de fonctions à utiliser dans un programme pour réaliser diverses tâches