0
microformats
barcamp rhein-neckar
  matthias pfefferle




                       1
microformats.org über
    microformats

• Designed for humans first and machines
  second, microformats are a set of simple...
ein beispiel:



                3
hCalendar



            4
<p class=quot;veventquot;>
<span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=quot;dts...
<p class=quot;veventquot;>
<span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=quot;dts...
<p class=quot;veventquot;>
<span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=quot;dts...
<p class=quot;veventquot;>
<span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=quot;dts...
<p class=quot;veventquot;>
<span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=quot;dts...
<p class=quot;veventquot;>
<span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=quot;dts...
was sind microformats?



                         11
microformats prinzipien
• solve a specific problem
• start as simple as possible
• design for humans first, machines second
...
andere begriffe

• semantic XHTML
• real world semantics
• lowercase semantic web
• lossless XHTML


                     ...
14
definition von
microformats


                15
wiederverwendung von
verbreiteten standards


                         16
beispiel hCalendar und
iCalendar (RFC 2445)


                         17
<p class=quot;veventquot;>
<span class=quot;summaryquot;>Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=quot;dts...
BEGIN:VCALENDAR
PRODID:-//suda.co.uk//X2V 0.9.2.1 (BETA)//EN
X-ORIGINAL-URL:http://notizblog.org/
X-WR-CALNAME;CHARSET=utf...
beispiel hCard und
vCard (RFC 2426)


                     20
<p class=quot;vcardquot;>
  <span class=quot;fn org locationquot;>
     Hochschule Mannheim, Fakultät für Gestaltung
  </s...
BEGIN:VCARD
VERSION:3.0
N:;;;;
ORG;CHARSET=UTF-8:Hochschule Mannheim, Fakultät für
Gestaltung
FN;CHARSET=UTF-8:Hochschule ...
weitere microformats



                       23
XFN
XHTML friendly network




                         24
beispiel

<a href=quot;http://example.orgquot; rel=quot;friend metquot;>

<a href=quot;http://example.orgquot; rel=quot;co...
• rel-license - bsp.: creative commons
• rel-nofollow - bsp.: google
• geo - um geo-daten anzugeben
• hAtom - pendant zu d...
warum sollte ich
microformats einsetzen?


                          27
effektivere suche



                    28
29
dezentrale communities
     und services


                         30
31
single sign on



                 32
33
data portability



                   34
35
social network
  portability


                 36
37
38
exportieren von kontakt
  bzw. kalender daten


                          39
40
41
42
43
44
wer nutzt
microformats?


                45
webseiten
• Yahoo (flickr, upcoming)
• Google (Search, Blogger, Maps)
• Apple (.Mac, Apple Store)
• BBC
• WordPress
• LastF...
tools

• Firefox (nativ in firefox 3)
• mehrere Safari Plugins
• IE 8 soll microformats unterstützen
• vCard explorer


   ...
warum microformats
 und nicht z.b. rdfa


                       48
microformats

• valides html (posh)
• weite verbreitung
• abbildung bestehender standards
• einfache implementierung (clas...
hCard
<div class=quot;vcardquot;>
       <img src=quot;http://evan.prodromou.name/images/Evan48.jpgquot; alt=quot;photoquo...
RDFa vCard
<div class=quot;vcardquot; xmlns:v=quot;http://www.w3.org/2001/vcard-rdf/3.0#quot;
          about=quot;http://...
microformats und das
    semantic web


                       52
grddl und xslt



                 53
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/
xhtml11.dtdquot;>
<html x...
55
<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<rdf:RDF xmlns:dataview=quot;http://www.w3.org/2003/g/data-view#quo...
57
links
• http://mikroformate.org
• http://planetmikroformate.de
• http://planetmicroformats.com/
• mein blog: http://notizb...
Upcoming SlideShare
Loading in...5
×

Microformats

4,125

Published on

Für das Barcamp RN

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,125
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Microformats"

  1. 1. microformats barcamp rhein-neckar matthias pfefferle 1
  2. 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. 3. ein beispiel: 3
  4. 4. hCalendar 4
  5. 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. 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. 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. 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. 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. 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. 11. was sind microformats? 11
  12. 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. 13. andere begriffe • semantic XHTML • real world semantics • lowercase semantic web • lossless XHTML 13
  14. 14. 14
  15. 15. definition von microformats 15
  16. 16. wiederverwendung von verbreiteten standards 16
  17. 17. beispiel hCalendar und iCalendar (RFC 2445) 17
  18. 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. 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. 20. beispiel hCard und vCard (RFC 2426) 20
  21. 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. 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. 23. weitere microformats 23
  24. 24. XFN XHTML friendly network 24
  25. 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. 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. 27. warum sollte ich microformats einsetzen? 27
  28. 28. effektivere suche 28
  29. 29. 29
  30. 30. dezentrale communities und services 30
  31. 31. 31
  32. 32. single sign on 32
  33. 33. 33
  34. 34. data portability 34
  35. 35. 35
  36. 36. social network portability 36
  37. 37. 37
  38. 38. 38
  39. 39. exportieren von kontakt bzw. kalender daten 39
  40. 40. 40
  41. 41. 41
  42. 42. 42
  43. 43. 43
  44. 44. 44
  45. 45. wer nutzt microformats? 45
  46. 46. webseiten • Yahoo (flickr, upcoming) • Google (Search, Blogger, Maps) • Apple (.Mac, Apple Store) • BBC • WordPress • LastFM 46
  47. 47. tools • Firefox (nativ in firefox 3) • mehrere Safari Plugins • IE 8 soll microformats unterstützen • vCard explorer 47
  48. 48. warum microformats und nicht z.b. rdfa 48
  49. 49. microformats • valides html (posh) • weite verbreitung • abbildung bestehender standards • einfache implementierung (classes) 49
  50. 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. 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. 52. microformats und das semantic web 52
  53. 53. grddl und xslt 53
  54. 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. 55
  56. 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. 57
  58. 58. links • http://mikroformate.org • http://planetmikroformate.de • http://planetmicroformats.com/ • mein blog: http://notizblog.org/tag/ microformats/ 58
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×