http://www.interfacesriches.fr Toute l'actualité des interfaces riches (Flash, HTML5, 3D...) Wed, 26 Jun 2013 08:12:39 +0000 fr-FR hourly 1 http://wordpress.org/?v=3.5.3-alpha Vers une scénarisation des contenus textuels http://www.interfacesriches.fr/2010/12/15/vers-une-scenarisation-des-contenus-textuels/ http://www.interfacesriches.fr/2010/12/15/vers-une-scenarisation-des-contenus-textuels/#comments Wed, 15 Dec 2010 16:32:08 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=938 Il y a quelque temps j’avais parlé d’un site institutionnel édité par Linksys (Where Life Connects qui n’est plus en ligne) qui faisait une utilisation particulièrement intéressante des transitions : Vive les transitions. Oui mais voilà, à l’époque pour réaliser ces effets de transition il fallait utiliser du Flash. Oui je sais, utiliser du Flash pour animer des blocs de texte est une drôle d’idée…

Nous sommes maintenant presque en 2011 et les choses ont beaucoup changé, notamment avec l’évolution des technologies web (HTML5, cSS3 et javascript). Il est maintenant possible de réaliser un grand nombre de raffinements graphiques et de petites animations tout en respectant les standards web (cf. CSS3 et javascript seront-elles les technologies RIA du future ?) et l’exemple que je vous propose ne fait que confirmer une tendance grandissante.

Ainsi, la brasserie Cascade propose un site à l’interface très avant-gardiste, mais n’utilisant que du javascript et des CSS3 :

La page d'accueil de Cascade Brewery

Cette page d’accueil se présente en fait comme un plan du site où chaque page est représentée par une boite. Si vous modifiez les manettes du menu, les boites se réorganisent pour faire remonter le contenu qui correspond le mieux à vos réglages :

Une page d'accueil différente pour Cascade Brewery

Dans l’absolu, je suis bien d’accord avec vous : cette mise en page ne sert strictement à rien, un plan du site plus traditionnel serait bien plus efficace. Il n’empêche, ce site peut être considéré comme un message adressé au marché. Un message qui dit : “Nous n’avons pas peur d’innover pour nous différencier, et nous pouvons le faire sans dépendre d’une solution propriétaire“.

Bon OK, je ne pense pas que leurs revendications vont jusque-là, mais ce site nous prouve que les mentalités sont petit à petit en train d’évoluer et que la déferlante HTML5 est en marche (lire à ce sujet Why We Should Start Using CSS3 and HTML5 Today et HTML5, Mozilla and the Future of the Web).

Tout ceci nous amène donc au sujet réel de cet article : la mise en scène des contenus textuels. Jusqu’à présent, les technologies standards ne remplissaient qu’une seule fonction : l’affichage. Avec l’avènement des navigateurs de nouvelle génération (dont IE9 fait partie), de nouvelles possibilités vont voir le jour en ce qui concerne l’animation et surtout les transitions. Les CSS3 et Javascript (jQuery pour l’exemple cité plus haut) permettent ainsi de réaliser des petites animations à l’ouverture des pages pour guider l’oeil et scénariser l’affichage de l’information. Ce qui nécessitait le recours à des technologies riches (en l’occurrence, Flash pour l’exemple cité en début d’article) est maintenant possible avec les standards web.

J’ai déjà eu l’occasion de m’exprimer sur ce sujet, mais je réitère mon enthousiasme et mes prédictions : 2011 va être l’année du renouveau pour les interfaces web avec la possibilité de choisir n’importe quelle typographie et de l’animer à loisir (ou du moins de faire des animations et transitions de premier niveau). Il existe quantité d’autres exemples (comme ce très beau carrousel : CSS3 Transition Demo) qui illustrent cette transition de Flash vers HTML.

Un dernier exemple pour la route ? Ben The Bodyguard.

(via Choblab)

]]> http://www.interfacesriches.fr/2010/12/15/vers-une-scenarisation-des-contenus-textuels/feed/ 5 Avec SilverFace, Silverlight concurrence AIR sur les applications riches http://www.interfacesriches.fr/2010/02/02/avec-silverface-silverlight-concurrence-air-sur-les-applications-riches/ http://www.interfacesriches.fr/2010/02/02/avec-silverface-silverlight-concurrence-air-sur-les-applications-riches/#comments Tue, 02 Feb 2010 21:59:02 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=754 Comme annoncé lors de la PDC de la fin d’année dernière, SilverFace (le client Silverlight pour Facebook) est disponible depuis quelques jours. Vous pourriez me dire “tout le monde s’en fout car il existe une grande quantité de logiciels client pour Facebook” mais je vous répondrais “pas si vite car ce logiciel là est propulsé par Silverlight 4“. Donc contrairement à Tweetdeck, Seesmic Desktop & cie qui reposent sur AIR, ou Fishbowl qui est un exécutable Windows, SilverFace est donc une Rich Desktop Application qui est propulsée par la dernière version de Silverlight (disponible pour Windows, Mac et bientôt Linux).

C’est donc une grande étape dans la maturation de la technologie d’interface riche de Microsoft qui sort maintenant du navigateur pour proposer une expérience très proche (si ce n’est quasi-identique) à celle des applications.

C’est donc tout naturellement que j’ai décidé de tester cette application. L’installation sous Mac se fait de façon tout à fait traditionnelle : une icône à glisser dans le dossier “Applications“. L’interface est plutôt surprenante avec un environnement immersif où les fonctions et le contenu flottent au dessus d’un fond sombre tapissé de photos (assez proche de Seesmic Look) :

Le flux d'activité dans SilverFace
Le flux d'activité dans SilverFace

Le basculement d’un écran à l’autre se fait en douceur et les effets de transition sont plutôt réussis. Plusieurs modes d’affichage sont proposés comme la vue “grid” :

La vue en grille du flux d'activité
La vue en grille de SilverFace

Il y a également une vue en mosaïque pour les photos :

La mosaïque de photos dans SilverFace
La mosaïque de photos dans SilverFace

La page de profil est bien proportionnée et conserve les mêmes codes graphiques :

Une page de profil dans SilverFace
Une page de profil dans SilverFace

L’application réagit bien et semble stable. Les mises à jour ne se font pas “à chaud” (il faut redémarrer l’application) mais se passent sans souci particulier. Nous pouvons donc en conclure que c’est une première expérience concluante qui propulse donc Silverlight en concurrence directe avec Flash et AIR.

Microsoft ne cache pas ses ambitions en ce qui concerne l’évolution de Silverlight et les équipes mettent les bouchées doubles pour rattraper le retard sur AIR : accès à la webcam, drag & drop de fichiers depuis le bureau… tout est mit en oeuvre pour soutenir la comparaison (cf. Silverlight Client for Facebook available).

Les questions auxquelles je ne sais pas répondre pour le moment sont les suivantes :

Bref, passée cette première expérimentation les questions sont nombreuses et j’anticipe une sortie officielle pour la quatrième édition du MIX (en mars prochain). La technologie est (presque) prête, attendons de voir comment le marché va réagir et surtout à quel rythme l’écosystème de développeurs va adopter cette technologie et développer de nouvelles opportunités.

Si je ne me trompe pas, les prochains J.O. d’hiver de Vancouver (pour lesquels Microsoft a déployé les grands moyens avec NBCOlympics.com) vont grandement contribuer à augmenter le nombre d’utilisateurs. La bataille ne fait que commencer…

]]> http://www.interfacesriches.fr/2010/02/02/avec-silverface-silverlight-concurrence-air-sur-les-applications-riches/feed/ 4 Flash Player bientôt disponible sur les smartphones Android http://www.interfacesriches.fr/2010/01/11/flash-player-bientot-disponible-sur-les-smartphones-android/ http://www.interfacesriches.fr/2010/01/11/flash-player-bientot-disponible-sur-les-smartphones-android/#comments Mon, 11 Jan 2010 15:34:11 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=727 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)

]]> http://www.interfacesriches.fr/2010/01/11/flash-player-bientot-disponible-sur-les-smartphones-android/feed/ 13 Un nouveau site en Flash pour Axa http://www.interfacesriches.fr/2009/02/20/un-nouveau-site-en-flash-pour-axa/ http://www.interfacesriches.fr/2009/02/20/un-nouveau-site-en-flash-pour-axa/#comments Fri, 20 Feb 2009 08:20:37 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=355 Avez-vous vu la nouvelle page d’accueil d’Axa, elle est tout en Flash :
La nouvelle page daccueil dAxa
La nouvelle page d'accueil d'Axa

Au programme de cette page d’accueil :

La réalisation est propre et le design soigné. Par contre le temps de chargement est trop long et la manipulation assez complexe à appréhender. Mais la grande question que vous vous posez tous est : “ont-ils réellement besoin d’une page d’accueil en Flash ?“. Et la réponse est toute trouvée : Non ! En fait cette belle page d’accueil est plus un handicap qu’autre chose car elle est longue à charger, pas nécessairement plus intuitive et n’apporte rien de plus en terme de message. Bref, c’est de la poudre aux yeux, d’autant plus que les pages intérieures bénéficient d’un traitement graphiques similaires mais sont en HTML.

Bref, je ne comprend pas bien pourquoi ils ont fait ça, si ce n’est pour faire la compétition avec la page d’accueil de la SNCF qui n’est pas mal non plus dans sont style “bling-bling” (mais propose une version dégradée) :

La page daccueil de la SNCF
La page d'accueil de la SNCF

Si vous souhaitez réellement faire un usage malin de Flash pour un site d’entreprise, je vous recommande plutôt ce très bon dossier : L’utilisation de flash sur les sites corporates des grands comptes.

(via le billet sponsorisé de 2803)

]]> http://www.interfacesriches.fr/2009/02/20/un-nouveau-site-en-flash-pour-axa/feed/ 5 Apple chercherait-il une alternative à Flash ? http://www.interfacesriches.fr/2008/06/18/apple-chercherait-il-une-alternative-a-flash/ http://www.interfacesriches.fr/2008/06/18/apple-chercherait-il-une-alternative-a-flash/#comments Wed, 18 Jun 2008 20:27:11 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=41 C’est en tout cas la question que se pose Ryan Stewart sur son blog : Apple finally goes RIA. En fait le “débat” tourne autour de SproutCore, un framework RIA qui repose sur Ajax (donc de l’HTML et du javascript). Il semblerait qu’Apple ait embauché son créateur (Charles Jolley) dans l’équipe de développement du tout nouveau Mobile Me (l’offre SaaS qui remplace .Mac).

Pourquoi faire cela ? Tout simplement pour internaliser des compétences capables de créer des interfaces sophistiquées (justifiant l’abonnement annuel à Mobile Me) sans pour autant avoir recours à Flash (la propriété d’Adobe avec qui Apple s’est fâché au sujet de l’iPhone).

Vous avez dit iPhone ? Oui tout à fait, car c’est bien de cela dont il est question : maîtriser la chaîne de bout en bout (hardware + software + web + mobile + TV) pour en dégager un maximum de revenus : To avoid Flash lock-in, Apple looks at SproutCore.

Et oui, c’est encore une histoire de gros sous. Mais tout ceci ne doit pas non plus éloigner les rumeurs (également persistantes) au sujet de QuickTime qui pourrait bien être un cheval de Troie pour Apple (qui pourrait le transformer en un environnement d’exécution universel à la AIR).

]]> http://www.interfacesriches.fr/2008/06/18/apple-chercherait-il-une-alternative-a-flash/feed/ 7 Encore une belle moisson de sites pour les Webby Awards http://www.interfacesriches.fr/2008/05/21/encore-une-belle-moisson-de-sites-pour-les-webby-awards/ http://www.interfacesriches.fr/2008/05/21/encore-une-belle-moisson-de-sites-pour-les-webby-awards/#comments Wed, 21 May 2008 18:27:51 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=14

La 12ème édition des Webby Awards vient d’annoncer sa liste de nominés : 12th Annual Webby Awards Nominees. Cette année les sites sélectionnés sont particulièrement novateurs, surtout au niveau des interfaces.

Dans la catégorie “Rich navigation systems” voici mes favoris :

Dans la catégorie “Animations” :

Dans la catégorie “Design” :

Il y a de nombreuses catégories que je vous engage à découvrir. Toujours est-il que les interfaces riches sont à l’honneur cette année, on se croirait au Flash Forward !

/!\ Article initialement publié sur FredCavazza.net.

]]> http://www.interfacesriches.fr/2008/05/21/encore-une-belle-moisson-de-sites-pour-les-webby-awards/feed/ 1 Interfaces riches + finance en ligne = €€€ http://www.interfacesriches.fr/2008/04/03/interfaces-riches-finance-en-ligne-eee/ http://www.interfacesriches.fr/2008/04/03/interfaces-riches-finance-en-ligne-eee/#comments Wed, 02 Apr 2008 22:07:07 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=20

J’ai découvert hier la nouvelle version de l’outil de planification financière de E*Trade : Retirement QuickPlan (cliquez sur la boîte à droite de l’écran). Non seulement c’est un modèle d’ergonomie (lisibilité, incitation) mais l’expérience d’utilisation est des plus satisfaisante. Comprenez par là : on s’y amuse parce que les images sont belles. Images ? Non pas tout à fait, ça serait ne pas faire justice aux très beaux effets cinématiques des courbes et autres outils de visualisation.

Mais commençons par le commencement avec un très bel écran d’accueil sous forme d’assistant à choix fermés (rythme d’épargne, objectifs…) :

QuickPlan_1.jpg

Nous avons ensuite cette très belle courbe censée représentée le planning d’épargne qui doit vous permettre de financer votre retraite dorée (on peut en plus déplacer des glissières pour modifier la courbe) :

QuickPlan_2.jpg

Vous avez ensuite ce superbe écran récapitulatif avec cet histogramme dont je ne sais pas trop à quoi il sert si ce n’est à en mettre plein la vue :

QuickPlan_3.jpg

Force est de constater que les équipes d’E*Trade savent s’y prendre pour vous faire rêver avec une application très rébarbative (mettre de l’argent de côté pour financer la retraite que l’État ne pourra pas vous verser). Tout est ici mi en œuvre pour faciliter le décryptage des informations : les formes, les contrastes, les proportions, les graphiques (éléments centraux des pages)… Le résultat est à la fois très ludique (on peut jouer avec les glissières) et informatif (les montants sont réels).

Bref, vous aurez compris que je suis séduis par cet outil auquel je délivre le titre honorifique de “Best Practice“. (via RIApedia)

/!\ Article précédemment publié sur FredCavazza.net.

]]> http://www.interfacesriches.fr/2008/04/03/interfaces-riches-finance-en-ligne-eee/feed/ 0