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