Semantic MarkupTuesday, November 19th 2013

DTC 356 Fall 2013

Two PerspectivesDavid Weinberger

Sir Tim Berners-Lee

Weinberger’s Smart Leaves

The leaf knows what it is

Physical item w/ bar codes

Bits vs. Atoms

What is a bar code for bits?

Implicit vs. Explicit

“The web is a vast collection of completely uncontrolled heterogeneous documents.”

What does it mean to learn from context?

Freedom vs Control

The Semantic Web proposes not a standard set of relationships but a standard way for people to

describe whatever relationships are important to the topic.

!David Weinberger. Everything Is Miscellaneous (p.

192). Macmillan. Kindle Edition.

Ceci n’est pas un Ted Talk

http://www.ted.com/talks/tim_berners_lee_on_the_next_web.html

How does it work?Microdata markup w/ schema.org

Basic Format!

schema.org is a taxonomy

View the taxonomy at schema.org/Thing

HTML5 allows us to point elements on our pages to the schema.org taxonomy

Basic FormatGetting Started With Schema.Org

Use <div> and <span> to markup elements (div is for blocks of text, span for small inline items.)

itemscope: “This is an item.”

itemtype: “This is what type of item is is.”

itemprop: “This item has the following property.”

Example: (Before)<div>

<h1>Avatar</h1>

<span>Director: James Cameron (born August 16, 1954)</span>

<span>Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>

</div>

Example: (itemscope)<div itemscope>

<h1>Avatar</h1>

<span>Director: James Cameron (born August 16, 1954)</span>

<span>Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>

</div>

Example: (itemtype)<div itemscope itemtype="http://schema.org/Movie">

<h1>Avatar</h1>

<span>Director: James Cameron (born August 16, 1954)</span>

<span>Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>

</div>

Example: (itemprop)<div itemscope itemtype="http://schema.org/Movie">

<h1 itemprop=“name”>Avatar</h1>

<span>Director: James Cameron (born August 16, 1954)</span>

<span>Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>

</div>

Example: (itemprop)<div itemscope itemtype="http://schema.org/Movie">

<h1 itemprop=“name”>Avatar</h1>

<span>Director: <span itemprop=“director”>James Cameron</span> (born August 16, 1954)</span>

<span itemprop=“genre”>Science fiction</span>

<a href=“../movies/avatar-theatrical-trailer.html” itemprop=“trailer"> Trailer</a>

</div>

Example: (embeded)

Before:

<span>Director: <span itemprop=“director”>James Cameron</span> (born August 16, 1954)</span>

After embedding another itemscope:

<div itemprop="director" itemscope itemtype=“http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </div>

Example: (Before)<div>

<h1>Avatar</h1>

<span>Director: James Cameron (born August 16, 1954)</span>

<span>Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>

</div>

Example: (After)<div itemscope itemtype ="http://schema.org/Movie">

<h1 itemprop="name">Avatar</h1>

<div itemprop="director" itemscope itemtype="http://schema.org/ Person">Director: <span itemprop="name">James Cameron</span> (born <span itemprop=“birthDate">August 16, 1954)</span> </div>

<span itemprop="genre">Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>

</div>

Image Credits

3 (David Weinberger) Some rights reserved by Joi.

3 (Sir Tim Berners-Lee) Some rights reserved by veni markovski

Rene Magritte’s The Treachery of Images is owned and displayed by LACMA