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.jpg
Un solitaire tout en javascript

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.jpg
Les expérimentations d'animations en javascript chez Google

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.jpg
Comparaison des moteurs javascript des différents navigateurs

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

Dexu très belles réalisations pour Got Milk

Got Milk? est une vaste campagne lancée par la filière laitière US afin d’inciter les jeunes à consommer plus de lait. Qui dit “jeunes” dit “sites de jeunes”. Je souhaiterais donc vous présenter ce matin deux très belles réalisations de cette campagne.

Il y a tout d’abord le site principal Got Milk? qui propose une interface exploratoire très originale :

GotMilk_home.jpg
La page d'accueil de Got Milk?

Cette scène est animée et sonorisée de façon à bien concentrer l’attention des internautes. En cliquant sur les différents animaux vous accédez à des mini-jeux :

GotMilk_Game.jpg
Un mini-jeu dans Got Milk?

L’idée est de mettre en scène les qualités nutritive du lait. Autre exemple ici :

GotMilk_Game2.jpg
Un autre mini-jeu dans Got Milk?

À chaque fois la réalisation est très soignée et le look & feel particulièrement original.

Autre réalisation avec Brittlelactica (pas tout à fait lancée il me semble). Cette campagne met en scène un système solaire où les habitants souffrent de graves carences alimentaires (normal, ils ne boivent pas de lait) :

Brittlelactica_System.jpg
Le système solaire de Brittlelactica

En cliquant sur la planète principale (Brittlelactica), vous pouvez accéder à son histoire set surtout aux quatres factions qui règnent sur la planète (ici, l’impératrice des Papau Hairthinny) :

Brittlelactica_Planet.jpg
Une des factions vivant sur Brittlelactica

Chacune des ces factions est en lutte pour dominer cette planète et envoient ainsi une expédition sur Terre pour connaître le secret de la bonne santé de ses habitants (nous). Les aventures de ce corps expéditionnaire sont à suivre dans une série de vidéos :

Brittlelactica_Video.jpg
Les vidéos disponibles sur le site Brittlelactica

L’expédition en question a même réussi à capturer et ramener un spécimen de vache terrienne avec laquelle ils essayent de communiquer au travers de cette interface :

Brittlelactica_Dairy.jpg
L'interface qui permet de dialoguer avec une vache

Il y a donc de très claires références aux séries SF comme Battlestar Galactica mais je ne peux qu’applaudir la qualité de la réalisation et l’originalité de l’histoire.

Pour résumer : des interfaces riches au service d’ambiances très réussies pour un branding performant. Du grand art de la part de l’agence North Kingdom dont j’ai déjà parlé de nombreuses réalisations (et notament le fameux Vodafone Future Vision).

200 millions d’installations pour Adobe AIR

Voilà moins d’un an et demi que la technologie de Rich Desktop Application d’Adobe est sortie et AIR a déjà dépassé les 200 millions d’installations : Adobe AIR now installed over 200 millions times. Un nombre tout à fait intéressant, surtout lorsque l’on sait que le rythme d’installation accélère (100 millions sur les 6 derniers mois).

Bien évidement les utilisateurs n’installent pas AIR pour le plaisir ou l’exploit technique, ce sont donc les applications qui tirent le déploiement. Au palmarès des applications les plus populaires nous retrouvons le pionnier eBay Desktop ainsi que les social softwares comme TweetDeck ou Seesmic Desktop.

ebay_desktop.jpg
La version desktop d'eBay

Il y a également les applications proposées par les médias traditionnels comme le BBC iPlayer ou le NYTimes Reader.

TimesReader.jpg
Le NY Times sur votre bureau

On retrouve enfin des applications plus “critiques” comme SocialTexet Desktop ou celles exploitant des ERP (SalesForce, Oracle ou SAP) ou encore cette assistant pour payer ces impôts en ligne en Pologne.

Socialtext_desktop.jpg
La version desktop de SocialText

Autre application critique, cette incroyable interface servant à piloter un robot de combat :

gator.jpg
L'interface de pilotage d'un robot de combat

Pour la petite histoire, le robot en question tourne sous Linux et embarque une mitrailleuse de calibre 50, elle se pilote à l’aide d’une manette de Xbox 360 (les jeunes recrues y étant particulièrement bien habituées). Plus d’infos ici : Adobe AIR driving the military of tomorrow.

Outre les bons chiffres de déploiement de AIR, je m’intéresse plus particulièrement aux applications payantes. Le cas du NY Times Reader est ainsi représentatif du modèle économique qu’il peut y avoir derrière une RDA payante : abonnement de 15$/mois pour un accès illimité aux contenus (récents et archives), consultation hors-ligne et lisibilité améliorée grâce au Text Layout Framework. Il existe une version gratuite mais limitée qui permet de faire découvrir les fonctionnalités et de tester le reader. Plus d’infos ici : NY Times Desktop Reader Gest a Makeover.

Autre exemple avec Pandora One Desktop, l’extension applicative du service de recommandations affinitaires de musique : une version gratuite mais limitée et une version payante à 3$/mois proposant une meilleure qualité d’écoute, le retrait des publicités et une diffusion quasi-illimitée. Plus d’infos ici : The Freemium Model And A Desktop App Get The Thumbs Up With Pandora One.

pandora_one.jpg
La verison payante de Pandora

Ces deux exemples me confortent dans l’idée que le potentiel marchand d’une application (sa capacité à générer du C.A.) n’est pas fonction de sa sophistication (le nombre de fonctionnalités) ou de sa puissance (le nombre de données qu’elle est capable de traiter) mais plutôt de la qualité du service rendu. Et en ce sens, une plateforme de déploiement comme AIR n’est pas un frein : Le NY Times Reader ou TweetDeck ne sont pas mal considérées sous prétexte qu’elle ne sont pas développées en C++ ou qu’elle ne pèsent pas 800 Mo.

Spezify, un nouveau moteur de recherche visuelle

Après SearchMe et SearchCube , voici  Spezify, un nouveau moteur de recherche visuelle en flash.

Dès la page d’accueil de Spezify vous pouvez constatez que la case de recherche s’ajuste selon les mots que vous inscrivez.

Contrairement à SearchMe et SearchCube , dont les résultats s’affichent en Cover Flow et en cube, les résultats de recherche sont présentés sur une page de façon mêlée  (extraits de blogs, images, vidéos, images, etc. ).  Spezify trouve les réponses de vos requêtes sur Flickr, Yahoo, Wikipedia et Twitter.

La navigation se fait en déplaçant votre souris vers les bords de la page.

Mon avis ?

Personnellement, bien que l’interface soit agréable visuellement, je trouve que le moteur de recherche Spezify est une perte de temps. Par contre, je suis certaine qu’il peut être utile pour les designers qui souhaitent s’inspirer…

Sujet à part.

Pour ceux qui s’intéresse aux nouveaux moteurs de recherches. AltSearchEngines a réalisé un top 100 des moteurs alternatifs existants. Consultez l’article A new Top 100 Alternative Search Engines list!

Qu’en pensez-vous ?

Source : (Twitter ) @orenoque et Benoit Descary

Quand la réalité augmentée nous facilite le quotidien

Il existe déjà de nombreuses applications de réalité augmentée via la webcam, mais celle dont je veux vous parler est nettement moins “gadget” que les autres (supports promotionnels enrichis). Développé par l’agence AKQA pour la poste US (United States Postal Service), ce simulateur de colis permet de choisir à l’avance la bonne taille de boîte : Priority Mail.

PriorityMail_simulator.jpg

Cette vidéo donne ainsi des explications très clair étape par étape :

Il est possible de changer la boîte et de régler la transparence pour mieux en apprécier les dimensions. Simple et efficace (à condition de posséder une webcam).

(via Graphism)

Roland-Garros en HD Smooth Streaming avec Silverlight (et dans votre intranet aussi)

En ce moment l’actualité sportive est dominée par le tournoi de Roland-Garros. Un évènement sportif comme Microsoft les aime. Microsoft ? Mais oui enfin, Microsoft qui est petit à petit en train de s’imposer sur la retransmission “live” de contenus sportifs (comme les J.O. l’été dernier). Bref, tout ça pour dire que France2 propose de suivre la compétition en streaming sur son site : Roland Garros 2009.

Roland-Garros en Smooth Streaming avec Silverlight
Roland-Garros 2009 en Smooth Streaming avec Silverlight

Là où ça devient intéressant, c’est que cette retransmission est en HD, plus précisément du 720p soit une résolution de 1280 x 720 pixels. Ceci est rendu possible grâce à la technologie Smooth Streaming de Silverlight. Une technologie très intéressante pour les événements sportifs car elle permet de moduler la résolution en fonction de la bande passante disponible (“adpative streaming“) et de faire des pauses, ralentis… Plus d’infos ici : Microsoft lance IIS Smooth Streaming qui permet de streamer en vraie HD en 1080p.

Pour ce qui est de la régie, je vous propose cet article de Clubic qui résume très bien les moyens déployés : Roland Garros en HD grâce à Silverlight.

L'architecture technique derrière le
L'architecture technique derrière le "live" de Roland-Garros 2009

Et si les compétitions sportives vous laissent de marbre mais que vous vous intéressez à Silverlight, je peux également vous recommander cet article où il est question d’un intranet médical exploitant des interfaces riches : Microsoft Health Patient Journey Demonstrator.

Exemple d'intranet
Exemple d'intranet "riche" avec Silverlight

(via JF Gomez)