InterfacesRiches.fr

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

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

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

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

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

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…

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

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

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 :

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

Suite à une première version publiée en 2007, Webkit (le moteur de rendu qui propulse Safari et Chrome) vient de proposer une nouvelle version des CSS Animations. L’idée derrières ces classes d’un nouveau genre est d’étendre les possibilités des CSS Effects (transitions, gradients, masks…).

Alors que certains interprètent ça comme un début de concurrence pour les plug-in RIA comme Flash ou Silverlight (CSS Animation coming to Safari, Less dependence on Flash?), je vois ça plutôt comme une bonne nouvelle car ces classes vont permettre d’alléger le code source. Je rejoins donc complètement l’opinion exprimée ici : How Webkit’s CSS Animation could kill Flash and Silverlight… NOT.

Pour le moment les possibilités sont très réduites (déplacement de blocs…), mais permettent d’éviter d’avoir recours à du code javascript qui peut poser des problèmes de compatibilité. Quoi que… des framework comme jQuery ou script.aculo.us offrent maintenant un très bon niveau de compatibilité et une dégradation élégante, ce qui n’est pas forcément le cas de Webkit qui représente moins de 10% des parts de marché.

Nous retombons ainsi dans le débat des CSS 3 : tout le monde est d’accord pour dire qu’elles vont simplifier le développement web (avec des effets comme les dégradés, les coins arrondis, les transitions…) tout en le compliquant (pour assurer une compatibilité avec les navigateurs récalcitrants). Oui c’est bien de IE 8 dont je parle : à peine sorti et déjà dépassé. Pourquoi mettre en oeuvre les CSS3 alors que plus de la moitié des internautes ne pourront pas en bénéficier ? C’est là toute la question ! Et le prie dans tout ça, c’est que nous ne sommes même par sûr qu’IE 9 supportera CSS 3.

Mais revenons à nos moutons et aux CSS Animations. Au vue de ce que ces classes proposent et de ce que sont capables Flash et Silverlight, nous ne pouvons pas réellement parler de concurrence. En fait les CSS Animations sont plus un concurrent pour javascript et ses librairies d’effets. Mais encore une fois, tant que ces spécifications n’auront pas été adoptées par le W3C et que les navigateurs ne les auront pas implémentées, nous parlons plus de science fiction que d’une réalité opérationnelle : ce n’est pas demain qu’un annonceur exigera des CSS Animations dans son cahier des charges !

Là où ces dernières sont par contre très intéressantes, c’est pour les applications mobiles car le navigateur de l’iPhone supporte déjà un certain nombre de classes CSS 3 (Transforms, Transitions) ainsi que les CSS Animations. C’est donc dans cette petite (mais ô combien rentable) niche que les développeurs vont pouvoir en tirer pleinement partie.

En attendant, vous pouvez toujours tester les différentes démos disponibles pour assouvir votre curiosité : ici et là. Sans vouloir briser le suspens, je préfère vous prévenir par avance que vous n’y trouverez rien de révolutionnaire. J’attends ce pendant avec impatience de voir ce que cela pourrait donner sur le CSS Zen Garden.