6 Beispiele für die nützliche Anwendung von Mikroformaten
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 7,022 views

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

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.

Statistics

Views

Total Views
7,022
Views on SlideShare
5,049
Embed Views
1,973

Actions

Likes
5
Downloads
28
Comments
0

6 Embeds 1,973

http://mikroformate.de 1931
http://www.itemis.de 19
http://www.slideshare.net 10
https://onion.net 9
http://tumblr.hyaena.de 3
http://safe.tumblr.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 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
    • (Sehr) kurze Einführung
      • XHTML und HTML
        • Rund 90 Elementtypen
        • Menschen- und maschinenlesbar
    • (Sehr) kurze Einführung
      • XHTML und HTML
        • Semantisch unvollständig
          • Kontaktdaten?
          • Veranstaltungen?
          • DVD-Sammlungen?
          • Rezensionen?
          • Fahrpläne?
          • ...
    • (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=&quot;mailto:info@itemis.de&quot;>info@itemis.de</a><br /> Web: <a href=&quot;http://www.itemis.de/&quot;>www.itemis.de</a> </address>
    • (Sehr) kurze Einführung
      • Beispiel: Auszeichnung von Kontaktdaten (hCard)
      <address class=&quot;contact&quot; > <span class=&quot;address&quot;> <span class=&quot;name&quot;> itemis AG </span> <br /> <span class=&quot;street&quot;> Am Brambusch 15–24 </span> <br /> <span class=&quot;city&quot;> 44536 Lünen </span> </span> <br /> Telefon: <span class=&quot;phone&quot;> +49 231 9860-210 </span> <br /> Fax: <span class=&quot;fax&quot;> +49 231 9860-211 </span> <br /> E-Mail: <a href=&quot;mailto:info@itemis.de&quot; class=&quot;mail&quot; >info@itemis.de</a><br /> Web: <a href=&quot;http://www.itemis.de/&quot; class=&quot;website&quot; >www.itemis.de</a> </address>
    • (Sehr) kurze Einführung
      • Beispiel: Auszeichnung von Kontaktdaten (hCard)
      <address class=&quot;vcard&quot; > <span class=&quot;adr&quot;> <span class=&quot;fn org&quot;> itemis AG </span> <br /> <span class=&quot;street-address&quot;> Am Brambusch 15–24 </span> <br /> <span class=&quot;postal-code&quot;> 44536 </span> <span class=&quot;locality&quot;> Lünen </span> </span> <br /> Telefon: <span class=&quot;tel&quot;> +49 231 9860-210 </span> <br /> <span class=&quot;tel&quot;> <span class=&quot;type&quot;> Fax </span>: <span class=&quot;value&quot;> +49 231 9860-211 </span> </span> <br /> E-Mail: <a href=&quot;mailto:info@itemis.de&quot; class=&quot;email&quot; >info@itemis.de</a><br /> Web: <a href=&quot;http://www.itemis.de/&quot; class=&quot;url&quot; >www.itemis.de</a> </address>
    • (Sehr) kurze Einführung
      • Mikroformate
        • Formate zur »Feinstrukturierung« von Webseiten
        • Erweitern (X)HTML durch zusätzliche semantische Strukturen
        • Nutzen
          • Wiederverwendbarkeit
          • Interoperabilität
          • Wartbarkeit
    • (Sehr) kurze Einführung
      • Populäre Formate
    • (Sehr) kurze Einführung
      • Microformats.org
        • microformats.org : Offizielle Website
        • microformats.org/wiki/Main_Page : Microformats Wiki
        • microformats.org/code : Anwendungen und Werkzeuge
    • 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
    • Datenimport von Kontakten
      • hCardMapper
        • http://lib.omnia-computing.de/hcardmapper
        • Extrahiert Adressdaten aus Webseiten und befüllt damit Formularfelder
    • Datenimport von Kontakten
      • hCardMapper
    • Datenimport von Kontakten
      • hCardMapper
    • Datenimport von Kontakten
      • hCardMapper
    • Datenimport von Kontakten
      • hCardMapper
    • Datenimport von Kontakten
      • hCardMapper
        • Als WordPress-Plugin von Matthias Pfefferle
          • http://notizblog.org/2008/04/02/hcardmapper-fuer-wordpress/
    • Datenimport von Kontakten
      • Personen aus anderen Netzwerken importieren
    • Datenimport von Kontakten
      • Personen aus anderen Netzwerken importieren
        • Beispiel: DOPPLR
    • Datenimport von Kontakten
      • Firefox 3 Microformats API
        • Firefox 3 verfügt über eine API für Mikroformate
          • http://developer.mozilla.org/en/Using_microformats
    • Datenimport von Kontakten
      • Firefox 3 Microformats API
        • In der Benutzeroberfläche noch nicht zu finden
    • Datenimport von Kontakten
      • Firefox 3 Microformats API
        • Nutzung der API für Extensions
          • http://www.ibm.com/developerworks/xml/library/x-tipffoxmicroapi/
    • Datenimport von Kontakten
      • Firefox 3 Microformats API
    • Datenimport von Kontakten
      • Firefox 3 Microformats API
    • Datenimport von Kontakten
      • Firefox 3 Microformats API
    • 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
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
      <h3><a href=&quot;http://www.worldusabilityday.org/&quot;> World Usability Day 2007</a></h3> <p>Weltweiter Aktionstag zum Thema Usability</p> <p class=&quot;datum&quot;> 8. November, Weltweit, weitere Infos unter <a href=&quot;http://www.worldusabilityday.org/&quot;>worldusabilityday.org</a>. </p>
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
      <div class=&quot;vevent&quot;> <h3 class=&quot;summary &quot;><a href=&quot;http://www.worldusabilityday.org/&quot; class=&quot;url&quot; >World Usability Day 2007</a></h3> <p class=&quot;description&quot; >Weltweiter Aktionstag zum Thema Usability</p> <p class=&quot;datum&quot;> <abbr class=&quot;dtstart&quot; title=&quot;2007-11-8&quot;> 8. November </abbr> , <span class=&quot;location&quot;> Weltweit </span> , weitere Infos unter <a href=&quot;http://www.worldusabilityday.org/&quot; rel=&quot;external&quot; class=&quot;url&quot; >worldusabilityday.org</a>. </p> </div>
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • Datenexport von Veranstaltungen
      • Veranstaltungen exportieren und importieren
    • 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
    • Umfragen auswerten mit Folksr
      • Vote Links
        • microformats.org/wiki/votelinks
        • rev=&quot;vote-for&quot; : Zustimmung
        • rev=&quot;vote-abstain&quot; : Enthaltung
        • rev=&quot;vote-against&quot; : Ablehnung
    • Umfragen auswerten mit Folksr
      • Vote Links
        • microformats.org/wiki/votelinks
        • rev=&quot;vote-for&quot; : Zustimmung
        • rev=&quot;vote-abstain&quot; : Enthaltung
        • rev=&quot;vote-against&quot; : Ablehnung
      <a href=&quot;http://de.wikipedia.org/wiki/XHTML&quot; rev=&quot;vote-for&quot; >XHTML</a> <a href=&quot;http://de.wikipedia.org/wiki/XHTML&quot; rev=&quot;vote-against&quot; >HTML</a>
    • Umfragen auswerten mit Folksr
      • Folksr
        • www.folksr.de
    • Umfragen auswerten mit Folksr
      • Folksr
        • www.folksr.de
    • Umfragen auswerten mit Folksr
      • Folksr
        • www.folksr.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
    • Mashups mit Google Maps
      • Geodaten auslesen und an Google übergeben
    • Mashups mit Google Maps
      • Geodaten auslesen und an Google übergeben
    • Mashups mit Google Maps
      • Geodaten auslesen und an Google übergeben
    • Mashups mit Google Maps
      • Geodaten auslesen und an Google übergeben
      <abbr class=&quot;geo&quot; title=&quot;51.604951;7.452614&quot;> itemis AG</abbr>
    • Mashups mit Google Maps
      • Geodaten auslesen und an Google übergeben
        • http://suda.co.uk/projects/microformats/geo/
      <kml xmlns=&quot;http://earth.google.com/kml/2.0&quot;> <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>
    • Mashups mit Google Maps
      • Geodaten auslesen und an Google übergeben
        • Beispiel: 24 ways
    • Mashups mit Google Maps
      • Geodaten auslesen und an Google übergeben
    • 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
    • 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=&quot;http://www.intermitto.net/ich/&quot; rel=&quot;friend met&quot; >Jens Becker</a>
    • CSS-Layout
      • Beispiel: XFN
    • CSS-Layout
      • Beispiel: XFN
    • CSS-Layout
      • Beispiel: XFN
        • Microformats Icons
      a[rel~=&quot;friend&quot;] { background: url(/images/xfn/friend.png) left center no-repeat; padding: 0 0 0 20px; }
    • CSS-Layout
      • Beispiel: expose-mf.css von Hicksdesign
    • 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
    • Bessere Suchmaschinen
      • Mehr Semantik = Bessere Suchergebnisse
    • Bessere Suchmaschinen
    • Bessere Suchmaschinen
    • Bessere Suchmaschinen
    • Bessere Suchmaschinen
    • Bessere Suchmaschinen
    • Bessere Suchmaschinen
    • 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
      • Diskussion?
      • Michael Jendryschik
      • [email_address]