filyb.info - Tag - Mise à jour

Les microformats – Et pour les utilisateurs ?

Thesa — Sat, 05 Jan 2008 14:43:00 +0100

Après la présentation des microformats, et les explication sur leur insertion dans vos pages webw, le dernier billet de cette série sur les microformats a pour but d'expliquer, du point de vue des utilisateurs, comment utiliser ces microformats.

Puisque ceux-ci sont inséré dans des pages web, leur interprétation devra être faite par les navigateurs web. À ce niveau, les différents navigateurs ont différent stades d'implémentations :

Pour Windows Internet Explorer, il existerait des extensions permettant de gérer les microformats. Je ne les ai pas testées, et vous encourage de toute façon à utiliser un autre navigateur web que celui-ci. À noter que Microsoft envisagerait d'intégrer un support des microformats dans IE 8.
Opera n'a, a ma connaissance, aucun support des microformats (s'il y en a un, merci de me le signaler).
Safari disposerait de plugins pour lui ajouter le support des microformats. Je ne les ai pas testés.
Konqueror inclut dans ses dernières version le support du microformat hCard. Si vous naviguez sur une page contenant du code hCard, un petit bouton micro apparaît en bas à droite de la fenêtre, et propose un menu pour ajouter les différentes cartes au carnet d'adresse. Voir une capture d'écran de Konqueror en action.
Et pour finir, Mozilla Firefox possède plusieurs extensions pour gérer les microformats, dont la plus intéressante est Operator (la télécharger chez Mozilla addons), développée par Michael Kaply des Mozilla Labs. Cette extension préfigure le support des microformats qui devrait être inclus dans Mozilla Firefox 3.

Operator en détails

Cette extension a un double intérêt : d'une part elle propose différentes interfaces utilisateur, d'autre part elle est elle-même extensible pour pouvoir supporter divers microformats et actions associées.

Barre d'outil, menu contextuel ou menu global ?

Les trois interfaces utilisateur sont les suivantes :

La barre d'outil Operator, qui propose une barre supplémentaire dans l'interface de Mozilla Firefox (Affichage > Barres d'outils > Barre d'outils d'Operator pour l'afficher si elle ne l'est pas).
Le menu contextuel agrémenté des actions d'Operator, lors d'un clique sur un élément contenant un microformat.
Le menu général d'Operator, accessible soit par une icône dans la barre d'état, soit par la même icône dans la barre d'adresse (position qui sera probablement retenue pour Mozilla Firefox 3).

De plus, il est possible de choisir la façon dont sont classées les informations (quelque soit l'interface utilisée). Dans les captures précédentes, les actions sont classées en fonction des données (Type de donnée, puis une donnée spécifique, puis les actions disponibles sur cette donnée). On peut choisir, dans les options d'Operator, de classer par action. Voici ce que devient dans ce cas le menu principal :

Étendre l'extension

L'un des gros avantages d'Operator, c'est qu'il se content d'être un outil générique d'accès aux microformats, et qu'il est potentiellement utilisable pour réaliser n'importe quelle action pour n'importe quel microformat. Il suffit d'ajouter l'action ou le microformat par le biais d'un script utilisateur. Un ensemble de script est dors et déjà disponible.

Utilité

Les cas d'utilisation simples et utiles sont nombreux : ajouter les coordonnées d'une personne à son carnet d'adresse, un évènement à son agenda, ou localiser un lieu sur une carte. Par exemple, en utilisant le fait que de nombreuses photos de Flickr sont géo-localisées, on peut :

Se rendre sur la page d'une photo ;
Se demander où puis-je aller pour voir cela ? et demander à Operator la réponse :
Et voir le lieu sur Google Maps :

D'autres possibilités sont montrées en image et en anglais sur la page Operator des Mozilla Labs.

Les interfaces utilisateur des microformats n'en sont qu'à leurs prémices. Leur intégration dans la prochaine génération des navigateurs web (Mozilla Firefox 3, Windows Internet Explorer 8) va probablement leur donner une bien plus grande visibilité et importance. On peut imaginer que bientôt, les logiciels ou services web pour directement s'ajouter à Operator (ou similaire), lors de leur installation ou lors de l'inscription d'un utilisateur au service.

Et même, on pourrait imaginer d'autres services plus différents, un portail des tags, par exemple, qui indexerait les mots-clefs, et proposerait pour chacun les pages, billets de blog, photos, etc en relation, ou portail des évènements, voir même un moteur de recherche des carnets d'adresses, un réseau social décentralisé basé sur XFN. Toutes les possibilités sont ouvertes.

Les microformats – Comment les utiliser ?

Thesa — Fri, 04 Jan 2008 15:56:00 +0100

Nous avons vu précédemment l'utilité des microformats. Après la théorie, passons à la pratique : comment baliser les informations d'un site web en utilisant des microformats ?

Mais où est la doc ?

Les microformats, pour micro qu'ils soient, restent des formats. Leurs spécifications sont discutées, et passent par divers stades de brouillon avant d'être considérées comme des standards. Jouant le jeux du web, la définition de la plupart des microformats est ouverte, et centralisée sur un site, microformats.org, qui fonctionne sous forme de wiki, et dont la section francophone est la plus importante des sections non-anglophones.

Ainsi, on trouve référencés sur ce site les différentes spécifications de microformats, ainsi que des liens vers ceux qui ont étés développés autre part. La démarche de création des microformats tente d'être la plus constructive possible, en réutilisant des formats existants par ailleurs (par exemple le format vCard pour les données concernant une personne ou une organisation), en construisant les différents microformats suivant des règles de balisage similaires, et en incluant des microformats les uns dans les autres.

Je vais maintenant présenter brièvement quelques microformats que je trouve utile. Rappelez-vous cependant que la spécification (dont le lien sera donné) reste le document de référence, et peut être amené à évoluer dans un sens incompatible avec mes exemples.

Marquer un mot-clef, une licence ou une page d'accueil

Je commence par ces trois microformats, et je les mets ensembles, parce qu'ils sont simples et assez similaires. Tous trois s'utilisent en donnant un attribut particulier à l'attribut rel d'un lien.

Pour définir un lien comme représentant un mot-clef attaché à la page actuelle, utilisez le microformat rel-tag. La page actuelle a le tag Microformats, qui est signalé (avant ou après le contenu) par un lien <a href="http://filyb.info/tag/Microformats" rel="tag">Microformats</a>. Attention : cela signifie que le tag concerne la page actuelle, et non que l'adresse du lien concerne une page de mots-clefs. Ainsi, la liste de mots-clefs sur la gauche ne possède pas cet attribut, car elle n'est pas en rapport avec le contenu de la page.
Pour associer une licence à la page actuelle, utilisez le microformat rel-license. Par exemple, en bas de la page actuelle se trouve lien suivant : <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/fr/" hreflang="fr" title="Résumé de la licence"><acronym title="Creative Commons Paternité-Partage des Conditions Initiales à l'Identique 2.0 France">CC-BY-SA France 2.0</acronym></a>.. Notez que si plusieurs liens de ce type se trouvent sur une même page, cette page est considérée comment étant sous les termes de toutes les licences considérées.
Sur bien des sites, il y a un lien vers la page d'accueil, mis en évidence. Afin de faire comprendre aux navigateurs web quel est ce lien, utilisez le microformat rel-home (attention : cette spécification n'est encore qu'à un stade de brouillon). Ainsi, sur cette page, vous pouvez trouver le lien : <a href="http://filyb.info/" rel="home" accesskey="1">filyb</a>.

Marquer un passage concernant une personne

L'un des microformats les plus intéressant est le microformat hCard, qui correspond à la transposition en XHTML du format vCard (RFC2426). On en trouve de nombreux exemples sur ce site.

Les auteurs des commentaires sont balisés de la sorte : <span class="vcard"><a href="http://devloop.lyua.org/blog/" class="fn url">World Domination</a></span>.

Ma page contact contient le code suivant :

<div id="hcard-Florian-Birée" class="vcard">
    <a class="url fn" rel="me" href="http://florian.biree.name/">Florian Birée</a>
    <ul>
        <li>Adresse e-mail : <a class="email" href="mailto:florian@biree.name">florian@biree.name</a></li>
        <li>Identifiant Jabber : <a class="url" href="xmpp:florian.biree@jabber.fr">florian.biree@jabber.fr</a></li>
        <li>Identifiant <acronym title="Session Initiation Protocol">SIP</acronym> : <a class="url" href="sip:florian.biree@ekiga.net">florian.biree@ekiga.net</a></li>
        <li>Ma <a class="url" href="http://filyb.info/public/florian.biree-pgp-public-key.asc" type="application/pgp-keys">clef <acronym title="GNU Privacy Guard">GPG</acronym></a></li>
        <li><span class="tel"><span class="type">Fax</span> : <span class="value">+33 9 59 46 58 03</span></span></li>
        <li>Mon carnet web : <a class="url" rel="me" href="http://filyb.info" hreflang="fr">filyb.info</a></li>
    </ul>
</div>

Vous remarquerez que ce microformat permet de baliser assez précisément les données de contact, et ainsi de permettre de générer à la volée des fiches de carnet d'adresse. À mon sens la plus grosse lacune du format vCard (lacune qui est reportée sur hCard) est le manque de standard pour les identifiant de messagerie instantanée. J'ai respecté le conseil à propos des Nouveaux types d'information de contact qui préconise d'utiliser des liens avec des protocoles particuliers (et plus ou moins standards). Mais cette méthode n'est pas la seule, par exemple KAdressBook utiliser une propriété propriétaire pour cela.

Comme hCard fait partie des microformats les plus utilisés, un hCard creator a été créé. Mais pour l'avoir testé, je préfère m'en passer pour avoir du code (un peu) moins lourd, et plus fin.

Marquer un évènement

Un autre microformat dont l'utilité est immédiate est le microformat hCalendar, qui correspond à la transposition en XHTML du format iCalendar (RFC2445). Le billet précédent, Dédicace des Trois soleils de Sermelarande à Saint Sulpice en est un exemple.

Voici le code :

 <div id="hcalendar-Dédicace-des-Trois-soleils-de-Sermelarande" class="vevent">
 <a href="http://biblio.ismalaris.org/publications/les-trois-soleils-de-sermelarande/#Dedicace-StSulpice" hreflang="fr" title="Site de la Grande Bibliothèque d'IsmalariS" class="url">
  <abbr title="20080112T1500+0100" class="dtstart">12 janvier 2008, 15h</abbr>–<abbr title="20080112T1730+0100" class="dtend">17h30</abbr> – <span class="summary">Dédicace des <cite>Trois soleils de Sermelarande</cite></span>– à la <span class="location">Librairie du Grand Rond, Saint Sulpice (81370)</span>
 </a>

 <div class="description">
  <p>Je dédicacerai <a href="http://biblio.ismalaris.org/publications/les-trois-soleils-de-sermelarande/" hreflang="fr" title="Page sur le site de la bibliothèque d'IsmalariS"><cite>Les trois soleils de Sermelarande</cite></a> le samedi 12 janvier à la Librairie du Grand Rond, à Saint Sulpice (Tarn, 30<acronym title="Kilomètres">km</acronym> de Toulouse en direction d'Albi).</p>
  <p>Venez nombreux !</p>
 </div>
</div>

Vu que c'est pas toujours drôle de tout faire à la main, comme pour hCard, il existe un générateur de code hCalendar. Comme le précédent, je ne le trouve pas très pratique, il faut adapter le code fourni a ses besoins.

L'utilité de ce microformat est multiple : autant pour le visiteur, qui peut ajouter en un clique un tel évènement à son logiciel d'agenda, autant pour un service qui pourrait agréger les évènements, un peu à la manière de Google, et fournir un moteur de recherche / agenda décentralisé.

Les critiques

Il existe même un brouillon de microformat pour les critiques (de ce que vous voulez). Il s'agit du microformat hReview. Je l'utilise depuis quelques temps pour mes billets Lectures. Exemple avec Rédemption 4 – Les Rives de l'infini :

<div class="hreview" id="hreview-les-rives-de-linfini">
 <span class="type" style="display: none;">product</span>
 <span class="version" style="display: none;">0.3</span>

 <a href="http://www.noosfere.org/icarus/livres/niourf.asp?numlivre=7252" hreflang="fr" title="Page noosfere des Rives de l'infini" class="image">
  <img alt="Couverture des Rives de l'infini" src="http://www.noosfere.org/images/couv/j/jl4858-1998.jpg" class="photo left" />
 </a>

 <p class="little-text">Critique établie le <abbr class="dtreviewed" title="20080103T2231++0100">3 janvier 2008</abbr> par <span class="reviewer vcard"><a href="http://florian.biree.name/" hreflang="fr" title="Site web de Thesa alias Florian Birée" class="fn url">Thesa</a></span>.</p>

 <p class="item"><a class="fn url" href="URN:ISBN:2-290-04858-5">Les Rives de l'infini</a> est un roman [...]
 Ici, on donne des informations factuelles sur l'objet. Pour un livre, son titre, son auteur, etc.
 </p>

 <blockquote class="description">
  <p>Et ici, on place la critique en tant que telle.</p>
 </blockquote>
</div>

Et comme pour les autres, il existe un créateur de code hReview. Cependant, j'insiste sur le fait que hReview n'est qu'au stade de brouillon, donc que la spécification est susceptible de changer.

Les sites des copains

Pour finir, un dernier microformat, plus ancien que les autres, et plus utilisé : XFN. Ce microformat est un peu à part, et ses spécifications ne sont pas hébergées sur microformats.org.

Il permet de préciser les relations existant entre la personne propriétaire de la page où se trouve le code, et celle propriétaire de la page vers laquelle pointe un lien. Il suffit d'ajouter des mots-clefs à la propriété rel d'un lien.

De nombreuses possibilités existent, je vous laisse les tester avec le générateur de code XFN, qui, une fois n'est pas coutume, est simple et pratique.

Les utilisateurs de DotClear noteront que celui-ci inclus la possiblité d'ajouter directement des relationsXFN dans les lien de la Blogroll.

Voici pour ajourd'hui. Cette liste n'est bien sûr pas exhaustive, mais ce sont les microformats qui m'ont semblé les plus utiles. La prochaine fois, nous verront comment l'utilisateur peut-il exploiter ces microformats.

DNS de *.biree.name

Thesa — Wed, 19 Sep 2007 18:27:00 +0200

Je vais bricoler les DNS des sites en biree.name (biree.name et florian.biree.name).

Donc si ces sites sont inaccessibles, vous saurez d'où ça vient .

Vu que mon adresse mail est aussi sur ce domaine, il est possible qu'elle soit impactée.

Les microformats – Présentation

Thesa — Sun, 16 Sep 2007 19:16:00 +0200

Nouveau billet de ma très irrégulière série sur la mise à jour de ce site, voici quelques lignes consacrées aux microformats.

Que sont les microformats ? Le web sémantique, bien sûr !

La publication d'informations sur le web a toujours eu un but : que ces informations soient lues. Jusque là, je ne vous apprend rien. Mais lues par qui ? Autant pour vous que pour une grande partie des créateurs de contenu du web, la réponse est, là encore, évidente : aux internautes, cette masse humaine qui vient s'écorcher les yeux devant des pages telles que l'actuelle. Soit. Admettons. Et visitons justement des pages web.

Nous sommes actuellement sur ce carnet web. Le sujet nous intéresse ? Nous souhaitons en discuter avec l'auteur. Sur la gauche de la page se trouve un lien me contacter. Nous cliquons dessus, et arrivons sur une page qui résume les coordonnées de l'auteur, et donne différentes explications sur la façon de le contacter. Consciencieusement, nous remplissons une fiche de notre carnet d'adresse, nous copions-collons le nom, le prénom, l'adresse mail, l'adresse jabber, l'adresse du site web, du carnet web, du flux de syndication. Nous enregistrons, et nous revenons sur la page précédente.

Toujours intéressé, nous souhaitons avoir plus de renseignements sur le sujet. Le carnet web propose certes un système de tags, mais il ne lie que d'autres billets du même carnet. Comment avoir d'autres avis sur la question ? On peut copier-coller un mot-clef, et faire une recherche dans un moteur de recherche. Ou dans un site particulier (del.icio.us, flickr, etc).

Tout cela est très intéressant. En tant que lecteurs, nous avons parcouru des pages web dans lesquelles certaines informations nous en semblées avoir un intérêt particulier. Les coordonnées sur la page de contact. Les mots-clefs d'un billet. Sur ces informations, nous avons effectué des actions qui sont courantes. Tout de suite, nous pensons : l'ordinateur n'est-il pas une création de l'homme destinée à réduire sa servitude vis-à-vis des tâches ingrates et répétitives ? ou plus prosaïquement : cela ne pourrait-il pas être automatique ?.

Pour que l'on puisse en un clic ajouter les coordonnées de quelqu'un dans notre carnet d'adresse, à partir des informations de son site web, ou que l'on puisse aller voir du contenu relatif à un mot-clef, il faut que notre ordinateur soit capable de comprendre le sens que portent ces informations. Il faut qu'il puisse reconnaître des coordonnées comme telles, ou qu'il sache que certains mots sont des mots-clefs qui définissent le sujet de la page actuelle.

Voici le rôle des microformats. Leur but est d'ajouter du sens au contenu. Ce n'est pas la seuls manière de proposer du contenu sémantique, mais les microformats ont ceci d'intéressant qu'ils sont basé sur un balisage particulier en XHTML. Ainsi, le contenu lisible par les humains est le même que celui lisible par les ordinateurs.

Lors ~~de notre~~ d'une prochaine entrevue, nous verrons quelles sont les informations qui peuvent être sémantisées à l'aide des microformats, et comment le faire (avec, toujours comme exemple, ce carnet web – il faut bien qu'il y ait un rapport avec cette mise à jour).

À propos de la mise à jour – le nouveau thème

Thesa — Wed, 22 Aug 2007 14:40:00 +0200

Comme promis lors de la mise à jour, voici le premier billet d'une série à propos de celle-ci. Pour commencer, parlons un peu du nouveau thème.

Ce thème, nommé 2, filyb street, est basé sur un détail de l'image Berlin - Potsdamer Platz - um 1900 (domaine public). D'ailleurs, si vous cherchez des images sous licence libre ou dans le domaine public, pensez à Wikimedia Commons. Les couleurs ont été choisies pour donner un aspect chaleureux et estival (mais certes pas inspiré par la grisaille de l'été 2007). Les petits icônes dont le site est parsemé proviennent du formidable set Silk de famfamfam (licence CC-BY 2.5), ou du projet Pidgin (GPL 2).

Le thème est à structure liquide, ce qui signifie qu'il devrait s'adapter à n'importe quelle taille de fenêtre, ou taille de police. La résolution minimale pour que ça reste lisible est en 800x600, même si une résolution supérieure apporte un meilleur confort de lecture.

Le site est conforme aux recommandations du W3C telles que le XHTMl 1.0 strict et les feuilles de styles CSS 2. Ainsi, le contenu est strictement séparé de la mise en page, afin qu'il soit accessible indépendamment du matériel et des logiciels utilisés.

Ce site web peut donc être consulté dans un navigateur texte (tel que ELinks ou Lynx), ou dans des navigateurs graphiques, de façon complète pour les navigateurs dits modernes (Mozilla Firefox, Konqueror, Epiphany, Safari ou Opera) et de façon plus sobre dans les navigateurs obsolètes tels que Microsoft Internet Explorer 6 ou Windows Internet Explorer 7. Voici un aperçu de l'affichage du site dans divers navigateurs, assorti de commentaires :

Mozilla Firefox 2.0.0.6 (Moteur d'affichage : Gecko 1.8.1.6) : aucun problème, affichage optimal.
Epiphany 2.18.1 (Moteur d'affichage : Gecko 1.8) : aucun problème, affichage optimal.
Konqueror 3.5.7 (Moteur d'affichage : KHTML) : Konqueror pose problème pour les guillemets des citations, et possède un bug dans la gestion de la propriété CSS content. Ce dernier bug a été contourné, et l'affichage ne pose donc problème que pour les citations. Pour plus de détails, voir plus bas.
Opera 9.23 (Moteur d'affichage : Presto) : le seul soucis d'Opera est un léger cafouillage au niveau des citations imbriquées à 3 niveaux (voir plus bas). Le reste ne pose aucun problème.
Microsoft Internet Explorer 6 (Moteur d'affichage : Trident) : la mise en page est correcte, le contenu est bien affiché, mais de nombreux détails ne sont pas présents (les guillemets des citations, les icônes décorant les liens, les informations sur la langue d'un lien). Mieux vaut utiliser un navigateur plus performant. (La capture d'écran ci-contre ne montre pas l'affichage réel de Microsoft Internet Explorer 6, il manque certaines images comme celle du coin en haut à gauche. C'est dû à mon installation de Microsoft Internet Explorer sous WINE.
Windows Internet Explorer 7 (Moteur d'affichage : Trident) : idem que Microsoft Internet Explorer 6, les progrès du logiciel sont très peu visibles sur mon site.

Au cours de la réalisation de ce thème, j'ai trouvé deux problèmes dans certains navigateurs modernes (je ne parlerai pas des autres, ils sont obsolètes, changez-en). Voici quelques détails :

La propriété CSS content

J'utilise cette propriété pour afficher des images ou texte autour de certains liens, pour spécifier un de leurs particularité, comme le fait qu'ils pointent vers une adresse mail, ou qu'ils sont des liens externes. J'ai donc écrit ce code dans ma feuille de style :

a[href^="http"]:after {content:"\0000a0"url(img/external.png);}
a[href*="filyb.info"]:after {content:"";}

La première ligne ajoute une image de lien externe après un lien commençant par http (ce qui exclu les liens relatifs). Mais pour que cette image soit placée uniquement sur les liens externes, il faut aussi l'enlever sur les liens commençant par http://filyb.info. J'ai donc mis un contenu vide (content:"") à la place de l'image.

Le problème est que Konqueror 3.5.7 affiche un rectangle style caractère absent de la police dans ce dernier cas. Une solution est de remplacer content:"" par content:none. Ça marche... mais uniquement dans Konqueror. Cette propriété est ignorée par Mozilla Firefox. D'après la recommandation CSS 2, le comportement correct est celui de Mozilla Firefox (la recommandation ne parle pas de la valeur none pour content, cependant le validateur CSS l'accepte.

La solution : utiliser les deux. Ça donne : {content:""; content:none}. Cela fonctionne parfaitement dans Mozilla Firefox, Konqueror et Opera. Dans Internet Explorer 6 et 7, il n'y a rien d'affiché, le problème ne se pose pas.

Les styles de citations et les citations imbriquées

Il existe deux types de guillemets pour les citations imbriquées. Les guillemets de premier niveau (français : « et », anglais : “ et ”) et de second niveau (français : “ et ”, anglais : ` et ´). Pour que les balises <q> les utilisent, il faut utiliser les styles suivants :

q:lang(en) {quotes : "“" "”" "`" "´";}
q:lang(fr) {quotes : "«\0000a0" "\0000a0»" "“" "”";}
q:before{content : open-quote;}
q:after{content : close-quote;}

Le \0000a0 correspond à une espace insécable en unicode.

Ces styles fonctionnent parfaitement sous Mozilla Firefox.

Opera 9.21 a un léger soucis dans le cas où il y a trois niveaux de citations imbriqués, comme dans les citations que vous venez de lire. Opera style correctement la citation de premier niveau, mais ferme celle de second niveau à la balise d'ouverture de celle de troisième niveau, affiche le caractère double-quote (") à la fermeture de celle de troisième niveau, et ferme correctement celle de second niveau.

Konqueror 3.5.7... échoue lamentablement. Il affiche avant les guillemets ouvrant et fermant de premier niveau le caractère Â, et affiche n'importe quoi pour les guillemets de second niveau. Je n'ai pas trouvé de parade.

Les Internet Explorer... n'affichent rien. Pas de marque de citation. Je ne vais pas chercher plus loin, changez de navigateur.

Voilà pour cette première partie. Nous allons ensuite attaquer un gros morceau : les microformats.