Your SlideShare is downloading. ×
Microformats
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Microformats

1,189
views

Published on

Cours d'introduction aux microformats.

Cours d'introduction aux microformats.

Published in: Education, Technology, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,189
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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































  • Transcript

    • 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