Christophe Le Bot

  • Navigation rapide
Pratique de la conception numérique

Derniers commentaires

  • Une excellente thèse sur Simile Exhibit
    • Olivier Rossel | Bonjour. Malgre les annees, avez vous toujours en memoire vos usages d’Exhibit? Je serais ravi d’en discuter avec vous. Cordialement, Olivier Rossel.
  • Utiliser le planificateur de tâches OVH (crontab) avec PHP
    • Max | Bonjour, comme faire pour appeler une version de PHP qui n’est plus proposée par défaut dans le manager ? J’essaie de lancer un cron avec php 5.3 mais le log affiche No such file...
    • Christophe | @absolument Merci pour ces précisions. Je n’ai pas mis en place de tâches cron récemment, mais j’ai reçu quelques notifications étranges d’OVH il y a quelques...
  • Récupérer le dernier auto-incrément MySQL avec PHP
    • Thy | Sujet toujours *très* utile en 2015 ! Je réponds à Serge tsimba qui récupère un « Resource id ». (Et à tous ceux qui ont le même souci mais qui ne le disent pas) :)...
  • Régler l’heure de serveurs virtuels sous Debian
    • Ares_XL | Il semble que sur Débian la commande « tzconfig &ra quo; soit dépréciée et remplacée par : « dpkg-reconfigure tzdata » elle donne accès à une...
 

Magentips, mon nouveau blog Magento

Magentips

Il y a deux ans, quand j’ai commencé à mettre le nez dans Magento, il n’y avait rien ou quasiment rien sur le web pour traiter le sujet. Alors j’ai toujours eu l’idée d’un blog pour centraliser l’information pratique au quotidien. Mais comme souvent, les autres priorités ont gelé cette initiative assez rapidement…

Depuis, il s’est passé beaucoup de choses autour de Magento. De nombreux sites dédiés ont fleuri et m’ont fait douter de l’intérêt de créer un YABAM (Yet another blog about Magento). Alors tout cela est resté dans un carton, à moitié achevé, pendant une dizaine de mois.

Et pourtant, voilà Magentips ! Comme quoi tout arrive. Je doute de ma disponibilité pour en faire le YABAM le plus riche de la planète, mais je souhaitais partager mes expériences Magento en dehors des sentiers battus et des premières évidences. La page A propos détaille cela.

Je vois donc cette initiative personnelle comme un complément à des outils existants. Certains partages de contenu se feront donc naturellement vers des sites de référence comme le blog français officiel Magento, Fragento et Wikigento. Comme dirait Philippe Humeau (Wikigento), « on peut œuvrer ensemble dans le même sens, sans perdre son indépendance et sa liberté de ton ».

Bienvenue sur Magentips !

Vous pouvez aussi retrouver Magentips sur Twitter.

Essayez vos lunettes avec Enjoy Sunglasses

Accueil Enjoy Sunglasses

Et voilà, Enjoy Sunglasses est en ligne ! Ce site e-commerce qui vend des lunettes de soleil, est l’un des rares à proposer d’essayer ses produits… en temps réel et en ligne !

Pour un client, rien n’est plus frustrant que d’acheter un produit qui ne lui va pas. Pour un vendeur, rien n’est plus frustrant que de perdre des ventes parce que le client n’a pas essayé le produit. Partant de ce constat, Enjoy Sunglasses a misé sur des technologies innovantes et propose l’essayage des paires de lunettes sur son propre visage. Une prouesse rendue possible par l’utilisation des outils d’essayage de Fitting Box.

Intégré à chaque étape-clé de la navigation, l’essayage virtuel offre enfin un moyen rapide de sélectionner la bonne paire de lunettes en fonction de la forme de son visage.

Retours d’expérience

Au-delà du concept plus qu’intéressant, j’ai eu la chance et le plaisir de vivre ce projet de l’intérieur. Toute l’équipe d’Ekinos a, en effet, participé à la construction de ce site autour de la plate-forme e-commerce Magento. Un travail parfois long et souvent difficile car les besoins étaient très éloignés du standard et les technologies utilisées longues à caler.

Sans tout dévoiler (ce n’est pas fini, une suite est déjà en route…), ce projet nous a permis de sortir des sentiers battus et de mettre à profit l’architecture si particulière de Magento. Oui, Magento est un gigantesque Lego. Oui, on peut faire des choses étonnantes avec. Mais quelle exigence ! J’avoue que la jeunesse de la solution nous a causé pas mal de soucis, cependant nous avons acquis une belle expertise dans le développement de modules, l’optimisation des performances et les méthodes de production adaptées à Magento (cycles de tests, packages, données de test et de production, installation, migration, etc.).

Nous avons maintenant une longue liste de points d’amélioration pour les futures versions de Magento, avec, en première ligne, la gestion des règles de calcul de prix pour le marché français et européen (prix HT, prix TTC, TVA, remises et escomptes, règles officielles d’arrondis sur 5 décimales, contextes d’application, etc.). Je reviendrai sur ce sujet pour préciser les aspects métier et fiscaux qui doivent être intégrés dans le standard Magento. C’est curieux : tous les intégrateurs Magento ont ce soucis, mais personne n’ose le dire…

Manque plus que l’soleil !

Maintenant, le site est en production. Avec l’arrivée du printemps (plus quelques fonctionnalités…), Enjoy Sunglasses sera, je l’espère, l’un des piliers du e-commerce ! Il faut bien rêver un peu, d’autant que les équipes d’Enjoy Sunglasses et de Fitting Box méritent bien ce succès : le projet est réfléchi, exigeant, précis et bien piloté. J’avoue prendre beaucoup de plaisir à travailler avec des gens qui ont des idées et de l’énergie pour les concrétiser. Surtout quand ils ont l’intelligence d’être souples face aux obstacles !

Je tiens aussi à remercier l’équipe qui partage mon quotidien chez Ekinos et a réalisé ce travail. Le challenge valait le coup, non ? Oui, bon, je sais, on soufflera plus tard : on doit livrer des projets encore plus dingues… J’y retourne !

Sauvez les développeurs !

Mettre au point des sites web qui fonctionnent avec Internet Explorer 6 relève du défi ! Ce qui devait arriver, arrive : Save the developers!

Pour ma part, j’ai pu mesurer le temps passé à mettre au point une interface pour Internet Explorer 6 : 15 à 25% du temps de développement des interfaces web ! Sans parler de l’énervement au sein des équipes de développement…

Alors, s’il vous plaît, mettez à jour votre navigateur web ! Ce sera bénéfique pour tout le monde : les développeurs pourront concevoir des interfaces plus rapidement, les applications web seront plus stables et vous bénéficierez d’un outil efficace et adapté au web d’aujourd’hui.

Vous avez l’embarras du choix :

Téléchargez Internet Explorer

Si vous tenez à rester dans le giron de Microsoft, installez dès que possible Internet Explorer 7. Les améliorations sont notables, même si nous sommes encore loin d’un résultat idéal. Il paraît qu’Internet Explorer 8 sera enfin un navigateur digne de ce nom. J’attends de voir… Bref, vous l’aurez compris : ce n’est pas mon préféré.

Téléchargez Firefox

Firefox 2 est le navigateur web le plus utilisé par les développeurs, grâce à une interface intuitive et une multitude d’extensions. Seule ombre au tableau : sa gourmandise en terme de ressources mémoire. Mais Firefox 3 apportera un sérieux changement de ce côté. Incontournable et recommandé par les professionnels.

Téléchargez Opera

Opera, c’est LE navigateur web par excellence. Léger, rapide, complet, il a tout pour plaire, en particulier son support quasi parfait des normes du W3C. S’il reste marginal sur les ordinateurs, il est le roi du web mobile !

Téléchargez Safari

Proposé par Apple, Safari est le navigateur web par défaut de MacOS, mais il fonctionne aussi sous Windows. Un bon produit qui possède la magie Apple. Parfait pour l’utilisateur qui ne veut pas s’embarrasser de technique.

Quel que soit votre choix, le plus important est d’abandonner Internet Explorer 6 !

Naviguer dans les graphes, un défi pour la conception d’interfaces ?

Le web sémantique est à la mode. Cette nouvelle « découverte » des notions fondamentales de l’informatique (le web est jeune, qu’il en soit pardonné…) entraîne une évolution des interfaces, à commencer par celles qui facilitent la compréhension et la manipulation de graphes de données.

Exemple avec le site dédié à l’exposition Design and the Elastic Mind du MoMA.

Interface du site web Design and the Elastic Mind
Interface du site web Design and the Elastic Mind.

L’interface (réalisée en Flash) permet de naviguer d’un article à un autre, grâce aux liens typés affichés sur chaque article sélectionné. L’idée est intéressante et l’aspect très réussi, mais l’ensemble manque d’efficacité (la destination d’un lien est imposée et la représentation mentale de l’ensemble est difficile).

Finalement, malgré son âge (7 ans), je trouve Kartoo plus efficace pour naviguer d’une information à l’autre, via leurs relations intrinsèques (même si ces dernières sont déduites de l’indexation des sites et ne gèrent ni l’orientation, ni la composition). Je l’utilise régulièrement quand un moteur « classique », comme Google, ne peut affiner une recherche floue.

Exemple de résultat Kartoo
Exemple de résultat de recherche avec Kartoo.

Autre approche, Visuwords qui tente de typer fortement les relations entre les données. Le résultat est exhaustif, mais, au-delà d’un item (ce que ne fait pas Visuwords), sa lecture nécessite du temps et un effort intellectuel important.

Visuwords
Recherche d’un mot dans le dictionnaire Visuwords.

Malgré le degré de finition de ces quelques exemples (et de tant d’autres glanés sur le web), je reste encore sur ma faim. Est-ce si difficile de concevoir une interface efficace pour naviguer dans des graphes complexes de données ? Je finis par le penser. A croire que notre (mon) cerveau n’a pas naturellement vocation à maîtriser ce type de représentation de l’information qui nous semble pourtant si intuitif…

Au bout du compte, j’en viens à me demander si la manipulation de graphes ne devrait pas être la chasse gardée des machines. Twine semble parfaitement tirer profit de cette approche.

Graphe de données Twine
Un graphe Twine… que l’utilisateur ne verra jamais !
Interface de Twine
L’interface de Twine, simple et pertinente.

Quand faire intervenir le designer ?

De l’article consacré aux difficultés de Dell, diffusé par Le Monde (Fragilisé, Dell se cherche un nouveau modèle, 3 mai 2007), je n’ai retenu qu’une phrase. Non pas que les objectifs de Michael Dell, de retour dans la galère le navire ne m’intéressent pas, mais parce qu’il y est question de design :

Des designers ont été recrutés et désormais un produit sera dessiné avant d’être conçu. Avant c’était le contraire.

Cet aveu est étonnant à double-titre :

  • Il me semblait que les machines Dell étaient réputées pour leur conception aboutie (fiabilité, silence, manipulation, installation, service clients). J’ai dû louper un épisode…
  • Je croyais que les grandes entreprises, américaines de surcroît, avaient compris depuis longtemps le rôle du designer. J’ai rêvé trop vite…

La situation

Comment en est-on arrivé là ? Le problème vient de l’incompréhension du mot design et du rôle du designer. Le design est trop souvent perçu comme synonyme exclusif d’apparence (ou d’aspect, de forme, d’esthétique, si vous préférez). D’où la tentation de limiter le coût du design à un peu de saupoudrage visuel, juste avant la mise en production.

Les responsables

A qui la faute ?

  • Aux designers, certainement, qui n’ont pas su expliquer leur métier, il est vrai très changeant (je suis bien placé pour le savoir, puisque j’ai géré et animé pendant 8 ans une association de promotion du design).
  • Aux managers parce qu’ils ne sont pas sensibilisés, ni formés aux atouts du design (le design devrait faire partie du programme MBA !).
  • Aux institutions et autres organismes de développement économique parce qu’ils n’ont pas les outils pour mesurer et expliquer l’efficacité du design (quoique sur ce point, les évolutions sont perceptibles ces derniers temps).
  • A notre système éducatif qui peine à sortir d’une ingénierie entièrement dévouée aux prouesses technologiques (condition nécessaire mais pas suffisante, pour reprendre le vocabulaire des « têtes bien pensantes »).

La réalité

« Bon finalement, le designer sert à quoi ? » Voici la définition qu’en donne l’École nationale supérieure de création industrielle (ENSCI – Les Ateliers) :

Au sein de l’équipe de conception, le designer veille à la cohérence structurelle du produit. Les solutions qu’il retient sont non seulement de nature à garantir le bon aspect de l’objet produit mais surtout sa parfaite organisation interne et la pertinence de son rapport à l’utilisateur.

Verner Panton disait :

Le travail du designer est de coordonner à tous les niveaux de production, d’étudier et de répondre aux exigences du consommateur, de dépasser les bases objectives et de trouver une cohésion claire et délibérée entre les facteurs pratiques et esthétiques.

La pratique

« C’est bien beau ces discours, mais moi, quand dois-je faire intervenir le designer ? » Tout au long du projet, et en particulier au début, quand les grandes orientations doivent être définies. Imaginez juste un instant un produit Apple dessiné après avoir été conçu…

Bad Usability Calendar, 12 erreurs ergonomiques sous nos yeux

Bad Usability Calendar 2007 (capture)

Ce n’est pas vraiment une nouvelle fraîche, mais je voulais garder une trace de cette bonne idée dans mon blog (la version papier que j’ai sur mon mur n’étant pas assurée de passer l’année !).

Bad Usability Calendar 2007 est un excellent concentré des erreurs ergonomiques que l’on trouve dans les interfaces web. Tout le monde en prend pour son grade, aussi bien les développeurs que les webdesigners.

J’espère que les prochaines éditions suivront l’évolution des outils et des interfaces pour voir en un clin d’oeil le chemin parcouru d’année en année.

» Bad Usability Calendar 2007 au format PDF (format A4 – 1,2Mo)

Une histoire du design interactif par Etienne Mineur

A l’occasion de la première soirée des Designers interactifs, Etienne Mineur a présenté une histoire du design interactif.

FireBug, l’outil de développement et de test web ultime

Logo Firebug

Développée par Joe Hewitt, à qui l’on doit l’interface de Netscape et de Firefox ou encore la librairie Boxely d’AOL, FireBug est une extension Firefox pour faciliter le test et la correction d’applications web riches (HTML, CSS, Javascript, XML et Ajax).

Attendue depuis quelques mois comme le Graal du développeur web, je viens d’en tester la dernière version (v.0.4.1 du 13 octobre 2006). Bilan ? Il suffit de trente secondes pour comprendre que cet outil est indispensable ! Petite tour de ses atouts.

Après une installation automatique et sans histoire, FireBug est accessible par le menu principal de Firefox. Une icône apparaît également dans la barre d’état et indique si la page web en cours est valide (icône verte) ou si elle contient des erreurs (icône rouge avec le nombre d’erreurs). Un volet permet d’utiliser toutes les fonctions de FireBug directement sous la page web testée.

Inspection du code

FireBug possède un inspecteur contextuel très efficace pour parcourir le code d’une page web. Il suffit de placer le pointeur sur un objet de la page pour en voir le code HTML ou obtenir des données numériques (taille, position, marge, espacement…). Si des fichiers sont liés (styles, scripts), il suffit d’ouvrir la balise HTML correspondante pour voir le code du fichier lié. C’est simple et rapide ! L’inspecteur gère aussi les styles CSS. On peut contrôler leur définition sur n’importe quel objet et détecter rapidement des conflits d’attributs. Quant aux as du DOM (Document Object Model), ils seront ravis d’en consulter les propriétés de façon aussi simple.

FireBug - Inspection des objets HTML
Mise en surbrillance du code HTML d’un objet survolé.
FireBug - Inspection des styles CSS
Valeurs des attributs de style d’un objet survolé.
FireBug - Inspection du DOM
Inspection du DOM.

Affichage des erreurs

En cas d’erreurs dans une page (HTML, CSS, Javascript), FireBug en dresse la liste et le détail (objet, valeurs, numéro de ligne…). Comme l’accès au fichier incriminé est immédiat (lien vers le fichier, puis sélection de la ligne), la détection des erreurs est très efficace.

FireBug - Affichage des erreurs
Affichage des erreurs dans la console.

Debugger Javascript

FireBug ne se contente pas d’afficher les erreurs, il peut aussi servir de debugger en testant les scripts Javascript pas à pas. Bien sûr, beaucoup d’entre nous trouverons ses fonctions trop simples, mais il est suffisant dans 80% des cas. Et il y a une console Javascript en prime pour exécuter des commandes directement !

Contrôle des flux Ajax

Je garde le meilleur (à mon goût) pour la fin : l’Ajax Request Spy. Avec lui, le trafic Ajax entre le client et le serveur n’aura plus rien à cacher ! J’adore.

Conclusion

Même si Joe Hewitt est encore loin de la version 1.0, son travail est déjà remarquable et terriblement efficace. Pour ma part, je garde la version actuelle qui m’a déjà permis de faire le ménage dans plusieurs sites en… 20 minutes ! En ce moment-même, je constate que l’interface de gestion de WordPress (moteur de mon site) contient, elle aussi, des erreurs… C’est redoutable.

CRAP, Contrast Repetition Alignment Proximity

Encore un acronyme de quatre lettres ! Voici donc CRAP !

Rien de révolutionnaire dans celui-là. Tout est déjà connu depuis bien longtemps, si longtemps même que le web n’existait pas… C’est la revanche du graphiste papier sur le web designer !

GrayBit, le gris à la puissance web

Tous les graphistes vous le diront : « si ça marche en gris, ça marchera en couleur ! ». En effet, le gris a l’énorme avantage de mettre en avant les contrastes, la répartition des blancs, la pertinence des choix typographiques, l’équilibre des blocs.

GrayBit a donc appliqué au web ce petit secret d’expert et supprime les couleurs de n’importe quel site web ! Voilà le résultat avec le site très coloré de techcrunch.com :

L’interface de Techcrunch en gris

Même si les annonces publicitaires restent en couleur, c’est assez convaincant, à condition que le site soit construit sur un code HTML propre et ses styles sur des fichiers CSS.