"Quand on sait pas : on s'entoure"

Côté cour :

• Faut qu'on refasse le site web
• On va pas payer ça pour ça
• Y a machin qui dit qu'il peut le faire le soir ça l'amuse
• Faudra que machin nous dise comment on fait des changements
• C'est quand même pénible d'être dépendant de machin dès qu'on veut bouger une virgule
• Y a machin qui a filé sa dém
• 3 mois après : achat de 2 journées de presta de machin à la nouvelle boîte de machin
• 6 mois après : achat de 3 journées de presta de machin à la nouvelle boîte de machin

Mieux vaut prévenir que guérir

Côté jardin :

• T'as vu leur nouveau site ça craint
• Y a encore les voeux en septembre
• L'ancien patron il doit se marrer : y a toujours sa tronche
• Moi je leur ai dit faites gaffe : quand on vous connaît pas ça gêne
• C'est quand même curieux qu'il aient pas un type pour leur bidouiller leur site le week-end !

Le Diable est dans les détails

Monster.fr, l'agence d'offre d'emploi bien connue, a lancé un buzz plutôt réussi et intéressant.
Il fonctionne en deux volets très amusants.
Le premier vous présente un pannel de looser qui se présentent en entretien d'embauche. C'est court donc efficace, très amusant.
Le second volet très audacieux consiste à proposer aux chercheurs d'emploi de poster une vidéo de présentation la plus originale possible. Certaines sont donc très policées, où les chercheurs d'emploi vont présenter leurs compétences (donc eux ils n'ont rien compris), et d'autres sont complètement décalées, le but étant sans doute de se distinguer.
C'est amusant, c'est web 2.0, quelque part, c'est réussi !

http://www.monster.fr/boulettes/

J'ai acheté une crepière (ca tout le monde s'en fou, je sais) sur le site www.webdistrib.com et j'ai trouvé le formulaire de commande particulièrement bien fait.

Quand on met le curseur dans un champ, il s'entoure automatiquement de rouge, puis dès qu'on l'a saisi correctement il s'entoure de vert. Le contrôle de saisi est donc immédiat. Ceci est en plus complété de manière plus classique par une alerte en javascript quand on essaye de valider le formulaire et qu'il y a un champ mal saisi.

SMIL (Synchronized Multimedia Integration Language) est un langage de programmation préconisé par le W3C pour l'accessibilité des contenus audio/vidéo.

L'objectif est de permettre de voir une vidéo et de lire en même temps le texte qui est dit dans la vidéo.

Pour cela, il faut donc restituer ce qui est dit dans la vidéo sous forme de texte, un langage (SMIL) qui permette de dire à quel moment est dit une phrase et un logiciel coté client (realplayer ou GRiNS ou Quicktime) pour visualiser tout ca.

Pour aller plus loin, voici un bon tutorial : Aristote

Exemple de vidéo synchronisé avec le texte (Pour lire cette vidéo, vous devez avoir RealPlayer et aller dans Outils > Préférences > Contenu et cocher les cases concernant l'accessibilité)

Un exemple de Buzz qui risque d'avoir des retombées pas vraiment imaginées par l'organisateur :

Les éditeurs du Monopoly ont eu une idée intéressante, faire une édition avec des villes à la place des habituels noms de rue. Des versions du célèbre jeu existent déjà pour des villes différentes de Paris. Au lieu des traditionnelles rues de notre capitale, la fameuse Rue de la Paix, l'Avenue Foch ou le Boulevard Saint-Michel, on trouvait à Besançon par exemple, la Grande Rue, la rue Morand et le Boulevard Kennedy.

Commercialement, c'est intéressant, les gens de la ville vont acheter l'édition spéciale, peut-être un peu plus cher que la normale.

La dernière idée, c'est donc d'utiliser les noms des grandes villes françaises. Et l'idée qui semblait bonne, et très à la mode, était de faire voter les internautes. Ainsi, n'importe qui peut voter pour sa ville depuis quelques semaines. A la fin du jeu, dans une vingtaine de jours, la ville ayant recueilli le plus de voix prend la place de la Rue de la Paix, les Champs-Élysées étant occupés par la seconde ville du classement, et ainsi de suite pour les 20 autres emplacements. Besançon est actuellement neuvième, et prend donc la place de l'Avenue Henri-Martin, dans les rouges, c'est pas mal.

Bref, pour les éditeurs du jeu, une bonne partie des votants vont sûrement acheter le jeu, quand leur ville sera à tel ou tel emplacement. A l'heure actuelle, un peu plus de 160 000 personnes ont voté pour les 22 premières villes. Ca fait donc beaucoup d'acheteurs potentiels. Surtout qu'il reste 20 jours, il y aura d'autres électeurs et le jeu va sûrement sortir pour la période des fêtes de fin d'année, donc d'autres gens vont l'offrir en guise de cadeau facile.

Le problème que risquent de rencontrer les éditeurs, c'est que parmi les 160 000 personnes ayant donné leur avis, un peu moins de 17000 ont voté pour une ville du Quercy, près de Cahors, répondant au doux nom de Montcuq...

Je vous laisse imaginer les parties de Monopoly de l'an prochain : "J'achète Montcuq !", "Je construis un hôtel sur Montcuq !", "J'ai décidé d'hypothéquer Montcuq ?", "Je vend Montcuq au plus offrant". Ca risque de devenir graveleux...

Les éditeurs ont donc 2 options selon moi :

1. ils sortent le jeu avec Montcuq en première place. La ville ne risque pas de céder sa première place, toute la blogosphère en parle et tout le monde vote. Pour info, il y a une semaine, la ville n'était même pas dans le classement. Mais les votants font ça en rigolant, et ne vont peut-être pas acheter le jeu. Pire, les autres acheteurs ne vont surement pas acheter un Monopoly de Montcuq pour Noël à leur fiston.
2. ils décident de ne pas tenir compte du vote, mais là, il va y avoir un autre énorme buzz dans la blogosphère et tous les non-internautes vont savoir ce qui s'est passé, et le jeu risque de ne pas bien se vendre, au vu du manque de courage et d'humour des éditeurs...

Je ne vois pas vraiment comment ils vont s'en sortir, mais on peut s'interroger également sur l'apport de cette campagne markéting... Le "buzzing" n'est pas forcément une bonne idée.

Dans un précédent billet, nous présentions d’une manière générale le label Accessiweb de l’association BrailleNet. Voici maintenant quelques informations plus technique.

Définition : (Extrait du site accessiweb.org)

{{Ce label est une méthode d'application des recommandations internationales du WAI: les WCAG 1.0. Il comprend 2 éléments indissociables : une liste de 92 critères AccessiWeb et une méthodologie d'évaluation. }}

Dans ce poste, je vais détailler les 92 critères, un prochain post parlera de la méthode d'évaluation.
Il y a trois niveaux de respect de ces critères :

• Bronze : 55 critères
• Argent : + 23 critères
• Or : + 14 critères
  

Ces critères sont divisés en 13 catégories :

• Eléments graphiques
• Cadres (frame)
• Couleurs
• Multimédia
• Tableaux
• Liens
• Scripts
• Eléments obligatoires
• Structuration de l'information
• Présentation de l'information
• Formulaires
• Aide à la navigation
• Contenus accessible

Voici un résumé des critères (ou téléchargez une version excel de tous les critères - 66ko):


Niveau Bronze :

Eléments graphiques : avoir un équivalent texte (ALT) approprié de moins de 60 caractères pour les images (IMG, AREA, MAP, SHAPE, …). L’équivalent texte doit donner la fonction du lien (si il y a un lien sur l’image)
Cadres (frame) : remplir par des contenus pertinents les balises NAME, NOFRAME, TITLE. Pas plus de 3 cadres par page. Les scrollings de tous les cadres doivent être définis à « automatique ».
Couleurs : les informations données par les couleurs doivent être lisible en noir et blanc (attention aux contrastes).
Multimédia : fournir un contenu textuel équivalent (en RTF, TXT ou HTML) aux éléments multimédia (vidéos, sons, …). Il faut que l’équivalent texte soit synchronisé avec la lecture de la vidéo (utilisation du langage SMIL).
Tableaux : utiliser les tableaux pour présenter des tableaux de valeurs (pas pour faire une présentation graphique). Saisir les balises SUMMARY, CAPTION, HEADER.
Liens : l’intitulé des liens doit être explicite et de moins de 80 caractères. Utiliser l’attribut TITLE et donner plus d’information que l’intitulé du lien tout en faisant également moins de 80 caractères. Les intitulés identiques doivent pointer sur la même page. Il ne faut donc pas mettre le lien « Lire la suite », mais un intitulé spécifique à l’article.
Scripts : sans langage de script (sans javascript par exemple), on doit pouvoir faire exactement la même chose qu’avec. Il faut donc une alternative qui donne les mêmes possibilités. Ex : pour les formulaires le contrôle de saisi coté client en javascript doit également être fait du coté serveur.
Eléments obligatoires : Saisir les éléments DOCTYPE, LANG, TITLE (différent pour chaque page). Signaler dans le lien les changements de langues.
Structuration de l'information : structurer l’information de manière cohérente (identique à l’affichage sur l’écran avec une lecture de haut en bas de gauche à droite). Utilisation des H1, H2, … pour les titres.
Présentation de l'information : séparer le contenu de la présentation. En désactivant les feuilles de style le site doit rester visible et les informations affichées dans le même ordre.
Formulaires : saisir les éléments LABEL, ID, FOR. Ajouter un équivalent texte sur l’image submit (le cas échéant)
Aide à la navigation : Placer le menu principal toujours au même endroit
Contenus accessibles : pas de rechargement automatique de la page, pas de redirection automatique par script, pas de popup non sollicité. Afficher le poids et l’extension de tous les fichiers en téléchargement. Faire un lien vers un site pour télécharger un logiciel permettant la lecture du fichier (adobe pour les PDF, …).

Niveau Argent :

Eléments graphiques : pas d’image texte (titre de la page, titre de chapitre, menu, …, doivent être en texte).
Cadres (frame) : remplir par des contenus pertinents les balises LONGDESC
Couleurs : -
Multimédia : -
Tableaux : lorsqu’un titre dépasse 15 caractères, utiliser l’attribut ABBR.
Liens : -
Scripts : -
Eléments obligatoires : décrire le contenu de la page (META, CHARSET).
Structuration de l'information : ajouter un plan du site, une page d’aide à la navigation un moteur de recherche interne, le tout atteignable sur toutes les pages du même endroit sur la page.
Présentation de l'information : les polices et les tableaux doivent utiliser les dimensions relatives. Avoir au moins une des polices sans empattement (Times New Roman sur PC et Time Roman sur MAC).
Formulaires : utiliser LEGEND et FIELDSET pour les blocs d’information de même nature. Organiser les informations de manière logique.
Aide à la navigation : faire des liens invisibles « Passer au menu », « Passer au contenu » pour permettre d’aller directement à la lecture de ces éléments.
Contenus accessibles : ne pas détourner le fonctionnement des balises de leur fonction original (BLOCKQUOTE pour une citation, UL pour une liste. De manière générale, ne pas utiliser les balises (B, CENTER, BASEFONT, APPLET, DIR, FONT, ISINDEX, MENU, S, STRIKE et U) et les attibuts (ALIGN, BGCOLOR, HEIGHT...) qui sont définis comme non valide dans la dernière version du HTML.

Niveau Or :

Eléments graphiques : Les tailles des images doivent être limitées pour ne pas provoquer des ascenseurs inutiles.
Cadres (frame) : -
Couleurs : -
Multimédia : -
Tableaux : -
Liens : pas plus de 9 catégories par niveau d’arborescence et pas plus de 40 liens par page (y compris les liens du menu).
Scripts : -
Eléments obligatoires : -
Structuration de l'information : la page de résultats d’un moteur de recherche doit afficher le nombre maximum de réponses par page, le nombre total de réponses, les liens suivant/précédent.
Présentation de l'information : -
Formulaires : -
Aide à la navigation : Présence d’un fil d’Ariane, de raccourcis clavier pour les liens importants (page d’accueil, page d’aide, plan du site, moteur de recherche, glossaire, contact). Il faut également si plusieurs liens sont l’un à coté de l’autre les séparer par exemple avec le caractère « | ». Le poids des pages HTML doit être inférieur à 70ko.
Contenus accessibles : Fournir un format alternatif aux fichiers en téléchargement peu accessible (PDF -> RTF). Utiliser les balises ACRONYM et ABBR pour les abréviations (pour la première utilisation dans la page). Pas d’écriture en majuscule pour les éléments de texte. Une page doit faire au maximum 3 hauteurs d’un écran 1024x768.

Depuis quelques années, on voit souvent des magazines ou des catalogues interactifs.

En gros, on tourne les pages, c'est joli, c'est souvent très fluide, mais c'est aussi rapidement lassant, et j'utilise très vite le boutons de navigation.
Madame LeFigaro est passé au niveau supérieur.
Ce genre de choses doit surement exister depuis le début des magazines interactifs, mais je ne l'avais pas encore vu, ou ça ne m'avait pas marqué.


Donc voilà, c'est un magazine interactif, on peut tourner les pages et c'est joli.


Le premier + de MadameLeFigaro : Dès la couverture, on trouve des liens vers les pages du magazine. Ce sommaire interactif se retrouve à l'intérieur. Là, on se dit que c'est quand même pas innovant comme idée,


mais là où le magazine va plus loin, c'est que certaines publicités sont cliquables. Ils ont donc dû vendre un peu plus cher cette option à leurs annonceurs. Quand on sait que la majorité des titres de presse ne vivent que par la pub, c'est une vraiment bonne idée.


On va plus loin encore dans certaines pages, sur lesquelles le lecteur peut lire directement des fichiers musicaux ou vidéo. Quand on parle d'un groupe, on découvre son dernier clip automatiquement, sans cliquer nulle part.

Ajoutez à ça des tests, des quizz et des jeux en ligne, vous obtenez un véritable magazine interactif, pas simplement des pages scannées et présentées à travers un logiciel à effet "page".
J'imagine que l'équipe éditoriale va rapidement penser à lier ses articles people à une base indexée de personnalités, pour qu'on ne mette pas une heure à retrouver le titre de ce film avec Brad Pitt, ou dans quelle pub on a vu Élodie Bouchez, à rédiger des éventuels erratums avec retour sur le numéro précédent ou à réaliser de longs articles d'investigation ou d'enquête sur plusieurs numéros, avec possibilité de relire facilement les autres épisodes.
Je ne pense pas que j'irais lire MadameLeFigaro tous les mois, mais si ETAPES: ou PREMIERE se mettent à faire ce genre de chose, je ne dis pas non.

LIEN : http://assets.madame.lefigaro.fr/pole_feminin/mlle/
LIEN : http://www.fluidbook.com/index.php/fr/presentation

Photoshop, le logiciel de retouche de photo de l'éditeur Adobe vient de changer de logo.

On passe donc de : (CS3) à
Je préfère le nouveau logo au précédent, mais je regrette les versions CS : et CS2 :

Le site français n'a pas encore fait la mise à jour, mais c'est déjà visible sur le site américain.
C'est l'occasion de passer en revue l'évolution du logo de ce logiciel utilisé par la plupart des créatifs à travers le monde.

Les déclinaisons du nouveau logo :

J'en avais parlé dans un commentaire sur Asirra, mais je me rend compte qu'un post serait plutôt nécessaire sur cette question.

C'est que je découvre que certains cahiers des charges pour des refontes de sites web administratifs réclament des CAPTCHA pour sécuriser leurs blogs ou leurs zone de commentaires.
Pour information, un captcha (completely Automated Public Turing test to Tell Computers and Humans Apart) est une image déformée faite de chiffres et de lettres qu'un utilisateur doit recopier dans un champ texte pour prouver qu'il est bien un homme (on estime, souvent à tort, qu'un robot ne saurait pas déchiffrer ces mots).

Certain captchas déforment les lettres avec des fonds tellement tarabiscotés que même un humain parfois ne déchiffre que péniblement ce qu'il doit recopier. Depuis 2005 pourtant, le W3C a alerté sur le problème posés par ces captcha pour les malvoyants. Pafois des systèmes sonores existent, mais c'est rare et compliqué. Il est donc suggéré diverses méthodes pour mettre fin à ce système (peu protecteur au demeurant). L'une des plus intéressante est le recours à des questions logiques tournantes. Une question aléatoire est posée, dont la réponse est évidente pour un homme, mais pas pour une machine :

• Combien font 2 et 2 (en chiffre) ?
• Quelle est la couleur du cheval blanc d'Henri IV ?
• Quel est le prénom de Louis de Funès ?
• Ecrivez 5 en toutes lettres :
• Quelles est la couleur d'une orange ?

Ces questions simples sont conformes WAI, et sont certainement plus efficaces, plus confortables, voire plus amusantes que les hideux Captcha. vous aussi, bannissez donc les captcha, et inventez vos questions les plus absurdes qui dérouteront les moteurs de recherche.

cf. http://www.w3.org/TR/2005/NOTE-turingtest-20051123/ en anglais,
http://www.yoyodesign.org/doc/w3c/turingtest-20051123/ en français.

Xavier et moi en parlions il y a quelques semaines, Microsoft sort finalement son outil de mesure d'audience en version Béta.
Je n'ai pas testé, je laisse ça à mes collègues plus spécialisés dans ce domaine.
Mais à première vue, ils se sont inspirés de nos couleurs...

Vu sur le net :
La première version de Gatineau sera disponible uniquement en anglais dans les pays qui disposent d’équipes locales de support AdCenter. L’objectif de Gatineau est d’offrir plus d’options de ciblage des pubs en offrant un outil d’analyse avancée (segmentation démographique, données de conversion, données comportementales, efficacité des campagnes…)

Le championat du monde des outils de gestion de contenu a donné son classement la semaine dernière.
Bizarrement, on ne parle pas d'Explid. Notre solution doit être hors catégorie...
Une bonne occasion de découvrir les lacunes des concurrents.

Il y a trois ans, nous avons mis en place un module en Flash d'affichage de données statistiques sur la qualité de l'air pour le compte de l'ASQAB et de l'ARPAM. Voir le site

Vient d'être publié par une autre région un module de visualisation des mêmes données : http://www.oramip.org/content/oramip/index.php

Si vous cliquez sur un des indices, vous verrez les mêmes infos, au même endroit, ... y'a juste la couleur qui change.

Et vous, vous êtes-vous déjà fait copier ? Vous étiez plutôt énervé ou fier ?

Nous y étions l'année dernière, nous y seront cette année

C'est la seule conférence en France qui parle de respect des normes de codage, de process qualité, de WebDesign et d'accessibilité. Tous les grands noms de ces domaines seront présents, comme l'année dernière.

Lien : http://2007.paris-web.fr/

C'est en tout cas ce qu'a décrété la cour d'appel de Paris dans deux décisions récentes concernant des actes de contrefaçon. En fait, la cour de justice a certainement pris cette décision dans le seul but de permettre à des personnes (des auteurs par exemple) d'enquêter sur les internautes qui mettaient leurs création en ligne sur internet. C'est parce qu'elles ont pu se procurer les adresses IP de ces internautes que le procès a pu avoir lieu, mais l'obtention de ces adresse IP est remise en cause par la CNIL, ou plutôt la décision de la cour de justice de considérer que ces adresses IP ne sont pas des données personnelles et qu'elles peuvent donc être communiquées.

Un choix difficile pour la cour de justice : ou bien elle considère que l'IP est une donnée personnelle, et seules les autorités compétentes peuvent s'en saisir pour retrouver une personne en infraction, et alors les procès intentés par des personnes ne relevant pas de cette autorité (policière) ne peuvent poursuivre d'internaute, et alors la cour donne l'impression de ne pas lutter contre ce qui est souvent appelé du piratage. Ou bien elle considère que ce n'est pas une donnée personnelle, permettant ainsi ce type de procédures, mais ouvrant alors la boîte de Pandore. Ce que dénonce la CNIL.

La CNIL fait d'ailleurs référence à un rappel fait par l'Union Européenne concernant ces adresses IP qui sont bel et bien considérées par elle comme une donnée à caractère personnel (avis du 20 juin 2007 rendu par le groupe 29) Elle en appelle donc au garde des sceaux pour trancher dans cette affaire.

Comment l'état va-t-il composer entre les directives européennes et l'influent lobby des auteurs-compositeurs ? A suivre...

American Airlines a décidé de poursuivre en justice Google pour les Adwords (mots clefs sponsorisés) utilisés par ses concurrents sur des marques déposées par la compagnie aérienne (qui il faut le dire en a déposé un nombre assez colossal). Ce n'est pas le premier procès de ce genre pour Google, mais c'est le premier qui porte sur autant de noms déposés, et cela semble remettre en cause le modèle des Adwords. La question est : les concurrents d'une compagnie peuvent-ils attirer des visiteurs à l'aide de mots clefs faisant référence à des marques déposées ? Ou pour le dire autrement : des compagnies peuvent-elles se réserver des mots clefs, déposer des mots clefs ?

Le problème peut sembler simple à résoudre en ce qui concerne les Adwords, mais le système d'enchère fait que personne ne contrôle vraiment si celui qui achète un mot clef en est le légitime propriétaire. Des complications en perspectives. Mais le procès semble voulir s'étendre également au référencement naturel, et alors là, c'est une autre paire de manche. Qui pourra empêcher un moteur de recherche de référencer un site mieux construit sur les mots clefs de son concurrent ?? Google devra-t-il créer des filtres pour vérifier que le mot clef soumis appartient bien au site ? Et si c'est un particulier ?

Bref, un vrai casse-tête que soumet American Airlines aux internautes. La seule solution viable serait de juger que nul ne peut déposer de mot clef, marque déposée ou non. Après tout "american airlines" n'est que la juxtaposition de deux noms commun : "compagnie_aérienne d'amérique". Imagine-t-on que le mot "Windows" (fenêtre) soit déposé et réservé à Microsoft ?

Espérons un jugement en ce sens.

PS : en France, les sociétés d'assurance comme AXA ou Direct Assurance ont porté plainte pour le même motif. La cour de justice s'est jugée incompétente et a condamné les sociétés qui s'en prenaient à Google. Mais la société SEDO, qui propose les même service que Google en France, a elle été condamnée suite à la plainte de la société Méridien. (cf droit&technologie)