Mot-clé - svg

Fil des billets

mercredi 28 juillet 2010

The Web has never been as exciting!

Par Tristan, mercredi 28 juillet 2010. en

(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!

2 commentaires

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

Par Tristan, mercredi 28 juillet 2010. Standards

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 ! ;-)

18 commentaires

mercredi 24 mars 2010

En vrac

Par Tristan, mercredi 24 mars 2010.

Je réalise que j'ai plein de lien en vrac qui attendent d'être publiés depuis bien longtemps. Les voici, par ordre d'ancienneté (les plus récents sont en bas).

Notes

[1] L'avantage d'un canard mort sur un Silverlight mort, c'est qu'on peut en faire des magrets à la poêle ou du confit et bien d'autres choses...

[2] Enfin, c'était vrai seulement si on choisissait certains tests pour en oublier la plupart. Il faut bien comprendre que Microsoft n'exécutait que les tests qu'ils avaient eux-même écris pour les donner au W3C…

- page 1 de 2