SlideShare una empresa de Scribd logo
1 de 40
Descargar para leer sin conexión
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
• Infiniment extensible
• Destiné à changer les habitudes de tout le
  monde ou réécrire ce qui fonctionne
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
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-office-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>
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="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">
    <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>
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 fin
 • 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>
  <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 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>
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/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
Contact


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

Más contenido relacionado

Similar a Microformats

Adbs2012presentation 120527125034-phpapp02
Adbs2012presentation 120527125034-phpapp02Adbs2012presentation 120527125034-phpapp02
Adbs2012presentation 120527125034-phpapp02ABES
 
SPARQL, comment illuminer vos mashups en consommant les données du Linked Data ?
SPARQL, comment illuminer vos mashups en consommant les données du Linked Data ?SPARQL, comment illuminer vos mashups en consommant les données du Linked Data ?
SPARQL, comment illuminer vos mashups en consommant les données du Linked Data ?Antidot
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !davrous
 
20150402 meetup r addicts du printemps
20150402  meetup r addicts du printemps20150402  meetup r addicts du printemps
20150402 meetup r addicts du printempsduretteb
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTMLNeovov
 
Elasticsearch - Esme sudria
Elasticsearch - Esme sudriaElasticsearch - Esme sudria
Elasticsearch - Esme sudriaDavid Pilato
 
Document et structure : vers un web socio-sémantique
Document et structure : vers un web socio-sémantiqueDocument et structure : vers un web socio-sémantique
Document et structure : vers un web socio-sémantiqueherve.info.unicaen.fr
 
Lausanne JUG - Elasticsearch
Lausanne JUG - ElasticsearchLausanne JUG - Elasticsearch
Lausanne JUG - ElasticsearchDavid Pilato
 
Lyon JUG - Elasticsearch
Lyon JUG - ElasticsearchLyon JUG - Elasticsearch
Lyon JUG - ElasticsearchDavid Pilato
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebYoann Gotthilf
 
HTML : why content is important - SoftShake 2014
HTML : why content is important - SoftShake 2014HTML : why content is important - SoftShake 2014
HTML : why content is important - SoftShake 2014Audrey Lièvremont
 
Hands on lab Elasticsearch
Hands on lab ElasticsearchHands on lab Elasticsearch
Hands on lab ElasticsearchDavid Pilato
 
Information Scientifique et Technique : pour des moteurs efficaces, liberez l...
Information Scientifique et Technique : pour des moteurs efficaces, liberez l...Information Scientifique et Technique : pour des moteurs efficaces, liberez l...
Information Scientifique et Technique : pour des moteurs efficaces, liberez l...Fleury Christine
 
Oxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overviewOxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overviewLudovic Piot
 
Oxalide Academy : Workshop #3 Elastic Search
Oxalide Academy : Workshop #3 Elastic SearchOxalide Academy : Workshop #3 Elastic Search
Oxalide Academy : Workshop #3 Elastic SearchOxalide
 
SSL 2011 : Présentation de 2 bases noSQL
SSL 2011 : Présentation de 2 bases noSQLSSL 2011 : Présentation de 2 bases noSQL
SSL 2011 : Présentation de 2 bases noSQLHervé Leclerc
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
 

Similar a Microformats (20)

Adbs2012presentation 120527125034-phpapp02
Adbs2012presentation 120527125034-phpapp02Adbs2012presentation 120527125034-phpapp02
Adbs2012presentation 120527125034-phpapp02
 
SPARQL, comment illuminer vos mashups en consommant les données du Linked Data ?
SPARQL, comment illuminer vos mashups en consommant les données du Linked Data ?SPARQL, comment illuminer vos mashups en consommant les données du Linked Data ?
SPARQL, comment illuminer vos mashups en consommant les données du Linked Data ?
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
20150402 meetup r addicts du printemps
20150402  meetup r addicts du printemps20150402  meetup r addicts du printemps
20150402 meetup r addicts du printemps
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
Elasticsearch - Esme sudria
Elasticsearch - Esme sudriaElasticsearch - Esme sudria
Elasticsearch - Esme sudria
 
Document et structure : vers un web socio-sémantique
Document et structure : vers un web socio-sémantiqueDocument et structure : vers un web socio-sémantique
Document et structure : vers un web socio-sémantique
 
Adbs2012 presentation
Adbs2012 presentationAdbs2012 presentation
Adbs2012 presentation
 
Lausanne JUG - Elasticsearch
Lausanne JUG - ElasticsearchLausanne JUG - Elasticsearch
Lausanne JUG - Elasticsearch
 
Lyon JUG - Elasticsearch
Lyon JUG - ElasticsearchLyon JUG - Elasticsearch
Lyon JUG - Elasticsearch
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
HTML : why content is important - SoftShake 2014
HTML : why content is important - SoftShake 2014HTML : why content is important - SoftShake 2014
HTML : why content is important - SoftShake 2014
 
Hands on lab Elasticsearch
Hands on lab ElasticsearchHands on lab Elasticsearch
Hands on lab Elasticsearch
 
Information Scientifique et Technique : pour des moteurs efficaces, liberez l...
Information Scientifique et Technique : pour des moteurs efficaces, liberez l...Information Scientifique et Technique : pour des moteurs efficaces, liberez l...
Information Scientifique et Technique : pour des moteurs efficaces, liberez l...
 
Oxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overviewOxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overview
 
Oxalide Academy : Workshop #3 Elastic Search
Oxalide Academy : Workshop #3 Elastic SearchOxalide Academy : Workshop #3 Elastic Search
Oxalide Academy : Workshop #3 Elastic Search
 
SSL 2011 : Présentation de 2 bases noSQL
SSL 2011 : Présentation de 2 bases noSQLSSL 2011 : Présentation de 2 bases noSQL
SSL 2011 : Présentation de 2 bases noSQL
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 

Último

Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2JeanLucHusson
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024frizzole
 
La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniquessuser4dbdf2
 
Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxMartin M Flynn
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementM2i Formation
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionslaetitiachassagne
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFEAhmam Abderrahmane
 

Último (7)

Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024
 
La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin technique
 
Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptx
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changement
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositions
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFE
 

Microformats

  • 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

Notas del editor

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