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

1,040 views

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
1,040
On SlideShare
0
From Embeds
0
Number of Embeds
224
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

×