Blog du développement Web

Qwant, un bon moteur de recherche qui préserve votre vie privée

Florian — Wed, 29 Jul 2015 19:48:49 +0000

Qwant, un bon moteur de recherche qui préserve votre vie privée Florian mer 29/07/2015 - 21:48

Dans le monde des moteurs de recherche sur le Web, l'activité est monopolisée par Google. Il reste quelques miettes pour Bing (Microsoft) et Yahoo! (sauf pour Baidu en Chine) et rien pour les autres. Depuis l'affaire Prism et les révélations d'Edouard Snowden un acteur a fait parler de lui : DuckDuckGo. Sa force consiste dans la préservation de la vie privée en ne stockant aucune donnée des visiteurs. Mais comme de nombreux autres moteurs, la pertinence des résultats est assez aléatoire d'où mon retour vers Google.

En février 2013 est apparu Qwant un moteur de recherche franco-allemand.

Lui aussi assure respecter la vie privée des internautes, mais les résultats des requêtes étant décevants et je suis rapidement passé à autre chose.

Un récent article sur Korben.info a attisé ma curiosité. Après un nouveau test, je partage le même avis de son auteur sur son retour d'expérience de la nouvelle monture de Qwant activée en avril 2015. Les résultats sont étonnamment bons même si je dois encore parfois retourner sur Google pour des recherches datées.

L'absence de filtres dans la recherche Web, d'images et de vidéos est le gros reproche que l'on pourrait faire à cette nouvelle monture.

Points clés de Qwant :

Respect de la vie privée
Organisation de la recherche par thématique (web,actualités, social, images, vidéos, shopping)
Résultats retournés par des algorithmes développés par « Qwant ».

Les retours que j'ai pu voir sont aussi globalement positifs. Cependant, quelques améliorations seraient les bienvenues :

La taille des aperçus des images et des vidéos dans la recherche globale gagnerait à être plus petite
Il manque des filtres dans la recherche Web (Date de publication, langues, pays), d'images (taille, couleurs, date, droits d'usage) et vidéos (date, durée)
Une suggestion orthographique en cas de faute de frappe
Mélange dans les résultats des sources pour les recherches vidéos et images

Depuis bientôt deux mois, il s'agit de mon moteur de recherche par défaut sur les différents supports que j'utilise. Je reviens seulement vers Google pour des recherches spécifiques pour les images et les vidéos, ou des tests de positionnement (malgré tout, le site de Mountain View figure parmi mes outils de travail). Ce jeune moteur a encore une marge de progression, mais pour quelqu'un comme moi qui souhaite du mieux possible me défaire de l'emprise de Google, c'est un bon compromis le temps qu'il arrive à maturation.

Ajouter un commentaire

La compatibilité mobile, critère de positionnement chez Google

Florian — Wed, 08 Apr 2015 19:42:02 +0000

La compatibilité mobile, critère de positionnement chez Google Florian mer 08/04/2015 - 21:42

Ces derniers mois, Google a bouleversé le monde du référencement avec les algorithmes Penguin (qui pénalise les liens créé artificiellement ou sur-optimisé) et Panda (qui pénalise les fermes de contenus et les annuaires de liens).

Le moteur de recherche a fait une nouvelle annonce en février dernier concernant la mobilité des sites. La part des requêtes effectuées via des terminaux mobiles étant en forte expansion, Google a décidé de donner un coup de pouce aux sites web ayant une interface qui s'adapte aux écrans mobiles. Cette mise à jour aura lieu le 21 avril 2015.

Il a quelques mois, la firme américaine avait mis à disposition un outil en ligne afin de tester la compatibilité mobile d'un site. Si les pages de votre site passent ce test avec succès, la nouvelle mise à jour n'aura pas d’incidence sur votre positionnement dans les résultats de recherche. Si le test échoue, il n'y a pas lieu de paniquer pour autant !

Même si les sites avec une interface mobile vont être avantagés, ce ne sera que lors des recherches effectuées à partir d'un téléphone mobile. Un site qui n'a pas beaucoup de visite provenant d'un smartphone ne va pas être impacté. Avant de suivre des vendeurs de rêves qui vont vous proposer de faire une refonte de votre site, vérifiez avec quels appareils les visiteurs consultent votre site. Pour cela vous pouvez utiliser des outils de mesure d'audience comme Xiti ou Piwik (plus difficile à mettre en place, mais les données récoltées restent sur votre serveur).

Pour respecter les règles de compatibilité mobile, vous pouvez opter pour une solution responsive (qui s’adapte à la taille de l'écran), plus simple et moins coûteuse, ou Dynamic Serving (diffusion dynamique), une version alternative de votre site dédié au mobile qui garde cependant la même adresse.

Pour terminer, voici un récapitulatif des critères pour avoir un site "mobile friendly"

Le visiteur ne doit pas avoir à zoomer pour lire le contenu qui ne doit pas déborder de l'écran
Pas d'utilisation de Flash
Les liens de la page doivent être éloignés pour éviter des cliques par inadvertance

Avec cette nouvelle mise à jour, il n'y a pas péril en la demeure. Il s'agit avant tout d'un alignement du moteur de recherche sur les pratiques des utilisateurs qui doivent être le centre de préoccupation dans le fonctionnement d'un site web.

Ajouter un commentaire

URL sans caractères accentués avec Drupal

Florian — Mon, 02 Feb 2015 18:55:34 +0000

URL sans caractères accentués avec Drupal Florian lun 02/02/2015 - 19:55

L'anglais, langue prédominante en informatique en général, ne comporte pas d'accents. Il en résulte que les langues avec des caractères accentués ne sont pas toujours prises en compte comme il faut.

C'est le cas par défaut avec Drupal lors de la réécriture d'URL. Il est important d'avoir une URL lisible pour donner aux visiteurs potentiels une idée de ce que contiendra la page si jamais il n'y a pas de texte contextualisant votre lien. Les navigateurs prennent en charge les accents dans les adresses, mais ils ne les affichent pas toujours de la meilleure des façons :

http://fr.wikipedia.org/wiki/%C3%89t%C3%A9

Une telle URL est plus moche et peu lisible vous ne trouvez pas ?

Mais comme toujours avec Drupal il y a une solution :

Tout d'abord, pour automatiser la réécriture d'URL il faut installer le module Pathauto
Ensuite pour remplacer les caractères accentués dans l'URL il faut installer le module Transliteration
Après avoir activé ces deux modules, rendez-vous sur la page de configuration du module pathauto, dans l'onglet paramètres (admin/config/search/path/settings) et cochez "Transliterate prior to creating alias", puis sauvegardez le changement.

Pour avoir des URL encore plus propre, vous pouvez ajouter un liste de chaine de caractères à ne pas ajouter dans l'URL. Le module a déjà en base quelques mots anglais. Voici quelques autres, en français :

a, à, ainsi, alors, après, aussi, avant, avec, car, certes, chez, comme, d, dans, de, dehors, depuis, derrière, des, donc, en, ensuite, envers, et, etc, ici, jusqu, jusque, l, la, le, les, là, mais, même, ni, or, ou, où, par, pendant, pour, près, sans, sauf, selon, sous, sur, tout, un, une, vers, vu

Désormais les URL des vos pages ne comporteront plus de caractères accentués.

Ajouter un commentaire

Connaître la police de caractère d'une image avec WhatTheFont

Florian — Mon, 19 Jan 2015 20:58:07 +0000

Connaître la police de caractère d'une image avec WhatTheFont Florian lun 19/01/2015 - 21:58

Le service WhatTheFont m'a rendu bien des services puisqu'il permet de décomposer une image pour en révéler la typographie de son texte.

Le fonctionnement est très simple puisqu'il suffit d'uploader l'image correspondante. L'outil va séparer chaque lettre du texte qu'il aura repéré. À l'utilisateur ensuite d'indiquer quelle lettre est y représenter.

Le logiciel se charge ensuite de générer une liste de polices proches de celle de l'image.

L'image envoyée doit être lisible, c'est-à-dire que le fond doit être le plus uni possible que le logiciel ne le confonde pas avec une lettre.

Un outil très pratique assez fonctionnel qui permet de gagner pas mal de temps dans la prospection de la police de caractère idéale.

Ajouter un commentaire

Détecter les liens morts de vos pages Web avec W3C Link Checker

Florian — Thu, 15 Jan 2015 20:48:20 +0000

Détecter les liens morts de vos pages Web avec W3C Link Checker Florian jeu 15/01/2015 - 21:48

En tant que visiteur d'un site, il est toujours frustrant d'arriver sur une page qui n'existe pas dû à une erreur de frappe ou à la disparition de la page ciblée.

Les moteurs de recherches recommandent aux webmasters de faire la chasse à ces liens morts, bien que ça n'ait pas pour l'heure d'impact significatif sur le positionnement du site. En effet, il faut toujours prendre en considération le visiteur. Laisser végéter des liens brisés vous fera certainement perdre des visites à terme, celles des visiteurs qui iront voir ailleurs.

Selon le nombre de pages de votre site, cette traque peut s'avérer fastidieuse. Heureusement qu'il existe des outils qui vous permettront de faire cette vérification en automatisant les tâches.

Il existe de nombreux logiciels dans cette catégorie. Je vous présente ici W3C Link Checker. Son intérêt est d'être multiplateforme, car il s'agit d'un service web mis à disposition par le W3C. Il est également possible de l'installer sur votre propre serveur.

Il fait le boulot simplement, en permettant de choisir la profondeur des liens à analyser et affiche le type d'erreur qu'il rencontre (erreur 404, de redirection, etc.) avec un petit topo sur la marche à suivre pour corriger les problèmes.

Il lui manque juste une option lui permettant d'exporter les résultats pour une consultation hors ligne.

Crédit photo : danna (curious tangles)

Ajouter un commentaire

Un chargement de vos pages Web plus rapide avec des sprites CSS

Florian — Mon, 27 Oct 2014 20:32:03 +0000

Un chargement de vos pages Web plus rapide avec des sprites CSS Florian lun 27/10/2014 - 21:32

Les sprites CSS permettent de réunir plusieurs images en une seule, en particulier des icônes. Une seule image à charger permet de diminuer le nombre de requêtes faites au serveur. Selon votre hébergeur il y a un nombre maximum de requêtes simultanées et la méthode des sprites CSS permet d'éviter des bouchons dus à cette limite qui affecte la durée de chargement des pages web.

Le fait de regrouper des images permet également de réduire le poids global des images, et donc encore une fois accélérer l'affichage de vos pages Web.

Les sprites CSS c'est pas bien compliquer à mettre en place ! Pour en réaliser il faut utiliser la propriété "background-position". Aux premiers abords ce n'est pas toujours évident de réaliser des sprites CSS c'est pour cela que je vous conseille d'utiliser ce générateur en ligne.

Son utilisation est simple, il vous faudra cependant un minimum de connaissance en CSS :

enregistrez vos images dans une archive zip
transférez transférez cette archive
cliquez sur Créez le Sprite et le CSS
télécharger le Sprite et récupérez le code CSS qu'il vous faudra intégrer à vos pages

Quand je dois générer des sprites j'utilise ce script qui me fait gagner pas mal de temps.

Crédit photo : Twm

Ajouter un commentaire

Compatibilité des propriétés HTML, CSS et JavaScript pour chaque version d'un navigateur Web

Florian — Mon, 13 Oct 2014 19:22:38 +0000

Compatibilité des propriétés HTML, CSS et JavaScript pour chaque version d'un navigateur Web Florian lun 13/10/2014 - 21:22

Ces deux dernières années, les spécifications du HTML5 ont été intégrées petit à petit aux versions récentes des navigateurs. Elles apportent des changements bienvenus pour les développeurs. Cependant, il ne faut pas oublier les utilisateurs des anciens navigateurs qui ne peuvent pas interpréter cette nouvelle syntaxe du HTML5.

Heureusement, il existe différents outils qui permettent une meilleure compatibilité.

Aujourd'hui, le dilemme est de savoir jusqu'où doit-on remonter dans le temps pour rendre les vieux navigateurs compatibles avec les sites Web. La question se pose surtout pour Internet Explorer. Les versions récentes du navigateur de Microsoft respectent mieux les standards établis par le W3C, en revanche ce n'était pas le cas il y a quelques années. Pour ma part, j'ai abandonné IE7 et IE8. Avec l'arrêt de la maintenance de Windows XP en avril dernier, Microsoft annonce la fin des dernières versions de IE compatibles avec cet OS.

Pourtant, il m'arrive parfois d'utiliser une propriété CSS compatible avec un maximum de navigateur plutôt qu'une autre plus récente avec un résultat similaire. Pour cela, il existe le site Can I Use qui recense les propriétés HTML, CSS et JavaScript et leur compatibilité avec chacune des versions des navigateurs Web populaires. Un outil indispensable pour ma part.

Ajouter un commentaire

La ré-écriture d'URL pour le sous-domaine www avec Drupal

Florian — Mon, 29 Sep 2014 18:08:27 +0000

La ré-écriture d'URL pour le sous-domaine www avec Drupal Florian lun 29/09/2014 - 20:08

Si vous avez déjà développé un site avec Drupal, vous avez sans doute remarqué que par défaut vous pouvez accéder à votre site Web avec ou sans les www. Quand vous tapez www.mondomaine.com l'adresse affiche toujours les www et quand vous tapez mondomaine.com les www ne s'affichent pas. Si vous laissez en l'état, Google va considérer qu'il y a deux adresses différentes avec le même contenu. Et le contenu dupliqué est pénalisé chez Google ce qui résultera une descente aux enfers de vos pages dans les résultats du moteur de recherche (SERP).

Pour résoudre ce problème, il suffit de faire une réécriture d'URL. Cette technique n'est pas toujours évidente, mais pas de panique, les développeurs de Drupal ont pensé à tout ! En effet, à la racine de votre site Web ou de votre répertoire Drupal il y a un fichier .htaccess. Ouvrez-le avec un éditeur de texte et cherchez les lignes suivantes :

# If your site can be accessed both with and without the 'www.' prefix, you
  # can use one of the following settings to redirect users to your preferred
  # URL, either WITH or WITHOUT the 'www.' prefix. Choose ONLY one option:
  #
  # To redirect all users to access the site WITH the 'www.' prefix,
  # (http://example.com/... will be redirected to http://www.example.com/...)
  # uncomment the following:
  # RewriteCond %{HTTP_HOST} .
  # RewriteCond %{HTTP_HOST} !^www\. [NC]
  # RewriteRule ^ http%{ENV:protossl}://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
  #
  # To redirect all users to access the site WITHOUT the 'www.' prefix,
  # (http://www.example.com/... will be redirected to http://example.com/...)
  # uncomment the following:
  # RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  # RewriteRule ^ http%{ENV:protossl}://%1%{REQUEST_URI} [L,R=301]

Si vous souhaitez que les adresses de votre site apparaissent avec les www, enlevez les # devant les trois lignes que j'ai colorisées en marron. Inversement, si vous ne voulez pas de ces www enlevez les # des deux lignes colorisées en violet.

Ajouter un commentaire

Avec un simple formulaire, ajoutez votre site dans les moteurs de recherche

Florian — Mon, 22 Sep 2014 18:00:33 +0000

Avec un simple formulaire, ajoutez votre site dans les moteurs de recherche Florian lun 22/09/2014 - 20:00

Lorsque vous mettez en ligne votre site Web, vous pouvez l'inscrire directement dans les moteurs de recherche via un formulaire d'inscription. Cela peut accélérer son apparition dans les pages de résultats, en revanche cela n'affectera pas le positionnement qui se travaille en amont (contenu pertinent, site bien codé, etc.) et en aval (mise à jour régulière, lien retour de qualité, etc.)

Voici donc les moteurs de recherche qui propose un formulaire d'inscription :

Google
Bing (moteur de recherche utilisé également par Yahoo!, inscription obligatoire)
Voila (moteur de recherche utilisé également par Orange)
Exalead

Pour aider les moteurs de recherche à bien référencer toutes vos pages, il est recommandé d'ajouter un sitemap à votre site. C'est un fichier dans lequel est listé toutes les pages de votre site que vous souhaitez référencer.

Pour cela il faut indiquer où se trouve ce fichier. Avec un éditeur de texte, créez un fichier robots.txt (n'oubliez pas le s) dans lequel vous inscrirez :

Sitemap http://www.votredomaine.fr/sitemap.txt

Maintenant, nous allons nous occuper de notre fichier sitemap. Toujours avec votre éditeur de texte préféré, créez un fichier sitemap.txt dans lequel vous inscrirez les adresses de chaque pages que vous souhaitez indexer dans les moteurs de recherche en allant à chaque fois à la ligne.

Ensuite, vous n'avez plus qu'à envoyer via votre client FTP les deux fichiers à la racine de votre site qui permettront aux moteurs de recherche auront d'avoir une liste d'adresses des pages de votre site.

Pour les utilisateurs de CMS du type Drupal, Wordpress, Dotclear, etc., il existe des modules qui permettent de générer automatiquement un sitemap.

Si vous avez des questions, n'hésitez pas à les poser en commentaire.

Crédit photo : Johny Blaze

Ajouter un commentaire

Protéger l'accès de pages web avec un mot de passe

Florian — Mon, 15 Sep 2014 17:41:46 +0000

Protéger l'accès de pages web avec un mot de passe Florian lun 15/09/2014 - 19:41

Pour protéger des documents ou pour accéder à une page d'administration, vous allez avoir besoin de mettre en place un système d'identification avec mot de passe. Si votre serveur tourne sur Apache, c'est très simple.

Pour commencer, placez un fichier nommé .htaccess dans le dossier à protéger et copiez le code suivant avec un éditeur de texte :

AuthName "Page protégée" AuthType Basic AuthUserFile "/chemin/absolu/dossier_a_proteger/.htpasswd" Require valid-user

AuthName : la phrase qui s'affichera lorsque l'utilisateur devra indiquer son mot de passe.

AuthUserFile : le chemin absolu du fichier .htpasswd qui va contenir les identifiants et leur mot de passe.

Pour trouver ce chemin absolu, créez un fichier nommé path.php que vous placerez dans le dossier à protéger et copier le code suivant :

<?php echo realpath('path.php'); ?>

Lancez votre navigateur Web, puis ouvrez ce fichier. Il vous indiquera alors le chemin absolu que vous devrez copier dans le .htacces en n'oubliant pas de remplacer path.php par .htpasswd.

Maintenant, occupons nous de ce fameux .htpasswd qui va contenir les identifiants et les mots de passe.

Créer un fichier nommé .htpasswd que vous placerez aux côtés du .htacces dans le dossier à protéger.

Voilà à quoi ressemble la syntaxe de ce fichier :

identifiant1:mot_de_passe_crypte1 identifiant2:mot_de_passe_crypte2

Pour crypter un mot de passe, il existe des générateurs en ligne qui le font simplement.

Note : certains hébergeurs n'acceptent pas les mots de passe cryptés. Il faut alors les écrire comme en clair.

Dorénavant, lorsque vous vous rendrez dans ce dossier via un navigateur Web, une fenêtre d'authentification s'ouvrira pour vous demander votre identifiant et mot de passe.

Crédit photo : Dev.Arka

Ajouter un commentaire