Interface riche, peut-on remplacer le flash ? Place des tendances site de e-commerce ose le dhtml
Par François Lasselin le mercredi, mai 14 2008, 13:36 - General - Lien permanent
Place des tendances (http://www.placedestendances.com) est un grand magasin en ligne de prêt-à-porter homme, femme, enfant et accessoires. Place des tendances, dont l'actionnaire principal est le pole e-commerce et VAD du groupe TF1, se positionne sur le moyen/ haut de gamme. L’assortiment est construit autour de marques installées, rassurantes et reconnues telles que Sandro, Kookai, Chattawak ou Claudie Pierlot. Place des tendances ne propose que des collections de la saison en cours, vendues au prix boutique. Les différents produits sont classés par marque, par famille de produit ou par thème, invitant l’internaute à naviguer au gré de ses envies.
Axance a accompagné la réalisation de ce projet, notamment via la réalisation d'une maquette fonctionnelle du site en flash et globalement dans la réalisation de tout le front-office.
Axance a convaincu les responsable du projet grace à la cinématique et à l'identité véhiculée par le graphisme. Les interfaces riches ont une place importante dans le projet. En effet, les interfaces riches sont de plus en plus présentes sur internet. L'actualité des derniers mois a été fortement marquée par les technologies Air d'Adobe, et Silverlight de Microsoft.
Plusieurs éléments de la maquette ont été réalisés en flash : un slider, un abécédaire, une cabine d'essayage et surtout un carrousel de produits. Rapidement, Place des tendances y a vu 2 inconvénients :
Côté serveur, les interactions sont relativement les mêmes qu'avec un développement en flash le serveur renvoie du xml dans les 2 cas pour rafraichir le carrousel.
Côté navigateur, il est nécessaire de s'appuyer sur un framework javascript pour s'abstraire des différentes implémentations du javascript. On s'appuie également fortement sur divers composants pour gérer les animations et les fonctionnalités. Par ailleurs, il a fallu mettre en oeuvre une philosophie de développement unobstusive pour conserver une grande accessibilité dans le site. Ainsi, de nombreuses fonctionnalités restent utilisables même si le javascript n'est pas activé. Cet aspect facilite d'autant plus le référencement que les robots sont arrêtés par le javascript.
Au final, le carrousel est compatible Internet Explorer 6 & 7, Firefox 2, Safari 2 & 3 Opera. Côté plateforme mobile, l'ensemble des interfaces riches du site fonctionne également sur un iPhone par exemple. Le carrousel mis en place dans une technologie ouverte permet de s'affranchir des dépendances commerciales. Ainsi, une version flash du carrousel n'aurait pas été consultable sous iPhone.
Quand on parle interface riche, on pense généralement à Adobe et à son Flash, technologie établie sur les navigateurs depuis plus de 10 ans. Plus récemment, Flex, puis Silverlight et Air sont également apparus. Si la tendance est de plus en plus à l'ouverture (Adobe vient de rejoindre la linux foundation, Microsoft commence à respecter les standards sur ses navigateurs, ...), les formats de fichiers restent propriété des éditeurs. Ils sont donc protégés.
Les formats ouverts ont toutefois leur place. Le principe du dhtml n'est plus tout jeune. Pourtant, le javascript et le CSS n'ont cessé d'évoluer, et les framework tendant à faciliter les développement sous cette plateforme se sont multipliés. Ces technologies standard présentent l'avantage de ne pas "emprisonner" les utilisateurs. Flash, Air et Flex sont des technologies d'Adobe, Silverlight de Microsoft. HTML, CSS et javascript appartiennent à tout le monde. Les enjeux financiers entre ces grandes compagnies peuvent aboutir, ou pas, à des interopérabilités. Dans le monde mobile, ça se traduit dans l'actualité par 2 extrêmes :
http://www.placedestendances.com/
- le référencement: le flash n'est pas une technologie ouverte, et son code source est difficilement analysable par les robots qui scrutent les pages. Dans le cadre d'un site d'e-commerce, le référencement est particulièrement important: du trafic sur le site dépend le volume des ventes.
- la maintenance, c'est un argument plus inattendu. Le client a fait valoir qu'il est plus difficile de trouver des ressources en flash qu'en DHTML.
Côté serveur, les interactions sont relativement les mêmes qu'avec un développement en flash le serveur renvoie du xml dans les 2 cas pour rafraichir le carrousel.
Côté navigateur, il est nécessaire de s'appuyer sur un framework javascript pour s'abstraire des différentes implémentations du javascript. On s'appuie également fortement sur divers composants pour gérer les animations et les fonctionnalités. Par ailleurs, il a fallu mettre en oeuvre une philosophie de développement unobstusive pour conserver une grande accessibilité dans le site. Ainsi, de nombreuses fonctionnalités restent utilisables même si le javascript n'est pas activé. Cet aspect facilite d'autant plus le référencement que les robots sont arrêtés par le javascript.
Au final, le carrousel est compatible Internet Explorer 6 & 7, Firefox 2, Safari 2 & 3 Opera. Côté plateforme mobile, l'ensemble des interfaces riches du site fonctionne également sur un iPhone par exemple. Le carrousel mis en place dans une technologie ouverte permet de s'affranchir des dépendances commerciales. Ainsi, une version flash du carrousel n'aurait pas été consultable sous iPhone.
Quand on parle interface riche, on pense généralement à Adobe et à son Flash, technologie établie sur les navigateurs depuis plus de 10 ans. Plus récemment, Flex, puis Silverlight et Air sont également apparus. Si la tendance est de plus en plus à l'ouverture (Adobe vient de rejoindre la linux foundation, Microsoft commence à respecter les standards sur ses navigateurs, ...), les formats de fichiers restent propriété des éditeurs. Ils sont donc protégés.
Les formats ouverts ont toutefois leur place. Le principe du dhtml n'est plus tout jeune. Pourtant, le javascript et le CSS n'ont cessé d'évoluer, et les framework tendant à faciliter les développement sous cette plateforme se sont multipliés. Ces technologies standard présentent l'avantage de ne pas "emprisonner" les utilisateurs. Flash, Air et Flex sont des technologies d'Adobe, Silverlight de Microsoft. HTML, CSS et javascript appartiennent à tout le monde. Les enjeux financiers entre ces grandes compagnies peuvent aboutir, ou pas, à des interopérabilités. Dans le monde mobile, ça se traduit dans l'actualité par 2 extrêmes :
- l'inclusion de flash dans Windows Mobile
- jusqu'à présent, le refus d'Apple d'intégrer flash dans l'iPhone
http://www.placedestendances.com/
Derniers commentaires
Grégoire Lecocq - mai 31 2018
Je suis sur Facebook pour ma propre pub. Mais Diaspora m'intéresse d'autant plus…
solution mobile entreprise - janvier 16 2018
Merci pour le partage d'informations. Il est très important pour une entreprise…
voip tech - décembre 1 2016
je veux votre contact technique pour réaliser un test a fin de créer un compte.…
abderrahmen - novembre 6 2015
je fais mes premiers pas sur Selenium.
abderrahmen - novembre 6 2015
bonjour , je fais mes premiers pas sur selenium.
Didier - octobre 4 2015
A signaler: les mini-ascenseurs foutent la m**de dans la programmation…