DTC356 Class Notes: November 19th 2013 (Semantic Markup)
-
Upload
nicholas-schiller -
Category
Education
-
view
112 -
download
1
description
Transcript of DTC356 Class Notes: November 19th 2013 (Semantic Markup)
![Page 1: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/1.jpg)
Semantic MarkupTuesday, November 19th 2013
DTC 356 Fall 2013
![Page 2: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/2.jpg)
Two PerspectivesDavid Weinberger
Sir Tim Berners-Lee
![Page 3: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/3.jpg)
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?
![Page 4: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/4.jpg)
Implicit vs. Explicit
“The web is a vast collection of completely uncontrolled heterogeneous documents.”
What does it mean to learn from context?
![Page 5: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/5.jpg)
![Page 6: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/6.jpg)
Freedom vs Control
![Page 7: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/7.jpg)
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.
![Page 8: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/8.jpg)
Ceci n’est pas un Ted Talk
http://www.ted.com/talks/tim_berners_lee_on_the_next_web.html
![Page 10: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/10.jpg)
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
![Page 11: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/11.jpg)
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.”
![Page 12: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/12.jpg)
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>
![Page 13: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/13.jpg)
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>
![Page 14: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/14.jpg)
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>
![Page 15: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/15.jpg)
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>
![Page 16: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/16.jpg)
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>
![Page 17: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/17.jpg)
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>
![Page 18: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/18.jpg)
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>
![Page 19: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/19.jpg)
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>
![Page 20: DTC356 Class Notes: November 19th 2013 (Semantic Markup)](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c6d2954a7959e62f8b45a3/html5/thumbnails/20.jpg)
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