Mot-clé - css3

Fil des billets

mercredi 28 juillet 2010

The Web has never been as exciting!

(This is a quick translation of a post I wrote in French earlier today)

Firefox 4 Beta has just been released. It brings seed, a better UI tons on new things for extension developers (hmm, JetPack!) and Web developers.

In this post, I'll focus on the Web development part.

In my opinion, combining CSS3, new APIs (including WebGL) and HTML5 is enabling the Web as a development platform to make a huge leap forward. I have worked with the amazing Paul Rouget in order to have a video of his demos in order to share my excitement.

For those who have installed Firefox 4 Beta 2, a good PC with a decent discrete graphic card and have enabled Direct2D hardware acceleration, here are 3 spectacular demos:

  1. Video, CSS Transitions, @font-face and SVG filters
  2. Video, SVG Clip-path and CSS Transitions
  3. WebGL, video and Transforms

Paul Rouget during the demo movie

For those who are more in a hurry or want more details, please check the video and the article on Hacks.mozilla.org.

What you see on the screen is just a Web page, using standards that are being specified and implemented (HTML5, CSS3, SVG, WebGL, new APIs…). What I find fascinating is that by combining these technologies, one can do things that were deemed impossible even recently:

  • Native video with an Open and unencumbered coded (WebM)
  • Good fonts ( @font-face, WOFF)
  • Declarative Animations (using CSS3, and soon SVG/SMIL)
  • SVG Filters and Masks applied to HTML elements (Gaussian blur effect, a B&W filter on videos, a round-shaped video
  • 3D (the WebM video used at the end as a texture to a 3D rotating cube just floored me)
  • WebSockets, for a persistent bi-di communication between the server and the browser, used in this case to control remotely the presentation from an Android phone running a pre-Alpha version of Firefox for Android.
  • Drag & Drop, Indexed DB and local storage, the File API, Geolocation and device orientation and all the tech features I won't mention.

Of course, the Open Web still has to compete with proprietary approaches such as monopolistic AppStores or proprietary plug-ins. But it never has been has powerful and innovative as it is now, and that's what is making me excited!

Le Web n'a jamais été aussi excitant !

Je viens de bloguer sur la sortie de Firefox 4 Bêta 2. Plus de rapidité, une meilleure interface, et plein de nouveautés pour les développeurs d'extensions (JetPack) et les développeurs Web.

C'est sur le développement Web que je veux m'attarder dans ce billet.

A mon sens, la combinaison CSS 3, nouvelles APIs (dont WebGL) et HTML 5 est un bond immense en avant pour le Web en tant que plate-forme de développement. J'ai travaillé avec l'excellent Paul Rouget pour faire une vidéo de ses démos qui mettent cela en évidence.

Pour ceux qui ont Firefox 4 Beta 2, une machine avec une bonne carte graphique et les drivers "qui vont bien" et ont paramétré leur navigateur pour l'accélération matérielle Direct2D, voici 3 démos :

  1. Vidéo, CSS Transitions, @font-face, et filtres SVG
  2. Vidéo, SVG Clip-Path et CSS Transitions
  3. WebGL, vidéo, Transforms

Tournage de la vidéo avec Paul Rouget

Pour les autres et ceux qui veulent plus de détails techniques, notre vidéo est sur Hacks.mozilla.org.[1]

Regardez bien à l'écran : ce que vous voyez est une page Web, développée avec les standards en cours d'élaboration (HTML5, CSS3, SVG, WebGL, nouvelles APIs...). Ce que je trouve fascinant, c'est qu'en combinant ces technologies, on peut faire des choses qu'on croyait encore impossibles il y a peu :

  • vidéo native avec un codec libre et ouvert (WebM)
  • fontes de haute qualité variées ( @font-face, WOFF)
  • animations déclaratives (en CSS3)
  • filtres et masques SVG, pour modifier des éléments HTML (ici une vidéo floutée, ou en noir et blanc ou en forme de cercle)
  • 3D (le coup de la vidéo WebM utilisée comme texture d'un cube en 3D qui tourne dans une page Web, c'est quand même incroyable !).
  • WebSockets, pour une communication b-directionnelle persistante entre serveur et navigateur, ici utilisé pour télécommander le changement de page depuis un téléphone Android faisant tourner une pré-Alpha de Firefox mobile.
  • Drag & drop, Indexed DB et Local storage, File API, Geolocation, Device Orientation, et toutes les possibilités techniques que j'oublie de lister

Bien sûr, le Web ouvert doit toujours faire face à des approches propriétaires comme celle des AppStores monopolistiques ou encore les plug-ins propriétaires. Il doit donc être compétitif. Mais pour cela, il n'a jamais été aussi fort, et c'est ça qui est réjouissant !

Notes

[1] Et pour ceux qui ont un sens de l'humour en béton armé et qui préfèrent le français à l'anglais, une version déjantée, ratée, et non-officielle est disponible. Ca n'est pas un hasard si on la appelée "la version à laquelle vous avez échappé"... A vos risques et périls ! ;-)

Sortie de Firefox 4 Beta 2

Hier soir, Mozilla a publié Firefox 4 Beta 2, que vous pouvez dès maintenant télécharger. Faisons rapidement le tour du propriétaire...

Pour l'utilisateur

  • Les onglets au dessus de la barre d'adresse (pour Windows et Mac, c'est en cours pour Linux) ;
  • "Switch to Tab", c'est à dire que quand on commence à saisir l'URL d'une page déjà ouverte, la barre d'adresse propose de passer à la page ouverte plutôt que d'en ouvrir une nouvelle copie ;
  • Onglets applicatifs ("App Tabs"). D'un clic-droit sur un onglet, on peut indiquer qu'on veut l'avoir à portée de main à chaque instant dans cette fenêtre. L'onglet devient plus petit (de la taille de son icône) et vient se caler à gauche dans la barre d'onglets. Très pratique pour un Webmail ou une application comme RememberTheMilk !
  • Nouveau gestionnaire d'extensions.
  • Rapidité améliorée :
    • Au démarrage, via une amélioration de XPCOM
    • pour le défilement des pages complexes via Retained Layers, qui annonce une utilisation future du GPU pour ce genre de tâches.
    • à l'affichage des pages et pour l'exécution du JavaScript (optimisations du code à plusieurs niveaux)
  • Plus grande stabilité, avec la "Crash Protection", qui est arrivée avec Firefox 3.6.4, qui fait qu'en cas de crash d'un plug-in comme Silverlight, Flash ou QuickTime, Firefox reste stable.

Pour le développeur Web

  • Firefox est le premier navigateur à intégrer un Parser HTML 5. Ca permet de mélanger HTML 5 et SVG (Inline SVG), par exemple, avec un minimum de code, en plus des éléments canvas, video (avec le codec libre et ouvert WebM, bien sûr) ;
  • WebSockets, qui permet une connexion permanente entre serveur et navigateur et donc une communication dans les deux sens
  • Implémentation des Transitions sur les Transformations CSS 3.
  • Les extensions de type JetPack ne nécessitent pas le redémarrage de Firefox après qu'on les ait installées, ce qui devrait améliorer leur adoption. Par ailleurs, les extensions JetPack sont plus faciles à développer, comparées aux extensions en XUL ;
  • Indexed DB : une base de données locale pour les applications Web, pour soit les accélerer, soit leur permettre de fonctionner hors-ligne.
  • Web Console, un outil de deboguage de sites.

Des démos sont disponibles sur Hacks.mozilla.org.

Pour le futur

  • Synchronisation de plusieurs profils Firefox avec Firefox Sync, en toute confidentialité (chiffrement coté client, possibilité d'utiliser sa propre instance de serveur) ;
  • Un nouveau thème pour Linux
  • Plus de rapidité !
    • Lazy Frame Construction
    • Utilisation du processeur graphique
    • Plus d'entrées/sorties asynchrones
    • Améliorations du moteur JavaScript
  • Nouveau système de gestion de la vie privée

Et maintenant ?

Quelques articles

- page 1 de 2