Slides, vidéo et exemples de ma présentation des Microsoft Days et du ReMix11 sur HTML5

Vous êtes nombreux à m’avoir réclamé la présentation que j’ai initialement jouée lors du ReMix11 et intitulée : “HTML5: Etat des lieux et projection vers l’avenir”. J’ai ensuite joué la même présentation au cours de certaines dates de l’évènement Microsoft Days comme à Rennes par exemple.

Mise à jour le 01/07/2011 : ajout de la vidéo enregistrée en mai à Microsoft France au format Silverlight Smooth Streaming et HTML5 (h264/WebM).

Présentation

A noter que j’ai fait une petite boulette (qui malheureusement a été reprise en boucle sur Twitter après le ReMix11) sur les parts de marché des “navigateurs HTML5”. J’avais oublié d’ajouter la part de marché du navigateur Safari 5… (hum, hum). Cela fait donc passer le chiffre de 33% à environ 38% au niveau mondial. Mea Culpa ! Mon approche a été d’ajouter les parts cumulées d’IE9 + FF 4.0 + FF 3.6 + Chrome 8/9/10/11/12 + Opera 10/11 depuis le site Netmarketshare.com. Sachant que chacun de ces navigateurs dispose de support disparate de “HTML5”. Mais cela donne déjà une idée.

Vidéo

Exemples

Par ailleurs, voici l’ensemble des démonstrations que j’ai jouées pendant cette petite heure :

Bonnes pratiques

- Exemple de l’utilisation de Modernizr pour les éléments sémantiques d’HTML5 pour IE < 9 via ASP.NET MVC 3

Internet Explorer 9

- SVG Theme Park : démonstration d’une scène SVG sur laquelle vous pouvez faire CTRL-F pour chercher le texte par exemple
- Canvas Pad : petite application sympathique pour apprendre les bases de canvas
- Site Microsoft Office OneNote 2010 : la dernière version du site officiel de OneNote 2010 est entièrement réalisée en HTML5 à base de canvas. Preuve s’il en est que HTML5 est déjà en parti prêt pour la production.
- World's Biggest PAC-MAN : utilisation de canvas pour créer le plus grand PacMan de tous les temps ! L’application destinée à tuer la productivité en entreprise.
- Your Director's Cut † Bon Jovi : une application permettant de faire son propre montage vidéo à partir de clips issus de concerts de Bon Jovi (le rêve non ?). Au programme : <canvas>, <video> et <svg>.
- Un exemple ultrasimple de CSS3 Media Queries : redimensionnez la fenêtre et cela affichera plus ou moins de doigts dans l’image de fond grâce à CSS.
- Un exemple plus complet de CSS3 Media Queries : à nouveau jouez avec les dimensions de votre fenêtre sur cet exemple plus réaliste.

Intérêts de l’accélération matérielle

- Dailymotion Stream : affichage de vidéos h264 en plein écran sans plug-ins grâce à l’accélération matérielle via GPU d’IE9. J’en ai déjà parlé ici : Vivez de belles expériences avec IE9 grâce à l’accélération matérielle et l’intégration à Windows 7 où vous pouvez notamment voir la différence de consommation GPU entre Chrome et IE9 sur ce site.
- Lancome : qui a entièrement refait son site web à l’identique en HTML5 par rapport à Flash. Cela leur a couté 2 fois plus cher à rendu identique. Vous pouvez lire le communiqué de presse ici : Lancôme et Internet Explorer 9 explorent ensemble la beauté du Web
- SVG Girl : un manga expérimental spécialement conçu pour mettre en avant IE9 et qui montre surtout ce que SVG a dans le ventre lorsqu’on le pousse un peu.
- Galactic : une démonstration utilisant la balise <canvas> pour afficher une animation de la terre qui tourne autour du soleil grâce à un moteur 3D en JavaScript. A tester sous IE9 et sous Firefox 4.0 par exemple pour se rendre compte des différences de performances potentielles entre les navigateurs sur ce sujet.
- Paintball : utilisation à nouveau du Canvas mais via l’opération de globalCompositeOperation. Outre à nouveau les différences importantes de performances entre IE9 et ses concurrents, on voit également un problème/bug de rendu de Chrome sur cette opération <canvas>.

A ce sujet, vous pouvez trouver la suite des tests unitaires officiels du W3C sur <canvas> ici : W3C approved canvas tests . Je vous ai par exemple montré celui-ci : 2d.drawImage.image.incomplete.omitted aujourd’hui mal rendu par Chrome mais apparemment bien géré par IE9 et Firefox 4.0.

Pour la performance de l’accélération matériele, j’avais travaillé à faire des comparaisons détaillées et complètes entre les différents navigateurs le proposant par défaut ou non ici : Navigateurs web modernes : tous vers l’accélération matérielle ! Mais pas à la même vitesse…

Internet Explorer 10

Ces exemples ont pour but de montrer les orientations sur lesquelles Microsoft travaille pour l’avenir. A tester donc avec IE10 PP1 téléchargeable ici.

- CSS Gradient Background Maker : permettant de montrer les gradients CSS3. On peut voir ici qu’il est important d’utiliser les préfixes des éditeurs pour les fonctionnalités non encore figées. Sur cet exemple, pas moins de 5 versions différentes en plus de la future version standard !
- Un exemple ultrasimple de CSS3 Grid : montrant un positionnement des éléments via CSS3 Grid couplé à la puissance de CSS3 Media Queries. A ma connaissance, cette démonstration ne fonctionne que sous IE10 aujourd’hui.
- Un exemple simple de CSS3 Multicolumns : montrant l’usage du formatage du texte par CSS en plusieurs colonnes. Si vous redimensionnez la fenêtre, vous verrez le nombre de colonnes s’adapter automatiquement à la largeur. Bien que CSS3 Multi-column soit supporté par Chrome et Firefox, cette démo ne fonctionne que sous IE10 et Opera 11 car le recalcul de la largeur se fait via l’opération suivante disponible en CSS3: “calc(100% - 20px);” non supportée par les 2 navigateurs de chez Google et Mozilla pour l’instant.
- Griddle : si vous mélangez les différentes démonstrations précédentes (MediaQueries, Grid, Flexbox, Multicolumns), vous obtenez cette démo. Testez là sous IE10 et amusez vous à nouveau à redimensionner la fenêtre plus simuler les différents périphériques : PC, Tablette et téléphone.

HTML5Labs.com

- Jigsaw Game demo : disponible sur notre laboratoire d’expérimentations HTML5Labs et montrant un jeu entre 2 joueurs connectés utilisant canvas mais surtout WebSockets.

Voilà, c’est tout ! A bientôt pour d’autres aventures.

David