Chez Bodul

Comme annoncé hier, voici la quatrième édition du meetup HTML 5. On ne change pas une équipe qui gagne, avec John Karp et Sylvain Weber aux commandes. Nous étions encore plus de 100 personnes pour cette édition, et chose amusante, plus de la moitié de la salle venait pour la première fois ! Comme quoi la communauté HTML5 est active, et ça intéresse du monde (surtout quand on voit le programme de la semaine à Paris…).

Quoi de neuf sur la planète HTML5 ?

http://sylvainw.github.com/HTML5-Future/juin.html#/home
Par Sylvain Weber, CEO et co-fondateur de Kontest, ancien Googler.
Chaque mois, Sylvain explore le web et l’univers HTML5 à la recherche des dernières pépites et démos sorties récemment. Il vous partagera ses dernières découvertes.

Nous avons retrouvé avec plaisir Sylvain Weber, pour sa coutumière présentation des dernières nouveautés et sites cools sur lesquels il a pu tomber ces derniers temps. Sa présentation est toujours disponible sur Github, et comme toujours, il FAUT la parcourir et cliquer sur tous les liens ! Ce qu’il faut surtout retenir, c’est que plus on avance et plus la 3D prend une place importante dans le web design, que ça soit avec les effets CSS, ou le WebGL. On peut faire des effets vraiment chouettes, et exploitables (paperfold : https://developer.mozilla.org/en-US/demosdetail/paperfold-css/launch ou encore les effets de lumière : http://attasi.com/labs/ipad/ ).
Un niveau de 3D au dessus, on peut voir émerger ce qui est faisable en WebGL, avec de la motion capture.

Une fois n’est pas coutume, mon site bluffant de la semaine en WebGL, c’est la visite de Versailles… Chapeau à l’équipe qui l’a fait : http://www.chaostoperfection.com/

Les derniers jouets CSS3 et HTML5 au service d’un jeu basé sur Canvas

http://blogs.msdn.com/b/davrous/archive/2012/04/10/modernisez-vos-jeux-html5-canvas-partie-1-mise-224-l-233-chelle-mat-233-rielle-amp-css3.aspx
Par David Rousset, Windows 8 & HTML5 Developer Evangelist chez Microsoft France.
Nous verrons comment utiliser CSS3 Grid, transitions & 3DT ainsi que l’offline, le drag’n’drop et les Files APIs pour améliorer l’expérience d’un jeu basé sur la balise <canvas>.

David n’a pas été du tout vernis avec les dieux du code… Il s’est risqué à vouloir faire du live coding pour nous montrer comment il avait résolu ses différentes problématiques, et évidemment, rien n’a marché. Un bête problème de cache surement, mais il avait tout prévu, et avait sous la main une version terminée qu’il a pu nous montrer et nous expliquer ! Bref, malgré l’effet démo, on voit tout de suite qu’il y a du chouette travail derrière tout ça, avec de bons conseils pour l’interopérabilité entre les différents navigateurs. Je vous encourage donc vivement à aller lire son blog qui est aussi instructif que détaillé.
Pour l’anecdote, c’était rigolo de voir un speaker faire une présentation sous Windows, avec Visual Studio, en utilisant Internet Explorer… On a pu apprécier le sens de l’humour et l’autodérision du speaker, c’est plutôt agréable dans un monde où les gens sont assez bornés à un seul outil et une seule techno !

HTML5 et la Vidéo

http://pierreloicdoulcet.fr/video/#/
Par Pierre-Loic Doulcet, Responsable Pédagogique, Section Game Design & Programming à Isart Digital.
L’un des apports d’HTML5 qui a fait le plus parler de lui est le support de la vidéo. Qu’en est-il aujourd’hui et comment pouvons nous intégrer la vidéo de manière innovante dans les pages web ?Durant ce talk nous ferons un tour d’horizon des usages innovants de la vidéo en ligne et des librairies permettant ces innovations.

Pierre-Loic a commencé par nous faire un petit historique des technologies possibles pour intégrer de la vidéo dans une page Web. On retiendra surtout qu’avant l’arrivée de la balise Video d’HTML5 en 2008, Flash avait un quasi monopole depuis 1996. Depuis 2008, les principaux sites de vidéo en ligne migrent progressivement vers l’HTML5. Mais quid de l’innovation ? Pour Pierre-Loic, on est en train de perdre du temps. La migration, poussée par le refus d’Apple d’embarquer Flash, aurait du être l’occasion d’innover en utilisant toute la richesse qu’offre la balise Video. En effet, il est maintenant possible de manipuler la vidéo, d’intéragir avec elle, comme élément natif du DOM. Alors Youtube en profite juste pour superposer de la pub, mais on peut aller beaucoup plus loin. Quelques liens : http://pierreloicdoulcet.fr/video/#/5/4
La suite de la présentation est l’occasion de parler de Popcorn.js qui doit rendre les vidéos « programmable, interactive, immersive et pilotable par des évènements ». Quelques liens encore : http://pierreloicdoulcet.fr/video/#/9
L’objectif de sa présentation était vraiment de nous montrer qu’en quelques lignes on peut faire des choses assez spectaculaires, et qu’il est temps de se lancer… Encore faut-il avoir un cas concret d’intégration ! Mais l’intéraction avec le contour de la vidéo, le texte, des ressources qui viennent enrichir une vidéo à des moments clés, ce sont des choses que l’on devrait retrouver de plus en plus.

Bref, des idées plein la tête, pour une session encore bien sympathique. Ils ne savaient pas encore si on referait une session cet été, mais au pire des cas, j’y retournerai avec plaisir à la rentrée, avec pourquoi pas, des choses à présenter !

LB.