Semantic Web

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information
2007-11-01
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>

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>

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>

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>

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>

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

Outline (Microformats)

  1. Microformats [4]
  2. Resource Description Framework (RDF) [5]
  3. More Languages [2]
  4. Conclusions [2]

Islands of Semantics

Microformat Syntax

Magic Names

Microformats on the Web

Outline (Resource Description Framework (RDF))

  1. Microformats [4]
  2. Resource Description Framework (RDF) [5]
  3. More Languages [2]
  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>

Outline (More Languages)

  1. Microformats [4]
  2. Resource Description Framework (RDF) [5]
  3. More Languages [2]
  4. Conclusions [2]

SPARQL

Web Ontology Language (OWL)

Outline (Conclusions)

  1. Microformats [4]
  2. Resource Description Framework (RDF) [5]
  3. More Languages [2]
  4. Conclusions [2]

Some Questions

Semantics are Important and Hard