1. Websemantics
FuCamp 2010
Matthias Pfefferle
http://notizblog.org
http://twitter.com/pfefferle

2. was sind Websemantics?

3. das Problem!

4. aus User-Sicht

5. aus User-Sicht

6. aus Google-Sicht

7. aus Google-Sicht

8. Lösung?

9. Websemantics!

10. Buzzword-Bingo
• POSH (Plain Old Semantic HTML)
• Semantic HTML
• RDFa
• Microformats
• Microdata
• eRDF

11. <div>
<h1>Max Mustermann</h1>
<small>Web-Entwickler</small>
<ul>
<li>Mustergasse 2</li>
<li>12345 Musterstadt</li>
<li>Deutschland</li>
</ul>
</div>

12. <div class=“vcard“>
<h1>Max Mustermann</h1>
<small>Web-Entwickler</small>
<ul>
<li>Mustergasse 2</li>
<li>12345 Musterstadt</li>
<li>Deutschland</li>
</ul>
</div>

13. <div class=“vcard“>
<h1 class=“fn“>Max Mustermann</h1>
<small class=“note“>Web-Entwickler</small>
<ul class=“adr“>
<li class=“street-address“>Mustergasse 2</li>
<li class=“locality“>12345 Musterstadt</li>
<li class=“country-name“>Deutschland</li>
</ul>
</div>

14. Formate?
• Profildaten
• Events
• Lizenzinformationen
• Audio/Video/Bilder
• Blog-Posts
• Beziehungen
• ...

15. bisher

17. buzzword-bingo
• RSS
• Atom
• RDF (FoaF, SKOS, ...)
• XRD
• WSDL

18. jetzt neu!

20. Kein Ersatz für
klassische Formate
• Feeds: RSS/Atom
• Discovery: WSDL/XRD
• Wissensrepräsentation: RDF/OWL
• Login: OpenID

21. Anwendungsgebiete
• Dienste die sowieso den HTML Code
interpretieren
• Suchmaschinen
• Browser

22. Vorteil für
Suchmaschinen

23. Live-Beispiele
• Yahoo (SearchMonkey)
• http://notizblog.org/2008/06/19/searchmonkey-fuer-
anwender/
• http://notizblog.org/2010/02/21/neue-identifier-fuer-den-
searchmonkey/
• http://developer.yahoo.com/searchmonkey/
• Google (Rich Snippets)
• http://www.google.com/support/webmasters/bin/
answer.py?answer=99170
• http://www.google.com/webhp?hl=en-US

24. Vorteile für Browser

25. Live-Beispiele
• Firefox
• Operator: https://addons.mozilla.org/de/firefox/addon/
4106/
• Tails: https://addons.mozilla.org/de/firefox/addon/153353
• Google Maps for Microformats: https://
addons.mozilla.org/de/firefox/addon/153353/
• Chrome
• Michromeformats: http://chrome.google.com/extensions/
detail/oalbifknmclbnmjlljdemhjjlkmppjjl

26. Some Magic!

27. Live-Beispiele
• Ident-Engine: http://identengine.com
• Webfinger: http://webfinger.org

28. Formate
• Microformats
• RDFa
• Microdata

29. Microformats
• klassische HTML Attribute
• class
• rel/rev
• title
• valides HTML 4/5 und XHTML 1/1.1

30. <div class=“vcard“>
<h1 class=“fn“>Max Mustermann</h1>
<small class=“note“>Web-Entwickler</small>
</div>

31. RDFa
• neue HTML Attribute
• about
• property
• resource
• datatype
• typeof
• Für XHTML 2 entwickelt

32. <div xmlns:contact=
"http://www.w3.org/2001/vcard-rdf/3.0#"
about="http://example.com/max">
<h1 property=“contact:fn“>
Max Mustermann</h1>
<small property=“contact:note“>
Web-Entwickler</small>
</div>

33. Microdata
• neue HTML Attribute
• itemscope
• itemtype
• itemprop
• itemref
• itemid
• Für (X)HTML 5 entwickelt

34. <div itemscope
itemtype=
“http://microformats.org/profile/hcard“>
<h1 itemprop=“fn“>Max Mustermann</h1>
<small itemprop=“note“>
Web-Entwickler</small>
</div>

35. Hier könnte ein Fazit
stehen ...

36. Weitere Infos
• http://notizblog.org/tag/microformats/
• http://notizblog.org/tag/rdfa/
• http://notizblog.org/tag/microdata/

37. Fragen???