jan 21

[Livre] Click

Le livre "Click" est entièrement consacré à l'étude de nos habitudes de navigation sur le web. Le livre met en corrélation les statistiques des mots recherchés sur les moteurs de recherche, par rapport aux habitudes de vie. L'auteur souhaite ainsi démontrer que l'ont peut en connaitre mieux sur la nature humaine grâce à ces outils en ligne que par n'importe quel autre moyen.

Livre Click

Information sur l'auteur

L'auteur de cet ouvrage, Bill Tancer, n'est autre qu'un cadre dans la section "Recherche" de l'entreprise Hitwise. Cette dernière est une entreprise qui collecte les données des internautes et les analyses au profit de grandes entreprises qui peuvent ainsi améliorer leurs marchés. Cela permet aux clients de Hitwise d'en apprendre plus sur les habitudes des internautes ou même d'évaluer les performances de leurs concurrents.

Outil de prédilection de Bill Tancer

L'un des outils utilisés par Bill Tancer au sein de son entreprise et pratiquement tout au long du livre Click est un outil similaire à Google Trends. Autrement dit, c'est une application qui réalise des schémas à partir des termes recherchés sur les moteurs de recherche. Cela affiche la popularité de la recherche d'un mot sur les engins de recherche en fonction du temps. Par exemple, les requêtes "changement d'heure" ou "pourquoi on change d'heure" sont beaucoup plus fréquentes dans les périodes de l'année où il faut changer l'heure.

Mais l'outil permet de déceler des comportements d'une façon beaucoup plus poussé. Par exemple il est possible d'évaluer la popularité d'une personnalité en fonction du nombre de fois où des personnes vont rechercher des informations sur celle-ci sur internet. Et c'est là où le livre devient intéressant et va rechercher des choses que nous n'avions pas idées sur nous-mêmes.

Lectorat idéal

Le lectorat susceptible d'être intéressé par "Click" peut être restreint vis-à-vis de quelques facteurs:

Sachant qu'il se base en grande partie sur un outil similaire Google Trends, les personnes qui n'apprécient pas ce dernier ou qui ne sont pas vraiment curieux dans l'âme risquent de ne pas être intéressé par "Click"
A l'opposé, ceux qui sont de grands adeptes de Google Trends auront peut-être déjà consultés certaines des statistiques présentées dans le livre
L'auteur est américain et les données qu'il traite sont en partie centrées sur les États-Unis. Par conséquent une partie du livre ne correspond pas au comportement d'autres pays (ex. le mot le plus recherché par les adolescentes américaines est: "robe de bal", or en France il n'y a pas vraiment de bal de fin d'année). Au passage je tiens à préciser que l'ouvrage est en Anglais (je ne sais pas s'il existe une version traduite pour le monde francophone)

Avis sur le livre

A la fin de la lecture j'ai plutôt un sentiment négatif sur cet ouvrage, même s'il a été intéressant. De ce fait les opinions sur cet ouvrage commenceront par les points négatifs.

Certaines références utilisées dans le livre sont peu connues dans le monde francophone (ex. des noms de célébrité ou de programmes télévisuels américains)
La lecture du livre ressemble un peu à une publicité pour Hitwise ou en tout les cas l'auteur tente de justifier à quel point ces nouvelles données sont meilleures que n'importe quels autres techniques de collecte d'information sur un échantillon cible
Certaines interprétations des données sont très intéressantes car l'auteur est tout de même un spécialiste dans son domaine
Même en ayant beaucoup testé Google Trends, je n'avais pas forcément testé certaines des informations abordées dans le livre

Pour conclure, ce livre est intéressant pour ceux qui sont intéressé par la nature humaine. Par ailleurs la meilleur façon de prolonger la lecture de "Click" est de se jeter sur Google Trends pour aller découvrir de nouvelles choses et ainsi s'inventer des chapitres supplémentaires de ce livre.

sept 25

Erreur 404: trouver une URL à suggérer

La page d'erreur 404 est visible sur les sites web lorsqu'un internaute tente d'accéder une page qui n'existe pas ou plus. Ce problème récurent aux sites web peut faire perdre des visiteurs ou tout du moins réduit la notoriété d'un site lorsqu'il y a de nombreuses pages mortes. Cet article présente une astuce pour agrémenter la page d'erreur 404 par la suggestion d'une URL existante qui pourrait être en rapport avec la page morte.

Problème des URLs mortes

Sur un site web, si une page est supprimée ou déplacée, cela peut résulter par une URL morte. Ce problème d'URLs mortes peut également arriver dans d'autres circonstances: faute de frappes, mauvaises prononciation, URL tronquée involontairement ou lors d'une attaque de type brute force.

Pour éviter de perdre des visiteurs et pour améliorer un peu l'ergonomie d'utilisation, il est recommandé d'utiliser une page d'erreur 404 personnalisée. Cette page peut notamment servir pour:

Expliquer aux visiteurs pourquoi ils accèdent une page morte
Donner un formulaire de recherche interne pour que l'internaute puisse trouver une URL équivalente
Donner la liste des pages les plus populaires (ou des catégories du site)

Solution alternative

Il est possible de trouver une solution alternative à ce problème de page "non trouvée". Grâce à l'URL morte, il est possible d'avoir une idée d'où l'internaute souhaitait accéder. Car une adresse web, même morte, possède des mots et parfois des mots-clés qui peuvent donner un indice sur l'endroit du site où l'internaute souhaitait accéder. Ceci est particulièrement vrai si l'URL possède juste une petite faute de frappe.

L'idée consiste à utiliser un algorithme de similarité de chaîne de caractères pour trouver une URL semblable. Voici une liste d'algorithme qui pourrait potentiellement convenir:

Distance de Levenshtein
Distance de Damerau-Levenshtein
Distance de Jaro-Winkler
Coefficient de Dice
Soundex (algorithme phonétique)
Metaphone(algorithme phonétique)
Fonction PHP similar_text()
Algorithme "fait maison" qui compte le nombre de lettres identiques au début d'une chaîne (s'arrête de compter dès qu'au moins une lettre diffère). Pourrait s'avérer pratique dans le cas d'URL tronquée
Algorithme "fait maison" qui compte le nombre de mots identiques entre deux URLs

Dans cette liste il faut toutefois faire un choix. Pour découvrir l'algorithme qui serait le plus à même de suggérer une bonne URL le chapitre suivant présente une série de test.

Test des différents algorithmes

Métriques testées

Les métriques vont être testées de différentes manières pour voir si certaines associations peuvent être bénéfiques. Voici la liste des algorithmes qui seront testés:

T1: Levenshtein + "algo début de chaîne" + "algo mots identiques" + similar_text + Soundex
T2: Levenshtein + "algo début de chaîne" + "algo mots identiques" + Soundex
T3: Levenshtein + "algo début de chaîne" + "algo mots identiques"
T4: Levenshtein + "algo début de chaîne" + Soundex
T5: Levenshtein + similar_text
T6: similar_text
T7: Levenshtein + "algo début de chaîne" + "algo mots identiques" + Jaro-Winkler + Soundex
T8: Levenshtein
T9: coefficient de Dice
T10: Jaro-Winkler
T11: Jaro-Winkler + Levenshtein
T12: coefficient de Dice+ Levenshtein
T13: Levenshtein + Soundex
T14: Levenshtein + Metaphone

Chacun de ces algorithmes sera testés pour deux principales catégories: URL tronquée et faute de frappe dans l'URL. Il est considéré que si un algorithme est efficace pour suggérer la bonne URL lors d'une faute de frappe, alors il y a également des chances pour qu'il soit efficace dans d'autres circonstances.

Résultats des tests: URLs tronquées

Les résultats sont présentés ci-dessous via des courbes. L'axe des abscisses représente le nombre de caractères tronqués dans une URL tandis que l'axe des ordonnées représente le pourcentage de succès de l'algorithme.

Test de suggestion d'URLs sur des URLs tronquées

Dans ce résultat, l'algorithme le plus efficace est Jaro-Winkler seul.

Résultats des tests: faute de frappe dans les URLs

Pour réaliser ce test, une fonction simulant des fautes de frappes classique à été utilisée. Cela simule aléatoirement une des erreurs suivantes:

Ajout d'un caractère (exemple: gooogle au lieu de google)
Suppression d'un caractère (exemple: gogle au lieu de google)
Échanger deux caractères (exemple: goolge au lieu de google)
Modifier un caractère (exemple googke au lieu de google)

Test de suggestion d'URLs sur des URLs avec petite faute de frappe

Ces résultats démontrent que c'est l'algorithme T11 qui est en tête suivi de prêt par l'algorithme T10 (Jaro-Winkler).

Cas concret

En vue des résultats, il peut être stipulé que Jaro-Winkler est un bon algorithme pour suggérer une URL en se basant sur ce type d'erreurs communes. Dès lors, il est intéressant de tester cet algorithme sur un vrai site web.

J'ai mis en place cet algorithme utilisant Jaro-Winkler sur la page d'erreur de mon projet infowebmaster.fr. Le sitemap de ce site contient 4320 URLs et cet algorithme analyse la similarité de l'URL morte avec toutes les URLs du sitemap en 0,84 secondes (temps relativement correct). Une fois l'algorithme lancé, c'est l'URL qui obtient le meilleur score de similarité qui est recommandé. Voici des exemples d'URLs morte et d'URL suggéré:

/annuai -> /annuaire.php
/le-forum -> /forum/
/news pyramide inversée -> /110,news-la-pyramide-inversee.html
/annuaire indexweb -> /annuaire/209/indexweb-annuaire.html
/forum php -> /forum/php/
http://www.infowebmaster.fr/erreur 404 -> http://www.infowebmaster.fr/erreur404.php
(n'hésitez pas à faire vos propres tests)

Comme il est possible de voir, l'algorithme peut donner de bons résultats. Mais il faut relativiser, les résultats peuvent également être très imprévisibles dans certains cas.

Dans un prochain article je donnerais un outil en PHP qui permet de générer cette suggestion. L'outil lit le sitemap, analyse la similarité avec Jaro-Winkler et suggère une URL. Ce qui est possible de faire, c'est de créer une redirection permanente entre l'URL morte vers la suggestion dans le but que cela soit bénéfique pour le référencement du site web.

juil 23

[PHP] Coefficient de Dice

Le coefficient de Dice est une mesure de similarité (Article wikipedia: Dice's coefficient). Ce coefficient est utilisé en statistique pour déterminer la similarité entre deux échantillons. J'avais besoin d'utiliser ce coefficient pour l'un de mes projets, mais n'étant pas disponible de bases avec PHP, j'ai du créer une fonction que je vous livre ici.

Présentation du coefficient de Dice

Le coefficient est toujours compris entre 0 et 1. Il se définit comme le double de l'intersection de deux lots (échantillons de valeurs) divisé par l'union de ces deux lots. La formule ci-dessous résume la méthode de calcul:

Équation coefficient de Dice

Dans cette formule, X et Y sont des lots. Pour calculer le coefficient de Dice de deux chaines, il est possible de définir X et Y comme l'ensemble des bigrammes de chacune des chaines respectives. Un bigramme étant la réunion de deux lettres dans un mot.

Exemple d'utilisation

Prenons l'exemple de deux chaines "hello" et "allo", auquel ont souhaiterais déterminer le coefficient de Dice. Les bigrammes respectifs sont {he,el,ll,lo} (soit 4 bigrammes) et {al,ll,lo} (soit 3 bigrammes). L'intersection des deux lots sont les valeurs {ll,lo}. Ainsi, l'équation devient:

s = 2*2 /(4+3) = 4/7 = 0,57

Grâce à cette valeur de 0,57 il est possible de déterminer que ces deux mots sont à peu près semblables. Plus la valeur est proche de 1 et plus les chaines sont similaires. Si le résultat est égal à 1, cela signifie que les deux chaines sont identiques.

Code PHP du coefficient de Dice

Le code ci-dessous présente la fonction qui permet de calculer le coefficient de Dice avec PHP.

<?php
// Calcul du coefficient de Dice
// Inspiration: http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Dice%27s_coefficient
// Licence: Libre de droit

function dice($str1='', $str2='')
{
    $str1_length = strlen($str1);
    $str2_length = strlen($str2);
   
    // Length of the string must not be equal to zero
    if ( ($str1_length==0) OR ($str2_length==0) )
        return 0;
   
    $ar1 = array();
    $ar2 = array();
    $intersection = 0;
   
    // find the pair of characters
    for ($i=0 ; $i<($str1_length-1) ; $i++)
        $ar1[] = substr($str1, $i, 2);
   
    for ($i=0 ; $i<($str2_length-1) ; $i++)
        $ar2[] = substr($str2, $i, 2);
   
    // find the intersection between the two sets
    foreach ($ar1 as $pair1) {
        foreach ($ar2 as $pair2) {
            if ($pair1 == $pair2)
                $intersection++;
        }
    }
   
    $count_set = count($ar1) + count($ar2);
    $dice = (2 * $intersection) / $count_set;
    return $dice;
}

echo dice('', 'cdefghi').'<br />'; // test with a null string
echo dice('abcdefg', '').'<br />'; // test with a null string
echo dice('abcdefg', 'cdefghi').'<br />';
echo dice('night', 'nacht').'<br />';
?>

La fin du script présente des exemples pour utiliser cette fonction. Avant de terminer, je tiens à préciser que je me suis inspiré d'un code en C++ provenant d'un wiki anglais: "Implementation of Dice's algorithm". Ce wiki présente l'implémentation du coefficient de Dice en C++, Java, Python et Ruby (mais pas en PHP, d'où l'intérêt du code que je viens de vous présenter). Faites-en bon usage.

Présentation du coefficient de Dice

Équation coefficient de Dice

Exemple d'utilisation

s = 2*2 /(4+3) = 4/7 = 0,57

Grâce à cette valeur de 0,57 il est possible de déterminer que ces deux mots sont à peu près semblable. Plus la valeur est proche de 1 et plus les chaines sont similaire. Si le résultat est égal à 1, cela signifie que les deux chaines sont identiques.

Code PHP du coefficient de Dice

<span style="color: #ff0000;"><?php</span>
<span style="color: #008000;">// Calcul du coefficient de Dice
// Inspiration: http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Dice%27s_coefficient
// Licence: Libre de droit</span>

<span style="color: #0000ff;">function</span> dice(<span style="color: #000080;">$str1</span>='', <span style="color: #000080;">$str2</span>='')
{
<span style="color: #000080;">$str1_length</span> = strlen(<span style="color: #000080;">$str1</span>);
<span style="color: #000080;">$str2_length</span> = strlen(<span style="color: #000080;">$str2</span>);

<span style="color: #008000;">// Length of the string must not be equal to zero</span>
<span style="color: #0000ff;">if</span> ( (<span style="color: #000080;">$str1_length</span>==0) <span style="color: #0000ff;">OR</span> (<span style="color: #000080;">$str2_length</span>==0) )
<span style="color: #0000ff;">return</span> 0;

<span style="color: #000080;">$ar1</span> = <span style="color: #0000ff;">array</span>();
<span style="color: #000080;">$ar2</span> = <span style="color: #0000ff;">array</span>();
<span style="color: #000080;">$intersection</span> = 0;

<span style="color: #008000;">// find the pair of characters</span>
<span style="color: #0000ff;">for</span> (<span style="color: #000080;">$i</span>=0 ; <span style="color: #000080;">$i</span><(<span style="color: #000080;">$str1_length</span>-1) ; <span style="color: #000080;">$i</span>++)
<span style="color: #000080;">$ar1</span>[] = substr($str1, $i, 2);

<span style="color: #0000ff;">for</span> (<span style="color: #000080;">$i</span>=0 ; <span style="color: #000080;">$i</span><(<span style="color: #000080;">$str2_length</span>-1) ; <span style="color: #000080;">$i</span>++)
<span style="color: #000080;">$ar2</span>[] = substr($str2, $i, 2);

<span style="color: #008000;">// find the intersection between the two sets</span>
<span style="color: #0000ff;">foreach </span>(<span style="color: #000080;">$ar1</span> as <span style="color: #000080;">$pair1</span>) {
<span style="color: #0000ff;">foreach </span>(<span style="color: #000080;">$ar2</span> as <span style="color: #000080;">$pair2</span>) {
<span style="color: #0000ff;">if </span>(<span style="color: #000080;">$pair1</span> == <span style="color: #000080;">$pair2</span>)
$intersection++;
}
}

$count_set = count($ar1) + count($ar2);
$dice = (2 * $intersection) / $count_set;
<span style="color: #0000ff;">return </span>$dice;
}

<span style="color: #0000ff;">echo </span>dice('', 'cdefghi').'<br />'; <span style="color: #008000;">// test avec une chaîne nulle</span>
<span style="color: #0000ff;">echo </span>dice('abcdefg', '').'<br />'; <span style="color: #008000;">// test avec une chaîne nulle</span>
<span style="color: #0000ff;">echo </span>dice('abcdefg', 'cdefghi').'<br />';
<span style="color: #0000ff;">echo </span>dice('night', 'nacht').'<br />';
<span style="color: #ff0000;">?></span>

Inspiration:

http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Dice%27s_coefficient

juil 20

[Livre] The Mythical Man-Month

Le livre "The Mythical Man-Month: essays on software engineering" (traduction: Le mythe du mois-homme: essais en génie logiciel) est un grand classique dans le domaine du génie logiciel. Cet ouvrage, qui s'est vendu à plus de 250.000 exemplaires, à été rédigé la première fois en 1975. C'est un ouvrage pionné en génie logiciel, qui présente des concepts encore vrai de nos jours (malgré que le génie logiciel à beaucoup évolué depuis la première version du livre).

Livre The Mythical Man-Month

Information générales sur ce livre

Le livre est consacré au management de projet logiciel. Bien qu'il y ait des exemples pour illustrer ses propos, l'auteur Frederick Brooks ne présente pas de codes et reste global dans les termes évoqués. De ce fait, n'importe quel manageur de projet peut comprendre le livre sans être obligatoirement un expert en développement sur tel ou tel langage de programmation.

Le livre ne présente pas (ou peu) de recette toute faites. Il s'agit souvent de réflexion sur certains points récurant dans la gestion d'un projet logiciel et de l'équipe qui l'accompagne. Cette réflexion est basé sur l'expérience de l'auteur lorsqu'il à écrit le livre en 1975, il y a donc certaines choses qui peuvent avoir changé et qui impose le lecture à se faire lui-même une réflexion.

La seconde édition du livre (publié en 1995) à été corrigé un peu et possède un chapitre supplémentaire. Cette seconde version est préférable pour voir quels sont les points où l'auteur avait tort.

Principal concept évoqué

Le titre du livre fait référence à un concept existant dans les projets informatiques, qui stipule qu'ajouter de la main d'œuvre sur un projet en retard, n'a pour conséquent que retarder encore plus le projet. Le mythe laisse penser que n hommes sur un projet de m mois, peut être réalisé par m hommes pendant n mois. Ce mythe est peut-être vrai dans d'autres domaines, mais pas dans le génie logiciel pour les raisons suivantes:

Il faut former les nouveaux arrivants
La communication entre les membres augmente
La répartition du travail est plus compliquée

En conclusion

Ce livre qui a été écrit pendant ce qu'ont pourrait appeler la "préhistoire de l'informatique" est considéré par beaucoup d'expert comme un ouvrage de référence. L'auteur (Frederick Brooks) est un professeur à l'université Duke (Caroline du Nord) et un ingénieur logiciel qui a été chef de projet de l'OS/360. Il a ainsi pu baser ses dires à partir de son expérience personnelle.

juil 13

Outil de lecture des rapports Myposeo

Myposeo est un service de suivi de positionnement d'URL sur les moteurs de recherche. Cet outil pour le référencement est entièrement en ligne. Il possède divers avantages décrit dans l'article "essai de Myposeo" rédigé sur un autre de mes blogs. L'article ci-présent dévoile un outil que j'ai développé, qui permet de lire les rapports XML de Myposeo et d'ajouter une fonctionnalité mal exploitée: l'ajout de notes à un moment donné.

Logo Myposeo

Courte présentation à Myposeo

Ce service en ligne est utile pour mesurer l'efficacité d'une campagne de référencement car il récupère tout les jours le positionnement d'un site sur les moteurs de recherche prédéfinit (Google, Yahoo ...). Puisque l'outil est en ligne, l'utilisateur ne prend pas le risque de se faire bannir son adresse IP par les engins de recherche.

La valeur ajoutée de Myposeo par rapport à ses concurrents est surement son ergonomie et utilisabilité. L'un des points faible c'est qu'il n'est pas possible d'ajouter des notes à ses données journalières. Cela à pourtant l'avantage de visualiser et reporter tout changement particulier sur un site (ou toutes les actions entreprises dans le référencement de celui-ci). Le chapitre suivant présente l'outil qui va résoudre ce problème.

Outil de lecture des rapports

L'outil codé en PHP permet de lire plusieurs rapports XML d'un même site ou non. Il classe les données par URL, puis par mot-clé, enfin il présente les données par ordre antéchronologique (du plus récent au plus ancien). Voici un exemple d'utilisation de cet outil:

Exemple de lecture des rapports

Comme il est possible de voir sur cet exemple, des notes se sont glissé dans le rapport. Ces notes permettent de mieux gérer les interventions journalières et ainsi de visualiser l'impact que cela à sur le positionnement.

Utilisation

Téléchargement

Le lien ci-dessous permet de télécharger le script (ainsi que des fichiers XML qui servent d'exemples).

Télécharger l'outil de lecture des rapports Myposeo

(Fichier compressé; 15,2Ko)

L'utilisation du script est relativement simple:

Télécharger le script (via le lien ci-dessus)
Dézipper le script et le placer dans un même dossier où il y a les rapports XML journaliers provenant de Myposeo
Uploader le tout (ou utiliser en local) pour voir le rapport généré automatiquement

Ajout de notes (facultatif)

Pour ajouter des notes sur les rapports fournit par cet outil il suffit de créer un fichier "note.xml" à placer dans le même répertoire que les fichiers précédents. Ce fichier XML peut posséder des notes pour plusieurs URL. La syntaxe est la suivante:

<?xml version="1.0" encoding="ISO-8859-1"?>
<myposeo>
 <site url="www.infowebmaster.fr/outils/mon-ip.php">
  <note date="28/06/2010">Note numéro 1</note>
  <note date="29/06/2010">Note numéro 2</note>
 </site>
 <site url="www.sejour-ecosse.com">
  <note date="28/06/2010">Note numéro 1</note>
  <note date="03/07/2010">Note numéro 2</note>
 </site>
</myposeo>

Mot de la fin

Dernièrement il y a eu une nouveauté sur Myposeo (voir l'article "Mise à jour myposeo v1.8.2" sur le blog officiel de Myposeo). Cet article à présenté des nouveautés intéressantes incluant une nouvelle gestion pour exporter les rapports. Mais il à également présenté une évolution future qui consistera à automatiser l'export (avec choix de la fréquence). Actuellement il est nécessaire d'exporter un fichier XML tous les jours manuellement, mais à l'avenir cela sera automatisé. Bonne nouvelle pour utiliser l'outil que je viens de vous présenter facilement.

juin 23

Générateur automatique de sitemaps

Un sitemaps est un protocole, utilisé par les moteurs de recherche, qui liste l'ensemble des pages indexable d'un site web. Le protocole proposé par Google accepte les fichiers XML et texte. Le script proposé sur cet article représente un générateur simpliste pour lister les pages à indexer d'un site web statique.

Présentation

Le script (distribué gratuitement) se base sur un crawler de fichiers internes à un site web. Il se charge de visiter tous les dossiers et de lister les fichiers incluent dans chacun des dossiers. Une option permet d'ignorer certains fichier pour ne pas prendre en compte les fichiers "administrateurs" et certains autres fichiers de votre choix.

Exemple de sitemap généré avec ce script

Puisque cet outil est basé sur un crawler de fichiers, le sitemap inclura les pages orphelines, c'est à dire les pages non reliées au reste du site par des liens.

Limitation

Ce script n'est pas adapté au site dynamique ou aux sites utilisant de l'URL rewriting. Sachant qu'il se base sur le nom des fichiers, le code ne pourra détecter s'il y a des variables GET envoyées aux pages. Idéalement, le script est à utiliser pour les sites possèdent uniquement des pages XHTML (sans PHP).

Les fichiers "sitemaps" doivent normalement avoir une limite de 50.000 URL et une taille maximum de 10Mo, mais le script actuel ne prend pas en compte cette limite. Cette limite n'a pas été ajoutée car il est assez rare de trouver des sites web statiques de plus de 50.000 URL.

Utiliser

L'utilisation du script est assez simple puisqu'il génère automatiquement le sitemap en XML. La première étape consiste à télécharger le script grâce au lien ci-dessous.

Télécharger le générateur de sitemap

(Fichier compressé. 1,61Ko)

Une fois le fichier téléchargé, il faut le dézipper et le placer à la racine d'un site web. Ensuite, il suffit d'ouvrir le fichier sur un navigateur web pour constater la génération du sitemap XML. Finalement, l'adresse de ce script peut être ajoutée dans Google outils pour les webmasters pour indiquer l'adresse du sitemap à Google.

juin 20

Crawler de fichiers interne à un site

Les crawlers de fichiers ont un intérêt pour lister rapidement toutes les pages ou images d'un site web. Cela permet d'automatiser la tache qui peut être longue et pénible s'il fallait le faire manuellement. Cet article présente un crawler qui liste tous type de fichier présent sur votre espace d'hébergement.

Présentation

Le script fournit sur cet article est à installer à la racine d'un site web, puis il suffit de l'ouvrir avec un navigateur web pour voir s'afficher la liste de tous les fichiers présent.

Sur le web il existe une multitude de crawler qui fouille sur une page web distante, mais il y a moins de projet (à ma connaissance) qui s'installe directement sur le serveur d'un site et qui liste les fichiers en interne du site. Cela possède l'avantage de pouvoir lister les pages et fichiers orphelins (qui ne sont pas utilisée ou liée au site web).

Type d'utilisation envisageable:

Chercher un dossier ou fichier
Générer automatiquement le sitemap du site ou le plan du site. Pas besoin de mettre à jour ce plan du site puisqu'il est généré automatiquement à chaque fois.
Si ce script est adapté, il peut tout aussi bien générer un sitemap de pages web ou un sitemap d'images
En adaptant le script, il est possible d'ouvrir toutes les pages PHP d'un coup. Cela peut être utile pour faire des recherches ou modifications sur toutes les pages d'un site en même temps.
Par exemple, ce script peut être utilisé si vous avez 500 pages, que vous modifier l'URL d'une de ces pages et que vous souhaitez mettre à jour toutes les pages web sur lesquels est présent l'ancienne URL

Télécharger

Le lien ci-dessous permet de télécharger le script. Une fois téléchargé, il suffit de le dézipper et de le placer à la racine de votre site.

Télécharger le crawler de fichiers

(Fichier compressé. 2,01Ko)

J'ai l'intention dans les prochains jours de donner des exemples d'utilisation et des modifications possible de ce script.

fév 21

Traduction base de données IP/Pays

Cet article propose une traduction française de la base de données IP-to-Country, permettant de relier une adresse IP à un pays. Cet article est la suite logique du précédent article publié sur ce blog, intitulé "Connaître le pays d’une adresse IP".

Présentation

Le souci majeur de la base de données de IP-to-Country, c'est qu'elle est exclusivement en anglais et que les noms de pays sont tous en majuscules (ce qui réduit la lisibilité et diminue le professionnalisme). Pour remédier à ces soucis j'ai créé une seconde base de données de traduction, permettant de réellement pouvoir utiliser IP-to-Country sur des sites web francophones.

Intérêt

Cette seconde base de données SQL est plus simple que la base de données de IP-to-Country pour la simple raison qu'elle recense les pays et non les adresses IP.

Sachant que IP-to-Country met à jours sa base de données assez régulièrement, ce serait une énorme perte de temps de traduire chaque nouvelles versions. Cette traduction à alors l'avantage d'être de bonne qualité à travers le temps. Pour mettre à jour les données, il faudra juste mettre à jour la base de données de IP-to-Country.

Télécharger la base de données

(Base de données SQL de 7,99Ko)

Exemple d'utilisation

Grâce à cette traduction, il est possible de créer un code PHP qui indique le pays d'origine d'un visiteur. Le tout étant bien évidemment en français. Le code ci-dessous utilise PHP 5 pour réaliser une telle application.

<?php
/*
Message de copyright obligatoire:
"This 'work' uses the IP-to-Country Database
 provided by WebHosting.Info (http://www.webhosting.info),
 available from http://ip-to-country.webhosting.info."
*/
// Connexion à la base de donnée (à adapter)
$link = mysqli_connect("localhost", "my_user", "my_password", "my_db");

// Fonction permettant de convertir l'adresse IP en un format numérique
function ipAdressNumber($dotted){
 $dotted = preg_split( "/[.]+/", $dotted);
 $ip = (double) ($dotted[0]*16777216)+($dotted[1]*65536)+($dotted[2]*256)+($dotted[3]);
 // IP Number = A x (256*256*256) + B x (256*256) + C x 256 + D
 return $ip;
}

$ip = $_SERVER['REMOTE_ADDR']; // Adresse IP du visiteur
echo 'Adresse IP: '.$ip.'<br />';
$ip = ipAdressNumber($ip); // Utilisation de la fonction pour convertir l'adresse IP

// Sélection des données dans la base de données. Si l'IP est comprise entre IP_FROM et IP_TO
$result = mysqli_query($link, "SELECT * FROM ip_to_country WHERE $ip BETWEEN IP_FROM AND IP_TO ") or die (mysqli_error($link));
$data = mysqli_fetch_array($result); // $data['COUNTRY_NAME'] contient le nom du pays en Anglais

// Utilisation de la seconde base de données pour traduire le nom du pays
$result2 = mysqli_query($link, "SELECT COUNTRY_NAME_FR FROM ip_pays_fr WHERE COUNTRY_NAME='".addslashes($data['COUNTRY_NAME'])."' ") or die (mysqli_error($link));
$data2 = mysqli_fetch_array($result2);
echo 'Pays: <strong>'.$data2['COUNTRY_NAME_FR'].'</strong>'; // Affichage du pays du visiteur (en français)

mysqli_close($link);
?>

Tester ce code

Mot de la fin

Pour voir un exemple concret de l'application de cette base de données, je vous recommande de consulter la page "Mon adresse IP" du site InfoWebMaster. Cette dernière indique l'adresse IP de l'utilisateur ainsi que quelques petites informations supplémentaires.

fév 19

Connaître le pays d’une adresse IP

Il est parfois utile de pouvoir localiser géographiquement une adresse IP. Cela peu par exemple être utile pour localiser un visiteur ou pour localiser des serveurs. Cet article présente deux tutoriaux PHP qui exploite une base de donnée pour associer une adresse IP à son pays.

Intérêt de localiser une adresse IP

Il y a plusieurs raisons qui motivent l'utilisation de la localisation de l'adresse IP. La liste ci-jointe n'est pas exhaustive mais inclue des exemples d'utilisations très probables:

Localiser le visiteur d'un site web. Avec cette information il est possible de personnaliser le contenu pour cet internaute (utiliser l'unité monétaire de son pays, suggérer une version du site dans la langue officielle de son pays ...).
Cibler l'audience d'une annonce en ligne.
Détection automatique d'un champ de formulaire (exemple: choix du pays pré-remplis).
Connaitre l'emplacement géographique du serveur d'un site web (exemple: peut être utile pour le référencement).
Filtrer les visiteurs selon leur localité.
Réduire le spam / Réduire les fraudes bancaires.

Base de données

Pour associer une adresse IP à un pays, il faut se baser sur une base de données qui répertorie des plages d'adresses IP à un pays. La base de données de IP-to-Country (anciennement ip-to-country.com) est relativement précise, complète et mise à jour régulièrement.

Pour réaliser les tutoriaux présents dans la suite de cet article, il est indispensable de télécharger la base de données suivante et de la mettre en place sur son espace d'hébergement.

Télécharger la base de données

(Base de données SQL de 5,23Mo)

Pays d'origine d'un visiteur

L'utilisation la plus populaire de cette base de données consiste à localiser le pays d'origine d'un visiteur. Le code PHP suivant fonctionne avec PHP 5.

<?php
/*
Message de copyright obligatoire:
"This 'work' uses the IP-to-Country Database
 provided by WebHosting.Info (http://www.webhosting.info),
 available from http://ip-to-country.webhosting.info."
*/
// Connexion à la base de donnée (à adapter)
$link = mysqli_connect("localhost", "my_user", "my_password", "my_db");

// Fonction permettant de convertir l'adresse IP en un format numérique
function ipAdressNumber($dotted){
 $dotted = preg_split( "/[.]+/", $dotted);
 $ip = (double) ($dotted[0]*16777216)+($dotted[1]*65536)+($dotted[2]*256)+($dotted[3]);
 // IP Number = A x (256*256*256) + B x (256*256) + C x 256 + D
 return $ip;
}

$ip = $_SERVER['REMOTE_ADDR']; // Adresse IP du visiteur
echo 'Adresse IP: '.$ip.'<br />';
$ip = ipAdressNumber($ip); // Utilisation de la fonction pour convertir l'adresse IP

// Sélection des données dans la base de données. Si l'IP est comprise entre IP_FROM et IP_TO
$result = mysqli_query($link, "SELECT * FROM ip_to_country WHERE $ip BETWEEN IP_FROM AND IP_TO ") or die (mysqli_error($link));
$data = mysqli_fetch_array($result);
echo 'Pays: <strong>'.$data['COUNTRY_NAME'].'</strong>'; // Affichage du pays du visiteur

mysqli_close($link);
?>

Tester ce code

Localisation d'un serveur

Pour une application ou pour le référencement, il peut se révéler utile de savoir dans quel pays se situe le serveur d'un site web. En connaissant le nom de domaine d'un site, le code suivant retourne l'adresse IP du serveur. Cette adresse IP peut alors permettre de localiser le serveur grâce à la base de données.

<?php
/*
Message de copyright obligatoire:
"This 'work' uses the IP-to-Country Database
 provided by WebHosting.Info (http://www.webhosting.info),
 available from http://ip-to-country.webhosting.info."
*/
// Connexion à la base de donnée (à adapter)
$link = mysqli_connect("localhost", "my_user", "my_password", "my_db");

// Fonction permettant de convertir l'adresse IP en un format numérique
function ipAdressNumber($dotted){
 $dotted = preg_split( "/[.]+/", $dotted);
 $ip = (double) ($dotted[0]*16777216)+($dotted[1]*65536)+($dotted[2]*256)+($dotted[3]);
 // IP Number = A x (256*256*256) + B x (256*256) + C x 256 + D
 return $ip;
}

$ip = gethostbyname('www.infowebmaster.fr'); // Adresse IP du serveur du site www.infowebmaster.fr
echo 'Adresse IP: '.$ip.'<br />';
$ip = ipAdressNumber($ip); // Utilisation de la fonction pour convertir l'adresse IP

// Sélection des données dans la base de données. Si l'IP est comprise entre IP_FROM et IP_TO
$result = mysqli_query($link, "SELECT * FROM ip_to_country WHERE $ip BETWEEN IP_FROM AND IP_TO ") or die (mysqli_error($link));
$data = mysqli_fetch_array($result);
echo 'Pays: <strong>'.$data['COUNTRY_NAME'].'</strong>'; // Affichage du pays du serveur

mysqli_close($link);
?>

Tester ce code

Il est possible de constater que ce code diffère très peu du code précédent qui consistait à déterminer le pays d'origine d'un visiteur.

Continuation

Cette base de données est très intéressante mais possède l'inconvénient d'être exclusivement en anglais. De plus, les pays sont écrits en majuscules, ce qui n'est pas très esthétiques et facile à lire. Il est possible d'améliorer ce travail en créant une base de données permettant de traduire le nom des pays.

Mise à jour 21 février 2010: Pour traduire le nom des pays en français, j'ai créé une base de données de traduction de IP-to-Country. Cela est idéal pour afficher convenablement le nom des pays aux visiteurs.

fév 14

[Analyse] Moteur de recherche interne

Les moteurs de recherche internes permettent aux internautes de trouver rapidement les informations qu'ils souhaitent. Le champ de recherche est alors un élément clé dans un vaste site web, pour permettre une facilité d'accès au contenu. C'est par ailleurs un élément d'accessibilité pour les utilisateurs qui naviguent uniquement avec le clavier.

Pour toutes ces raisons, le champ de recherche est très important et doit être réalisé en suivant certaines règles. Les quelques règles qui résument cet article serait de réaliser un champ de recherche visible, compréhensible, simple et suffisamment large pour pouvoir écrire ou éditer un requête.

A propos de cette analyse

Intérêt de l'analyse

Cet article se propose d'étudier les champs de recherches de plusieurs sites web très populaires. Cela permet d'apprendre à partir de cas concrets. Cela est d'autant plus avantageux qu'il n'est pas toujours possible de généraliser une seule bonne méthode pour réaliser un formulaire de recherche, car il existe des cas particuliers.

L'objectif de cet article n'est pas de faire une critique gratuite des sites web analysés. Ces sites web sont très populaires et de grandes qualités. Ils ont au contraire beaucoup à nous apprendre.

Ce que l'analyse ne dit pas

Il faut garder à l'esprit que cette analyse ne précise pas dans quels contextes ces moteurs sont placés sur le site. Les captures d'écran ne révèlent pas l'emplacement des champs de recherche et le design du site dans son ensemble. Par ailleurs, il est possible pour certains de ces sites que le champ de recherche ne soit pas une priorité. Par exemple, il se peut que pour des raisons marketing un autre élément soit plus proéminent sur la page (exemple: un call-to-action).

Enfin, cet article ne teste pas la façon dont les résultats apparaissent à l'utilisateur ainsi que la pertinence de ces résultats.

Liste des sites analysés

Information: les sites analysés ont été choisie au hasard parmi des listes de sites francophones populaires. Par ailleurs, cet article présente les sites par ordre alphabétique à partir de leur nom de domaine.

01net.com

Moteur de recherche 01net

Note: cette capture d'écran à été redimensionnée pour les besoins de l'article.

Points positifs

Le champ de recherche est assez gros pour faire une recherche de plusieurs mots. Le champ de recherche contient le mot "Rechercher" pour comprendre le but de cet espace blanc et disparait lorsque le visiteur souhaite entrer un mot sur ce champ de recherche.

Points négatifs

Les moteurs de recherche internet ne devraient jamais proposer l'opportunité de faire une recherche sur le web. Pour faire une recherche sur internet, les internautes ont déjà leur moteur de recherche préféré en favoris dans leur navigateur. Il est plus logique d'effectuer une recherche sur le site du moteur de recherche que sur un autre site. Par ailleurs, proposer deux boutons complique le nombre de possibilités que l'internaute peut effectuer (cf. la loi de Hick). En réalité, la seul raison qui pourrait justifier un tel choix consisterait à avoir un partenariat financier avec le moteur de recherche.

L'intitulé du bouton n'est pas clair. L'idéal serait d'avoir l'intitulé de l'action sur le bouton.

Allocine.fr

Moteur de recherche Allocine

Note: cette capture d'écran à été redimensionnée pour les besoins de l'article.

Points positifs

Un exemple de recherche est montré. Cela est très pratique pour rapidement comprendre que le formulaire de recherche peut contenir plusieurs types d'information (titre de film, nom d'un cinéma, code postal ...). Le champ de recherche est par ailleurs assez grand pour contenir plusieurs mots (pratique pour les longs titres de film). L'intitulé du lien est clair et précis.

Points négatifs

Il serait pratique de faire un effet sur le bouton au survol de la souris.

Amazon.fr

Moteur de recherche Amazon

Note: cette capture d'écran à été redimensionnée pour les besoins de l'article.

Points positifs

Il faut savoir que le champ de recherche d'Amazon occupe automatiquement toute la largeur de l'écran disponible. Le champ du formulaire s'étend donc automatiquement pour être le plus large possible. Pour la capture d'écran ci-dessus, la fenêtre du navigateur à volontairement été redimensionnée en moins large. Cela est vraiment très bien pour entrer le titre précis d'un produit (certains titre de livre sont parfois long, surtout si l'internaute inclus le nom de l'auteur ou l'année de publication).

Il faut aussi noter que la liste descendante permettant d'affiner la recherche sur une partie du site est une bonne option. D'ailleurs, mettre cette liste par défaut sur "Toutes nos boutique" est également un bon point, comparé à certains sites qui oublient de proposer un champ de recherche qui fouille sur tout le site.

Enfin, c'est un bon point d'avoir un bouton avec une couleur différente pour le faire ressortir.

Points négatifs

Bien que la largeur du formulaire soit un point positif, cela peut éventuellement poser des problèmes d'usabilité lorsque la largeur d'écran est grande. En effet, l'oeil humain n'a pas une vue d'ensemble de ce formulaire de recherche. De ce fait, le visiteur n'a pas forcément une représentation mentale de cet élément. Il est compliqué de relier mentalement deux éléments lorsqu'ils sont distants l'un de l'autre. Une possibilité d'amélioration pourrait consister à faire une largeur maximum pour ce formulaire et dans le cas où l'utilisateur à un écran large et qu'il entre plus de X caractères le champ de recherche pourrait s'agrandir automatiquement. Une telle possibilité pourrait être réalisée grâce au javascript.

La liste déroulante à malheureusement des intitulés de catégories difficilement différentiable rapidement. Par ailleurs les catégories du menu de Amazon sont différent des catégories présentent dans la liste déroulante.

A noter qu'en circonstance normale il aurait été préférable de retirer le mot "Rechercher" et de remplacer l'intitulé du bouton "Go" par "Rechercher". Toutefois, dans ce cas de figure, sachant que l'oeil humain va d'abord regarde à gauche du formulaire de recherche (cf. les études d'eye-tracking), il est judicieux de présenter la fonction de ce champ de formulaire avec l'inscription "Rechercher".

Cdiscount.com

Moteur de recherche Cdiscount

Points positifs

Pratique que le champ de recherche possède le mot "Recherche" en gris clair, qui disparait lorsque l'utilisateur sélectionne le champ de recherche. La présence d'une liste déroulante pour améliorer la recherche est également un bon point, surtout sachant que l'option par défaut permet de chercher sur tout le site. Enfin, la couleur du bouton de recherche est facilement visible.

Points négatifs

La première chose évidente qui saute aux yeux c'est que ce formulaire est bien trop petit et difficilement visible à côté de tous les éléments visuels qui distraient l'oeil de l'internaute. Il y a non seulement un champ de recherche petit mais la police d'écriture est petite également (ce qui n'est pas très bien adapté pour l'accessibilité du site).

La liste déroulante ne présente pas les catégories de la même façon que le menu. Les catégories sont présentées de manière aléatoire dans ce menu. Par ailleurs, certains titres de catégories pourraient être simplifiés. Par exemple "Le sport" pourrait tout simplement s'intituler "Sport", ce qui serait plus facile à scanner.

On a l'impression que l'intitulé "Ok" est tout ratatiné dans le bouton de recherche. Il serait tellement plus intéressant que ce bouton soit plus grand.

Les trois petits points du texte "Recherche..." ne sont pas nécessaires. Ils ajoutent un peu de bruit.

Ciao.fr

Moteur de recherche Ciao

Points positifs

La clarté est très impressionnante. La couleur du bouton de recherche est un bon choix pour le remarquer facilement. Ce qui est également très impressionnant c'est que le champ de recherche est automatiquement validé lors de l'arrivé sur le site, il n'y a pas besoin de le sélectionner pour faire une recherche, il est possible de directement taper sur le clavier à l'entré sur le site. Cette petite idée est non seulement pratique mais également accessible pour les internautes qui naviguent uniquement avec leur clavier.

Points négatifs

Difficile de comprendre à quoi correspond ce champ de recherche rapidement. Pour que l'internaute comprenne qu'il s'agit d'un champ de recherche il doit non seulement comprendre que le petit symbole dans le cadre orange est une loupe, mais il doit également faire une association mentale pour comprendre que la loupe signifie qu'il s'agit d'une fonction de recherche.

Pour finir, le bouton est bizarrement à l'intérieur du champ de recherche, ce qui est assez étrange et peu commun. A cause de ce petit détail, il n'est pas évident de comprendre que le cadre orange est un bouton associé au champ de recherche.

Clubic.com

Moteur de recherche Clubic

Note: cette capture d'écran à été redimensionnée pour les besoins de l'article.

Points positifs

Le champ de recherche est suffisamment large. Le bouton possède un bon intitulé qui définit bien l'action qui va se produire lors d'un clique de souris.

Points négatifs

L'icône de la loupe n'est pas indispensable puisque le formulaire de recherche à déjà un texte qui le définit et que le bouton est bien labellisé. Par ailleurs, lorsqu'il y a un large champ à remplir avec un bouton à côté, les internautes reconnaissent souvent qu'il s'agit d'un champ de recherche. De ce fait, il semble que cet icône ajoute du bruit et que cet espace de recherche puisse bien fonctionner sans sa présence.

D'une manière littérale, il n'est pas possible de chercher un "prix". Par contre, il est possible de chercher le prix d'un produit. De ce fait, le texte inclus dans le champ de recherche pourrait être adapté.

Avez-vous compris, à partir de la capture d'écran, à quoi servent les liens "Actus", "Télécharger", "Comparateur de prix", "Dossiers", "Forums", "Jeux" et "Google"? Au cas où vous n'auriez pas compris, il s'agit de liens qui permettent de faire une recherche ciblé. En cliquant sur "Dossiers", par exemple, le moteur de recherche effectue une recherche uniquement sur les dossiers du site. Personnellement, j'ai mis beaucoup de temps à comprendre cela (cela reste relatif).

Comme dit précédemment, il est inutile de proposer aux internautes d'effectuer une recherche sur le web entier à partir d'un site web qui n'est pas un moteur de recherche. Je suggèrerais donc de supprimer ce lien. Malgré tout, sachant que les résultats sont présentés sur Clubic, cela augmente leur nombre de pages vues (ce qui est profitable puisqu'il y a des publicités sur toutes les pages). Il reste à savoir si la suppression du lien vaut la perte de revenu attribué aux pages vues supplémentaires.

Commentcamarche.net

Moteur de recherche Comment ça marche

Points positifs

Le champ de recherche est suffisamment large. Le mot "Rechercher" et la loupe permettent de comprendre facilement de quoi il s'agit. Il faut noter que la bordure rouge est en prolongement avec le bouton en forme de loupe, cela permet donc de facilement identifier l'élément de recherche. Le bouton utilise une couleur qui ressort, ce qui permet de bien discerner le call-to-action. Enfin, il y a un effet lorsque la souris survole le bouton, cela permet de bien comprendre qu'il s'agit d'un bouton.

Points négatifs

N'hésitez pas à laisser un commentaire à cet article si vous trouvez un défaut à ce formulaire de recherche.

Dailymotion.com

Moteur de recherche Dailymotion

Points positifs

Le champ de recherche permet de rentrer environ 33 caractères, ce qui est probablement suffisant. Le bouton est explicite.

Points négatifs

A votre avis, à quoi sert le petit icône en forme de loupe à gauche? Est-ce qu'il permet quelque chose en plus? Est-ce qu'il est cliquable? En réalité il ne fait rien du tout, il sert uniquement à indiquer qu'il s'agit d'une zone de recherche. Ce qui est ambigüe avec cet icône c'est qu'il se situe à l'intérieur du champ où il faut taper les mots. Ce n'est qu'en effectuant une recherche que l'utilisateur se rend compte que les mots commence à droite de cette loupe (ce qui n'est pas très commun).

Annonces.ebay.fr

Moteur de recherche eBay

Note: cette capture d'écran à été redimensionnée pour les besoins de l'article.

Points positifs

Le champ de recherche est assez grand, le bouton est bien labellisé, une liste déroulante permet de spécifier une catégorie pour la recherche et cette liste déroulante est par défaut sur "Toutes les catégories".

Il est intéressant de noter qu'eBay n'a pas donné de design spécifique au bouton. Ce dernier utilise le design par défaut (cela évite d'alourdir la page).

Points négatifs

Quel est la différence entre un achat immédiat et une petite annonce? Le choix que doit faire l'utilisateur sur cette page d'accueil n'est pas très clair. Les connaisseurs d'eBay et les équipes de développement d'eBay sont probablement très familiers et comprennent la différence, mais ce n'est pas la même chose pour les nouveaux utilisateurs.

Il pourrait être judicieux de se demander si un call-to-action est nécessaire sur le bouton de recherche.

Facebook.com

Moteur de recherche Facebook

Points positifs

Champ suffisamment grands. Le mot "Recherche" inclus dans la zone de recherche permet de bien identifier l'élément.

Points négatifs

Le bouton est difficilement reconnaissable. Les couleurs ne le font pas ressortir. Il est de la même couleur que le texte "Recherche", alors que ce dernier disparait lorsque l'utilisateur sélectionne le champ de recherche.

Laredoute.fr

Moteur de recherche La redoute

Note: cette capture d'écran à été redimensionnée pour les besoins de l'article.

Points positifs

Le champ est assez grand pour contenir un ou plusieurs mots-clés. Il est possible d'affiner la recherche sur une seule partie du site. Par défaut, la liste déroulante est sur "Dans tout le site". Le bouton est clairement visible.

Points négatifs

Le texte présent dans la zone de recherche n'est pas visible dans son intégralité. Si le texte est si important, autant l'écrire juste au dessous de la zone de recherche. Par ailleurs, je ne pense pas que les internautes se soucis du singulier ou plusieurs du terme "mot clé".

La petite image de loupe n'est pas nécessaire sachant qu'il y a un mot "Rechercher" juste à côté. Les deux petits points à côté de "Rechercher" ne sont pas nécessaire, ils ajoutent un peu de bruit.

Leguide.com

Moteur de recherche Le guide

Note: cette capture d'écran à été redimensionnée pour les besoins de l'article.

Points positifs

Le champ de recherche est assez grand. Le bouton est clairement visible. Non seulement il ressemble à un bouton, mais en plus il ressort clairement dans le design. Un petite explication précise ce qu'il est possible de chercher à travers ce moteur de recherche interne.

Points négatifs

Les trois petits points associés au mot "Cherchez" ne sont pas nécessaire, ils ajoutent un peu de bruit. Le mot "Cherchez" est trop éloigné de la zone de recherche. Il faut préciser que "Un marchant, un produit, une marque" est une indication concernant l'utilisation de la zone de recherche, sinon ça pourrait laisser croire à un tagline. Bref, il faut ajouter un petit "Exemple" ou "Ex:" ou "Chercher" devant ces mots.

Lemonde.fr

Moteur de recherche Le monde

Points positifs

Indications claires. En dépit de sa petite taille, ce formulaire de recherche permet de rentrer environ 28 caractères.

Points négatifs

La couleur du champ de recherche est la même que la couleur de fond du site, ce qui le rend difficile à discerner. Difficile à deviner à partir de cette capture d'écran, mais le champ de recherche bloque la limite à 40 caractères. Il est donc strictement impossible de faire une recherche comportant plus de 40 caractères.

Il est possible de simplifier l'indication à un simple "Chercher" ou "Rechercher". L'indication "sur Le Monde.fr" ne semble pas indispensable. Par ailleurs, sachant que le nom de domaine est "lemonde.fr", il est plus judicieux d'attacher les deux mots et de garder la capitalisation pour bien discerner les deux mots (soit: LeMonde.fr). Ou alors, autant enlever le ".fr" car pour les utilisateurs il s'agit de la même marque. A l'intérieur de l'entreprise il est évident que le journal papier et le site web sont deux sources distinctes, mais les internautes sont bien consciente que lorsqu'ils visitent le site web il s'agit d'une source enligne (donc il n'est pas nécessaire d'ajouter le ".fr").

Enfin, le bouton ne ressemble pas à un bouton conventionnel, un petit effet de 3D permet de bien comprendre que l'élément peut être cliqué.

Linternaute.com

Moteur de recherche L'internaute

Points positifs

La zone est bien labellisée, il est possible de faire une recherche sur une partie du site et le bouton utilise une couleur qui le différencie.

Points négatifs

La largeur du champ de recherche est de 24 caractères environs. Ce n'est pas si mauvais que ça, mais ça pourrait être mieux.

Mettre le mot "Rechercher" uniquement en majuscule n'est pas la bonne solution. Cela donne l'impression que le site hurle au visiteur et c'est par la même occasion moins facile à lire.

La liste déroulante est assez longue, ne correspond pas aux catégories du menu de navigation et il y a une redondance du mot "Magazine" (voir sur le site pour mieux comprendre). Par ailleurs, l'intitulé "L'internaute Magazine" comme nom pour faire une recherche sur tout le site n'est pas aussi claire que "sur tout le site". Ça pose même un souci avec le nom des autres catégories qui ont également le mot "Magazine".

Orange.fr

Moteur de recherche Orange

Points positifs

La zone de recherche est bien distincte, le bouton est bien labellisé et ressemble à un bouton "cliquable". Le champ de recherche est assez grand.

Points négatifs

Je viens de (re)découvrir qu'Orange est également un moteur de recherche sur le web. Pour cela il a fallu que je test, car je n'arrivais pas à croire l'onglet intitulé "web". Le gros souci c'est que la plupart des gros moteurs de recherche possèdent une page d'accueil très simple où il est juste possible de faire une recherche. Ici, le fait qu'Orange possède une zone de recherche qui par défaut va chercher sur tout le web est assez ambigu. L'utilisateur ne fait pas forcément attention à l'onglet "Web" et pense faire une recherche sur le site. Or pour rechercher sur le site il faut regarder le quatrième onglet.

Après quelques recherches, j'ai découvert qu'il y avait un site Orange consacré uniquement au moteur de recherche. Cela signifie qu'il n'est pas nécessaire de proposer une option de recherche sur le web à partir du portail Orange (ou au moins, pas comme option de recherche par défaut). Car ironiquement, si un visiteur ne se rend pas compte qu'il à fait une recherche sur le web, il va avoir des résultats de recherche qui vont le faire partir sur un autre site.

Il ne reste plus qu'à se poser la question: est-ce que l'utilisation du moteur de recherche sur le web d'Orange est principalement intentionnel ou s'agit-il la plupart du temps d'une mauvaise compréhension des visiteurs?

Dès lors que le bouton est bien labellisé, il n'est pas nécessaire d'ajouter une icône en forme de loupe.

Pixmania.com

Moteur de recherche Pixmania

Points positifs

Le champ de recherche est labellisé avec le mot "recherche", il y a une liste déroulante pour approfondir la recherche et cette liste déroulante est par défaut sur "Tout le site".

Points négatifs

Le bouton de recherche n'est pas très distinct à cause du mauvais choix des couleurs. En effet, le bouton possède presque la même couleur que la couleur de fond à côté de lui.

Priceminister.com

Moteur de recherche Priceminister

Points positifs

La barre de recherche est très large, les indications inclussent dans la zone de recherche spécifient le type de requête qui peut être utilisé et le bouton est bien labellisé.

Points négatifs

Le texte présent dans la zone de recherche est composé de 11 mots, ce n'est pas possible de le scanner, il faut le lire. Il est possible de supprimer quelques mots pour simplifier ce texte. Voici un texte alternatif: "Rechercher sur le site: produit, code barre, vendeur ..." (ce qui fait 8 mots au lieu de 11).

Rueducommerce.fr

Moteur de recherche Rue du commerce

Points positifs

Le champ de recherche est à la fois long et haut, ce qui en fait une zone proéminente sur le site. Le texte descriptif présent dans la zone de recherche détail ce qu'il est possible de chercher.

Points négatifs

L'icône de la loupe n'est pas forcément indispensable. Il pourrait y avoir un effet sur le bouton au survol de la souris.

Skyrock.com

Moteur de recherche Skyrock

Points positifs

Le bouton est bien labellisé, le champ de recherche est assez grand et il est possible de sélectionner la catégorie de recherche.

Points négatifs

Dans la liste déroulante il y a une option permettant de chercher sur le web, grâce à Google. Cette option n'est pas nécessaire. Par ailleurs, cela complique la compréhension des autres options car l'option "Photo" présente à côté de "Web" pourrait laisser penser qu'il s'agit d'un moteur de recherche d'image sur tout le web, alors qu'il s'agit d'une recherche d'image sur le site.

Le bouton ne ressemble pas beaucoup à un élément cliquable.

Il n'y a pas d'option globale pour faire une recherche sur tout le site.

Wat.tv

Moteur de recherche Wat.tv

Points positifs

Le bouton est à la fois bien labellisé, clairement visible grâce à ses couleurs, mais ressemble également à un élément cliquable. Le texte présent dans la zone de recherche explique les possibilités de recherche.

Points négatifs

Globalement la zone de recherche est un peu petite comparé à l'importance de cet élément sur un tel site.

Wikio.fr

Moteur de recherche Wikio

Points positifs

Le bouton précise explicitement l'action et la zone de recherche. Le champ de recherche est assez grand.

Points négatifs

Le texte situé sous la zone de recherche devrait peut-être remplacer "médias et blogs" par "sites d'actualités" car il y a déjà une zone du site consacré aux blogs (ce qui est un peu ambigüe).

Fr.wikipedia.org

Moteur de recherche Wikipedia

Points positifs

La zone de recherche est bien délimité et facilement reconnaissable.

Points négatifs

J'ai beau être un grand utilisateur d'internet et un visiteur régulier de Wikipédia, je n'ai absolument aucune idée de la signification du bouton "Lire". Ce bouton est à gauche et est en gras, donc semble plus important que le bouton "Rechercher". En général, lorsque j'utilise la zone de recherche de Wikipedia je lance la recherche avec la touche "entrée" sur mon clavier. Est-ce que la touche "entrée" du clavier sélectionne "Lire"? Puisque ça semble être l'option principale, alors à quoi sert la touche "Rechercher"? Et si la touche "entrée" du clavier utilise l'option "Rechercher" alors à quoi sert le bouton "Lire"? Est-ce que ça fait une lecture vocale de la page?

Après recherche, il s'avère que "Rechercher" présente une liste de résultat alors que "Lire" ouvre directement le premier résultat, de la même façon que l'option "j'ai de la chance" sur Google. Cela ne fonctionne qu'à la condition qu'il existe une page avec le mot-clé de la recherche. Ce concept n'est vraiment pas facile à comprendre. Il serait peut-être plus judicieux d'utiliser seulement l'option "Lire" sous l'intitulé "Rechercher" et de faire un lien vers des recherches avancées.

Lorsque l'utilisateur effectue une recherche, une sélection de recherche courante est proposée (de la même manière que Google suggest). C'est très pratique, sauf que cela cache les deux boutons, ce qui rend compliqué l'utilisation de ce formulaire de recherche. Pour pouvoir cliquer sur un bouton, il faut d'abord cliquer sur une zone neutre de l'écran, pour que les suggestions disparaissent et donc que les deux boutons soit accessible.

Par ailleurs, la zone de recherche fait 24 caractères de long, ce n'est pas si mal mais ça pourrait être mieux. Cela est d'autant plus vrai que la fonctionnalité similaire à "Google suggest" présente parfois des résultats qui dépasse la largeur du champ de recherche.

Youtube.com

Moteur de recherche Youtube

Points positifs

Extrêmement simple et efficace. La zone est clairement visible, bien labellisée, assez grande, le bouton semble cliquable et présente un effet au survol de la souris.

Points négatifs

N'hésitez pas à laisser un commentaire à cet article si vous trouvez un défaut à ce formulaire de recherche.

Mot de la fin

Il faut retenir que certains points présentés ne reposent uniquement que sur l'opinion de l'auteur. En revanche d'autres points sont des règles d'usabilité reconnues. Les points de vue peuvent être discutés en commentaires.

A savoir que l'une des méthodes permettant de juger la qualité d'un moteur de recherche reste encore les tests d'usabilité qualitatifs ou quantitatifs.

Older Posts »