Author Archives: vinch

Le microformat hReview en pratique

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 :

http://pastie.org/2120865.js

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

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

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 !

Votre design Web est-il « responsive » ?

Depuis quelques années, le Web n’est plus uniquement consultable via un ordinateur personnel. En effet, l’apparition des netbooks, des smartphones et des tablettes a fait en sorte que votre site Web peut être vu par des écrans de dimensions totalement différentes ! S’assurer que votre site ne dépasse pas les 1000 pixels de large n’est plus suffisant en 2011 !

Pendant longtemps, l’unique parade a été de réaliser des sites Web spécifiques pour les smartphones avec une détection assez hasardeuse des appareils ciblés. En effet, il m’est arrivé très souvent d’obtenir la version iPhone d’un site Web sur mon iPad alors que la version « normale » serait plus opportune. En plus de souffrir de ces problèmes de détection, le travail à abattre pour réaliser ces sites Web alternatifs est assez colossal ! La logique à mettre en place est très pointilleuse, il faut faire en sorte que tous les liens fonctionnent encore et mènent vers les bonnes pages, etc.

La solution ? Rendre votre design Web responsive !

Responsive Web Design

En mai 2010, Ethan Marcotte écrivait sur ALA l’article qui jetait les bases du responsive Web design et expliquait les solutions techniques pour le mettre en place.

La technique est finalement relativement simple. Il suffit en effet d’utiliser ce qu’on appelle les media queries, apparues avec CSS3. Vous connaissez sans doute déjà les media types qui permettent, entre autres, de cibler l’écran (screen) ou l’impression (print) et d’appeler la CSS correspondante. Les media queries vont plus loin et permettent d’appliquer des régles encore plus précises.

Par exemple, si nous souhaitons cibler les devices dont la largeur d’écran est inférieure à 480 pixels, voici à quoi va rassembler l’appel de notre fichier CSS :

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="narrow.css" />

En combinant plusieurs appels de ce type, vous pouvez au final obtenir un design Web qui s’adaptera naturellement à la taille du navigateur du device que vous utilisez.

L’avantage par rapport aux solutions critiquées en début d’article est que nous ne touchons pas au contenu, aux URLs et à la logique générale du site Web. Seuls les fichiers CSS changent !

Quelques exemples inspirants se trouvent sur le site Media Queries (qui n’est pas un site espagnol). J’en ai retenu quelques uns :

Pour voir l’effet des media queries sur ces sites, vous pouvez réduire la largeur de la fenêtre de votre navigateur. Magique, n’est-ce pas ?

Si vous voulez aller plus loin, notre ami Ethan Marcotte vient de sortir un bouquin consacré uniquement au sujet de ce blog post ! J’achète assez rarement des bouquins techniques mais je vais sans doute faire une exception pour celui-ci 🙂

Prochaine étape : rendre ce blog responsive ! Après avoir été le premier blog belge en HTML5 (oui, j’en suis fier), est-ce qu’il sera également le premier à avoir un design responsive ? Rien n’est moins sûr !

La programmation devient sociale !

Je brise mon silence pour vous parler de deux services auxquels je m’étais inscrit il y a relativement longtemps, mais que je commence seulement à utiliser intensivement depuis quelques semaines.

Ils ont tout les deux en commun de faire de la programmation une activité sociale, même pour un développeur freelance qui ne sort jamais de chez lui.

Le premier s’appelle Forrst et on peut considérer que c’est l’équivalent de Dribbble pour les développeurs. A vrai dire, Forrst est à destination aussi bien des designers que des développeurs mais c’est évidemment ce dernier aspect qui m’intéresse le plus. Forrst permet de partager des snippets (c’est-à-dire des petits morceaux de code — mais il n’existe pas vraiment de traduction française pour ce terme) afin de les mettre à disposition de la communauté.

Au départ, j’étais réticent et je me disais que c’était sans doute un outil uniquement destiné à faire de l’autopromotion et de la branlette collective à grands coups de « Amazing work » et de « You rock » (à l’image de Dribbble → ceci est un troll) mais je me trompais. En effet, dès mes premiers posts, force fut de constater que la communauté est très active et qu’elle n’hésite pas à vous corriger si vous faites une erreur ou si vous ne faites pas une chose de la façon la plus simple et la plus efficace possible. J’ai trouvé ces échanges très enrichissants, et je les ai d’autant plus apprécié que j’ai appris de nombreuses choses grâce aux conseils et commentaires avisés des membres de Forrst. Je vous invite fortement à m’y rejoindre !

L’autre outil dont je vais vous parler, vous le connaissez sans doute déjà, et vous l’utilisez sans doute déjà depuis longtemps. Il s’agit de GitHub, la célèbre plate-forme d’hébergement et de gestion de développement de logiciels. Comme son nom l’indique, GitHub est basé sur Git, le logiciel de gestion de versions inventé par Linus Torvald, un équivalent (mais sans doute en mieux) de SVN ou Mercurial… J’ai l’impression que le devéloppeur de 2011 est presque obligé d’être sur GitHub. La plupart des projets open source, qu’on pouvait autrefois trouver sur SourceForge ou Google Code, semblent désormais avoir trouvé leur place sur GitHub. Cette plate-forme dispose en effet d’un aspect social que je trouve très intéressant. En effet, outre observer (watch) des projets et suivre (follow) des programmeurs, la fonctionnalité la plus intéressante de GitHub consiste à pouvoir « forker » un projet, c’est-à-dire en créer une branche (pour améliorer un aspect du code ou pour corriger un bug) qui pourra ensuite être fusionnée avec le projet principal (je vulgarise à peine, n’hésitez pas à corriger mes propos).

A noter que GitHub peut également servir à héberger des projets propriétaires de façon sécurisée, moyennant paiement. Via Gist, il permet également de partager des snippets avec vos amis programmeurs (plus ou moins de la même façon que Forrst). Une dernière fonctionnalité que je trouve également relativement intéressante est Pages qui vous donne la possibilité d’héberger les pages Web de vos projets directement sur GitHub (via un sous-domaine).

Vous trouverez mes modestes premiers projets GitHub par ici. Je vous invite aussi (surtout) à aller voir les projets de Fabien Potencier (l’homme à l’origine du framework PHP Symfony), qui m’a indirectement motivé à utiliser plus intensivement GitHub. Ses lignes de code sont de la pure poésie et vont sans doute en réconcilier plus d’un avec le PHP !

Des news de 1MD ?

Vous en voulez ? Vous en aurez.

Cela faisait longtemps que je n’avais plus eu l’occasion de vous parler de mon job de tous les jours qui consiste à être co-gérant de l’agence créative 1MD et à faire des trucs foufous pour nos clients que nous adorons.

Depuis le 19 novembre où je vous parlais de notre action pour Coca-Cola France, il s’en est passé des choses !

Tout d’abord, vous le saviez sûrement déjà si vous me suivez studieusement sur Twitter, nous avons atteint l’objectif dont la boîte tire son nom. En effet, nous avons atteint le million de dollars de CA, et cela beaucoup plus tôt que prévu ! Cela implique donc une fête inoubliable que nous sommes activement en train de préparer en ce moment même ! Si vous voulez en être, inscrivez-vous par ici → http://1md.be/buzz

YouRecycled.com

Ensuite, au niveau des projets, nous sommes fiers d’avoir réalisé le design et le développement du nouveau site de Walibi ainsi que du site Star by Ciné Télé Revue. Ces deux sites ont été réalisés avec Drupal avec la complicité de nos amis de chez Snowcap. Même si j’ai tendance à cracher à tout ce qui ressemble de près ou de loin à un CMS, j’avoue que Drupal nous a bien aidé dans ces deux cas, même si je persiste à penser qu’en tant qu’intégrateur/développeur un peu maniaque, on peut difficilement prendre son pied en réalisant un site avec Drupal !

Nous avons également réalisé le site YouRecycled.com dont le but est de promouvoir le site YouRecycle.com. Ce dernier vous permet de gagner de l’argent en recyclant vos vieux appareils électroniques. Pour YouRecycled.com, nous avons réalisé un algorithme relativement pointu qui permet de transformer n’importe quelle photo en sa version « recyclée » (voir illustration ci-dessus). Nous avons essayer de reproduire l’effet qu’on retrouve sur le travail de Charis Tsevis mais de façon automatique !

Encore plus récemment, nous avons réalisé un « single page website » en HTML5 (www.lagentehadichosi.es) pour Alpro soya en Espagne. Comme beaucoup l’ont fait remarquer, la technique utilisée est fortement inspiré par celle de Nike Better World. Rendons à César ce qui est à César. J’écrirai sans doute un billet prochainement pour expliquer la technique utilisée, même si ce n’est rien de vraiment sorcier…

1MD projects

Quoiqu’il en soit, Avec des sites comme Walibi, Star TV, Alpro soya ou encore Volkswagen Super Likers et Fabia I Like, j’espère sincèrement que 1MD a prouvé qu’elle était bien plus qu’une agence Flash. Même si nous sommes comblés par notre partenariat avec Adobe (la preuve), nous souhaitons réellement nous positionner comme une agence créative indépendante de la technologie. Nous utilisons la technologie qui se prête le mieux à ce que nous voulons faire (Flash, HTML5, Unity 3D, etc.)

Nous sommes encore moins une agence de « buzz » et par dessus le marché, nous ne sommes pas la boîte de prod web des agences de pub renommées. Malgré quelques exceptions, nous préférerons toujours travailler en direct avec le client, pour fournir le meilleur résultat final possible.

J’espère avoir un peu éclairci les choses car j’ai eu écho de beaucoup de confusion à notre égard. C’est sans doute justifié par le fait que nous ne savons pas exactement nous-mêmes ce que nous sommes. Par contre, nous savons précisémment bien ce que nous ne sommes pas ! (et la liste de ce que nous ne sommes pas s’allonge doucement au fil du temps)

Trève de sériosité, si vous aimez notre boulot, je vous invite à nous suivre sur Facebook ou Twitter, si ce n’était pas déjà le cas. Et restez y branchés, plein de trucs dingues vont arriver bientôt !

Savez-vous compter en hexatridécimal ?

Le système hexatridécimal est un système de numération positionnel en base 36. Il utilise 36 symboles, généralement les chiffres arabes + les 26 lettres de l’alphabet. Dans le même ordre d’idées, les informaticiens du monde entier connaissent depuis leur plus jeune âge le système binaire (base 2 avec uniquement 0 et 1 comme symboles) ainsi que le système hexadécimal (base 16, utilisé notamment pour exprimer les codes de couleurs). Le système le plus courant (et le plus naturel pour le commun des mortels) est bien entendu le système décimal (en base 10).

Le système hexatridécimal (parfois également nommé alphadécimal, hexatrigésimal ou encore sexatrigésimal) est moins connu et moins répandu. Pourtant, il a trouvé récemment une utilisation tout à fait pratique depuis l’apparition des raccourcisseurs d’URL (URL shorteners) qu’on trouve partout sur le Web aujourd’hui, grâce notamment à l’explosion de Twitter (qui a d’ailleurs son propre raccourcisseur d’URL).

36

En 2009, nous avions lancé un raccourcisseur d’URL pour smart, la célèbre marque de voitures compactes. Vous pouvez encore le trouver sur oym.be. Pour créer une URL courte, une chaîne de caractère de 6 caractères (qu’on appelle hash et qui est composé de chiffres et de lettres) était générée et ensuite concaténée au domaine pour obtenir une URL finale de ce genre oym.be/7zrgiq (20 caractères au total en comptant « http:// »). Le fait d’utiliser 6 caractères permettait de générer plus de deux milliards d’URL (36^6). Néanmoins, s’il fallait le refaire, il serait sans doute plus pertinent d’utiliser un système d’URL basé sur les nombres exprimés en base 36.

En effet, en générant nos hashes dans l’ordre en base 36, nos premières URL générées seront très courtes et se rallongeront au fur et à mesure.

En considérant que le nom de domaine de notre raccourcisseur d’URL est sho.rt, nous pourrons constater les cas de figure suivants :

On remarque que le nombre de caractères du hash reste assez bas (à peine trois caractères après une dizaine de milliers d’URL), malgré le nombre relativement élevé d’URL déjà générées. Peu de raccourcisseurs d’URL pourront prétendre atteindre une taille de hash plus élevée que 5, ce qui correspondrait à un nombre total de plus de soixante millions d’URL générées ! Il y a donc énormément de chances que nos URL soient toujours plus courtes que celles générées de façon aléatoire sur oym.be !

Comment mettre tout ça en pratique ?

PHP nous fournit la fonction base_convert() qui est fort pratique car elle permet de convertir un nombre d’une base à une autre. Par exemple, base_convert('10', 36, 10) donne 36 comme résultat (1*36^1 + 0*36^0). Le premier paramètre est le nombre à convertir, le second est la base du nombre à convertir et le troisième est la base dans laquelle le convertir.

Du côté de la DB, il vous suffit de créer une table avec les champs (minimum) suivants :

  • id (entier non signé, auto increment, clé primaire)
  • long_url (chaîne de caractère)

Pour générer le hash d’une URL courte, il vous suffit de faire un INSERT de l’URL longue dans la table, de récupérer l’id venant d’être générée (via la fonction mysql_insert_id() par exemple) et de le transformer en base 36 via la fonction base_convert().

Pour récupérer l’URL longue correspondant à votre hash, vous devrez convertir celui-ci en base 10, effectuer un SELECT dans votre table sur cet identifiant, récupérer l’URL longue et finalement faire votre redirection.

Ce n’est finalement pas plus compliqué que ça ! Grâce à ces quelques conseils, vous devriez désormais être capable de mettre rapidement en place un raccourcisseur d’URL efficace.

Et n’oubliez pas que la taille compte, plus que jamais !

---

UPDATE 03/02/2011 – 10:26

Comme me le suggèrent @_pakal_ et @jkbockstael sur Twitter, j’aurais très bien pu utiliser un système en base 62 (chiffres arabes + les 26 lettres de l’alphabet en minuscule et en majuscule). J’avoue ne pas l’avoir fait car les URL sensibles à la casse m’ont toujours fait un peu peur. Je sais que les serveurs Windows ne les gèrent pas bien. Et il faut également s’assurer que la DB MySQL soit case sensitive. A priori, en étant méticuleux, ça ne posera pas de soucis majeurs. La démarche générale reste la même que celle expliquée plus haut et nos URL raccourcies seront encore plus courtes ! Quelques exemples par ici.

2011, l’année des hackers (?)

Je n’ai pas l’habitude de me lancer dans des prédictions pour l’année à venir, je n’ai pas et je n’aurai jamais la prétention de prédire l’avenir. Je laisse ça aux grands gourous 2.0 que Cédric a si bien décrit dans un récent billet. Le passé nous a déjà prouvé que rien n’est prévisible et que la plupart des événements qui entrent finalement dans l’histoire étaient totalement inattendus. A part lire des banalités que même mon chien aurait pu formuler entre deux promenades, je ne trouve rien d’intéressant dans ces prédictions. Ah oui, Apple va racheter Facebook, c’est vrai, tout le monde y croit à mort ! (sous réserve que Facebook ne ferme pas le 15 mars 2011 bien sûr, on y croit dur comme fer également)

Pourtant, j’avoue, je m’étais déjà lancé dans ce genre de prédictions par le passé, et j’avais vu juste ! Cela m’avait même valu le surnom de Vinstradamus ! Comme quoi…

Non, sérieusement, cette année, je vais me lancer. Je ne vais pas prendre un énorme risque, certes. Je vais juste vous affirmer que 2011 sera, plus que jamais, l’année des hackers !

« Mais c’est méchant un hacker, non ? Ca crée des virus et alors mon PC il devient lent lol ! »

Mmmm, pas exactement, non. Je pense qu’il est temps de redéfinir la vraie signification du mot hacker, chère madame.

Littérallement, hacker veut dire bidouilleur, bricoleur. Le terme est utilisé pour désigner des programmeurs astucieux et débrouillards. Plus généralement il désigne le possesseur d’une connaissance technique lui permettant de modifier un objet ou un mécanisme pour lui faire faire autre chose que ce qui était initialement prévu (merci Wikipédia, tu m’ôtes les mots de la bouche).

Le hacker n’a généralement pas d’intentions sombres et destructrices, bien au contraire. Dans la tête des gens, le terme hacker est souvent confondu avec le terme cracker (Wikipédia) qui, lui, désigne un pirate informatique destructeur.

Le hacker utilise généralement ses connaissances en programmation pour essayer d’améliorer son quotidien, et s’il met le fruit de son travail à disposition, il améliore ainsi le quotidien du plus grand nombre.

C’est dans cet esprit que j’avais réalisé, en 2006, un Web service permettant d’obtenir le programme TV, grâce à la technique du Web scraping (parcourir le code source HTML d’une page pour en extraire les informations désirées). J’avais décrit ma manoeuvre dans ce billet. Malheureusement, j’avais vite été rattrapé par les commerciaux impolis de TvBase qui m’avaient menacé par téléphone. Ils n’auraient sans doute rien remarqué si je n’avais pas fait mon malin sur mon blog mais peu importe. J’étais jeune à l’époque. J’ai fermé ma gueule et j’ai mis le truc offline. De toute façon, c’était totalement illégal, j’en conviens. Mais ça m’avait permis de m’amuser et d’apprendre, tout n’était pas perdu. Je trouve juste dommage qu’en 2011, il n’existe toujours aucun format ouvert permettant d’obtenir ce genre d’informations et que des boîtes comme TvBase arrivent encore à gagner beaucoup d’argent avec ça. Bref, c’est une autre histoire.

Autre exemple, Michaël Uyttersprot avait réalisé une application mobile lui permettant d’obtenir les horaires de la STIB (la compagnie de transports en commun de la région de Bruxelles) en temps réel sur son téléphone Android. Il utilisait également la technique du Web scraping mais il a eu plus de chance que moi. En effet, la STIB ne lui a pas tapé sur les doigts (enfin, peut-être un peu) mais lui a commandé une vraie application Android, utilisant des données légitimes cette fois-ci. Depuis lors, il a également réalisé le site mobile http://m.stib.be (avec Grégoire en charge du design) et d’après ses derniers tweets (genre « Objective-C, c’est trop de la balle ! »), je ne prends pas beaucoup de risques en affirmant qu’il bosse sur une application iPhone. Une chouette histoire à raconter dans toutes les chaumières, au coin du feu.

Mais le plus célèbre des hackers aujourd’hui reste sans doute Mark Zuckerberg, le créateur de Facebook, élu personnalité de l’année 2010 par TIME. Les prémices de Facebook se basent sur plusieurs actes de hacking de sa part. Si vous voulez en savoir plus à son sujet, je vous conseille d’aller voir le film The Social Network (sans conteste dans mon top 3 de 2010 avec Toy Story 3 et Inception). C’est ce qui me fait dire que 2011 sera plus que jamais l’année des hackers.

Ce sentiment est conforté par la naissance de mouvements comme le Hack Democracy, initié par Xavier Damman, un développeur belge parti créer un business à succès à San Francisco. Plusieurs fois par mois, des hackers belges et d’autres curieux se réunissent pour discuter des meilleures façons d’améliorer la vie du citoyen grâce aux données et à l’informatique. Le prochain Meetup Hack Democracy aura lieu le 19 janvier 2011.

Ce sentiment est encore plus conforté par ces graphistes et développeurs qui lancent des actions citoyennes (230111.be, camping16.be, lerecorddumonde.be) qui auraient rassemblé 17 geeks 2.0 il y a quelques années mais arrivent aujourd’hui à réunir des milliers de personnes et font le tour de tous les médias (francophones et néerlandophones) de notre cher Royaume (bien aidés par des réseaux sociaux tels Twitter et Facebook, des outils créés par des hackers).

Tout ceci me fait me poser la question suivante : Les hackers seront-ils les rockstars de demain ? Wait and see.

Aidez-moi à m’envoler vers Las Vegas !

Si vous me suivez sur Twitter ou avez l’honneur d’être mon ami sur Facebook (enfin, ce n’est pas vraiment un honneur vu que j’accepte n’importe qui), vous devez être au courant que je participe à un petit concours pour avoir la chance de couvrir le salon CES à Las Vegas au début de l’année prochaine, tout ceci à l’initiative des braves gens de chez Samsung Belgique (j’essaye même pas de frotter la balle en disant ça).

Tout est expliqué sur le site http://www.ces-live.be, réalisé par les braves gens de chez Polygone Digital Natives (idem).

Vinch Wanted !

(voir l’illustration en grand)

Comme j’ai l’impression d’être la personne qui conviendrait le mieux à la mission et que vous êtes certainement également de cet avis, je vous demanderais de me faire une toute petite recommandation de rien du tout ! Même si je pense que la concurrence est assez faible (surtout celle-ci) et que j’aurais émergé naturellement dans les suffrages populaires, on n’est jamais trop prudent, je préfère couvrir mes arrières ! (c’est du second degré, pas taper)

Et si vous aimez Bollywood, n’hésitez pas à suivre les aventures de Seigneur Vinch et Flexyflow (déjà deux épisodes à ce jour) :

Merci d’avance !

Reproduire l’effet Apple.com grâce à un plugin jQuery

Ceux qui me suivent sur Twitter ont pu le découvrir en exclusivité (pour rappel, je suis vinch01 sur Twitter), j’ai écrit mon premier plugin jQuery pour reproduire l’effet qu’on a pu voir récemment sur le site Apple.com (nouveau MacBook Air, les Beatles sur iTunes, etc.)

Si vous ne voyez pas ce que je veux dire, allez jeter un oeil à la vidéo ci-dessous :

Le fonctionnement de mon plugin est assez simple. J’ajoute quatre blocs (avec un z-index relativement élevé) autour du bloc cible et je fais un fadeOut() sur ces blocs après un temps défini.

Vous pouvez télécharger le plugin sur cette page et y trouver toutes les informations utiles qui vont avec. Je n’ai pas défini de licence claire mais libre à vous d’en faire ce que vous voulez. Je me ferai un plaisir de l’adapter en fonction de vos remarques et conseils.

J’espère que cela vous sera utile. Pour nous, en tout cas, ça le sera sans doute très prochainement.