http://www.interfacesriches.fr Toute l'actualité des interfaces riches (Flash, HTML5, 3D...) Wed, 13 Mar 2013 06:40:23 +0000 fr-FR hourly 1 http://wordpress.org/?v=3.5.2-alpha SoundCloud sur les traces d’iTunes http://www.interfacesriches.fr/2009/04/02/soundcloud-sur-les-traces-ditunes/ http://www.interfacesriches.fr/2009/04/02/soundcloud-sur-les-traces-ditunes/#comments Thu, 02 Apr 2009 10:38:44 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=433 Pour tout ce qui concerne la musique, LA référence en terme de gestion musicale sur votre ordinateur c’est iTunes. Vous connaissiez déjà Songbird, un clone open source, mais connaissez vous le Cloud Player ? Il s’agit d’un lecteur / gestionnaire de musique en mode SaaS qui repose sur le service Soundcloud. Pour faire simple ce service permet d’héberger vos morceaux pour y accéder depuis n’importe qu’elle périphérique (c’est de la music on the cloud, lire à ce sujet : Soundcloud sur le point de redéfinir le marché de la musique ?.

Bref, tout ça pour dire que si vous vous embêtez à mettre vos fichiers musicaux en ligne, pourquoi y accéder au travers d’une application installée sur le disque dur ? Et c’est là où Soundcloud devient intéressant car il propose un lecteur / gestionnaire en ligne qui reproduit à quelques pixels près l’interface d’iTunes :

Le lecteur de musique de Cloud Player
Le lecteur de musique de Cloud Player

Je ne suis pas un spécialiste, mais d’après mes investigations cette interface ne repose ni sur Flash sur aucun plug-in, elle serait réalisée en HTML et Javascript (à confirmer). C’est donc un bel exploit technique que d’avoir “traduit” l’interface d’iTunes en Ajax.

Tout aussi intéressant, le lecteur encapsulable dans les pages est lui aussi réalisé en Ajax (à confirmer) et propose une visualisation très intéressante des commentaires tout au long du morceau (exemple avec Bassbot) :

Le player encapsulable de Soundcloud
Le player encapsulable de Soundcloud

Et ça fonctionne aussi avec les remix de morceaux comme sur Mixcloud !

Non je ne vous referais pas le coup de “les applications traditionnelles sont mortes” mais il faut bien avouer que ce service est tout à fait convainquant et apporte une réelle valeur ajoutée (portabilité des morceaux…). Un tel service couplé à une grosse base de données de morceaux (comme Deezer ou Spotify) et à une plateforme sociale (comme iLike ou Last) pourrait sacrément bouleverser le marché. Ne reste plus qu’à proposer une version mobile et c’est le nirvana (il parait qu’ils recherchent des développeurs iPhone).

]]> http://www.interfacesriches.fr/2009/04/02/soundcloud-sur-les-traces-ditunes/feed/ 4 Toujours plus de menus riches avec Ajax et Flash http://www.interfacesriches.fr/2009/01/08/toujours-plus-de-menus-riches-avec-ajax-et-flash/ http://www.interfacesriches.fr/2009/01/08/toujours-plus-de-menus-riches-avec-ajax-et-flash/#comments Thu, 08 Jan 2009 10:07:51 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=243 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.

]]> http://www.interfacesriches.fr/2009/01/08/toujours-plus-de-menus-riches-avec-ajax-et-flash/feed/ 6 Vive les graphiques en Ajax http://www.interfacesriches.fr/2008/10/17/vive-les-graphiques-en-ajax/ http://www.interfacesriches.fr/2008/10/17/vive-les-graphiques-en-ajax/#comments Fri, 17 Oct 2008 09:07:23 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=138 J’ai déjà eu l’occasion de vous parler des tableaux de bord en ligne, de la possibilité donnée par les interfaces riches de représenter l’information de façon synthétique et conviviale. Cette convivialité repose en grande partie sur l’implémentation de graphiques et d’indicateurs visuels sur ces tableaux de bord. Jusqu’à présent, la seule façon de générer un graphique était d’utiliser Flash. Mais heureusement Google a lancé il y a quelques mois sa Vizualization API qui permet de générer de très beaux graphiques sans avoir recours à Flash : Introducing the Google Visualization API.

Les possibilités offertes par cette API sont tout simplement gigantesque, pour vous en convaincre je vous encourage à visiter la galerie :

Cerise sur le gâteau, ces graphiques sont dynamiques et peuvent représenter des données en temps réel comme le prouve l’exemple de la Gauge.

Pour aller encore plus loin, le site Ext JS vous propose en plus une extension permettant de prendre en charge n’importe quelle type de données et les représenter avec les outils de Google : Ext Charting and Mapping with Google Visualizations. Le résultat est tout à fait intéressant : Ext Charting.

Voilà donc un excellent moyen de “cacher” d’affreux tableaux de données pour les remplacer par de beaux graphiques / compteurs…

(via AJaxian)

]]> http://www.interfacesriches.fr/2008/10/17/vive-les-graphiques-en-ajax/feed/ 7 Vive les réglettes ! http://www.interfacesriches.fr/2008/10/09/vive-les-reglettes/ http://www.interfacesriches.fr/2008/10/09/vive-les-reglettes/#comments Thu, 09 Oct 2008 09:01:54 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=122 Rien de plus pénible que de devoir saisir des données numériques dans un champ. Par défaut le HTML ne reconnaît que trois formes de champs de saisie numérique : libre, incrémental ou menu déroulant. Pas très sexy tout ça…

Heureusement les interfaces riches nous apportent plus de possibilités avec les réglettes, très utile pour une saisie intuitive et cadrée (valeurs min et max). Cet élément d’interface se révèle particulièrement performant quand vous avez de nombreux critères à saisir, exemple avec l’écran de préférences musicales de Deezer :

Les réglettes de Deezer

Cette interface est intéressante mais la manipulation des réglettes est un peu laborieuse, d’autant plus qu’il y a 9 crans.

Plus intéressant, l’écran de recherche de Tripbase :

Les réglettes de TripBase

Même principe sauf que les glissières (qui servent à indiquer le choix) intègre le picto gramme correspondant au critère (restaurant, shopping…). De plus, des symboles (-) et (+) permettent d’affiner le choix de façon plus précise qu’avec la souris.

Dernière exemple avec cette glissière double chez CarZen :

La réglette double de CarZen

Le comportement est sensiblement le même que pour Tripbase mais la saisie double empêche d’avoir recours aux (+) et (-).

Si mes souvenirs sont exactes, il me semble que l’objet “ruler” sera inclus dans les spécifications de XHTML2 (et peut-être de HTML5). Ceci simplifiera grandement la tâche d’uniformisation et d’intégration.

]]> http://www.interfacesriches.fr/2008/10/09/vive-les-reglettes/feed/ 4 Nouvelle version de iGoogle : les pages-portails se densifient http://www.interfacesriches.fr/2008/06/26/nouvelle-version-de-igoogle-les-pages-portails-se-densifient/ http://www.interfacesriches.fr/2008/06/26/nouvelle-version-de-igoogle-les-pages-portails-se-densifient/#comments Thu, 26 Jun 2008 21:30:53 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=46 Voici à quoi va ressembler la nouvelle version du service de page-portail de Google :

iGoogle_1.jpg

Page-portail ? Oui car ils arrivent à faire rentrer tous les contenus et les services d’un portail en une seule page : Météo, flux RSS, email, tchat…

C’est encore plus flagrant avec cette deuxième capture (ils ont dépliés les [+]) :

iGoogle_2.jpg

La densité d’information sur cette page est énorme, à la limite du supportable. Par contre, une fois que l’œil est habitué, ça ne gène plus. Au premier abord, c’est très surprenant, mais finalement on se fait à cet espèce de tableau de bord personnel ultra-dense.

Vous aimez ?

(via Google Operating System)

]]> http://www.interfacesriches.fr/2008/06/26/nouvelle-version-de-igoogle-les-pages-portails-se-densifient/feed/ 3 Une nouvelle page d’accueil pour HP (et alors ?) http://www.interfacesriches.fr/2008/06/03/une-nouvelle-page-daccueil-pour-hp-et-alors/ http://www.interfacesriches.fr/2008/06/03/une-nouvelle-page-daccueil-pour-hp-et-alors/#comments Tue, 03 Jun 2008 20:11:42 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=15 Aviez-vous remarqué la nouvelle page d’accueil de HP.com :

HP.jpg

Ne trouvez-vous pas qu’il y a comme un problème ?

Effectivement cette page est l’illustration parfaite de ce qu’il est possible de faire et de ce qu’il ne faut pas faire : un comportement non-standard et des effet perturbants.

Difficile en effêt d’apprécier cette page :

Bref, du travail bâclé qui me surprend de la part d’une marque qui a toujours soignée son image. Pour l’instant cette nouvelle page d’accueil n’est pas encore déployée sur la version française… Esperons qu’ils auront amélioré cette page avant le baculement !

]]> http://www.interfacesriches.fr/2008/06/03/une-nouvelle-page-daccueil-pour-hp-et-alors/feed/ 3 Est-ce la mode des menus déroulant riches ? http://www.interfacesriches.fr/2008/01/13/est-ce-la-mode-des-menus-deroulant-riches/ http://www.interfacesriches.fr/2008/01/13/est-ce-la-mode-des-menus-deroulant-riches/#comments Sat, 12 Jan 2008 22:16:48 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=27

Voilà plus de 10 ans que le web existe. Plus de 10 ans que nous nous contentons de ce que le HTML nous propose comme éléments d’interactions (boutons, menus…). Peut-être serait-il temps d’expérimenter de nouvelles choses afin de gagner de la place. Dans ce contexte, laissez-moi vous présenter des choses tout à fait intéressantes, et notamment ces composants surprenants.

Premier exemple chez Google Base avec ces menus déroulant qui intègrent des cases à cocher et même des champs de saisie :

RichDropDown1.jpg RichDropDown2.jpg

Autre exemple chez Getty Images avec ce champ de recherche extensible (les options apparaissent lorsque le curseur est dans le champ) :

RichDropDown3.jpg

Dernier exemple chez Monster avec ce mélange de menu déroulant, de listes extensibles et cases à cocher :

RichDropDown4.jpg

J’ai personnellement un petit faible pour les menus déroulant de Google Base, même si je serais curieux de voir la réaction d’utilisateurs lambda… A quand une intégration de ces composants dans le Google Web Toolkit ?

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

]]> http://www.interfacesriches.fr/2008/01/13/est-ce-la-mode-des-menus-deroulant-riches/feed/ 0