Semantic Web

Web Architecture [./]
Fall 2008 — INFO 290-03 (CCN 42584)

Erik Wilde, UC Berkeley School of Information
2008-11-18

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 E. Wilde: Semantic Web

Contents

E. Wilde: Semantic Web

(2) Abstract

HTML pages are for human users and describe a resource in very general terms (headings, lists, tables, …). For machine-based interaction, it is often necessary to have more information about the application concepts. XML is a popular language for representing application structures, but is targeted at machine-based processing alone. Microformats and more formal approaches such as the Resource Description Format (RDF), RDF in Attributes (RDFa), and Web Ontology Language (OWL) often are used to describe Web content semantically.



E. Wilde: Semantic Web

(3) HTML vs. XML



E. Wilde: Semantic Web

(4) Plain HTML

<html>
   <head>
      <title>Cannondale 2007 System Six 2</title>
   </head>
   <body>
      <h1>Cannondale 2007 System Six 2</h1>
      <ul>
         <li>Mavic Ksyrium ES wheelset</li>
         <li>Maxxis Xenith Hors Categorie tires</li>
         <li>Fi'zi:k Arione Titanium saddle</li>
         <li>SRAM Force components</li>
      </ul>
      <p>Sizes: 48cm, 50cm, 52cm, 54cm, 56cm, 58cm, 60cm, 63cm</p>
      <p>Dealers: </p>
      <ul>
         <li>Mike's Bikes of Berkeley, 2161 University Avenue, Berkeley, CA 94704; +1-510-8452453</li>
      </ul>
   </body>
</html>


E. Wilde: Semantic Web

(5) Good HTML

<html>
   <head>
      <title>Cannondale 2007 System Six 2</title>
   </head>
   <body>
      <h1 class="bike"><span class="manufacturer">Cannondale</span> <span class="year">2007</span> <span class="model">System Six</span> <span class="type">2</span></h1>
      <ul class="components">
         <li class="component"><span class="manufacturer">Mavic</span> <span class="type">Ksyrium ES</span> wheelset</li>
         <li class="component"><span class="manufacturer">Maxxis</span> <span class="type">Xenith Hors Categorie</span> tires</li>
         <li class="component"><span class="manufacturer">Fi'zi:k</span> <span class="type">Arione Titanium</span> saddle</li>
         <li class="component"><span class="manufacturer">SRAM</span> <span class="type">Force</span> components</li>
      </ul>
      <p>Sizes: <span class="size">48cm</span>, <span class="size">50cm</span>, <span class="size">52cm</span>, <span class="size">54cm</span>, <span class="size">56cm</span>, <span class="size">58cm</span>, <span class="size">60cm</span>, <span class="size">63cm</span></p>
      <p>Dealers: </p>
      <ul>
         <li class="dealer"><span class="name">Mike's Bikes of Berkeley</span>, <span class="adr"><span class="street-address">2161 University Avenue</span>, <span class="locality">Berkeley</span>, <span class="region">CA</span> <span class="postal-code">94704</span></span>; <a href="tel:+1-510-8452453">+1-510-8452453</a></li>
      </ul>
   </body>
</html>


E. Wilde: Semantic Web

(6) Excellent HTML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="bike2html.xsl" type="text/xsl"?>
<bike manufacturer="Cannondale" year="2007">
 <model>System Six</model>
 <type>2</type>
 <sizes>
  <size unit="cm">48</size>
  <size unit="cm">50</size>
  <size unit="cm">52</size>
  <size unit="cm">54</size>
  <size unit="cm">56</size>
  <size unit="cm">58</size>
  <size unit="cm">60</size>
  <size unit="cm">63</size>
 </sizes>
 <parts>
  <wheelset manufacturer="Mavic">Ksyrium ES</wheelset>
  <tires manufacturer="Maxxis">Xenith Hors Categorie</tires>
  <saddle manufacturer="Fi'zi:k">Arione Titanium</saddle>
  <components manufacturer="SRAM">Force</components>
 </parts>
 <dealers>
  <dealer>
   <name>Mike's Bikes of Berkeley</name>
   <address>2161 University Avenue</address>
   <city>Berkeley</city>
   <zip>94704</zip>
   <state>CA</state>
   <phone>+1-510-8452453</phone>
  </dealer>
 </dealers>
</bike>


E. Wilde: Semantic Web

(7) XML → HTML Stylesheet

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="/">
  <html>
   <head>
    <title>
     <xsl:value-of select="bike/@manufacturer"/>
     <xsl:text> </xsl:text>
     <xsl:value-of select="bike/@year"/>
     <xsl:text> </xsl:text>
     <xsl:value-of select="bike/model"/>
     <xsl:text> </xsl:text>
     <xsl:value-of select="bike/type"/>
    </title>
   </head>
   <body>
    <h1 class="bike">
     <span class="manufacturer">
      <xsl:value-of select="bike/@manufacturer"/>
     </span>
     <xsl:text> </xsl:text>
     <span class="year">
      <xsl:value-of select="bike/@year"/>
     </span>
     <xsl:text> </xsl:text>
     <span class="model">
      <xsl:value-of select="bike/model"/>
     </span>
     <xsl:text> </xsl:text>
     <span class="type">
      <xsl:value-of select="bike/type"/>
     </span>
    </h1>
    <ul class="components">
     <xsl:for-each select="//parts/*">
      <li class="component">
       <span class="manufacturer">
        <xsl:value-of select="@manufacturer"/>
       </span>
       <xsl:text> </xsl:text>
       <span class="type">
        <xsl:value-of select="text()"/>
       </span>
       <xsl:text> </xsl:text>
       <xsl:value-of select="local-name()"/>
      </li>
     </xsl:for-each>
    </ul>
    <p>
     <xsl:text>Sizes: </xsl:text>
     <xsl:for-each select="//size">
      <span class="size">
       <xsl:value-of select="concat(text(), @unit)"/>
      </span>
      <xsl:if test="not(position() = last())">
       <xsl:text>, </xsl:text>
      </xsl:if>
     </xsl:for-each>
    </p>
    <p>Dealers: </p>
    <ul>
     <xsl:for-each select="//dealer">
      <li class="dealer">
       <span class="name">
        <xsl:value-of select="name"/>
       </span>
       <xsl:text>, </xsl:text>
       <span class="adr">
        <span class="street-address">
         <xsl:value-of select="address"/>
        </span>
        <xsl:text>, </xsl:text>
        <span class="locality">
         <xsl:value-of select="city"/>
        </span>
        <xsl:text>, </xsl:text>
        <span class="region">
         <xsl:value-of select="state"/>
        </span>
        <xsl:text> </xsl:text>
        <span class="postal-code">
         <xsl:value-of select="zip"/>
        </span>
       </span>
       <xsl:text>; </xsl:text>
       <a href="tel:{phone}">
        <xsl:value-of select="phone"/>
       </a>
      </li>
     </xsl:for-each>
    </ul>
   </body>
  </html>
 </xsl:template>
</xsl:stylesheet>


E. Wilde: Semantic Web

(8) Graceful Degradation



E. Wilde: Semantic Web

(9) Excellent HTML

<html>
   <head>
      <title>Cannondale 2007 System Six 2</title>
      <link rel="alternate" type="application/xml" href="systemsix.xml"/>
   </head>
   <body>
      <h1 class="bike"><span class="manufacturer">Cannondale</span> <span class="year">2007</span> <span class="model">System Six</span> <span class="type">2</span></h1>
      <ul class="components">
         <li class="component"><span class="manufacturer">Mavic</span> <span class="type">Ksyrium ES</span> wheelset</li>
         <li class="component"><span class="manufacturer">Maxxis</span> <span class="type">Xenith Hors Categorie</span> tires</li>
         <li class="component"><span class="manufacturer">Fi'zi:k</span> <span class="type">Arione Titanium</span> saddle</li>
         <li class="component"><span class="manufacturer">SRAM</span> <span class="type">Force</span> components</li>
      </ul>
      <p>Sizes: <span class="size">48cm</span>, <span class="size">50cm</span>, <span class="size">52cm</span>, <span class="size">54cm</span>, <span class="size">56cm</span>, <span class="size">58cm</span>, <span class="size">60cm</span>, <span class="size">63cm</span></p>
      <p>Dealers: </p>
      <ul>
         <li class="dealer"><span class="name">Mike's Bikes of Berkeley</span>, <span class="adr"><span class="street-address">2161 University Avenue</span>, <span class="locality">Berkeley</span>, <span class="region">CA</span> <span class="postal-code">94704</span></span>; <a href="tel:+1-510-8452453">+1-510-8452453</a></li>
      </ul>
   </body>
</html>


E. Wilde: Semantic Web

(10) From Information, Knowledge



E. Wilde: Semantic Web

(11) The Semantic Web Hype

1965, H. A. Simon: machines will be capable, within twenty years, of doing any work a man can do [http://en.wikipedia.org/wiki/Artificial_intelligence#_note-11]
1967, Marvin Minsky: Within a generation [ … ] the problem of creating artificial intelligence will substantially be solved. [http://en.wikipedia.org/wiki/Artificial_intelligence#_note-12]


E. Wilde: Semantic Web

(12) Semantic Web Layers

semantic-web-layers.png

Microformats

Outline (Microformats)

  1. Microformats [4]
  2. Resource Description Framework (RDF) [5]
  3. More Languages [3]
  4. Conclusions [2]
Microformats E. Wilde: Semantic Web

(14) Islands of Semantics



Microformats E. Wilde: Semantic Web

(15) Microformat Syntax



Microformats E. Wilde: Semantic Web

(16) Magic Names



Microformats E. Wilde: Semantic Web

(17) Microformats on the Web



Resource Description Framework (RDF)

Outline (Resource Description Framework (RDF))

  1. Microformats [4]
  2. Resource Description Framework (RDF) [5]
  3. More Languages [3]
  4. Conclusions [2]
Resource Description Framework (RDF) E. Wilde: Semantic Web

(19) Describing Resources

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:contact="http://www.w3.org/2000/10/swap/pim/contact#">
  <contact:Person rdf:about="http://www.w3.org/People/EM/contact#me">
    <contact:fullName>Eric Miller</contact:fullName>
    <contact:mailbox rdf:resource="mailto:em@w3.org"/>
    <contact:personalTitle>Dr.</contact:personalTitle> 
  </contact:Person>
</rdf:RDF>
[http://www.w3.org/TR/REC-rdf-syntax/#intro]

Resource Description Framework (RDF) E. Wilde: Semantic Web

(20) RDF Graphs

rdf-graph.png

Resource Description Framework (RDF) E. Wilde: Semantic Web

(21) RDF is Simple and Complex



Resource Description Framework (RDF) E. Wilde: Semantic Web

(22) RDF Schema Graph

rdfs-graph.png

Resource Description Framework (RDF) E. Wilde: Semantic Web

(23) RDF in Attributes (RDFa)

<p>This document is licensed under a <a xmlns:cc="http://creativecommons.org/licenses/" rel="cc:license" href="http://creativecommons.org/licenses/by/nc-nd/3.0/">Creative Commons License</a>.</p>


More Languages

Outline (More Languages)

  1. Microformats [4]
  2. Resource Description Framework (RDF) [5]
  3. More Languages [3]
  4. Conclusions [2]
More Languages E. Wilde: Semantic Web

(25) SPARQL



More Languages E. Wilde: Semantic Web

(26) Web Ontology Language (OWL)



More Languages E. Wilde: Semantic Web

(27) Vocabulary Taxonomy

Controlled Vocabularies, Taxonomies, Thesauri, Ontologies

Conclusions

Outline (Conclusions)

  1. Microformats [4]
  2. Resource Description Framework (RDF) [5]
  3. More Languages [3]
  4. Conclusions [2]
Conclusions E. Wilde: Semantic Web

(29) Some Questions



Conclusions E. Wilde: Semantic Web

(30) Semantics are Important and Hard



2008-11-18 Web Architecture [./]
Fall 2008 — INFO 290-03 (CCN 42584)