Semantic Web

Web Architecture (INFO 290-03)

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

Creative Commons License

This work is licensed under a CC
Attribution 3.0 Unported License

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.


HTML vs. XML


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>systemsix-plain.html

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>systemsix-good.html

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>systemsix.xml

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>bike2html.xsl

Graceful Degradation


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>systemsix-excellent.html

From Information, Knowledge


The Semantic Web Hype

1965, H. A. Simon: machines will be capable, within twenty years, of doing any work a man can do
1967, Marvin Minsky: Within a generation [ … ] the problem of creating artificial intelligence will substantially be solved.

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]

Islands of Semantics


Microformat Syntax


Magic Names


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]

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>

RDF Graphs

rdf-graph.png

RDF is Simple and Complex


RDF Schema Graph

rdfs-graph.png

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]

SPARQL


Web Ontology Language (OWL)


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]

Some Questions


Semantics are Important and Hard