6 Beispiele für die nützliche Anwendung von Mikroformaten 1

6 Beispiele für die nützliche Anwendung von Mikroformaten

Was Sie mit »mikroformatierten« Seiten alles machen können

Michael Jendryschik

6 Beispiele für die nützliche Anwendung von Mikroformaten 2

Michael Jendryschik

• itemis AG– www.itemis.de

6 Beispiele für die nützliche Anwendung von Mikroformaten 3

Michael Jendryschik

• Webkrauts– www.webkrauts.de

6 Beispiele für die nützliche Anwendung von Mikroformaten 4

Agenda

• (Sehr) kurze Einführung in Mikroformate

• 1. Beispiel: Datenimport von Kontakten

• 2. Beispiel: Datenexport von Veranstaltungen

• 3. Beispiel: Umfragen auswerten mit Folksr

• 4. Beispiel: Mashups

• 5. Beispiel: CSS-Layout

• 6. Beispiel: Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 5

Agenda

• (Sehr) kurze Einführung in Mikroformate

• 1. Beispiel: Datenimport von Kontakten

• 2. Beispiel: Datenexport von Veranstaltungen

• 3. Beispiel: Umfragen auswerten mit Folksr

• 4. Beispiel: Mashups

• 5. Beispiel: CSS-Layout

• 6. Beispiel: Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 6

(Sehr) kurze Einführung

• XHTML und HTML– Rund 90 Elementtypen – Menschen- und maschinenlesbar

6 Beispiele für die nützliche Anwendung von Mikroformaten 7

(Sehr) kurze Einführung

• XHTML und HTML– Semantisch unvollständig

• Kontaktdaten?• Veranstaltungen?• DVD-Sammlungen?• Rezensionen?• Fahrpläne?• ...

6 Beispiele für die nützliche Anwendung von Mikroformaten 8

(Sehr) kurze Einführung

• Beispiel: Auszeichnung von Kontaktdaten (hCard)

<address> itemis AG<br /> Am Brambusch 15–24<br /> 44536 Lünen<br /> Telefon: +49 231 9860-210<br /> Fax: +49 231 9860-211<br /> E-Mail: <a href="mailto:info@itemis.de">info@itemis.de</a><br /> Web: <a href="http://www.itemis.de/">www.itemis.de</a></address>

6 Beispiele für die nützliche Anwendung von Mikroformaten 9

(Sehr) kurze Einführung

• Beispiel: Auszeichnung von Kontaktdaten (hCard)

<address class="contact"> <span class="address"> <span class="name">itemis AG</span><br /> <span class="street">Am Brambusch 15–24</span><br /> <span class="city">44536 Lünen</span> </span><br /> Telefon: <span class="phone">+49 231 9860-210</span><br /> Fax: <span class="fax">+49 231 9860-211</span><br /> E-Mail: <a href="mailto:info@itemis.de" class="mail">info@itemis.de</a><br /> Web: <a href="http://www.itemis.de/" class="website">www.itemis.de</a></address>

6 Beispiele für die nützliche Anwendung von Mikroformaten 10

(Sehr) kurze Einführung

• Beispiel: Auszeichnung von Kontaktdaten (hCard)

<address class="vcard"> <span class="adr"> <span class="fn org">itemis AG</span><br /> <span class="street-address">Am Brambusch 15–24</span><br /> <span class="postal-code">44536</span> <span class="locality">Lünen</span> </span><br /> Telefon: <span class="tel">+49 231 9860-210</span><br /> <span class="tel"> <span class="type">Fax</span>: <span class="value">+49 231 9860-211</span> </span><br /> E-Mail: <a href="mailto:info@itemis.de" class="email">info@itemis.de</a><br /> Web: <a href="http://www.itemis.de/" class="url">www.itemis.de</a></address>

6 Beispiele für die nützliche Anwendung von Mikroformaten 11

(Sehr) kurze Einführung

• Mikroformate– Formate zur »Feinstrukturierung« von Webseiten – Erweitern (X)HTML durch zusätzliche semantische

Strukturen– Nutzen

• Wiederverwendbarkeit

• Interoperabilität

• Wartbarkeit

6 Beispiele für die nützliche Anwendung von Mikroformaten 12

(Sehr) kurze Einführung

• Populäre Formate

6 Beispiele für die nützliche Anwendung von Mikroformaten 13

(Sehr) kurze Einführung

• Microformats.org– microformats.org: Offizielle Website – microformats.org/wiki/Main_Page: Microformats Wiki – microformats.org/code: Anwendungen und Werkzeuge

6 Beispiele für die nützliche Anwendung von Mikroformaten 14

Agenda

• (Sehr) kurze Einführung in Mikroformate

• 1. Beispiel: Datenimport von Kontakten

• 2. Beispiel: Datenexport von Veranstaltungen

• 3. Beispiel: Umfragen auswerten mit Folksr

• 4. Beispiel: Mashups

• 5. Beispiel: CSS-Layout

• 6. Beispiel: Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 15

Datenimport von Kontakten

• hCardMapper– http://lib.omnia-computing.de/hcardmapper– Extrahiert Adressdaten aus Webseiten und befüllt damit

Formularfelder

6 Beispiele für die nützliche Anwendung von Mikroformaten 16

Datenimport von Kontakten

• hCardMapper

6 Beispiele für die nützliche Anwendung von Mikroformaten 17

Datenimport von Kontakten

• hCardMapper

6 Beispiele für die nützliche Anwendung von Mikroformaten 18

Datenimport von Kontakten

• hCardMapper

6 Beispiele für die nützliche Anwendung von Mikroformaten 19

Datenimport von Kontakten

• hCardMapper

6 Beispiele für die nützliche Anwendung von Mikroformaten 20

Datenimport von Kontakten

• hCardMapper– Als WordPress-Plugin von Matthias Pfefferle

• http://notizblog.org/2008/04/02/hcardmapper-fuer-wordpress/

6 Beispiele für die nützliche Anwendung von Mikroformaten 21

Datenimport von Kontakten

• Personen aus anderen Netzwerken importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 22

Datenimport von Kontakten

• Personen aus anderen Netzwerken importieren– Beispiel: DOPPLR

6 Beispiele für die nützliche Anwendung von Mikroformaten 23

Datenimport von Kontakten

• Firefox 3 Microformats API– Firefox 3 verfügt über eine API für Mikroformate

• http://developer.mozilla.org/en/Using_microformats

6 Beispiele für die nützliche Anwendung von Mikroformaten 24

Datenimport von Kontakten

• Firefox 3 Microformats API– In der Benutzeroberfläche noch nicht zu finden

6 Beispiele für die nützliche Anwendung von Mikroformaten 25

Datenimport von Kontakten

• Firefox 3 Microformats API – Nutzung der API für Extensions

• http://www.ibm.com/developerworks/xml/library/x-tipffoxmicroapi/

6 Beispiele für die nützliche Anwendung von Mikroformaten 26

Datenimport von Kontakten

• Firefox 3 Microformats API

6 Beispiele für die nützliche Anwendung von Mikroformaten 27

Datenimport von Kontakten

• Firefox 3 Microformats API

6 Beispiele für die nützliche Anwendung von Mikroformaten 28

Datenimport von Kontakten

• Firefox 3 Microformats API

6 Beispiele für die nützliche Anwendung von Mikroformaten 29

Agenda

• (Sehr) kurze Einführung in Mikroformate

• 1. Beispiel: Datenimport von Kontakten

• 2. Beispiel: Datenexport von Veranstaltungen

• 3. Beispiel: Umfragen auswerten mit Folksr

• 4. Beispiel: Mashups

• 5. Beispiel: CSS-Layout

• 6. Beispiel: Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 30

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

<h3><a href="http://www.worldusabilityday.org/"> World Usability Day 2007</a></h3>

<p>Weltweiter Aktionstag zum Thema Usability</p>

<p class="datum"> 8. November, Weltweit, weitere Infos unter <a href="http://www.worldusabilityday.org/">worldusabilityday.org</a>.</p>

6 Beispiele für die nützliche Anwendung von Mikroformaten 31

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

<div class="vevent"> <h3 class="summary"><a href="http://www.worldusabilityday.org/" class="url">World Usability Day 2007</a></h3>

<p class="description">Weltweiter Aktionstag zum Thema Usability</p>

<p class="datum"> <abbr class="dtstart" title="2007-11-8">8. November</abbr>, <span class="location">Weltweit</span>, weitere Infos unter <a href="http://www.worldusabilityday.org/" rel="external" class="url">worldusabilityday.org</a>. </p></div>

6 Beispiele für die nützliche Anwendung von Mikroformaten 32

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 33

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 34

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 35

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 36

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 37

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 38

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 39

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 40

Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

6 Beispiele für die nützliche Anwendung von Mikroformaten 41

Agenda

• (Sehr) kurze Einführung in Mikroformate

• 1. Beispiel: Datenimport von Kontakten

• 2. Beispiel: Datenexport von Veranstaltungen

• 3. Beispiel: Umfragen auswerten mit Folksr

• 4. Beispiel: Mashups

• 5. Beispiel: CSS-Layout

• 6. Beispiel: Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 42

Umfragen auswerten mit Folksr

• Vote Links– microformats.org/wiki/votelinks– rev="vote-for": Zustimmung – rev="vote-abstain": Enthaltung– rev="vote-against": Ablehnung

6 Beispiele für die nützliche Anwendung von Mikroformaten 43

Umfragen auswerten mit Folksr

• Vote Links– microformats.org/wiki/votelinks– rev="vote-for": Zustimmung – rev="vote-abstain": Enthaltung– rev="vote-against": Ablehnung

<a href="http://de.wikipedia.org/wiki/XHTML" rev="vote-for">XHTML</a>

<a href="http://de.wikipedia.org/wiki/XHTML" rev="vote-against">HTML</a>

6 Beispiele für die nützliche Anwendung von Mikroformaten 44

Umfragen auswerten mit Folksr

• Folksr– www.folksr.de

6 Beispiele für die nützliche Anwendung von Mikroformaten 45

Umfragen auswerten mit Folksr

• Folksr– www.folksr.de

6 Beispiele für die nützliche Anwendung von Mikroformaten 46

Umfragen auswerten mit Folksr

• Folksr– www.folksr.de

6 Beispiele für die nützliche Anwendung von Mikroformaten 47

Agenda

• (Sehr) kurze Einführung in Mikroformate

• 1. Beispiel: Datenimport von Kontakten

• 2. Beispiel: Datenexport von Veranstaltungen

• 3. Beispiel: Umfragen auswerten mit Folksr

• 4. Beispiel: Mashups

• 5. Beispiel: CSS-Layout

• 6. Beispiel: Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 48

Mashups mit Google Maps

• Geodaten auslesen und an Google übergeben

6 Beispiele für die nützliche Anwendung von Mikroformaten 49

Mashups mit Google Maps

• Geodaten auslesen und an Google übergeben

6 Beispiele für die nützliche Anwendung von Mikroformaten 50

Mashups mit Google Maps

• Geodaten auslesen und an Google übergeben

6 Beispiele für die nützliche Anwendung von Mikroformaten 51

Mashups mit Google Maps

• Geodaten auslesen und an Google übergeben

<abbr class="geo" title="51.604951;7.452614"> itemis AG</abbr>

6 Beispiele für die nützliche Anwendung von Mikroformaten 52

Mashups mit Google Maps

• Geodaten auslesen und an Google übergeben– http://suda.co.uk/projects/microformats/geo/

<kml xmlns="http://earth.google.com/kml/2.0"> <Folder> <name>Schulungen und Vorträge</name> <Placemark> <Style> <LineStyle> <color>cc0000ff</color> <width>5.0</width> </LineStyle> </Style> <name>6 Beispiele für die nützliche Anwendung von Mikroformaten</name> <description>Was Sie mit »mikroformatierten« Seiten alles machen können</description> <Point> <coordinates>11.03011,49.57458,0</coordinates> </Point> </Placemark> ... </Folder></kml>

6 Beispiele für die nützliche Anwendung von Mikroformaten 53

Mashups mit Google Maps

• Geodaten auslesen und an Google übergeben– Beispiel: 24 ways

6 Beispiele für die nützliche Anwendung von Mikroformaten 54

Mashups mit Google Maps

• Geodaten auslesen und an Google übergeben

6 Beispiele für die nützliche Anwendung von Mikroformaten 55

Agenda

• (Sehr) kurze Einführung in Mikroformate

• 1. Beispiel: Datenimport von Kontakten

• 2. Beispiel: Datenexport von Veranstaltungen

• 3. Beispiel: Umfragen auswerten mit Folksr

• 4. Beispiel: Mashups

• 5. Beispiel: CSS-Layout

• 6. Beispiel: Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 56

CSS-Layout

• Immer dasselbe Vokabular, also standardisierte Darstellung mittels Stylesheets möglich

6 Beispiele für die nützliche Anwendung von Mikroformaten 57

CSS-Layout

• Beispiel: XFN– Anzeige von persönlichen Beziehungen im World Wide Web und in

sozialen Netzwerken

<a href="http://www.intermitto.net/ich/" rel="friend met">Jens Becker</a>

6 Beispiele für die nützliche Anwendung von Mikroformaten 58

CSS-Layout

• Beispiel: XFN

6 Beispiele für die nützliche Anwendung von Mikroformaten 59

CSS-Layout

• Beispiel: XFN

6 Beispiele für die nützliche Anwendung von Mikroformaten 60

CSS-Layout

• Beispiel: XFN– Microformats Icons

a[rel~="friend"] { background: url(/images/xfn/friend.png) left center no-repeat; padding: 0 0 0 20px;}

6 Beispiele für die nützliche Anwendung von Mikroformaten 61

CSS-Layout

• Beispiel: expose-mf.css von Hicksdesign

6 Beispiele für die nützliche Anwendung von Mikroformaten 62

Agenda

• (Sehr) kurze Einführung in Mikroformate

• 1. Beispiel: Datenimport von Kontakten

• 2. Beispiel: Datenexport von Veranstaltungen

• 3. Beispiel: Umfragen auswerten mit Folksr

• 4. Beispiel: Mashups

• 5. Beispiel: CSS-Layout

• 6. Beispiel: Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 63

Bessere Suchmaschinen

• Mehr Semantik = Bessere Suchergebnisse

6 Beispiele für die nützliche Anwendung von Mikroformaten 64

Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 65

Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 66

Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 67

Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 68

Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 69

Bessere Suchmaschinen

6 Beispiele für die nützliche Anwendung von Mikroformaten 70

Bessere Suchmaschinen

• Yahoo SearchMonkey– hCard: searchmonkeyid:com.yahoo.uf.hcard– hCalendar: searchmonkeyid:com.yahoo.uf.hcalendar– hReview: searchmonkeyid:com.yahoo.uf.hreview– XFN: searchmonkeyid:com.yahoo.uf.xfn

6 Beispiele für die nützliche Anwendung von Mikroformaten 71

Diskussion?

Michael Jendryschik

michael@jendryschik.de