Mikroformate

Anwendung, Beispiele und Werkzeuge

Michael Jendryschik

Agenda

• Einführung in Mikroformate
• Linkbasierte Mikroformate
• Komplexe Mikroformate
• Weitere Ressourcen

Einführung in Mikroformate

• XHTML und HTML
  • Rund 90 Elementtypen
  • Menschen- und maschinenlesbar
  • Semantisch unvollständig

Einführung in Mikroformate

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

Einführung in Mikroformate

• Jedes Mikroformat
  • löst ein bestimmtes Problem

Einführung in Mikroformate

• Jedes Mikroformat
  • löst ein bestimmtes Problem
  • ist vollständig menschen- und maschinenlesbar

Einführung in Mikroformate

• Jedes Mikroformat
  • löst ein bestimmtes Problem
  • ist vollständig menschen- und maschinenlesbar
  • macht sich offene Standards zunutze

Einführung in Mikroformate

• Jedes Mikroformat
  • löst ein bestimmtes Problem
  • ist vollständig menschen- und maschinenlesbar
  • macht sich offene Standards zunutze
  • ist ein Teil des Web 2.0

Einführung in Mikroformate

• Nutzen
  • Standardisierung der Feinstrukturierung
    • Wartbarkeit
    • Wiederverwendbarkeit
    • Interoperabilität

Einführung in Mikroformate

• Anwendung
  • Linkbasierte Mikroformate: Attribute rel und rev
  • Komplexe Mikroformate: Attribut class

  

Einführung in Mikroformate

• Standardisierung
  • Offener Prozess über öffentliche Mailinglisten:
    • Allgemeine Diskussionen
    • Neue Vorschläge
    • Implementierungen
  • So you wanna develop a new microformat?

Agenda

• Einführung in Mikroformate
• Linkbasierte Mikroformate
• Komplexe Mikroformate
• Weitere Ressourcen

Lizenz: rel-license

• Verweis auf eine Seite mit Informationen zur Lizenzform

  

Lizenz: rel-license

• Anwendung

  <p>Dieses Werk steht unter einer <a rel="license"
    href="http://creativecommons.org/licenses/by-nd/2.0/de/">
    Creative Commons-Lizenz</a>.</p>

Lizenz: rel-license

• Nutzen
  • Suche nach Lizenzinformationen
    • Yahoo Creative Commons Search
    • Google Usage Right’s Search

Lizenz: rel-license

• Implementierungen
  • Creative Commons (cc) Lizenzwähler

Tagging: rel-tag

• Verweis auf eine Liste aller Seiten eines Webangebots mit dem entsprechenden Tag

  

Tagging: rel-tag

• Anwendung

  <a href="http://www.mister-wong.de/tags/mikroformate/"
    rel="tag">Mikroformate</a>

Tagging: rel-tag

• Nutzen
  • Die Suchmaschine Technorati basiert auf rel-tag
  • Operator liest Tags aus

    

Tagging: rel-tag

• Implementierungen
  • Diverse Plugins für zahlreiche Weblog-Publishing-Systeme, CMS, Autorensysteme und Wikis
    • Dreamweaver
    • Serendipity
    • Textpattern
    • WordPress
    • ...

XHTML Friends Network

• Anzeige von persönlichen Beziehungen im World Wide Web und in sozialen Netzwerken

  

XHTML Friends Network

• Anwendung

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

XHTML Friends Network

• Anwendung

  Gruppe	Wert	Bedeutung
  Freundschaft	contact	Jemand, dessen Kontaktdaten man kennt
  	acquaintance	Flüchtiger Kontakt, Bekannter
  	friend	(Guter) Freund
  Physikalisch	met	Jemand, den man persönlich getroffen hat
  Beruf	co-worker	Jemand, der im selben Unternehmen beschäftigt ist
  	colleague	Mitarbeiter desselben Themenbereichs
  Geografisch	co-resident	Mitbewohner
  	neighbour	Jemand, der in der Nähe wohnt

XHTML Friends Network

• Anwendung

  Gruppe	Wert	Bedeutung
  Familie	child	Kind
  	parent	Elternteil
  	sibling	Bruder oder Schwester
  	spouse	Ehepartner
  	kin	Sonstiger (entfernter) Verwandter
  Romantisch	muse	Jemand, von dem man inspiriert wird
  	crush	Jemand, in den man verliebt ist
  	date	Jemand, mit dem man sich trifft
  	sweetheart	Jemand, mit dem man eine engere Beziehung eingegangen ist
  Persönlich	me	Man selbst

XHTML Friends Network

• Nutzen
  • Kategorisierung persönlicher Kontakte
  • Ermittlung und grafische Abbildung von Beziehungsstrukturen

XHTML Friends Network

• Implementierungen
  • Diverse Plugins für zahlreiche Weblog-Publishing-Systeme, CMS, Autorensysteme und Wikis
  • XFN 1.1 Creator

XHTML Friends Network

• Styling
  • Microformats Icons

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

    

Weitere linkbasierte Formate

• rel-directory: Verweis auf ein Verzeichnis
• rel-home: Verweis auf die Homepage

Agenda

• Einführung in Mikroformate
• Linkbasierte Mikroformate
• Komplexe Mikroformate
• Weitere Ressourcen

Koordinaten: geo

• Angabe von Koordinaten

  

Koordinaten: geo

• Anwendung

  <span class="geo">
    <span class="latitude">49.985869</span>
    <span class="longitude">8.587682</span>
  </span>
  
  <p>Die Konferenz AJAX in Action 2007 findet statt im
    <abbr title="49.985869;8.587682" class="geo">
    NH Hotel Frankfurt-Mörfelden</abbr>.</p>

Koordinaten: geo

• Nutzen
  • Das Firefox-Plugin Operator liest Geodaten aus
  • Weiterverarbeitung durch Dienste wie GEO Microformats
    • Beispiel: Google-Mashup aus Vortragsliste

    

Koordinaten: geo

• Implementierungen
  • Flickr-Weltkarte mit Geodaten versehener Fotos
  • Multimap zeigt Geodaten bei Suchergebnissen
  • Wikitravel versieht Orte mit Geodaten

Kontaktinformationen: hCard

• Auszeichnung von Kontaktinformationen
• Überträgt den vCard-Standard in (X)HTML

  

Kontaktinformationen: hCard

• Anwendung

  <address>
    GETIT GmbH<br />
    Emil-Figge-Straße 80<br />
    44227 Dortmund<br />
    Telefon: +49 231 9742300<br />
    Fax: +49 231 9742356<br />
    E-Mail: <a href="mailto:info@getit.de">info@getit.de</a><br />
    Web: <a href="http://www.getit.de/">www.getit.de</a>
  </address>

Kontaktinformationen: hCard

• Anwendung

  <address class="vcard">
    <span class="adr">
      <span class="fn org">GETIT GmbH</span><br />
      <span class="street-address">Emil-Figge-Straße 80</span><br />
      <span class="postal-code">44227</span>
      <span class="locality">Dortmund</span>
    </span><br />
    Telefon: <span class="tel">+49 231 9742300</span><br />
    <span class="tel">
      <span class="type">Fax</span>:
      <span class="value">+49 231 9742356</span>
    </span><br />
    E-Mail: <a href="mailto:info@getit.de" class="email">info@getit.de</a><br />
    Web: <a href="http://www.getit.de/" class="url">www.getit.de</a>
  </address>

Kontaktinformationen: hCard

• Nutzen
  • Operator liest Adressen und Kontaktinformationen aus
  • Export als VCF-Datei über Dienste wie Technorati
  • Anzeige und Export über das Firefox-Plugin Tails Export

Kontaktinformationen: hCard

• Implementierungen
  • hCard Creator
  • Diverse Bibliotheken und Toolkits
    • Microformat Parser for Ruby
    • hKit Microformats Toolkit for PHP5

Veranstaltungen: hCalendar

• Auszeichnung von Kalender- und Veranstaltungsdaten
• Überträgt den vCalendar-Standard in (X)HTML

  

Veranstaltungen: hCalendar

• Anwendung

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

Veranstaltungen: hCalendar

• Anwendung

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

Veranstaltungen: hCalendar

• Nutzen
  • Export von Terminen als iCalendar-Datei
  • Anzeige und Export über Tails Export
  • Auslesen mittels Operator
    • Beispiel: Termin zu Yahoo! Calendar hinzufügen

Veranstaltungen: hCalendar

• Implementierungen
  • hCalendar Creator

Bewertungen: hReview

• Bewertungen und Besprechungen von Serviceleistungen, Veranstaltungen, Filmen und Produkten

  

Bewertungen: hReview

• Anwendung

  <h5>2000 Jim Barry, The McCrae Wood, Shiraz</h5>
    
  (3 months ago)
  
  <img src="/img/profile-icon.gif" alt="buddy icon" height="48" width="48" />
  <a href="/people/ballbag">ballbag</a>
  
  100.0<em>/100</em>
  
  <blockquote>This wine is the happy medium between the green wines
  of the late 90'and the over the top wines we see today! If you can find
  it anywhere drink it up quickly!</blockquote>

Bewertungen: hReview

• Anwendung

  <div class="hreview">
    <h5 class="item"><span class="fn">2000 Jim Barry,
      The McCrae Wood, Shiraz</span></h5>
    
    <abbr class="dtreviewed" title="20070706">(3 months ago)</abbr>
    
    <span class="reviewer vcard">
      <img class="photo" src="/img/profile-icon.gif"
        alt="buddy icon" height="48" width="48" />
      <a class="url fn" href="/people/ballbag">ballbag</a>
    </span>
    
    <abbr class="rating" title="100.0">100.0<em>/100</em></abbr>
    
    <blockquote class="description">This wine is the happy
    medium between the green wines of the late 90'and the over the top wines we
    see today! If you can find it anywhere drink it up quickly!</blockquote>
  </div>

Bewertungen: hReview

• Implementierungen
  • hReview Creator
  • Diverse Plugins für zahlreiche Systeme

Weitere komplexe Formate

• hResume: Lebensläufe
• xFolk: Auszeichnung von Social Bookmarks

Agenda

• Einführung in Mikroformate
• Linkbasierte Mikroformate
• Komplexe Mikroformate
• Weitere Ressourcen

Weitere Ressourcen

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

Weitere Ressourcen

• Online-Ressourcen
  • mikroformate.de: Grundlagenartikel und Einführungen in die einzelnen Formate
  • webkompetenz.wikidot.com/tutorials:mikroformate: Umfangreiches Tutorial mit vielen Beispielen
  • www.mikroformate.org: Kollektivblog mit aktuellen Neuigkeiten
  • microformatique.com: Englisches Weblog
  • suda.co.uk/projects: Diverse Werkzeuge und Hilfsmittel, Microformats Cheat Sheet

Weitere Ressourcen

• Das Buch
  • Microformats: Empowering Your Markup for Web 2.0 von John Allsopp
    • microformatique.com/book

• Vielen Dank für Ihre Aufmerksamkeit!