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

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


Michael Jendryschik

• itemis AG– www.itemis.de


Michael Jendryschik

• Webkrauts– www.webkrauts.de


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


Agenda









(Sehr) kurze Einführung

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



• XHTML und HTML– Semantisch unvollständig

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

• Beispiel: Auszeichnung von Kontaktdaten (hCard)

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

<address class="contact"> itemis AG Am Brambusch 15–24 44536 Lünen Telefon: +49 231 9860-210 Fax: +49 231 9860-211 E-Mail: <a href="mailto:[email protected]" class="mail">[email protected]</a> Web: <a href="http://www.itemis.de/" class="website">www.itemis.de</a></address>

<address class="vcard"> itemis AG Am Brambusch 15–24 44536 Lünen Telefon: +49 231 9860-210 Fax: +49 231 9860-211 E-Mail: <a href="mailto:[email protected]" class="email">[email protected]</a> Web: <a href="http://www.itemis.de/" class="url">www.itemis.de</a></address>



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

Strukturen– Nutzen

• Wiederverwendbarkeit

• Interoperabilität

• Wartbarkeit



• Populäre Formate



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


Agenda









Datenimport von Kontakten

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

Formularfelder



• hCardMapper



• hCardMapper– Als WordPress-Plugin von Matthias Pfefferle

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



• Personen aus anderen Netzwerken importieren



• Personen aus anderen Netzwerken importieren– Beispiel: DOPPLR



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

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



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



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

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



• Firefox 3 Microformats API


Agenda








Datenexport von Veranstaltungen

• Veranstaltungen exportieren und importieren

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

Weltweiter Aktionstag zum Thema Usability

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

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

Weltweiter Aktionstag zum Thema Usability

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


Agenda









Umfragen auswerten mit Folksr

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

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



• Folksr– www.folksr.de


Agenda









Mashups mit Google Maps

• Geodaten auslesen und an Google übergeben

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

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



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


Agenda









CSS-Layout

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

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>


CSS-Layout

• Beispiel: XFN


CSS-Layout

• Beispiel: XFN– Microformats Icons

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


CSS-Layout

• Beispiel: expose-mf.css von Hicksdesign


Agenda









Bessere Suchmaschinen

• Mehr Semantik = Bessere Suchergebnisse



• 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


Diskussion?

Michael Jendryschik

[email protected]

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

Technology

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