Semantic Markup
Tuesday, November 19th 2013

DTC 356 Fall 2013
Two Perspectives
David 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...
Freedom vs Control
The Semantic Web proposes not a standard set of
relationships but a standard way for people to
describe whatever relations...
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 pa...
Basic Format
Getting Started With Schema.Org
Use <div> and <span> to markup elements (div is
for blocks of text, span for ...
Example: (Before)
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</...
Example: (itemscope)
<div itemscope>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Sci...
Example: (itemtype)
<div itemscope itemtype="http:/
/schema.org/Movie">
<h1>Avatar</h1>
<span>Director: James Cameron (bor...
Example: (itemprop)
<div itemscope itemtype="http:/
/schema.org/Movie">
<h1 itemprop=“name”>Avatar</h1>
<span>Director: Ja...
Example: (itemprop)
<div itemscope itemtype="http:/
/schema.org/Movie">
<h1 itemprop=“name”>Avatar</h1>
<span>Director: <s...
Example: (embeded)
Before:
<span>Director: <span itemprop=“director”>James Cameron</span> (born
August 16, 1954)</span>
Af...
Example: (Before)
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</...
Example: (After)
<div itemscope itemtype ="http:/
/schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="direc...
Image Credits
3 (David Weinberger) Some rights reserved by Joi.
3 (Sir Tim Berners-Lee) Some rights reser ved by veni mark...
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
Upcoming SlideShare
Loading in...5
×

DTC356 Class Notes: November 19th 2013 (Semantic Markup)

311

Published on

Slide deck for the in class lecture on semantic markup.

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
311
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

DTC356 Class Notes: November 19th 2013 (Semantic Markup)

  1. 1. Semantic Markup Tuesday, November 19th 2013
 DTC 356 Fall 2013
  2. 2. Two Perspectives David Weinberger
 
 
 Sir Tim Berners-Lee
  3. 3. 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?
  4. 4. Implicit vs. Explicit “The web is a vast collection of completely uncontrolled heterogeneous documents.” What does it mean to learn from context?
  5. 5. Freedom vs Control
  6. 6. 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.
  7. 7. Ceci n’est pas un Ted Talk http:/ /www.ted.com/talks/tim_berners_lee_on_the_next_web.html
  8. 8. How does it work? Microdata markup w/ schema.org
  9. 9. 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
  10. 10. Basic Format Getting 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.”
  11. 11. 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>
  12. 12. 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>
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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>
  17. 17. 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>
  18. 18. 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>
  19. 19. Image Credits 3 (David Weinberger) Some rights reserved by Joi. 3 (Sir Tim Berners-Lee) Some rights reser ved by veni markovski Rene Magritte’s The Treachery of Images is owned and displayed by LACMA
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×