Mot-clé - html5

Fil des billets

jeudi 14 mars 2013

En vrac du jeudi


[1] A l'instant où j'écris ceci, elle a 706 vues et 2365 "J'aime". Hein ??? Mais qu'on se rassure, il y a une raison.

mercredi 28 septembre 2011

En vrac

vendredi 20 août 2010


You may have seen that Brett Gaylor is joining Mozilla (see also Mark Surman's post). For those who don't know Brett, he's particularly famous for his "Open Source documentary" Rip! A remix Manifesto[1].

One may ask why Mozilla has hired a film director[2], but it actually makes a lot of sense thanks to Mozilla Drumbeat, as Brett is working on a Drumbeat project called Web made movies.

Now Brett has been a Mozilla community member for quite some time, contributing with the good folks at CDOT / Seneca College to create popcorn.js, "a JavaScript library for merging video with semantic data". I understand that this is a bit of a mouthful, but don't close your browser window just yet! Popcorn.js is what I would describe as "hyper-video" ("hyper" as in "hypertext"): the ability to leverage data from the video and link to it, Web style. Such data include:

  • location. Where on earth was this video sequence made? Then display it on an interactive map
  • subtitles. What is being said on the soundtrack. Display it as text, and offer to translate it into the foreign language of your choice using an online translation service
  • license. Under which license is this video sequence made available? (Copyright, Creative Commons, etc.)
  • person. Who's on the screen? If we know, then link to his/her Twitter and Flickr streams in real time
  • topic. What is being discussed? Then link to the corresponding article in Wikipedia and in the news.

Screenshot of the demo

Go and see for yourself the PopCorn.js demo (in case you're stuck with an older browser that is not capable of running the demo, here is a video of the demo).

I think this is a very significant step further for video on the Web, which was until now a very TV-like, passive and linear approach, now merged with the hypertext nature of the Web (its ability to link to things in other places), so that users can click on links in order to learn more. Of course, this is just a demo. Tons of things need to be done, but I see this as a very cool way to show what HTML5 and its video element, combined with the power of JavaScript and mash-ups.


[1] I can't say how strongly I recommend watching this movie, starting with its trailer.

[2] It's actually the second one, as Henrik Moltke, co-author of Good copy, bad copy, is already working at Mozilla... on Drumbeat!

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

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


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

- page 1 de 3