Microformats
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,872
On Slideshare
5,834
From Embeds
38
Number of Embeds
6

Actions

Shares
Downloads
31
Comments
0
Likes
5

Embeds 38

http://notizblog.org 30
http://www.slideshare.net 3
http://gaesteb.ga.ohost.de 2
http://www.online-mädchen.de 1
http://om.notizblog.org 1
http://www.linkedin.com 1

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

Transcript

  • 1. microformats barcamp rhein-neckar matthias pfefferle 1
  • 2. microformats.org über microformats • Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. 2
  • 3. ein beispiel: 3
  • 4. hCalendar 4
  • 5. <p class=quot;veventquot;> <span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von Samstag den <abbr class=quot;dtstartquot; title=quot;2007-11-24T11:00:00 +02:00quot;>24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr class=quot;dtendquot; title=quot;2007-11-25quot;>25.11.07</abbr> an der <a href=quot;http://www.gestaltung.hs-mannheim.de/quot; class=quot;url locationquot;>Hochschule Mannheim, Fakultät für Gestaltung</a>. </p> 5
  • 6. <p class=quot;veventquot;> <span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von Samstag den <abbr class=quot;dtstartquot; title=quot;2007-11-24T11:00:00 +02:00quot;>24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr class=quot;dtendquot; title=quot;2007-11-25quot;>25.11.07</abbr> an der <a href=quot;http://www.gestaltung.hs-mannheim.de/quot; class=quot;url locationquot;>Hochschule Mannheim, Fakultät für Gestaltung</a>. </p> 6
  • 7. <p class=quot;veventquot;> <span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von Samstag den <abbr class=quot;dtstartquot; title=quot;2007-11-24T11:00:00 +02:00quot;>24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr class=quot;dtendquot; title=quot;2007-11-25quot;>25.11.07</abbr> an der <a href=quot;http://www.gestaltung.hs-mannheim.de/quot; class=quot;url locationquot;>Hochschule Mannheim, Fakultät für Gestaltung</a>. </p> 7
  • 8. <p class=quot;veventquot;> <span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von Samstag den <abbr class=quot;dtstartquot; title=quot;2007-11-24T11:00:00 +02:00quot;>24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr class=quot;dtendquot; title=quot;2007-11-25quot;>25.11.07</abbr> an der <a href=quot;http://www.gestaltung.hs-mannheim.de/quot; class=quot;url locationquot;>Hochschule Mannheim, Fakultät für Gestaltung</a>. </p> 8
  • 9. <p class=quot;veventquot;> <span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von Samstag den <abbr class=quot;dtstartquot; title=quot;2007-11-24T11:00:00 +02:00quot;>24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr class=quot;dtendquot; title=quot;2007-11-25quot;>25.11.07</abbr> an der <a href=quot;http://www.gestaltung.hs-mannheim.de/quot; class=quot;url locationquot;>Hochschule Mannheim, Fakultät für Gestaltung</a>. </p> 9
  • 10. <p class=quot;veventquot;> <span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von Samstag den <abbr class=quot;dtstartquot; title=quot;2007-11-24T11:00:00 +02:00quot;>24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr class=quot;dtendquot; title=quot;2007-11-25quot;>25.11.07</abbr> an der <a href=quot;http://www.gestaltung.hs-mannheim.de/quot; class=quot;url locationquot;>Hochschule Mannheim, Fakultät für Gestaltung</a>. </p> 10
  • 11. was sind microformats? 11
  • 12. microformats prinzipien • solve a specific problem • start as simple as possible • design for humans first, machines second • reuse building blocks from widely adopted standards • modularity / embeddability • enable and encourage decentralized 12
  • 13. andere begriffe • semantic XHTML • real world semantics • lowercase semantic web • lossless XHTML 13
  • 14. 14
  • 15. definition von microformats 15
  • 16. wiederverwendung von verbreiteten standards 16
  • 17. beispiel hCalendar und iCalendar (RFC 2445) 17
  • 18. <p class=quot;veventquot;> <span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von Samstag den <abbr class=quot;dtstartquot; title=quot;2007-11-24T11:00:00 +02:00quot;>24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr class=quot;dtendquot; title=quot;2007-11-25quot;>25.11.07</abbr> an der <a href=quot;http://www.gestaltung.hs-mannheim.de/quot; class=quot;url locationquot;>Hochschule Mannheim, Fakultät für Gestaltung</a>. </p> 18
  • 19. BEGIN:VCALENDAR PRODID:-//suda.co.uk//X2V 0.9.2.1 (BETA)//EN X-ORIGINAL-URL:http://notizblog.org/ X-WR-CALNAME;CHARSET=utf-8: VERSION:2.0 METHOD:PUBLISH BEGIN:VEVENT LOCATION;CHARSET=utf-8:Hochschule Mannheim, Fakultät für Gestaltung SUMMARY;CHARSET=utf-8:Barcamp Rhein-Neckar URL:http://www.gestaltung.hs-mannheim.de/ DTSTART;VALUE=DATE-TIME:20071124T090000Z DTEND;VALUE=DATE:20071125 END:VEVENT END:VCALENDAR 19
  • 20. beispiel hCard und vCard (RFC 2426) 20
  • 21. <p class=quot;vcardquot;> <span class=quot;fn org locationquot;> Hochschule Mannheim, Fakultät für Gestaltung </span> <span class=quot;adrquot;> <span class=quot;street-addressquot;>Windeckstr. 110</span> <span class=quot;postal-codequot;>68163</span> <span class=quot;localityquot;>Mannheim</span> </span> </p> 21
  • 22. BEGIN:VCARD VERSION:3.0 N:;;;; ORG;CHARSET=UTF-8:Hochschule Mannheim, Fakultät für Gestaltung FN;CHARSET=UTF-8:Hochschule Mannheim, Fakultät für Gestaltung UID: ADR;CHARSET=UTF-8:;;Windeckstr. 110;Mannheim;;68163; END:VCARD 22
  • 23. weitere microformats 23
  • 24. XFN XHTML friendly network 24
  • 25. beispiel <a href=quot;http://example.orgquot; rel=quot;friend metquot;> <a href=quot;http://example.orgquot; rel=quot;contactquot;> <a href=quot;http://example.orgquot; rel=quot;colleague co-residentquot;> <a href=quot;http://example.orgquot; rel=quot;mequot;> 25
  • 26. • rel-license - bsp.: creative commons • rel-nofollow - bsp.: google • geo - um geo-daten anzugeben • hAtom - pendant zu dem atom-feed • hResume • hReview 26
  • 27. warum sollte ich microformats einsetzen? 27
  • 28. effektivere suche 28
  • 29. 29
  • 30. dezentrale communities und services 30
  • 31. 31
  • 32. single sign on 32
  • 33. 33
  • 34. data portability 34
  • 35. 35
  • 36. social network portability 36
  • 37. 37
  • 38. 38
  • 39. exportieren von kontakt bzw. kalender daten 39
  • 40. 40
  • 41. 41
  • 42. 42
  • 43. 43
  • 44. 44
  • 45. wer nutzt microformats? 45
  • 46. webseiten • Yahoo (flickr, upcoming) • Google (Search, Blogger, Maps) • Apple (.Mac, Apple Store) • BBC • WordPress • LastFM 46
  • 47. tools • Firefox (nativ in firefox 3) • mehrere Safari Plugins • IE 8 soll microformats unterstützen • vCard explorer 47
  • 48. warum microformats und nicht z.b. rdfa 48
  • 49. microformats • valides html (posh) • weite verbreitung • abbildung bestehender standards • einfache implementierung (classes) 49
  • 50. hCard <div class=quot;vcardquot;> <img src=quot;http://evan.prodromou.name/images/Evan48.jpgquot; alt=quot;photoquot; class=quot;photoquot;/> <a class=quot;url fnquot; href=quot;http://evan.prodromou.name/quot;>Evan Prodromou</a> <div class=quot;adrquot;> <div class=quot;street-addressquot;>1481 rue Rachel Est</div> <span class=quot;localityquot;>Montreal</span>, <span class=quot;regionquot;>QC</span> <span class=quot;postal-codequot;>H2J2K3</span> </div> <div class=quot;telquot;>+1-514-554-EVAN</div> <a class=quot;emailquot; href=quot;mailto:evan@prodromou.namequot;>evan@prodromou.name</a> </div> 50
  • 51. RDFa vCard <div class=quot;vcardquot; xmlns:v=quot;http://www.w3.org/2001/vcard-rdf/3.0#quot; about=quot;http://evan.prodromou.name/quot;> <img src=quot;http://evan.prodromou.name/images/Evan48.jpgquot; alt=quot;photoquot; property=quot;v:photoquot;/> <a property=quot;v:FNquot; href=quot;http://evan.prodromou.name/quot;>Evan Prodromou</a> <div role=quot;v:ADRquot;> <div property=quot;v:Streetquot;>1481 rue Rachel Est</div> <span property=quot;v:Localityquot;>Montreal</span>, <span property=quot;v:Regionquot;>QC</span> <span property=quot;v:Postal-codequot;>H2J2K3</span> </div> <div role=quot;v:TELquot;> <span property=quot;v:Typequot;>Voice</span>: <span property=quot;v:Valuequot;>+1-514-554-EVAN</span> </div> <a rel=quot;v:EMAILquot; href=quot;mailto:evan@prodromou.namequot;>evan@prodromou.name</a> </div> 51
  • 52. microformats und das semantic web 52
  • 53. grddl und xslt 53
  • 54. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head profile=quot;http://www.w3.org/2003/g/data-viewquot;> <title>Robin's Schedule</title> <link rel=quot;transformationquot; href=quot;http://www.w3.org/2002/12/cal/glean-hcalquot;/> </head> <body> <p class=quot;veventquot;> <strong class=quot;summaryquot;>Fashion Expo</strong> in <span class=quot;locationquot;>Paris, France</span>: <abbr class=quot;dtstartquot; title=quot;2006-10-20quot;>Oct 20</abbr> to <abbr class=quot;dtendquot; title=quot;2006-10-23quot;>22</abbr> </p> </body> </html> 54
  • 55. 55
  • 56. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <rdf:RDF xmlns:dataview=quot;http://www.w3.org/2003/g/data-view#quot; xmlns:rdf=quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#quot; xml:base=quot;http://microform.at/test/grddl.htmlquot;><!--XHTML Transformation produced by $Id: rdf-in-xhtml-processor.xsl,v 1.46 2007/05/30 12:18:21 dom Exp $--><c:Vcalendar xmlns:r=quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#quot; xmlns:c=quot;http://www.w3.org/2002/12/cal/icaltzd#quot; xmlns:h=quot;http://www.w3.org/1999/xhtmlquot; r:about=quot;quot;> <c:prodid>-//connolly.w3.org//RDF Calendar $Date: 2007/06/30 19:05:32 $ (BETA)//EN</ c:prodid> <c:version>2.0</c:version> <c:component> <c:Vevent> <summary xmlns=quot;http://www.w3.org/2002/12/cal/icaltzd#quot; xml:lang=quot;enquot;>Fashion Expo</summary> <dtstart xmlns=quot;http://www.w3.org/2002/12/cal/icaltzd#quot; r:datatype=quot;http://www.w3.org/2001/XMLSchema#datequot;>2006-10-20</ dtstart> <dtend xmlns=quot;http://www.w3.org/2002/12/cal/icaltzd#quot; r:datatype=quot;http://www.w3.org/2001/XMLSchema#datequot;>2006-10-23</dtend> <url xmlns=quot;http://www.w3.org/2002/12/cal/icaltzd#quot; r:resource=quot;quot;/> <location xmlns=quot;http://www.w3.org/2002/12/cal/icaltzd#quot; xml:lang=quot;enquot;>Paris, France</location> </c:Vevent> </c:component> </c:Vcalendar> </rdf:RDF> 56
  • 57. 57
  • 58. links • http://mikroformate.org • http://planetmikroformate.de • http://planetmicroformats.com/ • mein blog: http://notizblog.org/tag/ microformats/ 58