http://www.interfacesriches.fr Toute l'actualité des interfaces riches (Flash, HTML5, 3D...) Wed, 26 Jun 2013 08:12:39 +0000 fr-FR hourly 1 http://wordpress.org/?v=3.5.3-alpha Le plein de jeux synchrones multi-plateformes chez Google http://www.interfacesriches.fr/2013/06/26/le-plein-de-jeux-synchrones-multi-plateformes-chez-google/ http://www.interfacesriches.fr/2013/06/26/le-plein-de-jeux-synchrones-multi-plateformes-chez-google/#comments Wed, 26 Jun 2013 08:12:39 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5397 La bataille fait rage entre les éditeurs de navigateur, surtout ces derniers mois. Si Microsoft tente de faire vibrer notre corde nostalgique avec du retro-gaming (De nouveaux jeux HTML5 avec Microsoft), Mozilla mise plutôt sur la 3D (Des jeux en 3D toujours plus performants avec HTML5), notamment avec la dernière version de son navigateur : Mozilla launches Firefox 22 with 3D gaming, video calls and file sharing to court developers. Certes, les jeux en ligne ne sont certainement pas votre priorité ou votre centre d’intérêt, mais l’enjeu de cette bataille est bien de séduire les développeurs au travers de démonstrations technologiques toujours plus spectaculaires.

Récemment, Google a montré un intérêt particulier pour les jeux autour de ses produits traditionnels (Google se relance dans les jeux avec Ingress, YouTube, Earth et bientôt Glass), mais les équipes du géant de Mountain View se sont également laissé tenter par des choses beaucoup plus expérimentales avec une série de jeux multi-plateformes synchrones :

Vous aurez bien compris que le but de la manoeuvre pour Google n’est pas de s’imposer comme la référence des jeux en ligne, mais de démontrer la supériorité technologique de son navigateur. Racer et surtout Cube Slam sont ainsi de véritables bijoux qui mettent parfaitement en valeur les capacités de communication en temps réel du navigateur Chrome : Google Continues WebRTC Innovations in New Video Game.

Autant il y a quelques années, la technologie Flash était perçue comme l’eldorado pour les applications en ligne, autant quand on regarde de près l’arsenal technologique déployé sur ces quatre jeux, on se dit qu’HTML5 offre tout ce dont on a besoin au quotidien en terme d’outillage informatique. CQFD, sauf dans le cas bien particulier des graphistes. Par contre, je me demande pourquoi les équipes de Google n’investissent pas autant d’énergie dans sa gamme d’applications professionnelles, notamment la suite Google Apps.

]]> http://www.interfacesriches.fr/2013/06/26/le-plein-de-jeux-synchrones-multi-plateformes-chez-google/feed/ 0 Des jeux en 3D toujours plus performants avec HTML5 http://www.interfacesriches.fr/2013/04/11/des-jeux-en-3d-toujours-plus-performants-avec-html5/ http://www.interfacesriches.fr/2013/04/11/des-jeux-en-3d-toujours-plus-performants-avec-html5/#comments Thu, 11 Apr 2013 08:37:52 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5374 J’ai l’impression qu’il ne se passe pas un un seul mois sans que j’entende parler d’HTML5 comme le nouvel eldorado des jeux en ligne. Non pas que les possibilités offertes par HTML5 sont  supérieures à celles offertes par d’autres technologies comme Flash ou Unity, mais force est de constater la communauté y investit énormément d’énergie. Il en résulte de bien beaux projets comme le portage du moteur Unreal 3 en HTML5Mozilla And Epic Games Bring Unreal Engine 3 To The Web, No Plugin Needed.

L’année dernière, l’éditeur Epic avait annoncé en grande pompe le portage de son moteur 3D dans Flash. Capitalisant sur ce travail, ils se sont associés avec les équipes de Mozilla pour réaliser un portage similaire en HTML5 et javascript (asm.js pour être plus précis). Le résultat sera disponible d’ici quelques semaines.

Ce ne sont pas tant les performances ou le rendu qui sont impressionnants, mais plutôt le fait qu’ils ont réalisé ça en seulement 4 jours. Quatre jours pour adapter du code C et C++ en javascript (plus d’1 million de lignes de code). Autre annonce marquante de ces dernières semaines, l’annonce de l’utilisation d’HTM5 et WebGL pour réaliser la prochaine version de RuneScape, un MMO en ligne : Jagex turns to HTML5 for RuneScape 3.

Runescape en Java (à gauche) et en HTML5 (à droite)
Runescape en Java (à gauche) et en HTML5 (à droite)

Les précédentes versions avaient été réalisées avec Java, mais il semblerait que l’éditeur privilégie une solution plus universelle, comme expliqué ici :

HTML5 serait-il donc LA solution universelle pour les rich internet games ? Comme toujours, je me dois de vous apporter une réponse mesurée. Bon en fait ce n’est pas moi, mais les équipes de Waste Creative qui apporte une réponse parfaitement argumentée dans ce très beau site : Flash v. HTML. Leur argumentation repose sur le jeu Waste Invaders qui a dans un premier temps été réalisé en Flash, puis proposé sur iPhone avec Adobe Air, puis porté en HTML5.

La version HTML5 de Waste Invaders
La version HTML5 de Waste Invaders

Le rendu du jeu est le même, mais ils reconnaissent que Flash est pour le moment largement mieux déployé que les navigateurs modernes sachant exploiter HTML5… sauf sur les terminaux mobiles. Leur conclusion est que les deux technologies sont très bien et qu’ils les apprécient toutes les deux. Cela rejoint l’avis que je vous ai toujours donné : ces deux technologies ont leurs avantages et inconvénients et ne devraient pas être opposées.

Il y a certes l’argument de la technologie propriétaire, mais il faut bien reconnaitre que les plugins nous rendent quand même de fiers services, ne serait-ce que sur YouTube ou sur Facebook, qui d’ailleurs vient de nouer un partenariat avec Unity (Facebook and Unity are now in a Relationship … and it’s Awesome!). Je vous propose donc de relativiser cette fronde anti-plugins et de privilégier le libre choix à une posture trop rigide.

]]> http://www.interfacesriches.fr/2013/04/11/des-jeux-en-3d-toujours-plus-performants-avec-html5/feed/ 3 De l’intérêt d’optimiser les applications mobiles HTML5 http://www.interfacesriches.fr/2013/02/11/de-linteret-doptimiser-les-applications-mobiles-html5/ http://www.interfacesriches.fr/2013/02/11/de-linteret-doptimiser-les-applications-mobiles-html5/#comments Mon, 11 Feb 2013 10:28:49 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5353 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.

]]> http://www.interfacesriches.fr/2013/02/11/de-linteret-doptimiser-les-applications-mobiles-html5/feed/ 4 Le NY Times innove avec Snow Fall, mais illustre les limites de la narration multimédia http://www.interfacesriches.fr/2013/01/23/le-ny-times-innove-avec-snow-fall-mais-illustre-les-limites-de-la-narration-multimedia/ http://www.interfacesriches.fr/2013/01/23/le-ny-times-innove-avec-snow-fall-mais-illustre-les-limites-de-la-narration-multimedia/#comments Wed, 23 Jan 2013 08:56:11 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5347 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).

]]> http://www.interfacesriches.fr/2013/01/23/le-ny-times-innove-avec-snow-fall-mais-illustre-les-limites-de-la-narration-multimedia/feed/ 2 Dopez votre narration interactive avec HTML5 http://www.interfacesriches.fr/2012/12/12/dopez-votre-narration-interactive-avec-html5/ http://www.interfacesriches.fr/2012/12/12/dopez-votre-narration-interactive-avec-html5/#comments Wed, 12 Dec 2012 20:17:21 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5330 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…

]]> http://www.interfacesriches.fr/2012/12/12/dopez-votre-narration-interactive-avec-html5/feed/ 0 Google célèbre l’histoire, la musique et le système solaire en HTML5 http://www.interfacesriches.fr/2012/11/22/google-celebre-lhistoire-la-musique-et-le-systeme-solaire-en-html5/ http://www.interfacesriches.fr/2012/11/22/google-celebre-lhistoire-la-musique-et-le-systeme-solaire-en-html5/#comments Thu, 22 Nov 2012 20:37:13 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5319 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.

]]> http://www.interfacesriches.fr/2012/11/22/google-celebre-lhistoire-la-musique-et-le-systeme-solaire-en-html5/feed/ 1 2013 sera l’année du tablet first http://www.interfacesriches.fr/2012/11/06/2013-sera-l-annee-du-tablet-first/ http://www.interfacesriches.fr/2012/11/06/2013-sera-l-annee-du-tablet-first/#comments Tue, 06 Nov 2012 06:01:22 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5308 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.

]]> http://www.interfacesriches.fr/2012/11/06/2013-sera-l-annee-du-tablet-first/feed/ 5 Adobe lance une suite d’outils de développement HTML5 http://www.interfacesriches.fr/2012/10/08/adobe-lance-une-suite-doutils-de-developpement-html5/ http://www.interfacesriches.fr/2012/10/08/adobe-lance-une-suite-doutils-de-developpement-html5/#comments Mon, 08 Oct 2012 12:31:24 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5299 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 :

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 !).

]]> http://www.interfacesriches.fr/2012/10/08/adobe-lance-une-suite-doutils-de-developpement-html5/feed/ 1 Quand les infographies deviennent interactives http://www.interfacesriches.fr/2012/09/19/quand-les-infographies-deviennent-interactives/ http://www.interfacesriches.fr/2012/09/19/quand-les-infographies-deviennent-interactives/#comments Wed, 19 Sep 2012 08:42:52 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5291 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)

]]> http://www.interfacesriches.fr/2012/09/19/quand-les-infographies-deviennent-interactives/feed/ 1 De nouveaux jeux HTML5 avec Microsoft et Firefox http://www.interfacesriches.fr/2012/09/05/de-nouveaux-jeux-html5-avec-microsoft-et-firefox/ http://www.interfacesriches.fr/2012/09/05/de-nouveaux-jeux-html5-avec-microsoft-et-firefox/#comments Wed, 05 Sep 2012 12:31:05 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5285 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.

]]> http://www.interfacesriches.fr/2012/09/05/de-nouveaux-jeux-html5-avec-microsoft-et-firefox/feed/ 0