Microformats

Les microformats

Avant de commencer… …quelques questions !

Les microformats « Un microformat est une approche de formatage de données et de métadonnées qui vise à faciliter son exploitation. » — Wikipedia Une manière d'enrichir la sémantique de vos documents

(Sémantique ?) • Donner du sens • Expliquer des concepts • Pour quel interlocuteur ?

Ce qu’est un microformat • Une manière d'aborder les données • Des principes pour manipuler les données • Très lié au HTML sémantique et à la sémantique

Ce que n’est pas un microformat • Un nouveau langage • Inﬁniment extensible • Destiné à changer les habitudes de tout le monde ou réécrire ce qui fonctionne

Les principes • Résoudre un problème spéciﬁque • Rester aussi simple que possible • Créer pour l'humain en premier, la machine ensuite • Utiliser les standards • Modularité / Intégration • Favoriser la séparation de métier

Les plus connus • hCard • hCalendar • XFN • RelNoFollow • RelLicense • RelTag

Les moins connus adr, geo, hAtom, hAudio, hListing, hMedia, hNews, hProduct, hRecipe, hResume, hReview, rel-directory, rel- enclosure, rel-home, rel-payment, robots exclusion, VoteLinks, xFolk, XMDP, XOXO — Wiki microformats

Comment ça marche ? • Principalement avec deux attributs : • class • rel • … et les propriétés du microformat

hCard • Représenter une carte de visite • Exporter dans son carnet d’adresses

Les propriétés de hCard • fn* : function name — nom de fonction • n : name — nom • family-name : nom de famille • given-name : prénom • additional-name : deuxième prénom • honorific-prefix : Titre honorifique • honorific-suffix

Les propriétés de hCard • adr : address — Adresse(s) • street-address : rue • extended-address • postal-code : code postal • locality : ville • country-name : pays • region : région / département / état • post-ofﬁce-box : boite postale • type : travail, personnelle, etc. • value

Les propriétés de hCard • tel : téléphone(s) (type, value) • email : mail(s) (type, value) • nickname : Surnom • photo • url : Adresse web

Les propriétés de hCard • org : organization — Compagnie, société • organization-name • organization-unit : Division, cellule • title • logo

Les propriétés de hCard agent, bday, category, class, geo (latitude, longitude), key, label, mailer, note, rev, role, sort-string, sound, tz, uid

Essayons hCard <section class="vcard"> <h1 class="fn">Nicolas Le Gall</h1> </section>

Essayons hCard <section class="vcard"> <h1 class="fn">Nicolas Le Gall</h1> </section> <section class="vcard"> <h1 class="fn n"> <span class="given-name">Nicolas</span> <span class="family-name">Le Gall</span> </h1> </section>

Essayons hCard <section class="vcard"> <h1 class="fn n"> <span class="given-name">Nicolas</span> <span class="family-name">Le Gall</span> </h1> <p class="adr"> <span class="street-address">27 Ter, rue du progrès</span> <span class="postal-code">93100</span> <span class="locality">Montreuil</span> </p> </section>

Essayons hCard <section class="vcard"> <h1 class="fn n"> <span class="given-name">Nicolas</span> <span class="family-name">Le Gall</span> </h1> <p class="adr"> <span class="type">Personnelle</span> : <span class="value"> <span class="street-address">27 Ter, rue du progrès</span> <span class="postal-code">93100</span> <span class="locality">Montreuil</span> </span> </p> </section>

Essayons hCard <section class="vcard"> <h1 class="fn n"> <span class="given-name">Nicolas</span> <span class="family-name">Le Gall</span> </h1> <p class="adr">…</p> <p class="email"> <span class="type">Personnelle</span> : <a class="value" href="mailto:me@neovov.com">me@neovov.com</a> </p> </section>

Essayons hCard <section class="vcard"> <h1 class="fn n"> <span class="given-name">Nicolas</span> <span class="family-name">Le Gall</span> </h1> <p class="adr">…</p> <p class="email">…</p> <p>Vous pouvez me retrouver sur <a class="url" href="http://blog.neovov.com">mon blog</a> ou sur <a class="url" rel="me" href="http:// twitter.com/neovov/">mon Twitter</a>.</p> </section>

hCalendar • Noter des événements • Exporter dans mon calendrier

Les propriétés de hCalendar • •dtstart* : Date de début (ISO 8601) Dates • 2010 • 2010-03 • 2010-03-17 et 20100317 • 2010-W11 et 2010W11 (semaine 11) • 2010-W11-3 et 2010W113 (mercredi de la semaine 11) • 2010-076 et 2010076 (76ème jour de l’année) • Heures • 15 (15h) • 15:31 et 1531 (15h31) • 15:31:24 et 153124 (15h31 et 24 secondes) • +01, +01:00 et +0100 (décalage horaire par rapport à UTC) • Date combinée : 2010-03-17T15:31:24Z+01:00 • Durées, intervalles, récurrences

Les propriétés de hCalendar • summary* : Résumé de l’événement • dtend : Date de ﬁn • duration : Durée • location : Lieux • url : Adresse web

Les propriétés de hCalendar rdate, rrule, category, description, uid, geo (latitude, longitude), attendee (partstat, role), contact, organizer, attach, status

Essayons hCalendar <div class="vevent"> <h2 class="summary">Cours sur les microformats</h2> <abbr class="dtstart" title="2010-03-17T15:00">17 mars 2010 à 15h</abbr> </div>

Essayons hCalendar <div class="vevent"> <h2 class="summary">Cours sur les microformats</h2> <p>17 mars 2010 de <abbr class="dtstart" title="2010-03-17T15:00">15h</abbr> à <abbr class="dtend" title="2010-03-17T17:30">17h30</abbr>.</p> </div>

Essayons hCalendar <div class="vevent"> <h2 class="summary">Cours sur les microformats</h2> <p>17 mars 2010 à <abbr class="dtstart" title="2010-03-17T15:00">15h</abbr> (<abbr class="duration" title="PT2H30M">2h30</abbr>).</p> </div>

Essayons hCalendar <div class="vevent"> <h2 class="summary">Cours sur les microformats</h2> <p>17 mars 2010 de <abbr class="dtstart" title="2010-03-17T15:00">15h</abbr> à <abbr class="dtend" title="2010-03-17T17:30">17h30</abbr>.</p> <p class="location">27 Ter, rue du progrès 93100 Montreuil</p> </div>

Un dernier petit mot… • RDFa • Microdata • Participez !

Ressources • Microformats http://microformats.org • Operator https://addons.mozilla.org/fr/ﬁrefox/addon/4106 • hCard http://microformats.org/wiki/hcard-fr • hCard Creator http://microformats.org/code/hcard/creator • hCalendar http://microformats.org/wiki/hcalendar-fr

Contact Nicolas Le Gall slides@neovov.com twitter.com/neovov

Microformats

by Neovov on Oct 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Microformats — Presentation Transcript