Post on 13-Dec-2014
description
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