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

Like this? Share it with your network

Share

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

  • 514 views
Uploaded on

Slide deck for the in class lecture on semantic markup.

Slide deck for the in class lecture on semantic markup.

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
514
On Slideshare
505
From Embeds
9
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 9

http://dtc-wsuv.org 9

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