Tangane - Solutions for Business Value
juil 6

Allumez votre télé mais ne la regardez pas : contentez-vous de l’écouter sans en voir les images. Arrivez-vous à saisir le contenu d’un film ? D’un jeu télévisé ? Du journal de vingt heures ? De la météo ? C’est un secret que personne ne tient à garder mais que peu de gens connaissent : l’image n’est pas indispensable à un bon journal télévisé, la voix suffit à transmettre l’essentiel de l’information.

Et ce n’est pas facile. D’ailleurs, il suffit d’écouter un film sans le regarder pour se rendre compte à quel point l’expérience peut devenir dépendante de l’image si on ne fait pas attention à répéter, de vive voix, les points importants que cette image montre.

Même à la télévision, moyen de communication inaliénablement visuel, c’est le son qui transmet l’information et relègue l’image à un statut accessoire : illustrer les paroles, mettre en confiance le spectateur, présenter l’information avec plus de clarté et d’élégance. Tout cela pour que les gens qui ne font qu’écouter leur téléviseur (parce qu’ils sont occupés à autre chose, ou tout simplement parce qu’ils ne peuvent pas voir) puissent profiter du journal télévisé.

Il existe sur internet deux types de visiteurs. D’une part, il y a la majorité, ceux qui visitent les sites avec un équipement raisonnablement moderne, capable de gérer Java, Flash, Javascript, les cookies et le CSS. Et puis, il y a les autres, qui n’acceptent pas les cookies, n’exécutent pas le Javascript, ignorent la mise en page des CSS et ne voient même pas Flash et Java. Un tout petit pourcentage que bon nombre de sites ignorent à l’heure actuelle, et pas toujours des moindres (essayez donc Facebook sans Javascript et YouTube sans Flash).

Logo Facebook Logo Youtube

Pourtant, il y a des situations où l’on ne peut pas ignorer ce pourcentage, aussi faible soit-il, pour deux raisons élémentaires:

  • Tous les moteurs de recherche sont dans cette catégorie. Lorsque Google visite un site, il ne voit pas tout le texte que l’auteur a mis dans un Flash ou les pages que son Javascript remplit dynamiquement après leur chargement. Ignorez cette catégorie, et votre référencement en prendra un sacré coup.
  • Les lecteurs braille ou la synthèse vocale interagissent très mal avec le contenu enrichi. Si l’auteur du site a une politique d’accessibilité (que ce soit par stratégie, ou par contrainte administrative) il n’aura d’autre choix de que de pourvoir aux besoins de ces visiteurs.

Une solution peu coûteuse à ce problème est l’amélioration progressive. Elle consiste à partir d’une page telle qu’elle sera vue par la minorité sans Java, Flash, Javascript ou même CSS. Cette étape permet de détecter en amont des problèmes d’accessibilité : un synthétiseur vocal devra lire le texte dans l’ordre, donc si le contenu intéressant est loin en-dessous du début de la page cela pourra poser des problèmes. Elle met également en valeur les problèmes de référencement : les éléments importants ont-il bien été mis en valeur par des balises appropriées (strong, em, h1, h2, …) au lieu d’être juste mis en avant visuellement par le CSS ? Enfin, il est possible de tester les fonctionnalités de la page directement : les liens sont-ils valides, les pages importantes sont-elles accessibles ?

Une fois la page conçue pour une compatibilité maximale, on commence à l’améliorer. Cela repose sur le remplacement conditionnel : si un explorateur gère une extension (le CSS, le Javascript) alors il remplace une fonctionnalité existante par une fonctionnalité améliorée. Cela ne change donc pas les fonctionnalités disponibles si les extensions ne sont pas présentes.

logo_jquery_215x53

jQuery est une bibliothèque de fonctions Javascript qui permet de faciliter ce travail. Au lieu d’introduire le comportement dynamique directement dans la page à l’aide des attributs onclick, onmouseover, onload et autres, un script qui utilise jQuery les introduit depuis l’extérieur de la page, souvent depuis un fichier qui ne sera même pas téléchargé par les explorateurs qui n’exécutent pas les scripts.

Un script à base de jQuery fonctionne un peu comme un fichier CSS : on sélectionne des éléments de la page à l’aide d’une syntaxe proche, puis on leur applique des propriétés pour modifier le comportement de façon plus ou moins complexe. Les possibilités sont vastes pour rendre une page plus dynamique, plus belle, plus réactive ou tout simplement mieux présentée, sans pour autant sacrifier d’accessibilité ou de référencement.

Qui plus est, jQuery fonctionne sur une architecture de plugins: il y en a des centaines pour faire à peu près tout ce qu’on peut imaginer, proposés par des développeurs partout dans le monde de façon totalement gratuite, et suivant le même principe d’amélioration progressive que le coeur de jQuery. Et tout ceci pour une taille réduite, puisque la bibliothèque principale ne pèse que 19 kilo-octets et peut être mise en cache sur l’ordinateur du visiteur.

juin 23
Jamin-Puech
icon1 Victor Nicollet | icon2 Retour d'expérience | icon4 23 juin 2009 |  icon3Aucun commentaire »

Jamin-Puech fabrique et vend des sacs à mains, bijoux et accessoires partout dans le monde, de Tokyo à New York en passant, bien sûr, par Paris. Mais jusqu’à il y a peu, impossible d’acheter leurs sacs directement sur Internet.

small_2897_2236C’est désormais possible grâce au nouveau site e-commerce réalisé par Tangane sur la base d’une plateforme Magento. Vous pouvez également lire notre annonce officielle à ce sujet.

En soi, le site Jamin-Puech suit sans aucune surprise le schéma classique de l’adaptation de Magento aux besoins d’une entreprise bien établie :

  • Une phase d’accompagnement et de conseil de notre client, afin de le faire bénéficier de notre expérience dans le domaine de l’e-commerce acquise entre autres chez Carrefour et Ooshop, et de lui permettre de s’organiser et de prendre des décisions informées sur sa stratégie.
  • La conception et l’intégration d’une charte graphique représentative de l’univers et de la marque, ainsi que la traduction.
  • L’amélioration du comportement de Magento pour s’adapter aux spécificités des clients, pour permettre par exemple aux partenaires de passer par le site pour leurs achats en gros.
  • Une liaison de données automatique entre le site et le système logistique existant, afin de simplifier au maximum la tâche des administrateurs et de l’équipe commerciale.
  • La configuration d’un système de paiement choisi parmi les nombreux systèmes que Magento (ou Magento Connect) propose.
  • Un nouveau zoom, développé en Flex, pour remplacer celui proposé par défaut par Magento.
  • Bien entendu, une formation complète des administrateurs et un support technique présent après la livraison du site.

Au cours du développement, nous nous sommes heurtés à certaines limites de la solution Magento, problèmes qu’il nous a fallu contourner ou résoudre, par exemple:

  • Magento ne permet de gérer, à l’échelle du système, qu’un seul stock par produit. Dans le cadre d’une gestion logistique différenciée (par exemple, qui sépare stock de détail et stock de gros) cette restriction peut s’avérer gênante.
  • Le système de filtrage de l’administration Magento est très puissant mais il ne permet de filtrer que suivant des colonnes prédéterminées, ce qui réduit grandement son efficacité. Nous avons étendu le filtre pour inclure des colonnes supplémentaires suivant les besoins.

Cette expérience nous a permis de développer ce qui revient au final à une stratégie Magento, comprenant à la fois des best practices que nous appliquons pour gagner du temps et éviter les erreurs, et un framework de code réutilisable sur un certain nombre de problématiques.

En particulier, nous disposons maintenant d’un framework d’import/export extensible qui fonctionne comme une couche intermédiaire automatisée entre Magento (dont l’API interne complète est ainsi directement accessible pour une flexibilité maximale) et le système logistique du client. L’adaptation d’un nouveau système logistique se fait par l’intégration de briques d’import spécifiques à ce système, mais qui peuvent bien entendu étendre les briques existantes pour recycler un maximum de fonctionnalités. À partir du moment où le système logistique respecte quelques règles simples en matière d’export, notre framework peut s’y adapter très rapidement.

Bon nombre de ces problèmes ont été résolus soit par des développements internes, soit en adaptant des solutions disponibles gratuitement sur Magento Connect.

juin 4

Voici quelques astuces permettant d’optimiser et d’améliorer le rendu d’un plan 2D en Flex contenant de nombreux éléments (jusqu’à plusieurs milliers). Dans le cas présent, il s’agit d’un plan dynamique : les éléments sont chargées à la volée, le plan peut être agrandi, déplacé, etc. On se trouve donc dans un cas typique de cartographie.

Fluidité des déplacements

Lorsque l’on déplace ce plan (ou que l’on zoome dessus) en utilisant un effet Move ou Zoom, le Flash Player doit redessiner l’ensemble du plan à chaque itération de l’effet. Ce traitement peut devenir très lourd : plus il y a d’éléments et moins le mouvement sera fluide. Une méthode répandue dans beaucoup d’applications de cartographie réalisées en Flex est de diminuer la qualité de rendu lors de l’exécution de l’effet. Une fois l’exécution terminée, on peut remettre une qualité de rendu supérieure.
Une certaine perte de netteté sera visible lors de l’effet, mais celle-ci est minime comparée au gain de vitesse (et donc de fluidité du mouvement).
Voici le code a exécuter au début de l’effet pour diminuer la qualité de rendu de l’animation Flash :

Application.application.stage.quality = StageQuality.LOW;

Voici le code a exécuter à la fin de l’effet pour remettre la qualité de rendu élevée de l’animation Flash :

Application.application.stage.quality = StageQuality.HIGH;

Lissage des polices

Si sur ce plan il y a des éléments de types Label ou Text, on peut constater qu’en zoomant sur ces éléments, les polices ne sont pas lisses. Pour y remédier, il faut embarquer la police avec le fichier .swf, ce qui permettra d’avoir un texte lisse peu importe le niveau de zoom. Pour embarquer une police, il faut tout d’abord récupérer un fichier .swf contenant ces polices. Il est possible d’en faire soi-même avec le logiciel Flash, mais ceci n’est pas l’objet de cet article. L’intégration de ce fichier se fait via la déclaration CSS suivante :

@font-face
{
    src:                url('/assets/fonts/myriad.swf');
    font-family:        'Myriad Pro';
    font-weight:        bold;
}

Cette méthode n’est pas l’unique pour embarquer des polices dans une animation Flash, mais elle offre le meilleur compromis taille du fichier .swf / qualité de rendu.

Redimensionnement de textes

Une fois le code précédent inclus, les textes seront propres et lisses. Toutefois, il reste un souci à régler. Vous remarquerez peut-être que lorsque l’on zoome, les libellés “vibrent”, ou tout du moins se déplacent très rapidement de gauche à droite. Pour éviter ce désagrément, il existe un style de la classe Label assez méconnue : fontGridFitType. Ce style accepte trois valeurs : NONE, SUBPIXEL, PIXEL. Elle permet de spécifier la correspondance d’un TextField sur une grille.
Voici un exemple vous permettant de voir (et ainsi de mieux comprendre) le fonctionnement de cette propriété fontGridFitType.
On constate donc que pour éviter cette impression de “vibration”, il faut setter la propriété comme ceci (en MXML) :

<mx:Label text="Flex" fontGridFitType="none" />

Il existe bien évidemment d’autres types d’optimisations possibles dans ce contexte, comme par exemple l’utilisation d’un BitmapData généré à la volée pour afficher une miniature de la carte ou utiliser la solution Alchemy d’Adobe pour utiliser des algorithmes codés C ou C++ avec la machine virtuelle du Flash Player.

mai 12
Seul avec l’Open Source
icon1 Victor Nicollet | icon2 Open source | icon4 12 mai 2009 |  icon3Aucun commentaire »

Il est difficile de faire publier un livre : pour des raisons évidentes de rentabilité, les éditeurs sont très sélectifs sur les livres qu’ils acceptent de corriger, mettre en page, imprimer, relier, et envoyer aux librairies. Certains imprimeurs ont sauté sur l’occasion : les auteurs peuvent payer pour faire imprimer et relier leurs livres. L’un des premiers conseils que les cercles d’écriture donnent aux jeunes auteurs est de ne surtout pas tomber dans ce piège en cédant à la facilité! Une fois le livre imprimé, il faut encore le vendre, et ce qui coûte si cher dans la mise sur le marché d’un livre n’est certainement pas son impression, mais au contraire le riche réseau de contacts qui permet à un grand éditeur de faire apparaître ses ouvrages sur les étagères des grandes librairies. Réseau que le jeune auteur qui fait imprimer ses livres n’a pas.

Quel est le rapport avec le mouvement Open Source ? Patience.

Depuis quelques années maintenant, des solutions Open Source envahissent le marché des logiciels, proposant des alternatives gratuites dans de nombreuses situations où seuls les logiciels payants constituaient des solutions sérieuses. Souhaite-t-on gérer ses relations clients ? On peut gratuitement télécharger et installer SugarCRM. Faut-il vendre ses produits en ligne ? La solution Magento est d’une popularité croissante. Doit-on s’échanger intelligemment des documents sur une plate-forme interne ? Alfresco propose une édition libre accessible à tous. Ouvrir un blog ou un site public au contenu régulièrement mis à jour ? Wordpress est là pour vous servir. Et la liste est encore longue…

Les solutions Open Source sont mûres : on est loin de l’interface utilisateur incompréhensible et sans traduction française, on est loin du logiciel à moitié incomplet dans lequel un informaticien expérimenté devra plonger jusqu’aux coudes pour accomplir les choses les plus élémentaires. Bon nombre de solutions sont maintenant fournies par des entreprises sérieuses, et peuvent se vanter de références prestigieuses et diverses.

Être Open Source, cela veut souvent dire être gratuit - l’éditeur propose alors pour se financer des services supplémentaires payants, comme l’hébergement, le support technique ou une version commerciale du logiciel proposant des fonctionnalités inédites. Pour une somme modique voir nulle, n’importe qui peut se procurer un logiciel de bonne qualité capable de satisfaire une grande partie de leurs besoins. Et c’est là tout le danger : à trop se concentrer sur le coût monétaire du produit, on perd de vue des coûts plus subtils qui n’en sont pas moins importants.

magento_logoPrenons Magento, une référence Open Source de la vente en ligne. On peut faire installer un site eCommerce en parfait état de marche pour moins de 120€. On peut même se procurer le système et l’installer soi-même gratuitement. Tout ceci rend le coût monétaire de Magento négligeable.

C’est lorsqu’on ouvre pour la première fois le panneau d’administration de Magento que l’on commence à saisir le coût non-monétaire associé. Le temps d’apprentissage pour pouvoir maîtriser les centaines d’options disponibles n’est pas négligeable.

Pourquoi l’interface d’administration est-elle si compliquée ? Parce que Magento permet de faire de la vente en ligne, et que faire de la vente en ligne est une activité compliquée : il ne suffit pas de permettre au client d’acheter, il faut l’inciter à acheter. Tout logiciel de vente en ligne abordera les mêmes problématiques et aura donc une interface aussi complexe que celle de Magento, car le vendeur doit :

  • Pouvoir renseigner et configurer ses produits, du nom au prix en passant par le stock et la photo, et les répartir dans les catégories du site, éventuellement même dans le cross-selling et l’up-selling.
  • Pouvoir gérer des sites multiples ou dans plusieurs langues, avec des règles distinctes sur les prix et les utilisateurs, ne serait-ce que pour avoir un site de test où visualiser ses modifications avant de les rendre publiques.
  • Pouvoir appliquer des promotions et des prix barrés suivant des règles plus ou moins complexes (suivant la quantité, suivant des points de fidélité, suivant les produits, suivant des codes promotionnels, suivant la période de l’année).
  • Gérer les modes de paiement en ligne, le traitement des commandes, l’expédition et les tarifs de livraison, le remboursement des produits épuisés.
  • Recevoir des rapports d’activité permettant d’évaluer le succès du site et de prendre des décisions tactiques et stratégiques.
  • Augmenter la visibilité de son site web dans les moteurs de recherche, guider la clientèle à travers le site vers les produits les plus rentables, et garantir de bonnes performances, pour que le passage des visiteurs sur le site soit fluide et agréable.

Si l’Open Source peut réduire à zéro le coût monétaire d’un produit, il ne peut pas réduire le coût d’apprentissage au-delà de la complexité intrinsèque du domaine, tout comme il ne peut pas réduire le coût d’apprentissage du domaine lui-même.

De ce point de vue, l’Open Source est cette même solution de facilité où les jeunes auteurs du haut de leur pile de livres invendus se rendent compte que la vraie difficulté n’était pas de les imprimer. Faire installer Magento pour 120€, c’est se retrouver avec un site qui fonctionne mais qu’on ne sait pas utiliser à son plein potentiel.

Faire de la vente en ligne, cela s’apprend. On peut lire des livres et des articles pour acquérir les bases et même avoir des bonnes idées et de l’intuition, mais bien des choses ne peuvent s’apprendre que par l’expérience et, souvent, par l’erreur. Et avec l’explosion de l’eCommerce ces derniers temps, le droit à l’erreur est un luxe que peu de vendeurs peuvent s’offrir…

Dans cette analogie, qui sont les vrais éditeurs, ceux qui poussent les livres jusque dans les étagères des librairies ? Ce sont les entreprises qui  ne se contentent pas de laisser leur client tout seul avec un logiciel complexe, mais qui au contraire partagent avec lui leur expérience du domaine, le forment, le conseillent, et lui proposent des stratégies adaptées à ses spécificités, qui laissent leur client avec la confiance et la capacité de pouvoir réussir son projet.

avr 30

Cet article est le dernier d’une série de trois sur le thème Identité et Sécurité. Vous pouvez consulter les autres article en suivant les liens suivants :

Mise en relation

Il manque dans tout ce système un détail. Comment le traiteur, qui n’a pour l’instant communiqué avec moi que par internet, peut-il savoir que je suis bien Victor Nicollet, habitant à l’adresse que je lui ai indiquée ? Il se pourrait tout à fait qu’un individu malveillant se fasse passer pour moi en associant mon nom à sa clé publique sur le site du traiteur. Ce dernier aurait donc en sa possession un contrat signé par une clé publique qui porte mon nom, alors que cette clé publique ne m’appartient pas !

Le plus simple (mais pas forcément le plus facile) est de fournir les identifiants de connexion en personne. Le traiteur peut me demander de passer à son siège pour que je lui donne ma clé publique. De la même façon, une banque peut envoyer par la poste un code d’accès au site à mon adresse, le Ministère de l’Economie, des Finances et de l’Industrie me demandera un identifiant qui se trouve uniquement sur mes avis d’imposition, et une école ou une entreprise me donnera les identifiants de mon compte informatique lors de ma première journée sur les lieux. Ces stratégies supposent donc que de se voir en personne (éventuellement, en regardant sa carte d’identité) permettent de s’assurer que celui qui reçoit les identifiants ou donne sa clé publique est bien celui qu’on veut voir.

On fait donc appel à un tiers de confiance qui a déjà identifié l’utilisateur et peut attester de son identité. C’est le principe même de la carte d’identité : celle-ci est juste la confirmation par un tiers de confiance (l’Etat) que l’identité de l’utilisateur correspond bien à son aspect physique (donné par la photo sur la carte) et à sa possession même de la carte. Comment transposer cela à l’informatique ?

Une manière de faire (qui existe depuis si longtemps qu’on la juge naturelle) est que le tiers de confiance donne un courrier électronique à l’utilisateur avec une adresse comportant son nom de domaine. Ainsi, pour l’adresse victor.nicollet@tangane.com, l’entreprise Tangane reconnaît que le propriétaire de cette adresse est l’individu Victor Nicollet qui travaille pour elle. Si vous faites confiance à Tangane, vous pouvez être certains que les courriers envoyés à cette adresse seront lus par moi, et pas par un individu qui se ferait passer pour moi. Par contraste, les mails envoyés à victor.nicollet@paradis-des-hackers.com seront probablement lus par la mauvaise personne.

Attention toutefois à ne pas en tirer de mauvaises conclusions : un courrier électronique qui vient de victor.nicollet@tangane.com n’a aucune raison d’avoir été écrit par moi ! Comme dans le monde réel, un individu peut indiquer sur l’enveloppe l’adresse d’expédition de son choix. Si un courrier électronique est d’une très grande importance, on peut vérifier son authenticité en demandant une confirmation (la demande de confirmation ne pouvant être lue que par le véritable propriétaire de l’adresse).

Ce type de vérification reste cependant peu pratique dans certaines situations. Par exemple :

Lorsque je visite pour la première fois le site de ma banque, en HTTPS, comment savoir que la clé publique qu’il me donne pour prouver son identité est bien la vraie, et non celle d’un individu malveillant qui se fait passer pour ma banque ?

Je télécharge en ligne un contrat d’assurance ou d’emprunt, je le signe, et je le renvoie par courrier électronique. Comment l’assurance ou la banque peut-elle vérifier que je suis bien celui que je prétends être, surtout si je n’ai pas de courrier électronique chez un fournisseur de confiance ?

La solution est d’utiliser ce qu’on appelle des réseaux de confiance. Pour prouver que ma clé publique est bien celle de Victor Nicollet, il me suffit de demander à une entité de confiance de signer un document numérique affirmant cela. Pour peu que l’entité de confiance soit reconnue (un pays, une institution internationale) mon interlocuteur, ainsi qu’un éventuel juge, acceptera cette signature comme la preuve que la clé publique m’appartient. Un contrat de la forme « je, soussigné Z, affirme que la clé publique X appartient à la personne Y » est appelé certificat, et les entités reconnues pour pouvoir signer un certificat sont appelées autorités de certification. Il suffit de se rendre auprès d’elles pour obtenir un certificat à son nom. Par exemple: http://www.verisign.fr/

Il existe une sorte particulière de certificat, appelé un certificat auto-signé : la personne Y affirme elle-même être la propriétaire de la clé publique X. Il n’interdit donc pas à un individu malveillant d’associer sa clé publique à un autre nom, mais il lui interdit en revanche d’associer son nom à ma clé publique. Certains logiciels, dont Adobe Reader, peuvent générer des certificats auto-signés.

« Articles précédents