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...
 

Une excellente thèse sur Simile Exhibit

J’ai toujours eu un faible pour le web sémantique. Et encore un peu plus pour les projets Simile. Ceux qui me lisent régulièrement (si, si, il y en a !) auront suivi mes (modestes) contributions au projet Simile Exhibit.

Aujourd’hui, c’est au tour de Josef Dabernig de l’Université des sciences appliquées de Vienne (Technikum Wien) d’apporter sa pierre à l’édifice. Un sacré morceau : une thèse entièrement consacrée au framework Exhibit ! Toutes les informations y sont réunies pour faciliter la mise en place et l’utilisation de cet outil magique.

Le résultat est sur le wiki de Simile Exhibit, sous forme de document PDF (Creating interactive web pages using the Exhibit framework) et de code source.

Au passage, j’ai enfin compris comment je peux gérer des items hiérarchiques dans une même facette, tout en conservant la sélection multiple !

Hiérarchie dans une facette Exhibit
Hiérarchie dans une facette Exhibit

Saine et bonne lecture qui va m’inciter à sortir des cartons de vieux projets…

Simile Exhibit 2.0 officiellement en français

Logo Simile

Depuis aujourd’hui, Simile Exhibit 2.0 supporte officiellement le français.

Je remercie David Huynh, créateur talentueux de cet outil précurseur des nouveaux usages du web, d’avoir accepter d’intégrer ma modeste contribution au code source officiel. Je remercie également les french beta testers qui m’ont permis d’affiner la version française, suite à mes précédents articles (ici et ). Et une mention spéciale à Got pour m’avoir remis sur les rails.

Si vous avez quelques exemples d’utilisation d’Exhibit en français, n’hésitez pas à les ajouter dans les commentaires. Amusez-vous bien !

Simile Exhibit 2.0 en français

On sait tous que les rentrées de septembre sont difficiles, mais celle-ci est vraiment infernale ! Même plus le temps de bloguer…

J’ai quand même fini un projet qui me tenait à coeur : la version française de Simile Exhibit 2.0.

Je ne vais pas revenir sur la présentation de cet outil fabuleux, largement décrit dans mon précédent article [Simile Exhibit : la version française est (presque) disponible]. J’ajoute simplement que la version 2.0 est toute fraîche et qu’il était temps d’y apporter une touche « frenchie » !

La voici donc en démonstration sur mon site, avant d’être intégrée à l’API officielle. Si vous constatez un dysfonctionnement ou une erreur de traduction, un petit commentaire sera le bienvenu ! Bien entendu, seule l’interface d’Exhibit est en français, les données (reprises des exemples officielles) restent en anglais. Un jour, quand j’aurai cinq minutes, je donnerai un exemple français…

Liste des exemples à tester

Simile Exhibit : la version française est (presque) disponible

Logo Simile

Simile (Semantic Interoperability of Metadata and Information in unLike Environments), initié par le MIT (Massachusetts Institute of Technology), développe des outils open source robustes et efficaces pour manipuler des données, le tout reposant sur les technologies du web sémantique.

Parmi ces outils, le framework Exhibit est l’un des plus démonstratifs. Il offre une interface riche pour trier, filtrer et consulter des données complexes, via une page web. Sa classification à facettes rend la sélection et la consultation de données très rapides.

Seul petit défaut : Exhibit ne parle actuellement que l’anglais, l’espagnol et le suédois. Pas pour longtemps puisque je viens de terminer la french version ! Elle sera intégrée dans la version stable (v.1.0) et la version 2.0 (bientôt disponible).

Pour valider ce travail, je fais appel à votre bonne volonté afin de tester quelques exemples et me remonter les erreurs et bogues que vous pourriez y trouver (via les commentaires). Une fois corrigée, la version française sera mise à disposition de tous sur le serveur de Simile.

Pour le moment, les exemples reprennent ceux du site officiel. Je n’ai pas traduit les fichiers de données puisqu’ils ne font pas partie d’Exhibit. Par contre, les éléments d’interface (actions, sélections, tris, filtres, copies, messages, aide…) devraient tous être en français. J’ajouterai sans doute un exemple utilisant toutes les options d’Exhibit avec un fichier de données en français. Ce sera plus simple !

Si vous avez déjà mis en place Exhibit sur vos sites, vous pouvez également tester la version française en modifiant (temporairement, bien sûr) le lien de la version Exhibit officielle :

<script src="http://static.simile.mit.edu/exhibit/api/exhibit-api.js?views=timeline" type="text/javascript"></script>

doit être remplacé par

<script src="http://demo.christophelebot.fr/simile-exhibit-fr/api/exhibit-api.js?views=timeline&bundle=false" type="text/javascript"></script>

Votre lien peut ne pas comporter de paramètre views. Par contre, il ne faut pas oublier le paramètre bundle (utile pour ce test seulement) qui permettra de basculer en français. Petit détail, votre navigateur doit être configuré pour afficher en priorité les contenus en français.

Liste des exemples à tester

Merci d’avance pour votre participation à ce test !

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 !).

“Web 2.0″, Ajax, interfaces riches et prospective

J’ai toujours détesté le terme « web 2.0 ». Il ne signifie rien. Il englobe ce que chacun veut y mettre et ne sert qu’à convaincre les clients crédules de la nécessité d’une refonte de leurs services en ligne.

Les acteurs du web n’ont pas attendu la vague du « web 2.0 » (à quand le ressac ?) pour créer des communautés ou des applications en ligne (on remarquera au passage que les web applications sont devenues des SaaS, softwares as a service, c’est plus « tendance »).

Et que dire du contenu généré par les utilisateurs (le fameux User Generated Content si cher au « web 2.0 ») ? N’est-ce pas la fonction première du web que de permettre la diffusion rapide, massive et économique de contenu ? Depuis 1990 (et la première page web), les utilisateurs mettent en ligne du contenu.

J’ai eu la chance de concevoir des services « à la sauce web 2.0 » dès 1998 : sites communautaires, applications en ligne, outils de travail collaboratif… Et je n’étais pas le seul ! Mais il faut bien avouer que deux choses ont freiné leur expansion : les connexions bas débit et l’inviolabilité de la sphère privée.

Tout le monde peut comprendre qu’avec un modem RTC qui charge une page web en 55 secondes, il est impossible d’avoir des services tels que YouTube. Quant à la sphère privée, il a fallu une bonne dizaine d’années pour que l’internaute s’habitue à publier (donc rendre public) quelques bribes de sa vie personnelle (avec les excès que l’on connait aujourd’hui…).

Finalement, pour moi, le « web 2.0 », c’est :

  • un coup marketing de maître !
  • la généralisation du haut débit
  • l’ouverture de la sphère privée

C’est tout. Enfin presque… J’ai oublié le seul point réellement nouveau dans le « web 2.0 » : Ajax (Asynchronous JavaScript and XML), rendu possible grâce à l’implémentation de XMLHttpRequest dans Internet Explorer (merci Microsoft !).

Ajax change tout, à commencer par la notion de page web. Comme le fait très souvent remarquer Frédéric Cavazza, peut-on encore utiliser le terme de page web, alors que le contenu et la forme évoluent par petites touches au sein d’une seule page ? Netvibes en est un bon exemple.

Nous en sommes à l’ère des single page applications (SPA). Ses effets révolutionnent notre manière de voir et de concevoir le web. Les ergonomes sont obligés de revoir toutes leurs préconisations. Ajax change nos méthodes de production, les éditeurs de code HTML (comme Dreamweaver) ont disparu et font place à des environnements de développement lourd. Ajax bouscule les habitudes chèrement acquises des internautes (on ne touche plus au bouton « Page précédente » du navigateur pourtant si pratique !). Ajax perturbe l’économie du web en faussant la mesure d’audience.

Ajax finira peut-être par tuer le web, en imitant toujours mieux le comportement des applications classiques. Il rendra inutile le navigateur web et favorisera l’émergence des RIA (Rich Internet Applications), puis des RDA (Rich Desktop Applications). Finalement, Ajax entraînera un retour aux sources de l’informatique grand public : un système d’exploitation, des applications locales, des interfaces riches.

A la différence que tous leurs éléments intrinsèques seront connectés à internet et dépendront de lui : WebOS, RDA, Widgets, SaaS. Le web sera, quelques temps encore, un protocole d’échanges de données entre machines, avant de disparaître…

Javascript et ActionScript : le piège de parseInt()

Comme tous développeurs pressés, nous utilisons très souvent des fonctions de façon empirique, sans en comprendre le fonctionnement réel et les subtilités de paramétrage. Et parfois, on le paye cher en mal de crâne, suite à des comportements incompréhensibles… et pourtant normaux.

Prenons la fonction Javascript parseInt(). Elle permet de transformer une chaîne en nombre entier. Si on veut récupérer le département d’un code postal, le premier réflexe est de faire :

var departement = parseInt(codepostal.substring(0, 2));

En apparence tout fonctionne bien… sauf pour les départements 08 et 09 pour lesquels on obtient 0 ! Diable…

C’est oublier un peu vite le second paramètre radix qui définit la base numérique à utiliser. Il est vital car en son absence, la base numérique dépend du format de la chaîne. Dans notre cas, les codes postaux commençant par 0 sont convertis en entiers de base octale (ou base 8). Notre but est d’obtenir un entier en base décimale (ou base 10), on précise donc la valeur 10 au second paramètre de la fonction parseInt() :

var departement = parseInt(codepostal.substring(0, 2), 10);

Ouf ! Pour information, radix supporte les valeurs 0 (valeur par défaut, sélection d’une base hexadécimale, octale ou décimale selon le format de la chaîne) et de 2 à 36. Par exemple, si on souhaite un entier hexadécimal, radix sera égal à 16.

On ne m’y reprendra plus !

Behaviour, ou comment piloter Javascript par les sélecteurs CSS

En attendant que s’impose un langage web qui réconcilie les développeurs, les marketeurs et les visiteurs (à mon avis, on en est très loin…), on est bien obligé de faire avec le HTML. Donc d’accepter un joyeux mélange dans le code d’une page web : contenu textuel et visuel, méta-données, informations de mise en page et de styles, appels à des comportements interactifs, paramètres d’objets externes, etc. Même avec la meilleure volonté du monde (par exemple, un site « 100% XHTML, 100% accessible, 100% CSS2 »), il est impossible de séparer totalement le contenu, sa présentation et son comportement.

Après avoir critiqué cette situation absurde, Ben Dolan nous propose une solution simple et astucieuse pour la partie interaction, grâce à son script Behaviour. Son objectif : éliminer tous les appels aux comportements Javascript dans le code HTML et les déclencher grâce au DOM et aux sélecteurs CSS.

Une idée toute bête, encore fallait-il y penser. Du coup, toutes les interactions peuvent être modifiées sans toucher au code HTML. Du pur bonheur !

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.

Avec Retrievr, dessinez ce que vous cherchez !

Retrievr

La société autrichienne System One vous propose de tester Retrievr, un système de recherche d’images original et intuitif : pour trouver des photos, il suffit de les dessiner !

Autour d’un noyau codé en Python, Retrievr utilise Flash et le framework Javascript Helma pour l’interface utilisateur. Il est principalement basé sur les recherches conduites par Chuck Jacobs, Adam Finkelstein et David Salesin, de l’Université de Washington.

L’interface est simple et intuitive, les résultats sont étonnants !