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

Cet outil permet simplement d’afficher par dessus vos pages une grille  pour mieux vous rendre compte de ce que va visualiser l’internaute

sans utiliser l’ascenseur. Utile pour voir ce qui est vu en premier sur votre page.

Mais attention cette grille est réalisée en fonction d’un panel d’internautes consultants google.com  ce qui veut dire que cette grille n’est pas forcément adaptée

pour les Ecommerces. Les internautes au niveau des Ecommerces ayant des habitudes de repérages comme l’emplacement du caddie, du moteur de recherche,

de certains boutons, … ne vont pas réagir pareil qu’un visiteur sur google

Pour l’utiliser: Browser Size

Pour avoir une idée plus précise de ce que voit l’internaute, il faut faire de Eyes Tracking

Voici une lightbox facile à intégrer et qui permet d’insérer des flash ou autre page via Iframe

Elle comporte des thèmes différents : clair, foncé, avec sous ans coins arrondis.

Un petit défaut pas de traduction en français. Il faut juste changer les boutons.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Suite d’une liste de plugins en Jquery utiles pour vos sites

Menus

http://www.getintothis.com/pub/projects/rb_menu/

Type  Ipod

http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/

http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/

http://www.filamentgroup.com/examples/menusHierarchical/index2.php

http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/

http://p.sohei.org/jquery-plugins/clickmenu/

http://p.sohei.org/stuff/jquery/clickmenu/demo/demo.html

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

http://be.twixt.us/jquery/

http://jdsharp.us/jQuery/plugins/jdMenu/

http://users.tpg.com.au/j_birch/plugins/superfish

http://p.sohei.org/jquery-plugins/menu/

http://javascript-array.com/scripts/multi_level_drop_down_menu/?j

http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

Menu Contextuel

http://www.trendskitchens.co.nz/jquery/contextmenu/

http://abeautifulsite.net/notebook/80

Popup

http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/ 

Menu over sorte de bulles

http://www.webdesignerwall.com/demo/jquery/

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.

Voici  une liste de plugins JQUERY très utiles pour améliorer l’expérience utilisateur (l’ergonomie d’un site web).

On s’aperçoit qu’avec ce type de fonctionnalités le rapprochement en terme d’ergonomie et d’intuitivité d’un site web vers une application traditionnelle est très fort. Je dirais même qu’une interface logicielle peut être beaucoup moins ergonomique (je ne parlerais pas bien sûr de WPF qui est une évolution majeure dans le développement de logiciel, malheureusement loin d’être utilisé par grands nombres d’éditeurs de logiciels):

Boites de dialogue :

http://plugins.jquery.com/project/jmodal

Colonnes

http://www.codeasily.com/demo/few-column-list/few-column-list.html

Effets Fading

http://medienfreunde.com/lab/innerfade/

jquery.innerfade.zip (124kb)

Effets de transitons sur des images :

http://www.malsup.com/jquery/cycle/int2.html

Effets de Zooms

http://www.mind-projects.it/jqzoom_v10

http://www.mind-projects.it/projects/jqzoom/

Carrousels:

http://plugins.jquery.com/project/carousel3d

http://plugins.jquery.com/files/carousel3d_1.1_0.zip

http://www.webcssdesign.com/css/coins-arrondis-avec-jquery-css-et-une-seule-image/

Effets panoramiques

http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html?lang=fr

des blogs font l’inventaire de plugins Jquery :

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.webcssdesign.com/ajax/jquery-plugins-240-tutoriels-a-decouvrir/

http://www.webdesignerwall.com/demo/jquery/

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

Points essentiels

• Un développement contrôlé
• Vérifier, contrôler et corriger les risques d’injection HTML
  Ce type de détournements peut-être réalisé en tapant dans les formulaires du scripts non autorisés
• Vérifier, contrôler et corriger les risques d’injection SQL
  Ce type de détournements peut-être réalisé en tapant dans les formulaires du code SQL non autorisés pour en récupérer les informations de la base de données
• Vérifier, contrôler et corriger les risques de Cross Site Scripting (CSS)
  Permet d’exécuter du code au travers d’un autre nom de domaine. Peut donc être très dangereux!
• Vérifier, contrôler et corriger les validations de formulaires (clients et serveurs)
  Tous les champs doivent être contrôlés, leurs longueurs de champs, leurs conditions d’utilisation sur le client et sur le serveur.
• Vérifier, contrôler et corriger les risques de détournements de sessions
  Permet de récupérer des sessions utilisateurs alors qu’un autre utilisateur est connecté. Le CSS peut favoriser ce type de détournement.
• Les serveurs à jour
• Vérifier, contrôler et corriger les vulnérabilités des serveurs web
  Appliquer les services pack et les mise à jour. Appliquer et ajuster les droits sur les répertoires. Autoriser juste le nécessaire. Changer les répertoires Web par défaut.
• Vérifier, contrôler et corriger les vulnérabilités des serveurs Sql
  Appliquer les services pack et les mise à jour. Appliquer la sécurité du serveur.
• Les connexions sécurisées avec les certificats SSL
• Protégez les comptes de vos clients contre le filoutage.
  Les attaques de filoutage (également appelé hameçonnage) continuent d’augmenter : les vendeurs en ligne, les sites de vente aux enchères et même les sites d’actualités ont rejoint les établissements financiers comme cibles potentielles. Les hameçonneurs cherchent à obtenir les données de connexion des comptes. Cela signifie que toute entreprise mettant des comptes de connexion à la disposition de ses clients est une cible potentielle du filoutage. Les certificats SSL EV permettent de protéger les clients au moment de la connexion en leur assurant qu’ils se trouvent sur un site authentique et non sur un site de filoutage.
• Protégez votre marque contre les sites imitateurs
  Toute marque en ligne de valeur peut bénéficier des certificats SSL EV. Depuis des siècles, les gens ont été la proie des escrocs se faisant passer pour des personnes qu’ils ne sont pas. Cet « art » se retrouve maintenant en ligne où des sites imitateurs de marques prétendent être ce qu’ils ne sont pas.

Tous nos hébergements bénéficient de ce type de contrôles.

Tout nos développements web peuvent appliquer ces pré-requis pour en maximaliser la sécurité des sites web. Tout dépends de la sécurité que vous souhaitez appliquer à vos sites.

Nous pouvons également vous proposer des certificats SSL pour en assurer la sécurité des connexions mais également pour en garantir la validité de l’identité du propriétaire.

D’autres questions peuvent se poser sur les risques non techniques (juridique, …)

Quelle différence avec ASP.NET 2.0?

Plusieurs clients m' ont demandés les différences entre les versions du NET, voici un petit résumé
qui vous montre le travail qu' effectue Microsoft et la communauté pour faire évoluer sa technologie.
Le Framework 3.5 est une sur couche du 3.0 qui est une sur couche du 2.0

(1) en fait installé sur la .NET 3.0

Pour plus d' informations consulter ces liens :

Framework 2.0

Framework 3.5 et ASP.NET 3.5

Framework 3.5 SP1

Nous pouvons vous proposer un hébergement .NET 2.0, 3.0,  3.5 SP1 contacter Olivier Alessandri au 0661332211
ou par email au contactez nous