Pourquoi les CSS Animations ne sont pas concurrentes de Flash ou Silverlight

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.

Hyundai mise sur les interfaces riches pour sa Genesis Coupe

Grosses sensations chez Hyundai avec le tout nouveau mini-site de la Genesis Coupe. Le site s’ouvre sur une vidéo en plein écran sur laquelle vous pouvez insérer d’autres vues en cliquant sur le bouton (+) :

La page d'accueil du mini site de la Genesis Coupe
La page d'accueil du mini site de la Genesis Coupe

Le son est en sourdine, mais quand vous passez votre souris sur une vignette, celle-ci s’aggrandît (les autres sont masquées) et le son de la vignette est augmentée. Très forte sensation, surtout avec les vues extérieures :

La page d'accueil du mini site de la Genesis Coupe
La vignette s'éclaire au survol de la souris

Autre très bonne trouvaille, la vue 360° (un grand classique sur les sites de constructeurs auto) où le pilote s’amuse à faire patiner la voiture sur place en faisant des cercles à… 360° (ils sont de l’humour chez Hyudai) le tout sur fond de musique classique. Comme l’action est filmée au ralenti, les caractéristiques de la voiture apparaissent au fur et à mesure que la voiture tourne avec des info-bulles cliquables :

La page d'accueil du mini site de la Genesis Coupe
La vue à 360°

Vous avez enfin la possibilité de faire vous-même votre film publicitaire avec un atelier de montage (il s’agit d’Adobe Premiere Express, le même que sur YouTube).

La page d'accueil du mini site de la Genesis Coupe
L'éditeur de vidéo

Le chargement est un peu long mais la réalisation très soignée. Dans un style un peu plus sage il y a aussi le mini-site de la Genesis Sedan mais je trouve que ça manque un peu de drifting quand même, non ?

En règle général les sites de constructeurs auto sont des authentiques petites de rich media et de sophistication des interfaces, en totu cas je suis fan.

EarthBrowser, très bonne alternative à Google Earth

Je présuppose que vous connaissez déjà Google Earth, mais connaissez-vous EarthBrowser ? Pour faire simple il s’agit d’un visualisateur de données relatives à la Terre développé avec AIR (donc qui tourne sur Windwos, Mac…). Jusqu’à ce WE ce logiciel serati passé inaperçu, sauf que l’on sait maintenant que même Google peut avoir des ratés (lire à ce sujet Human Error Causes Google’s ‘Epic Fail’ et Imagine there’s no Google).

EarthBrowser est donc une application très sympa qui permet d’observer notre Terre sous toutes les coutures et surtout de choisir quelles données vont être affichées :

La Terre vu de mon Mac
La Terre vu de mon Mac

Les données que vous pouvez afficher sont issues d’une multitude de source et vous pouvez également ajouter les votre (au format KML). La manipulation se fait de façon intuitive et l’interface dépouillée (en tout cas bien plus que son grand rival) laisse un maximum de place à la visualisation des données (je vous recommande les températures ainsi que les derniers tremblements de terre) :

Visiblement ils ont eu un WE agité au Japon
Visiblement ils ont eu un WE agité au Japon

Cerise sur le gâteau, l’auteur propose également un widget très sympa qui permet d’encapsuler dans votre site (blog…) une vue 3D de la Terre avec la localisation des derniers visiteurs (grâce au Tracker) :

La localisation des derniers visiteurs de votre site
La localisation des derniers visiteurs de votre site

Voici donc une très bonne solution de replis si jamais Google est à nouveau en rade ou s’ils décident d’abandonner ce produit. Les dernières améliorations sont à suivre sur le blog officiel.

Tiens au fait, vous saviez qu’il y a avait plus de 100 millions d’installations de AIR : Statistiques sur AIR et Flash. Heu… vous écrivez “AIR” ou “Air” ?

(via RIApedia)

Un advergame en Papervision chez VolvoTrucks

Il existe pléthors d’advergames dans le monde de l’automobile (à découvrir sur Advergame.fr). Par contre je n’en connaissais pas dans le monde des constructeurs de camion. C’est maintenant chose faite avec Volvo qui fait la promotion de son FH16, le camion le plus puissant du monde : The Strongest Truck.

Outre des vidéos et divers contenu, ce mini-site propose donc un advergame où il faut acheminer à bon port une livraison à l’aide de ce fameux FH16-700 :

advergame de chez Volvo Trucks
L'advergame de chez Volvo Trucks

Bien évidement la parcours est compliqué et les caisses s’envolent à la moindre bosse. Il faut donc faire preuve de doigté pour dompter la “bête”. Une réalisation soignée avec un chargement pas trop long, rien à redire, c’est tout bon. D’autant plus que les bénéfices du produit sont bien restitués (puissance maîtrisée), ne rigolez pas car ces gros engins peuvent parfois provoquer des catastrophes (cf. Promoter Killed In Monster Truck Accident).

(via Papervision 3D)

Connaissez-vous les démos enrichies ?

Je viens de découvrir la page de démonstration de Scour (un moteur de recherche social) et je vous avoue être très séduit par ce principe de page de démonstration enrichie.

Cette page de démonstration se présente sous la forme d’une capture d’écran avec des bulles :

La page de démonstratino de Scour
La page de démonstration de Scour

Lorsque vous passez votre souris sur une des bulles, un masque permet d’assombrir la page pour focaliser l’attention sur une zone en particulier et il peut même y avoir une petite animation pédagogique (apparition d’explications dans la bulle et agrandissement du bloc de commentaire) :

La même page au survol de la souris d'une bulle
La même page au survol de la souris d

Voici donc un moyen très simple de bien mettre en évidence le fonctionnement d’un service ou ses bénéfices. Un module simple et efficace, comme je les aime. Tout ça me donne envie de rédiger un billet sur les visites guidées (demo tour), avez-vous des exemples en tête ?

(merci à Romain pour le lien)

Le web dans un écrin avec Cooliris

Connaissez-vous Cooliris (née Piclens) ? Il s’agit d’un plug-in pour Firefox qui permet d’avoir un mode de visualisation extrêmement spectaculaire d’une liste de médias. Une liste de médias ? Oui, comme dans FlickR, YouTube, Facebook… Dans la mesure où ces services dominent maintenant l’audience du web, un pug-in comme ce Cooliris permet d’extraire les internautes d’un modèle d’interaction usé jusqu’à la corde (les listes de résultats) pour les plonger dans un superbe mur en 3D avec un effet d’immersion réellement impressionnant :

La page d'
La liste de résultats avec Cooliris

Mais là où ça devient très intéressant, c’est que ce plug-in est compatible avec un certain nombre de sites où il est possible d’activer le plug-in avec un picto dans la barre de votre navigateur. Exemple ici avec la liste de résultats de Hulu :

La page de recherche de vidéos sur Hulu
La page de recherche de vidéos sur Hulu

Ici un autre exemple sur Seesmic :

La recherche de vidéos sur Seesmic
La recherche de vidéos sur Seesmic

Il y a également une chaîne Shopping avec une expérience d’achat très proche du récent Amazon WindowShop :

La chaîne Shopping
La chaîne Shopping

Et il y a enfin une étonnante chaîne Games où vous pouvez jouer aux jeux Flash en cliquant dessus :

La chaîne Games
La chaîne Games

Ajouter à cela une version iPhone et une section developers très bien conçu et vous avez une technologie de pointe qui risque de faire beaucoup parler d’elle.

Après cela LA grande question est : “Mais comment vont-ils rentabiliser ce bazar ?“.

Deux nouveautés chez Microsoft : RedMooncake Viewer et SmoothHD

Laissez-moi vous présenter deux nouveautés tout à fait intéressantes qui nous viennent de chez Microsoft (et requiert la dernière version de Silverlight).

Il y a tout d’abord RedMooncake, un player qui permet d’encapsuler un fichier DeepZoom (dont j’ai déjà parlé ici : Découvrez le parc Yosemite avec des panoramas de 45 Gigapixels).

Le player RedMooncake
Le player RedMooncake

Ce lecteur vous permet ainsi d’explorer une collection de photos en zoomant à l’aide de la molette de votre souris. Les photos sont organisées par tags, en mosaïque ou en vrac. Vous pouvez également accéder à la vue plein écran. Le tout est très fluide et exploite parfaitement la technologie. À découvrir ici : Afficher ses galeries photos deepzoom en un clin d’oeil avec redmooncake.

Autre nouveauté avec le service SmootHD, un service de streaming de vidéos HD en partenariat avec Akamaï. Un partenariat intéressant qui combine les capacités vidéo de Silverlight (adaptive streaming…) avec les tuyaux d’Akamaï pour donner une qualité d’image impressionnante :

Le service de streaming HD de Microsoft et Akamaï
Le service de streaming HD de Microsoft et Akamaï

Je peux vous assurez que l’image est sublime, même en plein écran sur mon moniteur full HD de 24”. Voilà de quoi faire de l’ombre à la HD Gallery d’Adobe qui présente une résolution similaire mais peut-être moins de souplesse dans la gestion du flux. À quand un M6 Replay en SmoothHD ?

(via Jean-François Gomez)

Encore des interfaces riches chez Ford (dans leurs voitures)

Ford a toujours été précurseur en terme d’interfaces riches avec notamment le Towing Guide dès 2005 (remplacé depuis par un showroom universel). Ford poursuit sur sa lancée avec un travail très intéressant de refonte des tableaux de bord des véhicules hybrides : Ford’s Green Plan to Drive Sales.

Le résultat est tout simplement splendide avec une planche de bord dopée aux widgets :

Un tableau de bord "riche" chez Ford
Un tableau de bord"riche" chez Ford

Un très beau travail de reconception réalisé par l’agence Smart Design avec une très bonne lisibilité et de belles proportions. Quel dommage par contre que des voyants plus classiques soient éparpillés au dessus et dans les angles. J’imagine que c’est pour une raison de sécurité, si l’écran ne fonctionne plus les voyants sont toujours actifs.

Dans le même genre il y a également le très futuriste tableau de bord de la Lamborghini Reventon :

Tableau de bord de la Lamborghini Reventon
Tableau de bord de la Lamborghini Reventon

(via Information Aesthetics)

C’est quoi Flash ?

Depuis maintenant près de 10 ans que la technologie Flash existe, nous sommes maintenant dans une situation de marché où “Flash” désigne plus un écosystème qu’une technologie. Ce n’est d’ailleurs pas un hasard si Adobe parle maintenant de Flash Platform et est en train de transformer un nom de produit en une marque ombrelle.

C’est dans ce contexte que Lee Brimelow publie un article (Flash is being redefined) où il s’interroge sur la terminologie autour de Flash :

  • Flash” tout d’abord qui ne se contente plus de désigner le plug-in mais également les autres technologies d’interfaces riches (comme Air) et les différents produits de la gamme (dont Flash CS4 et Flash Catalyst) ;
  • Flex” qui désigne à la fois le framework et l’IDE (sans compter tous les produits qui y sont associés comme LiveCycle) ;
  • Développeur Flash” qui recouvre en fait tout une gamme de métiers et de langages (Flash, Action Script, Flex, Java…) ;
  • Designeur Flash” qui recouvre également une large palette de métiers (concepteur d’interfaces, graphiste, animateur, sound designeur, spécialiste vidéo…).

Bref, difficile pour le moment de savoir comment la gamme Flash va évoluer mais Adobe aurait tout intérêt à clarifier tout ça pour ne pas noyer les nouveaux entrants dans l’écosysteme Flash.

Bon je ne sais pas pour vous mais moi je n’ai pas encore réussi à trouver ma place dans cet écosystème. Plus grâve, je ne m’y retrouve pas dans le workflow décrit ici : Designer Developer Workflows are Lacking a Critical Component.

Toujours plus de menus riches avec Ajax et Flash

Je sais bien que les menus de navigation sont en règle générale le talon d’Achille de sites web et qu’il ne faut pas s’amuser à faire des expérimentations avec, mais comme nous ne sommes pas sur SimpleWeb.fr, je souhaiterais partager avec vous trois découvertes sympas concernant des menus “riches”.

Il y a tout d’abord ce clone roumain de Netvibes (Globber) qui pousse très loin la personnalisation de sa start page avec la possibilité de modifier l’ordre des onglets (en drag&drop) et de changer également la couleur :

Avant

 

Après

Il y  également ce très beau menu qui affiche une transition très fluide baptisée Lava Lamp Menu qui pourtant est réalisé en javascript (via YUI blog) :

Et il y a enfin ce site expérimental pour un festival de rock (RockWerchter) qui propose un système de panneau pivotant un peu déstabilisant mais très original (merci à Cestuila pour le lien) :

Voilà, si vous avez récemment croisé d’autres menus originaux n’hésitez pas à les mettre en commentaires.