J’ai démarré cette série d’articles en détaillant les microformats pour les relations fondées sur les liens en utilisant l’attribut rel dans la 1èrePartie. Puis j’ai poursuivi dans la 2° Partie par une discussion sur l’extension de l’attribut rel avec les valeurs XFN pour connoter les relations sociales sur le web.
XFN et les microformats fondés sur rel sont relativement simples, n’exigeant que l’ajout de l’attribut rel sur les liens (<a>) et la(es) bonne(s) valeurs pour fournir le contexte sémantique.
Il est désormais temps de porter cette discussion sur les microformats à un niveau plus détaillé avec le microformat hCard, qui ajoute de la sémantique et de la structure au contenu web traitant des personnes, organisations, sociétés et lieux.
(Mettez-vous à l’aise, c’est long.)
Origines : vCard
vCard est un standard pour les cartes de visite électroniques, qui sont le plus souvent attachées en pièces jointes aux courriers électroniques sous forme de fichiers avec l’extension “.vcf”. Tout comme les cartes de visite traditionnelles, les vCards contiennent de l’information sur le nom et le contact.
La hCard a été présentée comme un format standard pour permettre aux auteurs du web d’inclure l’information vCard au sein de leurs pages web.
hCard utilise une représentation 1:1 de la vCard. Ce qui veut dire que le contenu web marqué avec le format hCard peut être converti en vCards par les spiders et autres agrégateurs, et peut être utilisé dans n’importe quelle application ou service vCard.
Personnes, Organisations, Sociétés & Lieux
Le microformat hCard représente des personnes, organisations, sociétés et lieux — le plus souvent en termes d’information adresse/contact, y compris mais non limité à :
- Nom formaté/structuré
- Adresse postale/distribution
- Adresse e-mail
- Numéro(s) de téléphone
- Photographie
Parmi toutes les informations qui peuvent être incluses dans hCard, la seule information obligatoire est le nom formaté. Tout le reste est optionnel.
Et hCard, comme tous les microformats, utilise un marquage et des attributs existants pour spécifier cette information adresse/contact, et tout particulièrement différentes valeurs de classe, qui sont renvoyées sous des “propriétés” et “sous-propriétés.”
Une Personne, à Savoir Moi
L’une des premières implémentations hCard sur A Blog Not Limited est pour mon information personnelle de contact sur ma page About :
<div class=”vcard”>
<p class="fn n">
<span class="given-name">Emily</span>
<span class="additional-name">Paige</span>
<span class="family-name">Lewis</span></p>
<p><a class="email"
href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a>
</p>
<p class="adr">
<span class="locality">Albuquerque</span>,
<abbr class="region" title="New Mexico">NM
</abbr>
<span class="postal-code">87106
</span>
<acronym class="country-name" title="United States of America">USA</acronym>
</p>
<p class="nonVisual">
<a href="http://www.ablognotlimited.com" rel="home me" class="url">
A Blog Not Limited</a>
</p>
</div>
La première chose à considérer sur l’exemple ci-dessus est que tout le balisage et le contenu sont contenus dans une <div> déclarée class="vcard".
L’élément contenant pourrait être n’importe quoi (<p>, <ul>, <span>, etc.), tant que cela reste de la syntaxe valide et de préférence sémantique.
Ce qui est essentiel c’est class="vcard".
“Mais le microformat s’appelle hCard … quel rapport avec la propriété vCard ?” me direz vous.
Bon, ceci s’explique par la représentation 1:1 de la vCard. Toutes les propriétés spécifiées hCard (les valeurs class) sont fondées sur les noms des propriétés type vCard.
Acceptez ça et avançons.
Information d’Identité Personnelle
En divisant l’exemple dans ses différentes propriétés, commençons par celles qui m’identifient personnellement, comme mon nom. Vous pouvez constater que mon information de nom est contenue dans <p class="fn n"> :
<p class=”fn n”>
<span class=”given-name”>Emily</span>
<span class=”additional-name”>Paige</span>
<span class=”family-name”>Lewis</span>
</p>
La propriété fn indique que le contenu contenu à l’intérieur est une chaîne correspondant au nom de la personne, comme pourriez le voir sur une plaque nominative. Comme je l’évoquais précédemment, c’est une propriété obligatoire dans le microformat hCard.
La propriété n indique que le contenu à l’intérieur contient les parties du nom d’une personne, comme le prénom, le deuxième prénom et les noms de famille.
Bien que la propriété n soit requise par la spécification, elle peut être implicite (ce qui veut dire, non spécifiée), si le contenu regroupé par la propriété fn fait exactement deux mots. Le wiki Microformats explique en détail cette optimisation implicite.
Il existe quelques autres propriétés d’identification que je pourrais inclure si j’étais encline à faire ainsi :
class="nickname" indique le pseudo/nom de guerre d’une personne, et s’applique à un élément contenant le texte de ce pseudo.class="photo" indique une photo associée à une personne, et s’applique à un élément <img /> faisant référence à l’URL de la photo (via src). Cette propriété pourrait être aussi appliquée à un élément <object> référençant l’URL de la photo via l’attribut data (bien que ce soit pour moi une option non-sémantique).class="bday" indique une date de naissance d’une personne, et s’applique à un élément contenant l’information de date.
Aparté : Les Dates
Je devrais mentionner que quand on arrive à l’information de date, celle-ci est souvent marquée avec de l’information à la fois lisible par les humains et par les machines. Ceci s’appelle le datetime design pattern.
Sans rentrer trop dans les détails (parce que je traiterai cela en profondeur avec microformat hCalendar dans la 4ème partie de cette série), voici un exemple sur la façon dont l’information de date est communément référencée dans les différents microformats :
<abbr class="bday"
title=”1974-09-04″>4 Septembre 1974
</abbr>
>Remarquez que ce qui est contenu par le <abbr> est de l’information-date-lisible-par-les-humains, alors que la valeur title est de l’information de date lisible–par–les–machines.
L’utilisation de l’élément <abbr> pour l’information de date (l’abbr design pattern), a cependant soulevé quelques problématiques d’accessibilité.
Une fois de plus, je traiterai cela plus en détails dans la 4ème partie, mais ce qui a été proposé pour contourner ces problématiques est d’utiliser un élément <span> avec une valeur title plutôt que <abbr>. (Je traiterai aussi des problématiques d’accessibilité plus en détail en conclusion de cette série.)
Sous-Propriétés
Ainsi, pour revenir à l’exemple sur ma page About …
Beaucoup de propriétés hCard ont des sous-propriétés pour fournir encore plus de contenu. Dans mon exemple, je marque le contenu dans <p class="fn n"> avec des <span>s référençant les sous-propriétés :
<p class="fn n">
<span class=”given-name”>Emily</span>
<span class=”additional-name”>Paige</span>
<span class=”family-name”>Lewis</span>
</p>
- Mon premier prénom est indiqué par
class="given-name".
- Mon second prénom est indiqué par
class="additional-name".
- Mon nom de famille est indiqué par le
class="family-name".
Parmi ces trois sous-propriétés, given-name et family-name ne peuvent être seulement utilisées qu’une fois par vcard, alors que la sous-propriété additional-name peut être utilisée plusieurs fois.
Et il existe deux sous-propriétés supplémentaires que j’aurais pu inclure :
class="honorific-prefix" indique les préfixes du nom (par ex. M., Dr.), et qui s’applique à un élément contenant le texte de ce préfixe.class="honorific-suffix" indique les suffixes du nom (par ex. MD, PhD), et s’applique à un élément contenant le texte de ce suffixe.
Comme additional-name, ces deux sous-propriétés peuvent aussi être utilisées plusieurs fois.
E-mail & Téléphone
La prochaine partie de l’exemple est mon adresse e-mail dans <a class="email"> :
<p>
;<a class=”email”
href=”mailto:emily@ablognotlimited.com”>
emily@ablognotlimited.com</a>
</p>
Attribuer la propriété email à mon lien (<a>) indique que la valeur href est mon adresse e-mail. Le contenu regroupé par le <a> pourrait être n’importe quoi. J’ai simplement choisi d’afficher la véritable valeur de mon adresse e-mail.
La propriété email peut être utilisée plusieurs fois. Dans ces cas, la sous-propriété type peut être ajoutée pour savoir quelle adresse parmi les multiples e-mails est la préférée (”pref”):
<p><a class=”email”
href=”mailto:test1@test.com”>
<span class=”type”>pref</span>erred email
</a>
</p>
<p><a class=”email”
href=”mailto:test2@test.com”>alternate email
</a>
</p>
Je pourrais aussi inclure une autre propriété, tel, qui indique un numéro de téléphone d’une personne (via la sous-propriété value). La propriété tel a une sous-propriété type pour indiquer le type de numéro (par exemple home, work, fax) :
<p class=”tel”>
<span class=”type”>Work</span> :
<span class=”value”>555-123-4567</span>
</p>
La sous-propriété type est complètement optionnelle. Si vous avez choisi de l’omettre, la valeur par défaut est “voice.”
La propriété tel peut être utilisée plusieurs fois, comme le peut type. La sous-propriété type peut aussi indiquer “pref” pour afficher si c’est le numéro de téléphone préféré.
<p class=”tel”>
<span class=”type”>Work
</span>(<span class=”type”>pref
</span>erred):
<span class=”value”>555-123-4567
</span>
</p>
<p class=”tel”>
<span class=”type”>Home
</span> :
<span class=”value”>555-789-0123
</span>
</p>
Pour finir, la sous-propriété value peut être implicite. Si un type est spécifié sans qu’aucune value ne soit spécifiée, alors tout autre propriété autre que type dans la propriété tel est considérée comme la value.
Information d’Adresse
La prochaine partie de l’exemple inclut mon adresse regroupée sous un <p class="adr"> :
<p class=”adr”>
<span class=”locality”>Albuquerque</span>,
<abbr class=”region” title=”Nouveau Mexique”>NM</abbr>
<span class=”postal-code”>87106</span>
<acronym class=”country-name” title=”United States of America”>USA</acronym>
</p>
La propriété adr indique les parties d’une adresse, que je décris par des <span>s assignés aux différentes sous-propriétés de l’adresse :
- La ville est indiquée par
class="locality".
- L’état est indiqué par
class="region". Cette sous-propriété pourrait s’utiliser pour les provinces.
- Le code postal est indiqué par
class="postal-code".
- Le pays est indiqué par
class="country-name".
Remarquez que pour mon country-name, j’ai utilisé l’élément <acronym> pour une référence plus courte vers mon pays, avec le nom complet inclus dans le title. J’aurais pu tout aussi bien écrire le nom complet et contourner complètement l’<acronym>e. Juste une question de préférence (même si j’encourage vivement à la concision sémantique).
Pour des détails d’adresses encore plus précis, je pourrais aussi ajouter :
class="street-address" pour mon adresse de rueclass="extended-address" pour ajouter le numéro de mon appartementclass="type" pour indiquer le type d’adresse (par ex. home, work)
Aparté : address
Mais attendez ! Qu’en-est-il de la sémantique ? Pourquoi ne pas utiliser l’élément <address> comme le conteneur principal, plutôt qu’un <p> ?
En fait, jusqu’à ce que j’écrive cet article et fasse la recherche, j’ai découvert que j’utilisais <address> de manière incorrecte depuis des années. J’avais toujours pensé que c’était littéralement pour les adresses physiques, comme dans cet exemple précis.
J’avais tort.
Selon le W3C, l’élément <address> est :
… employer l’élément ADDRESS pour fournir les informations de contact du document ou d’une partie essentielle de celui-ci, comme un formulaire.
Compte tenu de cela, ce n’est tout simplement pas le bon élément à utiliser.
Information sur le Site Web
La dernière partie de mon exemple contient mon URL de blog dans <a class="url"> :
<p class="nonVisual">
<a href="http://www.ablognotlimited.com" rel="home me" class=”url”>
A Blog Not Limited</a>
</p>
La propriété url indique que le lien (<a>) destination (href) se fait vers un site web associé à moi. Bien que je sois en train de référencer mon blog, ceci pourrait être aussi un lien vers mon portfolio design ou toute autre URL m’étant associée.
Quelques trucs à remarquer concernant la dernière partie de l’exemple :
- En restant engagée avec les microformats fondés sur le rel, je me suis aussi assurée d’inclure
rel="home me". Remarquez la facilité de combiner les microformats ?
- Le lien est contenu dans un
<p class="nonVisual">, ce qui est tout simplement un paragraphe auquel j’ai déclaré une classe personnalisée pour supprimer l’affichage de l’information parce que je ne pense pas qu’il soit nécessaire de l’afficher dans cette situation spécifique. Sans tenir compte du fait que cela n’a rien à voir avec le microformat hCard.
Produit Fini
Après cette explication exhaustive du marquage, voici à quoi cela ressemble :
Et du fait que hCard n’utilise que du XHTML standard, elle peut être stylisée de n’importe quelle façon comme il vous plaira.
Si vous n’avez pas déjà compris, j’ai choisi une esthétique plutôt minimaliste, aussi j’en suis arrivée virtuellement à aucun autre stylisme que l’utilisation du class="nonVisual" pour supprimer l’affichage de quelque contenu.
Mais pour voir un exemple de ce que vous pourriez produire, Chris Coyier a récemment posté une Carte de Visite Professionnelle en Microformats, qui utilise le marquage hCard avec une très belle CSS pour imiter une carte de visite traditionnelle imprimée.
Les possibilités ne se limitent qu’à vos talents en CSS.
Ajouter au Carnet d’Adresses ?
Vous voyez dans mon exemple qu’immédiatement après mon contenu hCard, j’offre un lien vers “Ajouter à votre Carnet d’Adresses.” C’est tout simplement un lien vers le fichier vCard qui peut être téléchargé et ajouté à un programme de gestion de carnet d’adresses.
Vous pouvez offrir facilement un lien direct vers le .vcf que vous créerez et maintiendrez sur votre serveur, ou vous pouvez tirer profit du Service Contacts de Technorati.
En utilisant la technologie de Technorati, vous faites simplement précéder l’URL de la page où votre microformats hCard réside avec http://feeds.technorati.com/contacts/, et puis utilisez l’URL résultante comme la valeur href pour votre lien (<a>).
<a
href="http://feeds.technorati.com/contact/http://www.ablognotlimited.com/about/”
title=”Téléchargez la vCard”
>Ajouter au Carnet d’Adresses
</a>
Quand un utilisateur sélectionne ce lien, la vCard est créée dynamiquement et il peut alors la télécharger :
Quelques Règles & Un Rappel
Maintenant que j’en ai terminé avec mon premier exemple de hCard, il est nécessaire de faire remarquer quelques règles :
- Les noms de propriétés et de sous-propriétés sont sensibles à la casse.
- La “racine”
vcard ne peut pas être mélangée avec n’importe laquelle de ses propriétés. Par conséquent, class="vcard fn" est invalide.
- Les propriétés ne peuvent pas être combinées avec les sous-propriétés. Par conséquent,
class="tel value" est invalide.
Pas si mal non ? Je veux dire, allez les microformats sont standards. Bien sûr il y a quelques règles.
Et n’oubliez pas : Ce n’est pas intrinsèquement un problème de marquage quand on parle de microformats. Cela concerne les valeurs de classe et différents attributs de marquage — propriétés et sous-propriétés.
Vous pouvez utiliser presque tous les éléments (X)HTML que vous voudrez et faire que les microformats soient encore valides si vous déclarez proprement les propriétés et sous-propriétés.
Bien sûr, si vous vous souciez de comprendre la sémantique des microformats, vous devriez aussi comprendre le marquage sémantique.
N’oublions Pas le Profil
Tout comme je le mentionnais avec XFN, il est recommandé d’inclure le profil hCard dans le <head> des pages web qui incluent le microformat :
<head profile=”http://www.w3.org/2006/03/hcard”>
le W3C autorise plusieurs valeurs de profil, séparées par un espace blanc, ainsi vous pouvez avoir à la fois les profils pour hCard et XFN :
<head
profile=”http://gmpg.org/xfn/11
http://www.w3.org/2006/03/hcard”>
Mise à jour :
J’ai récemment découvert qu’il existe un profil combiné pouvant être utilisé pour tous les microformats-non-draft, plutôt que de lister plusieurs profils dans le d’un document :
<head profile="http://purl.org/uF/2008/03/">
Aussi si vous utilisez un microformat unique sur une page, vous pouvez utiliser ce profil combiné si ce microformat est non-draft. Néanmoins pour les microformats-draft (en projet), vous devez spécifier le profil pour ce microformat particulier.
A cette heure, tous les microformats discutés dans cette série (à l’exception de rel-home) sont “non-draft”.
A nouveau, comme je l’ai déjà abordé eu égard à XFN, je maintiens mon <head> dans une inclusion globale, ainsi il y est fait référence sur l’ensemble du site A Blog Not Limited
. Néanmoins, tel que cela se révèle, ceci est requis, parce que j’utilise le microformat hCard sur presque toutes les pages de mon site (dans le pied de page).
Ce qui suit très joliment dans la prochaine partie de cet article …
hCard en Langage Naturel
Il y a de ça un moment, j’étais tombée sur un article génial du brillant Jeremy Keith, qui suggère d’utiliser hCard en langage naturel.
En fait, il propose d’appliquer les propriétés et sous propriétés de hCard pour l’information de contact (par ex : nom, site web, email) qui apparaîtront dans le flux des phrases naturelles, à l’inverse du “découpage ” de l’information de contact d’une personne comme montré dans mon premier exemple.
Le concept est si simple et s’ouvre vraiment aux opportunités pour utiliser hCard. Aussi, ai-je décidé de l’utiliser dans mon pied de page sur A Blog Not Limited où j’ai quelques trucs me concernant :
<div id="creator" class=”vcard”><h3><a href="/about/"
title="En savoir plus à propos d'Emily">La Personne la plus Cool que Je Connaisse</a>
</h3>
<a href="/about/"
title="En savoir plus à propos d'Emily">
<img src="/images/emilyLewisThumb.jpg"
style="width:80px; height:80px;" class=”photo”
alt=”Emily Lewis” />
</a>
<p>Yeah ce serait moi :
<a class=”fn email”
href=”mailto:emily@ablognotlimited.com”>Emily Lewis</a>.
</p><p>Je suis
<span class=”title”>web designer
</span> vit à
<span class=”adr”>
<span class=”locality”>Albuquerque</span>,
<span class=”region”>New Mexico
</span> <span class=”postal-codenonVisual”>87106
</span>
<acronym class=”country-name nonVisual” title=”United States of America”>USA
</acronym></span>, et suis une “standardista.”</p><p>Je suis spécialisée dans le
<acronym title="eXtensible Hypertext Markup Language">(X)HTML
</acronym> sémantique codé à la main et <acronym title="Cascading StyleSheets">CSS
</acronym>, concevoir des sites web accessibles, et l'écriture et optimisation du contenu web.
</p>
<p><a href="http://www.ablognotlimited.com" rel="home me"
class=”url”>A Blog Not Limited</a> est mon blog personnel où je pontifie sur le design web, les standards du web, la sémantique et tout ce qui m’entiche.
</p></div>
Les Différences
Mis à part le fait que le contenu hCard dans ce second exemple soit “dans la ligne” avec du contenu non-hCard, il y a quelques légères différences dans les propriétés et sous-propriétés hCard utilisées :
- Je fais uniquement référence dans cet exemple à mon premier prénom et à mon nom de famille, aussi je n’utilise que
class="fn". Souvenez-vous que la propriété n peut être implicite si le contenu fn fait exactement deux mots.
- J’inclus mon titre de job dans la description, aussi j’ajoute
class="title", qui est l’une des propriétés fournissant de l’information à propos de l’affiliation professionnelle d’une personne. Cette propriété indique le titre de mon job.
- J’inclus une photo de moi-même, aussi j’ajoute
class="photo" à <img />.
Néanmoins, ces différences avec le premier exemple n’ont rien à voir avec le fait que j’utilise la hCard en langage naturel. Ce n’étaient simplement que les valeurs appropriées à utiliser avec le contenu dans cet exemple spécifique..
Combiner hCard & XFN
Comme je le mentionnais, ce concept de hCard en langage naturel fournit tellement plus de contextes dans lesquels la hCard peut être utilisée. Je l’ai déja appliqué à l’information à mon propos, mais je fais souvent référence à des amis et confrères dans mes articles … cela fait vraiment sens de marquer ces références avec hCard.
Et peu importe si je marque déjà ces références avec les valeurs XFN. L’une des meilleures choses à propos des microformats est qu’ils peuvent être facilement combinés.
Selon le contexte de la référence, j’utilise un marquage légèrement différent.
Dans les situations où je fais référence à un article/billet (tel que la référence au-dessus à Jeremy Keith), j’utilise <cite> comme mon conteneur vcard :
<p> … le brillant
<cite class=”vcard”>
<a href=”http://adactio.com” rel=”muse colleague”
class=”url fn”
title=”adactio.com”>Jeremy Keith</a>
</cite>,
qui suggère d’utiliser <a href=”http://adactio.com/journal/1122/”
title=”adactio : hCard en langage naturel”>hCard en langage naturel</a>.
</p>
Et dans les situations où je fais simplement référence à la personne, j’utilise <span> comme mon conteneur vcard :
<span class=”vcard”>
<a href=”http://www.jenschwedler.com/”
title=”jenschwedler.com” class=”url fn”
rel=”met colleague co-worker friend”>
Jen Schwedler</a>
</span>
Pour finir, si je fais seulement référence à la personne par son prénom, j’utilise <abbr> le conteneur du nom formaté avec le nom complet comme valeur pour title :
<span class="vcard">
<abbr class=”fn” title=”Ian Pitts”>
<a href=”http://www.iso-100.com/” title=”iso-100.com”
class=”url” rel=”met colleague co-worker friend”>
Ian
</a>
</abbr>
</span>
Dans tous ces exemples, les différences de marquage reflètent simplement ma sémantique préférée. Les microformats hCard et XFN sont les mêmes :
- propriété
fn pour le nom
- propriété
url pour le site web
- valeurs
rel appropriées.
Et si j’avais de l’information supplémentaire à propos de ces types (comme un titre de job, un e-mail, etc.) je marquerais de la même façon ce contenu avec les propriétés/sous-propriétés appropriées.
Organisations & Sociétés
J’ai déjà rencontré des situations où je devais utiliser hCard pour décrire une société ou une organisation sur ce blog, et je voulais vraiment fournir un exemple sur la façon dont cela pourrait s’implémenter :
<div class=”vcard”><p class=”fn org”>Big Ass Blow-Up Dolls</p><img src="logo.png" class=”logo” style=”width:69px; height:69px;” alt=”Big Ass Blow-Up Dolls” /><p class=”adr”><span
class=”street-address”>
6969 Happiness Avenue</span>,
<span class=”locality”>Los Angeles</span>,
<abbr class=”region” title=”California”>CA</abbr>
<span class=”postal-code”>69069</span>
</p><ul><li class=”tel”><span
class=”value”>696-969-6969</span>
</li><li><a class=”email”
href=”mailto:goodtimes@babud.com”>Envoyez-nous un e-mail</a>
</li>
<li><a class=”url”
href=”http://www.babud.com/”>Visitez Notre Site Web</a>
</li></ul></div>
Comme vous pouvez le constater, la hCard pour les organisations/sociétés est en fait la même qu’elle l’est pour les individus. Les principales différences sont :
- En plus de la propriété
fn pour le nom, le nom de l’organisation se voit aussi déclarer la propriété org. Et avec les sociétés/organisations, vous n’utilisez jamais la propriété n.
- Plutôt que
photo pour l’<img />, l’image associée est marquée avec la propriété logo.
Lieux
Ce que j’ai détaillé pour les sociétés et organisations serait la même approche pour les lieux. Vous référenceriez simplement le nom du lieu avec les propriétés fn org et appliqueriez toute l’information d’adresse comme je l’ai démontré au-dessus.
Voici un exemple de hCard en langage naturel pour un lieu :
<p class=”vcard”>
Durant ma visite à <span class=”locality”>Atlanta
</span>,
<abbr title=”Georgia” class=”region”>GA
</abbr>,
je prévois de jeter un oeil au
<span class=”fn org”>
Centennial Olympic Park
</span>.</p>
Il y a quelques propriétés hCard spécifiques-aux-lieux qui sont particulièrement utiles pour les endroits (bien qu’elles ne soient pas uniquement limitées aux lieux) :
- La propriété
geo spécifie la position globale en utilisant deux sous-propriétés, latitude et longitude.
- La sous-propriété
latitude spécifie une valeur décimale qui indique la position verticale en relation avec l’équateur.
- La sous-propriété
longitude spécifie une valeur décimale qui indique la position horizontale en relation avec le premier méridien.
Parlons Avantages
Ainsi, maintenant que j’ai traité plusieurs exemples de hCard, il est temps de passer aux avantages.
Sémantique
Vous saviez que ça arriverait. Je l’ai déjà dit et le répéterai encore une fois :
L’usage des microformats ajoute de la structure et du sens au contenu web, le rendant à la fois lisible par les humains et les machines. Et tout cela avec des standards existants pour le marquage et les données.
Ceci encourage aussi le concept plus large de standards du web qui profitent à tous.
Partager l’Information de Contact
En utilisant hCard pour marquer l’information de contact, vous rendez automatiquement possible le fait que cette information soit convertie en une vCard téléchargeable, qui peut alors être utilisée par les programmes tels que Outlook de Microsoft et le Carnet d’Adresses d’Apple.
Vous pouvez utiliser le service de contacts de Technorati décrit précédemment, ou pouvez créer le vôtre et l’héberger sur votre propre serveur pour le téléchargement.
En outre, il existe plusieurs modules/extensions de navigateurs qui exportent automatiquement l’information hCard en vCards :
Firefox
Operator 0.9.3 reconnaît le contenu hCard et offre aux utilisateurs une option pour exporter l’information sous une vCard pour utilisation dans leurs programmes préférés de gestion d’adresses :
Vous pouvez aussi voir la liste des options dans la capture d’écran, Operator utilise l’information hCard pour chercher sur d’autres sites web, comme Google Maps :
Tails Export 0.3.5 est une autre extension Firefox qui tire profit de l’information hCard pour l’export à l’intérieur d’autres programmes de carnet d’adresses :
Safari
Le plugin Safari Microformats est utilisé pour vous utilisateurs de Safari afin d’identifier les microformats hCard sur une page web et de la sauvegarder dans votre carnet d’adresses.
Je ne suis pas une fervente utilisatrice de Safari, et l’installation de ce plug-in fût bien trop boîteuse pour moi … aussi je ne l’ai pas installé et ne peux pas vous fournir de capture d’écran.
Bookmarklets
Le concept derrière le plugin susmentionné a été implémenté dans un bookmarklet microformats indépendant du navigateur, et je peux confirmer que c’est vraiment très beau :
Il existe aussi d’autres bookmarklets hCard.
Chercher
Le contenu web marqué avec des microformats a naturellement plus de sens. Ceci pourrait aider les moteurs de recherche à mieux évaluer le contenu que vous leur fournissez, et peut-être, augmenter votre classement dans les résultats des moteurs de recherche.
Il n’y a jamais de garanties quand on arrive à la recherche, mais le contenu de qualité dans le contexte est toujours un bon démarrage.
Au delà des résultats de recherche, bon nombre des moteurs de recherche sont en train d’implémenter hCard dans leurs propres applications et services :
Réseaux Sociaux
Les sites de réseaux sociaux utilisent les microformats hCard pour marquer les pages profils avec l’information de contact des utilisateurs, tout comme celles des “contacts/friends/followers” des utilisateurs :
- Twitter applique la hCard aux pages profil, tout comme celles des listes des “following” et “follower”.
- ClaimID applique la hCard sur les profils publics des utilisateurs.
- Last.fm applique la hCard sur les profils, qui comprend
photo et url en plus de fn.
Et ce pour n’en citer que quelques-uns. Regardez la liste complète des services qui utilisent hCard.
Des Outils pour Vous Faciliter La Vie
Je serais négligente si je ne vous faisais pas ressortir quelques outils utiles qui peuvent vous aider à implémenter bien plus facilement hCard que de coder à la main et vous obliger à vous souvenir de toutes les valeurs (bien que j‘apprécie) :
- hCard creator est un simple formulaire qui génère une hCard à partir de l’information proposée.
- Le validateur microformat hCard vous laisse proposer une URL avec un contenu hCard, et puis valide les propriétés et sous-propriétés.
- Il existe une anti-sèche hCard pour une référence rapide aux propriétés et sous-propriétés.
Il y en a Tellement Plus
Je suis entrée dans des détails vraiment spécifiques sur le microformat hCard. Mais il y en a bien plus encore que ce que j’ai pu mentionner.
Je vous encorage vivement à prendre un peu de temps et lire toutes les propriétés et sous-propriétés disponibles du microformat hCard, tout comme à voir quelques-uns des exemples de hCard dans la jungle.
A venir en 4ème Partie
Bien que ce fût un article long (qui en dit beaucoup considérant ma tendance normale à la verbosité), j’espère que cela a été intéressant et au moins utile pour vous.
Parvenir à la Sémantique Avec les Microformats, 4ème Partie traitera du microformat hCalendar.
Restez branchés …
- Tags Technorati :
- hCard
- microformats
- rel-home
- rel-me
- semantics
- standards
- web design
- XFN
- XHTML
Note : Cette traduction s’inscrit dans la poursuite de travaux visant à mieux faire connaître les microformats. L’article original d’Emily Lewis a été publié le 22 septembre dernier sur son blog personnel. Seul le lien original fait référence. Vous pouvez aider à raffiner cet article en éditant directement le code posé sur la page miroir de mon wiki-personnel. Merci d’avance. xtof
A marquer dans vos agendas : L’édition ParisWeb 2008 aura lieu le mois prochain. Pour 10 euros H.T., vous pouvez vous inscrire à la journée des ateliers du 15 qui comporte une session sur les microformats : 
