Les interfaces riches au service de l’émotion

Non, les interfaces riches ne servent pas qu’à jouer des vidéos ou à animer des objets 3D à l’écran. Bon en fait, si, les technologies d’interfaces riches servent à ça, mais elles sont d’autant mieux exploitées qu’elles servent un but précis. Dans les exemples que je vais vous citer, il est ainsi question d’utiliser Flash pour faire passer un message chargé d’émotions. Ce message peu être de différentes natures (commerciale, caritatif, artistique…), mais l’important est de bien comprendre que la technologie n’est ici qu’un moyen d’immersion pour bien capter l’attention des internautes et de faire vibrer chez la bonne corde émotionnelle.

Commençons d’abord par étudier la dernière campagne de Only, une marque de vêtements de djeunz. Only Because We Can est un mini site proposant une vidéo interactive en plein écran dont l’unique objectif est de mettre en scène les produits de la marque dans une narration tournant autour de l’envie de… faire des choses simplement parce que l’on peut les faire. Le support (la vidéo) sert ainsi le message (« only because we can« ) et accessoirement la marque (Only).

La vidéo interactive de ONLY

La vidéo est donc jouée automatiquement, un clic de la souris permet de la mettre en pause et d’avoir des détails sur les produits portées par les actrices. Rien de novateur, mais une bonne illustration commerciale de ce que l’on peut faire avec une vidéo d’ambiance.

Autre exemple avec Carly’s Cafe, un mini-site accompagnant la sortie du livre Carly’s Voice qui raconte l’histoire et quotidien de Carly Fleischmann, une jeune femme autiste.

La mini-site Carly’s Cafe

Après une courte introduction vidéo sur l’enfance de Carly, ce mini-site propose de vivre une scène de sa vie quotidienne (boire un chocolat dans un café). Tout l’intérêt de cette vidéo interactive est de restituer de la façon la plus fidèle possible sa perception du monde qui l’entoure et de ses angoisses. Une expérience assurément intense, car elle restitue bien les troubles d’attention et de langage de la fameuse Carly.

Dernier exemple avec la société Alzheimer du Canada qui a mené une campagne très originale sur un grand portail d’information : La maladie d’Alzheimer version web. L’idée était de sensibiliser l’opinion publique sur la maladie d’Alzheimer en effaçant le contenu des pages du portail au fur et à mesure que l’internaute fait défiler la page vers le bas.

Là encore, rien de très spectaculaire (il existe d’autres exemples de bannières en Flash qui interagissent avec le contenu de la page), mais une technologie utilisée pour servir un message (les conséquences de la parte de mémoire).

Avec ces trois exemples, vous avec une illustration de ce que les technologies RIA permettent de faire pour transmettre des émotions. Si vous avez d’autres exemples probants, je suis preneur…

De la 3D encore plus réaliste sur vos mobiles grâce à Unity 4

Si vous lisez régulièrement ce blog, alors vous savez à quel point j’affectionne particulièrement la 3D en temps réel (à ne pas confondre avec l’infâme 3D stéréoscopique). D’autant plus qu’en ce moment, les esprits s’échauffent avec ce que l’on pourra voire tourner sur les consoles de prochaine génération avec les moteurs de Square Enix, CryTech, Unreal ou encore Quantic Dream. Mais le sujet qui nous intéresse tous est bien évidement la 3D sur les supports que nous utilisons au quotidien (navigateur web, smartphones, tablettes…).

Après de nombreuses années d’égarement, les techniques de représentation de la 3D dans un navigateur semblent se stabiliser avec WebGL d’un côté et Flash de l’autre. Mais il reste encore à traiter l’épineux problème des mobiles… Pour vous la faire simple, le marché est considéré comme « stabilisé » lorsque la majorité des éditeurs s’approprient un moteur 3D offrant le meilleur compromis entre le réalisme du rendu et la facilité de prise en main.

Exemple de rendu 3D avec Unity

Déjà présent depuis de nombreuses années, l’environnement Unity semble avoir trouvé le parfait compromis pour séduire les éditeurs de jeux mobiles. Pour celles et ceux qui ne connaissent pas, Unity est avant tout un environnement de développement de jeux, il a notamment été utilisé pour des jeux mobiles auxquels vous avez forcément dû jouer (Shadowgun, ZombieVille, Slingshot Racing, Smash Cops ou encore Ski Safari). Déjà plébiscitée lors de la sortie de la version 3 de la plateforme (Unity3D bientôt la référence des Rich Internet Games ?), la version 4 devrait permettre de creuser l’écart avec les solutions concurrentes.

Cette quatrième version permettra notamment d’exploiter DirectX 11 et de proposer de superbes rendues 3D.

Magnifique rendu 3D avec Unity4

Mais outre les aspects graphiques (gestion des particules, textures…), la gestion des animations 3D va être grandement simplifiée avec la possibilité de convertir un modèle 3D en avatar (lui permettant de bouger les bras, jambes, coudes… comme un squelette) et d’exploiter les mouvements d’un modèle en motion capture. En d’autres termes : vous créez le modèle et le moteur se charge de l’animer. Magie !

La quatrième version introduit également un certain nombre d’améliorations sur l’environnement de travail lui-même et le processus de création. Visiblement, la plateforme est maintenant beaucoup plus orientée vers la production de jeux sur smartphones et tablettes, un créneau très lucratif où l’éditeur trouve la plupart de ses clients : Unity 4 upgrades focus on triple-A, with a dash of web and mobile.

Toutes les conditions sont donc réunies pour que la croissance des jeux mobiles soit maintenue dans les prochaines années : des outils performants et efficaces, des éditeurs inventifs, car libérés de nombreuses contraintes techniques et des clients pleinement satisfaits avec des jeux de très bonne facture à des prix bien plus abordables que sur consoles de jeux.

Les commentaires sont fermés

Vive la data visualization dans votre navigateur !

Les interfaces de représentation de données ont un côté fascinant qui ne date pas d’hier (Data Visualization: Modern Approaches). La data visualization désigne ainsi l’art et la manière de représenter des données d’une façon élégante, efficace et instructive. Récemment, la discipline a été popularisée par la mode des infographies (dont il existe une infinité de boards sur Pinterest).

J’ai déjà eu l’occasion de vous parler de projets tout à fait intéressants (La BBC tente l’ergonomie artistique) et la discipline compte d’ailleurs des praticiens chevronnés en France comme l’équipe d’ActuVisu. Mais c’est de Suisse que nous vient une très belle initiative : A Carefully Selected List of Recommended Tools. Les équipes de DataVisualization.ch ont ainsi compilé dans une liste de librairies, applications et services pour créer de belles représentations graphiques des données dans les navigateurs : Datavisualization.ch Selected Tools.

Librairies et outils pour faire de la data visualization dans votre navigateur

Ces différentes librairies servent à créer des diagrammes, cartes… mais surtout à les manipuler en temps réel. Et c’est là le plus grand intérêt d’utiliser ces composants dans un navigateur : faciliter la représentation de données et leur compréhension au travers de la scénarisation de leur affichage et de leur manipulation. Plusieurs exemples ont ainsi retenu mon attention :

  • L’Atlas de la librairie Arbor.js qui répartit un grand nombre d’objets reliés entre eux pour qu’il n’y ait pas de chevauchement ;

    Chaque élément est à ça place sans chevauchement grâce à Arbor.js
  • L’outil de Visual Analytics de Quadrigram qui permet de sélectionner des sous-ensemble de données et de mettre à jour plusieurs graphiques en même temps ;

    Graphiques multiples avec Quadrigram
  •  L’étrange, mais très joli Flow Component de Rojored réalisé avec le framework Degrafa.

    Un superbe graphique dont je ne sais pas ce qu'il représente ;-)

Ces trois exemples ne sont qu’une sélection purement arbitraire dans une longue liste d’outils, je vous engage à le tester pour choisir celui qui vous conviendra le mieux. La plupart de ces librairies et composants sont en javascript, mais on en trouve aussi en Flash, car il en faut pour tous les goûts.

J’imagine que dans votre tête vous vous dites que Flash c’est mal et qu’avec Javascript on peut afficher tout ça sur un smartphone ou une tablette. Soit, mais n’oubliez pas que les moteurs javascript des navigateurs mobiles souffrent de gros problèmes de performance et sont terriblement gourmands en énergieiOS Still Tops Android In HTML5 Performance.

Comparaison des performances entre navigateurs mobiles et standards

De ce fait, il me semble important de ne pas trop spéculer sur la portabilité de ces librairies et composants. Sinon il existe aussi des services grand public comme Visual.ly qui permettent également de faire de belles représentations, mais je n’ai pas encore testé.

Explorez les pyramides de Khéops grâce à 3DVia

Connaissez-vous George Reisner ? C’est un égyptologue du 19e siècle connu pour ses travaux de recherche sur le plateau de Gizeh. Grâce à d’importants dons, le musée de Boston a entrepris récemment la digitalisation des travaux de Reisner, ainsi que de celles et ceux qui ont poursuivi ses recherches. Aujourd’hui, c’est Peter Der Manuelian qui dirige le Giza Archive Project. Avec sa participation, les équipes de Dassaut Systèmes ont pu mener une expérimentation à grande échelle en 2007 pour créer une représentation 3D photo-réaliste de ce qu’était le quotidien des habitants du plateau de Gizeh.

La semaine dernière, cette représentation en 3D a été rendue disponible au grand public grâce à la technologie 3DVia sur le site Giza3D.

Découvrez le plateau de Gizeh et les pyramides de Khéops et de Mykérinos avec 3DVia

Outre le côté ludique de l’application (« chouette, des pyramides !« ), l’objectif de ce projet est de donner un nouvel élan à l’archéologie : plutôt que de chercher à faire rentrer les visiteurs dans les musées, le but est de faire sortir le contenu des musées pour le mettre à disposition de tous les internautes. L’application permet ainsi de visiter les environs, mais également d’étudier de près la reproduction méticuleuse de la nécropole et des différents artéfacts qui y ont été retrouvés. En ce sens, le projet Giza 3D s’adresse aussi bien au grand public, qu’aux enseignants et aux élèves.

Explorer la nécropole comme si vous y étiez

En téléchargeant le plugin, vous avez donc accès à une reproduction 3D très réaliste du site archéologique sans avoir à quitter votre fauteuil. Pour le moment la visite guidée est plutôt classique, mais nous pouvons tout à fait envisager des visites plus thématiques et un enrichissement progressif de l’environnement.

Visiblement cette application n’est que la première étape d’un projet plus ambitieux, et l’on se met à rêver de ce que pourraient être les prochains sites : Lutèce, Delphes, Tenochtitlan, Pétra, Antlantis, Tatooine… Vivement la suite !

Sencha lance une nouvelle version de GXT pour accélérer le développement d’applications web

Réaliser une interface riche n’est pas chose facile : non seulement il faut la coder, mais en plus il faut se casser la tête pour choisir la bonne technologie (État de l’art des interfaces riches). Pour résumer une longue explication, il n’y a pas de bon ou mauvais choix technologique, tout dépend du contexte et des ressources disponibles. Aujourd’hui, je vais vous parler de Sencha, un éditeur d’outils de développement pour créer des interfaces web ou mobiles en HTML5, et plus particulièrement de GXT qui vient de sortir en version 3 : What’s New in Sencha GXT 3.

Pour vous la faire courte, GXT est une librairie pour créer des applications en ligne en Java. Ça vous fait penser à GWT ? C’est normal, car GXT se veut être une sur-couche qui exploite le même environnement de développement et les mêmes outils (Développez vos applications Web avec GXT). Concrètement, vous codez en Java et vous compilez votre application en HTML, CSS et javascript (GXT s’appuie sur la librairie Ext JS). L’intérêt de cette librairie est de gagner du temps tout en bénéficiant d’un environnement de développement rigoureux.

Dans la pratique, cette librairie vous propose un ensemble de composants d’interface pour accélérer le développement d’applications en ligne. Nous parlons ici d’applications d’entreprise, n’espérez donc pas y trouver des choses très funky, mais plutôt des choses utiles dans un contexte BtoB. L’éditeur fournit une liste d’exemples de ce que l’on peut faire. J’ai particulièrement apprécié (entre autres) :

  • Les boutons personnalisables ;
  • Les graphiques (en barres, colonnes, gauge, camembert ou surface) ;
  • Les menus déroulants enrichis ;
  • Les formulaires ;
  • Les tableaux avec options de tri avancées ;
  • Les menus en cascade ;
  • Les listes avec menu contextuel ;
  • Et même le dessin vectoriel (ici un logo).

Tout ceci est donc fort sympathique. Je ne me prononcerais pas sur l’épineux sujet des performances ou de la stabilité, je me contente d’apprécier les éléments d’interface du point de vue de l’utilisateur final.

Le seul concurrent direct de GXT semble être SmartGWT (merci à Tomiche pour la précision), sinon la concurrence la plus proche vient de GWT lui-même. On retrouve par contre des librairies javascript qui se rapprochent de cette philosophie comme le projet français qooxdoo ou des librairies plus répandues comme Dojo ou jQuery UI.

Ce que je trouve particulièrement intéressant dans cette approche est de pouvoir coder la logique métier de façon rigoureuse et de s’appuyer sur une librairie « standardisée » pour l’affichage. D’autant plus qu’il est possible de concevoir une application à la souris (avec Sencha Architect) et de la déployer sur le web et le mobile (avec une autre librairie comme Sencha Touch). Idéalement, il faudrait pouvoir combiner ça avec un atelier de BPM en amont (Business Process Management) pour avoir une approche encore plus rigoureuse…

La guerre des navigateurs relancée par Microsoft

Vous pensiez que la guerre des navigateurs était finie ? Que nenni, les éditeurs de navigateurs se livrent une compétition toujours aussi acharnée avec un terrain de bataille commun : HTML5. Certes, les chiffres penchent en faveur de Google (Chrome s’accapare près d’1/4 des visites des sites français, une tendance confirmée au niveau mondial par StatCounter), mais le géant de Redmond refuse de céder sa place.

Répartition des navigateurs web en France

Dans cette lutte, les derniers événements en date sont les suivants :

Ça se bagarre donc très dure, mais pas aussi dure qu’entre les deux prétendants. Microsoft investit ainsi beaucoup d’énergie pour limiter la fuite des utilisateurs d’Internet Explorer. Nous avions déjà vu des expériences très intéressantes ces deux dernières années, notamment avec Never Mind the Bullets (cf. Offensive de Microsoft sur Silverlight et HTML5). Ils font également preuve d’humour avec un beau mea culpa pour assurer la fin de vie de IE6Internet Explorer, The Browser You Love to Hate.

Mais la grosse offensive a été lancée récemment avec une opération pour la sortie au cinéma de l’adaptation de The Hunger Games avec le The Capitol Tour, un site expérientiel en HTML5 : Hunger Games + Internet Explorer + HTML5 = The Capitol Tour.

Le site de promotion du film The Hunger Games en HTML5

Le site est intéressant, le film un peu moins (préférez-lui les livres). Et comme les jeux en ligne sont à la mode, les équipes de Microsoft se sont pliés à l’exercice imposé du portage du jeu Cut the Rope :

Le jeu Cut the Rope dans votre navigateur

Force est de constater que ce portage est plutôt réussi. D’autant plus qu’il est largement documenté avec la mise en ligne d’un mini-site dédié (Build New Games).

Mais la firme de Redmond est allée encore plus loin avec le lancement de Brandon Generator, une histoire animée réalisée par Edgar Wright (réalisateur de Shaun of the Dead) et Tommy Lee Edwards (illustrateur pour Marvel) : A new anti-hero boosts interactive storytelling for IE9 users.

Plongez dans l'univers de Brandon

Là encore, la réalisation est très soignée et se situe à mi-chemin entre comics et film animation. L’histoire est présentée sous forme de chapitres, mais vous pouvez aussi exploiter certaines fonctionnalités interactives.

Face à une telle débauche de moyens, Google ne pouvait pas rester sans rien faire et contre-attaque cette semaine avec une nouvelle démo technique très impressionnante : Cube, un mélange de Google Maps et Marble Madness.

Jouez avec Google Maps dans votre navigateur avec Cube

La capture d’écran ne rend pas très bien, mais je peux vous assurer que la réalisation est très impressionnante et va mettre votre ordinateur à genoux. Par contre, ne vous y trompez pas, le but de la manoeuvre n’est certainement pas de s’assurer un leadership sur le segment des jeux en ligne.

L’enjeu est de taille, car une nouvelle version de Chrome OS est en finalisation (Sony preparing Chrome OS laptop, Google working on UI overhaul) avec des évolutions de l’interface graphique (Chrome OS borrows a little from Windows and a little from OS X in Aura UI update) et une intégration de Drive (Google Drive Integrated Into ChromeOS Dev Channel). L’objectif de Google est donc d’imposer son navigateur comme la nouvelle plateforme de référence : de faire comprendre aux éditeurs qu’ils doivent maintenant développer des solutions pour Chrome, et non pour Windows ou Mac.

La compétition est donc toujours aussi rude entre Google et Microsoft. Par contre, j’ai beaucoup de mal à comprendre pourquoi les équipes de Redmond ne concentrent pas leurs efforts sur la finalisation de IE10, voir sur la mise à niveau de IE11 par rapport aux navigateurs concurrents…

Quoi qu’il en soit, la pression est toujours aussi forte contre Flash qui subit de nouveaux outrages avec des nouvelles versions de services emblématiques comme FlickR ou Wix et toujours autant d’expérimentations (Inception Explained). Décidément, Adobe a bien fait de ce recentrer Flash sur le jeu et la vidéo HD !

Chronozoom : Visualisez l’histoire de notre univers grâce au cloud et à HTML5

Microsoft s’était déjà illustré il y a quelque temps avec des solutions de visualisation particulièrement impressionnantes (Playboy utilise la technologie Silverlight pour présenter 53 éditions historiques du magazine gratuitement). Ils nous proposent maintenant une nouvelle expérimentation très intéressante avec le projet ChronoZoom, une interface de visualisation multimédia de l’histoire de notre univers.

L'interface de ChronoZoom

ChronoZoom est un projet conjoint des universités de Berkeley et Moscou, ainsi que de Microsoft Research. L’objectif de ce service est de fournir un outil simple et universel pour visualiser des tonnes de données multimédias et en faciliter l’accès. Dit comme ça, le projet est un peu flou, mais je peux vous assurer que le site et les données qu’il y a derrière sont bien réels. Toute la difficulté de ce projet repose sur l’échelle et la matière première : nous ne parlons pas d’afficher quelques images sur une timeline retraçant les grandes étapes de l’humanité, mais de mettre en ligne une interface universelle (pour PC, tablettes, smartphones…) pour consulter l’ensemble des ressources disponibles (texte, photos, vidéos…) de l’histoire de l’univers (depuis le big bang jusqu’à l’adolescence de Justin Bieber). C’est donc un chantier titanesque, digne de la Grande Bibliothèque d’Alexandrie.

Concrètement, le service se présente sous la forme d’une timeline où sont affichés des médias. Il est possible de naviguer dans cette timeline avec la souris (un clic sur un ère permet de zoome sur celle-ci) ou à l’aide de repères.

Utilisez la molette de la souris pour afficher plus de détails

Trois choix structurants ont été faits sur ce projet :

  • Une représentation en timeline très intuitive (tout se fait à la souris avec la molette) ;
  • Une interface en HTML5 pour consulter des informations historiques, géographiques, astrophysiques, géologiques… stockées dans les nuages (plus spécifiquement sur la plateforme Azure), ce projet est donc une mise en application concrète du concept de Big History (une variante de Big Data) ;
  • Un outil d’édition en ligne pour permettre aux scientifiques du monde entier d’alimenter la base (cf. Chronozoom, le big data de l’histoire de l’univers, devient open source).

Au final, nous avons donc un service particulièrement convaincant qui fera des merveilles en salle de classe. Pour le moment, seule une petite quantité de données sont disponibles, mais la plateforme va être enrichie au fur et à mesure par la communauté scientifique et les passionnés.

Nous parlons ici de contenus historiques / scientifiques, mais imaginez un peu ce que cela pourrait donner avec des données commerciales ou CRM… La simplicité de l’interface ouvre en effet de nombreuses applications possibles, et préfigure peut-être le remplaçant du navigateur Windows (qui sait ?).

(via Techcrunch)

PS : Vous noterez que je sous-entends dans le titre qu’il y a d’autres univers que le nôtre…

Les commentaires sont fermés

Vers une nouvelle forme d’écriture institutionnelle avec les interfaces riches

J’ai toujours été fan des webdocumentaires, vous le savez, car j’en parle depuis au moins 3 ans sur ce blog. Il y a dans ce format de contenu un potentiel gigantesque en terme de richesse de narration, de champ créatif / expressif et de portée du message. Il n’est ainsi plus question d’être spectateur ou lecteur, mais bien d’être acteur, voir enquêteur. La façon dont les webdocumentaires sont conçus permet alors de capter l’attention de façon bien plus efficace.

France 5 a ainsi toujours été très actif dans la production de webdocumentaires, et ça dernière grosse réalisation en date témoigne de cet engagement. Manipulation est ainsi un modèle du genre avec un contenu très dense que les internautes doivent découvrir au fur et à mesure de leur progression dans les différents dossiers.

Manipulations, le webdocumentaire de France5

Outre les webdocumentaires émanant de l’univers de la télévision, on trouve aussi de très belles réalisations financées par des fonds publics, à l’image de Bear71, un projet à mi-chemin entre documentaire et expérience interactive sur l’extinction des ours au Canada : This interactive documentary blurs the line between wild and wired worlds. L’idée derrière ce dispositif est de proposé à la fois un documentaire visionable sur les médias traditionnels, mais aussi des contenus interactifs en ligne, dont un traceur qui permet de suivre à la trace la femelle ours présenté dans le reportage et de découvrir au quotidien les interactions qu’elle a avec d’autres animaux sauvages ou avec des humains :

Suivez l'ours N°71 dans les montagnes Canadiennes

De même, signalons l’énorme travail du Ministère des Affaires Étrangères qui publie depuis 2010 un webdocumentaire très complet sur son action au quotidien : Destinations, chroniques d’une diplomatie de terrain. Là encore, c’est une véritable mine d’or d’informations, de vidéos et de données qui sont à disposition des internautes pour découvrir le quotidien des diplomates.

Le webdocumentaire du Ministère des Affaires Étrangères

Comme ce sont des productions assez coûteuses, ce webdocumentaire se construit petit à petit en rajoutant des pays régulièrement. Ce ne sont que trois exemples parmi tant d’autres, mais ils sont, selon moi, représentatifs de ce qui se fait de mieux. Si vous avez d’autres exemples, n’hésitez pas à les mentionner dans les commentaires.

Encore plus intéressant, ce format est également utilisé dans la communication institutionnelle, à l’image de SFR qui avait déjà publié un rapport interactif : Homo Numericus. Mélange d’animations, de vidéos et d’éléments interactifs, ce webdocumentaire propose une façon très intéressante de restituer les conclusions (et la matière) de l’étude.

En allant un peu plus loin, il serait possible d’appliquer ce principe à des documents très rébarbatifs comme les rapports annuels. L’idée serait de mettre en scène les principaux messages et les chiffres-clés dans un format agréable et spectaculaire et de proposer le reste au téléchargement. C’est ainsi ce que propose l’agence In Visu avec ses Video Digital Report : Une nouvelle génération d’interface !.

Exemple de Video Digital Report de l'agence In Visu

Le format utilisé est toujours plus ou moins le même (vidéos interactives…), mais la mise en scène permet de concentrer l’attention et de donner une image carrément plus moderne de la prise de parole institutionnelle. Il existait une très belle démonstration en linge, mais elle a été mise hors ligne pour une raison que je n’explique pas…

J’imagine que vous êtes, tout comme moi, convaincu de l’efficacité de ce format, mais que des contraintes budgétaires vous empêchent de passer à l’action. Soit, je peux bien le comprendre, car la vidéo interactive est un luxe que tous ne peuvent s’offrir. Qu’à cela ne tienne, nous pouvons tout à fait envisager un principe similaire, mais sans la vidéo : une mise en scène de messages textuels et de chiffres pour mieux capter l’attention et sortir du lot.

Prenons ainsi l’exemple du rapport annuel de Leetchi, une startup française, qui a été publié sous forme d’infographie :

Le rapport annuel de Leetchi sous forme d'infographie

Il serait tout à fait possible de dynamiser cette page en exploitant les possibilités offertes par les CSS3 (animations, transitions…) ou par javascript. Non seulement cette mise en scène permettrait de concentrer l’attention, mais elle apporterait une dimension narrative à la présentation des chiffres ou des réalisations de l’année. Le tout dans des ordres de coût tout à fait raisonnable, et même consultable sur des terminaux mobiles ou des tablettes !

Bref, je pense que vous avez compris où je voulais en venir : les interfaces riches pour donner du peps et scénariser des contenus initialement plutôt « plats » (pour ne pas dire rébarbatifs). En poussant la logique jusqu’au bout, j’anticipe même un créneau à prendre pour les plus malins qui se feraient une spécialité de la réalisation de ces rapports annuels…

Le paysage des Rich Internet Games se diversifie

Le marché des jeux en ligne est un secteur que je suis avec attention. Régulièrement j’essaye de faire le point sur les Rich Internet Games, que l’on croyait récemment acquis à la cause du HTML5, mais pas tant que ça. Si le principe du jeu dans le navigateur n’est pas neuf, l’innovation autour de cet usage n’a jamais été aussi forte et le paysage se diversifie, aussi bien en terme de solutions technologiques, que d’éditeurs de référence et de modèles économiques.

Dernier fait notable en date, le portage du Unreal Engine dans la dernière version de Flash : Epic touts console-quality graphics in browser-based Flash games with Unreal Engine. Cette démo est très longue à charger, mais le résultat est spectaculaire, car vous vous retrouvez en face d’un environnement en 3D temps réel d’une très grande fluidité et finesse.

Le moteur graphique Unreal Engine dans votre navigateur grâce à Flash

La mise en ligne de cette démo n’est pas un hasard, car elle est synchronisée avec le recentrage récent de Flash sur le jeu et la vidéo HD. Cette annonce est également faite conjointement avec le lancement d’un nouveau site vertical (Gaming.Adobe.com) et de différentes annonces autour de Stage3D récapitulées ici : So much stuff to talk about.

Le nouveau site consacré aux professionnels du jeu de Adobe

Adobe met donc le paquet pour se réserver la part du lion sur ce créneau. Il faut dire que le marché est juteux, non pas en nombre de joueurs, mais en nombre de studios et de développeurs indépendants. Il faut dire que Adobe a accumulé un peu de retard, surtout face à des plateformes de développement dédiées comme Unity3D qui vient de passer à la version 3.5 et qui sera utilisé dans la conversion des titres de Capcom : Capcom Bringing it in Browsers, Onimusha Soul Coming this Summer.

La compétition est donc serrée, et Adobe doit bouger vote pour encercler des concurrents de petite taille comme Unity, car de plus gros poissons viennent de rentrer dans la danse : Google’s Unified Gaming Platform.

Google vient donc d’officialiser PlayN, son framework de développement de jeux en ligne. Comme je ne suis pas un pro, je me suis renseigné auprès de Didier Girard qui m’a gentiment fourni les explications suivantes :

  • C’est une librairie, permettant de développer des jeux en ligne qui apporte un système de gestion des objets physiques (gravité, mouvement, élasticité lors des chocs…), la notion de plan (arrière-plan, plan de jeux, premier plan…), la boucle événementielle qui permet d’animer une scène…
  • Ce framework a été initialement développé pour porter Angry Birds sur le web, il s’appuie sur un autre framework (box2D) ;
  • Le principe est de coder en Java et de le compiler en GWT pour obtenir un jeu HTML5/javascript (utilisant la balise Canvas, WebGL…) ;
  • Même si la cible principale est de faire des jeux en HTML5, il est possible de générer des jeux pour d’autres plateformes (Flash, Java, Android et prochainement iPhone).
Voici donc une initiative ambitieuse dont Adobe se serait bien passé. Est-il raisonnable de penser que l’on peut réaliser des jeux non-casual avec HTML5 ? Peut-être : WebSonic, Sonic 3D avec WebGL ou la révolution JavaScript par l’exemple.

Toujours est-il que le débat HTML5 + WebGL / Flash + Stage 3D n’est plus réellement d’actualité, car la concurrence est ailleurs. Porter un jeu initialement conçu pour le desktop dans le navigateur est une tâche hasardeuse et plutôt ingrate, d’autant plus à l’heure du cloud gaming. Les acteurs de ce créneau connaissent ainsi une forte croissance et signent des partenariats tout à fait intéressants : Warner Bros Interactive Entertainment and Gaikai Partner to Launch World’s First Cloud-Based Streaming MMO Game Experience. Pour en savoir plus sur la stratégie de développement des deux principaux acteurs, je vous recommande l’article suivant : CES, Two cloud gaming firms, two different visions.

Adobe recentre Flash sur le jeu et la vidéo HD

Cette semaine Adobe a publié par l’intermédiaire de Mike Chambers la feuille de route d’évolution de la plateforme Flash : Adobe roadmap for the Flash runtimes. Un document à la tonalité un peu trop formelle à mon goût, mais qui a le mérite d’illustrer la volonté de transparence d’Adobe quand à l’avenir de Flash et de clarifier son positionnement vis-à-vis de HTML5.

Une publication qui tombe à pic, car Adobe s’est fait pas mal chahuter ces derniers temps (Adobe toujours dans la tourmente malgré des nouveautés intéressantes), non pas que ses produits ne sont plus bons, mais parce qu’une tranche de la blogosphère high-tech a décidé que Flash n’était plus à la mode. Mettons tout de suite les choses au point : avec cet article, mon but n’est pas de prendre la défense d’Adobe, mais de militer en faveur des interfaces riches, de TOUTES les interfaces riches, pour que les concepteurs de sites et de services en ligne aient une palette d’outils la plus large possible afin d’améliorer et d’enrichir l’expérience des internautes.

D’où vient Flash et où va cette technologie ?

Comme précisé dans le document, Flash est une technologie d’animation vectorielle créée dans les années 90. Suite à un accueil enthousiaste de la communauté, ce plug-in a commencé à intégrer toujours plus de possibilités (animations, audio, vidéo, accès aux périphériques…). Si le rythme d’innovation avec Flash a été aussi soutenu, c’est parce que la technologie était tirée par un écosystème de développeurs frustrés de voir les spécifications de HTML stagner. Résultats : ils se sont rabattus sur Flash pour pouvoir délivrer des expériences toujours plus riches à des internautes en recherche de sensations et de spectaculaire.

Puis en 2008, Adobe a sorti AIR, un environnement d’exécution multiplateforme pour pouvoir encapsuler des contenus Flash dans une similiapplication. L’objectif était de pouvoir proposer une solution de distribution universelle pour des applications légères et des jeux.

Jusque-là tout se passait bien, puis sont arrivés les smartphones et notamment l’iPhone d’Apple qui a refusé Flash pour pouvoir préserver l’intégrité de son modèle de distribution (iTunes). Certes, il y avait également l’alternative d’Android, mais les équipes d’Adobe ont visiblement rencontré des problèmes de performance insurmontables. De ce fait, décision a été prise de se concentrer sur un portage de AIR sur les smartphones afin de se conformer au modèle de distribution de « petites » applications mobiles via des marketplace. Aujourd’hui la situation est à priori stabilisée puisque ce mode de fonctionnement (des contenus Flash encapsulés sous forme d’applications mobiles) semble être le compromis universellement accepté.

Plus récemment, le W3C a enfin débloqué la situation et repris son travail de normalisation pour faire évoluer les spécifications de HTML. Une très bonne nouvelle, car les évolutions apportées par HTML5 vont grandement simplifier la création d’interfaces plus sophistiquées, surtout avec CSS3 (HTML 5 + CSS 3 = une révolution pour les interfaces web). Pour vous éviter une longue explication, disons qu’avec CSS3 et HTML5, le HTML va reprendre sa place et Flash va reprendre la sienne (Flash et HTML5 ne sont pas concurrents).

Deux créneaux porteurs : les jeux et la vidéo en ligne

Comme précisé plus haut, le but de cette roadmap est de clarifier le positionnement de Flash. Ce nouveau positionnement va donc s’articuler autour de deux créneaux : les jeux et la vidéo en ligne.

Au sujet des jeux en ligne, les ambitions d’Adobe sont clairement affichées : ils veulent faire de Flash la console virtuelle pour le web en capitalisant sur les possibilités offertes par le plugin (distribution universelle, accélération matérielle pour la 3D, prise en charge des périphériques…) ainsi que sur un écosystème de développeurs très dense. Ils comptent d’ailleurs aller encore plus loin en formalisant un Game Developer Program pour soutenir l’industrie et stimuler l’écosystème.

Certes, avec des technologies comme WebGL il est possible de faire de très belles choses (Gameloft Embraces HTML5 With 3D Game GT Racing), mais la population ciblée est beaucoup plus restreinte, et les environnements de développement ne sont pas aussi sophistiqués (à l’image de Unity3D).

Autre domaine où Flash excelle : la vidéo en ligne. C’est d’ailleurs sur ce second créneau qu’Adobe souhaite intensifier ses efforts pour faire de Flash LE moteur de la vidéo pour le web. Là encore, vous pourriez me dire que HTML5 propose des lecteurs vidéo très performants, mais diffuser de la vidéo ne se limite pas à déployer un lecteur. Sur ce point, les équipes d’Adobe vont travailler pour pouvoir étendre le support à de nouveaux codecs, enrichir les possibilités de manipulation des vidéos, collaborer de façon étroite avec les constructeurs et CDN pour optimiser les flux de streaming, proposer des solutions de DRM plus fiables pour protéger les contenus et autoriser des outils d’analytics plus sophistiqués.

Quelles évolutions pour Flash et AIR ?

Plusieurs stades d’évolution de Flash sont décrits dans la roadmap (qui devrait d’ailleurs être enrichie au fur et à mesure) :

  • Une version 11.2 qui devrait sortir très bientôt avec un support plus étendu des cartes graphiques (rétrocompatibilité jusqu’en 2008), des astuces pour les jeux (verrouillage de la souris, support du clic droit, désactivation du menu contextuel…) et de meilleures performances pour la vidéo ;
  • Une version « Cyril » qui devrait sortir au cours du second trimestre et apporter d’autres améliorations techniques ainsi que la possibilité de streamer des textures 3D ;
  • Une version « Dolores » programmée pour la seconde moitié de l’année avec d’autres améliorations techniques et une rétrocompatibilité sur les cartes graphiques sorties depuis 2005 ;
  • C’est par contre en 2013 que sortira normalement la version « Next » avec une réécriture du noyau et une nouvelle machine virtuelle ActionScript supportant la future version d’ActionScript.

Visiblement cette nouvelle version d’ActionScript va être une authentique révolution, mais je ne possède pas les compétences pour en apprécier la portée. Je laisse donc le soin à d’autres de commenter cette partie.

Concernant AIR, il n’y aura pas de grosses évolutions (en dehors de celles induites par le Flash Player encapsulé dedans). Les équipes vont visiblement travailler à l’amélioration des APIs pour offrir plus de modularité et de stabilité aux développeurs tiers.

Pour ce qui est de la compatibilité sur les différentes plateformes :

  • Flash et AIR continueront d’exister sur les ordinateurs (Mac et Windows), mais le support de Linux ne sera assuré qu’au travers de Chrome (Google privilégiant ainsi Flash à AIR sur ses chromebooks).
  • Flash ne sera donc plus disponible sur les smartphones ou tablettes puisque c’est l’option AIR qui a été privilégiée. Il y a deux semaines, Adobe a officiellement confirmé que Flash ne serait plus supporté par le navigateur d’Android (Adobe confirms: no Flash for Chrome on Android), cette décision va permettre aux équipes de concentrer leurs efforts dans une même direction. Précisons que les problèmes de performance et de consommation d’énergie qui plombaient l’utilisation de Flash dans le navigateur d’Android se retrouvent également avec javascript (ils vont devoir faire de gros progrès sur la machine virtuelle).
  • Pour les télévisions connectées, même si certaines plateformes embarquent Flash dans le navigateur, il semblerait que la priorité soit encore une fois donnée à AIR.

Voilà, tout est dit dans ce document et nous y voyons maintenant beaucoup plus clair.

Flash est mort, vive Flash !

Donc si l’on résume ce qui a été annoncé : Les RIAs exploitant Flash ne subsisteront que sur les ordinateurs, pour les terminaux mobiles et alternatifs (smartphones, tablettes, TV et voitures connectées…), les contenus Flash devront être distribués sous forme d’applications.

Cela veut-il dire qu’Adobe jette l’éponge et que finalement Flash n’est pas un bon produit. Non, bien évidemment que non, car de toute façon, une application AIR n’est qu’un contenu Flash distribué non pas dans le navigateur, mais au sein d’une application autonome. C’est donc la fin du Flash Player pour mobile, mais pas de Flash !

Le constat d’échec ne se situe donc pas au niveau de la technologie en elle-même, mais au niveau du modèle de distribution : les constructeurs ont fait le forcing pour imposer leur app store et sécuriser ainsi un minimum de revenu pour financer le développement de leur système d’exploitation. Dans l’absolu ce n’est pas plus mal, car même si ce système force les utilisateurs à payer un peu plus, il permet de tirer la qualité vers le haut en générant plus de revenus pour les développeurs et les distributeurs.

Moralité : vous n’avez pas fini d’entendre parler de Flash, ni d’HTML5, car ces deux familles technologiques vont maintenant pouvoir cohabiter en symbiose.