Your SlideShare is downloading. ×
0
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
DTC356 Class Notes: November 19th 2013 (Semantic Markup)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

300

Published on

Slide deck for the in class lecture on semantic markup.

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
300
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Semantic Markup Tuesday, November 19th 2013
 DTC 356 Fall 2013
  • 2. Two Perspectives David Weinberger
 
 
 Sir Tim Berners-Lee
  • 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. Implicit vs. Explicit “The web is a vast collection of completely uncontrolled heterogeneous documents.” What does it mean to learn from context?
  • 5. Freedom vs Control
  • 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. Ceci n’est pas un Ted Talk http:/ /www.ted.com/talks/tim_berners_lee_on_the_next_web.html
  • 8. How does it work? Microdata markup w/ schema.org
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×