Christophe Le Bot

  • Navigation rapide
Pratique de la conception numérique

Derniers commentaires

  • Une excellente thèse sur Simile Exhibit
    • Olivier Rossel | Bonjour. Malgre les annees, avez vous toujours en memoire vos usages d’Exhibit? Je serais ravi d’en discuter avec vous. Cordialement, Olivier Rossel.
  • Utiliser le planificateur de tâches OVH (crontab) avec PHP
    • Max | Bonjour, comme faire pour appeler une version de PHP qui n’est plus proposée par défaut dans le manager ? J’essaie de lancer un cron avec php 5.3 mais le log affiche No such file...
    • Christophe | @absolument Merci pour ces précisions. Je n’ai pas mis en place de tâches cron récemment, mais j’ai reçu quelques notifications étranges d’OVH il y a quelques...
  • Récupérer le dernier auto-incrément MySQL avec PHP
    • Thy | Sujet toujours *très* utile en 2015 ! Je réponds à Serge tsimba qui récupère un « Resource id ». (Et à tous ceux qui ont le même souci mais qui ne le disent pas) :)...
  • Régler l’heure de serveurs virtuels sous Debian
    • Ares_XL | Il semble que sur Débian la commande « tzconfig &ra quo; soit dépréciée et remplacée par : « dpkg-reconfigure tzdata » elle donne accès à une...
 

Sauvez les développeurs !

Mettre au point des sites web qui fonctionnent avec Internet Explorer 6 relève du défi ! Ce qui devait arriver, arrive : Save the developers!

Pour ma part, j’ai pu mesurer le temps passé à mettre au point une interface pour Internet Explorer 6 : 15 à 25% du temps de développement des interfaces web ! Sans parler de l’énervement au sein des équipes de développement…

Alors, s’il vous plaît, mettez à jour votre navigateur web ! Ce sera bénéfique pour tout le monde : les développeurs pourront concevoir des interfaces plus rapidement, les applications web seront plus stables et vous bénéficierez d’un outil efficace et adapté au web d’aujourd’hui.

Vous avez l’embarras du choix :

Téléchargez Internet Explorer

Si vous tenez à rester dans le giron de Microsoft, installez dès que possible Internet Explorer 7. Les améliorations sont notables, même si nous sommes encore loin d’un résultat idéal. Il paraît qu’Internet Explorer 8 sera enfin un navigateur digne de ce nom. J’attends de voir… Bref, vous l’aurez compris : ce n’est pas mon préféré.

Téléchargez Firefox

Firefox 2 est le navigateur web le plus utilisé par les développeurs, grâce à une interface intuitive et une multitude d’extensions. Seule ombre au tableau : sa gourmandise en terme de ressources mémoire. Mais Firefox 3 apportera un sérieux changement de ce côté. Incontournable et recommandé par les professionnels.

Téléchargez Opera

Opera, c’est LE navigateur web par excellence. Léger, rapide, complet, il a tout pour plaire, en particulier son support quasi parfait des normes du W3C. S’il reste marginal sur les ordinateurs, il est le roi du web mobile !

Téléchargez Safari

Proposé par Apple, Safari est le navigateur web par défaut de MacOS, mais il fonctionne aussi sous Windows. Un bon produit qui possède la magie Apple. Parfait pour l’utilisateur qui ne veut pas s’embarrasser de technique.

Quel que soit votre choix, le plus important est d’abandonner Internet Explorer 6 !

Y a-t-il des spécialistes d’Exhibit dans la salle ?

Logo Simile

Cela fait un certain temps que je suis avec beaucoup d’intérêt les travaux du MIT (Massachusetts Institute of Technology) autour de Simile (Semantic Interoperability of Metadata and Information in unLike Environments). Ses intervenants défrichent le terrain du web sémantique avec beaucoup de talent et sans oublier de passer de la théorie à la pratique.

Le projet le plus connu est sans doute Timeline qui se veut le « Google Maps du temps ». J’avoue que le résultat est plutôt à la hauteur de la comparaison, d’autant que l’intégration de Timeline dans un site web est triviale !

Par contre, je suis un peu moins enthousiaste avec Exhibit. Ce framework permet de publier des données structurées et de les manipuler dans une interface web avec une déconcertante facilité. Le concept est génial mais je trouve certains choix techniques très discutables.

Pourquoi avoir créé des attributs HTML spécifiques à Exhibit ? Par exemple, pour réaliser un filtre à facettes, il faut écrire le code suivant :

<div id="exhibit-browse-panel" ex:facets=".discipline, .relationship, .shared, .deceased"></div>

Résultat, le code source n’est pas conforme et la page n’est pas accessible (au sens ergonomique). Des inconvénients qui vont à l’encontre du web sémantique ! Pourquoi ne pas avoir développé une syntaxe particulière pour les valeurs des attributs HTML officiels ? C’est le principe de diffusion adopté par les microformats.

Quant aux données, elles proviennent d’un objet Javascript (plus précisément d’un objet JSON). Adopter JSON est une excellente idée… sauf pour le référencement de la page web. En effet, pour un robot d’indexation, une page Exhibit est vide ! Il y a bien quelques pistes pour résoudre le problème, mais je suis loin d’être convaincu. Il me semblerait plus judicieux d’intégrer les données par défaut dans le code source HTML et de les manipuler via des méthodes non intrusives (unobstrusive Javascript) par le DOM du navigateur.

Et de votre côté, utilisez-vous Exhibit dans vos projets ? Avez-vous trouvé des réponses à ces contraintes ?

Exhibit a un tel potentiel que je ne voudrais pas être bloqué par ces deux défauts majeurs. Surtout qu’un autre projet va en décupler l’intérêt : Potluck (merci Christian pour cette découverte !).

Utiliser les catégories pour gérer les tags sous WordPress

Logo WordPress

Incroyable mais vrai : WordPress ne gère pas les tags ! Ces petites étiquettes qui donnent du sens au contenu généré par les utilisateurs, sont dans tous les services estampillés « Web 2.0″… sauf dans WordPress. Les utilisateurs râlent depuis longtemps : c’est qu’ils les demandent, ces tags ! Et avec insistance ! Ils devaient être intégrés dans la prochaine version (la v.2.2 à paraître ces jours-ci) et ne le seront que dans la version 2.3. Les plus impatients ont déjà migré sur d’autres plates-formes…

Mais au fait, a-t-on vraiment besoin des tags dans WordPress ?

Non, car ce moteur de blog propose les catégories pour les gérer. Certains vont tout de suite me dire qu’il y a une grosse différence entre les deux et qu’il faut donc les deux. C’est vrai, il y a une telle différence que j’utilise les deux dans ce blog… en m’appuyant seulement sur les catégories.

Gérer les catégories comme un arbre sémantique

L’astuce consiste à utiliser la hiérarchie des catégories comme un arbre sémantique. Ensuite, il suffit de placer certains de ses noeuds dans l’interface. Pour illustrer le principe, je vais prendre l’exemple de ce blog qui utilise à la fois des thèmes et des tags.

Etape 1 : créer les racines

Pour commencer, je crée les catégories qui me serviront de racines :

  • Thèmes
    Pour gérer une classification hiérarchique.
  • Mots-clés
    Pour gérer les tags.

WordPress m’indique les identifiants des deux racines : 3 pour Thèmes et 4 pour Mot-clés. Ces identifiants sont importants pour placer les racines dans l’interface. Leur valeur dépend bien sûr de votre propre installation de WordPress. Mais n’allons pas trop vite…

Etape 2 : créer les thèmes

Mes thèmes sont hiérarchiques. Je crée donc les thèmes principaux (Concevoir, Développer, Exploiter, Imaginer, Savoir) en les plaçant sous la catégorie Thèmes. Puis, viennent les thèmes secondaires placés chacun sous un thème principal. Rien de très compliqué, c’est du WordPress basique !

Thèmes sous WordPress
La liste de mes thèmes dans l’interface de WordPress.

Etape 3 : afficher les thèmes

Maintenant, il faut mettre les mains dans le cambouis. Je vais modifier le thème WordPress de mon blog pour afficher mes thèmes dans la partie latérale de mon blog. Par défaut, WordPress gère la navigation par catégories dans un fichier nommé sidebar.php. J’y ajoute le code suivant :

<ul>
<?php
wp_list_categories('title_li=&orderby=name&show_count=0&use_desc_for_title=1&child_of=3');
?>
</ul>

wp_list_categories est une fonction standard de WordPress pour afficher la liste des catégories. Grâce à ses options, je vais pouvoir placer la racine de mon arbre sémantique :

  • title_li=
    Indique que je ne souhaite pas afficher de titre avant la liste.
  • orderby=name
    Ordonne les catégories par nom.
  • use_desc_for_title=1
    Affiche les catégories sous leur catégorie mère.
  • child_of=3
    Limite la liste aux catégories appartenant à la catégorie 3 (donc Thèmes).

Etape 4 : créer les mots-clés

Les mots-clés sont créés sur le même principe. Je les saisie donc dans le gestionnaire de catégories de WordPress, sous la catégorie Mots-clés.

Mots-clés sous WordPress
La liste de mes mots-clés dans l’interface de WordPress.

Etape 5 : afficher les mots-clés… dans un joli tag cloud

Pour afficher les mots-clés, j’aurais pu me simplifier la vie en reprenant le même principe que pour les thèmes. Dans ce cas, le code suivant suffit :

<ul>
<?php
wp_list_categories('title_li=&orderby=name&show_count=0&hierarchical=0&child_of=4');
?>
</ul>

Mais présenter les mots-clés sous forme d’un tag cloud est quand-même plus « tendance ». Un tag cloud met en valeur les mots-clés (tags) les plus utilisés. Pour cela, inutile de réinventer la roue, j’utilise une extension WordPress très simple et efficace : Category Tagging.

Une fois installée et activée, je n’ai plus qu’à générer le tag cloud dans l’interface :

<ul>
<?php
// Affichage du tag cloud (via plugin Category Tagging)
if (function_exists ('cattag_tagcloud') ) {
echo cattag_tagcloud(1,5,1,'NAME_ASC','1,2,3,4,5,6,7,8,9','','<li><a rel="tag" href="%link%" title="%description%" class="tag-cloud-%size%">%title%</a></li>','Aucun mot-clé trouvé');
}
// Affichage simple
else {
wp_list_categories('title_li=&orderby=name&show_count=0&hierarchical=0&child_of=4');
} ?>
</ul>

A chacun de spécifier ses paramètres (voir le détail sur le site de Category Tagging). Le plus important est sans doute le 5e paramètre qui exclut des catégories. Je l’utilise ici pour ne pas afficher les catégories racines (Thèmes et Mots-clés), ainsi que les thèmes de premier niveau qui sont déjà dans l’interface.

Reste à définir les styles CSS pour afficher les mots-clés en fonction de leur utilisation. Pour moi, c’est le code suivant :

a.tag-cloud-1 {
	font-size:1em;
	color:#9B907F;
}
a.tag-cloud-2 {
	font-size:1.2em;
	color:#7C6E59;
}
a.tag-cloud-3 {
	font-size:1.4em;
	color:#7C6E59;
}
a.tag-cloud-4 {
	font-size:1.6em;
	color:#666;
}
a.tag-cloud-5 {
	font-size:1.8em;
	color:#444;
}

Inconvénients

Comme toute astuce, la solution n’est pas idéale. Il y a aussi des inconvénients :

  • L’ajout d’un tag n’est pas possible pendant la saisie d’un article. En effet, WordPress propose l’ajout de catégorie pendant la rédaction, mais il semble impossible d’ajouter une sous-catégorie. Si quelqu’un connait le truc, je suis preneur !
  • Il faut modifier le code du thème WordPress pour gérer la liste des catégories à ne pas afficher dans le tag cloud. C’est le cas quand j’ajoute ou supprime un thème principal… ce qui est très rare.

Avantages

La solution n’est peut-être pas idéale, mais c’est un bon compromis :

  • On se passe d’un gestionnaire de tags. WordPress s’en trouve plus léger et plus stable.
  • Au niveau des articles, je peux afficher les thèmes et les mots-clés dans la même liste pour proposer un choix plus large aux lecteurs.
  • Si un mot-clé prend de l’importance, je peux le placer dans les thèmes sans toucher aux articles, ni aux outils de navigation. Pour faire la même chose avec un système de tags indépendant, il faut modifier chaque article…

Mise à jour. Thomas VdB voit deux autres avantages essentiels à utiliser les catégories comme arbre sémantique :

  • Les doublons disparaissent (comme Sémantique, sémantique et semantique qui sont habituellement considérés comme trois tags différents).
  • Le référencement est optimisé car l’adresse d’une page d’un tag décrit son contenu et facilite son indexation (par exemple, /category/mots-cles/web-semantique/).

Test d’interface : paiement d’amendes en ligne

La semaine dernière, j’ai reçu un joli papier (vert amende, bien sûr) me rappelant que la vitesse maximale autorisée sur autoroute est de 130 km/h. C’est agaçant (surtout pour un dépassement de 5 km/h sur une voie déserte) mais loin de moi l’idée de critiquer cette règle élémentaire de sécurité.

Vient l’heure de payer l’amende. Je ne suis pas un habitué du fait (c’est même une première), je fais donc l’effort de lire toutes les instructions. Ah tiens, on peut payer par internet ! Voilà l’occasion de tester une interface ! Ou comment prendre du plaisir à réaliser une tâche désagréable !

Un site dédié au paiement des amendes

Accueil amendes.gouv.fr
Page d’accueil du Service de télépaiement des amendes.

Le Ministère des Finances a mis en place un site dédié au paiement des amendes par carte bancaire. Pour protéger la transaction, la connexion entre le serveur et le navigateur web est cryptée (via SSL) et l’identité du service garantie par un certificat numérique.

Certificat SSL amendes.gouv.fr
Informations sur le certificat SSL.

Premier bémol : le certificat est émis par Verisign, entreprise privée américaine. Le Référentiel Général de Sécurité n’est donc pas encore en place.

L’accueil du service

La page d’accueil est des plus simples : un résumé pour expliquer le but du service, un lien pour y entrer et un autre pour quelques explications sur la sécurisation du site. Simple, clair (c’est vrai aussi qu’on n’arrive jamais sur ce site par hasard…), malgré un texte plutôt confus pour expliquer la transaction HTTPS.

Le code source est typique du web première génération : des textes en bitmap, des tableaux pour la mise en page, le tout généré par Dreamweaver (ses fonctions Javascript sont détectables entre mille) et FrontPage 6.0 (voir la balise META GENERATOR). Drôle de mélange, mais l’avantage est de rendre l’interface utilisable sous tous les navigateurs, même les plus anciens. On est loin du web 2.0, d’Ajax, du XHTML compliant, des CSS 2… mais aussi d’une interface accessible (au sens ergonomique).

Un petit tour du côté des requêtes m’indique que le service tourne sous Apache et que mes actions et leur traitement seront gérées par des scripts Java (le cookie de session trahit sa présence).

Saisie des informations

Saisie du numéro de l'amende
Saisie du numéro de l’amende.

Je passe à l’action. On me demande le numéro de l’avis d’amende et sa clé. Euh… il doit être tard, je ne vois rien de semblable sur le papier. J’ai bien un numéro d’avis de contravention mais pas d’avis d’amende. De plus, le formulaire web me propose 5 groupes de chiffres + la clé, la version papier n’a que 4 groupes de chiffres + la clé.

Heureusement, il y a une aide. Je fais abstraction du dictionnaire qui propose toutes les lettres de l’alphabet, alors que seules 8 lettres sont utiles… Les « pro » de la molette seront ravis ! Je clique donc sur « Où trouver mon numéro d’avis – Cliquez sur ce lien » (j’adore) et là, surprise ! Je vois bien les 4 cases de chiffres, comme sur mon papier. Je vois aussi à côté une version à 5 cases… Je sens que ça va être chaud.

Aide pour la saisie du numéro d'amende
Aide pour la saisie du numéro d’amende.

Survient le doute : vais-je pouvoir payer cette amende (pardon, contravention) en ligne ? Je tente le coup. Et j’ai bien fait : le premier groupe de chiffres détermine le type de contravention (forfaitaire, dans mon cas). Un petit Javascript élimine donc la cinquième case. Un autre se charge de déplacer le curseur de case en case. On tient le bon bout !

Informations liées à la contravention

Informations sur la contravention
Informations sur la contravention.

Le serveur fait son office et m’informe de mon avis de contravention. Cette page remplit son rôle, avec des textes concis et une fenêtre Questions / Réponses très utile.

Paiement de l’amende

Je passe au paiement. Une page me demande si je veux payer définitivement ou si je veux déposer une consigne (eh oui, si vous contestez la contravention, vous devez la payer avant de vous faire rembourser… éventuellement).

Paiement de l'amende (1)

Vient le formulaire tant attendu du paiement par carte bancaire. Là, on retrouve ses habitudes d’achat sur les sites e-commerce (adresse de livraison en moins…). Rien à dire, c’est bien fait.

Paiement de l'amende (2)

Je valide et j’obtiens un justificatif que je peux imprimer, sauvegarder, envoyer à une adresse e-mail ou recevoir par courrier. Dommage que ces options ne soient pas regroupées.

Paiement de l'amende (3)

La sauvegarde du justificatif sur ordinateur vaut vraiment le détour (un simple fichier texte contenant du code HTML illisible et sans aucun retour chariot). J’opte plutôt pour l’envoi par e-mail que j’obtiens aussitôt.

Conclusion

Ce petit jeu de cache-cache valait bien les 45 € que j’y ai laissés. Mais promis, je ne recommencerai pas.

La toute première page du web

La première page du web

C’était en 1990. Tim Berners-Lee mettait en ligne la première page web. J’avoue ne pas bien savoir combien il y en a aujourd’hui…

Son code source vaut aussi le détour. Il fera bondir les intégristes de l’accessibilité !

FireBug, l’outil de développement et de test web ultime

Logo Firebug

Développée par Joe Hewitt, à qui l’on doit l’interface de Netscape et de Firefox ou encore la librairie Boxely d’AOL, FireBug est une extension Firefox pour faciliter le test et la correction d’applications web riches (HTML, CSS, Javascript, XML et Ajax).

Attendue depuis quelques mois comme le Graal du développeur web, je viens d’en tester la dernière version (v.0.4.1 du 13 octobre 2006). Bilan ? Il suffit de trente secondes pour comprendre que cet outil est indispensable ! Petite tour de ses atouts.

Après une installation automatique et sans histoire, FireBug est accessible par le menu principal de Firefox. Une icône apparaît également dans la barre d’état et indique si la page web en cours est valide (icône verte) ou si elle contient des erreurs (icône rouge avec le nombre d’erreurs). Un volet permet d’utiliser toutes les fonctions de FireBug directement sous la page web testée.

Inspection du code

FireBug possède un inspecteur contextuel très efficace pour parcourir le code d’une page web. Il suffit de placer le pointeur sur un objet de la page pour en voir le code HTML ou obtenir des données numériques (taille, position, marge, espacement…). Si des fichiers sont liés (styles, scripts), il suffit d’ouvrir la balise HTML correspondante pour voir le code du fichier lié. C’est simple et rapide ! L’inspecteur gère aussi les styles CSS. On peut contrôler leur définition sur n’importe quel objet et détecter rapidement des conflits d’attributs. Quant aux as du DOM (Document Object Model), ils seront ravis d’en consulter les propriétés de façon aussi simple.

FireBug - Inspection des objets HTML
Mise en surbrillance du code HTML d’un objet survolé.
FireBug - Inspection des styles CSS
Valeurs des attributs de style d’un objet survolé.
FireBug - Inspection du DOM
Inspection du DOM.

Affichage des erreurs

En cas d’erreurs dans une page (HTML, CSS, Javascript), FireBug en dresse la liste et le détail (objet, valeurs, numéro de ligne…). Comme l’accès au fichier incriminé est immédiat (lien vers le fichier, puis sélection de la ligne), la détection des erreurs est très efficace.

FireBug - Affichage des erreurs
Affichage des erreurs dans la console.

Debugger Javascript

FireBug ne se contente pas d’afficher les erreurs, il peut aussi servir de debugger en testant les scripts Javascript pas à pas. Bien sûr, beaucoup d’entre nous trouverons ses fonctions trop simples, mais il est suffisant dans 80% des cas. Et il y a une console Javascript en prime pour exécuter des commandes directement !

Contrôle des flux Ajax

Je garde le meilleur (à mon goût) pour la fin : l’Ajax Request Spy. Avec lui, le trafic Ajax entre le client et le serveur n’aura plus rien à cacher ! J’adore.

Conclusion

Même si Joe Hewitt est encore loin de la version 1.0, son travail est déjà remarquable et terriblement efficace. Pour ma part, je garde la version actuelle qui m’a déjà permis de faire le ménage dans plusieurs sites en… 20 minutes ! En ce moment-même, je constate que l’interface de gestion de WordPress (moteur de mon site) contient, elle aussi, des erreurs… C’est redoutable.

FeedValidator valide vos flux Atom et RSS

Un petit outil bien pratique pour vérifier la syntaxe de vos flux de syndication : FeedValidator. Le complément idéal des outils de validation déjà bien connus :