Le blog d'Olivier FAURAX

Pendant l'été, je me balade sur le marché de nuit de La Ciotat, qui a lieu tous les soirs d'été, sur le vieux port. D'une année sur l'autre, c'est très amusant de voir comment évoluent les stands, les produits, mais surtout les attrape-couillons. L'année passée, la mode était aux sandales tressées et cette année, il y a au moins 3 stands d'accroches pour sac à main (crochet qui se mets sur le bord d'une table).

Je me suis arrêté sur un stand d'un vendeur de parfums, qui avait des méthodes de vente assez particulières, puisqu'il faisait une démo d'environ 10 minutes avant de vendre. Au bout de la présentation, les acheteurs se précipitaient pour acheter, il y en a même un qui a lancé son carnet de chèques pour être sûr d'être servi.

Le stand

Le stand est très dépouillé. On retrouve toujours le parasol/parapluie ciré blanc et carré qu'on retrouve dans tous les marchés. Derrière, et c'est d'une importance capitale, il y a une banderole avec un gros logo « Stop aux contrefaçons » et 3 lignes qui explique que les parfums viennent de Grasse, qui est une ville connue pour ses parfums. Je crois me souvenir qu'il y avait un truc comme « Destockage d'usine ».

Le vendeur est entouré de cartons, et ceux de devant forment une petite table. Il a un micro-casque et un ampli, ce qui lui permet d'être entendu de loin.

Méthode de vente analysée par des sociologues

Pour tenter de comprendre le phénomène, j'ai pas mal cherché sur le web, et je me suis rendu compte que cette méthode de vente a été analysé par des sociologues. On appelle pas ça un vendeur, mais un camelot, ou démonstrateur, et qu'on trouve dans les foires et les marchés.

La meilleure étude que j'ai pu trouver est celle de Ronan Le Velly nommée « Les démonstrateurs de foires : des professionnels de l'interaction symbolique ». Voir aussi Wikipedia sur l'interactionnisme symbolique.

Je dois aussi remercier l'humoriste Sellig, qui m'a permis de retrouver la dénomination exacte grâce au sketch Le Camelot de Sellig.

Tout commence par un bon public

Le démonstrateur commence par rassembler du monde (appelé aussi « le trèpe ») devant son stand en invoquant une opération spéciale, une vente promotionnelle ou tout autre raison justifiant un discount. Dans mon cas, c'était « avant de partir », puisqu'il était déjà 23h30. À minuit moins 10, quand je suis repassé, il remettait ça ;)

Ensuite, la « dem » (démonstration) est lancée, il y a un petit public devant le stand, ce qui attire encore plus de monde et ainsi de suite. Il explique que les parfums sont des versions « dégriffées » de grandes marques, et qu'ils sont bradés puisqu'il n'y a pas de marketing autour. Il nous explique aussi que des designers sont payés des fortunes pour concevoir les bouteilles de parfum.

Dans mon cas, le démonstrateur commence par poser 8 boites de parfum sous plastique devant lui, en expliquant que ce sont « les mêmes que Black XS ». Il demande à quelqu'un dans l'assistance de choisir une des boites, il l'ouvre et propose à ceux qui veulent de tester. Tout le monde tend son bras, il vaporise sur tout le monde, mais aussi à moitié à côté. Il demande ensuite quel est le prix en magasin et le donne si personne ne le connait.

Il y a déjà ici quelques éléments importants. Le fait de ne mettre que 8 boites « avant de partir » et pour une « opération spéciale » permet d'organiser la rareté. En gros, c'est « Dépêchez-vous, c'est une super bonne affaire ». Il y a un début de dénigrement des circuits de distribution classiques avec le méchant marketing qui fait augmenter les prix.

Un autre élément, c'est le test en direct en ouvrant une des boites. Le fait d'ouvrir une des boites prouve que ce n'est pas un échantillon spécial qui est utilisé lors des démonstrations. Le fait de vaporiser sur les mains permet aux personnes de vérifier que le parfum sent vraiment pareil que l'original.

Je pense que le fait de vaporiser un peu partout permet aussi de parfumer l'ambiance du stand, et de saturer le nez des gens les plus proches, qui entretiennent l'impression « qu'il se passe quelque chose » sur le stand et amène du monde. En terme de crédibilité, il serait catastrophique qu'une personne du premier rang s'en aille.

On empile de plus en plus

Sur les 8 boites de « comme Back XS », le démonstrateur ajoute 8 boites d'un autre parfum « exactement le même que X », avec X pouvant être Nina Ricci, Allure sport ou Black XS, il vaporise à tout-va, demande le prix en magasin comme au premier et il refait le coup encore 2 fois.

Pendant les empilements, il en profite pour expliquer que ces produits proviennent de Grasse (où il y a réellement de la fabrication de parfum) et que c'est pas « fabriqué en Chine ».

On finit donc avec 8 piles de 4 parfums, et il nous fait le total de combien ça devrait faire « chez Sefora ou Marionnaud ».

L'empilement un peu instable permet de faire sentir qu'il y en a beaucoup, voire trop (puisque ça pourrait tomber). On ajoute que le produit est un vrai produit local, pour jouer sur la corde citoyenne et sur le rejet implicite des produits sous-traités et de basse qualité. La vaporisation incessante mets les spectateurs dans une situation de réciprocité, puisque qu'on leur a fait tester les parfums gratuitement.

Le « coup de casque »

Après tout ça, c'est le moment du « coup de casque » c'est-à-dire quand il donne le prix. Il insiste qu'il va offrir ces 8 ensembles, « d'une valeur de 378 euros », au 8 premiers qui lèvent la main pour.... 20 euros !

4 parfums pour la moitié d'un, il y a toujours une flopée de mains qui se lèvent, et il les pointe du doigt successivement en leur disant « N'achetez pas ! ».

Il explique que cela montre que quand les consommateurs ont le choix, ils préfèrent acheter des produits locaux. Il ajoute ensuite un parfum sur les piles, « parce qu'ensuite on remballe ». Il annonce ensuite que les 8 plus rapides « en liquide ou en chèque » repartiront avec le lot de 5 parfums.

Et là, c'est l'émeute. Plusieurs mains tendent des billets de 20 euros, et il y en a un qui a jeté son chéquier, qui lui est gentiment rendu pour qu'il puisse le remplir.

Les « barons »

En fait, le vendeur, lorsqu'il annonce le prix et fait lever les mains, fait d'une pierre 3 coups. Ceux qui ont levé la main ont été montrés du doigt. Ils ont donc exprimé leur promesse d'achat et le fait que le vendeur la « valide » en fait une obligation morale. Un peu comme si on vous installait dans un restaurant, sans prendre votre commande tout de suite. Vous vous sentiriez mal à l'aise de changer de restaurant, même si concrètement, cela n'aurai aucune conséquence, la commande n'ayant pas été prise.

De plus, le « N'achetez pas ! » fait monter le stress de l'acheteur puisqu'on lui refuse, au dernier moment la bonne affaire, « sa » bonne affaire, puisqu'il était dans les 8 premiers !

Le 3e effet, c'est que ceux qui lèvent les mains montrent aux autres que « tout le monde en veut ». On appelle ça des « barons ». Si tout le monde se précipite, c'est que ça doit être exceptionnel. C'est le même mécanisme que la preuve sociale (« social proof ») utilisée en séduction. Ainsi, ceux qui sont juste un peu sceptiques sont influencés par les barons et quand le démonstrateur ajoute un 5e parfum, il les fait basculer dans le camp des acheteurs.

Plus fort que Jésus, le démonstrateur multipliait le parfum

Les 7 premières piles sont vendues rapidement. Elles sont vendues dans des sacs « Stop à la contrefaçon » rouges et blancs, très faciles à reconnaître, ce qui fait de la pub pour le stand, puisque les acheteurs se baladent ensuite sur le reste du marché. Les futurs acheteurs reconnaîtront les sacs et se souviendront d'avoir vu des gens qui « en ont acheté aussi ».

La 8e pile reste en place jusqu'à la fin et les sacs suivants sont faits à partir des cartons qui sont autour de lui. Cela permet d'en vendre en réalité plus de 8, en remplissant autant de sacs qu'il y a d'acheteurs.

Les objections sont tuées dans l'oeuf

Tout d'abord, il est primordiale de rassurer l'acheteur sur les raisons du rabais. En effet, inconsciemment, une réduction de prix se fait au prix de la qualité. C'est pour cela que la banderole insiste sur un destockage et/ou sur un « direct d'usine ».

Ensuite, l'idée qui vient le plus rapidement, c'est de penser que ce sont des contrefaçons. Là aussi, la banderole apporte une réponse, et les gros logos sur les sacs rassurent les acheteurs.

Le test avec ouverture des boites au hasard en direct est la meilleure preuve que les parfums sont les mêmes, du point de vue des acheteurs. Ceci dit, je ne sais pas si on peut vraiment faire confiance a son sens olfactif en ayant été complètement vaporisé par plusieurs parfums à la suite.

En général, les démonstrateurs ont l'habitude des objections et savent gérer au minimum les cas où un spectateur s'en va (il faut à tout prix lui faire perdre sa crédibilité pour que les autres restent) ou s'il demande des précisions sans arrêts et de façon insistante (ils appellent ça des « barbus », qui portent souvent des mocassins en cuir et une petite sacoche).

Le cas des parfums : est-ce une arnaque ou une contrefaçon ?

Ces infos ont été glanées sur des forums internet, donc elles ne sont pas vérifiées.

Tout d'abord, on ne peut pas parler de contrefaçons, puisque le nom n'est pas le même sur l'emballage. À la limite, le seul reproche, c'est au niveau des allusions aux parfums de marque, mais rien n'est écrit, donc ils ne prennent pas de risques.

Apparemment, il n'y a pas de brevets sur les parfums, parce que les professionnels préfèrent garder la recette secrète (un brevet oblige à publier la recette), et éviter qu'elle tombe dans le domaine public.

En fait, ces parfums sont des copies, comme du Coca Leader Price. Apparemment les parfums ont 3 composantes qu'on sent immédiatement, après quelques dizaines de minutes et après quelques heures. Les copies ne restent des copies qu'au début, et elles tourneraient ensuite, mais c'est suffisant pour la démo, surtout que votre nez est saturé (vous comprenez pourquoi il vaporise beaucoup).

Le problème des copies, c'est qu'on ne sait pas trop à quoi s'en tenir. Sur Internet, on parle de tests dermato moins poussés qui pourrait donner des allergies, jusqu'à de l'ammoniac récupéré dans l'urine des animaux qui rentrerait dans la composition.

Au sujet des fonds de cuve, il y a 2 théories. Soit les grandes marques font le mélange elle-même, ce qui fait qu'elle détruise le fond de cuve. Soit elle le récupère pour éviter ce genre de trafic. Apparemment, ce qui serait vendu en tant que fond de cuve serait plutôt des copies.

Les mauvais clients

Pour ce type de vendeur, il y a 2 types de mauvais clients.

Le premier type, c'est celui qui l'empêche de parler, qui l'interrompt, qui pose des questions, qui le fait répéter ou qui discute avec ses voisins.

Le second type, c'est celui qui connaît le système, et qui casse les astuces, par exemple avec des remarques comme « ha oui, je connais le truc, c'est des parfums qui tiennent 10 minutes ». C'est celui qui est devant et qui part au coup de casque, qui annonce le prix avant lui, voire pire, qui annonce un prix inférieur avant lui.

Et sur le web ?

Je me demande si certaines des techniques des démonstrateurs peuvent être reprise pour du marketing web. L'organisation de la rareté, très probablement, avec un beau compteur du nombre de produits qui restent, par exemple en affichant les stocks (comme le faisait La Fraise à l'origine). Une autre façon de faire de la rareté serait de donner une date butoir, un peu comme les enchères eBay. En combinant les 2, on obtient... le système utilisé par les ventes privées ! Il faut être là au bon moment et profiter des petites quantités. Et en plus, c'est très select, c'est sur invitation ;)

Je ne connais pas assez bien les ventes privées, est-ce que le prix est connu à l'avance ? (avant l'ouverture). Dites-moi dans les commentaires...

Par contre, quelque chose que je n'ai jamais vu et qui pourrait avoir un impact significatif, c'est de mettre le nombre de connectés à côté des chiffres du stock. Quand il y a de plus en plus de visiteurs, et que le stock diminue lentement, on crée l'urgence !

Et vous, comment feriez-vous pour devenir un démonstrateur du web ?

Le projet Freedesktop.org vise à favoriser la compatibilité entre les bureaux libres. Le but est d'unifier les interfaces et les composants communs, pour éviter de dupliquer le travail et permettre la bonne intégration des logiciels sur tous les bureaux.

Tango, l'un des sous-projets, fournit un style et des icônes unifiés pour les applications libres. GNOME, Gimp et OpenOffice.org utilisent d'ailleurs ces icônes pour leur interface (au moins sur ma machine Linux).

Le plus intéressant dans ce projet, c'est surtout que le site web de Tango fournit plusieurs éléments pour faire soi-même les icônes. Il y a des tutoriels vidéos, mais surtout la palette de couleurs qui sert de base à la création des icônes.

Cependant, les couleurs ne sont fournies qu'en RGB. J'ai écrit récemment dans un billet tout le bien que je pensais des couleurs HSL, et ce serait dommage de ne pas en profiter.

Voici donc la palette Tango en HSL, notation CSS.

Butter :

• hsl(53, 96.6%, 64.9%)
• hsl(53, 100.0%, 46.5%)
• hsl(48, 100.0%, 38.4%)

Orange :

• hsl(35, 96.9%, 61.6%)
• hsl(29, 100.0%, 48.0%)
• hsl(26, 100.0%, 40.4%)

Chocolate :

• hsl(36, 73.7%, 67.3%)
• hsl(36, 83.8%, 41.2%)
• hsl(37, 97.2%, 28.4%)

Chamelon :

• hsl(90, 75.0%, 54.5%)
• hsl(90, 81.0%, 45.5%)
• hsl(90, 92.5%, 31.4%)

Sky Blue :

• hsl(210, 49.2%, 62.9%)
• hsl(213, 51.9%, 42.4%)
• hsl(215, 61.7%, 32.7%)

Plum :

• hsl(306, 21.9%, 58.8%)
• hsl(291, 21.2%, 39.8%)
• hsl(287, 31.6%, 30.4%)

Scarlet Red :

• hsl(360, 86.1%, 54.9%)
• hsl(360, 100.0%, 40.0%)
• hsl(360, 100.0%, 32.2%)

Aluminium :

• hsl(60, 5.6%, 92.9%)
• hsl(90, 9.1%, 82.7%)
• hsl(85, 5.0%, 72.7%)
• hsl(84, 2.1%, 53.1%)
• hsl(90, 2.4%, 33.3%)
• hsl(195, 8.0%, 19.6%)

Pour tout avouer, j'en ai eu besoin moi-même, pour pouvoir manipuler des couleurs en Javascript : avec les couleurs HSL, il est plus facile de faire varier seulement la luminosité d'une couleur.

Guy Kawasaki (son blog) était un des reponsables du marketing du Macintosh en 1984.

En 2004, il a publié "The Art Of The Start", un recueil de bonnes pratiques pour les entrepreneurs, souvent applicables à mon avis au lancement de n'importe quelle bonne idée.

Donner du sens

Il y a trois façons de donner du sens :

• Améliorer la qualité de vie
• Corriger une erreur
• Empêcher la fin de quelque chose de bon

Améliorer la qualité de vie

C'est simple : c'est tout ce qui peut vous faciliter la vie. Si votre idée rend la vie meilleure, c'est une idée qui a du sens.

Quelques exemples : Google permet de trouver une information, ViaMichelin vous donne un itinéraire facilement, le four micro-onde chauffe la bouffe rapidement, l'automate de location de DVD permet de voir un film même en pleine nuit.

Corriger une erreur

Si quelque chose marche mal, toute solution est déjà une bonne idée !

Quelques exemples : Une clé USB permet de sauvegarder des fichiers facilement (corrige le manque de capacité de la disquette et la difficulté à graver un CD-ROM), l'espéranto est une langue neutre facile à apprendre (corrige la difficulté de communication internationale introduite par l'anglais).

Empêcher la fin de quelque chose de bon

Si quelque chose de bien menace de disparaître, une idée permettant de la sauver est une bonne idée.

Quelques exemples : Firefox empêche le web de devenir propriétaire, l'écologie protège la diversité des espèces, l'espéranto sauvegarde les langues régionales.

Ayez une devise

Choisissez une devise de 4-5 mots. C'est cette devise qui va guider vos choix : elle doit représenter votre projet. Une devise courte est facile à mémoriser et elle se propagera plus facilement entre collègues. C'est les quelques mots que vous mettriez en dessous de votre logo dans une page de pub.

Allez de l'avant

Pensez différemment ("Think different", slogan d'Apple). Aborder un problème sous un angle nouveau est source d'innovation. Ne pas se demander comment faire 10% mieux, mais 10 fois mieux.

Construire différemment.

• « J'en veux un » : construire son rêve
• « Mon employeur ne veut pas le faire » : faire mieux que son employeur
• « C'est possible, faisons-le » : invention pour l'invention
• « Ça doit pouvoir être meilleur » : amélioration d'un système existant

Compartimentez les gens : ils aiment ou ils détestent. La pire chose est l'indifférence. Même si c'est bien, il y aura quand même des gens qui détesteront. Faîtes-le pour les autres.

Trouvez des âmes amies. L'entrepreneur solitaire est un mythe, vous avez besoin d'autres entrepreneur qui partage votre vision.

Définissez un business model

Soyez précis. Qui est le client ? Pourquoi devrait-il faire attention à vous ? Quand va-t-il payer ? Combien ? Si vous savez où vous allez, vous trouverez plus facilement quelqu'un pour vous suivre.

Restez simple. Plus c'est compliqué, moins il y a de risques que ça marche. Copiez un buziness model qui marche.

Demandez à des femmes. Elles ont moins d'orgueil et d'ego que nous, elle peuvent voir les erreurs qu'on refuse par fierté.

Dresser un MAT (Milestone, Assumption, Task = Borne, Assertion, Tâche)

Borne : point de ralliement, date prévue pour la fin d'une période (livraison d'un produit). Les écrire permet de tenir le cap. Il y en a 7 : preuve du concept, spécifications, prototype, levée de capital, version de test, version finale, réinvestissement.

Assertion : proposition dont on veut tester la validité (si je fais de la publicité, mes ventes doivent augmenter : est-ce que c'est vraiment le cas ?) ou mesure d'une grandeur prévue (taille du marché sur laquelle se base les projections). Il est important de les écrire pour bien les vérifier, pour valider son business model ou son modèle financier, avant de mettre la clé sous la porte. En fait, beaucoup d'assertions sont testées lorsqu'on atteint une borne.

Tâches : action à entreprendre pour se rapproche de la borne et pouvoir tester les assertions.

Tout cela doit être combiné ensemble : quelles sont les les bornes les plus importantes ? Quelles sont les assertions de ces bornes ? Quelles sont les tâches restantes pour atteindre ces bornes ?

Se nicher

Fournir quelque chose d'unique et de grande valeur pour le consommateur. Si ce n'est pas unique, d'autres le feront et le marché sera très concurrentiel. Si le service a peu de valeur pour le consommateur, il s'en détournera (voir "Donner du sens").

10/20/30

10 slides / 20 minutes / police en 30pt : j'en ai déjà parlé.

Engager des convaincus

Ignorer ce qui n'a pas d'importance et prendre en compte l'amour pour les produits. Mieux vaut quelqu'un sans expérience qui aime le produit que quelqu'un qui a de l'expérience sans aimer le produit.

Engager meilleur que soi-même. Sinon on se retrouve avec des clowns en fin de chaîne de recrutement.

Le test du centre commercial. Quand vous voyez un candidat dans un centre commercial, avant qu'il ne vous ait vu, vous pouvez avoir plusieurs réactions. Si vous n'avez pas envie d'aller le saluer et discuter avec lui, ne l'embauchez pas.

Abaisser les barrières d'adoption

Aplatir la courbe d'apprentissage. Il faut que l'utilisation du produit soit immédiate : on branche, ça marche.

Ne demandez pas aux gens de faire ce que vous ne feriez pas. Par exemple, demander de remplir un long formulaire pour avoir un mot de passe.

Basez-vous sur vos évangélistes. C'est eux qui font le sale boulot et qui prêchent la bonne parole. Ouvrez-vous à eux.

Sentir le vent qui tourne

Laissez les fleurs éclore. Au début d'une révolution, les gens utilisent le produit d'une manière imprévue. Par exemple, les mauvaises personnes (pas la cible prévue) achètent le produit.

Encouragez le test. Laissez les gens télécharger, tester à la maison.

Trouvez les vrais influenceurs, ceux qui font réellement le travail : secrétaires, support technique, etc.

Ne laissez pas les clowns faire la loi

Il y a des clowns mal habillés, repoussants, qui vous diront que ça ne marchera jamais. Ils sont inoffensifs : ce sont des loosers, vous ne les croirez pas.

Les clowns les plus dangereux sont ceux qui ont des grosses montres, des jolies voitures allemandes et vous disent que vous allez réussir ou pas. Ils sont dangereux parce que vous seriez tentés de les croire, alors qu'ils n'ont pas forcément un avis plus éclairé que le vôtre.

Merci de corriger ma traduction si elle est mauvaise.
Note pour plus tard : publier plus vite, ce billet a été commencé le 27/07/2006....

Source : Blog de Kawasaki avec la vidéo et la présentation.

Suite à un intéressant billet sur la pub , j'ai décidé d'en ajouter sur mon blog. Ne fuyez pas ! C'est différent de ce que vous pensez !

C'est seulement dans les pages web pour l'instant (peut être le RSS un jour) et c'est de la pub comme je les aime : discrète, visible, gratuite et pour des produits que j'utilise.

Format défini

Tout ce que je n'aime pas sur le format de pub actuel : c'est gros, ça flashouille, ça gêne la lecture et ça nécessite un plugin ! En plus, les bannières, ça coupe le flux de lecture, sans compter les formats carrés sur les sites de nouvelles où la pub est au milieu de l'article !

Forcer un format permet de savoir comment inclure correctement la pub dans le blog. Par exemple, Google Ads n'a aucun soucis pour faire rentrer ses pubs dans les pages : le format est le texte, et le nombre de caractères est limité.

Le format « texte seul » était tentant, mais ça ne fait pas ressortir la pub, puisque les lecteurs scannent les pages.
Une autre possibilité est une bannière verticale ou horizontale, mais là, la pub est tellement visible que ça fait fuir le visiteur !
J'ai vu aussi sur d'autres blogs de toutes petites images comme 80x15, mais c'est peu visible et c'est plutôt utilisé pour dire « J'utilise ce truc, faîtes comme moi ! ».

J'ai choisi d'utiliser le format du DECK. C'est-à-dire une seule pub par page, une image en 120x90 pixels maximum avec un texte d'environ 75 caractères qui peut contenir des liens. Je pense que c'est un bon compromis.

Éthique de la pub

La pub va faire partie du blog, ce qui signifie que je vais en quelque sorte l'assumer : on comprendrait mal une pub en contradiction avec le blog. Faire un lien vers un mauvais produit décrédibilise aussi la source du lien.

Faire de la pub pour un truc que je connais pas est donc assez dangereux pour l'image du blog. C'est pour ça que j'ai choisi comme politique de ne faire de la pub seulement pour des produits que j'utilise ou des causes que je soutiens.

Qui va payer pour une pub ici ?

Probablement, personne.
Alors pourquoi faire de la pub gratuite ? Pour augmenter la visibilité de logiciels libres ou d'autres projets !

Tout le monde connaît Firefox, Linux (de nom), parfois OpenOffice.org.
Et les autres ? Voici quelques logiciels/projets que j'utilise et qui mérite plus de visibilité : GIMP, Inkscape, XChat, Kile, Mandriva, Frozen Bubble, Battle for Wesnoth, etc.
D'ailleurs, depuis le début de l'écriture de ce billet, une initiative a vu le jour pour améliorer la communication des projets libres : http://www.stratetgeek.fr/.

Et il n'y a pas que l'informatique dans la vie !
Il y a des projets intéressants dans la vraie vie et certaines associations/initiatives mériteraient d'être plus connues mais n'ont pas les moyens de se payer de la pub.

Ceci dit, si quelqu'un est prêt à payer pour mettre sa pub sur mon blog, je n'y suis pas opposé, tant qu'il respecte le format et que j'aime le produit.

Votre avis

La pub n'est pour l'instant que sur le site, vous ne verrez rien sur le fil RSS et donc sur les sites qui les utilisent (comme les planets). Peut être que ça viendra plus tard.

Alors, qu'en dites-vous ?
J'aimerai surtout avoir des retours sur votre avis par rapport au cadre de pub : est-ce qu'il vous a sauté aux yeux ? Est-ce qu'il vous a distrait pendant la lecture ? Trop gros ou pas assez visible ?

Est-ce que vous vous souvenez du web dans les années 90 ? Celui avec les GIFs animés pour la publicité, les couleurs criardes de la palette de Paint utilisées par les rares informaticiens qui savaient faire un site web ?

He bien, bienvenue en 2007 : on a toujours de la pub qui bouge (mais maintenant, il faut le plugin flash) et les informaticiens sont toujours aussi fort pour choisir leurs couleurs. Heureusement, Firefox 3 va les aider.

Qu'est-ce qu'une couleur, pour un ordinateur ?

C'est 3 nombres, compris entre 0 et 255. Ils représentent les valeurs de rouge, de vert et de bleu.

Si vous regardez une télé de très près (prenez une télé avec un tube cathodique), vous verrez 3 petits points rouge, vert et bleu, pour chaque pixel. Cela vient du fait qu'en mélangeant ces sources de lumière colorée, on obtient les autres couleurs (ex: avec de la lumière rouge et verte, on fait de la jaune). Attention ! C'est différent des mélanges faits avec de la peinture : on utilise de la lumière !

On utilise une valeur de 0 à 255 tout simplement parce que c'est ce qu'on peut mettre dans un octet (8 bits), unité chère aux informaticiens. C'est pour cela que ces couleurs sont dites 24bits (3*8 bits).

La notation est souvent : rgb(X, Y, Z), avec X,Y,Z entre 0 et 255 (rgb : Red Green Blue)
Note : il y a aussi une notation en hexadécimal (#xxyyzz) mais ça sort du sujet.

• rgb(0,0,255) : bleu pur
• rgb(255,255,0) : jaune
• rgb(255,255,100) : jaune plus clair
• rgb(255,255,255) : blanc
• rgb(0,0,0) : noir

Un bon informaticien est paresseux...

...parce s'il est vraiment bon, c'est l'ordinateur qui fait son boulot ;)

Comme les premiers sites web étaient fait par des informaticiens qui faisaient tout à la main, il devaient choisir leur couleur en donnant les 3 valeurs RGB.

• Je veux du bleu ! rgb(0,0,255)
• Je veux du bleu clair ! rgb(150,150,255)
• Je veux du vert ! rgb(0,255,0)
• Je veux du jaune ! rgb(255,255,0)

Pourquoi ces valeurs ? Tout simplement parce qu'elles donnent des chiffres ronds en RGB. Je me confesse, je fais ça également : la couleur de la colonne (à la date d'écriture de ce billet) est rgb(200,200,255).

Le problème, c'est que ces valeurs ne donnent par un résultat esthétique. Vous en doutez ? Testez le vert rgb(0,255,0) ! Sur ce blog, ça se voit pas trop, parce que je n'ai utilisé que des teintes de bleu.

Changeons de référentiel !

Il existe un autre triplet de couleur possible : HSL. Les couleurs HSL sont les mêmes que les couleurs RGB, mais les 3 valeurs sont différentes. En HSL, les valeurs sont la teinte (H), la saturation (S) et la lumière (L).

• H est compris entre 0 et 360 : c'est un angle sur le cercle des couleurs (0 : rouge, 120 : vert, 240 : bleu, avec bien sûr les intermédiaires)
• S est un pourcentage, qui représente la pureté de la couleur (0 : gris, 100 : couleur pleine)
• L est aussi un pourcentage, qui représente la luminosité de la couleur (0 : noir, 50 : couleur , 100 : blanc)

Ce qui veut dire qu'on peut avoir des couleurs jolies et cohérentes avec des valeurs rondes ! rgb(0,0,255) devient hsl(240,100,50) : si je veux une couleur plus claire, ça devient hsl(240,100,75), tout simplement !

Testez !

Voici un dégradé de bleu HSL/RGB

Firefox 3 : encore plus !

Firefox supporte déjà les couleurs RGB et les couleurs HSL.

Mais il fait encore plus : la transparence ! Ainsi on passe aux espaces de couleurs RGBA et HSLA : le A veut dire Alpha, c'est-à-dire le niveau de transparence (0 = transparent, 1 = opaque). Par exemple, je peux mettre du texte rouge mi-transparent sur un fond bleu et Firefox mixe lui-même les couleurs. Le test est visible seulement avec Firefox 3 :

Bien sûr ça marche aussi avec les images : on peut empiler des images semi-transparentes (PNG) avec des couleurs semi-transparentes. Les possiblités de design sont vraiment intéressantes.

J'ai utilisé du RGBA, mais c'est exactement pareil avec du HSLA. D'ailleurs, quand j'ai testé avec Firefox 3 (alpha6, faîtes attention !), je me suis rendu compte que Firefox convertit le HSL en RGB et le HSLA en RGBA pour son usage interne. Je suppose que c'est dû au fait que tout ce qui gère l'affichage (bibliothèque de composants graphiques, moteur de rendu, etc.) doit utiliser des valeurs RGB, ce qui est logique puisque c'est ce qu'on utilise physiquement (intensité des trois composantes de lumière).

Désolé, mais ça va pas être possible...

Cher lecteur, je suis vraiment désolé, mais il y a un problème.

Sur le web, il y a un boulet, un empêcheur de tourner en rond, un casse-couille, c'est Internet Explorer (IE).
Et bien sûr, lui, il ne supporte que les couleurs RGB. Adieu, le HSL, le RGBA et le HSLA. Depuis la version 7, il supporte les images semi-transparentes (PNG) correctement, c'est déjà ça...

Comme il est encore majoritaire, il n'est pas possible d'ignorer IE en utilisant du RGBA ou du HSL.
C'est pour ça que je vous encourage à installer et faire installer Firefox autour de vous. Quand Firefox aura suffisamment de parts de marché, IE sera obligé de s'aligner et de supporter la même chose (ils l'ont déjà fait pour les onglets, le PNG et le RSS).

Une solution en attendant

CSS : Cascaded Style Sheets

Dans la recommandation, il est clairement dit que si une directive CSS n'est pas supporté, alors elle doit être ignorée. Donc si on mets du RGBA et qu'on surfe avec IE (beurk), c'est comme si la ligne n'était pas là.

Il est aussi écrit que si on mets 2 fois une même directive, c'est la 2ème qui est prise en compte. Donc si on mets une couleur RGB suivi d'une couleur RGBA et qu'on surfe avec Firefox 3, on verra la couleur RGBA.

Voilà notre solution :

#truc {
rgb(255,0,0);
rgba(255,0,0,0.5);
}

IE va comprendre la 1ère ligne, Firefox 3 la 1ère et la 2ème, en ne prenant en compte que la 2ème. Donc IE va afficher du bleu plein et Firefox 3 du bleu semi-transparent. Et on finit par un test :

Plus d'infos sur CSS3 : http://www.css3.info/

Les présentations orales sont partout : chez les responsables de projets, chez les profs, chez les étudiants... etc. J'en ai même fait une ce matin.

Pourtant, il n'y a aucun cours pour nous apprendre à communiquer correctement, bien souvent en utilisant Powerpoint OpenOffice.org Impress. Voici quelques petits trucs bien utiles pour faire des présentations appréciées, ainsi que des commentaires de ce que j'ai vu ce matin.

Une bonne pratique : les 10/20/30(/6/25)

J'ai cherché sur le web et j'ai trouvé un conseil sympa : la règle des 10/20/30, qui s'applique surtout aux présentations commerciales. Elle a été pensée par un capital-risqueur qui voit passer des startups toute la journée.
En résumé, voici la règle :

• 10 diapositives
• 20 minutes, ce qui fait 2 minutes par diapo
• 30 points comme police la plus petite sur les diapos

J'ai trouvé d'autres règles supplémentaires ailleurs : pas plus de 6 points (puces) et au maximum 25 mots par diapo.

Test grandeur nature

J'ai testé ce matin (vers 9-10h), lors d'une rencontre entre thésards. Ça a bien marché, la présentation a été plutôt apprécié, même s'il y a encore une bonne marge de progression (voir ci-dessous).

J'avais 12 diapos pour 20 minutes + 10 minutes de questions, avec mes diapos en 30 points minimum (ou presque). J'avais fait plusieurs diapos avec que des schémas, mais j'avoue avoir poussé certaines diapos à 7 puces.

Les points positifs

• Les diapos avec schéma seul attire l'attention de l'auditoire
• Les diapos sont concis et pas chargés
• Les diapos obligent à parler pour tout expliquer
• J'ai eu pas mal de questions (si, si, c'est positif : ça veut dire que les gens ont écouté)

Les points négatifs

• J'ai fini en 10 minutes (heureusement, le planning était à la bourre, donc c'était positif pour les organisateurs)
• J'ai un peu lu les diapos qui avaient beaucoup de mots/puces

En plus de ça, il y a d'autres trucs améliorables, mais qui ne relève pas de la qualité des diapos. Voici quelques remarques à garder sous le coude pour la prochaine fois :

• Boucler sur la problématique du début : dire en quoi ma présentation me rapproche du besoin exprimé au début
• Laisser du silence entre mes phrases (pour laisser du temps à l'auditoire pour assimiler)
• Faire 20 diapos (comme ça, je parle 20 minutes)

Les présentations que j'ai vues

Comme disait Confucius :

L'homme sage apprend de ses erreurs.
L'homme plus sage apprend des erreurs des autres.

À la lumière de ces principes, j'ai regardé les présentations des autres thésards, et je suis pas le seul à avoir une marge de progression.

Un défaut un peu général (je suis peut être concerné aussi) consiste à ne parler qu'aux spécialistes. Il y avait dans la salles des thésards et leurs encadrants en mathématiques, électronique analogique, électronique numérique, etc.
Il n'y a rien à vendre (au sens commercial) : le but est de faire passer le message.

J'ai aussi vu un truc hallucinant : des diapos avec des formules de math. Mais attention, pas des petites formules de 3ème, des vrais trucs de spécialistes avec des gros sigmas avec des lettres grecs et tout...
La seule information de ces slides : "ces trucs, c'est compliqué".