En janvier l’équipe de JQuery  organise un événement sur 14 jours pour expliquer sa nouvelle version la Jquery 1.4.

Des vidéos et des articles sont diffusés tous les jours avec une explication, par jour, de nouvelles fonctionnalités jusqu’au 27/01

Jour 1 :  un article sur les nouvelles performances de la version 1.4 , encore plus rapide..

Voici des graphes qui parlent d’eux même :
Plus d’explications sur les nouvelles améliorations  sur cette page : http://jquery14.com/day-01

Pour faire suite à un article du 26/12/2008 dans le hub Ecommerce, Ergonomie et Retours Utilisateurs sur Viadeo :

Visiter et participer au hub

Je souhaiterais vous parler des inscriptions OBLIGATOIRES dans les Ecommerces car 2 écoles s’affrontent celle du web marketing et celle de l’ergonomie

Coté Web Marketing

Les partisans du Marketing veulent imposer des formulaires de saisie pour récupérer les adresses de facturation, de livraison et donc obliger une inscription.

• Cette inscription, obligatoire pour commander, permet de mettre en avant des promotions ou de simples produits liées à l’internaute authentifié. Grâce à son identification, la boutique connait les éléments de commandes et peut donc proposer des produits similaires on appelle cela un environnement contextuel.  Cela a pour objectif d’augmenter le nombre de conversion de prospects en clients ou d’augmenter les ventes des clients. La technique peut être très efficace  et également très plaisante pour l’internaute qui se voit proposer une multitude d’objets liés à son microcosme.
• Cette technique mémorise les adresses du clients qui n’a pas besoin de les retaper
• Elle permet également de suivre les commandes en cours et d’avoir un historique des commandes
• Elle historise la navigation de l’internautes : données également utilisées pour proposer des produits suivant les centres d’intérêts.

Amazon.fr en est  un fort exemple : www.amazon.fr

Apparemment  il n’y aurait que des avantages à cette technique!

Coté Ergonomie

Ergonomiquement parlant certains points sont très intuitifs comme la mémorisation des adresses, le suivi de commande ,…. et ne sont donc pas à bannir!

Mais le nombre de ecommerces étant très importants, l’internaute se retrouve à s’inscrire sur une multitude de sites et possède des dizaines voire des centaines de paramètres de connexion (un pour chaque site) et il se lasse de s’inscrire.  Il m’est moi même arrivé de ne pas commander car le formulaire était trop long ou tout simplement présent.

Les Ecommerces sont-ils obligés d’inscrire le prospect? Techniquement non! Il doit pouvoir commander sans être dans l’obligation de s’inscrire. Il va rentrer ses adresses (facturation, livraison, …) et passer commande. Quand il reviendra il retapera tout cela! Pas de mémorisation des données! Le commerçant possède quand même le nom du client (nom, prénom, société, email, …)  et peut  donc envoyer des informations (newletters) au client.

Que choisir ?

En fait il faut, à mon sens, proposer les 2 techniques sans imposer d’inscription.

Cela permet de coupler le meilleur des 2 mondes et de maximiser les conversions : on ne perd ni d’un coté ni de l’autre.

J’ai décidé de relayer certains articles du hub Ecommerce, ergonomie et retours utilisateurs sur Viadéo dont je suis responsable.

dans le but d’élargir le public visé et de pouvoir illustrer certains de mes articles car sur viadéo ce n’est pas possible.

Chaque article commencera par  “Ecommerce, ergonomie et retours utilisateurs“, Voici donc le premier de la série :

L’ergonomie des carrousels :

On voit pousser un peu partout des carrousels :

ce système qui fait tourner des images de produits sur une ellipse ou une ligne et donne un effet de profondeur ou cyclique avec mouvements perpétuels ou manuels.

Voici quelques exemples de systèmes:

Carrousels linéaire cycliques  :

Voici quelques liens à visiter avec démo et installation : http://sorgalla.com/projects/jcarousel/examples/static_simple.html http://sorgalla.com/projects/jcarousel/examples/static_vertical.html http://sorgalla.com/projects/jcarousel/examples/static_auto.html http://sorgalla.com/projects/jcarousel/examples/static_controls.html http://sorgalla.com/projects/jcarousel/examples/special_easing.html http://thomlx.free.fr/jquery/jquery_carousel.htm

avec différents effets de fondus :

Voici quelques liens à visiter avec démo et installation : http://www.agilecarousel.com/examples/full_example http://www.agilecarousel.com/examples/jqueryui_example http://www.agilecarousel.com/examples/simple_example

Carrousel sur ellipse ou Carrousel 3d :

Voici quelques liens à visiter avec démo et installation : http://www.hotajax.org/download/mootools/3d-carousel/index.html http://interface.eyecon.ro/demos/carousel.html http://interface.eyecon.ro/docs/carousel http://plugins.jquery.com/files/carousel3d_1.zip http://plugins.jquery.com/project/carousel3d http://www.spypoint.com/FR/cameras.html

3d Wall

Voici quelques liens à visiter avec démo et installation : en flash (très joli)  http://www.flashloaded.com/flashcomponents/3dwall/example3.html

Par contre, je trouve qu'il est parfois très difficile d'arrêter le mouvement pour ce positionner sur un objet et j'ai dernièrement vu sur un site un mouvement tellement rapide que l'on apercevait a peine les objets!

Ce qui en fait un système, très difficile d'utilisation et donc pour des internautes moins avertis, les objets tournants ne seront pas visualisés et donc passeront à autre chose. L'effet escompté par le commerçant sera inexistant : Mettre en avant certains produits!

Vous pouvez voir certaines réactions sur Le Hub  de  Viadeo : Ecommerce, ergonomie et retours utilisateurs

De nombreuses librairies javascripts (jquery, extjs, scriptaculous,dojo,…) existent pour rendre plus intuitives vos interfaces web.

Mais  une a plus particulièrement attirée mon attention :  Jquery

Pourquoi choisir cette librairie ?

1. - elle est très complète
2. - la communauté est importante
3. - les plugins importants
4. - les bugs réparés rapidement

Qu’a t-elle de spéciale par rapport aux autres ?

1. Son concept de base : utiliser la structure hiérarchique du document HTML (Le DOM)
2. Le script ne parasite pas le code HTML : utilisation des attributs “id” et “class” des tags
3. Elle supporte l’XmlHttpRequest (Ajax)
4. Externalisation du script qui permet de gérer les événements
5. Installation très facile par de simples liens (link) et l’étiquetage des tag Html via Id ou Class
6. Légèreté de la librairie

Les principes de bases :

1. Des actions sur les noeuds du DOM (choix d’éléments, boucle sur des éléments, événements : un langage dans le langage, …)
2. Des effets et animations : fade, déplacement (sliding), de tremblement, de glissement, …
3. Des widgets : drag and drop, accordéon, sliders, tri, barre de progression, datepicker, boite de dialogue, onglets, …

Beaucoup d’animations pour enrichir vos interfaces web et en améliorer l’expérience utilisateur.
On se rapproche de logiciels classiques avec peut-être encore plus d’esthétique et d’ergonomique.

Que peut-on faire avec Jquery ?

1. des carrousels,
2. des popup nouvelles génération (lightbox, thickbox, greybox)
3. des menus de toutes sortes : verticaux, horizontaux, onglets, hierarchique, …
4. des Glisser-Déplacer
5. des menus déroulants plus ergonomiques
6. des tooltips plus joli, plus paramétrables
7. …

sans rechargement des pages bien sûr!

voir le site www.jquery.com

et les sites en version française :

www.jquery-france.com 

www.jquery.info

Un prochain article listera les différents plugins utiles : menus, boite de dialogue, lightbox, thickbox, greybox, drag and drop, …

Une autre libraire peut également faire des effets similaires mais je trouve qu’elle n’a pas tous ces avantages : c’est Library Ajax  de l’ASP.NET. Fournie de nombreux exemples avec  l’AjaxToolkit

Vous trouverez ce symbole   sur beaucoup de sites et quand vous cliquez dessus une page de texte, avec ce que l' on appelle des balises, apparaît.

Cette page présente vos informations dans un format structuré de données qui peux être lu par un programme informatique tel qu' un site web ou un logiciel sur votre PC.

Ces  informations que vous publiez sont accessibles par d' autres et le principe est que la source de l' information n' est modifiable que par celui qui l' a créée. Cela permet de centraliser les informations à un seul endroit et de faciliter sa mise à jour.

Pour lire ces informations il vous suffit soit d' utiliser un lecteur de flux RSS que vous installez sur votre PC, soit des scripts php ou code ASP.NET pour les afficher sur votre site.

Vous avez directement l' information d' un site sans avoir besoin d' aller sur le site.

Pour les internautes :

Les logiciels : utiliser un lecteur RSS, Google Reader peut également lire des flux.

Les navigateurs : ils mettent en forme ces flux et vous donnent la possibilité de vous y abonner, gratuitement bien sûr.  C' est vous qui choisissez votre source d' information. Par contre il faut aller régulièrement vérifier les informations si elles ont changées au contraire  du ping service.

Voir la liste des lecteurs RSS

Pour les webmaster :

utiliser des scripts ou code pour afficher ces flux et également pour écrire des flux et les mettre à disposition.

Format d' un flux Rss : un fichier texte  avec une extension rss, xml ou autre c' est le contenu qui est important!

<?xml version="1.0" encoding="US-ASCII"?>

<rss version="2.0" xmlns:im="http://purl.org/rss/1.0/item-images/" >

<channel>

<docs>http://www.emploi-en-ligne.com/</docs>

<description>Destin&#233; &#224; favoriser la diffusion d&#039;information sur l&#039;emploi, ...</description>

<link>http://www.emploi-en-ligne.com/</link>

<title>Emploi-en-ligne.com : Annuaire sur l&#039;emploi et le monde du travail</title>

<image>

<title>Emploi-en-ligne.com : Annuaire sur l&#039;emploi et le monde du travail</title>

<url>http://emploi-en-ligne.com/ressources/images/rss/logoeelpetit.gif</url>

<link>http://www.emploi-en-ligne.com/</link>

<description>Destin&#233; &#224; favoriser la diffusion d&#039;information sur l&#039;emploi, le travail, </description>

</image>

<category>Emploi</category>

<item>

<title>ICC Executive Search</title>

<link>http://www.emploi-en-ligne.com/sites/agences/cadre/fiches/52/detail/</link>

<description>ICC Executive Search, recherche et recrutement de cadres et dirigeants par approche direct en Europe.</description>

<guid>http://www.emploi-en-ligne.com/sites/agences/cadre/fiches/52/detail/</guid>

<author>rss@emploi-en-ligne.com</author>

</item>

</channel>

</rss>

En réseau : le ping est une commande qui permet de savoir si le serveur ciblé est disponible et à quel vitesse ce dernier répond.

Explication

Le ping service de la même façon envoi une notification de façon automatique ou manuelle à un service pour lui indiquer qu' un message ou article vient d' être publié.

Simplement votre site utilise une adresse web sous un protocole spécifique appelé RDP, protocole également utilisé par la technologie Terminal Serveur de Microsoft.

Voici quelques adresses de Ping Service :

1. http://rpc.technorati.com/rpc/ping
2. http://blogsearch.google.com/ping/RPC2
3. http://ping.feedburner.com
4. http://rpc.icerocket.com:10080
5. http://services.newsgator.com/ngws/xmlrpcping.aspx
6. http://api.feedster.com/ping.php
7. http://rpc.pingomatic.com

Conseils sur son utilisation

1. Par exemple quand  vous utilisez pingomatic vous notifiez ce site d' un nouvel article et ce dernier va notifier à son tour d' autres sites soit une 20aines donc attention à ne pas mettre des urls en double. Ce service est implémenté sur quasiment tous les Blog comme WordPress, BlogEngine, DotClear, ...
2. Attention : quand vous publiez un article, si le ping est actif, votre article sera récupéré donc soyez sûr de son texte, même si vous pouvez le modifier par la suite