L'excellent livre Homepage usability: 50 websites deconstructed de Jakob Nielsen et Marie Tahir ne prend pas de rides malgré sa première publication en 2001 (assez vieux dans le domaine du web). Cet ouvrage rédigé par des spécialistes de l'usabilité analyse pas moins de 50 pages d'accueil. Le but est d'apprendre des règles de bonnes conduites à partir d'erreurs réalisés sur ces 50 sites.

Livre Homepage uability: 50 website deconstructed

Livre Homepage uability: 50 website deconstructed

Présentation

Avant toute chose il faut savoir que les 50 sites analysés sont parmi les plus réussis et les plus populaires du web (en 2001). Ces pages sont donc excellentes, mais des problèmes d'usabilités peuvent tout de même être décelés.

Le gros avantage de ce livre, c'est qu'il répertorie presque tous les principaux problèmes d'usabilité. Au bout de la moitié du livre, le lecteur acquiert de l'expérience et peut presque découvrir les soucis d'usabilités avant qu'ils ne soient détaillés par les auteurs. Cela est parfois redondant, mais il y a toujours des choses à apprendre au fur et à mesure des pages.

Mis à part ces analyses, le site présente également une liste de règles de bonnes conduites à effectuer en usabilité pour le web. De plus des statistiques sont fournies pour savoir par exemple quel est la taille moyenne des logos. C'est idéal pour éviter de faire un site "hors-norme".

Avis sur le livre

Une bonne partie des astuces doivent être respectés pour améliorer la qualité du site. Toutefois, je ne pense pas que tous les conseils doivent toujours être suivis à la lettre. Non seulement le web à changé depuis 2001, mais de plus il n'y a pas que l'usabilité qui entre en compte dans la vie d'un site web. Il faut parfois trouver le juste milieu entre l'usabilité, les contraintes techniques, le webmarketing, le webdesign ou encore le référencement.

Par exemple, ce livre recommande d'utiliser un titre principal (la balise <title>) qui commence par le nom du site. Le principal argument pour ce choix est la considération que les navigateurs web classent les favoris par ordre alphabétique. Or les navigateurs ont bien changé et le comportement des internautes également. Il est probablement plus avantageux de nos jours d'utiliser la balise <title> à des fins de référencement (et un peu de webmarketing).

Mot de la fin

Une version francisé est disponible sous le nom de "l'art de la page d'accueil : 50 sites web passés au crible". Que ce soit la version française ou la version anglaise, je vous recommande de consulter ce livre si vous souhaitez améliorer vos connaissances en usabilité. Les grandes captures d'écran couleurs associés aux points à corriger en font un support facile à consulter. C'est idéal pour apprendre des principales d'usabilité dans des cas concrets.

Cet article va présenter une petite application Twitter permettant de récupérer les tweets d'un compte et d'y afficher - si disponible - les petites discutions entre utilisateurs. Les fichiers du script peuvent être téléchargés (voir à la fin de cet article) et installer sur un hébergement web assez facilement. De ce fait, tout le monde peut avoir son propre petit lecteur de Tweets utilisant AJAX.

Logo de Twitter

Logo de Twitter

Prérequis

Pour comprendre le code source de ce script il est recommandé d'avoir consulté l'article intitulé "extraire les tweets en AJAX" car le code présenté ici est basé en grande partie sur ce précédent script. La principale différence c'est que le lecteur de tweets de cet article récupère des messages supplémentaires. Lorsque sur Twitter un utilisateur répond à quelqu'un, ce script récupère l'autre message pour mieux comprendre le contexte de la réponse.

En raison de la longueur du fichier PHP (environ 100 lignes) le code ne sera pas détaillé sur cet article. Les principales difficultés comprises dans le code PHP ont par ailleurs déjà été expliquées dans des articles précédents.

Télécharger les fichiers de ce script

Pour réaliser ce petit lecteur de tweets il faut 6 fichiers, incluant une page html, un fichier PHP, un fichier javascript et un fichier CSS pour donner un petit design à l'application. Le fichier compressé de l'application fait 6Ko et peut être téléchargé grâce au bouton ci-dessous.

L'installation est assez simple, il suffit de télécharger les fichiers, les décompresser et les envoyer sur un espace d'hébergement.

jan 31

API de Untiny

Untiny est un service gratuit permettant de connaitre l'adresse original d'une URL raccourci. Il est possible d'utiliser le service manuellement, cependant l'API de Untiny mise à la disposition des développeurs peut se révéler utile pour automatiser le processus (exemple: pour un client Twitter). Cet article didactique va expliquer comment utiliser l'API à travers une application AJAX.

Présentation

Logo de Untiny

Logo de Untiny

Cet article va présenter uniquement le code PHP pour utiliser l'API de Untiny. Le reste du code AJAX peut être trouvé sur un précédent article publié sur ce blog, intitulé "Dé-raccourcisseur d’url".

Les intérêts de ce nouveau code, par rapport à l'ancien article, sont multiples:

  • Le service Untiny est complet et performant. Ce service supporte de nombreux raccourcisseur d'URL.
  • Réduit la charge serveur. En utilisant un service externe, le script du serveur demande moins de ressources.
  • Certains hébergeurs désactivent l'option cURL. De ce fait, l'ancien code ne pouvait pas être utilisé par tous.

Prérequis

Pour comprendre le code PHP qui va suivre il faut avoir des connaissances en PHP. De plus, pour réaliser l'application AJAX il faut utiliser le reste du code qui a été présenté sur l'article "Dé-raccourcisseur d’url".

Code PHP

Le code PHP récupère dans un premier temps l'URL qu'il faut dé-raccourcir (exemple: http://tiny.pl/htk). La fonction api_untiny() s'occupe d'extraire l'URL présente dans le fichier XML de l'API.

<?php
$url=trim(strip_tags($_GET['url']));

function api_untiny($url)
{
 $urlAPI = 'http://untiny.me/api/1.0/extract/?url='.$url;

 if ($XML = @simplexml_load_file( $urlAPI )){
 return $XML->org_url; // Retourne l'URL entière
 }
}

$url_retour = api_untiny($url);
echo '<a href="'.$url_retour.'">'.$url_retour.'</a>'; // Affiche l'URL
?>

Télécharger l'application

Toute l'application AJAX peut être téléchargée grâce au lien ci-dessous. Mais il est également possible de ce servir uniquement d'une code PHP pour toute utilisation qui vous semble appropriée.

Pour utiliser l'application AJAX il faut télécharger le fichier zippé, le décompresser et l'envoyer sur un espace d'hébergement web.

Avec la popularisation de Twitter, il n'y a jamais eu autant de services en ligne permettant de raccourcir les URL. Très pratique lorsqu'il s'agit d'économiser de la place dans un tweet, ces URL possèdent néanmoins un gros défaut: il n'est pas possible de savoir avec précision où l'URL emmène. Pour résoudre cette problématique, ce tutorial présente un script AJAX qui permet de dé-raccourcir une URL.

Présentation

Une page d'exemple est disponible. Notez toutefois que le script n'a pas été testé avec tous les services permettant de raccourcir une URL. Il fonctionne uniquement sur les raccourcisseurs d'URL qui font des redirections 301 ou 302 (redirection Javascript pas prise en compte par le script).

Prérequis

Il est préférable d'avoir des connaissances en AJAX pour pouvoir comprendre le script. Cependant en connaissant uniquement le PHP, il est possible de comprendre à peu près le script. Dans les archives de ce blog il est possible de découvrir des tutoriaux d'initiation qui sont parfait pour les débutants. N'hésitez pas par exemple à consulter les articles de la catégorie AJAX.

Code

Code xHTML

Le code xHTML est assez simple, il faut juste avoir un formulaire pour envoyer la petite URL et un <div> pour pouvoir afficher le résultat dynamiquement (avec Javascript).

<form method="post" action="" enctype="multipart/form-data">
<label>URL: <input type="text" name="url" id="url" /></label> <input onclick="displayURL(url.value)" type="button" value="Dé-raccourcir l'URL" />
</form>

<div id="afficherURL"></div>

Code Javascript

Le code Javascript est un peu élaboré puisqu'il doit récupérer les informations dynamiquement.

function file(fichier)
{
 if(window.XMLHttpRequest) // FIREFOX
 xhr_object = new XMLHttpRequest();
 else if(window.ActiveXObject) // IE
 xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 else
 return(false);
 xhr_object.open("GET", fichier, false);
 xhr_object.send(null);
 if(xhr_object.readyState == 4) return(xhr_object.responseText);
 else return(false);
}

function displayURL(url)
{
 // Afficher une image pendant le chargement
 window.document.getElementById("afficherURL").innerHTML = "<img src=\"Loading-transparent.gif\" alt=\"icône chargement\" />";

 if (url != false){ /* Si l'utilisateur à bien inscrit l'URL */
 var url = "afficher-url.php?url="+url; /* Adresse du fichier .php */
 var obj = file(url); /* Récupère le résultat (la longue URL) */
 /* le résultat est affiché dans un div (.result) qu'il est possible de personnaliser avec CSS */
 window.document.getElementById("afficherURL").innerHTML = "<div class=\"result\">"+obj+"</div>";
}
else
 window.document.getElementById("afficherURL").innerHTML = "Erreur";
}

Note: L'image de chargement est la suivante (vous pouvez la prendre elle est libre de droit):

Image de chargement avec AJAX

Code PHP

Version 1 (nécessite PHP 5)

Ce code est une mise à jour de l'article suite à la suggestion de Seebz dans les commentaires. Il existe une fonction en PHP 5 intitulé get_headers(). Cette dernière facilite grandement le script.

<?php
$url=trim(strip_tags($_GET['url']));

function analyseur_header_http($url)
{
 $headers = get_headers($url,1);
 if (is_array($headers['Location'])) // Retourne true si $headers['Location'] est un array
 return end($headers['Location']);
 else
 return $headers['Location'];
}

$url_retour = analyseur_header_http($url);
echo '<a href="'.$url_retour.'">'.$url_retour.'</a>';
?>

Cette fonction à l'avantage de retourner la dernière URL dans le cas où il y a plusieurs redirection à la suite.

Version 2 (idéal pour PHP 4)

Ce code alternatif est est un peu moins efficace mais il est pratique dans le cas où vous n'avez pas PHP 5. Le code utilise curl pour extraire le contenu de la page.  Il faut donc s'assurer dans un premier temps que l'hébergeur accepte l'utilisation de cette ressource (certains hébergeurs empêchent l'utilisation de cette ressource qui consomme trop). L'extraction de la page sert à récupérer le texte inclue dans l'entête HTTP. C'est dans cet entête qu'il y a la page de redirection (la longue URL). Le code PHP récupère alors cette adresse et l'affiche pour qu'elle soit utilisée dans le fichier Javascript.

<?php
$url=trim(strip_tags($_GET['url']));

function analyseur_header_http($url)
{
 $ch = curl_init(); // Initialise une nouvelle session cURL

 // Options de transfert cURL
 curl_setopt($ch, CURLOPT_URL, $url);
 curl_setopt($ch, CURLOPT_HEADER, true);
 curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

 $en_tete = curl_exec($ch); // Exécute la session cURL

 curl_close($ch); // Fermeture cURL

 if ($en_tete==true){
 $position = strpos($en_tete, '<'); // récupère la position du caractère "<"
 $en_tete = substr($en_tete, 0, $position); // récupère seulement l'entête HTTP
 }

 $en_tete = nl2br($en_tete);
 preg_match('#Location: (.+)\<br /\>#isU', $en_tete, $url_retour_array); // Extraire l'URL
 $url_retour = '<a href="'.$url_retour_array[1].'">'.$url_retour_array[1].'</a>';

 return $url_retour; // Retourne l'URL entière
}

echo analyseur_header_http($url); // Utilisation de la fonction analyseur_header_http()
?>

Télécharger le script

Pour éviter de se perdre avec les fichiers et les différents scripts, un fichier zippé contenant tout ce qui est nécessaire à l'exécution du script peut être téléchargé:

L'utilisation est simple. Il suffit de décompresser les fichiers et de les uploader sur un site web.

Le livre Defensive design for the web est un excellent ouvrage permettant de préparer un site à réussir dans l'échec. Les auteurs de ce livre présentent 40 conseils pour améliorer les messages d'erreurs et fonctionnalités lorsque celui-ci rencontre une erreur ou un problème.

Livre Defensive Design for the Web

Livre Defensive Design for the Web

Présentation

Lorsqu'un visiteur d'un site web est face à un problème, il y a beaucoup de chance que celui-ci quitte le site ou que sa confiance envers le site soit réduite. C'est donc à ce moment crucial que le visiteur doit sentir qu'il y a eu un effort de fait et que le site sur lequel il se trouve est sérieux.

Matthew Linderman et Jason Fried, les deux auteurs de ce livre, propose une liste de 40 recommandations pour améliorer le site lorsqu'il est susceptible d'afficher des messages d'erreurs.

Sans nul doute les connaissances acquises au travers de la lecture de ce livre son bénéfiques. Les intérêts d'appliquer les consignes du livre son multiples:

  • Éviter une détérioration de l'e-reputation
  • Éviter qu'un visiteur ne quitte le site lorsqu'il rencontre certains problèmes (erreur 404, inscription ...)
  • Amélioration de la confiance du visiteur envers le site
  • Améliorer le taux de conversion des visiteurs en acheteurs (pour les sites d'e-business)
  • Et bien d'autres ...

Information sur ce livre

Ce livre n'est pas destiné uniquement aux développeurs web. Les conseils ne sont jamais techniques mais toujours théoriques. De ce fait, le livre peut être consulté par les concepteurs, les architectes informatique, les développeurs, les rédacteurs web et également par les chefs de projets.

Avantages

La liste ci-dessous présente les bon points concernant la façon dont ce livre présente les connaissances.

  • Livre rapide à lire.
  • Chaque conseil est agrémenté d'une capture d'écran et détaillé grâce à un exemple concret.
  • Une liste récapitulative est présente à la fin. Idéal pour rapidement évaluer si un site à été optimisé de toutes parts.

Inconvénients

Malheureusement, aucun livre n'est parfait. La liste ci-dessous présente des points qui pourraient être améliorés.

  • Le livre pourrait être beaucoup plus petit si tout l'espace était utilisé.
  • Certaines captures d'écran mériteraient d'être plus grande ou d'avoir de la couleur. Ceci est spécifiquement vrai pour certains messages d'erreurs qui sont en rouge.
  • Certains conseils sont rabâchés.

Pour finir

Je recommande bien entendu la lecture de ce livre. Il est rare qu'un livre se consacre aux connaissances de l'imprévu, c'est pour cette raison qu'il y a peu de chance que vous connaissiez tous les conseils de bon sens qui sont inclus dans les pages de cet ouvrage.

Lors du lancement d'un site web, il y a de nombreuses choses à vérifier. Il y a tellement de points à prendre en considération que cela amène, malencontreusement, à oublier des points important. Pour éviter de tels oublis, je vous propose une check-list au format pdf que vous pouvez facilement imprimer.

Détail de la check-list

Composés d'environ 70 points, répartis dans 10 catégories, cette liste se veut complète. Le reste de l'article, présente la liste et détails chacun des points qui y sont présent.

Design

A effectuer Description
Identité visuelle S'assurer que l'identité visuelle est bien réalisée et s'harmonise sur l'ensemble du site. Si nécessaire, y a-t-il des bannières de différents formats aux couleurs du site?
Logo bien situé Est-ce que le logo se situe à une place où il devrait être? La plupart du temps, l'emplacement du logo est dans le coin en haut à gauche.
Tagline Le tagline correspond au petit message situé à côté du logo (ou incorporé au logo) qui indique la thématique du site et sa valeur. Les nouveaux visiteurs peuvent alors rapidement savoir sur quel type de site ils se trouvent.
Welcome blurb Le welcome blurb est un message situé sur la page d'accueil qui précise la thématique du site et vend ses mérites.
Navigation simple Est-ce que les éléments de navigation sont simples à comprendre et à trouver?
Ergonomie Point très général qui consiste à vérifier tous les principaux critères liés à l'ergonomie du site web.
Liens facile à discerner et à comprendre Est-ce que le design du site à réaliser des liens qui sont facile à discerner (exemple: souligner et d'une couleur différente). De même, est-ce que l'ancre des liens est compréhensible? (exemple: éviter "cliquer ici").
Favicon Présence d'un favicon?

Typographie

A effectuer Description
Contraste correct Très important en termes d'usabilité et d'accessibilité, le contraste doit être idéalement blanc et noir.
Taille des caractères Est-ce que les caractères ont une taille suffisante? De même, est-ce que l'espacement des lignes et des mots est "bien pensé"?
Régularité / Uniformité Faire en sorte que toutes les pages possède la même structure et uniformité (exemple: titre principal toujours au même endroit).
Sémantique xHTML Tous les principes sémantiques ont-ils été réalisés? Par exemple <h1> sert à définir le titre principal, puis les sous-titres utilisent <h2>.
Relecture Indispensable pour éviter les grosses erreurs.
Orthographe et grammaire Faire en sorte que les textes n'aient pas de fautes.
Mode et temps du français Est-ce que le temps et mode des phrases est régulièrement le même? Si un texte débute à l'impératif, puis continu au conditionnel et à l'indicatif, cela peut vite devenir difficile à suivre.
Pas de mots ou phrases trop récurrentes Faire attention aux répétitions qui alourdissent la lecture.

Navigation

A effectuer Description
Logo = lien vers la page d'accueil Presque obligatoire en termes d'usabilité, il faut que le logo du site soit un lien vers la page d'accueil.
Page plan du site Y a-t-il une page qui sert de plan du site?
Page mentions légales Y a-t-il une page contenant les mentions (exemple: condition générales de ventes, condition d'utilisation ...)?
Page de contact Est-il possible de contacter le site ou le webmaster? Y a-t-il les coordonnées et l'adresse du principal administrateur du site?
Fil d'Ariane Élément très utile pour naviguer et se situer dans la hiérarchie du site, qui est parfois appelé le "breadcrumb".

Webmarketing

A effectuer Description
Balise de titre (<title>) Faire en sorte que la balise de titre soit optimisé tant pour le référencement que pour inciter les internautes à cliquer sur le lien lorsqu'ils verront le titre dans les résultats de recherche de Google.
Balises meta (exemple: meta description) A placer au minimum sur les pages importantes, certaines balises meta améliore le positionnement des pages web sur certains moteurs de recherche (exemple: meta keywords améliore la position d'une page sur Yahoo!).
Prise en compte du "pli" Le "pli" désigne la partie de l'écran à parti de laquelle il est nécessaire de scroller. Tout ce qui est au dessous du pli n'est pas visible pour l'internaute, à moins qu'il ne descende sur la page. Il faut donc mettre les informations importantes (incluant par exemple les call-to-action) avant le pli.

Tests

A effectuer Description
Compatibilité entre navigateurs Indispensable pour éviter que le site soit innavigable par certains utilisateurs, il faut que les pages soit consultable sur différents navigateurs (exemple: Firefox, internet explorer, Google chrome, Opera, Safari ...). Il faut également vérifier l'aspect du site sur différentes versions de ces navigateurs (surtout pour internet explorer).

Outil utile: browsershots.org permet de dévoiler l'aspect d'une page web sur plusieurs navigateurs.

Compatibilité écran (faible résolution) Prendre en compte la largeur minimum du site.
Vitesse de chargement Plus c'est rapide à ouvrir et mieux c'est. C'est un gage indispensable à ne surtout pas négliger.
Site "acceptable" sans Javascript, Flash ... Test de l'aspect du site si le visiteur n'a pas le Javascript d'activer? Idem pour Flash, idem pour Java et idem pour toutes autres sortes de plugin.
Tests des applications S'il y a des applications sur le site, ont-elles été testées? Ont-elles été testées sous différents angles, sous plusieurs ordinateurs différents?
Test du formulaire de recherche Le test du formulaire de recherche consiste non seulement à vérifier qu'il est actif, mais également à tester la pertinence des résultats.
Test des formulaires (exemple: contact) Source d'oublis régulière, il faut vérifier que les formulaires de contact envois bien le message à la bonne adresse email et que le message s'affiche convenablement dans le client mail. Les tests s'appliquent également aux éventuels formulaires de sondage.
Vérification des messages d'erreurs Prendre en compte toutes les erreurs possibles et la façon dont elles sont annoncées aux visiteurs. Allant à la fois du formulaire remplis qu'à moitié, jusqu'aux gros bugs qui paralysent tout le site.

Vérifications

A effectuer Description
Pas de liens erronés (internes ou externes) Vérifier que tous les liens, à la fois internes et externes, soit opérationnel.
Bon design pour l'impression Lorsque les pages sont imprimées, est-ce qu'il est possible de voir le contenu facilement? Pour bien optimiser cela, il faut veiller à utiliser une feuille de style CSS pour l'impression.
Validation W3C (xHTML) Faire en sorte que les pages xHTML soit valide avec les recommandations du W3C.

Outil utile: validator W3C.

Validation W3C (CSS) Faire en sort que les feuilles de style CSS soit valide avec les recommandations du W3C.

Outil utile: validator CSS du W3C.

Accessibilité Ce point est très relatif mais représente l'état d'accessibilité du site.
Test d'usabilité L'idéal pour un nouveau site web est de faire des tests d'usabilité pour être sûr que le site peut être utilisé sans trop de complexité. Pas besoin de faire des tests compliqués, parfois il suffit juste de faire des "tests amateurs" à partir de quelqu'un de "neutre".
Plus de contenu de test Vérifier que les textes "lorem ipsum" et tout autre contenu utilisé pour les tests ne soit plus présent.
Logiciels bien paramétrés Lors de l'utilisation d'un CMS ou d'un logiciel d'e-commerce, il faut vérifier que ceux-ci soit bien paramétré. Dans le cadre d'un site de vente en ligne, il faut être sûr qu'il est possible de passer une commande et de payer.

Optimisations

A effectuer Description
Erreur 404 personnalisée Indispensable, la page d'erreur 404 doit être personnalisée. Il faut que les visiteurs puisse retourner sur le site si la page à laquelle ils essaient d'accéder n'existe plus.
Compresser le CSS La compression du CSS est souvent négligé, alors quelle permet de gagner un temps précieux lors du chargement des pages.
Compresser le Javascript Le Javascript également doit être compressé. La compression ne change en rien le code, cela ne fait que réduire la taille du fichier Javascript.

Outil utile: Compresser le Javascript.

Système de cache Très utile pour économiser les ressources serveurs et améliorer la rapidité d'affichage pour les visiteurs.
Système de sauvegarde Mieux vaut être prévoyant et anticiper le pire. Il faut donc être prévoir un système de sauvegarde et être sûr qu'il est opérationnel.
Gzip Simple à mettre en place, cela permet d'économiser un temps précieux lors de l'ouverture d'une page de votre site web.

Sécurité

A effectuer Description
Test de sauvegarde Il ne faut pas hésiter à tester le système de sauvegarde pour être sûr qu'il est opérationnel.
Sécuriser les pages admin Faire en sorte que les pages administrateurs et toutes les pages sensibles soient convenablement protégées.
Monitoring du site web Mise en place du système de monitoring du site web, qui indiquera lorsque le site web est down.

Référencement

A effectuer Description
Redirection de exemple.fr à www.exemple.fr Très simple à mettre en place, cette petite optimisation ne devrait pas être négligée.

Pour en savoir plus, consulter l'article: "éviter le duplicate content simple".

Redirection de exemple.fr/index.php à exemple.fr Pour éviter les adresses ambigües cette petite optimisation devrait toujours être effectuée.

Pour en savoir plus, consulter l'article: "éviter le duplicate content simple".

Format des URLs S'assurer que l'URL rewriting est en place et que les URL sont "esthétiques". Le mieux étant aussi de s'assurer que les adresses soient configurées tel un fil d'Ariane.
Sitemap.xml Pas trop dur à réaliser, ce plan du site au format XML peut se révéler utile.
Robots.txt Penser à mettre le fichier robots.txt avec tous les bon paramètres (exemple: interdire l'accès à certains dossiers, lien vers le sitemap.xml ...).
Ascreen.jpg Cette petite image, placée à la racine du site, permet de donner un aperçu du site. Cela se révèle particulièrement utile lors de la soumission du site sur des annuaires.
Flux RSS Le site a-t-il un flux RSS? Si oui, il faut s'assurer qu'il n'a pas d'erreur.
Mots-clés dans le contenu Il est indispensable que les mots-clés important soit placé dans le contenu. Une petite vérification ne prend pas beaucoup de temps.
Texte alternatif pour les images Très important pour le référencement et l'accessibilité, ce point ne devrait jamais être oublié.

Inscriptions

A effectuer Description
Outil d'analyse (exemple: Google Analytics ou Xiti) Il est important d'y penser pour avoir les statistiques des visiteurs dès les premiers jours du site.
Google Webmaster Tools A ne pas oublier pour avoir un retour d'information qui s'avère très utile.
Google AdWords Ce point est facultatif.
Régi publicitaire (exemple: Google ASense) Ce point est facultatif.
Feedburner Ce point est facultatif. Personnellement, je n'utilise pas feedburner.
Facebook Ce point est facultatif. Cela dépend si le site souhaite faire du SMO.
Twitter Ce point est facultatif. Cela dépend si le site souhaite faire du SMO.
Flickr Ce point est facultatif.
Technorati Ce point est facultatif.
MyBlogLog Ce point est facultatif.
Delicious, Digg, Linkedin, Stumbleupon ... Ce point est facultatif.

Je rappel le lien pour télécharger la check-list au format pdf:

Pour information, cette liste se veut non-exhaustive. Elle dépend des points de vue des professionnels du web et peut être modifiée. Si certains d'entre vous ont des suggestions, profitez des commentaires pour m'en faire part. En tout les cas, j'espère que cette ressource vous sera utile.

Cet article présente un plugin permettant d'ajouter un lien vers l'article original dans le fichier RSS. Cela se révèle utile pour éviter de se faire voler des articles par les agrégateurs RSS. D'un point de vue du référencement, ce plugin est pratique pour obtenir un lien vers l'article original.

Présence du lien vers l'article dans le flux RSS

Présence du lien vers l'article dans le flux RSS

Avantages

Les flux RSS peuvent facilement être repris par des agrégateurs RSS ou des voleurs de contenu, se créant ainsi du contenu virtuel. Certains de ces sites sont très bien référencés et indexés très régulièrement par les moteurs de recherche. De ce fait, il arrive que des articles soit plus facilement visible dans les moteurs de recherche via les sites qui copient le flux RSS que par le blog original.

Ceci est plus facilement vrai lorsque le site qui récupère un flux RSS ne fait aucun lien vers l'article original. Le plugin permet donc de faire un lien vers l'article original et d'utiliser le titre de l'article comme ancre de lien, ce qui permet d'améliorer le référencement de l'article via les mots-clés inclus dans le titre.

A propos du plugin

Ce plugin se veut très simple et très léger. Développé par mes soins, ce plugin est une adaptation de simple feed copyright. Ce dernier est un plugin permettant d'ajouter un lien vers la page d'accueil du blog et non pas vers l'article même.

De même, ce plugin se veut différent de RSS footer. Ce dernier est très efficace, mais possède trop d'options à mon goût.

Télécharger

Voici le lien de téléchargement de ce plugin:

L'installation est assez simple et se décompose en 4 étapes:

  1. Télécharger le plugin
  2. Dézipper le plugin
  3. Envoyer le plugin dans le répertoire "wp-content/plugins"
  4. Activer le plugin via l'interface utilisateur de WordPress

N'hésitez pas à donner un retour d'information de ce plugin dans les commentaires de cet article.

Le best-seller The Design Of Everyday Things, écrit par Donald Norman, est un livre de qualité qui a été publié pour la première fois en 1988 mais n'a pas pris beaucoup de rides. Ce livre plonge le lecteur dans une façon de penser concernant les objets qui nous entourent au quotidien pour y déceler les soucis d'usabilités. Après avoir finit ce livre, vous ne les regarderez plus les objets de la même manière.

Point principal

Livre The Design Of Everyday Things

Livre The Design Of Everyday Things

Avant la lecture de ce livre, si vous regardez un utilisateur d'un quelconque appareil ou objet échouer lamentablement dans la tentative d'utilisation, vous penserez probablement que cet utilisateur est mauvais. Ce sentiment est d'autant plus fort lorsque la tache vous semble évidente. Par exemple, il est facile de se moquer d'un utilisateur qui s'y prend à plusieurs fois avant d'ouvrir correctement une porte.

Après lecture de cet ouvrage, vous comprendrez à quel point, le plus souvent, il s'agit d'un souci de conception. L'utilisateur n'est alors pas responsable s'il échoue à comprendre facilement et rapidement le fonctionnement d'un système. En effet, en reprenant l'exemple des portes, certaines d'entre elles ne donnent pas de signaux clairs et précis à l'utilisateur. Dans les pires cas, il n'est pas évident de distinguer rapidement le coté d'entrebâillement de la porte et s'il faut tirer ou pousser. De ce fait, l'une des seules méthodes permettant de savoir comment ouvrir la porte, consiste à essayer toutes les solutions envisageables.

Un exemple de porte bien conçu consiste à avoir une barre d'un côté pour suggérer presque intuitivement l'action de "tirer" et rien de l'autre côté pour suggérer l'action de "pousser".

Qu'apprend-on avec ce livre?

La force de ce livre, proviens entre autres des exemples qui agrémente les pages ci et là. Parfois drôle, toujours riche en conclusions, ces exemples permettent au fil de la lecture de comprendre les thermes expliqués et d'avoir des cas concrets d'objets mal conçus.

Je recommande à tous designer de lire ce livre, il est réalisé de telles sortes qu'il peut également servir de cours sur l'usabilité. Bien que les exemples soient basés sur des objets couramment utilisés, les concepts peuvent s'appliquer à une large variété de choses, incluant l'informatique (qui n'était qu'à ses balbutiements lors de la première publication en 1988).

Mot de la fin

En investissant une petite dizaine d'euros dans cet ouvrage, vous aurez à la fois un livre informatif, distractif et humoristique. De ce fait, je le recommande même à ceux qui ne s'y connaissent pas en design.

Les flux RSS sont utiles pour suivre l'actualité d'un site web. Sachant qu'ils contiennent les informations liés aux articles d'un site, il peut se révéler pratique d'extraire le contenu d'un flux RSS pour en afficher une liste des articles avec un lien vers ceux-ci. L'objectif de cet article consiste à créer un simple code PHP qui sert d'agrégateur RSS.

ElePHPant

ElePHPant

Prérequis

Il faut avoir quelques notions avec le langage de programmation PHP et avoir un hébergement qui prend en compte PHP 5.

Code PHP

Le code PHP, qui ne fait que 8 lignes, est visible ci-dessous.

<?php
$url = "http://tonyarchambeau.com/blog/feed/"; /* insérer ici l'adresse du flux RSS de votre choix */
$rss = simplexml_load_file($url);
echo '<ul>';
foreach ($rss->channel->item as $item){
 $datetime = date_create($item->pubDate);
 $date = date_format($datetime, 'd M Y, H\hi');
 echo '<li><a href="'.$item->link.'">'.utf8_decode($item->title).'</a> ('.$date.')</li>';
}
echo '</ul>';
?>

Démonstration

Dans un premier temps ce code extrait les informations du flux RSS et convertit le document XML en un objet. Puis la boucle foreach permet d'exploiter les informations présentent dans les balises <item> (dans un flux RSS chaque article est inclus dans une balise <item>).

A l'intérieur de la boucle foreach, il y a il ne reste plus qu'à afficher les informations souhaités. Dans l'exemple ci-présent trois informations sont extraites: le lien vers l'article, le titre de l'article et la date de publication.

Personnaliser

Il est possible d'utiliser plus d'informations si celles-ci sont disponibles dans le flux RSS. Le tableau ci-dessous présente les métadonnées qui sont souvent inclussent dans un fil RSS avec une description.

Métadonnée Nécessité Description Exemple
<title> Obligatoire Titre de l'article [Twitter] Extraire les tweets en AJAX
<link> Recommandé Adresse internet lié à l'article. http://tonyarchambeau.com/blog/ajax/twitter-extraire-les-tweets-en-ajax-94/
<pubDate> Facultatif Date de publication de l'article. Tue, 12 Jan 2010 16:24:11 +0000
<description> Obligatoire Cette balise peut tout aussi bien contenir une brève description de l'actualité ou bien l'article en entier. Certains sites préfère dévoiler un extrait tandis que d'autres mettent l'intégralité des articles dans le flux RSS. Le choix peut se révéler très stratégique. <![CDATA[Le service Twitter est très pratique pour publier des courts messages. Il est entre autres utile pour la veille technologique. Parfois il se révèle intéressant de consulter les derniers messages d'un compte Twitter. Cet article présente un tutorial pour réaliser une petite application AJAX qui affiche les derniers messages d'un compte Twitter de votre choix. [...]]]>
<guid> Facultatif Définit un identifiant unique pour l'objet. http://tonyarchambeau.com/blog/?p=94
<author> Facultatif Contient l'adresse email de l'auteur. auteur@example.com
<category> Facultatif Définit la catégorie de l'article. <![CDATA[PHP]]>
<comments> Facultatif Définit l'adresse d'une page web sur laquelle se trouve les commentaires liés à l'article. http://tonyarchambeau.com/blog/ajax/twitter-extraire-les-tweets-en-ajax-94/#comments

Pour utiliser l'une ou l'autre des métadonnées dans le code présenté sur cette page web, il suffit de reprendre le nom de l'objet. Par exemple, pour inclure la description il suffit d'utiliser la variable "$item->description" à l'intérieur de la boucle foreach du code présent sur cette page.

Amélioration supplémentaire

Il est possible d'améliorer le code présenté sur cet article. Pour commencer il est possible de personnaliser l'aspect en modifiant le xHTML/CSS, puis le format de la date. Enfin, certaines fonctionnalité supplémentaires peuvent être ajoutées, tel que l'ajout d'autres métadonnées présenté dans le tableau.

Le service Twitter est très pratique pour publier des courts messages. Il est entre autres utile pour la veille technologique. Parfois il se révèle intéressant de consulter les derniers messages d'un compte Twitter. Cet article présente un tutorial pour réaliser une petite application AJAX qui affiche les derniers messages d'un compte Twitter de votre choix. Cela ne se veut pas parfait, mais plutôt une introduction pour pouvoir réaliser, plus tard, de plus ample interface.

Logo de Twitter

Logo de Twitter

Démonstration

Le script de démonstration vous permet de tester et de visualiser ce que vous serez capable de réaliser à la fin de ce tutorial:

Prérequis

Il est recommandé d'avoir des connaissances en PHP, AJAX (Javascript) et d'avoir consulté le précédent article publié sur ce blog intitulé "[Twitter] Afficher les derniers tweets grâce à PHP". Ce dernier, présentait un script PHP qui utilisait l'API Twitter pour afficher les derniers messages d'un compte Twitter grâce à PHP. Ce tutorial se base en grande partie sur le précédent script.

Code xHTML

La première partie de ce tutorial consiste à réaliser une page xHTML qui comporte les éléments suivants:

  • Un champ de formulaire pour indiquer le nom du compte Twitter sur lequel il faudra extraire les messages
  • Un bouton pour lancer le script
  • Un <div> qui contient un id sur lequel le code AJAX viendra afficher les résultats.

Voici un code qui respecte les conditions annoncé ci-dessus:

<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="pseudo" id="pseudo" /> <input onclick="displayTweets(pseudo.value)" type="button" value="Afficher les messages" />
</form>

<div id="afficherTweets"></div>

Il est importer de noter le nom de la futur fonction javascript displayTweets() qui est appelé en cliquant sur le bouton intitulé "Afficher les messages".

Code Javascript

Le code javascript possède deux fonctions. La première function appelé file() est tout simplement une fonction qui permet d'ouvrir dynamiquement un fichier. La seconde n'est autre que la fonction displayTweets() présentée qui est appelé dans le code xHTML lors du clic sur le bouton.

function file(fichier)
{
 if(window.XMLHttpRequest) // FIREFOX
 xhr_object = new XMLHttpRequest();
 else if(window.ActiveXObject) // IE
 xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 else
 return(false);
 xhr_object.open("GET", fichier, false);
 xhr_object.send(null);
 if(xhr_object.readyState == 4) return(xhr_object.responseText);
 else return(false);
}

function displayTweets(pseudo)
{
 window.document.getElementById("afficherTweets").innerHTML = "<img src=\"Loading-transparent.gif\" alt=\"icône chargement\" />"; /* Affiche une image de chargement */

 if (pseudo != false){ /* Si l'utilisateur à bien inscrit le nom d'un compte dans le champ du formulaire */
 var url = "afficher-tweets.php?pseudo="+pseudo; /* Le script PHP est présent sur la page afficher-tweets.php */
 var obj = file(url); /* la variable obj récupère les informations de la page afficher-tweets.php */

 window.document.getElementById("afficherTweets").innerHTML = obj; /* Affiche les tweets */
 }
 else
 window.document.getElementById("afficherTweets").innerHTML = "Erreur";
}

Note: Comme vous pouvez le voir, à un moment donné une image est affichée à l'écran. Il s'agit d'une image animée qui est affiche pendant que le script récupère les informations provenant de Twitter. Cette image est libre de droit, n'hésitez pas à la télécharger:

Image de chargement avec AJAX

Code PHP

La dernière partie de ce tutorial consiste à créer le code PHP. Dans un premier temps il faut penser à créer une page PHP qui comporte le même nom que celui utilisé dans le code javascript, c'est-à-dire "afficher-tweets.php". Comme expliqué au début de l'article, le script PHP se base en grande partie sur le code PHP qui a été réalisé sur l'article "[Twitter] Afficher les derniers tweets grâce à PHP". De ce fait, si vous rencontré des difficultés je vous suggère de consulter l'article précédent. Voici le script PHP:

<?php
$user = htmlspecialchars($_GET["pseudo"]); /* Récupère le pseudo inscrit sur le champ du formulaire */

function parse($text)
{
 $text = preg_replace('#http://[a-z0-9._/-]+#i', '<a href="$0">$0</a>', $text);
 $text = preg_replace('#@([a-z0-9_]+)#i', '@<a href="http://twitter.com/$1">$1</a>', $text);
 $text = preg_replace('# \#([a-z0-9_-]+)#i', ' #<a href="http://search.twitter.com/search?q=%23$1">$1</a>', $text);
 return $text;
}

$count = 8;
$date_format = 'd M Y, H:i:s';
$url = 'http://twitter.com/statuses/user_timeline/'.$user.'.xml?count='.$count;

if ($XML = @simplexml_load_file( $url )){ /* Rentre dans la fonction s'il n'y a pas d'erreur lorsque les données essaient d'être récupéré  */
 echo '<ul>';
 foreach( $XML->status as $Status )
 {
 $datetime = date_create($Status->created_at);
 $date = date_format($datetime, $date_format)."\n";
 echo '<li>'.parse($Status->text);
 echo ' (<a href="http://twitter.com/'.$user.'/status/'.$Status->id.'">'.$date.'</a>)</li>';
 }
 echo '</ul>';
}
?>

Il est important de remarquer que le script peut être adapté, en particulier en ce qui concerne l'xHTML et le CSS.

Télécharger le script

L'ensemble des codes présentés sur cet article peuvent être téléchargé et installé facilement sur un site web qui accepte les codes en PHP 5.

Pour l'utiliser, il faut télécharger le script, le dézipper et l'envoyer sur le site web de votre choix.

« Newer PostsOlder Posts »