Le Web sémantique.
Cette expression est sur toutes les lèvres de ceux qui préparent l’Internet de demain. Moteurs de recherche, services de pointe, secteur marchand … après avoir indexé du contenu, ils aimeraient désormais le comprendre. Comprendre pour mieux cibler, mieux profiler et mieux servir.

Malgré cet aspect futuriste teinté de recherche et de développement, le concept de Web sémantique est pourtant vieux comme … le Web. Tim Berners-Lee y pensait déjà lorsqu’il accouchait d’Internet sur ses petites tablettes.

Si les hommes arrivent à comprendre les hommes, les ordinateurs ne comprennent que ce pourquoi ils ont été programmés. Le Web sémantique a été imaginé pour palier à ce problème, pour expliquer le sens du contenu, pour lier les contenus entre eux tout en décrivant ces relations.

En ce sens, les formats RDF et OWL figurent comme les étendards du concept. RDF décrit les ressources tandis qu’OWL établit des liens entre eux en leur donnant un sens. Ces relations sont nommées ontologies et permettent donc de transformer un Web de données anonymes en un Web sémantique. Un Web où humains et ordinateurs comprennent et échangent.

Les microformats sont nés du constat de complexité de mise en œuvre du couple RDF/OWL et d’un besoin de simplicité.

Les microformats

Tantek Çelik et Adam Rifkin dévoilent le concept des microformats en 2004 après 2 années d’expérimentation. Ils ne s’en cachaient pas : ils souhaitaient démocratiser et implanter la sémantique au cœur du Web en s’affranchissant au maximum de contraintes techniques.
C’est ainsi qu’au lieu de créer un énième format de fichier les microformats se greffent sous la forme d’attributs (X)HTML pour tenter de donner du sens au contenu.

Il existe plusieurs spécifications de microformats :

• hAtom (syndication de contenus, basé sur Atom) ;
• hCalendar (dates et évènements, basé sur iCal) ;
• hCard (représentation d’entité, basé sur vCard) ;
• hResume (CV, mélangeant hCard et hCalendar notamment) ;
• geo (emplacement géographique) ;
• XFN (relations entre individus) ;
• XOXO (description de contenus) ;
• et de nombreux motifs de conception rel-* (tags, nofollow, license, home etc.).

Intérêts et utilité des microformats

La force des microformats réside dans sa souplesse d’utilisation, leur approche métier et surtout, la réutilisation de formats existants.
Les microformats se basent sur deux attributs [HTML :

• <a rel="nofollow"> indique aux robots d’indexation des moteurs de recherche de ne pas suivre ce lien ;
• <span class="tel"> indique que cette balise neutre contient un numéro de téléphone ;
• <div class="entry"> indique que cette balise neutre contient un article (billet de blog par exemple).
  Rassurez-vous, le choix des classes n’est pas arbitraire et le wiki officiel est un bon guide. Il reprend les spécifications des formats cités précédemment tout en les agrémentant d’exemples.

Enfin, et pour achever d’attiser votre curiosité, voici un résumé des microformats en 7 points :

• ils s’adaptent au code et non l’inverse ;
• ils s’appliquent aussi bien sur des pages statiques que dynamiques ;
• ils aident à structurer la page ;
• ils n’ont quasiment aucun coût de mise en place ;
• ils aident et aideront à la bonne indexation du contenu dans les moteurs de recherche ;
• ils offrent des perspectives d’interaction et de navigation intelligente pour les visiteurs d’une page microformatée ;
• ils sont un socle pour réutiliser le contenu (cf. « Outils agrégeant les microformats »).

Cas pratique : offrir une carte de visite en visitant une page Web

Prenons par exemple le cas des fichiers vCard. Nos carnets d’adresses en raffolent car ils contiennent des informations de contact : nom, prénom, adresse, numéro de téléphone, email etc.
Il n’est pas rare de recevoir des emails contenant une vCard en pièce-jointe. Un clic dessus et les informations de l’expéditeur se retrouvent dans notre carnet d’adresses.

Les microformats proposent la même chose mais au format Web avec le microformat hCard. Outre la ressemblance de nom, on retrouve dans sa spécification tous les éléments de vCard (nom, prénom, adresse etc.).
La seule différence se trouve dans la représentation. Nous n’avons plus affaire à un fichier séparé (comme ça aurait été le cas avec RDF et OWL)
mais bel et bien à du texte présent sur une page Web.

Si ce code était placé sur une page Web accessible au public, n’importe quel outil gérant les microformats serait capable d’en extraire les données et pourquoi pas, de lancer une recherche sur
Google Maps pour obtenir les coordonnées GPS de l’adresse.

<div class="vcard">
  <a class="fn org url" href="http://www.clever-age.com/">Clever Age</a>
  <div class="adr">
    <div class="street-address">37, boulevard des Capucines</div>
    <span class="postal-code">75002</span>
    <span class="locality">Paris</span>
    <div class="country-name">France</div>
  </div>
  <div class="tel">
   <span class="type">Téléphone</span> +33 1 53 34 66 10
  </div>
  <div class="tel">
    <span class="type">Fax</span> +33 1 53 34 65 20
  </div>
  <div>Email: <span class="email">commercial@clever-age.com</span></div>
</div>

Outils proposant des microformats

Les industriels et les leaders du Web contribuent à diffuser les microformats en les adoptant progressivement. Cette adoption apporte une valeur ajoutée à leurs services et facilite la vie des utilisateurs.
Concrètement, ils microformatent leur contenu pour enrichir leur présentation et faciliter les interactions avec d’autres services.

Voici une liste non-exhaustive de services proposant des contenus microformatés :

• Blogs (WordPress) ;
• Cartographie (Google Maps, Yahoo ! Local) ;
• Emploi JobiJoba) ;
• Outils sociaux (Flickr, Del.icio.us, Ma.gnolia) ;
• Réseaux sociaux (LinkedIn, Ziki).

Outils agrégeant les microformats

L’utilisation la plus intéressante des microformats reste indéniablement l’agrégation. Vous pourrez ainsi construire un flux RSS à partir d’une page statique ou explorer
des photos en rapport avec la page visitée.

Technorati porte l’étendard des microformats. Ses différents services, utilisables en appelant une simple URI, permettent d’agréger des cartes de visites (vCard) ou encore des calendriers (iCal) pour générer des fichiers réutilisables dans votre carnet d’adresse ou votre gestionnaire de temps.

Jobster propose une utilisation intéressante des microformats. Ce site de recherche d’emploi vous évite l’écueil de l’énième ressaisie de CV. En lui fournissant l’URL de votre profil public LinkedIn, il en extrait toutes les données pour en générer un CV en ligne.

Les navigateurs Web jouent également le jeu. Firefox 2 (avec son extension Operator) ou encore Firefox 3 et le futur Internet Explorer 8 proposent des outils intégrés.
Sur chaque page visitée, ils en extraient tous les contenus microformatés possibles et proposent différentes interactions possibles.

D’autres outils plus confidentiels s’efforcent de défricher le terrain, notamment les agrégateurs de flux RSS/Atom et autres transformateurs XHTML/microformats :

• hatom2rss ;
• hAtom2Atom ;
• atom2rss ;
• X2V.

Conclusion

Il est de plus en plus facile de microformater les contenus, d’interagir avec et de les republier. Leur faible coût d’intégration et la rapidité
d’apprentissage sont d’autres atouts pour intéresser vos intégrateurs HTML, vos programmeurs ou même vos décisionnels.
La publication de microformats de LinkedIn et leur utilisation par Jobster pour préremplir automatiquement le CV sans ressaisie est le cas de figure idéal.
Ces pratiques ont pour vocation d’être généralisées, de quoi nous faciliter la vie.

Nous verrons dans une prochaine partie des bonnes pratiques d’intégration des microformats à des contenus déjà existants. Ce sera d’ailleurs l’occasion
de remarquer que sémantique, respect des standards et accessibilité génèrent une incroyable synergie.

Pour en savoir plus

• Présentation des microformats en mars 2006 au SXSW Interactive ;
• En route vers le Web sémantique ;
• Les 10 prochaines tendances du Web.

1. [1] Il en existe en réalité 3 mais l’attribut rev n’est employé qu’une fois. Difficile d’en déduire une généralité.

Concevoir un site Internet dans les règles de l’art demande de multiples compétences : architecture technique, programmation, graphismes, intégration, ergonomie et du bon sens. Transcender CSS : sublimez le design Web ! s’intéresse à l’aspect esthétique au travers des CSS.

Ou comment CSS, sémantique, intégration XHTML, microformats, sources d’inspirations et approche du design en grilles sont indispensables pour tirer partie du meilleur du Web.

Transcender CSS : sublimez le design Web ! est un ouvrage paru en France en août 2007 aux éditions Eyrolles ; en novembre 2006 dans le monde anglophone. Le livre est broché sur 360 pages ce qui en fait un livre imposant et propice à de riches illustrations d’excellente qualité. Andy Clarke, son auteur, s’est permis ce plaisir pour montrer au mieux qu’un site visuellement alléchant et bien structuré est un succès assuré pour capter l’attention du visiteur.

Transcender CSS ne s’adresse pas aux débutants puisqu’il ne s’attardera pas à vous expliquer les modèles de boîte ou les innombrables bugs d’Internet Explorer. Son contenu évolue toutefois en douceur de la facilité à la complexité ce qui le rend néanmoins abordable par des néophytes.

Découverte

Organiser les contenus avant tout, tel est le credo de Transcender CSS. C’est l’objectif majeur de cette première partie ; partie qui devrait être lue et transmise par tous les enseignants puisqu’elle explique comment on adapte le design au contenu et non l’inverse.

La mise en pratique du balisage XHTML est menée avec pédagogie. Vous apprendrez comment traduire une image en balises HTML de manière adaptée. Et un bon balisage c’est déjà la moitié du travail, l’autre restant son habillage. Il faut dissocier le contenu et la mise en page tout en n’oubliant pas un point essentiel : donner du sens au contenu.
Il existe de nombreuses balises XHTML qui ont chacune leur propre signification : il faut les utiliser pour donner du sens. C’est non seulement important pour le référencement mais aussi pour ancrer les feuilles de style de manière propre et efficace. Nos professeurs de français nous ont appris à utiliser des verbes riches au lieu de verbes pauvres (être, avoir, aller, prendre etc.) alors faisons de même avec les balises XHTML :

• <h1 à h6> pour afficher des titres hiérarchiques
• <p> pour des paragraphes de textes (les images sont du texte)
• <ul/ol/li> pour des listes de contenus
• <q/cite/blockquote> pour des citations de textes
• <pre/code/kbd> pour des saisies de texte au clavier ou des extraits de code
• <span/div> dans les autres cas ; ce sont des balises neutres vides de tout sens

Et d’aborder dans la foulée les microformats. Ça a été ma première surprise car je ne m’attendais pas à les retrouver dans ce livre. Un duo de page les aborde et montre (un peu trop succinctement) que microformater du contenu n’a rien d’impossible, surtout quand la structure XHTML est bonne dès le départ.

Processus

Transcender CSS s’intéresse à une approche industrielle du processus de création. Autrement dit : comment proposer efficacement une interface graphique à un client/décideur sans investir trop de temps. Nous savons tous qu’il y a toujours du changement, mineur mais surtout majeur, et qu’il est difficile de chambouler toute une feuille de style pour repositionner des éléments en conservant une cohérence.

C’est là que l’approche par la méthode de la boîte grise prend tout son sens. Elle définit à l’aide de boîtes grises l’agencement des contenus de la page. Une boîte, un contenu et le charme opère. Les classiques story-board s’en approchent.
Cette méthode peut se compléter à l’aide de symboles pour représenter des éléments annexes (textes, formulaires etc.) mais est surtout très facilement réalisable à partir d’un logiciel de présentation de type OpenOffice Impress ou Microsoft Powerpoint.

Une fois les bases de la structure mise en place, l’heure est venue de présenter une maquette statique. Autrement dit du HTML et des CSS. Les ajustements resteront possibles puisque la première partie du livre a expliqué comment mettre en œuvre une structure pérenne et libre de mise en forme.
Transcender CSS recommande fortement, et je suis on ne peut plus d’accord, d’utiliser de manière poussée les extensions indispensables de Firefox que sont Firebug et Web Developer.
J’y consacrerai un billet mais les éditeurs intégré modifiant à la volée votre page sont des outils précieux offrant des gains de développement mésestimés.

L’ouvrage poursuit sur des bonnes pratiques d’organisation de son code au sein même des feuilles de style. Des pratiques qui permettent de retrouver facilement ses petits sans avoir à chercher inutilement. Des pratiques qui suggèrent également de bien coder pour mieux réutiliser son travail dans d’autres projets. Si vous estimez votre travail, pourquoi le recommencer intégralement lors du projet suivant ?

Inspiration

Cette troisième partie a été mon deuxième choc pendant la lecture. C’est la partie dans laquelle j’ai le plus appris car elle explore des aspects finalement peu abordés dans les ouvrages liés aux CSS.

J’ai commencé à mieux percevoir l’intérêt et l’ingéniosité du rythme vertical grâce à la divine proportion. Qui aurait cru que les maths se cachaient aussi subtilement dans le design Web ? Certainement pas moi. Retenez bien le nombre 1,62 (φ) car c’est le nombre d’or qui régira avec majesté les designs CSS les plus réussis.
En français, il s’agit de la règle des tiers. Au lieu de choisir arbitrairement la taille des contenus, divisez les espaces en largeurs proportionnelles, elles-mêmes divisibles par 1,62 etc. La clarté en résultat est tout simplement saisissante.

Tout ceci nous amène à parler du design par grille. Vous venez de suivre le lien ? Vous aurez probablement remarqué, consciemment ou pas, que la page est découpée en 8 colonnes de largeur identiques. Certains contenus occupent davantage de place mais devinez-quoi ? Cela correspond toujours à un certain nombre de colonnes, pas une largeur hasardeuse.
Cette lubie n’est pas si excentrique que cela puisqu’elle nous provient directement des … journaux papiers. Qui aurait cru que le New York Times aurait pu inspirer les meilleurs designers du Web ? Et pourtant, on ne regardera plus les journaux de la même manière en observant leur structure à 6 ou 8 colonnes. Du nombre d’or en veux-tu en voilà.

Andy Clarke termine ce chapitre sur les sources d’inspirations. Là non plus il n’y a pas de frein à l’imagination puisque tout est susceptible de catalyser créativité : architectures d’immeubles, coupures de presse, publicités de magazines, affiches diverses et variées. Vous l’aurez compris, tous les supports visuels facilement agrégeables.

Transcendance

Cette partie termine en apothéose Transcender CSS. Nous savons intégrer, nous savons structurer et nous savons imaginer alors maintenant il va falloir sublimer. Au prix du livre, ça serait dommage que notre côté créatif n’aie pas pris du galon

Il n’y a d’ailleurs qu’un point sur lequel j’ai du mal à adhérer : cette adhésion au positionnement absolu/relatif et le dénigrement déguisé des flottants. Si les positionnements relatifs permettent de forcer le positionnement d’un bloc, c’est en revanche une solution beaucoup moins flexible dans la majorité des cas. Cette technique oblige, à mes yeux, de connaître les tailles des éléments à positionner. C’est parfois impossible, surtout si on veut pouvoir s’affranchir de largeurs fixes pour profiter de designs élastiques.
Je comprends néanmoins que c’est une pratique appréciable pour les designs en grilles.

De très nombreux cas pratiques abondent dans cette partie. Ces exemples stimulent l’imagination avec des mises en pages (et des variantes) convaincantes, attractives et on ne peut plus déclinables dans le monde réel. Réel ou presque puisqu’ils se basent sur des navigateurs valides uniquement.
C’est l’occasion d’aborder le génie de Dean Edwards avec IE7, la librairie Javascript ultime pour Internet Explorer. Cette librairie permet de mettre à niveau Internet Explorer 5 et Internet Explorer 6 au niveau d’Internet Explorer 7. Ce n’est certes pas la panacée mais ce n’est plus l’enfer truffé d’incertitude que l’on haït tant.

Transcender CSS conclut sur une quarantaine de pages avec les CSS 3 en mêlant exemples pratiques et des comparaisons entre CSS 2 et CSS 3. J’ai été ravi de voir en pratique l’affichage multi-colonnes sans jouer avec les flottants, l’habillage d’un bloc avec plusieurs bordures en images (sans balises superflues) et surtout l’Advanced Layout.
L’Advanced Layout est probablement l’avancée la plus attendue car elle permet de s’affranchir des positions absolues pour repositionner du contenu sur la page simplement. Et de retrouver les notions de grilles puisque des régions sont définies dans la feuille de style. Au designer de déplacer un contenu dans le flux sans le faire quitter.

Autant dire que les designs bâtis sur CSS 3 seront riches en créativité. Et ce n’est pas l’initiative Goto CSS3 qui dira le contraire

Conclusion

Cet ouvrage m’a énormément plu pour 2 raisons :

• j’ai failli croire que je n’allais rien apprendre
• le contenu est ouvert vers l’avenir

En effet plutôt que de nous dire quoi faire, Transcender CSS explique comment mieux faire. C’est véritablement appréciable car en lisant le livre on adapte son contenu à ses besoins. Ses pages sont généreusement émargées de conseils, d’astuces et de ressources qui enrichissent la perception de la conception du design Web. Je me suis d’ailleurs surpris à relire le livre mais uniquement ses marges de peur d’avoir raté un lien essentiel …

Vous le savez tout aussi bien que moi, le gros problème des ouvrages réside dans des cas pratiques difficilement réutilisables au quotidien. Transcender CSS a l’intelligence de proposer des recettes pour mieux aborder la conception des sites, des sources d’inspiration jusqu’aux secrets du découpage en grilles. Qui eût cru que la presse papier avait encore de belles leçons à donner au Web ?

Transcender CSS ne livre pas clé en mains des solutions mais vous aidera à y voir plus clair, à comprendre pour mieux réagir. En soi c’est ce que j’attends d’un livre à 30€. Une valeur sure.

WordPress c’est bien. Bien utiliser WordPress c’est mieux !
Si je trouve l’installation de base de cette plateforme de rédaction plus qu’aboutie, certains plugins sont indispensables pour améliorer votre blog, son suivi et sa présence sur Internet. Je me permets donc de partager ma sélection des plugins que je trouve utiles pour une utilisation quotidienne :

• Akismet
• Dofollow
• Feedburner FeedSmith
• FlickrRSS
• Full Text Feed
• Google Analyticator
• Google XML Sitemaps
• SEO Title Tag
• Simple Tagging
• Subscribe to Comments
• WP-PostViews
• WordPress.com Stats

Ca en fait n’est-ce pas ? Tous ne vous seront pas indispensables (notamment si vous ne jouez pas avec Flickr ni Google Analytics) mais peut-être que la lecture de ce billet vous en apprendra davantage et créer des envies

Akismet

Une de mes plus fortes motivations pour migrer de Dotclear à WordPress était la présence d’Akismet, antispam évolué et mutualisé. Pourquoi mutualisé ? Parce que le travail est déporté sur les serveurs d’Akismet sur lesquels sont « branchés » des milliers de blogs. Autant dire que si un spam est déclaré au service, tous les sites utilisant Akismet en sont protégés.
C’est redoutable et ça m’a permis d’éviter de perdre du temps à modérer les messages en carton qui innondaient le blog. A l’heure actuelle, ce ne sont pas moins de 20 000 spams qui m’auront été épargnés. En l’espace de 12 mois, c’est appréciable.

Dofollow

Les référenceurs et les personnes sensibilisées au référencement Web se doivent de savoir que WordPress ajoute la valeurnofollow à l’attribut rel des liens hypertextes de vos commentaires. Pour rappel, il s’agit d’un microformat spécifiant aux moteurs de recherche de ne pas tenir compte du-dit lien. Ceci a pour effet de ne pas prendre en compte l’éventuelle relation entre votre site et un site tiers pour des raisons évidentes de spam.

Les spams étant très bien écartés, autant laisser ce flux de liens sortants faire son effet.
Seul bémol : ce plugin n’a pas d’interaction avec le widget officiel qui continuera à arborer un rel="nofollow". Un petit plus sympathique qui incitera peut-être davantage au commentaire sur votre blog

Feedburner FeedSmith

Feedburner est un service permettant de mesurer l’utilisation de vos fils RSS et Atom. Combien de personnes suivent mon fil RSS ?, Combien de nouveaux abonnés aujourd’hui ? ou encore Quels sont les articles les plus cliqués ou lus depuis les agrégateurs ? seront le genre de questions pour lesquelles vous obtiendez enfin des réponses.

Sa configuration est aisée comme tout et il serait dommage de se passer d’un outil statistique doublé d’outils de republication d’une telle envergure.
Pour information, j’ai également publié un billet expliquant comment migrer un flux RSS vers Feedburner pour celles et ceux ne pouvant installer ce plugin.

FlickrRSS

Vous utilisez le service de gestion et de partage de photos Flickr ? Une bonne idée est d’intégrer vos photos directement sur votre blog de manière « propre », c’est à dire sans passer par un médaillon en Flash ou JavaScript ; ceci bien sûr dans l’intérêt de pénaliser le moins de monde possible.

Son gros atout est la personnalisation du plugin et son widget : peu d’efforts pour un bon résultat.

Full Text Feed

Depuis une certaine version de WordPress (la 2.1 me semble-t-il), quand bien même on paramètre le blog pour afficher des flux intégraux (contenant l’intégralité des billets et non un court extrait), à partir du moment où un billet est précédé d’un chapô, seul celui-ci est publié dans le flux RSS.
Comme vous pouvez vous en douter, ce plugin remet les pendules à l’heure et c’est bien dommage qu’une telle option ne soit pas proposée par défaut dans WordPress.

Google Analyticator

Google Analytics est un formidable outil statistiques de sites Internet générant des rapports clairs au sein d’une interface qui l’est tout autant. Sans pub et sans logo affiché sur les sites audités, c’est pour moi le meilleur outil gratuit tant en terme de mesures que d’outils fournis.

Si jamais vous décidez de suivre votre audience par ce service (Feedburner propose un service similaire mais moins complet, on peut imaginer que tôt ou tard une fusion sera opérée à ce niveau), Google Analyticator permet de placer le traceur sans avoir à toucher le code des différents thèmes de votre blog. Il permet même de vous exclure des statistiques pour refléter au mieux le parcours de vos visiteurs.

Google Sitemaps Generator

Les sitemaps ont été initiées par Google afin de mieux signaler de nouveaux contenus ainsi que l’architecture de votre site. Depuis le format a été adopté par d’autres géants de la recherche sur Internet (Yahoo!, Ask etc.). En toute honnêteté, je pense qu’un site bien construit n’a pas besoin de sitemap pour être bien référencé mais comme l’installation du plugin est facile et ne demande aucune attention post-installation, pourquoi s’en priver ?

A réserver aux aficionados du référencement.

SEO Title Tag

Encore un plugin pour référenceurs ! Un blog gagne à être vu et SEO Title Tag est justement là pour ça. Il offre la possibilité de personnaliser son titre de page que ce soit pour une page statique, un billet, les pages d’archives, les catégories ou toute autre URL gérée par WordPress.

L’intérêt ? Eviter d’avoir des titres à rallonge affichés sur votre blog tout en bénéficiant de titres de pages plus longs et optimisés pour votre référencement. Un exemple concret est ce billet même. Regardez le titre au-dessus du texte (Les meilleurs plugins pour WordPress) et le titre affiché dans la barre de titre (Les meilleurs plugins pour WordPress : Akismet, Feedburner, FlickRSS, SEO Title Tag, Simple Tagging) … ça parle tout seul

Simple Tagging

Encore un plugin pour référenceurs ? Hélas pour ceux qui s’en fichent, tant mieux pour ceux qui s’y intéressent. Les tags (ou labels ou encore mots-clés – mais ça rappelle l’époque de la bulle Internet) viennent en complément des catégories de WordPress.
Le plugin est astucieux et pratique puisqu’il propose une saisie prédictive, suggère des tags et permet de voir des billets relatifs. Il faudra cependant mettre les mains dans le cambouis pour tirer pleinement parti de ses possibilités (lister des billets par tag notamment).

Attention cependant, avec l’arrivée de WordPress 2.3, la gestion des tags sera directement intégrée et ne nécessitera pas de plugin (si ce n’est pour en étendre leurs fonctionnalités). Je vous conseille donc d’attendre la sortie de cette version. Je conseille ce plugin aux personnes qui ne migreront pas vers WordPress 2.3 mais aussi parce que je l’utilise depuis quelques semaines. Son utilisation m’a offert une visibilité dans certains moteurs comme Technorati.

Subscribe to Comments

Cette fois ce plugin s’adresse à toutes et à tous mais surtout à vos visiteurs. Qui n’a jamais répondu à un commentaire et oublié de revenir sur un site pour voir si d’autres personnes avaient réagi ? Plein de monde dont moi. Difficile de s’abonner à tous les flux RSS de commentaires de sites sur lesquels on est actif car c’en deviendrait impossible à gérer.

Heureusement Subscribe to Comments ajoute une petite boîte à cocher au niveau du formulaire des commentaires et ceci dans le but de notifier les auteurs de commentaires que de nouvelles réponses ont été publiées. Vraiment, vos visiteurs apprécieront et leur retour sur votre blog n’en sera que facilité.
Du côté administration, il y a quelques statistiques sur les billets présentant le plus d’abonnés, les derniers abonnés etc.

WP-PostViews

Une bonne petite extension narcissique mais qui permet de mesurer rapidement l’intérêt que portent les visiteurs à votre contenu. Comptabiliser le nombre de lectures de chaque article et afficher ce nombre est son dada. Il faudra cependant triturer un petit peu le code des thèmes dans lequel vous voulez intégrer le plugin après activation. Les instructions sont cependant suffisamment claires pour y parvenir avec un faible bagage technique.

WordPress.com Stats

Enfin on termine sur des statistiques, encore une fois me direz-vous. Celles-ci sont fournies par l’éditeur de WordPress à partir du moment où vous disposez d’une clé API WordPress (c’est le cas si Akismet est activé et configuré sur votre blog). Il fournit un onglet supplémentaire dans votre tableau de bord et résume les liens entrants vers votre blog, les billets les plus lus du jour, les liens externes cliqués et de la veille ainsi qu’une courbe de progression de votre audience.
Je pense que c’est un bon plugin pour débuter et suffisamment complémentaire avec Google Analytics et Feedburner pour ne pas avoir à s’en passer.

Read/WriteWeb fait partie de mes sources d’informations quotidiennes. Je suis tombé aujourd’hui sur un article concernant le lancement d’une nouvelle application Facebook permettant de recommander ses extensions favorites : Rock your Firefox.

Ca tombe bien puisque je songeais depuis quelques jours à parler des extensions que j’utilise quotidiennement dans Firefox. Certaines n’intéresseront que les développeurs, d’autres les amateurs de praticité.

Extensions Firefox

Avant toute chose, si jamais vous vous posiez la question où trouver de nouvelles extensions pour Firefox (ou Thunderbird ou d’autres produits Mozilla), rendez-vous sur Mozilla Add-ons.
L’application Facebook Rock your Firefox reprend la liste des extensions et des thèmes en vous proposant de choisir vos préférées et de les partager sur votre profil. C’est un bon moyen pour afficher votre qualité d’utilisation de ce navigateur libre et gratuit.

Extensions « Pratiques »

Adblock

Certains sites sont envahis de publicités qui gênent affreusement la navigation. Plutôt que de se passer d’un contenu intéressant, autant supprimer les nuisances. Adblock est là pour ça. Que ça soit des images,des animations Flash ou bien encore des scripts JavaScript, Adblock liste le contenu des ressources bloquables et permet même de créer des filtres génériques à l’aide du caractère * (wildcard, remplace un à plusieurs caractères, peu importe lesquels).
Attention toutefois, la publicité est vitale pour de nombreux sites donc bloquez avec intelligence.

Google Browser Sync

C’est certainement l’extension que j’installe en premier et pour cause : Google Browser Sync sauvegarde tous mos favoris, cookies et historique de navigation de manière sécurisée.
Je l’utilise sur plusieurs ordinateurs et plusieurs installations de Firefox ce qui me permet de retrouver tous mes favoris peu importe où je me trouve, à partir du moment où il y a une connexion Internet. A utiliser pour vos sauvegardes ou vos besoins de mobilité.

PDF Download

Je n’aime pas que les documents PDF s’ouvrent directement dans un onglet ou une fenêtre de mon navigateur Web. Surtout quand les plus lourds le font planter. PDF Download affiche systématiquement plusieurs choix tels que Afficher dans la page, Ouvrir en tant que PDF ou encore Télécharger directement.

Screengrab!

Screengrab est une solution propre pour effectuer une capture d’écran de sa portion visible, d’une page Web complète ou bien d’une portion d’écran bien définie. Vous l’aurez compris, pas besoin de faire 10 000 captures pour une page étalée en hauteur et pas besoin d’avoir Photoshop ou The Gimp d’installé pour s’en sortir.

Tab Mix Plus

Tab Mix Plus apporte un lot considérable d’options pour mieux régler le comportement de vos onglets. Personnellement je l’utilise pour que toute nouvelle fenêtre se charge obligatoirement dans un nouvel onglet sans me déranger (chargement en arrière-plan). Je profite aussi de son indicateur de chargement allant de 0 à 100%.
En revanche j’évite son système de récupération en cas de plantage, il fonctionne moins bien que celui intégré à Firefox (pour les rares cas où cela s’est produit chez moi).

Extensions « Développeur Web »

ColorZilla

ColorZilla est une simple pipette colorimétrique mais ô combien efficace. Un clic sur un endroit de la page mémorise automatiquement le code couleur associé et permet de l’utiliser sous plusieurs formats dans n’importe quel autre programme dont Photoshop ou votre éditeur CSS favori.

DOM Inspector

C’est la seule extension qui ne se télécharge pas/plus (jusqu’à la version 1.5 c’était encore possible). L’inspecteur DOM s’installe en même temps que Firefox (si vous cochez la case adéquate) et permet comme son nom l’indique, d’inspecter les noeuds de votre document (HTML ou XML), d’en voir leurs attributs, fonctions et ce de manière récursive.
L’analyse en temps réel permet même de voir les modifications apportées à l’arbre DOM par le biais du JavaScript.

Firebug

Firebug est obligatoire lorsqu’on souhaite explorer avec aisance la structure HTML d’un document, exécuter du JavaScript à même la page ou déboguer efficacement son code, ne serait-ce qu’en se rendant compte des temps de chargement des différents fichiers (CSS, JavaScript, Flash etc.).
Ca incite notamment à taper son code directement dans sa console plutôt qu’à le modifier et recharger la page pour déceler des erreurs ou étudier le comportement de la page. On gagne du temps et votre employeur de l’argent.

Firebug : YSlow

YSlow est une extension Firefox mais dédiée à Firebug. Une petite première made in Yahoo! très utile. Cette extension permet de calculer les performances de la page, suggère des optimisations et analyse les différents composants ainsi que leurs caractéristiques (URL, poids, temps de réponse et ETag).
Indispensable pour les phases d’optimisation et de fine tuning comme dirait l’autre.

Operator

Je vous ai déjà parlé de l’intérêt des microformats ? Operator est un outil notifiant des microformats actifs sur les pages que vous visitez. Outre la navigation interactive procurée, Operator signale dans la console de débogage d’éventuelles erreurs (élément absent, malformé ou invalidant un microformat).

TimeStamp Converter

Le nombre 1198533599 vous dit quelque chose ? Avec TimeStamp Converter ça sera le cas. Cette extension convertit les temps Unix en heure humainement compréhensible et vice-versa. Elle le fait également à partir de sélections de texte, évitant ainsi toute saisie pénible.

Web Developer

Le Saint-Graal du développeur Web. Triturer la page, modifier ses mécanismes, débloquer des champs en lecture seule, afficher les champs masqués, topographie de la page, modifier la résolution et afficher l’arborescence en cascade de la page jusqu’à un élément pointé de la souris sont le genre d’outils fournis par Web Developer. Couplée avec Firebug, vous transformez un « simple » navigateur Web en machine de guerre du développement Web propre et efficace.

Pendant que la bataille fait rage du côté des sites Web 2.0 (mais c’est un des leviers de l’innovation sur Internet que l’on aime ou pas cette appellation), une révolution silencieuse se met en marche : le Web sémantique ou encore le Web 3.0.
Jusqu’à présent, les moteurs de recherche (Google, Yahoo!, Windows Live Search, Exalead etc.) avaient pour défi le recensement du plus grand nombre de documents et des résultats de recherche pertinents.

S’il faudra bien évidemment soigner l’intitulé des liens, il faudra avant tout donner du sens à vos documents. C’est tout l’intérêt d’une programmation propre, respectant les standards et utilisant la sémantique à bon escient.

Les microformats sont pour moi un élément essentiel qui accéléreront le processus et permettront de comprendre l’intérêt de la sémantique.

Qu’est-ce que la sémantique ?

La sémantique est loin d’être une invention de l’informatique puisque ce principe est à la base de toutes les langues du monde. La sémantique se réfère tout simplement au sens exprimés par les mots. Ce concept peut être à vrai dire être élargi à tout ce qui structure de l’information.

Plus concrètement encore, ouvrez un journal (Le Figaro, Libération ou même Voici) et prenez une page au hasard. Vous arriverez sans peine et surtout sans lire le texte à discerner les titres d’articles, leur résumé, leurs passages clés et leur texte à proprement parler. Pourquoi ? Parce que tous ces éléments sont présentés de manière différente, utilisent une police de caractère différente et ont une taille différente. Un titre d’article sera naturellement plus grand et plus épais que l’article ; le résumé sera situé sous le titre et sera espace du texte l’article en lui-même.

Et si vous ne prenez pas garde à la sémantique en elle-même c’est parce qu’elle silencieuse et logique : votre cerveau analyse lui-même ce qu’il faut faire car il comprend la signification de la disposition sans avoir à comprendre ce qui est écrit.

Bien structurer une page HTML

Récemment encore j’entendais de la bouche d’une agence Web on fait des sites aux standards, avec des div et du CSS. C’est déjà bien de passer au validateur mais c’est encore mieux si on produit du code significatif.
Voici deux exemples de code qui contiennent les mêmes textes et qui respectent le standard (X)HTML.

Méthode sémantiquement correcte :

<div id="introduction">
	<h2>Site valide HTML</h2>
	<p>Cette portion de code a un code HTML valide.</p>
	<p class="suite"><a href="./edito">Lire la suite de l'édito</a></p>
<div>

Méthode sémantiquement incorrecte :

<div id="page_haut">
	<div class="titre rouge">Site valide HTML</div>
	<div class="texte">Cette portion de code a un code HTML valide.</div>
	<div class="texte petit"><a href="./?page=12345">Lire la suite de l'édito</a></div>
</div>

Sans avoir à donner un cours de balisage, voici les principes auxquels se tenir :

• utilisez les balises HTML au bon endroit et à bon escient. Ne mettez pas un div (bloc neutre) si un p (paragraphe) ou un hn (titre hiérarchique) peuvent faire l’affaire. De même pour les listes, n’utilisez pas de div (bloc neutre) si une ul/ol (liste désordonnée, liste ordonnée) ou une dl (liste de définition) sont mieux adaptées.
• nommez les classes (.classe) et les id (#id) en fonction de ce qu’ils représentent et non en fonction de l’apparence qu’ils devraient avoir.

Et c’est tout ! Cette petite touche de rigueur assurera une pérennité certaine dans vos développements. Sans compter la facilité à intégrer les microformats par la suite.

Et les microformats dans tout ça ?

Justement les microformats parlons-en. Si de prime abord sémantique et microformats peuvent paraitre sans grand rapport, ces concepts sont pourtant intimement liés. En utilisant les attributs class et rel (pour les liens hypertextes) dans une logique bien précise, on décrit le contenu et sa nature (titre de billet, auteur, date d’un évènement etc.).

Pour faire simple :

• les microformats sont faciles à intégrer si le contenu est déjà bien structuré
• les microformats aident à bien structurer le contenu : qu’il soit bien structuré ou pas, les recommandations vous guideront dans cette voie
• les microformats sont déjà reconnus par des moteurs de recherche spécialisés (Technorati) et plus officieusement par les moteurs de recherche classiques (Google, Yahoo! etc.). Pas convaincu(e) ? Voici la liste non-exhaustive des sites comprenant les microformats.

Pour bien compléter ces paroles, je vous recommande cette excellente introduction aux microformats.

Intérêt supplémentaire des microformats

Ce qui est intéressant avec les microformats c’est que l’on peut les utiliser sans avoir derrière un site Web super hi-tech en Web 46.0 full Ajax. Une page HTML suffit. J’ai justement utilisé les microformats la première fois lorsque j’ai voulu refaire mon CV en me disant qu’en HTML ça serait sympa. Il existe fort heureusement un microformat hResume réutilisant lui-même les microformats hCard (carte de visite) et hCalendar (calendrier et évènements).
Outre l’aspect purement technique de cet exercice, ce CV me sert maintenant de carte de visite (en utilisant le service contacts de Technorati) en plus de pouvoir être réutilisé sur des sites de recherche d’emploi.

Mis à part une sémantisation de votre contenu, voici les bénéfices à retirer d’un microformatage :

• extraction et republication du contenu à la volée : des services Web permettent d’aggréger une page pour la transformer en flux Atom voire même de créer des cartes de visites instantanément
• les navigateurs Web intégreront eux aussi les microformats pour faciliter la navigation des utilisateurs : installez l’extension Operator pour Firefox, revenez sur cette page et améliorez votre expérience de navigation
• les microformats sont au coeur de l’Internet de demain et c’est aujourd’hui qu’il faut y travailler

La sémantique, moteur des futures recherches sur Internet

Même si à l’heure actuelle on peut considérer que les microformats aident au référencement, ce n’est pas explicitement mentionné. Mais l’avenir est à la recherche sémantique afin d’affiner les résultats et de mieux répondre aux requêtes. C’est un énorme défi puisqu’entre indexer du contenu et comprendre ce qu’il dit, il y a tout un fossé. Cette recherche sémantique s’appliquera aussi bien au texte qu’aux ressources audio (musique, interview etc.) et vidéo.
Hakia s’intéresse à la recherche sémantique musicale tandis que d’un autre côté, la recherche sémantique est considérée comme étant une fonctionnalité nécessaire pour le futur de la recherche sur Internet.

Edition du 31/07 à 19h10 : Google Maps intègre désormais le microformat hCard.

C’est en lisant un article sur l’intégration et la promotion des Microformats que j’ai réalisé à quel point cela pouvait bien s’intégrer dans un blog. J’avais déjà microformaté mon CV (hCalendar, hCard, hResume) mais pour d’autres raisons que je développerai, j’ai finalement cédé aux sirènes de la tentation.

Le thème

Le choix des couleurs n’est pas anodin. J’ai souhaité placer une teinte marron car depuis les travaux de mon appartement, je fais une fixation sur le bois. C’est beau, ça s’intègre avec tout (pierre, métal, ancien, récent) et c’est lié à la notion de nature. Ceux qui me connaissent savent à quel point la préservation de l’environnement fait partie de mon quotidien.

J’ai évité les couleurs primaires. Elles fatiguent les yeux et vous obligent à forcer du regard. Observez bien, le parcours du blog est reposant. Les teintes restent pâles et leur utilisation sépare les différentes parties de l’écran.

Ne cherchez pas le thème dont je me suis servi : j’ai tout repris à zéro. Mais je me suis inspiré de nombreuses ressources rendant (normalement) ce blog moderne et plus agréable à lire. J’ai volontairement supprimé tout « conduit » vertical. Ce blog s’adapte à la largeur de votre écran et reste allègrement lisible sur de petites résolutions.

Les Microformats

Comme je l’ai indiqué plus haut, le déclic est venu des Microformats. Concrètement, en agençant vos balises selon un format bien précis (et documenté), vos données sont structurées de sortes qu’elles sont exploitables rien qu’en existant.
Ce blog utilise les microformats XFN, hCard, hAtom, rel-tag et rel-home.

De ce fait, vous pouvez construire un flux Atom (du XML) uniquement en lisant le contenu de n’importe quelle page du blog. En l’état ça ne vous avance à rien mais des applications commencent à intégrer cette structuration des données … à commencer par Firefox 3. En parcourant une page, vous serez par exemple averti des tags utilisés et pourquoi pas rechercher des ressources similaires sur Flickr ou MySpace. Ou encore sauvegarder les coordonnées de contact de l’auteur d’un site.

Les Microformats en une phrase, c’est utiliser une sémantique permettant l’extraction du contenu de manière logique. Ce sont les balises META de l’Internet moderne..

Objectif professionnel

Cette refonte avait également un autre objectif : rendre mon blog lisible sans crainte par des professionnels intéressés par mon travail et mes compétences. Preuve qu’une bonne structuration des données est importante, j’ai ainsi adapté ma page professionnelle en 5 minutes aux couleurs du blog pour apporter une cohérence de navigation.

Ce blog s’est repositionné doucement vers sa forme actuelle, mélangeant sujets techniques et loisirs de la vie quotidienne. J’aime les jeux alors j’en parle. J’aime le développement Web alors j’en parle. C’est ma vitrine autant auprès de mes amis que de mes futurs employeurs.

Le mot de la fin

Et pour les nostalgiques qui débarqueront en ne sachant pas à quoi je fais référence :

• La Case de l’Oncle Tom : avant le 27 juillet 2007
• La Case de l’Oncle Tom : à partir du 27 juillet 2007

Voilà ce sont quelques heures de travail qui s’offrent à vous.