xtof » microformats

Facebook Ajoute les Microformats hCalendar et hCard à des Millions d’Événements

xtof — Fri, 18 Feb 2011 14:14:27 +0000

Encore une très grande nouvelle pour la communauté des microformats annoncée hier sur le blog officiel des microformats par Tantek. L’adoption par Facebook sur les pages événements du standard ouvert microformat hCalendar ouvre non seulement une facilité pour l’utilisateur de renseigner son agenda, mais laisse aussi présager de très riches potentiels pour les moteurs de recherche. Une réalisation de Paul Tarjan facilitée par Tantek avec un bug qui reste connu sur le fuseau horaire*. Tout ce qui suit n’est qu’une traduction du billet source et comme à l’habitude… seul le lien original fait référence.

Aujourd’hui, Facebook a marqué tous ses événements avec le microformat hCalendar en marquant aussi les lieux hCard. Selon une simple recherche sur Google, cela donne des millions d’événements publics publiés avec des microformats (si quelqu’un connaît un nombre plus précis pour la quantité totale du nombre d’événements Facebook, y compris les événements privés, ou combien d’événements sont créés par jour, faites-le nous savoir !).

Voici un exemple à venir : le Great British Booze-up durant SXSW 2011 (que je recommande vraiment si vous êtes impliqué dans le marquage de haute qualité, car un bon paquet d’entre nous seront là pour partager des verres et pour des conversations autour du panel du futur des microformats).

Visitez cette page dans un navigateur qui supporte les microformats (il existe à ce jour de nombreuses extensions pour Chrome, Firefox, Internet Explorer et Safari). Essayez par exemple Firefox 4 avec l’Extension Operator, et vous verrez s’afficher Évènements (1)” dans la barre d’outils. Un simple clic révèle “Great British Booze-up” que vous pourrez alors exporter dans votre agenda iCal, 30 Boxes, Google ou Yahoo.

Et si vous êtes un utilisateur, c’est tout. La capacité de copier des événements là où vous le désirez. Si vous publiez du hCalendar, Google les indexera et affichera des « rich snippets » pour vos événéments. C’est ce que les microformats vous « empuissancent » à produire.

Pour les auteurs/designers/dévéloppeurs web qui passeraient par là, jetons un œil sur le marquage de Facebook. Si vous regardez le code source de la page et cherchez “vevent”, vous voyez le code suivant :


 18:00 -

 21:00

Encoder des dates et des horaires qui fonctionnent tant pour les humains que pour les machines fût l’un des plus gros défis dans les microformats. Et ce que vous voyez ici est le résultat d’années d’itérations de communauté (techniques, feedback, recherche) appelé la technique ‘value-title’ du modèle de classe value. Pour faire court, en plaçant les dates et heures dans un format ISO lisibile par les machines dans l’attribut title d’un élément span vide innocent, adjacent à la date et l’horaire lisible pour l’humain, nous pouvons parvenir à un équilibre pragmatique entre l’expérience utilisateur, la fidélité du contenu en minimisant les effets consistant en fait à dupliquer la donnée (une violation du DRY, quelque chose que nous évitons du fait des incohérences potentielles à moins que ce ne soit absolument nécessaire pour un plus grand principe, tel que l’utilisabilité pour les humains).

C’est le déploiement le plus massif connu à ce jour de la technique ‘value-title’, et cela fonctionne merveilleusement avec le support du modèle de classe value dans Operator.

Jetons un oeil au lieu. Regardez le code source de la Sélection sur le bloc complet à partir de “Lieu Shakespeare’s Pub” jusqu’à “78701″ et vous verrez (de nouveau avec un ajout d’espaces blancs)


 Shakespeare's Pub 
 
 314 East 6th Street
 Austin, TX 78701

Ceci est un excellent exemple d’utilisation d’une hCard embarquée pour un lieu dans un événement hCalendar, à part une chose :

   Austin, TX 78701

Qui devrait être plus marqué comme :

Austin,
TX
78701

Je suppose que ce qui se passe ici est une interface grossière entre un système backend et frontend, ce qui revient à dire que pour la facilité, les développeurs peuvent retrouver la totalité de la ville, de l’état et du code postal à partir d’un backend sous une chaîne unique. Par conséquent, le mieux que puisse faire le front end est de marquer la chose en entière comme la ville (locality).

Même si ce n’est pas idéal, cela n’est pas horrible. Une fois de plus, en utilisant Operator, choisissez « Exporter le Contact »” pour Shakespeare’s Pub, et remarquez que ce qui s’affiche dans votre carnet d’adresses est tout simplement bien (même si les champs ne sont pas exactement aux bons endroits). Copier et coller cette adresse sur un site de cartographie fonctionne aussi. Le marquage n’est pas idéal, mais il est utilisable et utile. Et je suis heureux que Facebook ait fait le choix d’aller de l’avant et prennent cette décision pragmatique, tout en sachant qu’ils pourraient itérer et améliorer la fidélité des données dans une mise à jour à venir.

Le déploiement de hCalendar dans Facebook est simplement la dernière de leur série de support lent et régulier des standards ouverts et des microformats en particulier. Il y a deux ans Facebook avait ajouté le support de hCard à ses profils utilisateurs. L’année dernière, ils annonçaient le support de OAuth 2.0, tout comme l’ajout du support XFN rel-me aux profils utilisateurs, s’interconnectant ainsi avec le web social distribué. Ils ont fièrement documenté leur usage de HTML5. Et désormais, des millions d’événements hCalendar avec des lieux hCard. Impatient de voir ce qu’ils supporteront la prochaine fois.

Well done Facebook, and keep up the good work.

* Comme le faisait remarquer Andy Mabbett, il leur reste encore un peu de boulot afin d’être utilisable en Europe. En France, ce serait cool de localiser le fuseau horaire d’hiver à UTC/GMT+1 pour ne pas déraper de +9 heures dans l’espace-temps de nos agendas en ligne.

Rich Snippets de Google : Amélioration de l’Outil de Test, Fils d’Ariane et Evénements

xtof — Wed, 15 Sep 2010 11:23:39 +0000

En attendant l’intégration de descriptions enrichies sur les pages de résultats de Google en France pour présenter de vraies exemples, vous trouverez ci-dessous une traduction à des fins d’étude personnelle pour de futurs enrichissements documentaires avec des microformats… Dans ce billet « Rich snippets: testing tool improvements, breadcrumbs, and events » posté le 2 septembre dernier, Kavi Goel et Pravir Gupta de l’équipe Search Quality chez Google, présentent les améliorations de l’outil de test des fameux Rich Snippets évoqués par Tantek en juillet dernier. Belle perspective pour encourager l’adoption des microformats.

Depuis le lancement des rich snippets en 2009, les webmestres ont montré beaucoup d’intérêt à ajouter du marquage dans leurs pages web pour améliorer leurs présentations dans les résultats de recherche. Quand les webmestres ajoutent un marquage utilisant des microdata, microformats ou RDFa, Google sait comprendre le contenu des pages web et montrer des descriptions enrichies de résultats de recherche qui embarquent mieux l’information sur la page. Grâce à l’adoption incessante par les webmestres, nous voyons désormais plus de 2 fois plus de recherche avec des « rich snippets » dans les résultats aux USA, et une croissance multipliée par 4 depuis un an. Voici les trois mises à jour récentes.

Améliorations de l’outil de Test

Malgré un taux d’adoption encore faible à cette heure, l’implémentation correcte des rich snippets demeure un défi majeur. Pour aider à résoudre ce problème, nous avons ajouté de nouveaux messages d’erreur sur l’outil de test des rich snippets afin de vous aider à mieux identifier et réparer tous les problèmes avec le marquage.

Vous avez ajouté du marquage dans le passé mais n’avez pas vu apparaître les rich snippets pour votre site, nous vous encourageons à essayer de nouveau le test du marquage sur l’outil de test mis à jour.

Marquage des Rich snippets markup pour les fils d’Ariane

L’année dernière, Google annonçait une modification des résultats de recherche pour commencer à présenter les hiérarchies de sites (aussi appelés « breadcrumbs » ou « fil d’ariane ») plutôt que des URLs standards dans les cas où cela pourrait aider les utilisateurs à mieux comprendre un site web.

Nous ajoutons désormais le support pour le format de marquage des Fils d’Ariane qui permet aux webmestres d’identifier explicitement la hiérarchie du fil d’Ariane sur leurs pages.

Si l’interface-utilisateur du fil d’Ariane s’affiche déjà sur votre site, nous continuerons à la montrer même si vous ne produisez pas le marquage, aussi ne vous souciez pas de toute interface-utilisateur qui disparaîtrait. Notez que ce nouveau format peut être modifié ou remplacé à l’avenir. Comme avec tous les autres types de « rich snippets », alors que le marquage nous aide à mieux comprendre le contenu de votre site, cela ne garantit en aucun cas que l’interface-utilisateur s’affichera pour vos pages web dans les résultats de recherche.

Evénements

En janvier dernier, nous avons ajouté le support des rich snippets pour les événements. Si une page web contenant des listes d’événements s’affiche dans les résultats de recherche, jusqu’à trois liens vers des événements spécifiques pourraient être présentés dans la description enrichie sur la page de résultats de recherche. Ceci fonctionne bien pour les requêtes générales comme les [concerts à seattle], mais nous avons voulu aussi améliorer l’expérience de recherche quand on cherche un événement spécifique. Nous afficherons désormais les « rich snippets » quand les pages contenant un événement unique s’affichent dans les résultats de recherche. Les « rich snippets » d’un événement unique contiennent maintenant la date et le lieu de l’événement :

Pour les instructions sur l’ajout d’un marquage d’événements, référez-vous à la page events dans la documentation rich snippets (NDT : Si vous optez pour les microformats, aidez-vous de l’article de référence d’Emily Lewis concernant le marquage hCalendar avec le « modèle de classe value« .)

microformats.org a 5 ans : 2 Milliards de Pages Avec des hCards, 94% de Rich Snippets

xtof — Sat, 10 Jul 2010 08:16:34 +0000

Traduction d’un billet microformats.org at 5: Two Billion Pages With hCards, 94% of Rich Snippets publié par Tantek le 8 juillet 2010. Seul le lien original fait référence.

La communauté microformats.org a récemment fêté son 5ème anniversaire ; plus de 5 années de recherche ouverte, de création et d’itération sur les standards du web pour exprimer une sémantique commune conçue d’abord pour les humains, puis pour les machines.

2 milliards de pages avec des hCards

Premier brainstorming en septembre 2004 et rapidement adopté par de nombreux outils, sites petits et grands, le nombre de pages publiées avec une ou plusieurs hCards a récemment passé le cap des 2 milliards il y a quelques jours selon Yahoo Search Monkey, rendant ce format le plus populaire pour les personnes ou organisations sur le web :

Les résultats de Search Monkey tendent vraiment à fluctuer, même heure par heure, aussi vous pouvez voir différents chiffres, plus bas et au fil du temps de plus en plus hauts. Voici quelques déploiements récents de hCard ayant sans aucun doute contribué à faire passer la barre des deux milliards :

1. Basecamp ajoute les hCards : personnes et sociétés

Il y a quelques jours, Jason Zimdars de 37 Signals rapportait que Basecamp avait été mis à jour pour supporter les hCards pour les personnes et sociétés, et étudie actuellement d’autres usages :

I’m pretty happy with this added functionality so I intend to explore using hCards in other parts of our apps where it makes sense.

Merci à Jeremy Keith pour avoir fait la demande et relancé 37 Signals.

2. Tous les domaines.tel supportent désormais hCard

Et tout juste hier, Telnic a annoncé que tous les noms de domaines .tel supportent désormais le microformat hCard

3. Plus de 14 millions de profils Gravatar en hCard

Il y a environ un mois, Gravatar de chez Automattic a lancé des profils publics et reliables pour tous les utilisateurs de WordPress.com users, magnifiquement présentés et marqués avec hCard, regardez par exemple le profil de Beau Lebens :

C’est un autre paquet de plus de 14 millions de hCards (chiffres de WordPress.com), chacune représentant un blogueur individuel sur le web public.

4. Plus de 20 millions de hCards Brightkite

Pour finir, juste avant le 5° anniversaire, le 20 juin dernier, les développeurs de BrightKite nous ont informé qu’ils avaient pleinement implémenté hCard sur l’ensemble de leurs 5,5 millions de profils utilisateurs et leurs 16,5 millions de pages d’endroits. Soit 22 millions de nouvelles hCards. Merci Brighkite pour ce cadeau d’anniversaire !

94% de marquage en rich snippets

Tous ces déploiements proviennent de la puissante combinaison de 1. facilité de publication des microformats (le moyen le plus facile pour marquer sémantiquement des personnes, lieux, etc. en HTML) et 2. le fait que des moteurs de recherche comme Yahoo et Google indexent les microformats et les rendent visibles sur leurs interfaces utilisateurs.

En mai 2009, Google lançait les Rich Snippets avec le support des microformats et RDFa, avec un ensemble de partenaires de contenus comme Yelp qui ont tous choisi d’utiliser les microformats pour produire des « rich snippets » dans les résultats de recherche de Google.

Démarré l’année dernière avec le support de hCard, hReview, hReview-aggregate et hProduct, Google a aussi rajouté le support de hCalendar et hRecipe.

Pour tout ça, Google a fourni des exemples comparés pour chaque type de snippet dans plusieurs formats (microformats, RDFa, microdata), ce qui a aidé à démontrer combien les microformats étaient plus simples/faciles à beaucoup d’égards (et de la promesse que les microdonnées montrent pour une extensibilité plus générale).

Comme le rapportait récemment ReadWriteWeb, Google signalait récemment lors de la Conférence Semantic Technologies que quand Google trouve des données sur les pages pour des rich snippets, 94% des fois, cette donnée de rich snippets est marquée avec des microformats (40.091 vs. 2.514, une estimation conservatrice supposant qu’aucune de ces pages ne contiennent les deux, s’ils l’avaient fait, le chiffre de 94% serait même plus élevé).

Crédit photo : Read Write Web: Google’s Semantic Web Push: Rich Snippets Usage Growing.

Les chiffres comparant hCard vs d’autres marquages alternatifs sont stupéfiants :

~30x plus de snippets sur les personnes utilisant hCard (33.675 vs. 1.160).

Ce n’est pas une surprise, comme le présentait l’étude « The State of Web Development 2010″ qu’il y ait bien plus de développeurs web (6x plus) qui utilisent les microformats dans leur travail quotidien (34.52% utilisent les microformats vs 5.63% qui utilisent RDFa, selon l’étude).

Compte tenu du fait qu’il y ait bien plus de développeurs qui utilisent les microformats, il n’est pas surprenant que Google trouve plus de microformats que d’alternatives. Ce qui est intéressant néanmoins, c’est qu’avec 6x plus de développeurs qui utilisent des microformats, Google trouve 16x plus de microformats pour les rich snippets que d’alternatives.

On pourrait conclure de ces deux chiffres que les développeurs utilisant les microformats sont 2-3 fois plus productifs en termes de nombre de pages produites avec des rich snippets. Cette productivité pourrait s’expliquer parce que les microformats sont plus faciles (prennent moins de temps) à implémenter, et par conséquent Google doit les reconnaître.

Rendre les Micoformats Encore Plus Simples

A nouveau, nous pouvons faire encore mieux. Et non, je ne parle pas simplement de passer de 94% à + de 99%.

La slide de présentation de Google faisait remarquer que les résultats étaient tirés d’un échantillon d’un million de pages sur Internet.. Parmi lesquelles seulement ~40,000 avaient des microformats. Compte tenu du fait que presque chaque page web mentionne des personnes, organisations, événements, ou tout autre microformat populaire, ce chiffre devait être bien plus élevé.

Par conséquent, il y a plein de pistes d’améliorations, et tout particulièrement sur les réactions provenant de Google, Yahoo, d’autres sociétés plus petites et de développeurs web indépendants, nous pouvons et devrions simplifier encore les microformats. Plus simples à écrire, et idéalement plus micro, avec moins de code, pour alléger les pages. Ayant démarré un brainstorming il y a quelques mois, il y a maintenant quelques types qui travaillent sur un “microformats 2.0″ pour parvenir à cet objectif.

Vous avez des réactions ou idées pour faire que les microformats soient même encore plus simples et plus faciles pour les auteurs ?

N’hésitez pas à ajouter vos réflexions à la page wiki microformats-made-simpler.

Avez-vous implémenté les profils hCard sur votre site ?

Ajoutez votre site à la page Profils utilisateurs supportant hCard.

Merci encore à tous pour le travail et les contributions de tous dans la communauté microformats pour cette cinquième année des plus excellentes. Hâte de voir même encore plus de succès pour notre sixième année.

Google ajoute le support des hCalendar et hRecipe aux « Rich Snippets »

xtof — Tue, 11 May 2010 05:24:05 +0000

Traduction d’un billet de Frances Berriman publié le 28 avril 2010. Seul le lien original de référence.

Le premier trimestre de cette année a été l’occasion de voir Google vraiment avancer sur les Rich Snippets – quelque chose qu’ils avaient annoncé en mai dernier, avec des implémentations de microformats apparaissant dans les résultats pour tout type de contenu.

hCalendar

L’un des formats originaux et sûrement des plus utiles, hCalendar a fait une avancée majeure en étant adopté sur tout le web comme un moyen standard de marquer l’information liée à un événement. Ceux ayant pris le temps d’ajouter ce format à leurs sites en tirent désormais les bénéfices, avec Google tirant clairement le meilleur parti de cette donnée riche.

hRecipe

hRecipe est certainement un format relativement jeune, mais s’est toujours montré comme un début prometteur pour rassembler les geeks et l’alimentation.

Avec la vision de faire en sorte que l’organisation de vos BBQs soit plus simple cette année, Google a produit une mise à jour majeure sur les résultats de pages de recherche qui mettent désormais en valeur les recettes dans les résultats, en affichant les informations importantes telles que les notations, les temps de préparation et de cuisson. L’information affichée est formée à partir d’extraits de données marqués avec hRecipe.

Mark Wunsch, développeur pour FoodNetwork et le parseur Prism, qui trouve maintenant ses recettes microformatées affichée sur les pages de résultats de Google nous a dit cela :

Quand nous avons revisité il y a quelques mois nos pages de recettes sur FoodNetwork.com, c’était l’une de nos priorités dans l’ingénierie Front End d’embarquer hRecipe. Nous savions que ce ne serait qu’une question de temps pour le support de l’outil de parvenir à utiliser nos données de recettes. En tant qu’ingénieurs Front End, nous avons un vrai controle sur ce que les pages produisent, et nous avons une réelle opportunité de maximiser la quantité de données qu’un outil comme Google peut tirer de notre marquage. Ce serait une pratique pauvre que de ne pas tirer profit des microformats quand quelque chose d’aussi puissant que Google reconnaît leur importance.

Il reste encore du travail pour défaire les noeuds dans le format hRecipe, mais je pense que cela démontre clairement l’avantage d’être un « early adopter » et de voir ces formats dans la jungle pour du vrai test. Félicitations à tous les contributeurs !

Avec Google supportant désormais officiellement ces deux formats, plus les personnes et critiques, nous anticipons avec impatience son adoption de microformats supplémentaires dans les Rich Snippets.

Faire Craquer la Prédominance de Facebook : Un Nouveau Protocole de Commentaire Inter-Réseaux Pourrait Changer le Jeu

xtof — Mon, 29 Mar 2010 20:44:58 +0000

Traduction en cours à des fins d’étude et sous Fair Use d’un billet de Marshal KirkPatrick publié le 29 mars 2010 pour ReadWriteWeb. Seul le lien original fait référence.

Deux sociétés en dehors de la Silicon Valley affirment être les premières à implémenter un nouveau protocole open source appelé Salmon, qui permet aux commentaires d’être envoyés par-dessus les murs d’un réseau social pour communiquer avec les utilisateurs d’un autre réseau. Imaginez pouvoir poster un message sur Facebook à « @jeannedupont@twitter » et puis voir en retour Jeanne recevoir le message en temps réel sur Twitter. C’est une vision comparable à celle de pouvoir appeler n’importe quel numéro de téléphone, qu’il fasse ou non partie de votre fournisseur d’accès au téléphone.

Facebook n’implémente pas Salmon, mais c’est ce que Status.net –un service canadien open source pour entreprises– et Cliqset -un service de flux basé en Floride– ont annoncé avoir implémenté ce matin entre leurs réseaux. Voyez ça comme un premier coup d’épée technique pour commencer à déjouer un monopole.

Du fait que Salmon est un standard ouvert, tout service peut l’implémenter sans relations de business formelles, et Google Buzz est attendu pour être le prochain à rentrer dans l’écosystème Salmon. Si une portion substantielle de la communauté technique implémente Salmon, Facebook pourrait se retrouver sous pression pour faire de même. (Comme ce fût aussi le cas par exemple pour OpenID). Si vous pouviez encore envoyer des messages à vos amis à l’intérieur et à l’extérieur de Facebook, ce serait bien plus facile pour de nouveaux réseaux innovants de vous appâter au dehors du gros site unique utilisé à ce jour par 400 millions d’utilisateurs.

Les Joueurs

Evan Prodromou de Status.net dit que son service compte 1.2 million d’utilisateurs, héberge 12 000 sites sur son nuage et en ajoute 800 par semaine. C’est une petite startup frétillante qui implémente rapidement de nouveaux protocoles techniques et fait des recrutements de haut calibre. Status.net a commencé à implémenter le support Salmon au début du mois mais a annoncé aujourd’hui que cela fonctionnait avec Cliqset pour afficher une communication inter-réseau. « Nous avons eu différentes implémentations de communications qui utilisent bien ce standard ouvert pour les conversations inter-réseaux, » affirmait Prodromou aujourd’hui, « C’est la première fois ! »

Cliqset est meilleur en innovation de pionnier qu’en acquisition d’utilisateurs mais demeure un membre très respecté de la communauté technique travaillant à créer une inter-opérabilité de réseaux sociaux.

Google Buzz semble avoir reçu une réaction mitigée à son lancement mais se montre le plus disruptif du fait de son support pour les standards de données ouverts. Salmon est encore listé à l’étape « coming soon » de la roadmap de Buzz.

La nouvelle du jour n’est pas uniquement sur ces joueurs, mais c’est aussi le protocole Salmon qui devrait permettre à n’importe quel réseau social de participer. Salmon a été développé initialement par John Panzer, salarié chez Google. Si vous avez vu la façon dont le système de commentaires Echo affiche les Tweets, trackbacks et autres mentions de médias sociaux sous les billets de blog, c’est le type même de modèle que Salmon vise à rendre en open source.

L’Interoperabilité en tant que Fondation pour le Choix, l’Innovation et le Contrôle par l’Utilisateur

Le quasi-monopole de Facebook sur le réseautage social grand public veut dire que les utilisateurs ont des options limitées leurs façons d’expérimenter le réseau social et que ceux-ci doivent jouer selon les règles du jeu de Facebook. Tout le monde n’apprécie pas forcément la façon dont Facebook change ses règles, tout particulièrement sa politique concernant la vie privée.

Et même si Facebook se montre incroyablement rapide pour innover, il est généralement supposé qu’un marché avec plus d’un compétiteur donne à toutes les sociétés en question plus de motivationq pour essayer de gagner le coeur des utilisateurs.

Simplement dit, si vous pouviez quitter Facebook et continuer à communiquer avec les personnes utilisant Facebook (vous ne pouvez pas à cette heure), alors le fait de quitter Facebook serait bien plus facile. Et bien plus de réseaux sociaux auraient raison d’investir pour construire un service convaincant pour vous inciter à l’utiliser. S’il existait plus d’une option, ces services se battraient pour tenter chacun de construire le meilleur réseau social. Et Facebook aurait plus de raisons de se montrer prudent au moment d’effectuer des modifications dramatiques comme sa Politique de Respect de la Vie Privée. Aujourd’hui, où iriez-vous ailleurs sans perdre contact avec tous vos amis ?

C’est la raison pour laquelle l’inter-opérabilité est importante. Et c’est aussi la raison pour laquelle ceci est une très grande nouvelle que deux petits réseaux sociaux utilisés par des « early adopters » aient poussé dans la jungle l’interopérabilité basée sur Salmon.

Extension hReview pour WordPress (critique)

xtof — Mon, 01 Mar 2010 12:40:45 +0000

Extension hReview pour WordPress

Une extension WordPress facile à installer pour publier des avis structurés avec le microformat hReview.

Andrew E. Scott a développé une extension bien pratique si vous publiez des avis critiques dans votre blog WordPress.

Très simple d’utilisation : après installation de l’extension, vous verrez apparaître une icône Etoile (en mode visuel) ou un bouton hReview (en mode HTML) dans votre barre d’édition au dessus du formulaire de saisie.

Cliquez sur le bouton et un formulaire de critique s’ouvre en pop-up.

Plus qu’à remplir les champs, insérer votre critique dans votre formulaire de saisie, retoucher votre billet avant de clique sur publier.

On regrettera juste que le titre « item » de la critique doublonne avec le titre du billet et que quelques propriétés comme la hCard de l’auteur (propriété « reviewer« ), la date de critique (dtreviewed) ne soient pas automatiquement intégrées dans cette extension.
Dernière suggestion : bricoler l’extension pour intégrer hProduct ?

Mon avis : 4.0 étoiles

Merci Andrew.

Téléchargez la dernière version sur le lien de référence !

Alternatives pour les bricoleurs avancés :

hProduct : Pour définir les produits de consommation

xtof — Mon, 28 Dec 2009 16:41:23 +0000

Le commerce et les échanges sur le web occupent une place prépondérante. Vendre, acheter, louer, échanger, partager, voire dealer en monnaie libre… Tout se pratique en ligne. Il peut être parfois difficile de s’y retrouver, tout particulièrement quand vous cherchez un produit spécifique et voulez le comparer sur différents sites. Le microformat hProduct a été conçu à cette intention et la spécification -encore à l’état de draft- précise comment ajouter de la sémantique sur l’information produit, la rendant ainsi plus facile à partager, distribuer et agréger.

Terminant l’excellent ouvrage Microformats Made Simple d’Emily Lewis qui évoque ce microformat dans son chapitre 11, je m’attelle sagement à la rédaction de ce billet qui vous décrira la syntaxe et se conclura par un exemple fonctionnel de marquage dans la jungle. Un exemple que vous pourriez d’ores et déjà mettre en pratique dans vos billets personnels et/ou vos catalogues de vente par correspondance.

Google est en train d’expérimenter ce marquage pour les données produits en implémentant quelques-unes des propriétés de hProduct. L’intention de cet article sera aussi d’expérimenter le futur affichage de ce microformat, en imbriquant une description du produit dans un avis d’utilisateur.

Syntaxe

Les propriétés et sous-propriétés de hProduct ont été développées sur l’information la plus communément trouvée parmi les produits de consommation actuels, tout en offrant encore une très grande variété de détails spécifiques par famille de produits :

Tout le contenu de votre produit doit être embarqué dans un élément assigné à la propriété racine obligatoire hproduct
Pour le nom du produit, utilisez une fois et une seule fois la propriété obligatoire fn
La propriété optionnelle brand indique la marque du produit. Dans certains cas, ce peut être le fabricant et elle serait aussi marquée avec une hCard.
Pour spécifier la catégorie du produit (telle qu’une voiture, un t-shirt ou un livre), utilisez la propriété optionnelle category, que vous pourrez utiliser plusieurs fois dans hProduct. Vous pouvez aussi transformer le contenu des catégories en tags en créant des liens pour chacune et en assignant rel="tag" sur les s

La propriété optionnelle price spécifie combien cela coûte d’acheter le produit. Le contenu prix à l’intérieur de l’élément assigné class="price" peut apparaître dans le format de la devise/monnaie. C’est un nombre avec une virgule flottante écrite avec un point et le prix doit rester unique.

Utilisez la propriété optionnelle description pour le contenu décrivant le produit.

Vous pouvez assigner la propriété optionnelle photo pour toutes les images ou liens vers des images dans votre contenu produit. Vous pouvez utiliser photo autant de fois que vous voulez.

La propriété optionnelle url est assignée à un lien qui dirige vers une page web contenant de plus amples informations sur le produit.

Vous pouvez utiliser la propriété optionnelle review si votre contenu comprend un avis sur le produit. La spécification hProduct recommande aussi que review soit marqué avec hReview
Vous pouvez utiliser la propriété optionnelle listing si votre contenu contient aussi des détails sur la petite annonce du produit (comme ceux que vous pouvez trouver sur les services de P.A. de Craigslist ou eBay). La spécification recommande que listing soit marqué avec hListing. Cependant, hListing n’en est encore qu’à l’étape de proposition, aussi je ne pourrais pas le recommander pour implémentation sans quelques précautions.
La propriété optionnelle identifier est assignée à une information unique d’identification du produit. Vous pouvez avoir plusieurs instances identifier dans hProduct. identifier a aussi deux sous-propriétés : type et value :
- type indique l’identifiant spécifique tels que model, MPN, UPC, ISBN, ISSN, EAN, JAN, VIN, SKU et sn.
- La seconde sous-propriété, value, est la valeur correspondante du type. Dans l’exemple au-dessous, j’utilise les chiffres qui composent le numéro d’ISBN du livre critiqué.

Marquage

Pour passer à la pratique, au lieu de publier un avis sur une voiture, un vélo, un yoghourt…, j’ai préféré me cantonner sagement au livre d’Emily Lewis « Microformats Made Simple » pour produire mon premier exemple de hProduct. Aussi en avant et commençons par le plus simple :

class="hproduct"> Microformats Made Simple class="photo" /> class="description">Paru chez class="brand" href="http://newsrider.com">Newsrider, ce premier ouvrage d'Emily Lewis, jeune étoile montante de la communauté des class="category" rel="tag">microformats, comblera tous les auteurs, class="category" rel="tag">designers et développeurs class="category" rel="tag">HTML désirant enrichir facilement et rapidement leurs contenus web avec des métadonnées sémantiques. En langage clair, Emily nous truffe d'exemples pratiques et valides sur 20 microformats, et offre à ce jour l'ouvrage le plus complet pour quiconque souhaite comprendre le futur de l'class="category" rel="tag">optimisation pour les moteurs de recherche, la publication de données interopérables et l'amélioration de l'expérience utilisateur. A partir de class="price">19.99 € chez class="url" ref="http://www.amazon.fr/Microformats-Made-Simple-Emily-Lewis/dp/0321660773">amazon, c'est un ouvrage indispensable en 2010 pour tous ceux qui souhaitent hisser leurs productions web vers le web de données.

Combinaison de microformats

Avançons et ajoutons une hCard à notre contenu brand (comme spécifié par la recommandation). Dans cet exemple, j’ai retenu le nom de l’éditeur pour la marque.

Paru chez class="brand vcard"> class="org fn url" href="http://newsrider.com">Newsrider, ce premier ouvrage d'Emily Lewis, jeune étoile montante de la communauté des microformats, comblera tous les auteurs, designers et développeurs HTML désirant enrichir facilement et rapidement leurs contenus web avec des métadonnées sémantiques. En langage clair, Emily nous truffe d'exemples pratiques et valides sur 20 microformats, et offre à ce jour l'ouvrage le plus complet pour quiconque souhaite comprendre le futur de l'optimisation pour les moteurs de recherche, la publication de données interopérables et l'amélioration de l'expérience utilisateur. A partir de 19.99 € chez amazon, c'est un ouvrage indispensable en 2010 pour tous ceux qui souhaitent hisser leurs productions web vers le web de données.

Hormis la hCard, quels sont les autres microformats qui pourraient fonctionner ici ?
Pour publier l’avis au-dessus qui renvoie sur un site distributeur (amazon) et encourager les ventes de l’ouvrage auprès d’un public francophone, j’ajoute ici quelques propriétés du microformat hReview. Ce qui m’amène pour conclure sur un exemple de hReview imbriquée avec un hProduct à intégrer quelques propriétés supplémentaires de hReview :

la propriété racine hreview adossée à hproduct
la propriété obligatoire item dans l’en-tête
la propriété optionnelle summary dans l’en-tête
la propriété optionnelle type pour définir un livre est product
la propriété optionnelle dtreviewed pour indiquer la date de l’avis
la propriété reviewer pour indiquer le nom de la personne qui écrit l’avis
la propriété optionnelle rating pour définir l’échelle de notation sur 20

Ce qui donne pour finir :

Mon avis sur Microformats Made Simple

lundi 28 décembre 2009

16/20 par xtof

Paru chez Newsrider, ce premier livre d’Emily Lewis, jeune étoile montante de la communauté des microformats, comblera tous les auteurs, designers et développeurs HTML désirant enrichir facilement et rapidement leurs contenus web avec des métadonnées sémantiques.

En langage clair, Emily nous truffe d’exemples pratiques et valides sur 20 microformats, et offre à ce jour l’ouvrage le plus complet pour quiconque souhaite comprendre le futur de l’optimisation pour les moteurs de recherche, la publication de données interopérables et l’amélioration de l’expérience utilisateur.

A partir de 19.99 € chez amazon et en dégustation chez SafariBooks en ligne, c’est un ouvrage indispensable en 2010 pour tous ceux qui souhaitent hisser leurs productions vers le web de données.

ISBN: 0321660773

A vous de jouer désormais en dévoilant et corrigeant le code au-dessus. Faites-vous le nez et n’hésitez pas au fil de vos avancées à intégrer d’autres microformats. Si vous disposez de nouveaux exemples, merci de les ajouter sur la page wiki dédiée aux nouveaux exemples de hProduct dans la jungle !.

Emily Lewis : « Parvenir au Sémantique avec les Microformats – 8ème partie : Modèle-de-Classe-Value »

xtof — Mon, 21 Dec 2009 18:14:41 +0000

Emily nous encourage dans le dernier billet de sa série à implémenter le « modèle-de classe-value ». Pour mémoire, le modèle-classe-value est un modèle de design microformats qui résout désormais les problématiques d’accessibilité et de localisation.

J’ai inséré dans cette traduction un exemple de localisation d’une hCard avec domicile. La traduction reste ouverte à vos commentaires et corrections. Seul le lien original fait référence : URL raccourcie : http://ablognotlimited.com/s/106. Prochaine étape : implémentation sur ce site.

Mise à jour : 20 octobre 2009

Tantek Çelik m’a demandé que j’ajoute des exemples dans la ligne du marquage modèle-classe-value dans cet article, afin que les personnes qui travaillent sur des applications pour parser les usages de ce modèle puissent référencer cet article comme un exemple live.

Vous verrez ces exemples dans la ligne au-dessous, chacun d’eux étant indiqué sous une mise à jour.

Non, vos yeux ne vous lâchent pas. Voici une autre contribution de ma série Parvenir Au Sémantique Avec Les Microformats (avec un remerciement spécial à Ben Ward pour son assistance technique) !

Cela fait environ six mois depuis la 7° partie, aussi vous pouvez vous demander pourquoi j’ai attendu si longtemps. Bon, disons que j’ai été occupée.

Mais même mon infâme calendrier ne pouvait m’empêcher de poster ce dernier billet, qui vient à la suite de l’annonce que le modèle-de-classe-value est officiel. Commençons la célébration !

Laissez-moi Rafraîchir votre Mémoire !

A moins que vous ne soyez une geek microformats comme moi, vous ne savez probablement pas ce qu’est le value-class-pattern ou le « modèle de classe value ».

Si vous avez suivi cette série et s’il vous est arrivé de lire mon article Microformats, hAccessibility & Moving Forward, vous en savez probablement plus que vous ne l’imaginez.

Mais ne me faites pas croire ça et vous restituer le contexte 411.

hAccessibilité

The Web Standards Project avait remarqué un problème d’accessibilité dans les microformats (défini "hAccessiblity") concernant le datetime design pattern.

Au coeur de ce problème, l’usage de abbr pour contenir une information de date lisible-par-les-humains, avec la valeur d’attribut title représentant la date lisible-par-les-machines ISO 8601. Cela ressemble à ça :

<abbr class="dtstart" title="2009-05-18">18 mai 2009

Et quand c’est lui par un lecteur-écran, ce modèle de design fait que la date ISO 8601 se retrouve lue à l’utilisateur comme "deux zéro zéro neuf tiret zéro cinq tiret un huit." Ce qui est pire est quand la valeur ISO 8601 fait plus qu’une date, mais inclut aussi l’horaire comme dans cet exemple :

<abbr class="dtstart" title="2009-05-18T10:30:00">18 mai 2009 à 10h30

Ceci donne une sortie dans le lecteur-écran : "deux zéro zéro neuf tiret zéro cinq tiret un huit T un zéro deux points trois zéro deux points zéro zéro."

La communauté pour l’accessibilité (à juste titre, IMO) soutenait que ce n’est pas accessible pour ces utilisateurs. Pendant ce temps, la communauté des microformats défendait que :

les dates ISO 8601 sont en fait (sur toutes les cultures) lisibles par les humains;
La valeur sémantique d’offrir des valeurs développées via abbr surpasse la problématique du lecteur d’écran
Parce que la plupart des lecteurs d’écran n’ont pas développé de jeu.

Et ce débat pesait depuis des années.

Utilisabilité

Mais il n’y avait pas que l’hAccessibiliy qui était une déchirement du côté des microformats. C’étaient aussi les problèmes d’utilisabilité concernant le « modèle-de-design-date-horaire ».

Une fois de plus, le problème était la date ISO 8601 sous la valeur abbr title. Cette fois, le problème n’était pas lié à l’activité du lecteur d’écran, mais au comportement normal du navigateur. Vous voyez, la plupart des navigateurs affichent les valeurs abbr title sous forme de bulle d’aide pour l’utilisateur :

Seuls les plus geekies–des–geeks reconnaîtront probablement cette information. Pour tous les autres cela jette une (relativement petite) déchirure dans leur expérience de navigation. Et les parties lisible-par-les-machines des microformats sont supposées être invisibles pour l’utilisateur. Cet affichage de bulle d’aide n’est pas invisible et il peut être déroutant au quotidien pour les utilisateurs (non geeks).

Internationalisation

Une autre plainte souvent entendue sur les microformats est qu’ils ne sont pas "internationalisés." Ce qui veut dire, que quelques-unes des valeurs demandées par les microformats ne font sens que pour ces types qui publient en Anglais-Américain.

Imaginons que les valeurs type acceptées pour telephone dans la hCard : "cell" est la valeur requise à utiliser si vous indiquez un téléphone cellulaire. Les utilisateurs anglo-américains savent probablement ce qu’est un téléphone cellulaire, néanmoins, les lecteurs anglais et français appellent ces types de téléphones "mobile."

A nouveau, des questions d’utilisabilité.

Entrez dans le Modèle de Classe Value

Pour résoudre ces problématiques, la communauté des microformats a travaillé de façon diligente pendant un moment pour parvenir à la solution.
En fait, je me suis même essayé de publier et de tester à la main ce qui s’appelait initialement le « pattern-value-excerption ».

Et tout ce dur travail a finalement payé avec le modèle-de-classe-value, qui offre aux auteurs plusieurs options pour marquer leurs contenus sans avoir à se préoccuper des problématiques d’utilisabilité, d’accessibilité et de localisation mentionnées plus haut.

Information Date & Heure

Je viens de le dire, mais je le redirai : en utilisant le modèle-de-classe-value, les auteurs ont plusieurs options pour marquer l’information de date et d’horaire. Vous choisissez celle que vous aimez ; celle qui vous semble la plus pertinente pour votre contenu et vos préférences. J’en tremble rien qu’à y penser.

Tout d’abord, jetons un oeil à quelques-unes des options pour marquer l’information de date et d’horaire.

Vous Pouvez Encore Utiliser

Le modèle de classe value n’abolit pas l’utilisation du modèle-de-design-abbr pour l’information date-horaire (AKA datetime design pattern). Si vous êtes du côté du "débat" qui pense qu’utiliser abbr avec les valeurs ISO 8601 de date et heure en title fait un sens sémantique, allez-y.

Avant que le modèle de classe value ne soit rentré dans la danse, voici comment vous pouviez marquer votre information date-heure pour dstart dans un hCalendar :

6 juin 2009 à 18h30

Néanmoins, cette méthode est considérée comme dépréciée pour l’information date-heure. Les machines peuvent encore l’analyser, mais désormais avec le modèle-de-classe value, ce n’est plus la méthode recommandée.

Notez néanmoins que le modèle de design abbr en lui-même — pour les expansions de nom de pays, les coordonnées abrégées de latitude / longitude, etc. — est encore complètement valide. Ce n’est que pour l’information date-horaire que les choses changent légèrement.

Quels sont ces changements légers ?

6 juin 2009 à 18h30

Remarquez que la sous-propriété dtstart est assignée au p contenant (qui peut être n’importe quel élément), alors que l’abbr est maintenant assignée au class="value". La valeur title ISO 8601 demeure la même.

Gardez à l’esprit cependant que cet exemple génère encore des problématiques d’accessibilité et d’utilisabilité derrière hAccessibility. Mais ce peut être la méthode préférée de quelques auteurs. La beauté du modèle de classe value est que vous pouvez choisir la méthode qui fonctionne le mieux pour vous.

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe value ci-dessus, utilisant

Test Evénement 1

6 juin 2009 à 18h30

Laissez Tomber le Modèle de Design Abbr

Si vous êtes soucieux des problématiques de lecteur d’écran et d’utilisabilité concernant le modèle de design abbr pour votre information de date-heure, le modèle de classe value est pour vous aussi, grâce au sous-ensemble value-title

Ainsi, au lieu d’utiliser abbr pour contenir le contenu lisible-par-les-humains avec la donnée machine dans l’attribut title, vous pouvez utiliser un élément span nommé class="value-title" et un attribut title contenant la date ISO 8601. Les machines reconnaissent alors que la valeur de la donnée pour cet élément (celle nommée class="value-title") devrait être extraite à partir du title, et non pas du texte à l’intérieur.

18 mai 2009 à 13h00

Ceci réalise l’objectif des microformats pour des données humaines et machine, tout en ~~ne provoquant pas l’affichage des infobulles dans le navigateur~~ n’alertant pas les lecteurs d’écran de lire l’information machine sur la date. La plupart des navigateurs, néanmoins, afficheront encore la valeur en infobulle, l’exception étant Safari 3.0.3 sur Windows XP.

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe-value ci-dessus, en utilisant

Test Evénement 2

18 mai 2009 à 13h00

Séparer la Date & l’Heure

Pour démontrer plus en profondeur le niveau de flexibilité du modèle de classe value, vous pouvez aussi l’utiliser pour spécifier séparément la date et l’heure.

18 mai 2009 à 1 heure de l'après-midi

.

A nouveau, dans cet exemple, j’ai laissé tombé l’usage du abbr et utilise l’approche span class="value-title". Mais cette fois, remarquez que j’ai spécifié séparément la date et l’horaire dans leurs propres éléments span class="value-title" (chacun avec l’information ISO 8601 appropriée dans le title). Les machines peuvent alors combiner les données séparées de date et d’heure à l’intérieur d’une valeur unique date-heure.

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe value, spécifiant séparément la date et l’heure en utilisant

Test Evénement 3

18 mai 2009 à 13h00

Et cette séparation de la date et de l’horaire peut être utilisée avec le modèle de design abbr. En fait, quelques types croient que cela aide à résoudre les problème d’utilisabilité avec les infobulles de date et d’heure. Spécifiquement, les infobulles individuelles résultantes pour la date et l’heure sont plus "utilisables" qu’une infobulle affichant la chaîne complète date-horaire :

Pour ces types, cette implémentation du modèle de classe value appliquée au modèle de design abbr est idéale :

6 juin 2009 à 18h30pm

Vous pouvez simplement définir séparément les valeurs de date et d’heure, chacune avec ses propres abbr class="value" et les valeurs title ISO 8601 appropriées.

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe value, spécifiant séparément la date et l’heure en utilisant

Test Evénement 4

6 juin 2009 à 18h30

Remarquez que je n’utilise pas le sous-ensemble value-title dans cet exemple. C’est parce qu’il ne devrait pas être utilisé avec le modèle de design abbr.

Au moment d’utiliser le modèle de classe value avec le modèle de design abbr, il est seulement nécessaire d’assigner class="value" à l’élément abbr. Les machines savent déjà comment extraire les date et heure ISO 8601 à partir de l’attribut abbr title, ainsi class="value-title" n’est pas nécessaire et invalide.

Sous-Ensemble Value-Title Avec s Vides

Et il y a même encore une autre option à cette heure ; une qui élimine à la fois les infobulles et les expansions de lecteur d’écran.

Vous pouvez aussi utiliser l’approche class="value-title" avec un span vide … bon en fait pas vraiment vide. Un span contenant un seul espace blanc :

18 mai 2009 à 13h00

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe value utilisant le sous-ensemble value-title avec un vide

Test Evénement 5

18 mai 2009 à 13:00

Le résultat final est le même : les utilisateurs reçoivent une information compréhensible de date et d’horaire sur le navigateur et les machines reçoivent la date en ISO 8601. Et une fois de plus, pas de problèmes pour les lecteurs d’écran. Mais cette fois-ci, vous éliminez aussi les infobulles déroutantes.

Il y a quelques règles pour cette implémentation particulière, la première est d’utiliser cette approche "title-value vide" de façon restreinte. Ne l’utiliser que quand vous ne pouvez pas utiliser les autres modèles de design. Et quand vous l’utilisez :

L’élément vide value-title devrait immédiatement suivre l’élément parent, apparaissant avant le contenu lisible-par-les-humains et sans imbrication supplémentaire.
L’élément vide value-title ne devrait être utilisé qu’une fois seulement au moment de définir la valeur de la donnée pour une propriété unique. Aussi il ne devrait pas être utilisé au moment de séparer la date et l’heure dans – par exemple – la valeur dtstart de hCalendar.
L’implémentation value-title vide ne devrait seulement (au moins à cette heure) s’appliquer qu’à :
- Des valeurs de date ISO 8601, dateheure, timezone et durée
- Des valeurs énumérées comme les sous propriétés de hCard tel, email adr
- Les coordonnées pour les latitude et longitude dans le microformat geo
- Les propriétés du numéro de téléphone

Pas Juste pour hCalendar

Les exemples que j’ai couverts à cette heure se concentrent sur l’information de date et d’heure qui apparaîtrait dans hCalendar. Mais vous pouvez appliquer le modèle de classe value à n’importe quel microformat qui références de l’information de date et d’heure. Par exmple, les anniversaires dans la hCard :

class="bday">Mon anniversaire est le 4 septembre.

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe value au-dessus appliqué à bday dans la hCard

Personne Un

Mon anniversaire est le 4 septembre.

Ou pour publier des dates dans hAtom :

class="published">2 juin 2009

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe value au-dessus appliqué à published dans hAtom

Test Post par Auteur Test

3 juin 2009

Localiser Tout en Internationalisant

A ce stade, je n’ai fait que parler du modèle de classe value en relation avec les informations de date et d’heure. Mais vous souvenez-vous de ma précédente discussion sur les problématiques d’internationalisation ? Bon, jetons un oeil sur la manière dont le modèle de classe value peut aider.

Les `type`s de Téléphone

Dans ma précédente référence, je mentionne spécifiquement les types de telephone dans la hCard. La seule valeur valide type pour spécifier un téléphone portable est "cell," mais tout le monde n’appelle pas ainsi ces types de téléphone.

Vous pouvez utiliser le modèle de classe value pour afficher la valeur locale que comprendront vos utilisateurs, et indiquer la valeur de microformat requise via span class="value-title" et l’attribut title :

mobile: 505-123-4567

Dans cet exemple, du fait que j’utilise le sous-ensemble value-title, les machines sauront extraire la valeur de donnée type (cell) provenant de mon attribut title, plutôt que le texte à l’intérieur (mobile).

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe value au-dessus appliqué au type tel dans la hCard

Personne Deux

mobile : 505-123-4567

Numéros de Téléphone Localisés

Un autre exemple (que j’ai volé sur le Microformats Wiki, parce que je m’y connais pas assez en numéros internationaux) est pour les numéros de téléphone localisés. Dans ce cas, un numéro français :

Home: +33 (0) 603 960 492

La logique derrière cette implémentation est que la donnée valide pour le numéro de téléphone est +33603960492. Mais les français sont familiers avec l’inclusion du (0) pour une numérotation locale. A cette heure +330603960492 est un numéro invalide.

Aussi, pour donner aux utilisateurs français locaux l’information la plus utilisable et fournir à nouveau une donnée machine valide pour le numéro, vous appliquez le modèle de classe value. Dans cet exemple, le préfixe +33 est contenu par le span class="value" comme l’est le numéro 603 960 492. Néanmoins le (0) n’est pas contenu par quoi que ce soit. Ainsi les machines concatènent les deux textes à l’intérieur de span class="value" pour former la donnée valide et complète.

Mise à jour : 20 octobre 2009

Exemple dans la ligne du modèle de classe value au-dessus appliqué aux values tel séparées dans la hCard

Personne Trois

Home : +33(0)603 960 492

Mise à jour : 21 décembre 2009

NDT : En d’autres langues pour traduire « Home » en « Domicile » :

Domicile : +33(0)603 960 492

Exemple dans la ligne du modèle de classe value au-dessus appliqué aux values tel séparées dans la hCard

Personne Quatre

Domicile : +33(0)603 960 492

Et il existe encore bien plus d’usages du modèle de classe value. Mais ce billet de blog est déjà plus long que prévu (je ne sais pas pourquoi cela me surprend encore, compte tenu de ma passion pour la verbosité) et j’ai bien d’autres choses à faire … aussi je vous laisse explorer ça plus en profondeur.

Pick your Poison… (NDT : Vous avez l’embarras du choix)

Pas pour suggérer que les microformats sont du poison (en fait ils ne sont que plein de bonnes choses délicieuses), mais j’avais envie de balancer un titre de piètre qualité.

Le point demeure, vous choisissez quelle implémentation de modèle de classe value marchera pour vous. Vous n’êtes pas marié à une méthode de marquage de votre contenu avec ce modèle.

Comme pour mes propres préférences, je ne fais pas partie de ces types intéressés pour continuer à utiliser le modèle de design abbr pour les dates et les heures. Ne me faites pas dire ce que je n’ai pas dit. Je pense vraiment que abbr fait sens sémantiquement parlant pour contenir l’information de date et s’épancher avec ISO 8601 via le title.

Mais parce que j’aime tant la sémantique, je ne suis pas une vraie puriste. Je pense que la valeur non sémantique span class="value-title" offre pour l’accessibilité et l’utilisabilité bien plus de poids et l’emporte sur ma compulsion à être sémantique.

Néanmoins, je ne suis pas trop enthousiaste sur l’usage de l’approche value-title vide. Aussi je ne prévois pas de trop l’utiliser. Pour la majorité de mes propres implémentations utilisant les dates et les heures, je me vois bien faire contenir mon contenu avec span class="value-title" et de spécifier la donnée machine dans l’attribut title.

Il y aura probablement des exceptions à cela, mais c’est ce que j’aime dans le modèle de classe value. Il est flexible pour les besoins des auteurs de contenus.

Mettez à Jour Vos Implémentations

Même si j’ai trouvé le temps pour tomber cet article, je n’ai pas à cette heure encore trouvé le temps de mettre à jour mes implémentations de microformats existants. Mais je le veux … oh, oui je le veux. Et j’espère que vous le ferez, vous aussi.

A cette heure, les développeurs sont en train de travailler leurs outils pour reconnaître proprement le nouveau modèle de classe value. Optimus mène la danse avec sa mise à jour v0.8 qui supporte le modèle de classe value.

Aussi, assurez-vous de prendre votre part et de mettre à jour votre marquage.

Encore d’Autres à Venir ?

Aucune promesse sur ce point de futurs billets pour cette série. J’aimerais couvrir quelques autres microformats, mais avec mes obligations de livre, je doute fortement que j’aurai le temps … au moins pas jusqu’à ce mon manuscrit final soit bouclé en Août.

Mais si vous plongez pour en savoir plus, pourquoi ne pas revisiter quelques-uns de mes précédents articles couvrant :

J’ai aussi donné récemment une rapide présentation des microformats qui pourrait vous intéresser (ou non).

Aussi, jusqu’à la prochaine fois … et oui, il y aura une prochaine étape en rapport avec les microformats même si elle ne fera pas partie de cette série.

♥ Share the Love

Emily Lewis : « Parvenir au Sémantique avec les Microformats – 7° Partie : Thèmes et Problématiques »

xtof — Sun, 20 Dec 2009 20:11:55 +0000

En attendant la livraison de l’ouvrage d’Emily « Microformats Made Simple », j’ai pris plaisir à traduire ce billet critique d’Emily Lewis achevant sa série sur les microformats. Toutes vos critiques seront les bienvenues.

Selon ce que j’avais planifié quand je présentais cette série, nous parvenons à la fin de ce voyage excitant dans le monde des microformats.

Et après avoir passé tout ce temps à critiquer les implémentations spécifiques des microformats sur A Blog Not Limited, je ne voulais pas terminer la série sans quelque sorte de conclusion.

Mais plus j’y pensais, plus je réalisais que je n’étais pas prête pour conclure cette série. Il y a encore bien plus de microformats sur lesquels j’aimerais m’épancher et que je pourrai implémenter sur mon blog ou d’autres sites .

Aussi, ai-je décidé que cet article ne sera pas une conclusion, mais plutôt une réflexion de quelques thèmes et problèmes récurrents remarqués durant ma recherche sur les microformats.

Je ne m’enfoncerai pas plus avec ça.

Bon, non, non vraiment. En plaisantant, j’adore être un peu prétentieuse.

Récapitulatif de la Série

Avant de démarrer, jetons un œil sur ce dont nous avons déjà parlé :

Indiquer les liens basés sur des relations avec l’attribut rel en 1° Partie
Etendre l’attribut rel pour indiquer des relations sociales avec XFN dans la Partie 2
Décrire les personnes, les lieux et organisations avec hCard dans la Partie 3
Décrire des événements et des activités fondées-sur-les-dates-et-horaires avec hCalendar dans la Partie 4
Décrire des blogs, des actualités et autres contenus pour la syndication avec hAtom dans la Partie 5
Décrire les contenus des résumés et CV avec hResume dans la Partie 6

Maintenant que j’en ai terminé avec cette rétrospective, avançons sur les thèmes et questions que j’ai notés durant le processus d’écriture de cette série.

Thème : Sémantique

Dans chacun des articles de cette série, j’ai mentionné la sémantique comme étant l’une des raisons essentielles pour laquelle je suis une fan des microformats.

Ne me faites pas dire ce que je n’ai pas dit, j’adore les parseurs, les moteurs de recherche, les navigateurs et tout ce qui touche et utilise les microformats.

Mais pour moi, en tant que spécialiste du XHTML, la sémantique est vraiment bien plus importante. Et les microformats me permettent même d’être encore plus sémantique.

Le Web Sémantique

Mais je ne pense pas que tout le monde comprenne la sémantique telle qu’elle s’applique au web.

Il y a le Le Web Sémantique :

"… La plupart de l’information sur le Web est conçue pour une consommation humaine, et … la structure de la donnée n’est pas évidente pour un robot qui butine la toile. … l’approche du Web Sémantique développe à la place des langages pour exprimer de l’information sous une forme pouvant être traitée par la machine."

Tim Berners-Lee

En fait, le Web Sémantique est simplement une extension de notre web actuel, mais avec une meilleure information et plus de sens (sémantique) qui permettra aux ordinateurs/machines et aux humains de travailler ensemble plus efficacement.

Et même si les microformats ne sont pas une des spécifications formelles du Web Sémantique, ils supportent vraiment cet objectif de coopération machine-humain. En fait, l’un des fondements des microformats est "conçus tout d’abord pour les humains, puis pour les machines."

Marquage Sémantique

Puis, il y a la sémantique à laquelle je fais généralement référence quand je parle de sémantique : le marquage sémantique, qui est le marquage qui décrit ce qu’est quelquechose au lieu de ce à quoi cela ressemble.

C’est une approche pour le développement avec des standards du web : séparer l’information structurelle de l’information de présentation.

Et pour garder ce discours de geek prétentieuse, on lui a même donné un acronyme : POSH. (NDT ou le Bon Vieux HTML Sémantique aka CHIC).

Mais malgré le sobriquet, cette notion de séparer la structure de la présentation (mieux produite avec la validation) est l’un de mes concepts préférés dans le design/développement web.

Pourquoi mon préféré ? Bon, outre le fait d’être un standard (et, bon sang, j’en viens à adorer les règles quand elles viennent sur le web), le marquage sémantique décrit le contenu lui-même. Non pas ce à quoi ressemblera le contenu, mais ce qu’il est.

Une liste est un

, un en-tête est un

. Je suis une organisatrice/catégorisatrice naturelle, aussi cela fait sens pour moi. Je pense comme ça, aussi j’écris mon marquage de cette façon.

Mais, hormis cette fixation au stade anal, cela a aussi d’autres avantages, y compris celui associé au Web Sémantique : les ordinateurs se fichent bien de à quoi ressemble votre page web.

Les ordinateurs de soucient de la donnée et de l’information sur la page, et peuvent identifier certaines données comme en-têtes par exemple (ce qui offre un bonus pour booster organiquement le SEO).

Ainsi, eu égard à cette notion particulière de sémantique, les microformats portent la sémantique à un autre niveau en ajoutant des métadonnées et attributs au marquage pour fournir encore plus de valeur sémantique et de structure au contenu web.

CSS Sémantique

Encore mieux, le fait que les valeurs class sont ce qui définit un microformat (avec quelques exceptions en rapport aux attributs rel et title), les microformats supportent des conventions de nommage sémantique dans la CSS, dont je suis une farouche partisane.

De mon point de vue, si vous vous souciez d’utiliser un marquage sémantique, ne devriez-vous pas aussi étudier un nommage sémantique CSS ?

Par exemple, pourquoi déclarer un class="rightcolumn" quand il y aura une possibilité à l’avenir que la présentation puisse changer faisant que cet élément ne sera plus à droite ?

Au lieu de cela, déclarez un nom de classe qui décrit ce qu’est le contenu (comme class="relatedcontent") et utilisez les sélecteurs CSS pour définir sa présentation.

Les microformats font exactement cela. Les propriétés et sous-propriétés des microformats sont des valeurs de classe qui décrivent ce qu’est un élément. Par exemple, entry-title dans hAtom.

Problématique : Marquage Inutile

La discussion à propos du marquage sémantique est un va-et-vient incessant dans un problème qui amène beaucoup de gens à penser que c’est une raison de ne pas utiliser les microformats : marquage inutile.

En fait, ce "problème" particulier a été le coeur d’un article récent d’Andy Clarke : A tribute to Microformats (a reader question answered).

Le lecteur faisait remarquer à propos des microformats : "They really look like an excessive amount of tags and classes to me."

Et quand vous jetiez un oeil sur quelques exemples provenant du Microformats Wiki, le lecteur a raison :

<div class="vcard">
CommerceNet
<div class="adr">
<span class="type">Work:
<div class="street-address">169 University Avenue
<span class="locality">Palo Alto, CA 94301
<div class="country-name">USA
<div class="tel">
<span class="type">Work +1-650-289-4040
<div class="tel">
<span class="type">Fax +1-650-289-4041
Email:
<span class="email">info@commerce.net

Ack! Divitis ! Spanitis !

Mais comme Andy l’explique en profondeur (et comme j’espère l’avoir démontré dans tous les exemples de cette série, "vous pouvez construire des [microformats] en utilisant des éléments de marquage qui sont appropriés au contexte du contenu que vous publiez."

Et en ce qui concerne le commentaire du lecteur sur le fait qu’il existe trop de classes, Andy fait remarquer :

"… in the case of mature and widely adopted Microformats such as hCard and hCalendar, each one of these attribute values comes not from the vivid imaginations of the inventors of Microformats, but have been reused from existing, related standards such as vCard and vCalendar. In fact, these attribute values are one–to–one correlations between the two formats and it is this that, for example, makes writing conversion scripts such as Brian Suda’s X2V possible."

Par conséquent, l’argument sur le fait le marquage excessif et la surcharge de classes l’emporte sur tout avantage des microformats n’est pas vraiment un argument. C’est une problématique d’ignorance qui est malheureusement propagée par de pauvres exemples de contenus microformatés.

Problématique : Accessibilité

Un autre sujet qui m’est souvent revenu à l’esprit durant cette série, c’est l’accessibilité et le fait que quelques parties de différents microformats ne sont pas accessibles aux lecteurs d’écran.

Modèle de Design Date-Heure

Mise à jour : 2 juin 2009

Le modèle-de-date-heure est désormais déprécié en faveur modèle de classe value. Voir la partie 8 de cette série pour en savoir plus sur ce nouveau pattern.

J’ai mentionné plusieurs fois le modèle-de-date-heure pour la relation avec hCard, hCalendar et hAtom, tout comme les problématiques d’accessibilité associées à ce modèle et le modèle-de-design-abbr.

Mais cela doit être discuté de nouveau du fait de ce problème d’accessibilité qui est l’une des raisons essentielles pour laquelle les types disent qu’ils n’utilisent pas les microformats.

Premièrement, qu’est-ce que le « datetime design pattern » ?

C’est l’approche recommandée pour définir l’information de date/horaire dans un microformat et cela utilise le modèle-de-design-abbr :

<abbr class="dtstart" title="2008-11-20T09:00:00">20–22 novembre

Vous pouvez voir que l’élément conteneur est un , où l’information contenue est "November 20" et la valeur de l’attribut title est "2008-11-20T09:00:00".

Ce pattern a été développé pour supporter l’un des principes basiques des microformats : conçus d’abord pour les humains, ensuite pour les machines. Tout en visant à fournir à la fois une information à la fois lisible par les humains et par les machines.

La logique est que les machines — telles que les applications web — utiliseront la valeur title, alors que les navigateurs afficheront pour les humains le contenu embarqué dans .

hAccessibility

Aussi joli que ce modèle puisse paraître, il a ses problèmes.

Il y a un peu plus d’un an, The Web Standards Project a posté hAccessibility, qui détaille un problème significatif d’accessibilité avec le « datetime design pattern » utilisant le « abbr design pattern » : les lecteurs d’écrans lisent/parlent les valeurs title.

Par conséquent, à chaque fois que le « datetime design pattern » indique de placer l’information date/horaire ISO 8601 lisible par les machines dans le title, un lecteur d’écrans interprète littéralement la valeur à l’oral.

Imaginez que chaque fois que votre lecteur d’écran rencontre , l’entendre dire ça : "Deux mille huit tiret onze tiret vingt." Et c’est même pire pour des valeurs plus longues avec l’information horaire.

Ceci n’est bien sûr pas convivial pour ces utilisateurs.

A cette heure, ces problématiques n’ont pas été résolues. La task force accessibilité du WaSP a proposé des alternatives au « abbr design pattern », y compris celle-ci qui fait sens selon moi :

March 12, 2007 at 5 PM, Central Standard Time

Non, peut ne pas être l’élément le plus sémantique à utiliser, mais la sémantique est un but, pas un absolu. Il y a des exceptions et la "pureté" de la sémantique n’est pas plus importante que la nécessité d’un contenu web accessible.

Avoir Raison vs. Faire Bien

A cette heure, cette problématique d’accessibilité n’a pas été résolue. Et plus j’en apprends à propos des microformats, moins je comprends pourquoi.

Il me semble, en tant qu’observateur extérieur, qu’il y a une plus grande concentration sur la posture et de savoir "qui a raison" sur cette question, plutôt qu’un effort sérieux pour faire que ça se résolve. Lisez juste quelques commentaires dans l’article du WaSP.

Je vous l’accorde, je comprends complètement les arguments sur le fait que est le bon élément sémantique à utiliser parce que l’attribut title offre une version augmentée des contenus que le tag contient (à l’opposé du contenu pour l’élément comme avec la plupart des tags).

Mais l’accessibilité sur le web (l’enfer, dans la vie) est d’une importance capitale. C’est un droit, pur et simple, que les personnes avec des handicaps aient un accès égal au contenu.

Ceci, outre le fait que cette question d’accessibilité est l’une des principales barrières pour les microformats, c’est pourquoi elle devrait être résolue sans délais (en fait, je pense que ce devrait déjà être résolu). Malheureusement, il ne semble pas que cela arrivera.

Et ceci ne fait que du mal aux microformats.

Thème : Pas Assez d’Outils = Pas Assez d’Avantages

Un autre thème découvert durant cette série (et qui est encore une autre raison pour laquelle les types n’implémentent pas les microformats) : Il y a un réel manque d’outils qui tirent partie des microformats.

Avant quand j’entendais cet argument, je ne le prenais pas suffisamment en considération. Parce que je connais un paquet d’outils qui utilisent, agrègent, extraient, cherchent, etc. les microformats :

Outils Navigateur

Opera reconnaît le microformat rel-home quand il est utilisé dans le d’un document . Le navigateur a une Barre d’Outils de Navigation qui, une fois autorisée, permet aux utilisateurs de naviguer vers la page d’accueil.
L’extension cmSiteNavigation Toolbar 0.8 pour Firefox (1.5-2.0) reconnaît rel-home et affiche les pages web en rapport avec la page en cours dans une barre d’outils pour aider à la navigation.
L’extension Operator pour Firefox reconnaît plusieurs microformats (rel-tag, hCard, hCalendar) et fournit une recherche spécifique en contexte sur d’autres sites web comme Amazon, YouTube and Flickr.
L’extension Tails Export 0.3.5 pour Firefox identifie les microformats sur une page web (hCard, hCalendar, hReview, xFolk, rel-license) et fournit des options d’export. Pour hCard et hCalendar, elle exporte respectivement le contenu microformat dans des fichiers .vcf et .ics, qui peuvent être ajoutés au carnets d’adresses et programmes d’agenda.
rel-lint est un bookmarklet basé-sur-JavaScript qui vérifie s’il y a des valeurs XFN connues et fait remarquer celles qu’il ne reconnaît pas.
L’extension Safari Microformats est utile pour les utilisateurs de Safari afin d’identifier les microformats hCard sur une page web et les sauvegarder dans leurs programmes de carnets d’adresses.
Le Bookmarklet Microformats indépendant du navigateur imite la fonctionnalité de l’extension Safari pour l’information hCard.
Michael Kaply a créé un script utilisateur hAtom pour l’extension Operator de Firefox. Ce script ajoute une fonctionnalité supplémentaire de bookmarking pour les occurences hentry.
Mapanui est un bookmarklet en beta qui tire partie des microformats pour situer des adresses sur une carte, sans quitter la page.

Moteurs de Recherche & Spiders

La plateforme ouverte SearchMonkey de Yahoo! tire parti du contenu RDF et microformat extrait pour les développeurs de parties-tiers.
L’API Social Graph de Google indexe le web sur XFN pour aider à rendre le web plus social et qu’il y soit plus facile d’y trouver des amis.
Creative Commons Search de Yahoo! filtre le contenu basé sur rel-license.
Google offre aussi une recherche qui filtre les contenus selon rel-license : "Filtres de droits d’utilisation pour trouver du contenu ou des images réutilisables".
Rubhub est un moteur de recherche social où vous pouvez proposer votre site, et il est indexé et comparé à d’autres sites dans l’index rubhub pour identifier toutes les relations sociales existantes.
LeGraphe Social Ouvert de Plaxo fait tourner un crawler qui démarrer par une URL que vous saisissez et il cherche les liens rel="me" pour aider à la consolidation d’identité.
XFN Graph crée des diagrammes sur la façon dont les sites sont liés les uns aux autres, en fournissant une représentation visuelle de relations sociales entre les auteurs de sites/blogs.
Technorati Microformats Search cherche les hCards et d’autres microformats hCalendar et hReview.

Outils de Création

Créateur XFN 1.1 est un wizard web qui crée des liens avec des valeurs XFN, et il est disponible en plusieurs langues.
MT Blogroll 2.12 Manual est une extension Movable Type qui vous permet de définir les relations XFN pour les liens de blogroll.
XFN Link Creator est un autre wizard qui crée des liens avec des valeurs XFN. Il vous permet aussi de spécifier le marquage contenu, tout comme les valeurs title pour les liens.
WordPress Links Manager est configuré pour définir les relations XFN pour les liens de la blogroll.
WP Microformatted Blogroll 0.2 est une extension WordPress qui produit des liens annotés de microformats sur votre blog.
hCard creator est un formulaire simple qui génère une hCard à partir de l’information proposée.
hCard microformat validator vous laisse proposer une URL avec du contenu hCard, et puis valide les propriétés et sous-propriétés.
hCalendar Creator, un don de la communauté microformats, est un formulaire qui génère un marquage hCard et les propriétés/sous-propriétés à partir de l’inforamtion que vous proposez.
Les extensions pnh_mf plugin et JMC_Event_Manager vous donnent un moyen facile d’ajouter du contenu microformat sur votre site/blog Textpattern.
WordPress, a aussi quelques extensions qui aident les auteurs web à ajotuer des microformats sur leurs blogs/sites : Structured Blogging (aussi disponible pour MovableType) et WP-Microformats.
Grâce à WaSP, il existe une extension microformats pour Dreamweaver, qui a été conçue pour DW 8, mais ils disent qu’elle fonctionne aussi pour MX et les versions supérieures.
Le Conference Schedule Creator vous aide à créer un progamme complet de conférence avec tous les événements marqués avec hCalendar.
Le thème WordPress Sandbox est un thème « squelette » qui peut être utilisé comme fondation pour personnaliser des thème WP et il supporte hAtom.
Frances Berriman a créé une boucle PHP WordPress hAtom qui peut être ajoutée aux thèmes WP existants.
hResume creator génère un hResume à partir de l’information proposée.
Le « hResume Project » a créé une extension hResume pour WordPress.
CV Antix est un constructeur de résumé/CV basé sur le web.

Parseurs & Extracteurs

H2VX offre un Service de fils d’Evénements et Service de Fils de Contacts qui transforme l’information hCalendar et hCard en fichiers .ics et .vcf .
Optimus est un transformateur robuste de microformats qui supporte tous les microformats et fournit un validateur.
X2V de Brian Suda est une feuille de style XSLT qui extrait l’information hCalendar et hCard provenant d’une page web pour créer respectivement des fichiers iCalendar et vCard.
Elias Torres a créé un script Greasemonkey hCalendar + Google Calendar Reminders qui identifie l’information hCalendar sur une page web et fournit une icône pour ajouter cet événement à votre Google Calendrier.
Il existe un transformateur hAtom qui extrait hAtom provenant d’une page de façon à ce qu’il puisse être automatiquement transformé en XML pour un fil de syndication Atom.
hAtom2Atom utilise XSLT pour transformer un marquage hAtom en Atom XML.
Il existe un remote proxy utilisant hAtom2Atom produit par Luke Arno, tout comme un script de filtrage utilisant hAtom2Atom de Chris Casciano .
hAtom transcoder est un autre transformateur qui non seulement génère Atom 1.0, mais aussi RSS 2.0.
Il existe une extension hResume LinkedIn pour WordPress qui extrait le contenu du hResume provenant d’un profil public LinkedIn, qui peut ensuite être ajouté à une page WordPress..

Et ce ne sont là que quelques exemples trouvés durant ma recherche pour cette série. Il en existe bien plus encore.

What About Joe Six Pack?

Aussi, aucune question il y a des ressources.

Mais ensuite j’ai fait un petit sondage informel auprès de quelques collègues designers/développeurs web pour avoir leurs opinions sur les microformats.

Plusieurs types soulignaient que bien qu’il existe des outils pour aider les développeurs et geeks à produire facilement des microformats, il n’y a actuellement rien qui ne rende les microformats utiles pour les gens normaux.

Vu sous cet angle, je ne peux aider mais suis d’accord avec cet argument. C’est vrai, ma soeur n’a pas la moindre idée de ce que sont les microformats. Même si je lui ai montré une extension Firefox, elle ne les utilisera jamais ou ne s’en souciera même pas.

Ceci étant dit, j’utiliserai encore les microformats à chaque fois que j’aurai une opportunité de faire ainsi. Parce que je crois que ce manque de ce que qualifierai d’"innovation commune" est partiellement lié au fait que les microformats ne sont pas encore très utilisés.

Si tout le monde les utilisait dans leurs sites web, il y aurait alors bien plus de développement pour les supporter et démontrer leurs avantages à toutes les communautés (geek et non geek).

Et bien que je déteste le film, la citation "Si tu le construis, ils viendront" de Jusqu’aù bout du rêve me revient à l’esprit. Si plus de gens utilisaient les microformats, je pense que plus d’outils seraient développés.

En fait, je pense que la sortie récente de la boîte à outils Oomph Microformats est un pas dans cette direction.

J’ai récemment critiqué Oomph, et je trouve que c’est l’un des premiers outils microformats qui rend sur un site la présence des microformats apparente pour tout utilisateur, indépendamment de son navigateur et/ou des extensions.. Jetez simplement un coup d’oeil dans le coin en haut à gauche de ce site pour le voir en action.

Thème : RDF vs. Microformats

Bien que je n’ai pas une seule fois mentionné RDF dans tous les articles de cette série, ce serait négligent de ma part si je ne parlais pas de la division existante chez tous les supporteurs web sémantique : RDF est mieux que microformats et vice versa.

Mais après avoir fait un peu de recherche sur le sujet, je réalise que cette division est simplement le résultat de sensationalistes et de "know-betters" qui empestent notre industrie.

Ils ont besoin de quelque chose à défendre pour se sentir supérieurs, et le débat RDF vs microformats est une belle plate-forme pour se chamailler … tout particulièrement quand ces types ne se soucient pas de se comprendre les uns les autres.

RDF : Les Fondamentaux

Aussi, essayons de comprendre un peu RDF :

RDF est une spécification du W3C pour décrire l’information, telle que titre, auteur, date de modification, contenu et information de copyright.
RDF a été conçu pour fournir un commun afin de décrire cette information de manière à ce qu’elle puisse être lue et comprise par les applications informatiques, mais non affichée sur un navigateur pour les humains.
RDF est écrit en XML de manière à ce que cette information puisse être échangée entre différents types d’ordinateurs utilisant différents types de systèmes d’exploitations et de langages d’application.

C’est la plus superficielle des descriptions, mais selon moi tout du moins, il apparaît que RDF et microformats ne partagent qu’une seule chose en commun : décrire l’information.

RDF est beaucoup plus concentré sur la vision du Web Sémantique.

Microformats, en Comparaison

Les microformats ne sont pas et n’ont jamais été conçus pour être un remplacement de RDF. Ils ont leur propre place et leur promesse : ajouter des métadonnées au contenu web avec des technologies existantes et des standards (XHTML et CSS).

Et ils sont simples pour encourager un usage et une consommation massive. RDF, en comparaison, tout du moins de mon point de vue, n’est pas simple du tout.

En outre, les microformats se soucient plus d’un marquage sémantique que le Web Sémantique. Bien que je crois vraiment que l’utilisation d’un marquage sémantique peut jouer un rôle dans le Web Sémantique en introduisant des métadonnées pour plus de personnes.

Par conséquent, même si vous verrez jaillir ces arguments RDF vs microformats, réalisez que ce sont des comparaisons illogiques entre des pommes et des oranges.

RDF et microformats sont deux choses différentes. RDF est un format de donnée pour Le Web Sémantique, alors que les microformats sont un modèle de design pour du balisage sémantique.

Tous les deux servent un objectif. Tous les deux sont valables.

Problématique : Information Compliquée

Durant toute ma recherche pour ces articles — sans mentionner le temps passé à implémenter les différents microformats — la seule chose qui m’a ennuyée était le manque d’information compréhensible, tout particulièrement sur le Wiki Microformats.

J’ai évoqué cette frustation dans la Partie 6, mais je le répète à nouveau parce que je suis d’humeur à tempêter.

Mais avant que je n’arrête à rouspéter sur ce point relativement mineur, j’ai vraiment besoin de reconnaître que le wiki est précieux. Ses auteurs et contributeur sont vraiment responsables de mon intérêt pour les microformats et de ma capacité à les implémenter.

Ceci étant dit, je trouve que la majorité du contenu sur le wiki est bien trop "techy" pour les microformats, et que les exemples (que j’ai cités) ne représentent pas les "bonnes pratiques" pour du marquage sémantique.

Les microformats sont volontairement simples. Mais quelque part, le contenu sur le wiki les fait apparaître comme quelque chose de bien plus compliqué que nécessaire.

Le wiki est aussi jonché d’information dépréciée et de liens brisés. Bon, édite-le alors, non ? C’est un wiki …

C’est vrai, je devrai prendre quelque responsabilité ici. Mais j’ai à peine le temps d’écrire ces articles pour mon propre blog.

Peut-être suis-je naïve de supposer que les types derrière le wiki aurait quelque sorte de modérateur ou de contrôle qualité, mais je ne peux m’empêcher de penser qu’ils ont une responsabilité pour s’assurer que l’information sur le wiki ne soit pas seulement mise à jour et correcte, mais représente le meilleur des microformats (tout particulièrement dans les exemples de code).

Je n’ai pas de solution à ce problème particulier autre que d’encourage plus de personnes à écrire leurs propres expériences des microformats, comme je l’ai fait. Je pense que les mettre en termes pratiques avec un langage conversationnel, rendra les microformats bien plus savoureux que ne le fait le wiki.

Aussi, le wiki a été mis à jour récemment, peut-être que l’attention sera renouvelée sur cette ressource particulière par les types des microformats.

Thème : I love Microformats

Le principal thème que j’ai remarqué durant cette série est que j’aime vraiment les microformats et prévois de les utiliser à chaque fois que j’en aurai l’opportunité parce qu’ils :

Utilisent ce que je connais déjà (XHTML et CSS)
Sont faciles à implémenter
Ajoutent de l’information sémantique à mon contenu
Ont du potentiel pour les technologies futures

Les arguments contre eux — manque de technologie et d’accessibilité — sont valides, mais pour moi, ce ne sont pas de vrais arguments.

Il y a des obstacles que les microformats doivent franchir, et pas de raison de ne pas passer un petit peu de temps supplémentaire et d’effort à les ajouter au balisage.

La Suite ?

Je vais faire une pause un moment sur ces articles qui ont été chronophages (pas trop longtemps, promis). Mais je sais que j’en écrirai quelques autres.

Il y a d’autres microformats qui m’intéressent vraiment, hReview, xFolk et XOXO. Aussi j’étudierai les opportunités d’essayer ces microforamts. Et ne manquerai pas d’écrire à leur propos.

Qu’est-ce que vais écrire ensuite ? J’ai plus de développement backend à faire sur ce blog, et prévois d’écrire à ce sujet. Je suis aussi intéressée à rendre ce blog (et tous les autres sites sur lesquels je travaille) prêts pour le WCAG 2.0, aussi je pense qu’une série se prépare sur l’accessibilité.

Hugs & Kisses

Pour conclure, je veux juste remercier tous ceux qui ont lu ces articles et participé à la discussion. Et merci à mes collègues qui m’ont offert leurs points de vue et feedbacks. Aussi merci à tous ceux qui m’ont contactée via email et Twitter pour me faire savoir combien ces articles leur ont été utiles.

Cette expérience a dépassé de loin toutes mes attentes. Non seulement j’en sais plus à propos des microformats que j’en j’ai démarré, mais me sens honorée d’avoir encouragé d’autres personnes à en savoir plus.

Mise à jour : 1/08/2009

Jan Sládek a traduit cet article en Tchèque Kódujme sémanticky s mikroformáty: náměty a problémy.

♥ Share the Love

♥ Delicious
♥ Digg
♥ Ma.gnolia
♥ Script & Style
♥ StumbleUpon
♥ Design Float
♥ Reddit

Passez le Mot

Vous voulez partager cet article avec d’autres ? Utilisez SVP l’URL raccourcie : http://tr.im/IbfJ.

Et bien sûr, vous pouvez toujours tweeter ça. Allez-y. Vous en avez envie.

Microformats : Quoi de Neuf ?

xtof — Sun, 22 Nov 2009 10:42:43 +0000

Essayant tant bien que mal de mettre à jour une version francophone sur le wiki des microformats, je suis toujours heureux de constater la productivité des derniers mois pour l’avancée des spécifications. L’article qui suit est une première traduction à la volée du dernier article du blog des microformats publié par Tantek le 6 octobre dernier. En espérant que cela puisse vous donner envie d’essayer. Ne serait-ce que publier une belle hCard sur votre site personnel ? Je serais aussi très tenté pour localiser quelques ateliers pratiques dans la lignée de ce que produit Tantek au mois de décembre prochain à San Francisco. Si vous êtes dans le SEO, l’expérience-utilisateur ou fan des standards du web, et si ça vous tente de participer à l’animation et la production… appelez-moi, lâchez-moi un tweet ou venez m’aider sur cette page-wiki d’ébauche d’ateliers. A bientôt. twitter:xtof_fr

Quoi de neuf dans les Microformats ?

nouvelles implémentations de hResume et hCard
quelques hCards magnifiques et les hCards sur MySpace
nouveaux tutoriels et développements

nouvelles implémentations de hResume et hCard

Le nouvel importateur hResume de Madgex propulse le service récemment lancé par le Guardian UK. Le site YIID (Your Internet Identity) supporte désormais l’importation des hResumes.

Les librairies de parsage OpenSource continuent à se développer en plusieurs langues. La dernière de Tom Morris sur la page parseurs, est la librairie Java org.microformats.hCard écrite par Reinier Zwitserloot.

hCards magnifiques et hCards sur MySpace

Les hCards personnelles existent depuis des années, mais nous avons vu récemment de plus en plus de designers web publier leur identité en utilisant de superbes hCards magnifiquement stylisées avec de superbes compléments de formes et de fonctions. Trois en particulier :

Toutes les trois font un bon usage du stylisme et de la mise en forme CSS et de Javascript pour les effets dynamiques. La dernière des 3, celle de Jared est plus simplement stylisée que les deux autres, néanmoins si vous la regardez de plus près, sa lite de réseaux de messagerie affiche aussi un indicateur de présence sur chacun d’eux.

Vous disposez d’une hCard magnifique que vous voulez faire remarquer ? Ajoutez-la sur la page wiki hCard exemples dans la jungle.

Il est important de faire connaître les hCards individuelles comme celles ci-dessus, comme la preuve que les personnes écrivent vraiment des pages web, du HTML, du marquage en général, à la main. Même si de telles pages sont générés à partir d’un formulaire HTML à remplir, une personne peut encore écrire le modèle à la main. Et il est important de souligner que ces exemples de modèles mis à jour supportent aussi les microformats.

La liste des sites sociaux avec des profils hCard continue à grandir, cette fois-ci avec un bel ajout : MySpace.

Il y a environ un mois, tous les nouveaux profils MySpace et tous les utilisateurs actuels qui mettent à jour leurs profils en version 2.0, bénéficient automatiquement du support hCard, comme cela a été confirmé par les développeurs de la plateforme MySpace.

nouveaux tutoriels et développements

Derrière toutes ces nouvelles implémentations et ces sites, existe une communauté active et vibrante, pas simplement sur microformats.org, mais sur tout le web en tant qu’ensemble, et aussi sur les communautés de développement web.

La communauté des standards Dev Opera a publié récemment un superbe article de Christopher Schmitt pour Styliser et extraire hCalendar, et cet article a été mis à jour avec l’utilisation du modèle de classe value pour une meilleure accessibilité.

Safari Books Online et New Riders ont publié une vidéo, Designing with Microformats for a Beautiful Web, par le designer bien connu Andy Clarke.

Et pour conclure, le mois dernier a vu la résolution de toutes les problématiques tant sur hCard et hCalendar, pavant le chemin pour des mises à jour des specs, FAQs, et drafts 1.0.1, incorporant d’importantes mises à jour, corrections, et améliorations de brainstorming.

La communauté des microformats avance à grand pas. Ne reste plus qu’à la faire vivre en francophonie !

Pour suivre l’avancée des mises à jour microformats, assurez-vous de vous abonner à la liste de discussion microformats discuss et de suivre @microformats.

xtof » microformats

Facebook Ajoute les Microformats hCalendar et hCard à des Millions d’Événements

Rich Snippets de Google : Amélioration de l’Outil de Test, Fils d’Ariane et Evénements

Améliorations de l’outil de Test

Marquage des Rich snippets markup pour les fils d’Ariane

Evénements

microformats.org a 5 ans : 2 Milliards de Pages Avec des hCards, 94% de Rich Snippets

Google ajoute le support des hCalendar et hRecipe aux « Rich Snippets »

hCalendar

hRecipe

Faire Craquer la Prédominance de Facebook : Un Nouveau Protocole de Commentaire Inter-Réseaux Pourrait Changer le Jeu

Les Joueurs

L’Interoperabilité en tant que Fondation pour le Choix, l’Innovation et le Contrôle par l’Utilisateur

Extension hReview pour WordPress (critique)

hProduct : Pour définir les produits de consommation

Syntaxe

Marquage

Microformats Made Simple

Combinaison de microformats

Emily Lewis : « Parvenir au Sémantique avec les Microformats – 8ème partie : Modèle-de-Classe-Value »

Laissez-moi Rafraîchir votre Mémoire !

hAccessibilité

Utilisabilité

Internationalisation

Entrez dans le Modèle de Classe Value

Information Date & Heure

Vous Pouvez Encore Utiliser

Laissez Tomber le Modèle de Design Abbr

Séparer la Date & l’Heure

Sous-Ensemble Value-Title Avec s Vides

Pas Juste pour hCalendar

Localiser Tout en Internationalisant

Les types de Téléphone

Numéros de Téléphone Localisés

Pick your Poison… (NDT : Vous avez l’embarras du choix)

Mettez à Jour Vos Implémentations

Encore d’Autres à Venir ?

♥ Share the Love

Emily Lewis : « Parvenir au Sémantique avec les Microformats – 7° Partie : Thèmes et Problématiques »

Récapitulatif de la Série

Thème : Sémantique

Le Web Sémantique

Marquage Sémantique

CSS Sémantique

Problématique : Marquage Inutile

Problématique : Accessibilité

Modèle de Design Date-Heure

hAccessibility

Avoir Raison vs. Faire Bien

Thème : Pas Assez d’Outils = Pas Assez d’Avantages

Outils Navigateur

Moteurs de Recherche & Spiders

Outils de Création

Parseurs & Extracteurs

What About Joe Six Pack?

Thème : RDF vs. Microformats

RDF : Les Fondamentaux

Microformats, en Comparaison

Problématique : Information Compliquée

Thème : I love Microformats

La Suite ?

Hugs & Kisses

♥ Share the Love

Passez le Mot

Microformats : Quoi de Neuf ?

Quoi de neuf dans les Microformats ?

nouvelles implémentations de hResume et hCard

hCards magnifiques et hCards sur MySpace

nouveaux tutoriels et développements

Les `type`s de Téléphone