strukturen im internet - microformats vs. microdata

Struktur im InternetMicroformats vs. Microdata

www.flickr.com/photos/herrolsen/7009460113/

Nils LaukXING AGTeam Lead Frontend Architectureliebt Struktur

Computer sind dumm

www.flickr.com/photos/tschaut/2702223634/

Helft dem Internet

www.flickr.com/photos/sebke/3485578139/

SemantikSemantik, 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/

<comicexpression>

</comicexpression>

www.flickr.com/photos/jcolman/306950863/

Auftritt: Structured Data

www.flickr.com/photos/alancleaver/3405608142/

2005Dan CederholmTantek ÇelikClass-Selektoren

Nils LaukXING AGDammtorstraße 29-3220354 Hamburgwww.xing.com/profile/nils_lauk

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

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

Wahnsinn!

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

www.flickr.com/photos/borrowed/2278532757/

Gut für die User

www.flickr.com/photos/zippy/50307480/

Gut für die Industrie

Oft benutzte Microformats

•hCard•hCalendar•rel-tag•XFN•hReview•hRecipe•hProduct•hMedia...

Mehrwert

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

Happy User

www.flickr.com/photos/jamesyu/366732694/

Microdata

sehr viele Typen, sehr ausführlich

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

{ "items": [ { "type": [ "http://schema.org/Essen" ], "properties": { "Frucht": [ "Apfel" ] } }, { "type": [ "http://schema.org/Suess" ], "properties": { "Schokolade": [ "Herb" ] } } ]}

github.com/matt-west/microdatajs

Microdata in freier Wildbahn

www.flickr.com/photos/29487767@N02/3439298042/

www.google.de/webmasters/tools/richsnippets

Keine Daten? AJAX...?

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/

Microformats 2

www.flickr.com/photos/tzzimone/494855060/

<div class="vcard"> <div class="fn">Hein Mück</div></div>

<div class="h-card">Hein Mück</div>

Microformats

Microformats 2

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"] } }]}

Microformats 2 - Zug abgefahren?

www.flickr.com/photos/samchurchill/4587963200/

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

Use structured data

www.flickr.com/photos/edtrigger/4276152246/

Geduld

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

Alles wird gut!

www.flickr.com/photos/31029865@N06/5845003579/

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