Cours d'introduction aux microformats.

1. Les microformats

2. Avant de commencer…
…quelques questions !

3. 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

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

5. 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

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

7. Les principes
• Résoudre un problème spécifique
• 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

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

9. 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

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

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

12. 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

13. 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-office-box : boite postale
• type : travail, personnelle, etc.
• value

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

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

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

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

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

19. 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>

20. 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>

21. 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>

22. 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>

23. 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>

24. 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>

25. 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>

26. 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>

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

28. 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

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

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

31. 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>

32. 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>

33. 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>

34. 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>

35. 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>

36. 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>

37. 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>

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

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

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