Mein Talk auf der Developer Week 2013 in Nürnberg. Thema: Wie bekommen wir Strukturen ins Netz? Antwort: Structured Data.

1. Struktur im Internet
Microformats vs. Microdata
www.flickr.com/photos/herrolsen/7009460113/

2. Nils Lauk
XING AG
Team Lead Frontend Architecture
liebt Struktur

3. Computer sind dumm
www.flickr.com/photos/tschaut/2702223634/

4. Helft dem Internet
www.flickr.com/photos/sebke/3485578139/

5. Semantik
Semantik, auch Bedeutungslehre, nennt man die
Theorie oder Wissenschaft von der Bedeutung der
Zeichen. Zeichen können in diesem Fall Wörter,
Phrasen oder Symbole sein. Die Semantik be-
schäftigt sich typischerweise mit den Beziehungen
zwischen Zeichen und Bedeutungen dieser
Zeichen. - (Wikipedia)
www.flickr.com/photos/doug88888/3843456676/

6. <comicexpression>
</comicexpression>
www.flickr.com/photos/jcolman/306950863/

7. Auftritt: Structured Data
www.flickr.com/photos/alancleaver/3405608142/

8. 2005
Dan Cederholm
Tantek Çelik
Class-Selektoren

10. Nils Lauk
XING AG
Dammtorstraße 29-32
20354 Hamburg
www.xing.com/profile/nils_lauk

11. <div class="vcard">
Nils Lauk
XING AG
Dammtorstraße 29-32
20354 Hamburg
www.xing.com/profile/nils_lauk
</div>

12. <div class="vcard">
<div class="fn">Nils Lauk</div>
<div class="org">XING AG</div>
<div class="adr">
<div class="street-address">
Dammtorstraße 29-32</div>
<span class="postal-code">20354</span>
<span class="region">Hamburg</span>
</div>
<a href="#" class="url">
www.xing.com/profile/nils_lauk
</a>
</div>

13. Wahnsinn!

14. Schnittstelle - z.B. Add-on für Firefox

16. www.flickr.com/photos/borrowed/2278532757/
Gut für die User

17. www.flickr.com/photos/zippy/50307480/
Gut für die Industrie

18. Oft benutzte Microformats
•hCard
•hCalendar
•rel-tag
•XFN
•hReview
•hRecipe
•hProduct
•hMedia
...

20. Mehrwert
www.flickr.com/photos/myklroventine/3400039523/

21. Happy User
www.flickr.com/photos/jamesyu/366732694/

22. Microdata

24. sehr viele Typen, sehr ausführlich

25. <div class="vcard">
<div class="fn">Nils Lauk</div>
<div class="org">XING AG</div>
<div class="adr">
<div class="street-address">
Dammtorstraße 29-32</div>
<span class="postal-code">20354</span>
<span class="region">Hamburg</span>
</div>
<a href="#" class="url">
www.xing.com/profile/nils_lauk
</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
<div itemprop="name">Nils Lauk</div>
<div itemscope itemtype="schema.org/Organization">
<div itemprop="name">XING AG</div>
</div>
<div itemscope itemprop="address"
itemtype="http://schema.org/PostalAddress">
<div itemprop="streetAddress">
Dammtorstraße 29-32</div>
<span itemprop="postalCode">20354</span>
<span itemprop="addressLocality">Hamburg</span>
</div>
<a href="#" itemprop="url">
www.xing.com/profile/nils_lauk
</a>
</div>

26. {
"items": [
{
"type": [
"http://schema.org/Essen"
],
"properties": {
"Frucht": [
"Apfel"
]
}
},
{
"type": [
"http://schema.org/Suess"
],
"properties": {
"Schokolade": [
"Herb"
]
}
}
]
}
github.com/matt-west/microdatajs

27. Microdata in freier Wildbahn
www.flickr.com/photos/29487767@N02/3439298042/

29. www.google.de/webmasters/tools/richsnippets

36. Keine Daten? AJAX...?

37. Vergleich
Microformats
•Class-Selektoren
•etabliert
•geringes Set
Microdata
•HTML5
•relativ neu
•data-vocabulary.org
•Google/Bing/Yahoo
•schema.org
•umfangreich
www.flickr.com/photos/blueridgekitties/4978985479/

38. Microformats 2
www.flickr.com/photos/tzzimone/494855060/

39. <div class="vcard">
<div class="fn">Hein Mück</div>
</div>
<div class="h-card">Hein Mück</div>
Microformats
Microformats 2

40. Microformats 2
<a class="h-card" href="http://foo.bar">
Hein Mück
</a>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Hein Mueck"],
"url": ["http://foo.bar"]
}
}]
}

41. Microformats 2 - Zug abgefahren?
www.flickr.com/photos/samchurchill/4587963200/

42. 13% mit Auszeichnung
www.flickr.com/photos/jepoirrier/2462476884/
49,3% MF 14,4% MD 36,3% RDFa
Web Data Commons Extraction Report - Februar 2012 Corpus

43. Use structured data
www.flickr.com/photos/edtrigger/4276152246/

44. Geduld
www.flickr.com/photos/chovy/2353209387/

45. Alles wird gut!
www.flickr.com/photos/31029865@N06/5845003579/

46. Dankewww.flickr.com/photos/timmy2s/7004300420/