Search

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

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    3 Favorites & 1 Event

    6 Beispiele für die nützliche Anwendung von Mikroformaten - Presentation 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
      • Diskussion?
      • Michael Jendryschik
      • [email_address]

    + jendryschikjendryschik, 2 years ago

    custom

    2824 views, 3 favs, 5 embeds more stats

    Der Hype um Mikroformate hat in letzter Zeit ein we more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2824
      • 2093 on SlideShare
      • 731 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 19
    Most viewed embeds
    • 704 views on http://mikroformate.de
    • 16 views on http://www.itemis.de
    • 9 views on https://onion.net
    • 1 views on http://tumblr.hyaena.de
    • 1 views on http://safe.tumblr.com

    more

    All embeds
    • 704 views on http://mikroformate.de
    • 16 views on http://www.itemis.de
    • 9 views on https://onion.net
    • 1 views on http://tumblr.hyaena.de
    • 1 views on http://safe.tumblr.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    more

    Groups / Events

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved