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

  • 4,389 views
Uploaded on

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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,389
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
29
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 6 Beispiele für die nützliche Anwendung von Mikroformaten Was Sie mit »mikroformatierten« Seiten alles machen können Michael Jendryschik
  • 2. Michael Jendryschik
    • itemis AG
      • www.itemis.de
  • 3. Michael Jendryschik
    • Webkrauts
      • www.webkrauts.de
  • 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
  • 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. (Sehr) kurze Einführung
    • XHTML und HTML
      • Rund 90 Elementtypen
      • Menschen- und maschinenlesbar
  • 7. (Sehr) kurze Einführung
    • XHTML und HTML
      • Semantisch unvollständig
        • Kontaktdaten?
        • Veranstaltungen?
        • DVD-Sammlungen?
        • Rezensionen?
        • Fahrpläne?
        • ...
  • 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=&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>
  • 9. (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>
  • 10. (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>
  • 11. (Sehr) kurze Einführung
    • Mikroformate
      • Formate zur »Feinstrukturierung« von Webseiten
      • Erweitern (X)HTML durch zusätzliche semantische Strukturen
      • Nutzen
        • Wiederverwendbarkeit
        • Interoperabilität
        • Wartbarkeit
  • 12. (Sehr) kurze Einführung
    • Populäre Formate
  • 13. (Sehr) kurze Einführung
    • Microformats.org
      • microformats.org : Offizielle Website
      • microformats.org/wiki/Main_Page : Microformats Wiki
      • microformats.org/code : Anwendungen und Werkzeuge
  • 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
  • 15. Datenimport von Kontakten
    • hCardMapper
      • http://lib.omnia-computing.de/hcardmapper
      • Extrahiert Adressdaten aus Webseiten und befüllt damit Formularfelder
  • 16. Datenimport von Kontakten
    • hCardMapper
  • 17. Datenimport von Kontakten
    • hCardMapper
  • 18. Datenimport von Kontakten
    • hCardMapper
  • 19. Datenimport von Kontakten
    • hCardMapper
  • 20. Datenimport von Kontakten
    • hCardMapper
      • Als WordPress-Plugin von Matthias Pfefferle
        • http://notizblog.org/2008/04/02/hcardmapper-fuer-wordpress/
  • 21. Datenimport von Kontakten
    • Personen aus anderen Netzwerken importieren
  • 22. Datenimport von Kontakten
    • Personen aus anderen Netzwerken importieren
      • Beispiel: DOPPLR
  • 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
  • 24. Datenimport von Kontakten
    • Firefox 3 Microformats API
      • In der Benutzeroberfläche noch nicht zu finden
  • 25. Datenimport von Kontakten
    • Firefox 3 Microformats API
      • Nutzung der API für Extensions
        • http://www.ibm.com/developerworks/xml/library/x-tipffoxmicroapi/
  • 26. Datenimport von Kontakten
    • Firefox 3 Microformats API
  • 27. Datenimport von Kontakten
    • Firefox 3 Microformats API
  • 28. Datenimport von Kontakten
    • Firefox 3 Microformats API
  • 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
  • 30. 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>
  • 31. 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>
  • 32. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 33. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 34. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 35. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 36. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 37. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 38. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 39. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 40. Datenexport von Veranstaltungen
    • Veranstaltungen exportieren und importieren
  • 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
  • 42. 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
  • 43. 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>
  • 44. Umfragen auswerten mit Folksr
    • Folksr
      • www.folksr.de
  • 45. Umfragen auswerten mit Folksr
    • Folksr
      • www.folksr.de
  • 46. Umfragen auswerten mit Folksr
    • Folksr
      • www.folksr.de
  • 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
  • 48. Mashups mit Google Maps
    • Geodaten auslesen und an Google übergeben
  • 49. Mashups mit Google Maps
    • Geodaten auslesen und an Google übergeben
  • 50. Mashups mit Google Maps
    • Geodaten auslesen und an Google übergeben
  • 51. 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>
  • 52. 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>
  • 53. Mashups mit Google Maps
    • Geodaten auslesen und an Google übergeben
      • Beispiel: 24 ways
  • 54. Mashups mit Google Maps
    • Geodaten auslesen und an Google übergeben
  • 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
  • 56. CSS-Layout
    • Immer dasselbe Vokabular, also standardisierte Darstellung mittels Stylesheets möglich
  • 57. 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>
  • 58. CSS-Layout
    • Beispiel: XFN
  • 59. CSS-Layout
    • Beispiel: XFN
  • 60. 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; }
  • 61. CSS-Layout
    • Beispiel: expose-mf.css von Hicksdesign
  • 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
  • 63. Bessere Suchmaschinen
    • Mehr Semantik = Bessere Suchergebnisse
  • 64. Bessere Suchmaschinen
  • 65. Bessere Suchmaschinen
  • 66. Bessere Suchmaschinen
  • 67. Bessere Suchmaschinen
  • 68. Bessere Suchmaschinen
  • 69. Bessere Suchmaschinen
  • 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
  • 71.
    • Diskussion?
    • Michael Jendryschik
    • [email_address]