MarcArea Weblog

L'acualité du web est bouillante en ce moment, et ça fait plaisir. Les discussions continuent autour de la balise <video> et je vous propose un petit tour de ce qui se passe en ce moment.

Codecs for <audio> and <video> est un lien intéressant déniché sur le Standblog entre 2 pubs pour Firefox. C'est un message de Ian Hickson dans le cadre de sa difficile entreprise d'écriture des specs d'HTML 5. Message dans lequel il fait le point sur l'implémentation des codecs video dans les différents navigateurs. Sa conclusion est la suivante : chacun fait sa sauce donc pas de codec obligatoire (!) dans la spec :

• Apple, pour des raisons fumeuses, refuse d'implémenter Theora par défaut dans QuickTime, vous aurez besoin d'un décodeur externe, au hasard celui de Xiph.
• Mozilla ne veut pas de support DirectShow ou Quicktime.
• Google supporte à la fois H.264 et Theora dans Chrome et lâche une petite perle au passage que personne n'a relevé mais je me garderai bien d'extrapoler : Google [...] have indicated a belief that Ogg Theora's quality-per-bit is not yet suitable for the volume handled by YouTube, ce qui me conforte dans ma position.
• Opera refuse d'implémenter H.264 pour des raisons financières.
• Microsoft est à la ramasse et n'a pas communiqué sur la balise <video> mais avec encore plus de 65% du marché, c'est toujours eux les patrons. Pour combien de temps ? Telle est la question car leur part de marché est en érosion constante.

De toute façon et comme le souligne Rui Carmo, vouloir imposer un codec dans la spec c'est un peu comme imposer un format de compression pour les images. Ca n'est pas le rôle du W3C d'écrire ça dans les specs et ils feraient mieux de fixer et d'améliorer des choses dont on a réellement besoin (et il n'y en a pas que 5).

Le problème avec les codecs video est le suivant : on est pas face à une industrie habituée aux formats libres et/ou ouverts. Rappelez-vous de l'intervention de Nokia fin 2007 : This industry is used to making money, and it doesn't care about keeping things free (c'est pas dit comme ça mais c'est ce que ça veut dire).

Mozilla fait le pari audacieux de Theora et de changer la donne de cette industrie, ce qui au final est très cohérent avec leur philosophie. Le succès va dépendre de l'adoption de ce format par des poids lourds de l'internet. Si Wikipedia rejoint DailyMotion et The Video Bay dans cette voie, ça risque de créer une dynamique et de forcer Apple et Microsoft à prendre en compte Theora. Si on en croit les déclarations de Google, l'adoption de Theora par YouTube semble pour le moins compromise, rapport à la qualité du codec. C'est loin d'être gagné pour Theora mais je n'ai pas de boule de cristal. A choisir entre une qualité moindre mais pas horrible et verser une tonne de royalties pour utiliser un codec, il me semble que le choix est vite fait.

Bref, pour le moment cette incohérence d'implémentation des codecs est un beau gâchis, laissant les projecteurs sur Flash, premier a avoir apporté une solution cross-browser de diffusion video sur le web et supportant le H.264. Pas étonnant d'entendre le CEO d'Adobe si serein à propos d'HTML 5. Résultat : une balise video pas loin d'être inutile. Interopérabilité FAIL. C'est la même chose pour IE et EOT alors qu'on peut faire des trucs mega choupi avec @font-face.

La video for Everybody!, ahahah laisse moi rire avec ton code. Lol of the day. Pour moi ça sera du H.264 via une balise <a> et du javascript pour intégrer un player video Flash cross-browser jusqu'à ce que l'industrie trouve un terrain d'entente, et tant pis pour les memory leaks. Il y a aussi la possibilité de spécifier plusieurs sources dans la balise <video> mais ça veut dire pas de compatibilité IE.

En attendant des jours meilleurs pour la video en ligne, le web restera the most hostile software engineering environment imaginable (citation de Douglas Crockford et de tous les travailleurs du web que j'ai rencontré).

Abordons, si vous le voulez bien, les choses qui ont retenues mon attention ces derniers jours. Tant qu'on y est, poursuivons sur un ton insolent et irrévérencieux comme dans ze bouffi show, sacré laurent, quel culot, ça c'est de la télé.

Internet Explorer, my love :

• Une petite image choupi pour commencer, c'est celle qu'affiche le site momentile.com pour bloquer complètement son accès aux utilisateurs d'IE6. Oui, c'est violent comme approche, mais IE6 est le plus gros problème du dev web, celui qui teste vos nerfs et coûte cher en debug, donc en temps, donc en argent.
• Toujours à propos d'IE State of the Browsers — IE edition est un post intéressant mais pas très optimiste au sujet des parts de marché des différentes versions d'IE. On note qu'IE8 gagne des parts mais au détriment d'IE7 et malheureusement pas d'IE6. La raison principale : les intranets. L'auteur table sur une part de marché aux alentours de 20% pour IE6 jusqu'à fin 2010. Conséqeunce immédiate : les développeurs web commencent à facturer davantage pour une compatibilité IE6 ce qui est somme toute logique vu la quantité de travail laborieux supplémentaire requise. La seule chose que je n'ai pas trouvé dans cet article est la source des statistiques.
• Microsoft IE8 Contest insults other browsers. Maman, il m'a insulté. Arrêtez de chialer les mecs, c'est pas grave ça. Combien de monde crache sur IE tous les jours ? Non ce qui est grave c'est que le marketing Microsoft Australie oblige les gens à utiliser IE8 pour participer à leur concours. Interopérabilité FAIL. Bullshit.

Les performances, c'est important :

• Optimiser les images est une vraie science. C'est une composante des performances côté front que tout bon dev web se doit de maîtriser. Une très bonne astuce est disponible pour la compression par zones des JPEG sous Photoshop. Effectivement très utile pour optimiser les larges backgrounds qui sont trendy en ce moment côté webdesign.
• Les performances ça se joue aussi et beaucoup côté back. Vous avez beau vous toucher la nouille en gagnant 2k sur un png, si votre requête s'exécute en 10 secondes ça servira pas à grand chose. Indexing the Web—It’s Not Just Google’s Business est une bonne intro à l'optmisation de votre base avec un accent sur les index, des jointures correctes et des select pas trop gourmands (certains ORM ne se comportent pas de façon optimale sur ce point). Et non, mettre du memcached systématique au dessus du bousin quand c'est trop lent n'est pas la première solution à envisager.
• DNS Prefetch. Alors là je suis assez mitigé. Le seul préchargement qui me semble pertinent est celui de type déclaratif, celui que vous, l'auteur de la page web, déclarez de façon explicite. Le reste est à mon sens un réel gâchis d'énergie, de bande passante, de ressource machine et pose un problème en termes de sécurité vie privée. Le tout pour pre-fetcher des ressources dont on est même pas certain qu'elles seront consultées et donc gagner quelques ms sur des probabilités. Bullshit.

Où l'on reparle de video :

• Le buzz sur Theora vous laisse pantois ? Vous avez trouvé le style de mon billet précédent détestable ? Quand on vous dit que la qualité obtenue via Theora est très loin de celle obtenue via H.264 on ne vous ment pas : Chrome and Theora/H.264. A votre avis pourquoi Chrome va intégrer un décodeur H.264 ? Réponse : parce que Theora c'est trop cheum, comme ta mère. Le seul avantage de Theora est son côté complètement open-source.
• En conséquence, tempérez les comparatifs élogieux en fonction de leurs provenances et de leurs auteurs (via Open Codecs, Open Video).

(X)HTML & JavaScript tips

• Sample XHTML 1.0 document, ou le modèle de base parfait pour créer vos CSS, toutes les balises sont utilisées.
• Tabindex, focus et accessibilité, un article utile et bien écrit qui m'a aidé lors d'une session mixant javascript et tabindex. On y apprend qu'une valeur à 0 pour l'attribut tabindex n'est pas illégale. N'oubliez pas de set les attributs tabindex sur les liens dans vos modules qui apparaissent et disparaissent pour garder une couche d'accessibilité.
• jQuery Tools, c'est joli, c'est sympa, c'est léger. Il y a des modules pour toutes les fonctionnalités bling-bling du web 2.0 qui plaisent à vos clients. Le code à l'air léger et facilement lisible aka bien codé. Toujours utile pour s'en inspirer dans votre propre code.
• SWFUpload jQuery Plugin est un plugin jQuery qui permet de gérer les uploads multiples via Flash. Le prix à payer : passer par du swf et des centaines de lignes de js.
• jQuery Highlight Plugin, je l'ai sélectionné car le code à l'air cool, faut que je teste.

Et parce que c'est toujours utile, un petit mémo pour activer la navigation au clavier dans vos navigateurs sous Mac : Enabling keyboard navigation in Mac OS X Web browsers. C'est toujours utile et ça fait apprendre des choses de tester la navigation de vos sites au clavier.

Voilà, c'est tout. Cassez vous maintenant. Ah oui et la dernière fois j'ai linké méchamment Framablog mais j'aime bien ce qu'ils font en fait. Peut-être que je devrais aller voir un psy comme dans les Sopranos ? Nannnnnnnnnn Bullshit.

Vous n'avez pas pu passer à côté. Oh non, vous n'avez pas pu. Le monde sait maintenant que la balise <video> a été découverte pas les équipes R&D de Dailymotion et même par celles de YouTube (visible via une démo). *Clap clap*. Putain, des mois de travail sans aucun doute.

Côté Dailymotion il vous faudra (au jour d'aujourd'hui) être équipé d'une version beta du prochain Firefox (3.5) ou du prochain Safari (4) pour aller profiter de la pre-beta d'openvideo.dailymotion.com. Ca fait beaucoup de beta tout ça... Chez eux vous pourrez visionner de la video encodée en Theora avec du son en Vorbis, le tout dans un conteneur OGG.

Je ne sais pas avec quoi ils encodent mais ça doit être ffmpeg2theora ou VLC, ou un autre logiciel intégrant la libtheora.

"Tant pis si c'est moche tant que c'est libre" disait ma boulangère, elle savait se contenter. Oui c'est pas terrible terrible, disons qu'on est loin de la qualité d'une video en H.264. Je pense que c'est également du au compromis quantité/qualité/poids/vitesse d'encodage. Encoder 300.000 vidéos dans cette qualité moyenne, ça me parait une décision un peu rapide. Tu bluffes Martoni.

Côté YouTube on nous propose une démo visible avec le dernier Safari et de la video en H.264 et du son en AAC. C'est beau mais si vous pensez que votre CPU va moins fumer que lorsque vous visionnez une video via le plug-in Flash, c'est râté. Remarquez côté Flash, Adobe et NVIDIA ont trouvé la parade pour utiliser moins de ressource processeur.

Alors ou en est-on ?

C'est prometteur, mais pas cross-browser. C'est fun, mais encore très jeune.

D'un point de vue technologique on sent bien que l'avenir de la video va se jouer directement dans le browser sans plug-in, avec une bonne API JavaScript. Le codec Theora n'atteint pas encore le niveau de qualité de ses concurrents propriétaires mais gageons que son format ouvert et les gens qui mettent de la thune dedans vont faire en sorte que ça change rapidement. En attendant Flash a encore une carte à jouer et sinon on balancera du H.264 via la balise <video> :p

Financièrement et d'un point de vue stratégique, c'est très intéressant. On est plus verrouillé par la technologie d'un plug-in tiers propriétaire (Adobe Flash) ou par un codec payant (on2vp6). Est-ce que tu les vois ces putains d'économies René ?

Et en plus ça fait bander les geeks libristes qui savent toujours des trucs que vous ne savez pas, et qui savent même ce qu'ils ne savent pas ! Oui, c'est de la méchanceté gratuite :p

Et pendant ce temps là à Guadalajara (Mexique), ça commit et ça change le modèle. Ah bravo !

Quoi de neuf ces temps-ci les petits loups ? Voici une petite sélection de ce qui a retenu mon attention ces derniers temps.

On commence avec une feuille de style universelle pour IE6. L'idée est de trouver une solution élégante pour dealer avec IE6 (casse toi tu pues et marche à l'ombre). Ici l'auteur a décidé d'écrire une CSS unique et spécifique à destination d'IE6, servie via des commentaires conditionnels. Il l'applique sur tous ses sites. En conséquence, tous ses sites auront la même apparence sous ce navigateur. Le rendu est franchement clean. Maintenant ça ne vas pas améliorer l'affichage des PNG avec transparence alpha etc. Ca a le mérite de faire gagner un maximum de temps de développement si toutefois vous parvenez à faire accepter et comprendre ce concept à votre client car malheureusement le taux d'utilisation d'IE6 n'est pas encore négligeable.

On poursuit avec une interview de Ian Hickson, un des éditeurs de la spec HTML 5. Il y en a une plus ancienne ici, je crois qu'il kiffe donner des interviews. En tous cas il y a toujours des petits passages très intéressants. Tiens, par exemple, un petit morceau choisi à propos de RDFa :

We considered RDFa long and hard (in fact this is an issue that’s a hot topic right now), but at the end of the day, while some people really like it, I don't think it strikes the right balance between power and ease of authoring

J'ai évidemment choisi ce passage sur RDFa à cause d'une des actualités de Google (ceux qui veulent creuser trouveront des pistes dans ce billet chez Biologeek). En ce qui me concerne j'ai toujours un mal fou avec le web sémantique qui reste toujours (à mon sens) une belle abstraction. Je crois qu'à l'instant T je m'en bat les couilles en fait, ça changera peut-être à T+n quand j'aurai vu quelque chose de concret qui tient la route.

On continue avec IE8 maintenant distribué via Windows Update. Avec cette sortie il est temps de faire le point sur le mécanisme X-UA-Compatible et sur ce qu'il est nécessaire de savoir. Je vous rappelle que ce sujet a fait couler beaucoup d'encre et notamment ici même. Mais quel bordel !

And... Fuck the foundries. Hell yeah, fuck'em all ! We Can't Fucking Use Them. Y a pas à dire j'aime son style :) Le sujet des web fonts reste d'actualité avec pas mal d'articles mais à priori rien qui changera la donne : Web Fonts, Web fonts now (how we're doing with that)... Mais papa Kemar a déjà écrit tout ça en çais-fran sur ce gue-blo.

Un petit mot au sujet de la gouvernance d'Internet. Le 30 septembre de cette année verra arriver la date de fin du contrat entre l'ICANN et le gouvernement américain. Comme souvent, des voix s'élèvent en Europe et en Chine pour changer la donne. Maintenant que les États-Unis sont en position de faiblesse il y a peut-être une chance pour que ça change.

Et en France Hadopi votée (président de la CNIL compris), bientôt Loppsi... Pendant ce temps là on passe des parachutes dorés aux golden hello, les scandales dans les banques continuent, l'Etat réfléchit à garantir les actifs de Natixis, les exilés fiscaux se font désirer pendant que tu craches tes impôts... Si j'ai confiance dans ma banque ? De moins en moins chaque jour. Si j'ai confiance dans mon gouvernement ? No comment. Si je vais aller voter aux prochaines élections ? Pas certain. Heureusement qu'avec Obama il y a de l'espoir.

Je sais pas vraiment comment traduire ça en Français : ingénierie web frontale professionnelle ? Avouez que ça sonne pas terrible... Je préfère le franglais, professional front-end engineering. Ca c'est trendy à souhait et ça impressionne les meufs ;)

De toute façon les gens en dehors du milieu de l'informatique n'ont jamais très bien compris mon métier. Souvent, même les insiders ou les collègues ne savent pas en quoi consiste ce job. Quand ils commencent à comprendre, c'est qu'ils essayent de monter un site et finissent par pleurer en criant que les tables pour la mise en page c'est cool.

Et oui, c'est dur d'expliquer le métier de développeur front-end, ou de développeur d'interface ou d'intégrateur (mais je trouve ce terme un peu désuet vu l'évolution du métier), bref le métier d'écrire le code qui sera lu par les navigateurs web.

Mais si vous voulez savoir ce que c'est exactement, j'ai découvert via 456bereastreet.com une vidéo d'un employé de Yahoo! qui explique ça en long en large et en travers. Le script est même disponible.

C'est en anglais mais ça explique bien la complexité de ce métier. Bon, le seul défaut de cette vidéo c'est que ça dure une plombe mais, hey, je viens de vous dire que ce job était putain de complexe :D

Nous on sait déjà depuis des années que le temps est maintenant aux architectes front-end. Une entreprise du web qui en 2009 néglige la qualité de son front-end se tire une balle dans le pied.

Bonus tip : voilà un excellent thème de conférence pour les guignols de Paris Web ;)