Quel framework pour les animations en Javascript ?

J’avais publié en début d’année un article sur les CSS Animations et le fait qu’elles ne concurrençaient pas réellement les technologies RIA fondées sur un plug-in mais plutôt les framework d’animations en javascript (Pourquoi les CSS Animations ne sont pas concurrentes de Flash ou Silverlight). Le débat est relancé cette semaine avec la publication d’un article sur Six Revisions : 10 Impressive JavaScript Animation Frameworks.

L’idée de cet article est de faire le point sur 10 frameworks d’animation Javascript. Parmi les frameworks présentés, je retiens $fx (pour les soucoupes volantes) et scripty2 (pour sa démo de Solitaire). Plusieurs autres framewokrs ont été proposés dans les commentaires de l’article : script.aculo.us, jQuery, cakejs… Vous noterez qu’aucun de ces framework ne s’orthographie avec une majuscule au début (je dis ça, je dis rien).

scripty2

Comme il est question d’animations en javascript, comment ne pas parler de Chrome Experiment, le portail d’expérimentation des possibilités du moteur javascript du navigateur de Google (qui fonctionnent forcément mieux avec … Chrome).

ChromeExperiments

Cette article relance le débat sur la performance des moteurs javascript des différents navigateurs. Dans ce domaine, le vainqueur est généralement celui qui publie les résultats de sa propre étude, ici le benchmark d’Apple :

JS_Benchmark

Pourquoi est-ce que je vous parle de tout ça ? Car les animations sont un élément essentiel des interfaces : elles illustrent, focalisent l’attention et améliorent grandement l’expérience d’usage (cf. Vive les transitions !). Du moins si elles sont utilisées à bon escient, mais c’est la même chose pour toute technologie de RIA.

Ces frameworks sont donc un bon moyen d’insérer des animations dans une interface en attendant l’arrivée à maturation des CSS Animations. Le tout étant de ne pas chercher à réaliser un exploit technologique là où des technologies comme Flash sont plus appropriées.

Au final je pense que nous n’en sommes qu’au tout début d’une nouvelle ère d’innovation pour les navigateurs qui après 10 ans d’existence sont en train de se métamorphoser (cf. Opera 10, Chrome 4, Firefox 4 : Vers des plateformes sociales et applicatives). Faire évoluer les technologies de base des navigateurs (HTML, CSS, Javascript) est un préambule indispensable, encore faut-il que cela se fasse dans la voie de la standardisation. Dans cette optique, des frameworks open source et largement rependus comme jQuery sont peut-être un choix plus pérene. Mais n’étant pas un spécialiste, je suis ouvert à toute argumentation à ce sujet (ça tombe bien les commentaires sont là pour ça).

Une nouvelle cartographie des univers virtuels

Après ma cartographie datant de 2007, celle de Kzero de 2008, c’est l’agence Odomia qui nous propose sur son blog une nouvelle cartographie des univers virtuels : Le réseau des mondes virtuels.

Virtual Worlds Map 2009 - V1

Une cartographie visuellement intéressante car elle reprend le look & feel des plan de métro comme le propose les japonais de la Web Trend Map. Nous retrouvons ainsi sur cette carte différentes lignes : les univers marchands, de marque, les mondes miroirs, les mondes « sociaux », les univers orienté « sport », les MMORPG… qui sont autant de types. Tout l’intérêt de cette carte n’est pas tant de recenser les univers (car il en manque un bon paquet) mais plutôt de voir les zones de recoupement (les intersections).

Le lisibilité de la carte est pour le moment très mauvaise mais d’après les commentaires, une nouvelle version est en cours d’édition…

(via Metaverse3D)

Ils sont fous ces japonais N°2

Je fais suite à un précédent billet sur les boutiques en ligne japonaises les plus folles pour vous présenter deux concept stores en ligne qui valent le détour.

Il y a tout d’abord Tutuanna, une boutique ne ligne très kawaï qui vend des t-shirts et sous-vêtements. L’interface se présente sous la forme d’une large mosaïque de produits avec des options de recherche visuelle réparties sur deux bandes latérales. Sur l’exemple ci-dessous, la recherche se fait sur des chaussettes et t-shirts bleus (les pictos sont « allumés ») :

tutuanna1

Il y a également la possibilité de filtrer les produits en fonction de motifs sur la bande latérale droite (ici uniquement les produits avec des rayures) :

tutuanna2

Autant dire que l’ambiance japonisante de cette boutique (avec des coeurs partout et une musique façon manga) ne doit plaire qu’aux japonais, mais tout de même, il doit bien y avoir quelques idées à prendre.

Deuxième exemple beaucoup plus radical avec Qbic, une boutique d’objets d’art qui propose une interface de recherche visuelle sous forme de diagramme (une sorte de Yahoo! Pipes du e-commerce). Le principe est de raccorder des pictos (qui sont autant de filtres : par prix, artistes…) entre-eux afin de former une équation de recherche :

Qbic

Chaque flux de recherche se termine par un mini-browser où l’on peut voir les résultats, les produits peuvent ensuite être ajoutés au panier (sur le bas de la page). S’il existe des contenus additionnels (ici l’interview de deux créateurs), une boîte supplémentaire est affichée et reliée au produit correspondant.

Bon OK c’est très certainement le moteur de recherche le plus complexe qu’il m’est été donné de voir ces 10 dernières années, mais l’expérience est saisissante. Bref, une très bonne façon pour se démarquer dans un marché visiblement ultra-compétitif.

(via Hebi flux)

Reactable, quand la musique devient tactile et visuelle

J’ai eu la chance d’assister cet après-midi à une démonstration de la Reactbale. Il s’agit d’un instrument de musique électro-acoustique créé conjointement par le Music Technology Group et l’université Pompeu Fabra de Barcelone. La particularité de la Reactable est de proposer une interface tangible pour un usage à mi-chemin entre la table Surface de Microsoft et la GrooveBox de Roland.

Reactable1

Le principe est de créer des mélodies (ou des arrangements mélodiques) à l’aide de petites plaquettes en plastique ayant différentes propriétés :

  • Les plaquettes carrées produisent des sons ;
  • Les plaquettes carrées à coins arrondis servent de filtres ;
  • Les plaquettes rondes servent d’ondulateurs ;
  • Les plaquettes en forme d’étoile changent les paramètres du tempo général ;
  • Les blocs produisent des séquences…

Lorsque vous déposez une plaquette sur la table, elle est reconnue grâce à une caméra optique et commence à interagir avec les autres plaquettes. Là où ça devient intéressant, c’est qu’il est possible de moduler les sons en fonction de l’orientation et de la proximité des plaquettes. Des curseurs projetés autour de chaque plaquette permettent également de modifier le comportement de ces dernières, comportement qui est représenté par une oscillation sur la table (pour certain son cela ressemble à une onde, pour d’autres à des impulsions).

Voici une courte vidéo qui illustre mieux le fonctionnement :

Le promoteurs présentent la Reactable comme un instrument collaboratif (plusieurs personnes peuvent « jouer » dessus en même temps, très intuitif et évolutif (il convient aussi bien aux novices qui bidouillent qu’aux musiciens professionnels qui font des arrangements complexes).

Reactable2

Du point de vue de l’intuitivité, je dois reconnaître l’incroyable facilité de prise en main de la table : il suffit de poser les plaquettes carrées pour produire des sons, de les associer avec des filtres et de faire varier les réglages. Il y a de plus une dimension pédagogique non-négligeable puisque la représentation visuelle des sons permet de mieux appréhender des concepts comme la fréquence ou l’amplitude.

Les universitaires associés au projet y voient également un moyen de faire comprendre les sons aux enfants (et notamment aux bébés) ainsi que les interactions.

Bien évidément il n’est pas question de mettre ça en pratique dans votre site web dès demain (quoi que… Auditorium est fondé sur un principe assez proche), mais je trouve cette innovation particulièrement inspirante (inspirationnelle ?). Il existe un équivalent en Flash chez OrganeLabo mais connaissez-vous d’autres exemples d’interfaces similaires ?

MàJ (06/07/2009) : On me signale l’existence des AudioCubes qui ont un principe de fonctionnement similaire (interactions entre cubes) et qui utilisent des senseurs de proximité : Making loops with single AudioCube.

Résumé des comptes-rendus de la conférence E2.0 de Boston

Voilà, la grande messe annuelle de l’Entreprise 2.0 à Boston s’est achevée en fin de semaine dernière (comme Michael J.) et il est largement temps de faire un premier résumé des comptes-rendus et impressions de personnes ayant eu la chance d’y participer :

Voici les points clés et mes commentaires :

  • L’Entreprise 2.0 est encore vu par certains comme un phénomène de mode (étrange, le nom va peut-être passer mais les pratiques resteront, du moins j’en suis persuadé) ;
  • Microsoft possèdent encore (et toujours) une force de frappe terrifiante avec la suite SharePoint vis à vis d’éditeurs beaucoup plus petits (effectivement, je rencontre régulièrement des clients avec une licence SharePoint qu’ils sont obligés d’utiliser – « The reality is no one got fired for buying Microsoft« ) ;
  • IBM reste dans l’ombre (quel dommage car il y a un potentiel gigantesque derrière Lotus Live mais ils ne savent pas bien le mettre en valeur, du moins en France – cf. IBM lance une plateforme sociale de collaboration en ligne) ;
  • Les tableaux de bord sont à la mode (tous les éditeurs propose leur solution de personalized dashboard car ils sont à la fois utiles, sexy et très vendeurs – cf. Vive les tableaux de bord en ligne !) ;
  • Le microblog est partout, visiblement tout le monde y est allez de sa petite démonstration et de son éloge sur Twitter (je suis plus que sceptique car les pratiques de micro-blogging sont plus qu’anecdotiques en France et parce qu’elles requiert une masse critique avant d’être vraiment intéressantes) ;
  • Les outils ne sont pas un objectif mais un moyen, implémanter des blogs ou wikis internes ne suffira pas à faire naître une dynamique de collaboration active, il faut faire évoluer les mentalités et les habitudes de travail en meêm temps :
  • Il y a de très fortes opportunités à saisir dans les applications mobile, ceci est d’autant plus vrai avec le déploiment massif de smartphones.

L’emballement généralisé autour de Twitter ne me surprend qu’à moitié mais me laisse perplexe. J’y vois plus pour les éditeurs un moyen de ne pas paraître largués (surtout vis à vis du rapport très particulier des blogueurs / leaders d’opinion avec Twitter) que d’une réelle réflexion à long terme. Je pratique Twitter depuis plus de 2 ans et je suis intimement persuadé que déployer une solution de microblog en entreprise sans un minimum de pédagogie est un projet voué à l’échec. D’autant plus qu’il y a des chantiers bien plus intéressants à mener (se libérer de l’emprise des fichiers, déployer un réseau social interne…) plutôt que s’embarquer dans cette utopie de Real-Time Enterprise. Utopie ? Oui tout à fait : je rencontre au quotidien bon nombre d’entreprise confrontées à d’énormes réticences vis à vis du partage entre collaborateurs, alors de là à faire du partage en temps réel… De plus, avant de faire de la veille en temps réelle, il faut d’abord savoir faire une veille traditionnelle efficace (et notamment mettre ne place l’organisation qui va agréger / digérer / traduire et transformer cette masse d’informations en alignements de la stratégie de l’entreprise).

Pour en revenir à cette conférence, je suis enfin très étonné de na pas avoir lu de mentions de Google Wave, peut-être le marché est-il encore en attente de tester la bête avant de se prononcer… Il faut dire que les accès à la version pré-alpha sont plus que dures à trouver.