Accueil Modifications Récentes Blog

MicroformatsEncodageEtVisualisation

Traduction d'un article de Brian Suda paru en décembre 2007 chez dev.opera

Microformat Encodage et Visualisation

par Brian Suda · le 19 déc 2007

Introduction

Ainsi vous avez entendu parler des microformats, lu les articles d'introduction et même acheté le livre. Mais maintenant vous êtes probablement en train de penser "génial - j'ai fait mon boulot de transformer le Web en un meilleur endroit en y ajoutant des microformats ; et ensuite ? Que peuvent faire les gens avec mes données si ce n'est les ajouter à leurs carnets d'adresses ou à leurs calendriers ?" L'intention de cet article est de vous amener à penser différemment à propos des microformats et de démontrer quelques visualisations intéressantes ansi que des mash-ups de contenus microformatés. Si vous êtes à peu à l'aise avec les fondamentaux et l'historique des microformats, je vous suggère tout d'abord de lire ces articles, avant d'aller plus loin :

Bien. Maintenant que vous savez que les formats existent et ce qu'ils peuvent faire,je veux vous aider à acclimater vos yeux pour repérer les microformats.

Repérage de Microformats

Avec un peu de pratique, vous commencerez par repérer partout de la donnée microformatable. La donnée microformatable n'est pas seulement du texte structuré dans les pieds de page ou une liste dans une barre latérale. Elle peut facilement s'appliquer à du texte en prose, directement dans le flux du document. Chaque fois que nous lisons quelque chose, nos cerveaux trient et donnent de la structure au contenu - nous ne le réalisons tout simplement pas. Ceci parce que les humains sont intelligents ; nous sommes programmés pour trouver des patterns et ordonner le chaos. Les machines d'un autre côté, ne sont pas si bonnes pour faire ces choses, aussi elles ont besoin de quelque aide explicite. Ajouter des microformats au contenu structuré est génial, mais ajouter des microformats à du contenu non structuré est même mieux. Ceci ajoute de la valeur là où la machine n'a pas pu extraire de la valeur. Par exemple, prenons l'extrait de texte suivant tiré de la page Wikipedia traitant d'Informatique, lisons-la et voyons combien nous pouvons en détecter.


En 1957 le chercheur informatique allemand Karl Steinbuch inventait 
le mot Informatik en publiant un article appelé Informatik :
Automatische Informationsverarbeitung 
(à savoir "Informatics : automatic information processing"). 
Le terme anglais Informatics est communément mal interprété
pour être la même chose que science informatique. Mais Informatics
est théoriquement orienté contrairement aux sciences informatiques et
par conséquent plus orienté vers les mathématiques que les sciences informatiques.
Le terme français Informatique fût inventé en 1962 par 
Philippe Dreyfus avec différentes traductions d'informatics (anglais), 
aussi proposé indépendamment et simultanément par Walter F.Bauer 
qui a co-fondé la société dénommée Informatics General Inc., 
et informatica (italien, espagnol, portugais), 
pour faire référence à l'application des ordinateurs 
pour stocker et traiter l'information.

Les avez-vous tous détectés ? Jetons un oeil à nouveau à ces paragraphes - cette fois-ci je pointerai et baliserai quelques-uns des microformats.


<p class="vcard vevent">
<span class="description">en    
<span class="dtstart">1957</span>
le chercheur informatique allemand
<span class="fn">Karl Steinbuch</span>
inventait le mot Informatik en publiant un article appelé Informatik :
<span class="summary" lang="de">Informatik: Automatische Informationsverarbeitung</span>
(à savoir "Informatics: automatic information processing")</span>
Le terme anglais Informatics est communément mal interprété
pour être la même chose que science informatique. Mais Informatics 
est théoriquement orienté contrairement aux sciences informatiques et 
par conséquent plus orienté vers les mathématiques que les sciences informatiques.</p>

<p class="vevent">
  <span class="description vcard">
    Le terme français 
    <span class="summary">informatique fût inventé</span> en
    <span class="dtstart">1962</span> par 
    <span class="fn">Philippe Dreyfus</span>
    avec différentes traductions d'informatics (anglais)
    </span>
    , aussi proposé indépendamment et simultanément par
    <span class="vcard">
    <span class="fn">Walter F.Bauer</span>
    qui a co-fondé la société dénommée 
    <span class="org">Informatics General Inc.</span>
    </span>, et informatica ((italien, espagnol, portugais), 
    pour faire référence à l'application des ordinateurs pour stocker et traiter l'information.
</p>

Dans ces deux paragraphes, il y a au moins deux événements et trois personnes. Regardez comment quelques-unes des données se chevauchent et sont sous forme libre. Parfois les propriétés des microformats ne sont pas dans l'ordre que vous pourriez attendre ou il existe quelque distance entre les valeurs. Si vous regardez de plus près ce que j'ai balisé, vous remarquerez que nous avons donné de la structure aux deux évènements dans le passé. Le microformat hCalendar n'est pas uniquement conçu pour les évènements à venir - il peut être utilisé pour marquer n'importe quel évènement. Vous pourriez vous dire "C'est génial, j'ai simplement ajouté des microformats, mais qui se soucie de savoir en quelle année ces termes ont été inventés ? Je ne vais probablement pas ajouter 1957 et 1962 dans Outlook comme je le ferais pour ma réunion de demain !"

C'est vrai - vous n'allez probablement pas synchroniser cette donnée avec votre terminal mobile et regarder les évènements survenus il y a plus de 40 ans, aussi quel est l'objectif de baliser cela avec des microformats ? Est-ce juste du balisage pour la recherche de balisage ? Certainement non ! En ajoutant ce petit morceau de "sucre sémantique" à votre HTML, nous pouvons commencer par afficher la même donnée avec toute une diversité de manières et la faire pivoter sur beaucoup d'axes différents. En agrégation, nous pouvons commencer à regarder tous les évènements enregistrés qui sont survenus durant ces années.

A ce jour, la visualisation la plus commune des données hCalendar a été de convertir le HTML vers un fichier .ics et de l'importer dans votre application de calendrier. Ceci vous permet d'interagir avec l'évènement dans votre routine quotidienne, mais nous pouvons faire bien plus encore avec la donnée. Les évènements qui ont des chronodatages peuvent être facilement placés sur une ligne de temps pour aider à visualiser la donnée. Ainsi, nous pouvons prendre l'exemple précédent tiré de Wikipedia et extraire les dates pour les placer dans une ligne de temps sans avoir à écrire une seule ligne de code.

Visualisations Ligne de Temps

Le projet SIMILE du W3C a une application JavaScript de ligne de temps, qui est facilement embarquable dans le HTML, tout comme le sont les widgets populaires de cartographie en Javascript. En JavaScript, vous spécifiez les points de données, les étiquettes et quelques autres propriétés, puis elles sont joliment placées pour vous sur la timeline. La belle chose concernant cette application de ligne de temps JavaScript est qu'elle accepte aussi un pointeur vers un fichier XML comme input. Ceci vous permet de pointer vers une page qui a été microformatée avec hCalendar pour la placer sur la ligne de temps. Regardons à nouveau le morceau extrait de Wikipedia, et voyons comment nous pouvons prendre la page microformatée, la convertir en XML et l'envoyer pour affichage à l'application de ligne de temps. Toutes ces étapes sont produites en utilisant des services web, aussi vous n'avez absolument rien à coder. Le résultat final devrait ressembler à ce qui est présenté en Figure 1.

L'article Wikipedia représenté sur la ligne de temps

Figure 1 : L'article Wikipedia représenté sur la ligne de temps

Convertir la donnée

Il existe quelques sites qui offrent des services pour convertir hCalendar vers le XML requis pour l'application JavaScript Timeline.

Ces deux services web vous permettent de prendre un hCalendar et de le transformer en différents formats. Maintenant vous pouvez commencer par visualiser la même donnée d'évènement de différentes manières que ce que voulait l'auteur original. C'est uniquement possible avec l'aide de sémantique supplémentaire que fournissent les microformats. Si le HTML n'avait pas d'information sémantique, il serait presque impossible pour une machine d'extraire correctement les données et le texte associés, pour savoir quels types d'information. En ajoutant des microformats, l'auteur original ouvre les portes à beaucoup de possibilités de mashups. Prendre la donnée et la recombiner, la remixer et la réafficher avec des façons que l'auteur n'avait jamais voulu ou même pas pensé ! En ajoutant une giclée de sémantique au HTML, la donnée devient plus valable.

Tout ce qui a une date peut être un candidat pour une cartographie vers une ligne de temps. L'enfant web 2.0 poster Twitter est un outil qui pourrait tirer avantage à être cartographié sur une ligne de temps. Quand vous jetez un oeil à un fil d'ami sur twitter, vous voyez tous les billets en ordre inversé consécutif. Chaque entrée a un timbre chronodaté qui peut être placé sur une ligne de temps. Vous pouvez commencer par voir les choses qui n'étaient pas visibles sous une simple liste. Les tendances émergent, telles que les envois de billets plus ou moins fréquents durant les week-ends et soirées. Ces nouvelles alternatives de visualisation présentent quelques réponses, mais mènent plus souvent à quelques questions. Ce fossé géant sur ma ligne de temps d'amis où il n'y avait absolument aucun billet - que s'est-il passé là ? Étaient-ils occupés, en vacances ou peut être autre chose ? Vous pouvez commencer à faire de l'analyse statistique et recevoir le nombre moyen d'heures entre les posts et prédire quand le prochain billet apparaîtra. La Figure 2 montre quelques données twitter placées sur l'application ligne de temps Javascript.

données Twitter sur la ligne de temps

Figure 2 : Les données Twitter placées sur l'application Timeline JavaScript.

Visualisation de Graphe

XFN est un microformat qui définit les relations entre vous et une autre personne. XFN définit plusieurs types de liens, en partant de l'ami et du collègue jusqu'aù co-travailleur et à l'épouse. Nous pouvons crawler tous ces liens en profondeur et grapher les relations. Le service de visualisation many eyes d'IBM (voir Figure 3) nous permet de faire ça simplement.

Une carte de liens XFN

Figure 3 : Les liens XFN de tantek.com représentés sur un crawl de profondeur de 3, avec Brian Suda surligné

L'exemple ci-dessus prend tantek.com et balaye le site sur les liens XFN. Ce sont des liens vers les amis de Tantek. Il troue les liens marqués avec XFN et il les suit là où il continue à chercher plus de liens XFN sur chaque site successif. Il fait cela à une profondeur de 3 et créer un graphe de noeuds, qui sont des URLs, et des bords qui sont les liens XFN entre les nœuds. Plutôt que de voir une liste de liens sur une page HTML, vous pouvez désormais commencer à les visualiser sous forme de graphe. Vous pouvez voir combien de liens entrants et sortants il y a sur chaque site. Plus il y a de connexions entrantes et sortantes sur un noeud, plus la personne a des liens. En suivant les liens, vous pouvez commencer à vous connecter vous-même à quelqu'un d'autre sur le graphe à travers les URLs d'autres personnes. Est-il possible de créer votre propre jeu de Kevin Bacon avec les technophiles et les blogueurs de la A-list. Combien d'étapes y'a t-il entre Bill Gates et moi-même ?

Visualisations de Cartes

La BBC a fait tourner un mini-site autour d'un voyage en bateau appelé Le Voyage sur la Rivière du Bangladesh. Ce site web est plein de Microformats, y compris le microformat geo, qui est un moyen de marquer les endroits avec une latitude et une longitude, en ajoutant de la sémantique pour lever toute ambigüité sur d'autres endroits avec les mêmes noms ou noms similaires. Vous pouvez ensuite prendre cette donnée geo et l'extraire en utilisant un service web, ou la barre d'outils Operator pour Firefox.

En utilisant un service comme http://suda.co.uk/projects/microformats/geo/ il est possible de converit la page HTML en un fichier KML ou GeoRSS. Ceci est génial, mais vous pourriez vous demander "à quoi peuvent bien servir ces fichiers ?" Une chose que vous pouvez faire est importer un fichier KML à l'intérieur d'une Google maps - sur la page maps.google.com, vous pouvez saisir l'URL d'un fichier KML et Google Maps le parsera et le placera sur la carte.

Vous pouvez prendre la page originale BBC (http://www.bbc.co.uk/worldservice/bangladeshboat/) et la passer à l'intérieur de mon service web geo. Faire ainsi créer l'URL suivante plus longue, qui est un lien vers le fichier résultant KML - http://suda.co.uk/projects/microformats/geo/get-geo.php?type=kml&uri=http://www.bbc.co.uk/worldservice/bangladeshboat/

Désormais, vous pouvez aller sur maps.google.com, coller cette URL dans la boîte de recherche, et presser sur le bouton entrée/retour. Si tout se passe bien, vous devriez avoir une URL comme ceci :

http://maps.google.com/maps?f=q&hl=en&geocode=&time=&date=&ttype=&q=http:%2F%2Fsuda.co.uk%2Fprojects%2Fmicroformats%2Fgeo%2Fget-geo.php%3Ftype%3Dkml%26uri%3Dhttp:%2F%2Fwww.bbc.co.uk%2Fworldservice%2Fbangladeshboat%2F&ie=UTF8&ll=22.973567,90.351563&spn=2.098716,3.735352&t=p&z=8&om=1

Votre sortie d'écran devrait maintenant ressembler à quelque chose comme la Figure 4.

données geo provenant de la page web BBC affichée dans Google Maps

Figure 4 : La page BBC marquée avec le microformat geo et affichée dans Google Maps

En utilisant des techniques comme ça, vous pouvez commencer à visualiser du contenu geo d'une façon plus spatiale. Vous pouvez voir que Dacca est vraiment loin de Daulatpur, mais quand vous lisez dans le texte, vous n'aurez pas de sens de l'échelle. Le geo pour cartographier des visualisations fournit encore une autre façon de visualiser le contenu microformaté en dehors de la boîte qui lui était initialement destiné.

Résumé

Au fur et à mesure que vous développez des sites et du contenu pour les sites, vous commencerez à entraîner votre oeil aux microformats et commencerez à en voir partout. Du fait qu'il y ait de plus en plus de contenu microformaté, vous pouvez commencer à visualiser et représenter la donnée de différentes façons. Avec tous ces exemples, vous avez une plus ample compréhension de la donnée en partant du contexte des visualisations. Ces visualisations alternatives des données ne sont seulement possibles que si vous ajoutez plus de sens sémantique à l'intérieur du HTML. Ceci permet à d'autres personnes d'ajouter plus de valeur à vos produits en présentant de nouvelles manières de regarder et percevoir l'information - tout cela pour un coût réduit à quelques minutes de développement pour encoder quelques microformats. Il y a beaucoup de ressources sur le web pour vous aider à démarrer, y compris une anti-sèche, des plugins Dreamweaver et plusieurs outils basés sur le web pour vous aider à créer automatiquement des microformats.

Les auteurs originaux de Twitter n'ont probablement jamais pensé à placer vos billets twitter sur une timeline, tout comme quelqu'un d'autre qui lit cet article pensera probablement à une autre visualisation que je n'ai jamais imaginée. Vous pourriez être le seul à recevoir d'autres personnes pensant de façon différente en transformant cette donnée grâce à l'utilisation des microformats. Dans les articles à venir, j'explorerai plus en profondeur les Mashups sur les microformats individuels.


MicroFormats DossierTraduction

Define external redirect: OddMuse

EditNearLinks: AlexSchroeder