CSS3 et javascript seront-elles les technologies RIA du future ?

L’idée d’associer les interfaces riches à javascript peut vous sembler banale, mais je rappelle pour certain(e)s que l’époque du web pre-Ajax n’est pas si éloignée de nous (à peine 5 ans). Bref, tout ça pour dire qu’avec les dernières générations de navigateurs (Chrome, Firefox, Safari…) les améliorations apportées aux moteurs de rendu CSS ainsi qu’au moteurs javascript remettent en cause une partie des usages de technologies RIA que l’on croyait immuables, et plus particulièrement Flash.

Autant Flash reste la technologie de référence pour tout ce qui est animation vectorielle et manipulation de vidéos / sons, autant pour des usages plus basiques la question se pose… Elle se pose notamment chez Youtube, Dailymotion et Vimeo qui expérimentent tous les trois des lecteurs vidéo en HTML5. Et ce n’est que le début !

Prenons par exemple les techniques de remplacement d’image, elles deviennent obsolètes avec @font-face : Using @font-face.

Bien évidemment nous aurons toujours besoin de Flash, Silverlight et cie pour des interfaces véritablement riches, mais pour faire de petits enrichissements “locaux”, CSS3 va nous permettre de faire des choses tout à fait intéressantes comme en témoigne le dernier article de Smashing Magazine : The New Hotness: Using CSS3 Visual Effects. C’est ainsi un festival d’exemples comme ces boutons lumineux (Radioactive buttons) :

Des boutons qui flashent avec... CSS3
Des boutons qui flashent avec... CSS3

Mais aussi des petits effets de zoom comme ces simili polaroids :

Superbe galerie avec CSS3
Superbe galerie avec CSS3

Ou encore ces très beaux dégradés assortis d’animations (sliding vinyl) :

Animations et dégradés avec CSS3
Animations et dégradés avec CSS3

Et puisque l’on parle d’animations, il serait aussi possible de les utiliser pour des menus de navigation (Nicer Navigation with CSS Transitions) ou des effets de zoom : Make An Elastic Thumbnail Menu. Plus d’exemples ici : 45 Powerful CSS/JavaScript-Techniques.

Un menu en fish-eye avec CSS3
Un menu en fish-eye avec CSS3

Il serait même possible d’aller beaucoup plus loin comme nous le prouve les différentes expérimentations présentées sur Chrome Experiment dont l’incroyable jeu Crystal Galaxy :

Un shoot-them-up en javascript et HTML5
Un shoot-them-up en javascript et HTML5

Tout ceci est très encourageant, mais ne sera viable que dans quelques années quand ces navigateurs de nouvelle génération se seront répandus. Comptez ainsi 5 à 6 ans avant qu’IE 8 et ses prédécesseurs soient sur le déclin et que le marché se sente prêt à tourner la page. Cette période étant bien sûr sujette à une petite rallonge de quelques années si Microsoft décide de ne pas intégrer HTML5 et CSS3 à IE 9 (fort probable).

Le plus surprenant dans cette histoire (navrante) c’est que nous pourrions commencer à exploiter HTML5 et CSS3 très prochainement, non pas dans le navigateur mais en dehors : Adobe AIR 2 brings Advanced CSS3 Support to the Desktop. Et oui, car la prochaine version de AIR embarquera un moteur de rendu HTML de dernière génération qui bénéficiera de toutes ces avancées.

Comme c’est ironique : Utiliser une technologie Adobe pour faire mûrir les usages d’alternatives technologiques à Flash. Méditons là-dessus…

Touchbook ou projecteur intelligent ? Quels atouts pour le visionnement des interfaces riches ?

J’ai récemment découvert que la société  Light Blue Optics a annoncé l’arrivée d’un projecteur intelligent qui projette une interface tactile sur n’importe quel support plat ( À voir pour la couleur de la surface ).  Rapidement, j’ai fait le lien avec l’arrivée du Touchbook.

Je me demandais laquelle des deux technologies sera la préférée des utilisateurs et surtout quels seront les atouts pour le visionnement des interfaces riches.

En ce qui me concerne je crois que le projecteur intelligent est très intéressant pour les présentations professionnelles et que le touchbook gagne pour ce qui est de jouer à des jeux qui demande des mouvements particuliers. L’expérience utilisateur procurée sur ce dernier est plus riche.

LT3_480x276LT4_480x276

Votre avis ?

Source photos et article  : Arnaud Meunier

Les jeux Point and Click vont-ils revenir à la mode ?

En ce moment ce sont surtout les social games et les Rich Internet Games qui sont sur le devant de la scène, mais il y a une catégorie de jeux en ligne qui pourrait bien faire un come back fracassant en 2010 : les point and click games. Apparus il y a presque une trentaine d’année sur les ordinateurs 8 bits, la particularité de ces jeux étaient de proposer  une ambiance très immersive et un gameplay avant tout fondé sur l’observation et la manipulation d’objets. Certaines choisissaient de tout miser sur le graphisme (comme le mythique Myst), d’autres sur l’humour (comme le non moins mythique Leasure Suit Larry).

Depuis ces jeux sont passés de mode et se sont fait complètement largués par les simulations sportives, FPS et autres MMORPG. Oui mais voilà, il semblerait que nous ayons atteint un pic de réalisme dans les jeux et que certains joueurs de l’époque (dont je fais parti) aient la nostalgie des jeux privilégiant la qualité de la création artistique (au détriment du réalisme) et de la narration. Mélangez tout cela à de nouveaux canaux de distribution comme l’iPhone et vous obtenez de très bonnes conditions de marché pour donner une seconde vie aux point and click games.

Illustration avec le grand retour de Secrets of Monkey Island sur iPhone :

monkey.island.iphone

Il y a aussi des spécialistes comme Big Fish qui proposent tout une série de Hidden Object Games :

Dark Tales disponible chez Big Fish Games
Dark Tales disponible chez Big Fish Games

Ces jeux peuvent être testés en ligne mais sont limités car la version complète est payante et téléchargeable. Une mécanique bien huilée mais qui manque un peu d’âme (les jeux sont produits à un rythme industriel et se ressemblent tous plus ou moins).

Je vous propose donc de découvrir un jeu beaucoup plus intéressant : Machinarium. Le gameplay est le même mais le travail réalisé sur l’ambiance graphique et sonore ainsi que le story-telling est tout à fait remarquable :

L'univers graphique dégantée de Machinarium
L'univers graphique dégantée de Machinarium

Il est possible de jouer à la démo en ligne mais la version complète doit être achetée et téléchargée.

Les superbes décors de Machinarium
Les superbes décors de Machinarium

(via Tapahont)

Vous pourriez me dire que les jeux à télécharger n’ont rien de révolutionnaires, et vous auriez bien raison. Par contre se sont les conditions de marché qui ont changées : Avec la déferlante des netbooks, ce sont des millions de machines qui pourraient être ciblées par ces jeux, car ces dernières sont incapables de faire tourner des jeux plus lourds (avec de la 3D en temps réel). bon OK il y a bien eu cette démo technique au dernier CES (Tegra 2 runs Unreal Engine 3, puts high-end console 3D graphics in your pocket), mais ce n’est pas très sérieux de vouloir faire tourner un FPS sur un netbook.

Notez qu’il existe aussi d’autres plug-ins qui pourraient faire tourner des jeux de très bonne facture dans le navigateur, notamment le Unity Player qui propulse les jeux de Lego : Unity Powers 3D Lego Star Wars Browser Game.

Et ce n’est qu’un début puisqu’avec l’Open Screen Project, le lecteur Flash sera disponible sur de nombreux smartphones en 2010 : Flash Player bientôt disponible sur les smartphones Android. Autant de terminaux qui rentrent dans la poche et sont les compagnons de tous les jours de millions de trentenaires et quarantenaires qui ne demandent qu’à replonger dans les mécaniques de jeux de leur enfance, à l’image de ce portage de Maniac Mansion : Maniac Mansion 3D Remake.

Le remake de Maniac Mansion en Flash
Le remake de Maniac Mansion en Flash

Démo vidéo disponible ici :

(via Tapahont)

Netbooks, smartphones… il ne manque plus qu’un seul type de terminal à cibler : les touchbooks. Hé oui, car quand vous y réfléchissez bien les jeux en Flash qui fonctionnent sur le principe d’écrans à découvrir en cliquant un peu partout sont les candidats idéals pour venir apporter une dimension ludique aux touchbooks. Pour le moment le marché est embryonnaire, mais nous feront le point dans un mois ou deux quand la tablet d’Apple sera sortie et que le grand public découvrira le potentiel derrière ces machines.

Et tant que nous sommes dans le recyclage des jeux rétro sur des machines de nouvelle génération, nous pourrions-nous pas envisager un retour des jeux d’aventure textuels sur les ebooks ? Pourquoi pas des jeux du type Zork ou Les livres dont vous êtes le héros… Encore une fois je vous propose d’attendre quelques mois que les usages se développent.

Flash Player bientôt disponible sur les smartphones Android

Depuis le temps que l’on attend ça, Flash sera bientôt entièrement supporté sur le tout nouveau téléphone de Google : Flash Player 10.1 coming to Google Nexus One. C’est une très bonne nouvelle de pouvoir enfin bénéficier d’une version complète de Flash en situation de mobilité (c’est l’objectif annoncé de l’Open Screen Project) mais cela ne concerne pour le moment que le Nexus One de Google.

Du vrai Flash sur le Nexus One
Du vrai Flash sur le Nexus One

Réaliser un portage complet du Falsh Player sur un terminal mobile est en effet un gros chantier et il va falloir encore de nombreux mois de travail pour que ce chantier mobilisant les équipes d’Adobe, deGoogle et de Qualcomm soit finalisé. D’autres terminaux devraient suivre mais les sorties vont se faire au compte-goutte : Flash Player 10.1 coming to Motorola Droid et Flash Player 10.1 coming to Palm Pre.

Les premières expérimentations ont l’air concluantes (cf. Flash Player 10.1 public prerelease demos and interviews) et le player semble très réactif comme ici sur cette vidéo :

C’est une très bonne nouvelle pour l’industrie et surtout pour les utilisateurs qui vont pouvoir bénéficier de la très large palette de contenus Flash (vidéos, jeux…) sans subir la restriction d’un constructeur (vous voyez de qui je veux parler). Reste à voir dans quelle mesure la disponibilité de tous ces contenus ne va pas venir parasiter les sources de revenus comme ça peut être le cas pour le Palm Pre qui débute la commercialisation de jeux : 3D Gaming Comes to the Palm Pre.

(via Ryan Stewart)

Quelles interfaces pour les touchbooks ?

Je pense que les avis convergent pour prédire que 2010 sera l’année de l’explosion des touchbooks (autrement appelés “tablet PC” mais le “PC” peut prêter à confusion). Entre les différents produits déjà lancé en 2009 (cf. Netbook + TabletPC = Touchbook, et le web devient tactile) et les rumeurs de futurs machines chez Apple et Google, le marché est en ébulition.

Mais qui dit nouvelles machines, dit nouveaux services et surtout nouvelles interfaces. Car n’oublions pas que l’interface est un élément clé dans l’adoption et le succès d’une innovation technologique (cf. l’iPhone qui a révolutionné le marché). Je souhaiterais donc partager avec vous les différents concepts d’interfaces déjà proposés par certains.

Commençons avec la ces particulier des magazines papier “portés” sur support numérique comme cette démonstration technologique de Condé Nast, l’éditeur de nombreux magazines US (dont Wired), qui devraient être disponible sur la tablet d’Apple : Condé Nast’s Offering for Apple’s Mystery Tablet: Wired Magazine.

Il y a ensuite cette très belle illustration d’un magazine de sport en version électronique (Time Inc. shows off magazine tablet demo) :

Votre magazine de sport en versino électronique et tactile
Votre magazine de sport en version électronique et tactile

Le texte et les images occupent donc toute la surface d’affichage avec un menu radial qui est affiché en tapotant l’écran. Démonstration vidéo ici :

Plus futuriste mais nettement plus impressionnant, le Mag+ de l’éditeur suédois Bonnier (Bonnier Takes A Stab At Re-Inventing The Mag) :

Concept futuriste de touchbook
Concept futuriste de touchbook

À découvrir en vidéo ici :

Il y a aussi le grand retour de l’OLPC (l’ordinateur à 100$) qui pourrait bien faire un retour en force avec une machine de troisième génération à la sauce touchscreen (OLPC Comes Up With a Beautiful, Thin Tablet Concept) :

Evolution de l'OLPC en touchscreen
Evolution de l'OLPC en touchscreen

Pour finir n’oublions pas le brevet déposer par Apple pour un écran à retour de force (Possible Apple tablet multi-touch tactile keyboard detailed) un concept dont j’avais déjà parlé dans un précédent billet (Interfaces en relief et crayonnage 3D) :

L'écran en relief d'Apple
L'écran en relief d'Apple

Donc comme vous pouvez le constater c’est un véritable festival d’innovations en tout genre pour les différents constructeurs et éditeurs qui semblent prêt à se lancer dans une course à l’armement autour de ce nouveau format (les touchbooks).

Tout ceci n’est-il pas un peu précipité ? Si, bien sûr que si dans la mesure où les ordinateurs à écran tactile existent déjà depuis de nombreuses années et où un système d’exploitation comme Windows 7 intègre maintenant de façon plus fine la gestion du multitouch. Le frein à l’adoption se situe donc bien du côté du logiciel plutôt que du côté du hardware ou des services. Comprenez par là que les machines sont prêtes, mais que les interfaces permettant de “consommer” de l’information et des services sont encore à inventer. Et sur ce point précis, c’est Adobe qui semble le mieux placé. Pourquoi ? Tout simplement parce que les interfaces tactiles vont littéralement inonder le marché et qu’il va falloir gérer de nombreux terminaux et systèmes d’exploitation. Ors, c’est justement pour palier à ce défi que AIR a été conçu.

D’autant plus que AIR est une technologie qui a fait ses preuves avec le Times Reader qui pourrait donc s’imposer comme la référence de facto de la presse en ligne qu’il faudrait “juste” adapter aux écrans tactiles, dont le iSlate d’Apple qui sera le premier à sortir sur le marché. Oui mais voilà, le torchon brule entre Adobe et Apple (notamment en ce qui concerne le portage de Flash sur l’iPhone ou les problèmes de performance du dernier Flash Player sur Mac OS). Il se pourrait donc que nous soyons à l’aube d’une belle bataille entre Apple et le reste de l’industrie soutenue par Adobe (Can Adobe and Apple Play Nicely When–And If–The Tablet Shows Up?).

Pour résumer une longue histoire, je suis intimement persuadé qu’une partie du succès de ces touchbooks va reposer sur leur capacité à proposer une expérience enrichissante de consommation d’informations et de services à valeur ajoutée. Tout comme il existe des applications mobiles payantes pour smartphones éditées par les grands journaux, attendez-vous à voir fleurir des offres équivalentes adaptées au format des touchbooks dans différents domaines (news, sport, cuisine…). L’innovation dans ce domaine a toutes les chances d’être passionnante, notamment dans le commerce en ligne.

Réalité augmentée avec Silverlight 4 (et Unity 3D)

La réalité augmentée n’est pas un sujet tout neuf, pourtant l’année 2009 aura été décisive pour les applications “marketing et business” de la réalité augmentée domestique (cf. 10 Awesome Uses of Augmented Reality Marketing et Tracking brands in Augmented Reality). J’ai déjà eu de nombreuses occasions de vous parler d’applications réalisées avec Flash, il est donc maintenant temps de vous parler de celles réalisées avec Silverlight : Silverlight 4 Augmented Reality Proof Of Concept.

L’astuce est d’utiliser NyARToolkitCS (un dérivé de la librairie ARToolkit) ainsi que l’API webcam de Silverlight 4 (cf. Accessing Web Camera and Microphone).

Mieux, l’auteur de cette première expérimentation nous en propose une autre avec de la 3D en temps réel : Real Time 3D Augmented Reality with Silverlight.

Donc comme le dit si bien Galdric : “Réalité augmentée en Silverlight 4 : ça c’est fait“. Attendons maintenant de voir de meilleures performances avec la version définitive de Silverlight 4. Et puisque l’on parle de meilleures performances, saviez-vous qu’il était possible de combiner Flash, réalité augmentée et Unity3D (Flash pour la capture et Unity3D pour le rendu 3D) : Unity3D + FlarToolkit = … hein ?!.

Bon… il semblerait donc que la prochaine étape soit de faire de la réalité augmentée sans plug-in avec HTML5 et WebGL.

De la 3D à toutes les sauces pour 2010 ?

J’ai comme l’impression que 2010 sera l’année de la 3D (ou peut-être bien 2011 le temps que les technologies murissent). Vous pouvez d’ors et déjà expérimenter de la 3D “nouvelle génération” dans vos salles de cinéma avec le film Avatar, mais vous pourrez bientôt en bénéficier chez vous avec l’arrivée de la 3D sur les disques Blu-Ray (3D high-def movies coming to your living room on Blu-ray) et sur les moniteurs (LG Unveils Full HD 3D Monitor) ou les équipements équipés de technologies comme 3Ddisplay.

Plus proche de nos domaines de préoccupation, les applications et sites web, nous allons commencer à voir des choses tout à fait intéressantes avec notamment ce brevet déposé par Apple pour une technologie mélangeant capture et affichage 3D : Apple Working on 3D ‘Hyper-Reality’ Displays.

L’idée est de pouvoir manipuler des contenus 3D sans avoir recours à des périphériques comme le SpaceNavigator en utilisant votre webcam. Dans l’exemple qui suit, il suffit ainsi de se pencher pour faire pivoter le graphique :

Déplacez des objets 3D avec votre webcam
Déplacez des objets 3D avec votre webcam

Plus intéressant, cette technologie peut également servir à mieux s’y retrouver dans vos fenêtres en décalant votre perspective :

Mieux gérer vos fenêtres avec votre webcam
Mieux gérer vos fenêtres avec votre webcam

Une application fort utile car ne nécessitant pas d’apprentissage (elle reproduit un comportement de tous les jours).

Dans un registre plus terre-à-terre, et pour faire écho à la récente publication des spécifications de WebGL (WebGL draft published, Khronos seeks community involvement), nous commençons à voir des expérimentations d’applications en 3D temps réel dans le navigateur comme ici avec Cube Defense :

Un jeu de tower defense dans votre navigateur avec WebGL
Un jeu de tower defense dans votre navigateur avec WebGL

Rien de révolutionnaire, si ce n’est le fait que cette application ne nécessite aucun plug-in (juste un navigateur compatible). Démonstration vidéo ici (via 3D Test) :

Terminons cette série avec la “3D du pauvre” (n’y voyez rien de péjoratif) réalisée uniquement en CSS : CSS 3D Meninas. L’astuce est de simuler une profondeur de champ avec le mouvement de la souris :

Les CSS au secours de la 3D
Les CSS au secours de la 3D

En déplaçant la souris sur la droite de l’image, vous déplacez les différents éléments du tableau :

re
Les CSS au secours de la 3D

Les explications sont ici : De la fausse 3D à l’aide de CSS3.

Ces différents exemples ne sont pas directement liés, mais ils illustrent une tendance de fond qui va monter en puissance l’année prochaine. Ça à commencé au cinéma, ça va arriver sur votre TV et votre ordinateur, la prochaine étape sera votre mobile : 3-D Untethered: A Look at Mobile 3-D Technology. À suivre…

Auto-apprentissage en vidéo et ralentis audio sur EnglishCentral

Connaissez-vous EnglishCentral ? Il s’agit d’un service en ligne d’auto-apprentissage de l’anglais. En gros ils proposent des vidéos d’actualité avec sous-titres, chapitrage et exercices :

Le player vidéo d'EnglishCentral
Le player vidéo d'EnglishCentral et son chapitrage

Le player vidéo est plutôt bien fait avec une timeline chapitrée, un fonction text-to-speech au survol de la souris sur les sous-titres et la possibilité de s’exercer en enregistrant sa voix à chaque phrase (ce qui permet de gagner des points).

Mais le plus intéressant est cette incroyable fonction de playback audio ralenti de la phrase entière :

Le playback audio en ralenti
Le playback audio en ralenti

En cliquant sur le lien “Hear line slowed down“, vous pouvez réécouter la phrase à une vitesse deux fois moindre sans toutefois altérer la qualité sonore ou le rythme. Je ne sais pas trop comment ils font ça (certainement en échantillonnant et en dupliquant des boucles d’1/10 de seconde) mais le résultat est stupéfiant.

Qui pourrait me dire s’il existe des technologies ou des composants Flash pour faire quelque chose d’équivalent ?

Une bande annonce interactive pour Avatar

Alors qu’il reste un peu moins d’un mois à attendre pour découvrir Avatar, le dernier film de James Cameron, je vous propose de vous plonger un peu plus en détail dans l’univers très riche du film (lire à ce sujet l’article de Wired) avec leur toute nouvelle bande annonce interactive : Official Avatar Interactive Trailer Powered by Adobe AIR. Il s’agit en fait d’une application propulsée par AIR qui vous permet de lire une bande annonce “augmentée” de nombreux détails sur les personnages ou les équipements du film :

La bande annonce interactive de Avatar
La bande annonce interactive de Avatar

Bon OK ce n’est pas vraiment le premier film interactif, mais je trouve que de repackager la bande annonce avec des “hot spots” et tout un tas de news en provenance de Twitter, YouTube, FlickR… est plutôt une bonne idée. Disons que l’ensemble est très efficace, idéal pour faire patienter les fans. Et pour celles et ceux que ça branche, ne ratez sou aucun prétexte le site dédié aux produits dérivés du film et notamment les cartes en réalité augmentée : Avatar i-Tag.

(via Mashable)

Nouvelles versions pour Flash, AIR et Silverlight

Sur ce coup là j’ai carrément un train de retard, c’est inacceptable car en une semaine ce ne sont pas une mais trois nouvelles versions de technologies RIA / RDA qui viennent d’être annoncées.

Commençons par Adobe avec les sorties en beta de Flash 10.1 et de AIR 2.0 : AIR 2 and Flash Player 10.1 Betas now Available.

Au programme des nouveautés pour Flash 10.1 :

  • Prise en charge du multi-touch ;
  • Gains de performance ;
  • Disponibilité prochaine sur des terminaux mobiles comme le Palm Pre (cf. Full Adobe Flash Is Coming Soon to Mobile) ;
  • Grosse amélioration de la gestion de la mémoire.
Meilleure gestion de la mémoire avec Flash 10.1
Meilleure gestion de la mémoire avec Flash 10.1

Concernant AIR 2.0, voici les nouveautés :

  • Prise en charge des périphériques de stockage et du hardware (micro, webcam…) ;
  • Possibilité d’accéder aux commandes natives ;
  • Prise en charge du multi-touch et des commandes gestuelles ;
  • Mise à jour du moteur de rendu pour une meilleure gestion du HTML 5 / CSS 3…

Pour plus de détails ça se passe ici : Introducing Adobe AIR 2 beta.

Du côté de chez Microsoft, ils viennent tout juste d’annoncer la beta de Silvelright 4 lors de la Professional Developers Conference 2009. Voici les nouveautés :

  • Prise en charge complète de l’impression ;
  • De nouveaux éléments de formulaire (Rich Texbox with links…) ;
  • amélioration de la fluidité de l’interface et des effets proposés ;
  • Support de la webcam, du micro, du clic droit et de la molette dela souris ;
  • Copier / Coller depuis le clipboard ;
  • Fonctionne dans Google Chrome ;
  • Des applications deux fois plus rapides au démarrage (mais pas forcément à l’exécution ?) ;
  • Accès aux répertoires utilisateurs (“Mes documents, “Ma musique”…)…

C’est sur ce dernier point que Microsoft dévoile ses réelles intentions quand à cette nouvelle version de Silverlight : concurrencer à la fois Flash et AIR. Il sera ainsi possible d’installer des simili-applications sur votre bureau (ils appellent ça des client apps) pour pouvoir contourner les limitations du navigateur (et notamment la sandbox qui l’isole du système). Autant dire que cette possibilité change complètement la donne : Silverlight Four Is Going To Be Huge.

Illustration avec SilverFace, une Rich Desktop Application conçu avec le SDK de Facebook :

Silverlight + Facebook = SilverFace
Silverlight + Facebook = SilverFace

Pour résumer : ça ressemble à une application, ça se comporte comme une application et c’est du 100% Facebook (plus d’infos ici : Silverlight 4 In Beta, Screenshots of Facebook Desktop App et The Windows Platform, Silverlight 4, and Facebook.

Wow, que de nouveautés et de très très grosses ambitions pour Adobe et Microsoft qui semblent bien avoir décidé de se prendre de vitesse l’un comme l’autre. Pour le moment il ne s’agit que de versions beta, il reste encore à stabiliser tout ça, mais je pressens que 2010 va être l’année où la frontière entre service en ligne et application va disparaitre.