[Meetup] HTML5, CSS3 et Pizzas : Seconde édition

Seconde édition pour le meetup HTML 5 ! Pour rappel, la première édition, il s’est passé ça : CLIC La première édition étant rigolote et intéressante, et tout le monde étant du même avis, l’organisateur John Karp a décidé de repartir pour une nouvelle aventure avec au programme :

QUOI DE NEUF SUR LA PLANETE HTML5 ? (10 min)
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 (voir sa présentation précédente).

FOCUS CHROME DEVELOPER TOOLS (15 min)
Par Thomas Bassetto, développeur chez Joshfire.
Durant ces 15 minutes nous ferons le tour du minimum à savoir sur les Chrome Developer Tools (aussi WebKit Inspector). Nous verrons aussi une poignée de fonctionnalités très pratiques mais souvent méconnues.

DEVELOPPEMENT D’UN JEU WEBGL EN 48H (15 min)
Par Cedric Pinson, développeur 3D/WebGL indépendant.
Présentation « heure par heure » des étapes de la création du jeu MIOP développé lors de la dernière Global Game Jam.

ADOBE ET W3C (15 min)
Par David Deraedt, Web Consultant chez Adobe
Tour d’horizon des dernières spécifications HTML5 proposées par Adobe au W3C (css regions, css shaders, image progess events…).

Introduction

Bon alors premier point : la conf’ a été live-tweeté, et c’était plutôt cool à suivre. Mais entrons dans le vif du sujet.

Intel, sponsor de l’évènement, a commencé par nous expliquer qu’Intel s’investit dans le software : ils essayent d’attirer le développeur Web 2.0 en lui offrant une plateforme qui lui offrira une visibilité, et un déploiement facilité, bref, un market. Ainsi l’objectif d’Intel est d’avoir avec le temps une boutique d’application nommé Intel AppUp, pour être à long terme présent à la fois sur le hardware et le software pour les ultrabooks, dont la vente est prévue à forte croissance. Ces ultrabooks auront donc le market Intel de pré-installé dans le cadre d’un fort partenariat de revendeurs internationaux (surtout Surcouf en France… La boite qui vient de passer en redressement judiciaire, oui oui…) Sans être mauvaise langue, c’est bien le genre d’application pré-installée que l’on s’empresse d’enlever… Mais bon, quand même, gros plus de leur store, on peut essayer toutes les applis 24h gratuitement ! D’un point de vue technique, j’ai cru comprendre que ce market fournirait un outil d’encapsulation d’HTML5 basé sur le moteur Webkit, puis permettrait de générer (surtout) des .msi automatiquement. Je suis plutôt sceptique sur le business, et j’imagine que ça sera une niche financière, mais bon, j’imagine que quelques produits perceront quand même. S’agit d’être un de ceux là…

Pour plus d’informations :
http://appdeveloper.intel.fr

QUOI DE NEUF SUR LA PLANETE HTML5 ?

On retrouve maintenant Sylvain Weber, qui nous avait fait une chouette démo la dernière fois !

Et qui a récidivé… Ses trouvailes sont disponibles ici…

En quelques mots :

• Rappel sur les outils : Pour tester les dernières fonctionnalités HTML5, il faut installer Chrome Canary, ou Firefox Nightly Build
• Web RTC
• Principe : pouvoir permettre de livestreamer du son / vidéo directement dans le navigateur.
• Démo de la balise vidéo, c’est juste magique !
• Modeleur 3D, avec deux liens top, dont l’innovation business http://n-e-r-v-o-u-s.com/cellCycle
• VJing avec un lien : http://recmadrid.com/2012/vjplayer . Compositions / mix de différentes vidéos en temps réel, vraiment impressionnant et chouettes
• « Mobile » API
• Une battery API
• Vibration API
• Live Coding, sujet qui a l’air de plaire beaucoup à Sylvain… Le fait de se servir de son navigateur comme plateforme de développement pour ajouter en interactivité. Moué moué moué, je ne suis pas très emballé pour ma part.
• Mais une vidéo de Bret Victor à voir, quand même bien chouette dans ce cas d’utilisation (Version longue disponible ici : https://vimeo.com/36579366)
• Un site avec plein d’innovations du même genre : mrdoob.com/139/GLSL_Sandbox

Et quelques liens :

http://platform.html5.com
www.w3.org/wiki/HTML/next

 

FOCUS CHROME DEVELOPER TOOLS

L’objectif de Thomas Bassetto est de nous donner quelques astuces pour le Web Toolkit Inspector, et il le fait bien ! Difficile de blogger ça, ce sont des dizaines d’astuces qu’il nous montre en direct live (manipulation du DOM, utilisation de la console…). Le mieux reste encore de vous laisser avec ses slides qui donnent une liste plus ou moins exhaustive des bonnes pratiques présentées, et quelques liens bien pratiques.
C’est aussi à consulter sur Github !

 

DEVELOPPEMENT D’UN JEU WEBGL EN 48H

Cette présentation, effectuée par Cédric Pinson, est un retour d’expérience sur lecoding d’un jeu en 48h. Un thème (« Snake »), une équipe (2 designers, 2 développeurs, 1 musicien), un emploi du temps un peu cadré par l’organisation pour éviter qu’une équipe parte à la dérive, et c’est parti…
A ce que j’ai compris, le choix de la techno est libre, et ce qui nous intéressait nous, c’est qu’ils ont choisi d’utiliser WebGL. Pour Cédric, c’est un vrai choix, comprendre par là qu’on peut faire de vraies choses maintenant avec cette techno, et il nous le prouve. Dans sa présentation, il nous présente au fil de l’eau l’évolution de leur projet au long des 48h, avec des snapshots intéressants. Son retour d’expérience est aussi lié à la gestion de l’homme (48h, c’est long), de la fatigue, et des choix, histoire de ne pas s’égarer dans quelque chose de trop ambitieux, ou hasardeux.

Tout cela m’a fait penser à la nuit de l’info ! J’avais eu la chance de le faire pendant mes études, et c’est la même problématique : Cerner rapidement les compétences de chacun, se donner un objectif atteignable, gérer la fatigue et les humeurs de chacun, avoir un produit abouti, avec un enrobage (documentation, aide…). J’aime beaucoup cet exercice en tout cas, plus pour le côté humain que technique d’ailleurs…

En tout cas, le résultat de leur travail en 48h c’est juste énorme…

Et c’est à consulter sur github, à cette adresse

ADOBE ET W3C

Par David Deraedt, Web Consultant chez Adobe.

Petit moment politique et rappel : Adobe vend des outils, et nous le rappelle. Adobe est un contributeur financier de W3C, comme Google. Bref, Adobe s’investit dans le Web, l’HTML5, et le montre ! D’ailleurs il a commencé son discours par « On va parler standard du Web, pas HTML5« . Comprendre par là que parler d’HTML5, ça ne fait pas assez sérieux pour une boite comme Adobe. Eux, ils misent sur des standards pérennes… Moué…

Bref, ils espèrent ainsi tirer leur épingle du jeu, et développer (j’imagine), une suite d’outils pour le développeur web… On peut d’ors et déjà imaginer autour de quoi grâce à la présentation de David. En effet, il a voulu nous faire un petit tour d’horizon des dernières spécifications HTML5 proposées par Adobe au W3C, et ça s’articule autour de deux évolutions CSS que je retiendrai : CSS Regions et CSS Shaders

CSS Regions :  Cette fonctionnalité CSS va permettre, entre autre, de donner des formes géométriques à des éléments du DOM ! Grâce à un navigateur fait maison, David Deraedt a pu nous faire une petite démo, avec des conteneurs de texte en forme de coeur, ou ce genre de chose. Et ça en CSS. Vraiment très plaisant, et on le sait, facile à mettre en place ! On sait aussi qu’ils ont proposé un « text-flow »… C’est à dire la capacité pour du texte de passer d’un Div à l’autre en fonction de la taille de la page, à la manière de colonnes dans un tableau Word par exemple… Bref, du CSS qui pourrait vraiment faciliter du Wysiwyg… On pourrait injecter du texte dans un diagramme, et imaginer plein de choses très concrètes…

CSS Shaders : C’est l’applciation d’animations sur le même principe que les CSS filters, ou même CSS 3D… Mais là, on va pouvoir aller beaucoup plus loin. Pour faire très simple, à partir du moment où quelqu’un a écrit une animation « Shaders » (qui sera sous la forme d’un petit fichier), il suffira d’appliquer cette transformation à un élément du DOM. Les démos étaient bluffantes…

A partir de là on peut imaginer que Adobe va fournir des outils (payants) pour pouvoir développer des shaders customisés, et toute sorte de customisations CSS. C’est là où ils sont forts, c’est que ce sont des compétences qu’ils ont déjà, issues des technos Flash, Flex, etc… Bref, bien joué, encore faut-il que les navigateurs acceptent les propositions de spécifications qu’ils font.

Pour plus d’informations : blogs.adobe.com/webplatform

Conclusion

Bref, une soirée bien sympa ! Sur le format en lui-même, j’aime bien le format des speechs courts, même si tous les speakers ont clairement défoncé leurs temps de parole. Peut-être un speaker de trop ? J’ai vu aussi qu’il était reproché aux présentations de ne pas être assez technique, je ne suis pas vraiment d’accord, c’est clairement un parti pris ! Je suis pour ma part content de savoir que c’est possible de faire certaines choses. Si j’ai envie de les implémenter, à moi d’aller plus loin… D’ailleurs, pour le développeur feignant comme moi, qui veut faire des trucs jolis sans que ça soit (trop) compliqué à implémenter, je ne peux que m’enthousiasmer de voir que tout cela va dans le bon sens…
Et sinon, merci à l’IESA, à Intel et aux organisateurs pour la soirée, les pizzas et les bières ! Ce fut fort sympathique…

LB.