View
4.391
Download
3
Category
Preview:
DESCRIPTION
Der Hype um Mikroformate hat in letzter Zeit ein wenig nachgelassen. Viele Webentwickler nutzen sie, um ihre Webseiten semantisch reichhaltiger zu gestalten, als es mit reinem (X)HTML möglich ist. Die meisten Webentwickler jedoch verzichten auf Mikroformate, entweder weil sie sie nicht kennen oder weil ihnen ihre Anwendung zu umständlich erscheint. Zu Unrecht, denn Mikroformate sind ein Gewinn für das Web! Dieser Vortrag zeigt, was Sie mit »mikroformatierten« Seiten alles machen können.
Citation preview
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
Recommended