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 Google Maps + WebGL = Google Earth http://www.interfacesriches.fr/2013/06/03/google-maps-webgl-google-earth/ http://www.interfacesriches.fr/2013/06/03/google-maps-webgl-google-earth/#comments Mon, 03 Jun 2013 08:37:53 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5388 J’ai toujours considéré Google Earth comme une sorte de jeu vidéo dans lequel on se téléporte d’un endroit à un autre, on survol les immeubles et on plonge au plus profond des océans. Le problème est qu’il faut installer ce logiciel et que l’interface peut être complexe à manipuler (à cause d’une navigation en 3D). Nous avions donc chez Google d’un côté le très fonctionnel Google Maps, avec ses itinéraires et ses adresses, et le très récréatif Google Earth de l’autre. Mais tout a changé le mois dernier avec l’annonce d’une nouvelle version majeure : Meet the new Google Maps, A map for every person and place.

La nouvelle version de Google Maps n’est pour le moment accessible que sur invitation, et les places sont chères tant ce nouveau service est spectaculaire. Il y a d’une part une nouvelle mise en page où la carte recouvre tout l’écran et les éléments sont posés par dessus :

La nouvelle interface de Google Maps
La nouvelle interface de Google Maps

Il y a ensuite une personnalisation de la carte en temps réel en fonction de votre historique de recherche. Puisque l’on parle de temps réel, il y a également les horaires des prochains trains / métros qui sont pris en compte dans les itinéraires proposés :

Les horaires des transports en commun dans le nouveau Google Maps
Les horaires des transports en commun dans le nouveau Google Maps

Mais la grande nouveauté est incontestablement la possibilité d’afficher une vue 3D des villes avec les bâtiments. Comme vous pouvez le constater, ce sont les mêmes contenus que dans Google Earth, mais avec une interface simplifiée :

La vue 3D des bâtiments dans le nouveau Google Maps
La vue 3D des bâtiments dans le nouveau Google Maps

Pour le moment les bâtiments ne sont disponibles que pour quelques villes (NY, Rome…), mais le rendu est splendide et parfaitement fluide. Encore plus impressionnant, cette nouvelle version propose une vue d’ensemble de la Terre avec affichage des formations nuageuses en temps réel :

La Terre vue du ciel de Google Maps
La Terre vue du ciel de Google Maps

Ce mode de visualisation est d’autant plus spectaculaire que la transition se fait en douceur. Cerise sur le gâteau, en reculant la perspective au maximum, vous avez une vue de la Terre depuis l’espace avec les étoiles en arrière-plan ainsi que la limite jour / nuit :

La Terre et la Voie Lactée en arrière-plan
La Terre et la voie lactée en arrière-plan

Cette dernière vue est tout simplement splendide, et d’autant plus bluffante que chaque étoile est à sa place, car les coordonnées sont très précises. Tout ceci étant disponible sans aucun plug-in grâce à WebGL. Disponible depuis de nombreuses années, cette nouvelle version de Google Maps sera la première application à très grande échelle (WebGL, le nouveau standard de la 3D sur le web).

C’est donc un authentique tour de force de la part des équipes de Google, qui n’en sont pas à leur premier essai (WebGL Experiments), et surtout une grande victoire pour la 3D dans le navigateur. Des sessions ont déjà été organisées pour décrire les aspects techniques lors du dernier Google I/O (Google Maps + HTML5 + Spatial Data Visualization), mais ce sont avant tout les aspects fonctionnels qui sont à travailler, car il me semble plutôt compliqué de manipuler une interface 3D avec des périphériques conçus pour la 2D (souris, clavier ou pavé tactile). Vous avez la possibilité d’investir dans un SpaceNavigaotr 3D, mais peut-être la solution se trouve-t-elle dans les interfaces gestuelles

]]> http://www.interfacesriches.fr/2013/06/03/google-maps-webgl-google-earth/feed/ 0 Tous vos documents bureautique consultables directement dans votre navigateur http://www.interfacesriches.fr/2013/04/29/tous-vos-documents-bureautique-consultables-directement-dans-votre-navigateur/ http://www.interfacesriches.fr/2013/04/29/tous-vos-documents-bureautique-consultables-directement-dans-votre-navigateur/#comments Mon, 29 Apr 2013 17:17:23 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5379 Il y a deux mois, Google faisait sensation en annonçant le portage de QuickOffice sur NativeClient pour proposer aux utilisateurs de Chromebook un lecteur natif de fichiers Office : L’adoption de NativeClient passera par les jeux… et la bureautique. Les choses semblent s’accélérer, car les équipes de Google viennent d’annoncer la disponibilité d’une extension Chrome pour pouvoir lire les fichiers bureautiques : A speedy, more secure way to view Microsoft Office files directly in Chrome. Jusqu’à présent, les fichiers Office que vous receviez par email pouvaient être lus au travers de l’interface de Google Drive, mais avec cette nouvelle extension (Chrome Office Viewer), qui ne pèse “que” 20 Mo, vous pouvez les ouvrir directement dans la fenêtre de votre navigateur.
Ouvrez les fichiers bureautiques dans votre navigateur avec le Chrome Office Viewer
Ouvrez les fichiers bureautiques dans votre navigateur avec le Chrome Office Viewer

Cette extension permet d’ouvrir tous les documents Office récents (.doc, .docx, .xls, .xlsx, .ppt, .pptx) et fonctionne plutôt bien. Certes, il n’est pas (encore) possible d’éditer les fichiers, mais vous économiserez potentiellement de nombreuses minutes avec cette extension dans vos phases de recherche de documents, d’autant plus qu’elle est visiblement parfaitement sécurisée pour éviter la propagation de virus.

C’est donc une nouvelle étape franchie dans la reconquête de l’informatique bureautique de Google auprès de Microsoft, le rival historique. Mais Google n’est pas seul dans cette quête, car il existe d’autres éditeurs indépendants qui font de même : LucidChart debuts Chrome extension, Firefox add-on for viewing and editing Microsoft Visio files. L’extension LucidChart permet également d’ouvrir et même d’éditer des fichiers Visio directement dans Google Drive (ou Google Apps).

Ouvrez et éditez des fichiers visio dans votre navigateur
Ouvrez et éditez des fichiers visio dans votre navigateur

Là encore, c’est un énorme gain de temps et surtout d’argent pour les nombreux destinataires et contributeurs occasionnels qui n’auraient plus besoin d’acquérir une licence. Autant vous dire que ça doit grincer des dents à Redmond.

Peut-on envisager de se passer définitivement du Pack Office ? Pas réellement, car il existe une masse considérable de fichiers Office dans les entreprises. Il faudra certainement 10 à 20 ans pour basculer sur un format plus ouvert et surtout pour déplacer les connaissances vers le cloud. Même si Microsoft est en train de finaliser son offre Office 365, ce type d’extension risque de leur faire une sacrée concurrence.

La prochaine étape logique devrait être de proposer un éditeur en ligne. J’anticipe une annonce ou au moins une démo lors du Google I/O du mois prochain.

]]> http://www.interfacesriches.fr/2013/04/29/tous-vos-documents-bureautique-consultables-directement-dans-votre-navigateur/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 Flash continuera d’exister, même après le départ de Kevin Lynch http://www.interfacesriches.fr/2013/03/25/flash-continuera-dexister-meme-apres-le-depart-de-kevin-lynch/ http://www.interfacesriches.fr/2013/03/25/flash-continuera-dexister-meme-apres-le-depart-de-kevin-lynch/#comments Mon, 25 Mar 2013 09:52:23 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5370 Gros remue-ménage la semaine dernière sur la planète web avec l’annonce du départ du directeur technique d’Adobe : Adobe CTO Kevin Lynch Moving to Apple. Vous ne le connaissez sûrement pas, mais Kevin Lynch est une figure emblématique chez Adobe : initialement employé par Macromedia, il a travaillé sur des projets majeurs comme Dreamweaver avant de prendre ce poste-clé chez Adobe. L’annonce de son départ ne me surprend qu’à moitié dans la mesure où la société qu’il quitte n’a plus rien à voir avec celle qu’il a connue, il devait estimer que sa mission était complétée.
Kevin Lynch chez Adobe
Kevin Lynch chez Adobe

Son arrivée prochaine chez Apple en tant que directeur technique a fait naître de nombreuses spéculations autour du portage prochain de Flash sur les terminaux mobiles d’Apple. De bien étranges spéculations dans la mesure où Flash est présent sur iOS depuis de nombreuses années, non pas dans le navigateur mais au travers de AIR. Un des plus grands succès de l’iPad (Machinarium) a par exemple été développé sous Flash. Précisons au passage que Flash n’est pas la seule technologie tierce présente sur iOS, je pense notamment à Unity utilisé entre autres pour The Room ou Temple Run 2.

Bref, tout ça pour dire que si Kevin Lynch a naturellement été un grand défenseur de Flash, son départ de Adobe ne signe pas l’arrêt de mort de cette technologie. L’essentiel de l’action de Kevin Lynch ces dernières années a ainsi porté sur la transformation des offres de l’éditeur qui sont passées d’un modèle de licence à un modèle SaaS. Cette tâche titanesque étant achevée, les offres Creative Cloud et Marketing Cloud sont disponibles sur de nombreux marchés, il va s’occuper du cloud d’Apple qui en a bien besoin.

Le départ de Kevin Lynch va en attrister plus d’un(e), mais Adobe est une grosse société qui emploie de nombreux autres talents, dont Ben Forta et notre Thibault national. Dans tous les cas, le départ d’une figure, aussi emblématique soit-elle, ne remet pas en cause la roap map d’un éditeur (Microsoft a également connu le départ de son CRO, Ray Ozzie). Flash va donc logiquement continuer son évolutionAdobe Flash Player 11.6 and AIR 3.6 now available et Google declares Flash is now ‘fully sandboxed’ in Chrome for Windows, Mac, Linux and Chrome OS.

Comma j’avais déjà eu l’occasion de l’expliquer, Flash est et aurait toujours dû être un produit de niche. Le fait est qu’avec la stagnation des spécifications HTML, la communauté s’est rabattu sur cette technologie pour proposer des expériences toujours plus différenciantes. Maintenant que HTML5 est là, Flash retrouve la place qu’il aurait dû avoir, notamment en se recentrant sur les jeux et la vidéo. Cela n’empêche bien évidemment pas Adobe de le valoriser en tant que support de créativité, comme c’est le cas au travers des Cutting Edge Projects : Adobe partners with FWA to highlight new, cutting edge Web designs every week.

Moralité : Flash continuera d’exister, au même titre que d’autres technologies propriétaires comme Quicktime, Unity ou 3DVia.

]]> http://www.interfacesriches.fr/2013/03/25/flash-continuera-dexister-meme-apres-le-depart-de-kevin-lynch/feed/ 4 L’adoption de NativeClient passera par les jeux… et la bureautique http://www.interfacesriches.fr/2013/02/25/ladoption-de-nativeclient-passera-par-les-jeux-et-la-bureautique/ http://www.interfacesriches.fr/2013/02/25/ladoption-de-nativeclient-passera-par-les-jeux-et-la-bureautique/#comments Mon, 25 Feb 2013 12:04:46 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5356 Lancé à la fin de l’année 2008 en catimini, NativeClient évolue sous le radar depuis un certain nombre d’années. Plusieurs raisons expliquent le peu de moyens déployés par Google pour communiquer sur son produit : une technologie complexe à expliquer (donc des bénéfices difficiles à appréhender pour les non-initiés) et une crainte de voir se reproduire la déroute de Google Wave, qui était pour tant un produit exceptionnel. Bref, NativeClient est la technologie “révolutionnaire” de Google dont personne ne connaît l’existence, mais les choses pourraient bien changer par le biais d’une acquisition récente.

Si j’avais été très sceptique au lancement de NaCl (Native Client, la technologie RIA de Google qui risque de faire long feu), c’est que les conditions de marché n’étaient pas très favorables et que les équipes de Google n’ont pas non plus dévoilé une feuille de route parfaitement claire et cohérente. En résumé : l’intérêt de faire tourner du code natif dans le navigateur en 2008 était plutôt limité. Impression confirmée il y a deux ans lors d’un second lancement officiel (Pourquoi Google a deux ans de retard avec Native Client). Je vous rappelle qu’à cette époque nous étions en pleine montée en puissance des terminaux mobiles et que le gain de performance promît par NaCl pour les processeurs x86 n’était encore une fois pas très vendeur (HTML5 était nettement plus sexy).

Nous sommes maintenant en 2013 et les terminaux mobiles ont envahi le monde (smartphones, tablettes, ultrabook…). Quasiment la totalité des internautes est équipée de terminaux mobiles et les utilisateurs veulent accéder aux mêmes services qu’avec leur ordinateur, ils ont donc besoin de puissance et le récent portage de NaCl sur les processeurs de famille ARM prend tout son sens (Native Client support on ARM). Grâce à NativeClient, les développeurs ont donc la possibilité de créer des applications en code natif qui exploitent directement les ressources de la machine (processeur et puce graphique) sans déperdition de puissance. La promesse est belle, mais elle est difficile à tenir, car la puissance se fait au détriment de la simplicité. En d’autres termes, il faut être talentueux et motivé pour mettre en oeuvre la technologie et profiter de ses bénéfices. D’autres éditeurs ont fait la même promesse, mais il semble que NaCl soit mieux cadré et plus rigoureux (Google Chrome Native Client compared with plugin or extension).

La stratégie de Google a donc été dans un premier temps de mobiliser la communauté des développeurs de jeux pour démontrer l’intérêt de NaCl : Games, apps and runtimes come to Native Client. Un certain nombre de jeux et démonstrations techniques sont donc sortis ces derniers mois, avec des authentiques succès comme AirMech (cf. AirMech Review).

L'interface de AirMech sous Chrome
L’interface de AirMech sous Chrome

Il existe aujourd’hui une petite vingtaine d’applications disponibles dans la galerie et les avis semblent converger : NaCl ouvre de formidables opportunités, mais requiert de gros efforts (The Ins and Outs of Native Client et The trouble with Google Chrome’s Native Client). Qu’à cela ne tienne, ils ont tout prévu : Gaikai ported to Chrome Native Client, which is a bigger deal than it sounds.

Tout ceci est très intéressant, mais les jeux en ligne sont un marché limité, même si on l’étend aux terminaux mobiles. La seconde étape du plan de Google est maintenant de s’attaquer au marché des applications d’entreprise où il y a de bien plus grosses sommes d’argent en jeu : Google Ports Quickoffice To Chrome Using Native Client, Will Get Full Editing Features In About 3 Months. L’arme secrète de Google est donc de proposer un environnement “léger” de création et d’édition de documents bureautiques exploitant la puissance de NaCl et distribué sur iOS, Android et Chrome. Autant des réalisations comme AirMech permettent de crédibiliser NaCl auprès des développeurs d’application, donc une petite audience ; autant QuickOffice est la clé d’entrée ultime de Chrome dans le monde de l’entreprise.

L'interface de QuickOffice sous Android
L’interface de QuickOffice sous Android

J’ai toujours été sceptique quant au succès de NaCl, mais son portage sur les processeurs de famille ARM (qui équipent l’ensemble des terminaux mobiles) et cette future nouvelle version de QuickOffice changent carrément la donne. Je suis persuadé que la prochaine conférence Google I/O le mois prochain sera l’occasion de donner un second souffle à NativeClient et surtout de déployer un levier de différenciation imparable. L’enjeu étant bien plus important que des jeux en ligne plus rapides (un autre article en préparation sur ce sujet).

]]> http://www.interfacesriches.fr/2013/02/25/ladoption-de-nativeclient-passera-par-les-jeux-et-la-bureautique/feed/ 1 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 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