De l’intérêt d’optimiser les applications mobiles HTML5

Souvenez-vous, en septembre dernier, le patron de Facebook jetait un pavé dans la marre en déclarant qu’ils avaient fait fausse route en choisissant HTML5 pour leur version mobile et qu’ils allaient corriger le tir avec une application mobile native : Mark Zuckerberg: Our Biggest Mistake Was Betting Too Much On HTML5. Un terrible coup pour tous les supporters de HTML5, qui a été enfoncé quelque mois plus tard avec la livraison de la version Android (Facebook Speeds Up Android App By Ditching HTML5 And Rebuilding It Natively Just Like The iOS Version). Suite à cette « défection » d’un des plus gros sites de la toile, le débat était relancé sur la supériorité des applications natives par rapport à leur version utilisant HTML5 (Don’t Make The Same Mistake As Facebook: Why Brands Cannot Rely On HTML5).

Pour vous la faire simple, les discussions tournaient encore et toujours autour des mêmes arguments : les applications natives coûtent plus cher, mais sont plus performantes que leur équivalent en HTML5 qui facilite le déploiement, mais proposent une expérience bien moins riche. La performance et l’expérience utilisateur étaient donc au coeur de ce débat qui semblait pencher en faveur des très exigeants adorateurs de la marque à la pomme. Pourtant, les dernières statistiques ne donnent pas raison aux ayatollahs des applications natives (Android régnera sur le marché des smartphones en 2013, mais ne sera pas seul). D’autant plus que, comme le fait très justement remarqué Ryan Stewart, « it never pays to bet against the web » (Don’t Settle for a Mediocre HTML5 App Experience).

Nous en étions là dans ce débat complexe à appréhender, quand les équipes de Sencha nous ont livré un argument mettant définitivement fin aux discussions : une application HTML5 parfaitement optimisée peut être plus performante qu’une application native et délivrer une expérience similaire (The Making of Fastbook: An HTML5 Love Story). Le résultat est une application HTML5 disponible en ligne ici : Fastbook.

Comparison de l’application native Facebook et de Fastbook

Les explications sont assez techniques (l’astuce consiste à filtrer le flux pour éviter de gâcher la bande passante), mais le résultat est très convainquant comme en témoigne la vidéo ci-dessous :

À partir du moment où l’adoption de HTML5 pour les applications mobile ne se fait pas au détriment de la performance, le choix est beaucoup plus simple à faire, d’autant plus avec les frameworks hybrides : How Hybrid Apps Are Accelerating HTML5 Adoption. Entendons-nous bien : le choix de HTML5 n’est pertinent que si vous devez étendre la présence d’une marque ou d’un service sur les terminaux mobiles. Si votre objectif est de lancer un service uniquement accessible sur smartphones Apple (comme l’était Instagram à l’époque), le contexte est très différent. Dans tous les cas de figure, le débat est enfin apaisé et nous sommes revenus à un niveau de discussion beaucoup plus sain où les arguments rationnels l’emportent : Why HTML5 Should Replace Native Apps for Ecommerce.

Moralité : Si nous sommes tous d’accord pour dire que l’idéal est que tous vos clients soient verrouillés au travers d’une application mobile native, il faut savoir revenir à la réalité du marché et reconnaitre que toutes les marques ou services en ligne ne peuvent imposer l’installation d’une application, car le temps, la motivation, les connaissances et la capacité de stockage des smartphones des utilisateurs sont limités. À partir de là, la meilleure approche est de commencer par servir le plus grand nombre d’utilisateurs avec une solution hybride qui comblera aisément les usages ponctuels. C’est votre priorité, car le développement et le déploiement de x applications mobiles natives vont devenir des tâches de plus en plus complexes et coûteuses.

Le NY Times innove avec Snow Fall, mais illustre les limites de la narration multimédia

Je vous parlais en début de mois dernier des bienfaits du multimédia pour mieux accrocher l’attention des lecteurs (Dopez votre narration interactive avec HTML5). Les esprits se rencontrent, car le NY Times publiait la semaine suivante un superbe article multimédia racontant les mésaventures d’un groupe de skieurs pris dans une avalanche : Snow Fall, The Avalanche at Tunnel Creek.

La première page de Snow Fall

Oui je sais, « article multimédia » fait résonner en vous les bons vieux CD-Rom des années 90. Même si le terme est un peu désuet (euphémisme), il reste néanmoins parfaitement valide pour décrire l’objet éditorial publié par le journal : un mélange de textes, images, vidéos et animations interactives. Le résultat final est un modèle d’élégance et de storytelling, il a d’ailleurs remporté un franc succès : More than 3.5 Million Page Views for New Yorl Times’ ‘Snow Fall’ Feature.

Ce sont ainsi près de 3 millions de visiteurs qui sont venus s’immerger dans ce récit passionnant et dans les nombreuses vidéos et infographies :

Exemple d’infographie dans Snow Fall

Le succès remporté par cet article soulève néanmoins de nombreux questionnements au sein de la profession. Si certains journalistes sont très enthousiastes (What the New York Times’s ‘Snow Fall’ Means to Online Journalism’s Future), d’autres sont plus mitigés (The good — and the bad — about the NYT’s Snow Fall feature et Avec « Snow Fall », le New York Times cristallise les défis de la presse en ligne). Sont en cause dans cette histoire les coûts de production (visiblement très élevés) et les leviers de monétisation (de vulgaires bannières insérées à l’arrache dans l’article qui défigurent la mise ne page).

Melange de vidéo et d’animation dans Snow Fall

Je ne suis pas un expert de la production multimédia, loin de là, mais je constate que les outils à disposition pour produire et distribuer ce type d’article enrichi (notamment HTML5) permettent de limiter les investissements. La grande question est ensuite de savoir si vous vous positionnez comme un média qui produit de l’information brute (de l’information chaude au format texte) ou une expérience de lecture différenciante (des contenus tièdes ou froids avec une mise en page valorisante).

Améliorez la performance de vos interfaces mobiles avec RESS

Voilà près de deux ans que l’on vous parle de responsive design, cette technique permettant d’adapter la mise en page d’un site web en fonction du terminal utilisé. Largement documenté et utilisé par des sites à très large audience (Microsoft, Vogue, Time, StarbucksZDnet…), le RWD semble avoir conquis les développeurs d’interfaces mobiles. Il existe à ce sujet de nombreux frameworks pour accélérer vos développements comme HTML5 Boilerplate, Boostrap, Foundation, Gumby ou encore Gravity (cf. Five awesome open-source front-end frameworks).

Mais le responsive design n’est pas la solution parfaite, car cette technique repose sur l’affichage ou non de certains éléments dans la page. Le problème est que tous les éléments chargés sont les mêmes, les images et fichiers javascript sont ainsi chargés, mais complètement sous-exploités par les smartphones. De même, les éléments tiers (bannières publicitaires ou plugins sociaux) sont chargés inutilement ou intégrés à l’arrache. Vous l’aurez compris, la performance de ces interfaces est donc un gros problème. Or, le temps d’affichage est un facteur-clé de succès de premier ordre.

Heureusement pour améliorer les performances il est possible de ne charger que les éléments dont vous avez besoin, voire de charger des éléments spécifiquement adaptés à un type de terminal. Cette technique a un nom, et c’est Luke Wroblewski qui l’a trouvé le premier : RESS = Responsive Design + Server Side Components. L’astuce consiste donc à détecter le type de terminal et à charger les éléments qui lui correspondent (images, fichiers HTML et javascript…). Dans l’exemple ci-dessous, il existe deux versions du header et du footer sur le serveur (pour desktop et pour mobiles), seule la version correspondant au terminal utilisé est chargée :

Deux versions distinctes du header et du footer sont utilisées

Cette technique est donc l’évolution logique du responsive design, car elle permet d’optimiser les temps de chargement, aussi bien pour les fichiers HTML et javascript que pour les images. Des explications plus détaillées sont disponibles ici : RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design.

Il existe également de nombreuses présentations didactiques sur le sujet, notamment ici :

Et ici :

Je vous invite à consulter également cette étude de cas sur le très beau site de l’université de Notre-Dame : Reinventing the Wheel, the Innovation Behind Notre Dame’s Unique New Homepage. Des sites à fort volume comme CNN ou WordPress ont déjà adopté RESS.

RESS est-il donc la solution ultime pour avoir des sites optimisés en fonction du terminal ? Oui, à condition que la détection fonctionne correctement. La détection du type de terminal est donc le talon d’Achille de cette technique. Pour en savoir plus, je vous recommande Server-Side Device Detection: History, Benefits And How-To.

Nous nous retrouvons donc avec trois options pour déployer du contenu ou un service en ligne :

  • Un site unique en responsive design (qui n’utilise pas la détection, mais qui ne règle pas le problème de performances) ;
  • Un site en RESS (bien optimisé, mais qui repose la détection) ;
  • Une version mobile du site (très bien optimisé, mais qui repose également sur la détection).

Comme toujours, il n’y a pas de bon ou mauvais choix, uniquement des compromis à faire en fonction de vos ressources et compétences. Pour vous aider, je vous propose enfin ces deux articles qui étudient les avantages et inconvénients de ces trois solutions : Responsive Design, Device Experiences, or RESS? et A Comparison of Methods for Building Mobile-Optimized Websites.

Si vous avez des retours d’expérience, n’hésitez pas à les partager dans les commentaires.

Dopez votre narration interactive avec HTML5

J’ai déjà eu l’occasion de vous expliquer dans quelle mesure les interfaces riches vous permettent de développer de nouvelles formes d’écriture institutionnelle. Tout l’intérêt d’utiliser les technologies RIA est de scénariser un contenu à la base très… statique, pour dynamiser la narration et rendre le tout beaucoup plus ludique, à l’image du Mobile Playbook de Google. Cet exemple est d’ailleurs particulièrement intéressant, car réalisé en HTML5, donc accessible sur tous types de terminaux.

La question que l’on est en droit de se poser est alors la suivante : le HTML5 va-t-il populariser le storytelling à grand renfort de mini-sites narratifs ? C’est bien possible, car les exemples ne manquent pas. Je vous propose d’en étudier trois qui me semblent représentatifs.

Dans le registre institutionnel, il y a tout d’abord Nutella Parlons-en, un mini-site dédié à apaiser les interrogations du grand public sur la composition de la célébrissime pâte à tartiner et notamment l’utilisation d’huile de palme. Ce mini-site propose une dizaine de pages au sein desquelles on navigue à l’aide de la molette de la souris. L’idée est manifestement d’égayer et de dynamiser un contenu plutôt rébarbatif.

Le mini-site institutionnel de Nutella

Les pages s’enchainent facilement avec de très beaux effets de transition. On passe ainsi d’un panneau à un autre, on survole les titres, on s’attarde sur les images, et l’air de rien, on consulte bien plus de pages que si le site proposait un système de navigation traditionnel. L’objectif est donc atteint.

Deuxième exemple avec Le Hybrid 4 Graphic Novel de Peugeot. Le but de ce mini-site n’est pas de faire passer des messages institutionnels, mais de s’appuyer sur une BD pour mettre en situation les bénéfices du produit. Le mode de lecture est ici plus limité que dans l’exemple précédent, car il n’est possible que de scroller vers le bas, mais avec le défilement automatique activé, c’est presque comme un dessin animé.

La BD interactive de Peugeot

La réalisation est soignée, et les transitions et animations apportent un vrai plus à la narration, à mi-chemin entre Ben the Bodyguard et Soul Reaper. Là encore, la cosmétique est un prétexte à vous faire rester plus longtemps sur le site, et ça marche.

Dernier exemple avec le livret blanc Au-delà du cloud produit par SFR. Nous sommes ici dans le domaine BtoB, mais le fait de proposer un format web pour ce livret blanc apporte une vraie valeur ajoutée, car le contenu est plus riche (vidéos…) et peut-être facilement mis à jour pour prolonger la durée de vie, contrairement à un fichier qui est figé dans le temps. De plus, ce livret blanc donne la possibilité de commenter certains articles ou paragraphes.

Le livret blanc en ligne de SFR

Comme pour les deux exemples précédents, le format permet de prolonger la visite et même d’en augmenter la portée grâce aux fonctions de partage intégrées nativement. Je vous confirme également qu’il s’affiche parfaitement sur mes trois tablettes (iPad, Nexus et Windows 8).

La conclusion que je peux logiquement livrer est la suivante : oui, HTML5 est bien LA technologie idéale pour faire de la narration interactive (digital storytelling comme disent les anglais). Idéalement, il ne manque plus que la possibilité de « télécharger » ces mini-sites pour pouvoir les consulter hors-ligne, une chose qu’il est pourtant très simple de réaliser en HTML5…

Les commentaires sont fermés

Google célèbre l’histoire, la musique et le système solaire en HTML5

J’ai déjà eu l’occasion de vous parler des incroyables réalisations publiées sur Chrome Experiments. Lancé au début de l’année 2009, ce site avait pour ambition de démontrer les capacités des technologies standards du web (HTML5, javascript, WebGL…) pour mettre en valeur la performance de son navigateur. Force est de constater qu’ils ont réussi leur pari, car Chrome est le navigateur qui progresse le plus vite. Il est même dominant sur certains sites comme ce blog, mais le projet ne s’arrête pas pour autant, car ils ont franchi la barre des 500 expériences : 500 Chrome Experiments and counting.

Pour fêter ce cap symbolique, les équipes de Google ont lancé trois projets particulièrement impressionnants. Le premier est le Google Cultural Institute, une initiative menée conjointement avec de nombreuses institutions locales, dont l’objectif est de donner accès à des contenus culturels et historiques divers (textes vidéos, photos…).

Le projet d’institut culturelle de Google

Le site se présente donc sous la forme d’une timeline retraçant les grands événements de l’histoire contemporaine avec une interface de visualisation sous forme de grille que l’on parcourt avec les flèches du clavier. Le tout est bien évidemment réalisé en HTML5, et il y a également une très belle interface de recherche dont ils devraient s’inspirer pour leur moteur (et toc !) :

L’interface de recherche de l’institut culturelle de Google

Autre projet spectaculaire : 100.000 Stars, une interface de visualisation du système solaire en 3D qui repose sur WebGL et CSS pour pouvoir afficher… 100.000 étoiles à l’écran :

L’interface de visualisation des étoiles du système solaire

Je regrette que la capture d’écran ne retranscrive pas du tout l’incroyable impression de vide (ou de gigantisme) que l’on ressent à zoomer dans notre galaxie à la recherche du système solaire. Cette réalisation est signée par la Google Data Art Team, déjà à l’origine de projets dont nous avons déjà parlé ici (The Wilderness Downtown, 3 Dreams of Black ou The Exquisite Forest). En plus ils ont eu la bonne idée de mettre une visite guidée pour éviter que les internautes ne se perdent.

Et pour finir, il y a également Jam with Chrome, qui permet de jouer sur 19 instruments à 4 personnes en simultanée :

L’interface de Jam with Chrome

Une authentique prouesse technique, car il y a de nombreux types d’instruments (guitares, basses, claviers, batteries, boîtes à rythmes…) et que tout se joue à la souris et au clavier. Signalons qu’il existe d’autres expériences tout à fait incroyables visuellement comme Walk in a Fog ou Car Visualizer, je vous invite d’ailleurs à parcourir les différentes catégories.

Nous sommes tous d’accord pour dire qu’au-delà de la performance artistique / technique, ces expériences ne servent pas à grand-chose. Ceci étant dit, elles ont tout de même le mérite de nous prouver qu’il est tout à fait possible de faire des choses incroyablement sophistiquées dans la fenêtre d’un navigateur avec des technologies accessibles à tous : HTML, CSS, javascript, WebGL… Largement de quoi inspirer les développeurs d’applications d’entreprise ou d’outils de dataviz, et surtout de leur démontrer que Chrome a acquis une longueur d’avance sur ses concurrents.

2013 sera l’année du tablet first

Avec l’avènement des connexions haut débit, nous pensions que le web allait supplanter la télévision en terme de contenus vidéos. Plus pratique, plus performant, mieux ciblé… les portails proposant des contenus vidéo ont commencé à fleurir et à petit à petit transformer nos moniteurs en écrans vidéo, à l’image du portail CNN. De même, les dernières techniques d’affichage permettaient aux designeurs de concrétiser leurs rêves les plus fous avec des mises ne page particulièrement audacieuses comme celle de WonderWall (MSN expérimente des nouveaux formats pour ses magazines en ligne).

Mais entre temps, l’iPhone est arrivé… puis l’iPad… et tous leurs concurrents. À partir de ce moment, il n’a plus été question de contenus vidéos (trop lourds pour le réseau de téléphonie), mais de contenus textuels monétisés (L’avenir des magazines numériques est-il à l’HTML5 ?). La multiplication des formats nous a alors replongé dans une période sombre que nous pensions révolue (4 feuilles de styles pour 4 expériences de lecture). Les tablettes sont maintenant définitivement rentrées dans le quotidien des internautes, et leur adoption ne va qu’accélérer avec la mise sur le marché de tablettes low-cost à moins de 200 €.

Nous sommes maintenant dans une configuration de marché où la dichotomie web / mobile n’est plus vraiment d’actualité, car le spectre des formats ne cesse de s’élargir : de 3,5″ à 5″ pur les smartphones, de 7″ à 11″ pour les tablettes, de 11″ à 15″ pour les ordinateurs portables (sans oublier les écrans en retina display d’Apple), de 17″ à 27″ pour les ordinateurs de bureau, à partir de 29″ pour les TV connectées…

Les différents formats de terminaux web

Pour accélérer le travail d’intégration et pour baisser les coûts, mais surtout parce que les formats publicitaires traditionnels ne fonctionnent plus réellement, certains sites comme Amazon et Ebay ont commencé à adopter des mises en page hybrides pour faciliter l’affichage sur les tablettes. Une approche audacieuse qui en a visiblement inspiré d’autres.

Un certain nombre de sites proposent maintenant non pas une mise en page hybride, mais une mise en page directement adaptée aux tablettes. La tendance semble donc s’être inversée avec une nouvelle vague de sites HTML5 tablet first (par analogie avec mobile first), à commencer par le journal USA Today avec sa navigation latérale et sa structure tout en hauteur :

La nouvelle mise en page du journal USA Today

Plus intéressant, les blogs ReadWrite et TheNextWeb qui proposent des barres de navigation minimalistes et une liste des articles sur la gauche de l’écran :

La nouvelle mise en page du blog The Next Web

Vous noterez que cette mise en page n’est pas sans rappeler les dynamic views de Blogger et notamment le mode Sidebar de Blogger. Un choix de conception radical qui privilégie avant tout le confort de lecture sur tablettes (nous ne nous en plaindrons pas) en laissant la part belle aux contenus, comme sur le magazine Quartz.

La mise en page optimisée pour les tablettes du magazine Quartz

Au final, est-ce qu’on y gagne ? Oui, indéniablement. Car si la lecture à l’écran est grandement améliorée grâce à une bien meilleure exploitation de la surface d’affichage (plus de distraction et de multi-colonage), la consultation sur grand écran est indiscutablement plus agréable, et l’adaptation sur smartphone en responsive design est forcément plus rapide. Il est amusant de constater que si les cinq années de croissance folle des smartphones ont laissé les concepteurs froids (l’approche mobile first est encore un débat très sensible), il n’aura fallu que deux ans aux tablettes pour s’imposer d’elles-mêmes comme le format de référence pour les mises en page : 2013 sera l’année du tablet first.

Toujours pas convaincu ? Allez donc faire un tour chez Nike pour changer d’avis.

Adobe lance une suite d’outils de développement HTML5

Vous ne vous en rendez sans doute pas compte, mais le web est dans une étape de transformation cruciale en ce moment. Nous ne parlons pas ici des usages, mais plutôt des technologies, et plus particulièrement de HTML. La dernière évolution en date des standards (HTML5) devait mettre tout le monde d’accord et permettre à l’industrie d’appréhender cette nouvelle itération avec calme et sérénité. Sauf que le torchon brûle entre le W3C (l’organisme de normalisation des standards web) et le WHATWG (le consortium qui pousse pour faire évoluer plus rapidement les standards). Vous serez ainsi surpris d’apprendre que HTML5 n’existe pas, du moins que HTML5 n’existe pas en tant que standard web stabilisé et normalisé par le W3C. Ces derniers avaient initialement prévu de le stabiliser en 2022 (véridique), mais sous la pression des grands éditeurs ont ramené l’échéance à 2014 (W3C announces plan to deliver HTML 5 by 2014, HTML 5.1 in 2016). Trop tard pour le WHATWG, qui y travaille depuis 2007 et a décidé de reprendre en parallèle les travaux d’évolution de HTML (Relationship update on HTML Living Standard and W3C HTML5). Donc pour vous la faire simple : les éditeurs ont décidé de prendre leur distance face au W3C et la lenteur à laquelle ils font évoluer la norme HTML5 (W3C and WHATWG finalize split on HTML5 spec, forking unlikely).

Dans ce contexte, difficile de se lancer dans un chantier d’évolution pour passer de HTML4 à HTML5. Et pourtant, les changements de comportements induits par les terminaux mobiles forcent les éditeurs de contenus ou de services en ligne à évoluer : The New York Times Debuts An HTML5 Web App For iPad et Salesforce Launches HTML5 App For Sales Cloud. Est-ce qu’HTML5 est une technologie tellement révolutionnaire que personne ne peut se mettre d’accord ? Non, il s’agit plus d’une crise d’adolescence du web qu’autre chose. La cinquième version d’HTML apporte ainsi un certain nombre d’améliorations, mais elle ne change pas la face du web. La question de la mobilité est complexe à appréhender (En finir avec le débat application vs. site mobile), mais ne peut être tenue responsable d’un tel foutoir (et encore, je reste poli). À ce sujet, je vous recommande de lire la synthèse publiée par FaberNovel : HTML5, comment repenser votre stratégie web.

Bref, tout ça pour dire que la situation est plutôt instable. Heureusement, certains acteurs s’efforcent de calmer le débat et de proposer des solutions simplifiant la tâche des éditeurs de contenus ou de services en ligne. Adobe vient ainsi d’annoncer le lancement de toute une série d’outils de développement HTML5 : Adobe launches Web-focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and more. Cette nouvelle famille s’appelle donc Edge et regroupe les outils suivants :

  • Edge Animate, un environnement de production d’animations d’éléments HTML5 exploitant javascript et les propriétés CSS3 (anciennement appelé Edge) ;

    L’interface de Adobe Edge Animate
  • Edge Reflow, un outil de production de gabarits de page en responsive design;

    L’interface de Edge Reflow
  • Edge Code, un éditeur HTML / CSS / Javascript dont le noyau est issu de Bracket(un projet open source) ;

    L’interface de Edge Code
  • Edge Inspect, un outil permettant de contrôlé en quasi-temps réel le rendu d’une page sur différents terminaux (anciennement Adobe Shadow).

    L’interface de Edge Inspect

D’autres produits sont associés à cette famille comme TypekitWeb Fonts (un équivalent gratuit, mais en plus limité), et PhoneGap Build (un environnement de déploiement d’applications mobiles multi-support dans les nuages : Adobe Reintroduces PhoneGap, Expanding Mobile App Options). C’est donc une famille d’outils particulièrement complète que nous propose Adobe, d’autant plus intéressante qu’une attention toute particulière a été portée aux terminaux mobiles. Cette famille apporte donc la caution de stabilité dont le marché à besoin, elle introduit également des nouveautés très attendues, surtout face à des outils comme Dreamweaver qui se sont empâtés avec le temps. Cette vidéo de Brackets (utilisé pour Edge Code) illustre bien cette volonté de réinventer les outils de développement HTML :

L’outil qui suscite le plus d’interrogations est incontestablement Edge Reflow qui est proposé pour le moment en Sneak Peek. Une Preview Realease devrait être proposée d’ici à la fin de l’année.

Ce lancement est donc une bonne nouvelle pour l’industrie, car c’est un message fort envoyé aux éditeurs de sites et annonceurs encore indécis et/ou perplexes face à ce débat d’expert au sujet de ce qu’est et doit devenir HTML. Le progrès est en marche, et je ne peux m’empêcher de rejoindre le « camp » du WHATWG : à la vitesse où évoluent les usages et terminaux, comment pourrait-on se contenter d’une seule version des spécifications HTML tous les 10 ans (3.665 jours !).

Quand les infographies deviennent interactives

J’ai toujours apprécié les infographies. D’une part pour le côté esthétique, d’autre part car elles permettent de remettre en perspective des données que nous aurions du mal à appréhender hors contexte. D’ailleurs la définition d’une infographie est : « une représentation graphique visuelle d’informations, de données ou de savoir ». Bref, c’est beau et utile. Sauf qu’avec la mode actuelle de tout représenter sous forme d’infographie, il y a overdose, surtout quand les données sont pauvres et que la représentation graphique est de mauvais goût. Il existe même des places de marché et des outils de création / partage d’infographies comme Visual.ly.

Tout ça pour dire que je pense que nous avons atteint le point de saturation des infographies statiques. S’il n’existe toujours pas d’outils en ligne pour créer des infographies dynamiques (à ma connaissance), nous commençons à voir des choses très intéressantes. Information is Beautiful a ainsi créé pour la BBC une très belle infographie dynamique pour calculer le nombre (théorique) de civilisations extra-terrestres : How many alien civilizations exist?.

Déjà à l’origine d’une autre très belle infographie (How big is space?), les équipes se sont mises en quatre pour proposer à la fois quelque chose de visuellement très plaisant, scientifiquement correct et surtout interactif. Le principe est donc de représenter graphiquement l’équation de Frank Drake (créée en 1961) en expliquant chaque étape du calcul et en donnant la possibilité aux internautes de faire varier les paramètres.

Chaque paramètre de l’équation peut être changé

Les internautes ont également la possibilité de choisir parmi 4 préréglages (paramètres originaux, pessimistes, optimistes et révisés) pour vous simplifier la tâche. Une fois arrivé en bas de la page, il vous suffit de lancer le calcul pour avoir la réponse.

Le résultat de l’équation de Drake

Je ne suis pas rentré dans le détail du code, mais j’imagine que tout est réalisable en HTML5 pour utiliser un minimum d’images. Le résultat est très plaisant et surtout utile, du moins pour ceux qui doutent encore (je précise que cette estimation ne concerne que les civilisations extra-terrestres de la voie lactée). Espérons que cette infographie interactive va en inspirer d’autres.

( Information Aesthetics)

De nouveaux jeux HTML5 avec Microsoft et Firefox

Décidément, les Rich Internet Games sont l’objet d’une lutte acharnée de la part des plus grands éditeurs (Le paysage des Rich Internet Games se diversifie). Si Google et Adobe ont été les premiers à se positionner, les autres ne sont pas en reste avec une contre-offensive de Microsoft et Mozilla sur le créneau des jeux en HTML5. Oui je sais, ça fait maintenant plusieurs années que l’on nous parle d’HTML5 comme le grand pourfendeur de Flash (Les jeux en HTML5 deviendront-ils une réalité), mais force est de constater que les grands éditeurs et la communauté ne ménagent pas leur peine pour nous en convaincre.

Microsoft, qui a déjà lourdement investi pour faire la promotion d’Internet Explorer 10, frappe un grand coup en s’associant à Atari pour proposer un portage de plusieurs mythiques jeux d’arcade : Atari Teams Up With Microsoft To Bring 8 Classic Games To The Browser. Pour célébrer les 40 ans de la marque, Atari vient ainsi de lancer la réédition d’une dizaine de titres (Asteroids, Combat, Centipede, Lunar Lander, Missile Command, Pong…) sur Atari Arcade.

Les titres mythiques d’Atari disponible dans votre navigateur

Les versions HTML5 ne sont disponibles que pour les utilisateurs d’IE, mais des équivalents en Flash permettent de profiter de ces rééditions sur les autres navigateurs. Ceux qui ont moins de 30 ans ne peuvent sans doute pas apprécier ces jeux à leur juste valeur (ils font partie de notre patrimoine culturel), mais force est de constater que la réalisation est irréprochable.

À terme, ce sont près d’une centaine de jeux qui seront réédités. Une excellente nouvelle, d’autant plus que les équipes de Microsoft ont de plus eu la bonne idée de fournir des explications détaillées : Building HTML5 Games for the Atari Arcade.

Hasard du calendrier, Mozilla nous propose dans la même semaine une nouvelle version de Firefox avec des performances accrues pour les jeux en 3D : Firefox 15 Offers 3D Gaming Enhancements, Background Browser Upgrades. La sortie de la quinzième version de Firefox s’accompagne donc d’une démo technique très impressionnante, BananaBread.

Un FPS dans votre navigateur avec Firefox 15

BananaBread exploite ainsi le moteur graphique Cube 2, initialement développé en C++ et OpenGL, qui a été compilé en Javascript et WebGL grâce à Emscripten. Je ne maitrise pas trop les aspects techniques de ce portage, mais le rendu est tout à fait impressionnant.

Là encore, nous ne pouvons que saluer la performance technique et graphique. Tout ceci augure un très bel avenir pour les jeux en ligne, notamment avec des environnements de production et déploiement comme Unity (De la 3D encore plus réaliste sur vos mobiles grâce à Unity 4).

Dernière annonce avec la publication de HexGL, un clone de WipeOut en HTML5 et WebGL réalisé par un français (Thibaut Despoulain).

De la 3D en plein écran de votre navigateur avec WebGL

Non seulement la réalisation est splendide, de même que le site compagnon, mais en plus, elle est l’oeuvre d’un jeune étudiant français. COCORICO !

Au final, nous avons donc de très beaux jeux  en HTML5 qui ne nécessitent aucun plugin. « OK, mais à quoi ça sert ? » me demandez-vous. Hé bien ça peut servir à une infinité de choses : Développer un business autour d’un jeu (sur le modèle d’UberStrike), proposer une advergame (comme Puma avec son très sympa Run Run), décliner la licence d’un jeu sur console… surtout si vous ciblez les tablettes. Si l’objectif est de fidéliser une audience de joueurs, peu importe que vous utilisiez une technologie propriétaire comme Quake Live. Mais si nous parlons d’une audience occasionnelle, voire d’usage unique, les jeux en 3D ne nécessitant pas de plugins trouvent tout leur intérêt (cf. la conférence qui se déroulera à Paris la semaine prochaine).

Bref, tout ceci me confirme dans l’idée que les jeux en ligne sont un enjeu majeur, à la fois économique (notamment les social games), mais aussi technologique (en tant que démonstrateurs de la supériorité d’un navigateur ou d’un moteur graphique). La bonne nouvelle dans cette histoire est que plus la concurrence est rude, et plus la technologie progresse, donc mieux sont les jeux.

Les commentaires sont fermés

La revanche des curseurs de souris personnalisés

Personnaliser le curseur de la souris d’un site web est un crime passible de 5 ans de prison ferme et d’interdiction d’exercer un métier du web à vie, tout le monde le sait. Les internautes de la première heure se souviennent encore des années sombres du web où des éditeurs peu scrupuleux prenaient un malin plaisir à modifier le curseur de la souris pour qu’il laisse une trainée d’étoiles ou pour faire tomber de la neige en période de noël. Ces pratiques abjectes ont heureusement disparues avec l’abrogation de la loi précitée, même s’il persiste encore quelques pirates proposant des curseurs personnalisés pour votre page MySpace (ils doivent certainement opérer en zone franche pour se soustraire à la loi).

Et pourtant… je récemment tombé sur le site de Full Windsor, un fabriquant de vélos, qui a remplacé le curseur de la souris par la main d’un singe (le logo de la marque). Pire : ils ne se sont pas contentés de remplacer le curseur par une main, mais d’utiliser le bras en entier. Et pour couronner le tout, le site est à défilement horizontal et non vertical !

La page d’accueil du site de Full Windsor

Même si le site est en Flash, je ne peux que saluer la prise de risque et la qualité de la réalisation. Le curseur répond plutôt bien et le singe pousse des petits cris à chaque fois que vous cliquez ou que vous déplacez la page. En plus, les conventions sont respectées car la main du singe change quand elle survol un item cliquable. Cerise sur le gâteau : la montre au poignet du singe affiche l’heure exacte !

La page produit du site de Full Windsor

Au final, nous avons donc un site fort sympathique, qui a su prendre des risques pour se démarquer de la concurrence. Le résultat est plutôt convainquant, même s’il peut potentiellement donner des idées néfastes aux autres. Pitié, pas de Nyan cat !