microformats
barcamp rhein-neckar
matthias pfefferle
1

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

ein beispiel:
3

hCalendar
4

<p class=\"vevent\">
<span class=\"summary\">Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=\"dtstart\" title=\"2007-11-24T11:00:00
+02:00\">24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr
class=\"dtend\" title=\"2007-11-25\">25.11.07</abbr> an der <a
href=\"http://www.gestaltung.hs-mannheim.de/\" class=\"url
location\">Hochschule Mannheim, Fakultät für Gestaltung</a>.
</p>
5

<p class=\"vevent\">
<span class=\"summary\">Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=\"dtstart\" title=\"2007-11-24T11:00:00
+02:00\">24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr
class=\"dtend\" title=\"2007-11-25\">25.11.07</abbr> an der <a
href=\"http://www.gestaltung.hs-mannheim.de/\" class=\"url
location\">Hochschule Mannheim, Fakultät für Gestaltung</a>.
</p>
6

<p class=\"vevent\">
<span class=\"summary\">Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=\"dtstart\" title=\"2007-11-24T11:00:00
+02:00\">24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr
class=\"dtend\" title=\"2007-11-25\">25.11.07</abbr> an der <a
href=\"http://www.gestaltung.hs-mannheim.de/\" class=\"url
location\">Hochschule Mannheim, Fakultät für Gestaltung</a>.
</p>
7

<p class=\"vevent\">
<span class=\"summary\">Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=\"dtstart\" title=\"2007-11-24T11:00:00
+02:00\">24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr
class=\"dtend\" title=\"2007-11-25\">25.11.07</abbr> an der <a
href=\"http://www.gestaltung.hs-mannheim.de/\" class=\"url
location\">Hochschule Mannheim, Fakultät für Gestaltung</a>.
</p>
8

<p class=\"vevent\">
<span class=\"summary\">Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=\"dtstart\" title=\"2007-11-24T11:00:00
+02:00\">24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr
class=\"dtend\" title=\"2007-11-25\">25.11.07</abbr> an der <a
href=\"http://www.gestaltung.hs-mannheim.de/\" class=\"url
location\">Hochschule Mannheim, Fakultät für Gestaltung</a>.
</p>
9

<p class=\"vevent\">
<span class=\"summary\">Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=\"dtstart\" title=\"2007-11-24T11:00:00
+02:00\">24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr
class=\"dtend\" title=\"2007-11-25\">25.11.07</abbr> an der <a
href=\"http://www.gestaltung.hs-mannheim.de/\" class=\"url
location\">Hochschule Mannheim, Fakultät für Gestaltung</a>.
</p>
10

was sind microformats?
11

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

andere begriffe
• semantic XHTML
• real world semantics
• lowercase semantic web
• lossless XHTML
13

14

definition von
microformats
15

wiederverwendung von
verbreiteten standards
16

beispiel hCalendar und
iCalendar (RFC 2445)
17

<p class=\"vevent\">
<span class=\"summary\">Barcamp Rhein-Neckar</span>, von
Samstag den <abbr class=\"dtstart\" title=\"2007-11-24T11:00:00
+02:00\">24.11. um 11:00 Uhr</abbr> bis Sonntag <abbr
class=\"dtend\" title=\"2007-11-25\">25.11.07</abbr> an der <a
href=\"http://www.gestaltung.hs-mannheim.de/\" class=\"url
location\">Hochschule Mannheim, Fakultät für Gestaltung</a>.
</p>
18

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

beispiel hCard und
vCard (RFC 2426)
20

<p class=\"vcard\">
<span class=\"fn org location\">
Hochschule Mannheim, Fakultät für Gestaltung
</span>
<span class=\"adr\">
<span class=\"street-address\">Windeckstr. 110</span>
<span class=\"postal-code\">68163</span> <span
class=\"locality\">Mannheim</span>
</span>
</p>
21

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

weitere microformats
23

XFN
XHTML friendly network
24

beispiel
<a href=\"http://example.org\" rel=\"friend met\">
<a href=\"http://example.org\" rel=\"contact\">
<a href=\"http://example.org\" rel=\"colleague co-resident\">
<a href=\"http://example.org\" rel=\"me\">
25

• rel-license - bsp.: creative commons
• rel-nofollow - bsp.: google
• geo - um geo-daten anzugeben
• hAtom - pendant zu dem atom-feed
• hResume
• hReview
26

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
• LastFM
46

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

warum microformats
und nicht z.b. rdfa
48

microformats
• valides html (posh)
• weite verbreitung
• abbildung bestehender standards
• einfache implementierung (classes)
49

hCard
<div class=\"vcard\">
<img src=\"http://evan.prodromou.name/images/Evan48.jpg\" alt=\"photo\" class=\"photo\"/>
<a class=\"url fn\" href=\"http://evan.prodromou.name/\">Evan Prodromou</a>
<div class=\"adr\">
<div class=\"street-address\">1481 rue Rachel Est</div>
<span class=\"locality\">Montreal</span>,
<span class=\"region\">QC</span>
<span class=\"postal-code\">H2J2K3</span>
</div>
<div class=\"tel\">+1-514-554-EVAN</div>
<a class=\"email\" href=\"mailto:evan@prodromou.name\">evan@prodromou.name</a>
</div>
50

RDFa vCard
<div class=\"vcard\" xmlns:v=\"http://www.w3.org/2001/vcard-rdf/3.0#\"
about=\"http://evan.prodromou.name/\">
<img src=\"http://evan.prodromou.name/images/Evan48.jpg\" alt=\"photo\"
property=\"v:photo\"/>
<a property=\"v:FN\" href=\"http://evan.prodromou.name/\">Evan Prodromou</a>
<div role=\"v:ADR\">
<div property=\"v:Street\">1481 rue Rachel Est</div>
<span property=\"v:Locality\">Montreal</span>,
<span property=\"v:Region\">QC</span>
<span property=\"v:Postal-code\">H2J2K3</span>
</div>
<div role=\"v:TEL\">
<span property=\"v:Type\">Voice</span>:
<span property=\"v:Value\">+1-514-554-EVAN</span>
</div>
<a rel=\"v:EMAIL\" href=\"mailto:evan@prodromou.name\">evan@prodromou.name</a>
</div>
51

microformats und das
semantic web
52

grddl und xslt
53

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/
xhtml11.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head profile=\"http://www.w3.org/2003/g/data-view\">
<title>Robin's Schedule</title>
<link rel=\"transformation\" href=\"http://www.w3.org/2002/12/cal/glean-hcal\"/>
</head>
<body>
<p class=\"vevent\">
<strong class=\"summary\">Fashion Expo</strong> in
<span class=\"location\">Paris, France</span>:
<abbr class=\"dtstart\" title=\"2006-10-20\">Oct 20</abbr> to
<abbr class=\"dtend\" title=\"2006-10-23\">22</abbr>
</p>
</body>
</html>
54

55

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<rdf:RDF xmlns:dataview=\"http://www.w3.org/2003/g/data-view#\"
xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"
xml:base=\"http://microform.at/test/grddl.html\"><!--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=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"
xmlns:c=\"http://www.w3.org/2002/12/cal/icaltzd#\"
xmlns:h=\"http://www.w3.org/1999/xhtml\"
r:about=\"\">
<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=\"http://www.w3.org/2002/12/cal/icaltzd#\" xml:lang=\"en\">Fashion
Expo</summary>
<dtstart xmlns=\"http://www.w3.org/2002/12/cal/icaltzd#\"
r:datatype=\"http://www.w3.org/2001/XMLSchema#date\">2006-10-20</
dtstart>
<dtend xmlns=\"http://www.w3.org/2002/12/cal/icaltzd#\"
r:datatype=\"http://www.w3.org/2001/XMLSchema#date\">2006-10-23</dtend>
<url xmlns=\"http://www.w3.org/2002/12/cal/icaltzd#\" r:resource=\"\"/>
<location xmlns=\"http://www.w3.org/2002/12/cal/icaltzd#\" xml:lang=\"en\">Paris,
France</location>
</c:Vevent>
</c:component>
</c:Vcalendar>
</rdf:RDF>
56

57

links
• http://mikroformate.org
• http://planetmikroformate.de
• http://planetmicroformats.com/
• mein blog: http://notizblog.org/tag/
microformats/
58