6 Beispiele für die nützliche Anwendung von Mikroformaten Was Sie mit »mikroformatierten« Seiten alles machen können Micha...
Michael Jendryschik <ul><li>itemis AG </li></ul><ul><ul><li>www.itemis.de </li></ul></ul>
Michael Jendryschik <ul><li>Webkrauts </li></ul><ul><ul><li>www.webkrauts.de </li></ul></ul>
Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul>...
Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul>...
(Sehr) kurze Einführung <ul><li>XHTML und HTML </li></ul><ul><ul><li>Rund 90 Elementtypen  </li></ul></ul><ul><ul><li>Mens...
(Sehr) kurze Einführung <ul><li>XHTML und HTML </li></ul><ul><ul><li>Semantisch unvollständig </li></ul></ul><ul><ul><ul><...
(Sehr) kurze Einführung <ul><li>Beispiel: Auszeichnung von Kontaktdaten (hCard) </li></ul><address>   itemis AG<br />   Am...
(Sehr) kurze Einführung <ul><li>Beispiel: Auszeichnung von Kontaktdaten (hCard) </li></ul><address  class=&quot;contact&qu...
(Sehr) kurze Einführung <ul><li>Beispiel: Auszeichnung von Kontaktdaten (hCard) </li></ul><address  class=&quot;vcard&quot...
(Sehr) kurze Einführung <ul><li>Mikroformate </li></ul><ul><ul><li>Formate zur »Feinstrukturierung« von Webseiten  </li></...
(Sehr) kurze Einführung <ul><li>Populäre Formate </li></ul>
(Sehr) kurze Einführung <ul><li>Microformats.org </li></ul><ul><ul><li>microformats.org : Offizielle Website  </li></ul></...
Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul>...
Datenimport von Kontakten <ul><li>hCardMapper </li></ul><ul><ul><li>http://lib.omnia-computing.de/hcardmapper </li></ul></...
Datenimport von Kontakten <ul><li>hCardMapper </li></ul>
Datenimport von Kontakten <ul><li>hCardMapper </li></ul>
Datenimport von Kontakten <ul><li>hCardMapper </li></ul>
Datenimport von Kontakten <ul><li>hCardMapper </li></ul>
Datenimport von Kontakten <ul><li>hCardMapper </li></ul><ul><ul><li>Als WordPress-Plugin von Matthias Pfefferle </li></ul>...
Datenimport von Kontakten <ul><li>Personen aus anderen Netzwerken importieren </li></ul>
Datenimport von Kontakten <ul><li>Personen aus anderen Netzwerken importieren </li></ul><ul><ul><li>Beispiel:  DOPPLR </li...
Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul><ul><ul><li>Firefox 3 verfügt über eine API für Mik...
Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul><ul><ul><li>In der Benutzeroberfläche noch nicht zu...
Datenimport von Kontakten <ul><li>Firefox 3 Microformats API  </li></ul><ul><ul><li>Nutzung der API für Extensions </li></...
Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul>
Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul>
Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul>
Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul>...
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul><h3><a href=&quot;http://www...
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul><div class=&quot;vevent&quot...
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul>...
Umfragen auswerten mit Folksr <ul><li>Vote Links </li></ul><ul><ul><li>microformats.org/wiki/votelinks </li></ul></ul><ul>...
Umfragen auswerten mit Folksr <ul><li>Vote Links </li></ul><ul><ul><li>microformats.org/wiki/votelinks </li></ul></ul><ul>...
Umfragen auswerten mit Folksr <ul><li>Folksr </li></ul><ul><ul><li>www.folksr.de </li></ul></ul>
Umfragen auswerten mit Folksr <ul><li>Folksr </li></ul><ul><ul><li>www.folksr.de </li></ul></ul>
Umfragen auswerten mit Folksr <ul><li>Folksr </li></ul><ul><ul><li>www.folksr.de </li></ul></ul>
Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul>...
Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul>
Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul>
Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul>
Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul><abbr class=&quot;geo&quot; title=&quo...
Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul><ul><ul><li>http://suda.co.uk/projects...
Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul><ul><ul><li>Beispiel:  24 ways </li></...
Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul>
Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul>...
CSS-Layout <ul><li>Immer dasselbe Vokabular, also standardisierte Darstellung mittels Stylesheets möglich </li></ul>
CSS-Layout <ul><li>Beispiel: XFN </li></ul><ul><ul><li>Anzeige von persönlichen Beziehungen im World Wide Web und in sozia...
CSS-Layout <ul><li>Beispiel: XFN </li></ul>
CSS-Layout <ul><li>Beispiel: XFN </li></ul>
CSS-Layout <ul><li>Beispiel: XFN </li></ul><ul><ul><li>Microformats Icons </li></ul></ul>a[rel~=&quot;friend&quot;] {   ba...
CSS-Layout <ul><li>Beispiel:  expose-mf.css  von  Hicksdesign </li></ul>
Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul>...
Bessere Suchmaschinen <ul><li>Mehr Semantik = Bessere Suchergebnisse </li></ul>
Bessere Suchmaschinen
Bessere Suchmaschinen
Bessere Suchmaschinen
Bessere Suchmaschinen
Bessere Suchmaschinen
Bessere Suchmaschinen
Bessere Suchmaschinen <ul><li>Yahoo SearchMonkey </li></ul><ul><ul><li>hCard:  searchmonkeyid:com.yahoo.uf.hcard </li></ul...
<ul><li>Diskussion? </li></ul><ul><li>Michael Jendryschik </li></ul><ul><li>[email_address] </li></ul>
Upcoming SlideShare
Loading in...5
×

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

4,524

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,524
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

  1. 1. 6 Beispiele für die nützliche Anwendung von Mikroformaten Was Sie mit »mikroformatierten« Seiten alles machen können Michael Jendryschik
  2. 2. Michael Jendryschik <ul><li>itemis AG </li></ul><ul><ul><li>www.itemis.de </li></ul></ul>
  3. 3. Michael Jendryschik <ul><li>Webkrauts </li></ul><ul><ul><li>www.webkrauts.de </li></ul></ul>
  4. 4. Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul><ul><li>2. Beispiel: Datenexport von Veranstaltungen </li></ul><ul><li>3. Beispiel: Umfragen auswerten mit Folksr </li></ul><ul><li>4. Beispiel: Mashups </li></ul><ul><li>5. Beispiel: CSS-Layout </li></ul><ul><li>6. Beispiel: Bessere Suchmaschinen </li></ul>
  5. 5. Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul><ul><li>2. Beispiel: Datenexport von Veranstaltungen </li></ul><ul><li>3. Beispiel: Umfragen auswerten mit Folksr </li></ul><ul><li>4. Beispiel: Mashups </li></ul><ul><li>5. Beispiel: CSS-Layout </li></ul><ul><li>6. Beispiel: Bessere Suchmaschinen </li></ul>
  6. 6. (Sehr) kurze Einführung <ul><li>XHTML und HTML </li></ul><ul><ul><li>Rund 90 Elementtypen </li></ul></ul><ul><ul><li>Menschen- und maschinenlesbar </li></ul></ul>
  7. 7. (Sehr) kurze Einführung <ul><li>XHTML und HTML </li></ul><ul><ul><li>Semantisch unvollständig </li></ul></ul><ul><ul><ul><li>Kontaktdaten? </li></ul></ul></ul><ul><ul><ul><li>Veranstaltungen? </li></ul></ul></ul><ul><ul><ul><li>DVD-Sammlungen? </li></ul></ul></ul><ul><ul><ul><li>Rezensionen? </li></ul></ul></ul><ul><ul><ul><li>Fahrpläne? </li></ul></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul>
  8. 8. (Sehr) kurze Einführung <ul><li>Beispiel: Auszeichnung von Kontaktdaten (hCard) </li></ul><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. 9. (Sehr) kurze Einführung <ul><li>Beispiel: Auszeichnung von Kontaktdaten (hCard) </li></ul><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. 10. (Sehr) kurze Einführung <ul><li>Beispiel: Auszeichnung von Kontaktdaten (hCard) </li></ul><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. 11. (Sehr) kurze Einführung <ul><li>Mikroformate </li></ul><ul><ul><li>Formate zur »Feinstrukturierung« von Webseiten </li></ul></ul><ul><ul><li>Erweitern (X)HTML durch zusätzliche semantische Strukturen </li></ul></ul><ul><ul><li>Nutzen </li></ul></ul><ul><ul><ul><li>Wiederverwendbarkeit </li></ul></ul></ul><ul><ul><ul><li>Interoperabilität </li></ul></ul></ul><ul><ul><ul><li>Wartbarkeit </li></ul></ul></ul>
  12. 12. (Sehr) kurze Einführung <ul><li>Populäre Formate </li></ul>
  13. 13. (Sehr) kurze Einführung <ul><li>Microformats.org </li></ul><ul><ul><li>microformats.org : Offizielle Website </li></ul></ul><ul><ul><li>microformats.org/wiki/Main_Page : Microformats Wiki </li></ul></ul><ul><ul><li>microformats.org/code : Anwendungen und Werkzeuge </li></ul></ul>
  14. 14. Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul><ul><li>2. Beispiel: Datenexport von Veranstaltungen </li></ul><ul><li>3. Beispiel: Umfragen auswerten mit Folksr </li></ul><ul><li>4. Beispiel: Mashups </li></ul><ul><li>5. Beispiel: CSS-Layout </li></ul><ul><li>6. Beispiel: Bessere Suchmaschinen </li></ul>
  15. 15. Datenimport von Kontakten <ul><li>hCardMapper </li></ul><ul><ul><li>http://lib.omnia-computing.de/hcardmapper </li></ul></ul><ul><ul><li>Extrahiert Adressdaten aus Webseiten und befüllt damit Formularfelder </li></ul></ul>
  16. 16. Datenimport von Kontakten <ul><li>hCardMapper </li></ul>
  17. 17. Datenimport von Kontakten <ul><li>hCardMapper </li></ul>
  18. 18. Datenimport von Kontakten <ul><li>hCardMapper </li></ul>
  19. 19. Datenimport von Kontakten <ul><li>hCardMapper </li></ul>
  20. 20. Datenimport von Kontakten <ul><li>hCardMapper </li></ul><ul><ul><li>Als WordPress-Plugin von Matthias Pfefferle </li></ul></ul><ul><ul><ul><li>http://notizblog.org/2008/04/02/hcardmapper-fuer-wordpress/ </li></ul></ul></ul>
  21. 21. Datenimport von Kontakten <ul><li>Personen aus anderen Netzwerken importieren </li></ul>
  22. 22. Datenimport von Kontakten <ul><li>Personen aus anderen Netzwerken importieren </li></ul><ul><ul><li>Beispiel: DOPPLR </li></ul></ul>
  23. 23. Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul><ul><ul><li>Firefox 3 verfügt über eine API für Mikroformate </li></ul></ul><ul><ul><ul><li>http://developer.mozilla.org/en/Using_microformats </li></ul></ul></ul>
  24. 24. Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul><ul><ul><li>In der Benutzeroberfläche noch nicht zu finden </li></ul></ul>
  25. 25. Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul><ul><ul><li>Nutzung der API für Extensions </li></ul></ul><ul><ul><ul><li>http://www.ibm.com/developerworks/xml/library/x-tipffoxmicroapi/ </li></ul></ul></ul>
  26. 26. Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul>
  27. 27. Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul>
  28. 28. Datenimport von Kontakten <ul><li>Firefox 3 Microformats API </li></ul>
  29. 29. Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul><ul><li>2. Beispiel: Datenexport von Veranstaltungen </li></ul><ul><li>3. Beispiel: Umfragen auswerten mit Folksr </li></ul><ul><li>4. Beispiel: Mashups </li></ul><ul><li>5. Beispiel: CSS-Layout </li></ul><ul><li>6. Beispiel: Bessere Suchmaschinen </li></ul>
  30. 30. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul><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. 31. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul><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. 32. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  33. 33. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  34. 34. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  35. 35. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  36. 36. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  37. 37. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  38. 38. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  39. 39. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  40. 40. Datenexport von Veranstaltungen <ul><li>Veranstaltungen exportieren und importieren </li></ul>
  41. 41. Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul><ul><li>2. Beispiel: Datenexport von Veranstaltungen </li></ul><ul><li>3. Beispiel: Umfragen auswerten mit Folksr </li></ul><ul><li>4. Beispiel: Mashups </li></ul><ul><li>5. Beispiel: CSS-Layout </li></ul><ul><li>6. Beispiel: Bessere Suchmaschinen </li></ul>
  42. 42. Umfragen auswerten mit Folksr <ul><li>Vote Links </li></ul><ul><ul><li>microformats.org/wiki/votelinks </li></ul></ul><ul><ul><li>rev=&quot;vote-for&quot; : Zustimmung </li></ul></ul><ul><ul><li>rev=&quot;vote-abstain&quot; : Enthaltung </li></ul></ul><ul><ul><li>rev=&quot;vote-against&quot; : Ablehnung </li></ul></ul>
  43. 43. Umfragen auswerten mit Folksr <ul><li>Vote Links </li></ul><ul><ul><li>microformats.org/wiki/votelinks </li></ul></ul><ul><ul><li>rev=&quot;vote-for&quot; : Zustimmung </li></ul></ul><ul><ul><li>rev=&quot;vote-abstain&quot; : Enthaltung </li></ul></ul><ul><ul><li>rev=&quot;vote-against&quot; : Ablehnung </li></ul></ul><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. 44. Umfragen auswerten mit Folksr <ul><li>Folksr </li></ul><ul><ul><li>www.folksr.de </li></ul></ul>
  45. 45. Umfragen auswerten mit Folksr <ul><li>Folksr </li></ul><ul><ul><li>www.folksr.de </li></ul></ul>
  46. 46. Umfragen auswerten mit Folksr <ul><li>Folksr </li></ul><ul><ul><li>www.folksr.de </li></ul></ul>
  47. 47. Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul><ul><li>2. Beispiel: Datenexport von Veranstaltungen </li></ul><ul><li>3. Beispiel: Umfragen auswerten mit Folksr </li></ul><ul><li>4. Beispiel: Mashups </li></ul><ul><li>5. Beispiel: CSS-Layout </li></ul><ul><li>6. Beispiel: Bessere Suchmaschinen </li></ul>
  48. 48. Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul>
  49. 49. Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul>
  50. 50. Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul>
  51. 51. Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul><abbr class=&quot;geo&quot; title=&quot;51.604951;7.452614&quot;> itemis AG</abbr>
  52. 52. Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul><ul><ul><li>http://suda.co.uk/projects/microformats/geo/ </li></ul></ul><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. 53. Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul><ul><ul><li>Beispiel: 24 ways </li></ul></ul>
  54. 54. Mashups mit Google Maps <ul><li>Geodaten auslesen und an Google übergeben </li></ul>
  55. 55. Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul><ul><li>2. Beispiel: Datenexport von Veranstaltungen </li></ul><ul><li>3. Beispiel: Umfragen auswerten mit Folksr </li></ul><ul><li>4. Beispiel: Mashups </li></ul><ul><li>5. Beispiel: CSS-Layout </li></ul><ul><li>6. Beispiel: Bessere Suchmaschinen </li></ul>
  56. 56. CSS-Layout <ul><li>Immer dasselbe Vokabular, also standardisierte Darstellung mittels Stylesheets möglich </li></ul>
  57. 57. CSS-Layout <ul><li>Beispiel: XFN </li></ul><ul><ul><li>Anzeige von persönlichen Beziehungen im World Wide Web und in sozialen Netzwerken </li></ul></ul><a href=&quot;http://www.intermitto.net/ich/&quot; rel=&quot;friend met&quot; >Jens Becker</a>
  58. 58. CSS-Layout <ul><li>Beispiel: XFN </li></ul>
  59. 59. CSS-Layout <ul><li>Beispiel: XFN </li></ul>
  60. 60. CSS-Layout <ul><li>Beispiel: XFN </li></ul><ul><ul><li>Microformats Icons </li></ul></ul>a[rel~=&quot;friend&quot;] { background: url(/images/xfn/friend.png) left center no-repeat; padding: 0 0 0 20px; }
  61. 61. CSS-Layout <ul><li>Beispiel: expose-mf.css von Hicksdesign </li></ul>
  62. 62. Agenda <ul><li>(Sehr) kurze Einführung in Mikroformate </li></ul><ul><li>1. Beispiel: Datenimport von Kontakten </li></ul><ul><li>2. Beispiel: Datenexport von Veranstaltungen </li></ul><ul><li>3. Beispiel: Umfragen auswerten mit Folksr </li></ul><ul><li>4. Beispiel: Mashups </li></ul><ul><li>5. Beispiel: CSS-Layout </li></ul><ul><li>6. Beispiel: Bessere Suchmaschinen </li></ul>
  63. 63. Bessere Suchmaschinen <ul><li>Mehr Semantik = Bessere Suchergebnisse </li></ul>
  64. 64. Bessere Suchmaschinen
  65. 65. Bessere Suchmaschinen
  66. 66. Bessere Suchmaschinen
  67. 67. Bessere Suchmaschinen
  68. 68. Bessere Suchmaschinen
  69. 69. Bessere Suchmaschinen
  70. 70. Bessere Suchmaschinen <ul><li>Yahoo SearchMonkey </li></ul><ul><ul><li>hCard: searchmonkeyid:com.yahoo.uf.hcard </li></ul></ul><ul><ul><li>hCalendar: searchmonkeyid:com.yahoo.uf.hcalendar </li></ul></ul><ul><ul><li>hReview: searchmonkeyid:com.yahoo.uf.hreview </li></ul></ul><ul><ul><li>XFN: searchmonkeyid:com.yahoo.uf.xfn </li></ul></ul>
  71. 71. <ul><li>Diskussion? </li></ul><ul><li>Michael Jendryschik </li></ul><ul><li>[email_address] </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×