Bob el Web cherche un expert Javascript (CDI)

Un de mes clients : Bob el Web - éditeur de solutions en ligne pour le spectacle vivant cherche un développeur spécialisé en Javascript. Voici l'annonces, n'hésitez pas à la faire tourner dans vos réseaux :

La société Bob El Web, leader en France de l'édition de logiciels de gestion destinés aux tourneurs de spectacles et aux professionnels de la musique, recherche un expert javascript pour un poste à pourvoir à compter du 1er juillet 2009.

Initialement proposé sous forme de base de données Filemaker, le logiciel phare de la marque, « Bob'Prod », est en cours de portage sur une plateforme Internet. A ce titre, Bob El Web développe une interface utilisateur similaire aux clients riches présents sur les applications dites de bureau. Il ne s'agit donc pas d'agrémenter une application web classique avec des fonctionnalités mineures, mais bien de réaliser un client riche basé presque uniquement sur Javascript (et plus particulièrement le framework extjs) et capable de dialoguer avec une solution php.

D'abord en renfort de l'équipe existante, le futur salarié sera progressivement autonome sur les questions d'interface et d'ergonomie. Il aura la charge de développer les fonctionnalités manquantes, mais également de consolider et optimiser l'existant.

Si vous aimez les challenges et êtes prêt(e) à rejoindre une petite équipe dynamique évoluant sur un marché de niche en pleine mutation, voici ce que vous devez savoir sur le profil recherché :

• Niveau Bac +2 ou supérieur en informatique.
• Programmation Javascript orientée objet. Utilisation d'au moins un framework parmi : Extjs, prototype, YUI, jQuery.
• Maîtrise des feuilles de styles et du HTML.
• Capacité à apprendre par soi-même, curiosité, passion pour le web et les interfaces utilisateur. Cette qualité est fondamentale et pourra être étayée par les expériences ou projets réalisés. Elle peut également permettre de sélectionner un candidat qui n'aurait pas toutes le compétences citées dans les points précédents.
• Capacité à travailler en équipe, à composer avec l'existant tout en apportant les idées qui peuvent progressivement faire évoluer les développements.
• Des compétences en php sont un plus.

Des compétences en FLEX et actionscript peuvent également constituer un plus très apprécié.

Ne passez pas à côté de la chance d'appréhender un nombre varié de sujets liés aux développements web, et de montrer vos capacités et votre motivation dans un environnement où elles pourront s'épanouir pleinement !

Pour plus d'informations sur le poste et pour faire acte de candidature, contactez Nicolas Béliard à l'adresse nico [at] bobelweb.eu
Vous trouverez plus d'informations sur la société Bob El Web sur : www.bobelweb.eu

Contrat proposé : CDI
Salaire envisagé : 22k€, suivant expérience et qualifications.
Lieu de travail : Bordeaux, dans les locaux de l'entreprise.

Portrait robot du e-commerçant

Oxatis vient de publier les résultats d'une enquête sur le profil des e-commerçants réalisé auprès de 2 500 sites marchand. L'étude complète est disponible ici.

Les résultats de cette étude bouscule un certain nombre d'idée reçues sur le commerce électronique. Si on voulait résumer cette étude et dresser le portrait robot du e-commerçant, on pourra dire que celui ci :

• est plutôt un quadra : 51 % entre 35 et 49 ans
• habite plutôt en zone rurale : 53 % habitent dans des agglomérations de moins de 10 000 habitants
• est plutôt diplômé : 44 % sont bac+3 ou plus
• travaille plutôt en solo : à 56 %
• a monté son activité pour être plus libre (horaires, travail à domicile)
• et n'est ni un pure player (70 % ont aussi une boutique physique) ni un geek

Ce portrait est clairement différent de l'image que l'on a habituellement du commerçant en ligne jeuneparisienpureplayerpreparantsasecondelevéeedefond !

La donnée pour moi la plus significative est la proportion relativement réduite de pure player (30%). La grande majorité des 48 500 boutiques en ligne françaises constitue donc pour leurs éditeurs une activité d'appoint. Ce fort pourcentage explique que 31% des boutiques font moins de 10 commandes par mois et 47,6 % entre 10 et 100 commandes par mois (sources Fevad).

Vous vous reconnaissez dans ce portrait robot ?

Un carrousel de produits avec Yahoo UI - 2/2

Après avoir construit l'interface de notre carroussel produits, nous allons maintenant l'animer, toujours en utilisant la librairie Yahoo UI.

Nous allons pour se faire construire 2 fonctions : la première pour faire défiler les produits (f_play) et la seconde pour arrêter le défilement (f_stop). Ces deux fonctions utilisent les méthodes setTimeout() et clearTimeout().

function f_play (p) {
 if(isNaN(p) == true) {
  var p = 0;
 }   
 var p = p % 6;
 tabView.set('activeIndex', p);
 p++;
 t = setTimeout("f_play("+p+")",2000);
  }
function f_stop (event) {
 //var cible = YAHOO.util.Event.getTarget(event, true)
 var p = this.id
 tabView.set('activeIndex', p);
 clearTimeout(t);
}

La durée d'affichage du produit en partie gauche est fixée à 2000 millisecondes soit 2 secondes.

L'appel de ces fonctions se fait par le code suivant :

YAHOO.util.Event.addListener(window, "load", f_play);
var ids = ["0", "1", "2", "3", "4", "5"];
YAHOO.util.Event.addListener(ids, "click", f_stop);

Vous pouvez voir ce carroussel en action sur la boutique de cosmétique Oanisha.

Pour toutes informations complémentaires sur la librairie yahoo et son utilisation, je vous invite à consulter le site Yahoo Developer Network.

AB testing : Acheter ou Ajouter au panier

La question du jour est : quel est le meilleur libellé pour le bouton d'ajout au panier ? Le texte le plus courant est "Ajouter au panier" on trouve également quelques fois "Acheter" ou autres libellés plus exotiques du genre "Je le veux" ou "j'adore, j'achète !".

Ce bouton est d'une importance capitale pour maximiser le taux de transformation. Toutes les composantes de ce bouton sont importantes : le texte bien sur, mais également la couleur, la typo et l'emplacement.

Une littérature abondante existe sur le sujet et en particulier sur les blogs Ikom : "Bouton ajouter au panier" ou Capitaine Commerce : "80 boutons Acheter, peut être même plus". Ces articles constituent un état de l'art et propose des bonnes pratiques.

Ces bonnes pratiques sont une base de départ indispensable, mais pour réellement maximiser le taux de transformation, il existe une solution très efficace : l'AB testing. Sous ce terme quelque peu barbare se cache un concept assez simple : on teste 2 hypothèses (A et B) pour déterminer la plus efficace.

Web-Impact intègre depuis peu une fonctionnalité d'AB testing qui peu être utilisée pour optimiser les différents aspects d'un site web. Pour ne pas trop dérouter les visiteurs habituels du site, l'hypothèse B qui représente la nouvelle hypothèse n'est proposée qu'à 20% des visites.

Une fois que l'on a déterminé la meilleure hypothèse, le jeu est de continuer l'optimisation en mettant l'hypothèse gagnante avec une nouvelle hypothèse.

Un carrousel de produits avec Yahoo UI - 1/2

Avec le développement des interfaces riches (RIA) il est de plus en plus fréquent de croiser des carrousel de produits sur les boutiques en ligne. Il faut dire que cette fonctionnalité est plutôt pratique et permet d'afficher plusieurs produits en rotation sur un espace réduit.

Il existe au moins 2 manières de réaliser cette fonction : en flash ou en javascript. C'est cette dernière voix que nous allons utiliser et faisant appel à la librairie Yahoo UI qui va nous permettre de réaliser le carrousel rapidement et de façon conforme aux standards W3C.

L'idée est de réaliser un carrousel qui ressemble à la copie d'écran ci-dessous : 1 produits mis en avant (à gauche) parmi une liste de 6 produits, le produit à gauche changeant toutes les 2 secondes. Lorsque l'on clique sur l'un des produits de la liste de droite, ce produit est affiché à gauche et le défilement automatique est arrêté.
Pour construire le carrousel, nous allons utiliser le composant TabView de YUI. Les onglets de ce composant sont habituellement situés en haut, mais il est également possible de les afficher à droite ce qui va bien nous aider dans notre cas.

Pour initialiser le composant TabView, nous aurons besoin d'appeler les fichiers suivants :

<script type="text/javascript" src="/yui/yahoo-dom-event/yahoo-dom-event.js"><script>
<script type="text/javascript" src="/yui/element/element-beta-min.js"><script>
<script type="text/javascript" src="/yui/tabview/tabview-min.js"><script>

Il sera également nécessaire d'appeler la feuille de style des onglets :

<link rel="stylesheet" type="text/css" href="/yui/tabview/assets/skins/sam/tabview.css">

Le code html du carroussel se présentera de la manière suivante :

<div class="yui-skin-hp marginbottom" id="Carroussel">
  <div id="product" class="yui-navset">
      <ul class="yui-nav">
          <li id="0">
              <!-- Lien produit 1 -->
          </li>
          <li id="1">
              <!-- Lien produit 2 -->
          </li>
          <li id="2">
              <!-- Lien produit 3 -->
          </li>
          <li id="3">
              <!-- Lien produit 4 -->
          </li>
          <li id="4">
              <!-- Lien produit 5 -->
          </li>
          <li id="5">
              <!-- Lien produit 6 -->
          </li> 
      </ul>
      <div class="yui-content">
          <div style="margin:5px">
              <!-- Détail produit 1 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 2 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 3 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 4 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 5 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 6 -->
          </div>
      </div>
  </div>
</div>

Le code suivant permet d'initialiser le carroussel et de lui passer les paramètres d'affichage :

var tabView = new YAHOO.widget.TabView('product', { activeIndex: 0 } );
tabView.set('orientation', 'right');

Nous avons maintenant la "carcasse" du carroussel. Nous verront dans le prochain billet comment l'animer.

HTML, CSS : Revenons aux bases

Depuis bientôt 15 ans que je baigne dans le monde merveilleux du web, j'ai vu passer un grand nombre d'évolutions majeures et même de petites révolutions. Nous sommes ainsi passé de pages essentiellement textuelles, faute de bande passante pour diffuser des images, à des interfaces riches (RIA) ou au déploiement de véritable applications web.

Force est de constater que cette profusion de nouvelles fonctionnalités et de nouvelles technologies a pu faire oublier aux développeurs la base de toute page web : le HTML. Sans doute considéré comme trop trivial par beaucoup d'informaticiens, le HTML se retrouve bien souvent être le parent pauvre des applications web.

Paradoxalement, alors que les évolutions du web n'ont jamais été aussi présentes, la qualité du codage HTML revêt aujourd'hui une importance toute particulière dans plusieurs domaines de premier ordre :

• La compatibilité entre navigateur : jusqu'à il y a quelques mois, les choses étaient simple, un navigateur trustait 80 ou 90 % des parts de marché, il pouvait donc être tentant de faire l'impasse sur la compatibilité du code. Aujourd'hui 2 navigateurs se partagent le marché à part égale ; la compatibilité est donc indispensable.
  
• La maintenance des applications : Une application développée dans le respects des standards sépare les données (le html) de la présentation (les css) et utilise les balises html juste. Ces pratiques fournissent un code plus court, plus lisible et sur lequel graphistes et développeurs peuvent travailler séparément.
  
• Le référencement naturel : c'est un enjeux majeur de la visibilité d'un site. Une des conditions d'un bon référencement naturel est un code html respectueux des standards et en particulier du web sémantique.

Le premier point sur lequel porter son attention est le le Doctype. Ce point nécessiterait à lui seul un article entier. Pour faire court, le doctype indique au navigateur la manière de lire et d'interpréter lapage HTML. En l'absence de définition, le navigateur passe en mode quirks, c'est à dire qu'il interprête la page comme il peu. Ce type d'interprétation a 2 conséquences : des différences d'interprétation et donc de rendu entre différents navigateurs et un travail d'interprétation plus difficile pour le navigateur (demandant donc plus de ressources).

Il existe pas mois de 6 doctype différents :

• 2 versions : HTML 4.01 et XHTML 1.0
  
• 3 types : transitional, frameset, strict

Dans le cadre de la création d'un site il est recommandé d'utiliser XHTML 1.0 Strict. Ce doctype est plus le rigoureux mais celui qui donnera les meilleures résultats. Il y a au minimum 2 règles à garder présente à l'esprit pour ce doctype : il s'agit de XML donc toutes les balises doivent être fermée (un <BR> par exemple n'est pas conforme et devra être écrit <br />) et la présentation doit être assurée par en CSS et non dans le HTML.

Pour tout savoir sur le doctype vous pouvez consulter cet excellent article sur Alsacréation.

Le second point important concerne le web sémantique. Il s'agit notament d'utiliser chaque balise html pour l'usage dans lequel elle a été conçue. Un titre de page par exemple ne doit pas être défini par un <div class="titre"> mais par un <h1>. Un tableau sert à affichées des données et en aucun cas à assurer une mise en page. La bonne utilisation du html et du css rendra votre code plus facile à comprendre par tous les "utilisaeurs" : navigateur, moteur de recherche, logiciel vocaux et également plus clair donc plus facile à maintenir.

Vous trouverez plus d'information sur le web sémantique sur Open Web.

Pour valider vos pages, vous pouvez utiliser les outils du W3C pour les pages html ou les css.

Université Jam au Salon des Micro Entreprises

J'étais invité hier aux université Jam (société de portage salariale) qui se déroulait dans le cadre du Salon des Micro Entreprises. Pour ces universités qui avait regroupé une cinquantaine de consultant, Jam nous avais concocté un programme dense, mais des plus intéressants.

Les hostilités ont débutées à 12h avec un Speed Business Meeting qui nous a permis de rompre la glace de façon ludique avec mes petits camarades consultants. Les discussions se sont poursuivies autour d'un buffet déjeunatoire.

La recherche de clients pose souvent un problème aux consultants mais elle est pourtant indispensable à toute activité. La première conférence avait donc pour thème "Consultants : comment gagner de nouveaux clients ?". Elle était animée par Frédéric Vendeuvre, Fondateur du cabinet de formation Halifax. Pandant 1h30, Frédéric, nous a donné les principales clés pour trouver de nouveaux clients et c'est attaché à nous présenter la vente, non pas comme une corvée, mais comme une activité ludique dans laquelle il était possible de prendre du plaisir. Un des points qui m'a semblé le plus important est de savoir renoncer à une vente ou à un client si les conditions ne sont pas équilibrées.

A l'issue de cette séance plénière, les consultants Jam ont eu la chance de retrouver Frédéric en petit comité pour un atelier de 2h ou avons pu lui poser tous nos questions.

Second temps fort de cette après midi, la conférence animée par Philippe Bloch, co-auteur de « Service compris », fondateur de Columbus Café, auteur de « Bienheureux les Fêlés… » et animateur sur BFM. Philippe est intervenu sur "Faites la différence par le service !" et a fait de nombreuses disgressions, fortes intéressantes, sur son parcours et ses expériences. J'ai retenu en vrac :

• l'importance relative du business plan : "Ca ne sert qu'à rassurer un banquier ou un investisseur, mais c'est toujours faux".
  
• La richesse de l'apport des autodidactes pour innover : "Tout le monde savait que c'était impossible à faire. Puis un jour quelqu'un est arrivé qui ne savait pas, il l'a fait" - W. Churchill
• Travailler avec des collaborateurs qui nous font avancer : "en France le recrutement est souvent fait sous forme de poupées russe : un manager recrute souvent quelqu'un de moins bon que lui qui ne le mettra pas en danger qui à son tour recrute quelqu'un de moins bon ...."
• Pour un entrepreneur, le vrai moteur est la passion : "l'enterpreneur importe du stress et exporte de l'enthousiasme".

A la fin de cette conférence, je suis tombé sur Jean Hubert, alias Le Tribulateur qui couvrait le salon en tant que blogeur accrédité (la classe !).

Cette après midi dense c'est terminée autour d'un verre par une séance de dédicasse du premier livre de Philippe Bloch "Service Compris".