News Xulfr

Demo sur les avancées technologiques de Firefox 3.6

mardi 2 février 2010 à 18:30

Firefox 3.6 est sorti en version finale il y a une dizaine de jour, ainsi que sa version mobile pour Maemo.

Le coeur de Firefox 3.6, gecko 1.9.2, apporte de nombreuses nouveautés au niveau des technologies web, et permettent, avec les autres avancées HTML5 présentes dans les versions précédentes de Firefox, de réaliser maintenant des applications web vraiment puissante.

Pour le montrer, Paul Rouget vient de sortir une nouvelle démo. 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 (si on met de coté les applet java ou flash, souvent lourdes et peu ergonomiques).

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 (à vérifir, si ça ne l'est pas encore, ça ne devrait pas tarder), offrent de bien belles perspectives en matières d'applications web puissantes et agréables à utiliser, que ce soit pour les CMS ou pour les sites e-commerce.

Bien sûr, tout ceci est aussi utilisable dans une extension, facilitant alors leur développement.

Pour en savoir plus sur les nouvelles possibilités de Firefox 3.6/Gecko 1.9.2, n'hésitez pas à consulter la page Firefox 3.6 for developers.

Trackbacks

Les trackbacks pour ce billet sont fermés.

Commentaires

1. jeudi 11 février 2010 à 09:23, par Gourmet

J'ai une p'tite question, les nouveautés CSS ont pour habitude d'apparaître sous une forme d'extension propriétaire -moz pour mozilla et de -webkit pour WebKit. Très bien.

Mais il se trouve que les nouveautés standardisées (au hasard les transformations et les transitions CSS3) apparaissent également comme cela. Ceci oblige donc les développeurs de feuilles de style à préciser et -moz-transform et -webkit-transform.

C'est nul étant donné que -transform est standardisé. Pourquoi donc les navigateurs ne considèrent donc pas d'emblée le vocabulaire légitime ?

db

2. jeudi 11 février 2010 à 11:10, par Laurentj

@gourmet : d'une part, les specifications sur les transformations et transitions sont encore à l'état de brouillons, donc ce ne sont pas encore des standards.

D'autre part, quand une propriété CSS est confirmée comme étant normalisée, les développeurs des navigateurs enlèvent la particule (-moz- ou -webkit-) et adapte l'implémentation pour qu'elle colle à la spécification (il peut en effet y avoir quelques différences, entre le moment où la propriété -moz-machin a été implémentée et le moment où la spéc a été finalisée). En générale, ils adaptent l'implémentation de -moz-machin au fur et à mesure des évolutions de la spécification. C'est le but justement de ces implémentations : permettre de valider la spécification.

Si, la différence est trop importante entre l'implémentation de -moz-machin et la version finale de la spécification de machin, et que -moz-machin est très utilisé, on peut imaginer la propriété -moz-machin soit gardée tel quelle et qu'ils implémentent machin fidèle à la spécification. Mais je ne sais pas si c'est en fait déjà arrivé. Chez Mozilla, à priori non.

3. jeudi 11 février 2010 à 16:47, par Désidérius

Pour les tests de HTML5 sur différents navigateurs, vous pouvez consulter ce site :

http://w3c.html5.free.fr/

Les commentaires pour ce billet sont fermés.


Copyright © 2003-2013 association xulfr, 2013-2016 Laurent Jouanneau - Informations légales.

Mozilla® est une marque déposée de la fondation Mozilla.
Mozilla.org™, Firefox™, Thunderbird™, Mozilla Suite™ et XUL™ sont des marques de la fondation Mozilla.