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
       ...
(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 HT...
Ce que n’est pas un microformat


• Un nouveau langage
• Infiniment extensible
• Destiné à changer les habitudes de tout le...
Les principes
• Résoudre un problème spécifique
• Rester aussi simple que possible
• Créer pour l'humain en premier, la mac...
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,...
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

 •   g...
Les propriétés de hCard
• adr : address — Adresse(s)
 •   street-address : rue
 •   extended-address
 •   postal-code : co...
Les propriétés de hCard

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

• org : organization — Compagnie, société
  •   organization-name

  •   organization-unit : Divi...
Les propriétés de hCard

     agent, bday, category, class,
    geo (latitude, longitude), key,
     label, mailer, note, ...
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>
Essayons hCard

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



<section class="vcard">
  <h1 ...
Essayons hCard
<section class="vcard">
  <h1 class="fn n">
    <span class="given-name">Nicolas</span>
    <span class="fa...
Essayons hCard
<section class="vcard">
  <h1 class="fn n">
    <span class="given-name">Nicolas</span>
    <span class="fa...
Essayons hCard
<section class="vcard">
  <h1 class="fn n">
    <span class="given-name">Nicolas</span>
    <span class="fa...
Essayons hCard
<section class="vcard">
  <h1 class="fn n">
    <span class="given-name">Nicolas</span>
    <span class="fa...
Essayons hCard
<section class="vcard">
  <h1 class="fn n">
    <span class="given-name">Nicolas</span>
    <span class="fa...
Essayons hCard
<section class="vcard">
  <h1 class="fn n">
    <span class="given-name">Nicolas</span>
    <span class="fa...
Essayons hCard
<section class="vcard">
  <h1 class="fn n">
    <span class="given-name">Nicolas</span>
    <span class="fa...
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
      ...
Les propriétés de hCalendar

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

        rdate, rrule, category,
          description, uid,
      geo (latitude, longitude),
...
Essayons hCalendar
<div class="vevent">
  <h2 class="summary">Cours sur les microformats</h2>
  <abbr class="dtstart" titl...
Essayons hCalendar
<div class="vevent">
  <h2 class="summary">Cours sur les microformats</h2>
  <abbr class="dtstart" titl...
Essayons hCalendar
<div class="vevent">
  <h2 class="summary">Cours sur les microformats</h2>
  <p>17 mars 2010 de <abbr c...
Essayons hCalendar
<div class="vevent">
  <h2 class="summary">Cours sur les microformats</h2>
  <p>17 mars 2010 de <abbr c...
Essayons hCalendar
<div class="vevent">
  <h2 class="summary">Cours sur les microformats</h2>
  <p>17 mars 2010 à <abbr cl...
Essayons hCalendar
<div class="vevent">
  <h2 class="summary">Cours sur les microformats</h2>
  <p>17 mars 2010 de <abbr c...
Essayons hCalendar
<div class="vevent">
  <h2 class="summary">Cours sur les microformats</h2>
  <p>17 mars 2010 de <abbr c...
Un dernier petit mot…

• RDFa
• Microdata
• Participez !
Ressources

•   Microformats http://microformats.org

•   Operator https://addons.mozilla.org/fr/firefox/addon/4106

•   hC...
Contact


   Nicolas Le Gall
slides@neovov.com
twitter.com/neovov
Prochain SlideShare
Chargement dans…5
×

Microformats

1 379 vues

Publié le

Cours d'introduction aux microformats.

Publié dans : Formation, Technologie, Business
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 379
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
24
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

  • Qui a fait du HTML5 depuis mon intervention ?
    Qui a entendu parler des microformats ?
    Qui sait ce que c&apos;est ?































  • Microformats

    1. 1. Les microformats
    2. 2. Avant de commencer… …quelques questions !
    3. 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. 4. (Sémantique ?) • Donner du sens • Expliquer des concepts • Pour quel interlocuteur ?
    5. 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. 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. 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. 8. Les plus connus • hCard • hCalendar • XFN • RelNoFollow • RelLicense • RelTag
    9. 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. 10. Comment ça marche ? • Principalement avec deux attributs : • class • rel • … et les propriétés du microformat
    11. 11. hCard • Représenter une carte de visite • Exporter dans son carnet d’adresses
    12. 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. 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. 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. 15. Les propriétés de hCard • org : organization — Compagnie, société • organization-name • organization-unit : Division, cellule • title • logo
    16. 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. 17. Essayons hCard <section class="vcard"> <h1 class="fn">Nicolas Le Gall</h1> </section>
    18. 18. Essayons hCard <section class="vcard"> <h1 class="fn">Nicolas Le Gall</h1> </section>
    19. 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. 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. 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. 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. 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. 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. 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. 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. 27. hCalendar • Noter des événements • Exporter dans mon calendrier
    28. 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. 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. 30. Les propriétés de hCalendar rdate, rrule, category, description, uid, geo (latitude, longitude), attendee (partstat, role), contact, organizer, attach, status
    31. 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. 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. 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. 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. 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. 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. 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. 38. Un dernier petit mot… • RDFa • Microdata • Participez !
    39. 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. 40. Contact Nicolas Le Gall slides@neovov.com twitter.com/neovov

    ×