jy[B]log

Énorme ! Le coeur du code de l'extension qui apporte un contexte 3D dans la balise <canvas> vient d'être intégré dans le trunk de Mozilla. Dans une version future de Firefox, on pourra donc faire de l'affichage 3D via cette balise, avec semble-t-il une API proche d'openGL.

Voir la news sur xulfr.

À l'origine, dans le cadre de la balise video, il était prévu d'intégrer le support de DirectShow et de Quicktime dans Firefox, pour ses versions respectives sous windows et mac, en plus du support natif du format OGG/Theora. Finalement, cela ne se fera pas, comme l'explique Robert O'Callahan l'un des core-developer de Mozilla. Voici en gros les raisons :

• Mozilla veut se concentrer sur la promotion des formats ouverts comme OGG/Theora
• Apparemment, peu d'utilisateurs ont les codecs installés pour H264, par défaut, il n'y a que des codecs pour des "vieux" formats (sauf dans Windows 7 qui fournira un codec H264 en standard)
• DirectShow est sous-spécifié, contient des bugs, et les codecs disponibles pour DirectShow sont de qualités très inégales, et ne fournissent pas tous tout ce qu'il faut pour que l'API de la balise video fonctionne correctement. C'est à dire, qu'avec certains codec, des scripts dans les pages web ne pourraient pas fonctionner, et l'auteur de la page web ne pourrait rien y faire. Déjà que la compatibilité cross-browser est un cauchemar, alors si il faut aussi se préoccuper des problèmes cross-codec...
• Vu la qualité inégale des codecs, cela veut dire bugs potentiels, que les utilisateurs attribueraient à tord à Firefox. Les développeurs de Firefox ont assez de problèmes à régler comme ça
• Il y a des codecs "malware"
• Il y a des codecs avec des trous de sécurité, que Firefox ne pourrait pas "contrôler"
• Deux backends en plus, c'est du boulot en plus, de la maintenance en plus etc.
• Mozilla ne peut fournir des codecs par défauts avec le support Quicktime ou DirectShow (pour H264 notamment), à cause des royalties qu'il faudrait payer, et des problèmes de brevet.

Bref, dans Firefox, il n'y aura que le support natif de OGG/Theora (et OGG/Vorbis), ainsi que la backend GStreamer (au moins pour la version mobile, il n'est pas encore sûr qu'il le soit dans la version desktop).

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) :

• Etonnant : faire de la 3D isométrique avec les css transforms.
• Un bel audio player tout en HTML (vive la balise audio !)
• Redimensionnement d'une image sans déformation (yeaa canvas baby)
• De la géolocalisation avec open street map, par René Luc, un pote sur Xulfr.

Et puis il y a aussi ce débat (ici et là) 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 :-)

L'adoption du format Ogg Theora fait son chemin : DailyMotion viennent d'annoncer sur leur blog (et via un communiqué de presse) qu'ils vont prendre en charge la balise <video> de HTML5, en particulier avec Firefox 3.5 qui sortira dans quelques jours en RC.

Ils ont ouvert un site en test diffusant les vidéos au format Ogg Theora, openvideo.dailymotion.com à visiter avec Firefox 3.5. Ils ont également fait une page de démonstration montrant les possibilités de l'utilisation de la balise <video>, conjointement avec les autres technologies web comme javascript, css, svg etc...

Qu'un site majeur dans la diffusion de vidéos sur Internet utilise ces technologies, promet un bel avenir à Theora. Bien que les encodeurs actuels pour Theora soient de moins bonne qualité que pour le H264 par exemple, un travail est en cours (sponsorisé notamment par Mozilla), pour les améliorer, tant au niveau de la qualité de l'image, que la taille des fichiers. Voir par exemple une de ces améliorations faite au début du mois.

Pour rappel, Ogg Theora est un format libre et ouvert pour stocker de la vidéo. Pour en savoir plus sur la balise <video>, vous pouvez lire un de mes billets précédents sur le sujet.

Go Theora ! Go !

Depuis quelques heures, des améliorations sur l'interface utilisateur de la balise video ont été incluses dans le trunk et pour la prochaine beta de Firefox (cliquez sur l'image pour la voir en taille réèlle)

Les améliorations en questions :

• réglette pour choisir le volume sonore (tout à droite)
• affichage du temps total de la vidéo
• affichage du temps écoulé, dans la petite bulle au dessus de la barre de progression, petite bulle qui sert également à aller directement à l'endroit voulu dans le film en la déplaçant.
• affichage de la progression du téléchargement dans la barre de progression de lecture (je ne sais plus si ça n'y était pas déjà dans la beta précédente)

Bref, on commence à avoir une interface par défaut plutôt complète. Notez que cette interface n'apparaît que si la souris est au dessus de l'élément <video>, et seulement si l'attribut controls est présent.

Ce qui est interressant à savoir, c'est la façon dont cette barre de contrôle est implémentée dans Firefox. En fait, ce n'est pas le code de la balise vidéo qui effectue directement cet affichage, mais un simple composant XBL qui est attaché à cet élément.

Pour rappel, XBL est un langage XML (en cours de normalisation au W3C) qui permet de définir le contenu d'un élément en indiquant les éléments fils (anonymes) à ajouter, ainsi que son comportement, c'est à dire un ensemble de méthodes javascript pour son API, et également des fonctions appelées sur des événements DOM (sur le click etc). Dans un fichier XBL, on peut ainsi définir plusieurs éléments.

Comme on peut le voir dans ce fichier XBL de l'élément video, les contrôles sont en fait des éléments XUL. Et sur les click et autre de ces élements XUL, le code javascript appel l'API native de l'élément video.

Le design est déclaré via une feuille CSS. Dans la feuille de style dédiée, on peut voir que tout est quasiment fait en CSS, que ce soit les arrondis, les couleurs, les opacités etc. Les seules images utilisées concernent juste les symboles play/pause, le dessin du haut parleur, et la bulle du temps écoulé.

Bref, on utilise des technos du web pour implémenter en partie... des technos du web :-)

Mais ce n'est pas tout !

Cette interface par défaut ne vous plaît pas ? Faites une extension qui propose un nouveau XBL en remplacement de l'original ! Ou une autre feuille de style CSS ! Où les deux !

Aaah, c'est beau les technos Mozilla, n'est-ce pas ? :-)

Selon Net Application, en novembre Firefox a dépassé les 20% de part de marché au niveau mondial, et même les 50% dans au moins 3 pays : Indonésie, Macédoine et Solvenie. Le navigateur est aussi en passe de franchir cette barre de 50% dans d'autres pays : Pologne, Bosnie-Herzégovine, Slovaquie, Finlande et Philippines.

Voir les détails sur ce billet de Ken.

Ce week-end, l'implémentation des propriétés de transformations CSS ont été incluses dans la version de développement de Firefox 3.1 (proposé par David Hyatt dans webkit il y a un an, et en partie au CSS working group, il y a 10 ans).

La propriété transform permet d'appliquer des transformations sur un élément : rotation, décalage, zoom, déformation, perspective. Je me suis amusé donc à faire quelques essais.

Je veux placer ce titre verticalement à gauche de la page :

Voici alors les styles appliqués :

 position: absolute;    /* pour sortir l'élement du flux normal */
 top:0; left:0;   /* on le place tout en haut à gauche */

 /* on fait une rotation de -90 degré, suivi d'une translation vers la gauche de 10em 
   10em étant à peu prés la longueur du texte */
 -moz-transform: rotate(-90deg) translate(-10em,0);

/* le centre de rotation se situe en haut à droite de la boite h1 */
 -moz-transform-origin: top right;

Et le résultat :

Imaginons maintenant que je veuille mettre une belle icône "nouveau" sur un article, en travers du titre de cet article. Plutôt que de faire une image comme on doit le faire dans les navigateurs actuels, faisons tout ça en CSS/HTML. Le HTML est le suivant:

 <h2><span>Nouveau ! </span>Lecteur MP3 Syno XZ-789</h2>

Appliquons maintenant le style de transformation :

 -moz-transform: rotate(-20deg);
 -moz-transform-origin: center center;

On obtient ceci :

Habillons le maintenant en utilisant border-image et cette image

 border-width: 15;
 -moz-border-image: url(etoile.png) 15 15 15 15 round round;

Et voici notre super logo :

Vous remarquerez qu'il apparaît de fines lignes blanches en pointillé, je suppose que c'est un bug qui j'espère n'existera plus dans Firefox 3.1 :-)

J'ai essayé rapidement aussi d'avoir des en-tête de colonnes obliques dans un tableau :

Mais ça ne donne pas un résultat vraiment interressant. Déjà la taille des colonnes restent les mêmes, mais aussi les bordures entre cellules ne sont pas prisent en compte...Il faudrait que je triture un peu plus la feuille de style je pense...

• Annonce de l'implémentation sur Mozilla Web-tech
• Brouillon des spécifications par l'équipe de webkit
• CSS3 transform au W3C (pas encore de spécification à ce jour)

The Summit2008 was a great event for me. I was very enjoyed to meet many contributors. Behind a keyboard, it is not obvious to realize how the Mozilla project has become huge, how it has become very important for the web, and how the community is so big now. This is this kind of event which opens our eyes on the realities of the project.

Thank you Mozilla for this Summit! Thanks to Mitchell Baker to lead the project with so much contagious enthousiasm!

Special thanks too to Dan Portillo and his staff, for the organization of the summit. It was very well organized despite the landslide. All was great!

Coté fatigue et jet lag, ça va mieux. Coté sessions, toujours aussi intéressantes. Ce matin, il a été question du futur de Firefox 3.1, de Fennec^[1] et de Mozilla Labs. Pour Firefox 3.1, on a eu confirmation que certaines avancées dans Gecko seront bien incluses, dont le support natif de OGG/Vorbis et OGG/Theora pour la balise <video> (activé dans les nightlies build). FF 3.1, ça va dé-chi-rer ! On a pu voir aussi une demo de Fennec sur un Nokia N810, avec son interface totalement repensée : très sympathique.

Sinon, j'ai assisté à une session sur les probables avançées en matière d'interface utilisateur dans Thunderbird 3, et une autre sur les communautés en Europe. À ce propos, sachez que nous (Moz-Europe et Xulfr, accompagnés de quelques partenaires) vous préparons une XulParty like puissance 10, pour Septembre. Stay tune !

À part ça :

• le réseau wifi était difficilement joignable ce matin, c'était vraiment lourd
• Un pan de montagne s'est écroulé sur l'unique nationale qui relie Whistler à Vancouver, et ils vont apparemment mettre 5 jours pour tout déblayer. Ce qui veut dire que l'on va devoir faire un loooonnng détour pour avoir notre avion dimanche :-( (8h de bus au lieu de 3)