Semantic Web, Linked Data & Microformats

Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)

Erik Wilde and Dilan Mahendran, UC Berkeley School of Information
2011-04-11

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License
[http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde and Dilan Mahendran: Semantic Web, Linked Data & Microformats

Contents

Erik Wilde and Dilan Mahendran: Semantic Web, Linked Data & Microformats

(2) Abstract

HTML pages are for human users and describe a resource in structural terms (headings, lists, tables, …). For machine-based interaction, it is often useful to have more information about the meanings of application concepts. The Semantic Web is a research program and set of standards for trying to specify these meanings. One goal is to enable data published on the Web to be easily interlinked.



Adding Meaning to HTML

Outline (Adding Meaning to HTML)

  1. Adding Meaning to HTML [9]
  2. Semantic Web & Linked Data [6]
  3. Practical Applications [4]

(4) Problem of Semantics: Syntax vs. Meaning



(5) Adding Meaning to HTML



(6) Plain HTML

<div>
  <h1>Spoon, Deerhunter, and Micachu and the Shapes at The Fox Theater</h1>
  <p>Tuesday 13 April 2010 at 7:30pm</p>
  <div>
    <div>The Fox Theater</div>
    <div>
      1807 Telegraph Avenue<br/>
      Oakland, CA 94612
    </div>
    <div>(510) 302-2277</div>
  </div>
</div>


(7) Good HTML

<div class="event">
  <h1 class="title">Spoon, Deerhunter, and Micachu and the Shapes at The Fox Theater</h1>
  <p class="when">Tuesday 13 April 2010 at 7:30pm</p>
  <div class="where">
    <div class="venue">The Fox Theater</div>
    <div class="address">
      <div class="street-address">1807 Telegraph Avenue</div>
      <span class="city">Oakland</span>, 
      <span class="state">CA</span>
      <span class="zip">94612</span>
    </div>
    <div class="phone">(510) 302-2277</div>
  </div>
</div>


(8) Very Good HTML: Microformats

<div class="vevent">
  <h1 class="summary">Spoon, Deerhunter, and Micachu and the Shapes at The Fox Theater</h1>
  <p class="date">
    <abbr title="20100413T1930Z" class="dtstart">Tuesday 13 April 2010</abbr> 
    at <span>7:30pm</span>
  </p>
  <div class="location vcard">
    <div class="fn org">The Fox Theater</div>
    <div class="adr">
      <div class="street-address">1807 Telegraph Avenue</div>
      <span class="locality">Oakland</span>, 
      <abbr class="region" title="California">CA</abbr> 
      <span class="postal-code">94612</span>
    </div>
    <div class="tel">(510) 302-2277</div>
  </div>
</div>


(9) Microformats



(10) Very Good HTML: RDFa

<div class="vevent">
  <h1 class="summary">
    <span about="http://dbpedia.org/resource/Spoon_%28band%29"
          typeof="http://purl.org/ontology/mo/MusicGroup">
    <span property="http://xmlns.com/foaf/0.1/name">Spoon</span></span>, 
    <span about="http://dbpedia.org/resource/Deerhunter"
          typeof="http://purl.org/ontology/mo/MusicGroup">
      <span property="http://xmlns.com/foaf/0.1/name">Deerhunter</span></span>, 
    and 
    <span about="http://dbpedia.org/resource/Micachu"
          typeof="http://purl.org/ontology/mo/MusicArtist">
      <span property="http://xmlns.com/foaf/0.1/name">Michachu</span></span>, 
    and the Shapes at The Fox Theater
  </h1>
  <p class="date">
    <abbr title="20100413T1930Z" class="dtstart">Tuesday 13 April 2010</abbr> 
    at <span>7:30pm</span>
  </p>
  <div class="location vcard">
    <div class="fn org">The Fox Theater</div>
    <div class="adr">
      <div class="street-address">1807 Telegraph Avenue</div>
      <span class="locality">Oakland</span>, 
      <abbr class="region" title="California">CA</abbr> 
      <span class="postal-code">94612</span>
    </div>
    <div class="tel">(510) 302-2277</div>
  </div>
</div>


(11) RDFa



(12) Using Microformats & RDFa with Operator



Semantic Web & Linked Data

Outline (Semantic Web & Linked Data)

  1. Adding Meaning to HTML [9]
  2. Semantic Web & Linked Data [6]
  3. Practical Applications [4]

(14) Linked Data Principles

  1. Use URIs as names for things.
  2. Use HTTP URIs so that people can look up those names.
  3. When someone looks up a URI, provide useful information, using a standard data model.
  4. Include links to other URIs, so that people can discover more things.


(15) URIs as Names



(16) Semantic Web Data Model



(17) Semantic Web Data Model

rdf-triple.png


(18) Semantic Web Data Model

rdf-triple-uris.png


(19) Linking Data Sets

http://linkeddata.org/static/images/lod-datasets_2009-03-05-scaled.png


Practical Applications

Outline (Practical Applications)

  1. Adding Meaning to HTML [9]
  2. Semantic Web & Linked Data [6]
  3. Practical Applications [4]

(21) Enhanced Search Results



(22) Practical Applications

img/searchmonkey.png [http://search.yahoo.com/search?p=avila+boston]


(23) Practical Applications

img/rich-snippets.png [http://www.google.com/search?q=fillmore+new+york+concerts]


(24) Government Data



Erik Wilde and Dilan Mahendran: Semantic Web, Linked Data & Microformats

(25) Conclusions



2011-04-11 Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)