Hello, I’m Vinch

And this is my website.

Le microformat hReview en pratique

06/25/11

This post is more than 5 years old. It might not reflect my current skills and convictions.

En avril 2007, je survolais avec vous les différentes types de microformats. Sans entrer dans les détails, j’introduisais l’utilité présumée des microformats les plus répandus.

Malgré tout le bien qu’on en dit, il est difficile de calculer l’impact réel des microformats sur le référencement dans les moteurs de recherche. Avec la motivation de mettre toutes les chances de notre côté pour être bien référencé, on se dit qu’il est préférable de les utiliser que de ne pas le faire mais on ne va souvent pas beaucoup plus loin. Tout cela reste en général très théorique.

Aujourd’hui, j’ai donc décidé de vous présenter une application purement pratique du microformat hReview, utilisé sur WooRank, un outil d’analyse de sites Web dont je suis le co-fondateur.

Si vous avez déjà analysé votre site Web avec WooRank et que, par après, vous avez tapé votre nom de domaine dans Google, vous êtes peut-être tombé sur quelque chose de ce genre :

hReview

Il s’agit d’un résultat de recherche Google tout ce qu’il y a de plus classique à l’exception des étoiles accompagnées du « Review by WooRank » juste en dessous du titre.

C’est le fait que plusieurs personnes m’aient demandé comment nous avions fait pour obtenir cela qui m’a donné l’idée de rédiger ce billet.

De quoi s’agit-il ? Tout simplement de l’interprétation que Google fait du microformat hReview, implémenté par nos soins dans chaque rapport WooRank. L’implémentation du microformat est placée dans le badge avec le ranking sur 100.

Badge WooRank

Voici la partie du code source qui nous intéresse :

Le microformat est défini via quelques attributs class qu’on trouve appliqué à plusieurs balises.

D’une part, nous définissons sur quoi porte la cote (.item – ligne 4) et d’autre part, nous assignons la cote proprement dite (.rating – ligne 18).

A l’intérieur de .item, nous définissons le nom de ce qui est coté (.fn – ligne 7) ainsi que celui qui cote (.reviewer – ligne 11) au format hCard.

A l’intérieur de .rating, nous spécifions la valeur (.value – ligne 19) ainsi que la valeur maximum possible (.best – ligne 25). Ces deux attributs n’auraient pas été nécessaires si nous avions établi la cote sur 5 car il s’agit de la valeur maximum par défaut.

Par exemple :

<div class="rating"><span class="value">3</span> out of <span class="best">5</span></div>

est équivalent à :

<div class="rating">3</div>

Pour terminer, le tout doit être englobé dans une balise .hreview (ligne 1).

Et c’est tout. L’ajout de quelques attributs class nous a permis d’ajouter un peu de sémantique supplémentaire à nos rapports.

Je vous invite à aller lire la spécification du format pour connaître les autres attributs existants. Je n’en ai finalement utilisé que très peu dans cet exemple, mais il faut savoir qu’ils sont quasiment tous facultatifs et que Google ne les prend pas tous en considération.

Je rajoute que hReview est toujours en draft, ce qui veut dire que des changements pourraient encore survenir dans la spécification, même si c’est fortement improbable que cela ait un impact négatif sur les implémentations existantes.

Toujours est-il que quelques semaines après avoir mis cela en place, nous avons découvert que Google avait détecté le microformat et commençait à afficher le rating dans ses résultats de recherche. Une très bonne chose car le résultat est beaucoup plus visible et revêt un aspect officiel non négligeable.

Je vous conseille vivement de considérer hReview au cas où vous possédez un blog où il vous arrive de tester des produits, cela pourrait être bénéfique pour votre référencement.

Il y a encore beaucoup de choses à dire sur le sujet mais je vais le conclure ici pour aujourd’hui. La discussion continue bien entendu dans les commentaires.

Webmission Austin 2012

06/20/11

This post is more than 5 years old. It might not reflect my current skills and convictions.

Le 6 mars 2009, Laurent Eschenauer, un liégeois de 32 ans, était invité à venir présenter sa startup Storytlr.com à San Francisco à l’occasion du Google I/O, l’événement annuel organisé par Google à destination des développeurs du monde entier.

Excité par l’idée mais n’ayant aucune envie d’aller seul en Californie, Laurent contacte rapidement Xavier Damman (dont j’ai déjà parlé) et Antoine Perdaens et les invite à venir avec lui. Mais ils ne s’arrêtent pas là. En effet, ils décident d’inviter plusieurs startups belges à participer à l’aventure. En tout, ils sont douze à partir à San Francisco en mai 2009. En plus du Google I/O, ils participent au SF New Tech et vont visiter plusieurs startups à succès de la Silicon Valley.

La Webmission était née.

Austin

Depuis lors, deux autre Webmissions ont eu lieu à San Francisco ainsi qu’une Webmission à Séville. Une autre Webmission s’envolera très prochainement pour la côte est des Etats-Unis (New York et Boston).

J’ai eu la chance de participer moi-même à la Webmission 2010 de San Francisco en tant que co-fondateur de WooRank et ce fut une expérience très enrichissante qui avait été relatée à l’époque sur le blog de 1MD.

Mais tout ça, que vous accrochiez ou pas au concept, vous le saviez sans doute déjà. Pourquoi est-ce que je vous raconte tout ça dans ce cas ?

Tout simplement pour introduire le fait que j’organise, de concert avec Grégoire Hoin (et avec le support de toute l’équipe de http://www.webmission.be), une Webmission en mars 2012 à Austin (Texas, USA), à l’occasion du SXSW.

Si vous ne savez pas ce dont il s’agit, le SXSW (qui est le sigle de South by Southwest) est un festival annuel à propos de la musique, du cinéma et des médias interactifs. C’est ce dernier aspect qui nous intéresse dans le cas présent.

Durant quelques jours, l’Austin Convention Center accueille les plus grand experts du Web mondial qui sont rassemblés là pour participer à un nombre impressionnant de conférences qui touchent à des sujets très variés tels que le design, le développement, les médias sociaux, l’entrepreneuriat, le marketing en ligne, les standards du Web, le Web sémantique, l’ergonomie, la sécurité informatique, etc.

Je vous invité à aller jeter un oeil à cette liste pour vous rendre compte de la qualité des intervenants qui sont généralement présents à cet événement. Quelques exemples pris au hasard : Mark Zuckerberg, Larry Page, Guy Kawasaki, Jeremy Keith, Gary Vaynerchuk, Evan Williams, etc.

L’an prochain, le SXSW Interactive aura lieu du 9 au 13 mars 2012. La Webmission s’articulera autour de ces dates.

SXSW

De la même manière que le Google I/O est l’événement central des Webmissions à San Francisco, le SXSW sera donc l’événément central de cette Webmission texane. Mais nous ne comptons bien sûr pas en rester là. Nous sommes actuellement en pourparlers pour aller rendre visite à quelques startups basées à Austin (parmi lesquelles Gowalla et Happy Cog) et pour organiser une soirée belge dans un bar de la ville.

Nous avons d’autre projets pour cette Webmission mais il est sans doute encore prématuré d’en parler maintenant. C’est encore loin après tout, bien qu’il soit utile de réserver assez tôt l’avion et surtout un hôtel car ils sont très (très) vite complets à cause de l'événement. Les tickets pour le SXSW seront quant à eux en vente dès le début du mois d’août.

Je tiens à dire que cette Webmission n’a pas vocation de remplacer la Webmission à San Francisco mais de proposer un événement alternatif qui serait un genre de WMx – à la manière des TEDx par rapport à TED (toutes proportions gardées). Même si le contexte est un peu différent, les objectifs restent semblables : rencontrer les gens qui font le Web mondial dans une atmosphère détendue, échanger avec eux et peut-être même, dans le meilleur des cas, bâtir des partenariats de longue durée !

Si vous souhaitez participer à cette Webmission à Austin, vous pouvez dès à présent entrer en contact avec moi. Les détails pratiques viendront au fur et à mesure et je vous invite à me suivre (hashtag #webmission) ou à suivre le compte de la Webmission sur Twitter pour être au courant des dernières news. Une page vient également d’être créée sur le wiki de la Webmission.

J’espère en avoir motivé plus d’un ! Si votre boss reste réticent, faites lui donc lire ceci. S’il continue à rester réticent, il faudrait sans doute penser à devenir votre propre boss, mais c’est une autre histoire !

A bientôt !

La qualité de l’air en Belgique

06/14/11

This post is more than 5 years old. It might not reflect my current skills and convictions.

Cela peut paraître bizarre, mais pour un projet obscur et personnel, j’avais besoin de connaître, plus ou moins en temps réel, la qualité de l’air de quelques villes belges importantes.

Los Angeles smog

En regardant la météo de Tatiana Silva, j’ai remarqué qu’il semblait y avoir une autorité compétente pour ce genre de données en Belgique : la Cellule Interrégionale de l’Environnement ! (remarquez au passage le site Web qui semble ne pas avoir bougé depuis 1999)

J’ai découvert qu’ils disposaient des indices de qualité de l’air de plusieurs villes (Bruxelles, Anvers, Gand, Liège et Charleroi) ainsi que d’indices plus généraux (zones et régions). Tout est disponible sur cette page. L’indice de qualité de l’air est exprimé dans la dernière colonne, sous la forme d’une barrette colorée. L’indice peut varier de 1 (tout est génial) à 10 (on va tous mourir). En règle générale, il se situe entre 3 et 5.

Juste pour le sport, je leur ai envoyé un email pour leur demander s’ils disposaient d’un web service qui renvoyait du XML, ou mieux, du JSON. Juste pour le sport car je savais très bien que :

  • Ils ne disposaient certainement pas de web service public
  • Ils ne répondraient jamais à mon email

Je ne me suis pas abattu pour autant et j’ai décidé de le faire moi-même en utilisant la technique du Web scraping sur la page précédemment linkée. J’avais déjà parlé du scraping dans un précédent post sur les hackers. Pour rappel, il s’agit d’une technique qui consiste à parcourir le code source HTML d’une page pour en extraire les informations qui nous intéressent. En soi, ce n’est pas un truc ultra légal, et c’est donc à utiliser en dernier recours.

Pour réaliser mon scraping, j’ai utilisé la librairie Goutte de Fabien Potencier (encore lui). En quelques lignes de code, j’ai réussi à obtenir les informations qui m’intéressaient. Pour être tout à fait clean, j’ai mis en place un système de cache qui fait en sorte que le scraping n’aura lieu qu’au maximum 24 fois par jour (ou une fois par heure si vous préférez) vu que l’indice est mis à jour toutes les heures. Donc, cela limite les risques de trop abimer les serveurs de irceline.be !

Le code source du web service est sur Github et est disponible en ligne à l’URL suivante :

http://v1n.ch/air/data.php

En l’appelant sans paramètres, il renverra l’indice pour toutes les villes. Vous pouvez également cibler une ville particulière via le paramètre city qui prend comme valeur le LOCODE de la ville en question :

  • BRU = Bruxelles
  • ANR = Anvers
  • GNE = Gand
  • LGG = Liège
  • CRL = Charleroi

Par exemple :

http://v1n.ch/air/data.php?city=CRL

Et comme certains préjugés tenaces pourraient le laisser penser, la qualité de l’air à Charleroi n’est pas systématiquement plus mauvaise qu’ailleurs !

J’ai également mis à disposition deux exemples d’utilisation du web service.

Le premier exemple (code source) va utiliser la fonction de géolocalisation de votre navigateur (navigator.geolocation) pour afficher l’indice de la ville la plus proche d’où vous vous trouvez. Evidemment, c’est un peu débile dans le cas où vous testez le truc depuis un pays lointain ! Par exemple, depuis Tokyo, on vous donnera l’indice de Liège, mais bon… (soyez tolérants)

Le second exemple (code source) affiche simplement une carte (Google Maps) un peu moche avec les indices. Rien de fortement original mais je ne pouvais pas passer à côte ! D’ailleurs, si quelqu’un trouve un moyen simple d’afficher directement l’indice dans l’icône pour ne pas être obligé d’afficher l’infobulle, je suis preneur ! (en évitant aussi de devoir créer 10 icônes en PNG)

N’hésitez pas à forker sur GitHub pour ajouter vos exemples et faire vos correctifs. Tenez moi également au courant si vous utilisez le Web service dans un projet de fou !

A la prochaine et bon vent !