gtut 41.4 KB

Raw Blame History Permalink

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2006/03/hcard
  http://www.w3.org/2002/12/cal/hcal
  http://www.w3.org/2003/g/data-view">
<title>Deploying Web-scale Mash-ups by Linking Microformats
and the Semantic Web</title>

<meta name="copyright" content="$Revision: 1.42 $ Copyright (c) $Date: 2007/05/08 19:25:24 $ Connolly and Halpin. some rights reserved" />

  <link rel="stylesheet" href="http://www.w3.org/Talks/Tools/Slidy/slidy.css"
	type="text/css"
	media="screen, projection, print" />
  <link rel="stylesheet" href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css"
	type="text/css" media="screen, projection, print" />

  <link rel="transformation" href="http://www.w3.org/2006/vcard/signit"
	type="text/css" media="screen, projection, print" />
  <script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js"
	  type="text/javascript">
  </script>

  <style type="text/css">
    blockquote {
       border-left: double; padding-left: 1em;
       font-style: italic;
       }
    blockquote address { text-align: right; font-size: smaller }
    .source { text-align: right; font-size: smaller }
    .footnote { font-size: smaller }

    div.figure { text-align: center }

    .attn { font-weight: bold; font-style: italic; color: red;}
    .screenshot { float: right; margin: 3em }
table.compare {
 margin-left:auto;
 margin-right:auto;
}
table.compare td {
 text-align: center
}

</style>

</head>
<body>

<div class="background">
  <img id="head-icon" alt="graphic with four colored squares"
    src="http://www.w3.org/Talks/Tools/Slidy/icon-blue.png" />
  <object id="head-logo" title="W3C logo" type="image/svg+xml"
    data="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.svg"><img
   src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif"
   alt="W3C logo" id="head-logo-fallback" /></object>

<!-- is this really worth the screenspace?
<div class="footer">
  <a href="http://www.w3.org/">
  <img alt="W3C logo" id="w3c-logo-fallback"
  src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif" /> </a>
  Halpin
  and Connolly<br /> WWW2007 May 2007
</div>
-->

</div>

<div class="background slanty">
  <img src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-slanted.jpg"
       alt="slanted W3C logo" />
</div>

<div class="slide cover">
  <img align="right"
       src="http://www.w3.org/Talks/Tools/Slidy/keys.jpg"
       alt="Cover page images (keys)" class="cover" />
  <h1>Deploying Web-scale Mash-ups by Linking Microformats and the
  Semantic Web</h1>

  <address class="vcard" id="danc">
    <a class="url fn" href="http://www.w3.org/People/Connolly/"
       >Dan Connolly</a>, W3C/MIT<br />
  </address>

  <address class="vcard" id="hhalpin">
    <a class="url fn"
       href="http://www.ibiblio.org/hhalpin/">Harry Halpin</a>, University of Edinburgh<br />
  </address>

  <div class="vevent">
    <a class="url summary" href="http://www2007.org/">16th International World Wide Web Conference
    </a><br />
    <span class="location">Banff, Alberta, Canada</span><br />
    <abbr class="dtstart" title="2007-05-08">April 2007</abbr>
  </div>

</div>


<div class="slide"><h1>Overview</h1>
<ul>
<li>1:30 - 3:00:
<ul>
<li>Calendar Mash-up</li>
<li>Hotel review mash-up</li>
</ul>
<p><em>covers: semantic html, microformats, turtle, RDF, and SPARQL</em></p>
</li>
<li>3:00-3:30: break </li>
<li>3:30-5:00:
<ul>
  <li>More examples, practical applications</li>
  <li>Where GRDDL fits in the Semantic Web</li>
  <li>State of the art: tools you can use</li>
</ul>
</li>
<li>If we have any time...</li>
<li>Open Time to get your calendar/web-page/etc. microformat+GRDDL enabled</li>
</ul>

</div>

<div class="slide">
<h1>Calendar Mash-up: The Problem</h1>

<p>When can Jane, David, and Robin meet?</p>
<ul>
  <li>Jane keeps <a href="../doc29/janeschedule.html">her calendar</a> in one format (RDFa)</li>
  <li>David uses another (eRDF) for <a
  href="../doc29/david-erdf.html">his calendar</a></li>
  <li>Robin keeps <a href="../doc29/robin-hcal-grddl.html">his schedule</a> in a 3rd format (hCalendar)</li>
</ul>
</div>

<div class="slide">
<h1>Calendar Mash-up: Problem Solved</h1>

<p>GRDDL and SPARQL to the rescue!</p>
<table border="1">
<tr>
<th>Start</th><th>End</th><th>Place</th><th>Summary</th>
</tr>
<tr>
<td>"2007-01-08"</td><td>"2007-01-11"</td><td>Edinburgh, UK</td><td>Web Design Conference</td>
</tr>
</table>

<p>Jane's friends Robin and David are both in town with her in Edinburgh on January 8th through 10th for the Web Design Conference.</p>

<div class="incremental" style="margin-left: 1em; position: relative;" >
<img src="images/Calendar_01.png" alt="calendars" style="position: static; vertical-align: bottom;" />
<img src="images/Calendar_02.png" alt="Data in RDF" style="position: absolute; left: 0pt; top: 0pt;" />
<img src="images/Calendar_03.png" alt="SPARQL" style="position: absolute; left: 0pt; top: 0pt;" />
</div>


</div>

<div class="slide">
<h1>Robin uses hCalendar</h1>

<p>Events in
<a href="../doc29/robin-hcal-no-grddl.html">Robin's schedule</a>...</p>
<ul>
      <li class="vevent"><strong class="summary">Fashion Expo</strong> in
        <span class="location">Paris, France</span>: <abbr class="dtstart"
        title="2006-10-20">Oct 20</abbr> to <abbr class="dtend"
        title="2006-10-23">22</abbr></li>
</ul>

<p>... are marked up like this:</p>

<pre>
          &lt;li class="vevent"&gt;
            &lt;strong class="summary"&gt;Fashion Expo&lt;/strong&gt; in
            &lt;span class="location"&gt;Paris, France&lt;/span&gt;:
            &lt;abbr class="dtstart" title="2006-10-20"&gt;Oct 20&lt;/abbr&gt; to
            &lt;abbr class="dtend" title="2006-10-23"&gt;22&lt;/abbr&gt;
          &lt;/li&gt;
</pre>
</div>

<div class="slide">
<h1>What is hCalendar?</h1>
<div class="screenshot">
<img  alt="cal screen shot"
     src="http://www.w3.org/2000/10/swap/pim/calIntShot.png" />
</div>
<p>hCalendar = iCalendar in XHTML</p>

<p>iCalendar (<a href="../rfc2445">RFC2445</a>):</p>

<pre>BEGIN:VEVENT
<span xml:lang="en" lang="en">UID:20020630T230445Z-3895-69-1-7@jammer</span>
<span xml:lang="en" lang="en">DTSTART;VALUE=DATE:20020703</span>
<span xml:lang="en" lang="en">DTEND;VALUE=DATE:20020706</span>
<span xml:lang="en" lang="en">SUMMARY:XYZ Conference</span>
<span xml:lang="en" lang="en">LOCATION:San Francisco</span>
<span xml:lang="en" lang="en">END:VEVENT</span></pre>

</div>


<div class="slide">
<h1>Why hCalendar?</h1>

<img src="images/microformatlogo.gif" alt="Microformats Logo" align="right" />

<p>hCalendar and other microformats have shared tools, knowledge, process...</p>

<ul>
<li><a href="http://theryanking.com/microformats/hcalendar-creator.html">hCalendar creator</a>,
<a href="http://suda.co.uk/projects/X2V/">iCal Extraction</a>
</li>
<li>large and growing list of sites:
<ol>
<li><a href="http://eventful.com/events/categories/festivals_parades?l=Canmore%2C%20Alberta%2C%20CAN">Eventful.com</a></li>
<li><a href="http://www.linkedin.com/in/harryhalpin">LinkedIn</a></li>
<li><a href="http://yedda.com/">Yedda</a></li>
<li><a href="http://local.yahoo.com/details;_ylt=AlBC0TJPA26ZXjIWHr5PztOHNcIF?id=10209103&amp;state=MA&amp;city=Boston&amp;stx=Sheraton&amp;csz=Boston%2C+MA&amp;fr=&amp;ed=gN5LSq131DweU4LpfshbDWHQkTbySVPO15smT63p66zc3RmmDPmkz0dh&amp;lcscb=">Yahoo! Local</a>
</li>
<li><a href="http://tech.yahoo.com/pr/apple-macbook-pro/1993616948;_ylt=AldL2bqT6OO3JluLXzEArl0FLZA5">Yahoo! Tech Reviews</a></li>
</ol>
</li>
<li><a href="http://www.webstandards.org/action/dwtf/microformats/">Dreamweaver</a> plug-in</li>
</ul>

<a href="http://www.ibiblio.org/hhalpin"><span class="attn">Demo of Microformat Browsing using Tails</span></a>

</div>

<div class="slide">
<h1>Microformats Unleashed</h1>

<p>Microformats are centralized data formats for different types of data, often (nearly) isomorphic to already widely adopted non-Web standards:</p>
<ul>
<li>Personal Data: <a href="http://microformats.org/wiki/hcard">hCard</a> (vCard)</li>
<li>Calendar and Events: <a href="http://microformats.org/wiki/hcalendar">hCal</a> (iCal)</li>
<li>Social Networking: <a href="http://gmpg.org/xfn">XFN</a></li>
<li>Reviews: <a href="http://microformats.org/wiki/hreview">hReview</a></li>
<li>Licenses: <a href="http://microformats.org/wiki/rel-license">rel-license</a></li>
<li>Folksonomies: <a href="http://microformats.org/wiki/rel-tag">rel-tag</a> </li>
</ul>

<p class="subhead">The lower-case semantic web</p>

</div>


<div class="slide">
<h1>The Limits of Microformats</h1>

<ul class="incremental">
<li>The microformats process applies to common problems...</li>
<li>... and <em>only</em> common problems.</li>
<li>Mixing works in some cases, but don't push it.</li>
<li>Validation, query tools emerging.</li>
<li>So what if my problem is not so common?</li>
<li>Maybe the Semantic Web (uppercase) can help...</li>
</ul>


</div>

<div class="slide">
<h1>Hotel Review Mash-Up: Problem</h1>

<ul>
<li>Jane wants to book a hotel.</li>
<li>Not just any hotel.
<p>She doesn't trust the <em>wisdom of crowds</em>. She trusts:</p>

		<ul class="xoxo">
			<li class="vcard"><a href="http://peter.example.org" class="url fn" rel="met colleague friend">Peter Smith</a></li>
			<li class="vcard"><a href="http://john.example.org" class="url fn" rel="met">John Doe</a></li>
			<li class="vcard"><a href="http://paul.example.org" class="url fn" rel="met">Paul Revere</a></li>
		</ul>

</li>
<li>Mix in
<a href="../doc29/janefriends.html">social network data</a>
 to get <em>trusted reviews</em>.</li>
</ul>
</div>


<div class="slide">
<h1>Hotel Review Mash-Up: Problem Solved</h1>

<p>A hotel with a ranking of 5 reviewed by a trusted friend:</p>

<div class="incremental" style="margin-left: 1em; position: relative;" >
 <img src="images/Review_01.png" alt="reviews" style="position: static; vertical-align: bottom;" />
 <img src="images/Review_02.png" alt="Data in RDF" style="position: absolute; left: 0pt; top: 0pt;" />
 <img src="images/Review_03.png" alt="query" style="position: absolute; left: 0pt; top: 0pt;" />


</div>

<table border="1">
  <tr>
    <th>rating</th><th>name</th><th>region</th>
    <th>homepage</th>
    <th>hotelname</th>
  </tr>
  <tr>
    <td>5</td>
    <td>PeterS</td>
    <td>Edinburgh</td>
    <td>http://peter.example.org</td>
    <td>Witch's Caldron Hotel, Edinburgh</td>
  </tr>
</table>

<p>"How did you do that?" I'm glad you asked...</p>
</div>

<div class="slide">
<h1>Data Mash-Up</h1>
<div class="figure">
<img alt="hotel review query answer diagram" src="hotel-answer.png" />
</div>

</div>

<div class="slide">

<h1>The Straw that broke the Camel's Back</h1>

<div class="screenshot">
<img src="images/straw.jpg" alt="twitter screenshot" />
</div>

<p>Too many services replicate the same sort of data....what if you have a <i>Friendster</i>, a <i>Myspace</i>, and a <i>Twtter</i> account?</p>

<p class="footnote">photo by Jon Hicks</p>

</div>


<div class="slide"><h1>Toward Open Data</h1>
<ul>
  <li><blockquote><p>I want my data back.</p>
  <div class="source"><cite>Jon Bosak circa 1997</cite></div>
  </blockquote></li>
  <li><blockquote>
    <p>I've long believed that customers of any application own the
  data they enter into it.</p>
  <div class="source"><cite><a
  href="http://www.veen.com/jeff/archives/000810.html">Jeffrey Veen 2
  November 2005</a></cite></div>
  </blockquote>
</li>
</ul>

<p><em>Is this what Web 2.0 is all about? If so, maybe it's not such a
bad thing.</em></p>

</div>

<div class="slide">
<h1>The Semantic Web</h1>

<p>... is an <b>open world</b> and universal space for
<b>machine-readable</b> data.</p>

<div class="screenshot">
  <img src="images/semantic.jpg" alt="things in documents"/>
</div>

<blockquote>
To a computer, then, the web is a flat, boring world devoid of meaning...This is a pity, as in fact documents on the web describe real objects and imaginary concepts, and give particular relationships between them...Adding semantics to the web involves two things: allowing documents which have information in machine-readable forms, and allowing links to be created with relationship values.
<address>TimBL, WWW1994</address>
</blockquote>
</div>

<div class="slide"><h1>The element of the Semantic Web</h1>

<p><img alt="arrow tail, body and head are l are subject, property and value." src="../../../../DesignIssues/diagrams/spv-arrow.png" /></p>

<ul>
  <li>The Resource Description Framework (RDF)
  <ul>
    <li>abstract syntax, formal semantics</li>
    <li>standard encoding in XML</li>
    <li>emerging programmer-friendly short-hand encoding: <a href="http://www.w3.org/2000/10/swap/Primer.html">N3</a>/<a href="http://www.dajobe.org/2004/01/turtle/">turtle</a>
    </li>
  </ul>
  </li>

</ul>
<pre>
&lt;#p> foaf:name "PeterS";
&lt;#p> foaf:homepage &lt;http://peter.example.org>.
</pre>
<p>Note the relationship to HTML links, especially with the
re-discovery of the <tt>rel</tt> attribute.</p>

</div>

<div class="slide">
<h1>Use URIs to name relationships</h1>

<pre>
@prefix rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#>.
@prefix foaf: &lt;http://xmlns.com/foaf/0.1/>.
@prefix rev: &lt;http://www.purl.org/stuff/rev#>.
@prefix vcard: &lt;http://www.w3.org/2006/vcard/ns#>.
@prefix xfn: &lt;http://gmpg.org/xfn/11#>.

_:hotel
  vcard:adr [ vcard:locality "Edinburgh" ];
  rev:hasReview [
  rev:rating 5;
  rev:reviewer _:who;
  rdfs:label "Witch's Caldron Hotel, Edinburgh"
 ].

&lt;jane> xfn:friend _:who.

_:who
   foaf:name "PeterS";
   foaf:homepage &lt;http://peter.example.org>.
</pre>
</div>


<div class="slide">
<h1>Data Mash-Up</h1>
<div class="figure">
<img alt="hotel review query answer diagram" src="hotel-answer.png" />
</div>
</div>

<div class="slide"><h1>Semantic Web Basics</h1>
<ul>
<li>What is the Semantic Web?
<ul>
 <li>Data integration across application, organizational boundaries</li>
</ul>
</li>
<li>How does it work?
<ol>
<li>Apply power of URIs to concepts of relational data
<ul>
<li>Don't say "colour" say &lt;http://example.com/2002/std6#col></li>
</ul>
</li>
<li>Model real people, places and things, not just documents or
database tables</li>
</ol>
</li>
</ul>
</div>

<div class="slide"><h1>Semantic web includes tables, trees...</h1>

<p><img alt="Arrows can make a table, an arrow from each row to each value"
 src="../../../../DesignIssues/diagrams/arrow-table.png" /></p>

<p><img alt="Arrows can make a table, an arrow from each row to each value"
 src="../../../../DesignIssues/diagrams/tree.png" /></p>

</div>

<div class="slide"><h1>... and tangly messes</h1>

<p><img alt="Arrows can make a table, an arrow from each row to each value"
src="../../../../DesignIssues/diagrams/tree-and-table2.png" /></p>

</div>

<div class="slide"><h1>Semantic Web Architecture</h1>

<p>The Semantic Web is to
spreadsheets and databases what the Web of hypertext documents is to
word processor files.</p>

<table border="1" class="compare">
<tr><td>&#160;</td><th>Web</th><th>Semantic Web</th></tr>
<tr><th>Traditional Design</th><td>hypertext</td><td>database, spreadsheet, logic</td></tr>
<tr><th>+</th><td colspan="2">URIs</td></tr>
<tr><th>-</th><td>link consistency</td><td><em>global consistency?</em></td></tr>
<tr><th>=</th><td colspan="2">viral growth</td></tr>
</table>
</div>

<div class="slide">
<h1>XML and Trees</h1>
<p>XML (<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage) is a generalization of <b>HTML</b> that lets anyone name the elements and attributes</p>
<img src="images/xml.png" align="left" alt="XML" />

<p>Think <b>ASCII for the 21st Century</b>!</p>

<p>Also a <i>tree model</i> (<b>DOM</b> - <b>D</b>ocument <b>O</b>bject <b>M</b>odel), which is a handy data structure.</p>

</div>

<div class="slide"><h1>RDF merges naturally</h1>

<img style="float:right" width="50%" class="incremental"
  src="http://www.w3.org/2000/Talks/0906-xmlweb-tbl/arcs-3.gif"
  alt="stack" />

<img src="http://www.w3.org/2000/Talks/0906-xmlweb-tbl/arcs-1.gif"
     alt="stack" />

</div>

<div class="slide"><h1>Partial Understanding</h1>

<p>RDF statements* are independent. RDF semantics are <dfn><a href=
"http://en.wikipedia.org/wiki/Monotonicity_of_entailment"
>monotonic</a></dfn>.</p>

<table>
  <tr><th></th><th>RDF</th><th>XML</th></tr>
  <tr>
    <th>Premise</th>
    <td>
<pre>
&lt;Book rdf:ID="book1">
 &lt;dc:title>The Grapes of Wrath&lt;/title>
 &lt;dc:creator>Steinbeck&lt;/author>
&lt;/Book>
</pre>
    </td>
    <td>
<pre>
&lt;xsd:simpleType name="myInteger">
  &lt;xsd:restriction base="xsd:integer">
    &lt;xsd:minInclusive value="10000"/>
    &lt;xsd:maxInclusive value="99999"/>
  &lt;/xsd:restriction>
&lt;/xsd:simpleType>
</pre>
    </td>

  </tr>
  <tr><th>Conclusion</th>
  <td>
<pre>
&lt;Book rdf:ID="book1">
 &lt;dc:title>The Grapes of Wrath&lt;/title>
&lt;/Book>
</pre>
  </td>
    <td>
<pre>
&lt;!-- no, this does not follow -->
&lt;xsd:simpleType name="myInteger">
  &lt;xsd:restriction base="xsd:integer">
    &lt;xsd:maxInclusive value="99999"/>
  &lt;/xsd:restriction>
&lt;/xsd:simpleType>
</pre>
    </td>
  </tr>
</table>

<p class="footnote">*RDF/XML does have a
<tt>rdf:parseType="Collection"</tt> syntax, which
expands to a lisp style binary tree in the abstract syntax. This
erasure property works not on XML elements, but on RDF statements.
</p>
</div>

<div class="slide"><h1>On RDF/XML Syntax</h1>
<ul>
 <li>Too constrained for some
  <ul>
    <li>Tries to look like Book/author/title metadata but has subtle
    constraints with striping, rdf:about,rdf:resource, etc.</li>
  </ul>
 </li>
 <li>Not constrained enough for others
  <ul>
    <li>doesn't work with DTDs nor W3C XML Schemas; works awkwardly
    with XPath and XSLT</li>
  </ul>
 </li>
</ul>
<p>At least the issues in the 1998 spec have all been resolved,
complete with test cases. There are plenty of interoperable
parsers. And it works great with Relax-NG and nxml-mode :)</p>
</div>

<div class="slide">
<h1>Using GRDDL to get RDF from XML, XHTML</h1>

<p><b>GRDDL</b> (<b>G</b>leaning <b>R</b>esource <b>D</b>escriptions
from <b>D</b>ialects of <b>L</b>anguages) is a
way to boostrap <b>RDF</b> out of <b>XML</b> and in
particular <b>XHTML</b> data by explicitly linking
<b>transformations</b> from RDF to XML.</p>

<p><b>GRDDL</b> terminology:</p>
<ol>
<li><dfn>Source Document</dfn>: an XML document which references at least one GRDDL transformation and hence licenses a GRDDL-aware to extract RDF.</li>
<li><dfn>GRDDL-aware agent</dfn>: a software agent able to identify the GRDDL transformations and run them to extract RDF.</li>
<li><dfn>GRDDL Transformation</dfn>: an algorithm for getting RDF from a source document</li>
</ol>

</div>

<div class="slide">
<h1>Microformats and the Semantic Web?</h1>
<div class="figure">
<img align="center" src="images/newsemanticweb.jpg" >
</div>
</div>

<div class="slide">
<h1>Describing your Social Network</h1>
<p>Recall Jane needs to her list of trusted sources
in some machine readable format.</p>

<ul>
<li><b>RDF</b>: <a href="http://www.foaf-project.org/">FOAF</a> "Friend of a Friend"</li>

<li><b>RDF</b>: VCard/RDF <a href="http://www.w3.org/2006/vcard/ns">vCard/RDF</a>.</li>

<li> <b>Microformats</b>: <a href="http://gmpg.org/xfn/">XFN</a>,
"<strong>X</strong>HTML <strong>F</strong>riends <strong>N</strong>etwork"
</li>
</ul>
<p>As long as they can be mapped to RDF, they can be mapped to each other.</p>

</div>

<div class="slide">
<h1>Xhtml Friends Network (XFN): an XHTML profile</h1>

<ol>
<li><a href="http://gmpg.org/xfn/">XFN</a>
is an microformat for social network data; this profile
of HTML is named with a URI.</li>
<li>The <a href="http://www.w3.org/2001/sw/grddl-wg/doc29/janefriends.html">page of Jane's friends</a>
adds one attribute to declare this profile:</li>
</ol>

<pre>
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head <span class="attn">profile="http://gmpg.org/xfn/11"</span>&gt;
	&lt;title&gt;Jane's XFN List&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Jane's &lt;abbr title="XHTML Friends Network"&gt;XFN&lt;/abbr&gt; List&lt;/h1&gt;
  &lt;ul class="xoxo"&gt;
    &lt;li class="vcard"&gt;&lt;a href="http://peter.example.org" class="url fn"
    <span class="attn">rel="met collegue friend"</span>&gt;Peter Smith&lt;/a&gt;&lt;/li&gt;
      &lt;li class="vcard"&gt;&lt;a href="http://john.example.org" class="url fn"
    <span class="attn">rel="met"</span>&gt;John Doe&lt;/a&gt;&lt;/li&gt;
      &lt;li class="vcard"&gt;&lt;a href="http://paul.example.org" class="url fn"
    <span class="attn">rel="met"</span>&gt;Paul Revere&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p class="footnote">* actually, the XFN profile isn't quite
GRDDL-happy yet; but the
<a href="http://research.talis.com/2005/erdf/wiki/Main/RdfInHtml">eRDF</a>
profile is.</p>

</div>


<div class="slide">
<h1>Out comes mergeable RDF data</h1>

<p><em>magic* happens here...</em></p>

<pre>
@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix foaf: &lt;http://xmlns.com/foaf/0.1/> .
@prefix h: &lt;http://www.w3.org/1999/xhtml> .
@prefix xfn: &lt;http://gmpg.org/xfn/11#> .

[]
    foaf:homepage &lt;http://www.w3.org/2001/sw/grddl-wg/doc29/janefriends.html>;
    xfn:friend [
        foaf:homepage &lt;http://peter.example.org>
    ];
    xfn:met [
        foaf:homepage &lt;http://peter.example.org>
    ], [
        foaf:homepage &lt;http://john.example.org>
    ], [
        foaf:homepage &lt;http://paul.example.org>
    ] .
</pre>

<p>*we'll explain the trick later.</p>
</div>

<div class="slide">
<h1>Using a GRDDL Transformation Directly</h1>

<p>The hReview microformat doesn't have an established profile yet, so the
<a href="http://www.w3.org/2001/sw/grddl-wg/doc29/hotel-data.html">Hotel Review</a> data uses GRDDL directly:</p>

<pre>
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head <span class="attn">profile="http://www.w3.org/2003/g/data-view"</span>&gt;
    &lt;title&gt;Hotel Reviews from Example.com&lt;/title&gt;
    <span class="attn">&lt;link rel="transformation"
       href="http://www.w3.org/2001/sw/grddl-wg/doc29/hreview2rdfxml.xsl"/&gt;</span>
&lt;/head&gt;
&lt;div class="hreview" id="_665"&gt;
  &lt;div class="item vcard"&gt;
  &lt;b class="fn org"&gt;Witch's Caldron Hotel, Edinburgh&lt;/b&gt;
  <span class="attn">&lt;span&gt;&lt;span class="rating"&gt;5&lt;/span&gt; out of 5 stars&lt;/span&gt;</span>
</pre>

<ol>
<li>The <tt>transformation</tt> link tells a GRDDL-aware agent how to
find an transformation, <tt>../hreview2rdfxml.xsl</tt> from this syntax to
standard RDF/XML syntax.</li>

<li>The <a
href="http://www.w3.org/2003/g/data-view">http://www.w3.org/2003/g/data-view</a>
profile shows that this document uses <tt>rel="transformation"</tt> as
specified in by GRDDL.</li>

</ol>
</div>

<div class="slide"><h1>SQL * URIs = SPARQL</h1>

<img align="right"
     src="http://www.w3.org/DesignIssues/diagrams/spv-table.png"
     alt="table subject/property/value" />

<pre>
  PREFIX foaf: &lt;http://xmlns.com/foaf/0.1/>
  PREFIX c: &lt;http://www.w3.org/2002/12/cal/icaltzd#>
  SELECT ?name, ?summary, ?when
   FROM &lt;myFriendsBlogsData>
   WHERE { ?somebody foaf:name ?name; foaf:mbox ?mbox.
           ?event c:summary ?summary;
                  c:dtstart ?ymd;
                  c:attendee [ c:calAddress ?mbox ]
         }.
</pre>

<table border="1">
<tr><th>?name</th><th>?summary</th><th>?when</th></tr>
<tr><td>Tantek Çelik</td><td>Web 2.0</td><td>2005-10-05</td></tr>
<tr><td>Norm Walsh</td><td>XML 2005</td><td>2005-11-13</td></tr>
<tr><td>Dan Connolly</td><td>W3C tech plenary</td><td>2006-02-27</td></tr>
</table>

<p>See <cite><a href="http://www.w3.org/TR/rdf-sparql-query/">SPARQL
Query Language for RDF</a></cite> W3C Working Draft.</p>
</div>

<div class="slide">
<h1>Putting RDF to Work with SPARQL</h1>
<p>"Find reviews better than 2 stars and tell me the name
of the hotel and the reviewer."</p>
<pre>
<code>
PREFIX foaf: &lt;http://xmlns.com/foaf/0.1/>
PREFIX rev: &lt;http://www.purl.org/stuff/rev#>
PREFIX rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#>

SELECT DISTINCT ?name ?rating ?hotelname

FROM &lt;http://www.w3.org/2001/sw/grddl-wg/doc29/review.rdf>

WHERE {
?x rev:hasReview ?review.
?review rev:rating ?rating;
  rdfs:label ?hotelname;
  rev:reviewer [ foaf:name ?name ].
FILTER (?rating > 2).
}
</code>
</pre>
<p>Details: <a href="../doc29/hotelquery1.rq">hotelquery1.rq</a></p>
</div>


<div class="slide">
<h1>SPARQL results from hReview data</h1>
<p>The query worked, but it's not precise enough:</p>

<table border="1">
<tr>
<td><b>name</b>      </td><td> <b>rating</b>  </td><td> <b>hotelname</b>                             </td>
</tr><tr>
<td> "PeterS"  </td><td> 5        </td><td>"Enlightenment Amsterdam Hotel"       </td>
</tr><tr>
<td> "RexR"     </td><td> 5       </td><td> "Pilgrim Hostel"                      </td>
</tr><tr>
<td> "PeterS"  </td><td> 4        </td><td>"Fano Hotel"                          </td>
</tr><tr>
<td> "MaryV"   </td><td> 5        </td><td>"Franklin Hotel, Philadelphia"         </td>
</tr><tr>
<td> "Simon"    </td><td>5       </td><td> "Forest Cafe Youth Hostel, Edinburgh" </td>
</tr><tr>
<td> "JennyR"   </td><td>3        </td><td>"Merton Atlanta"                      </td>
</tr><tr>
<td> "JohnD"    </td><td>4        </td><td>"Walter Scot Hotel, Edinburgh"        </td>
</tr><tr>
<td> "PeterS"   </td><td>5        </td><td>"Royal Moon Hotel, Boston"             </td>
</tr><tr>
<td> "JohnD"    </td><td>5        </td><td>"Elena Plaza Hotel"                   </td>
</tr><tr>
<td> "PeterS"   </td><td>5        </td><td>"Witch's Caldron Hotel, Edinburgh"    </td>
</tr><tr>
<td> "RexR"     </td><td>3        </td><td>"Bond Plaza Hotel"                    </td>
</tr><tr>
<td> "RexR"     </td><td>5        </td><td>"McRae Palace, Edinburgh"             </td>
</tr><tr>
<td> "RexR"     </td><td>5        </td><td>"Ritchie Centre, Edinburgh"           </td>
</tr><tr>
<td> "PeterS"   </td><td> 5      </td><td>  "Maximus New York Hotel &amp; Towers"     </td>
</tr>
</table>
</div>

<div class="slide">
<h1>More precise SPARQL query</h1>
<p>"Find reviews
of hotels <span class="attn">in Edinburgh</span>
 better than 2 stars and tell me the name
of the hotel and the reviewer."</p>

<pre>
<code>
SELECT DISTINCT ?name ?rating ?homepage

FROM &lt;hotel-data.rdf&gt;
FROM &lt;janefriends.rdf&gt;

WHERE {
?x rev:hasReview ?review;
  <span class="attn">vcard:adr [ vcard:locality "Edinburgh" ].</span>

?review rev:rating ?rating;
  rdfs:label ?hotelname;
  rev:reviewer [ foaf:name ?name ].
FILTER (?rating > 2).
</code>
</pre>
<p><a href="http://www.w3.org/2001/sw/grddl-wg/doc29/hotelquery2.rq">Sample Query Online</a></p>

</div>

<div class="slide">
<h1>SPARQL results from hReview and vcard locality data</h1>

<p>This shows hotels with a rating of 2 stars or higher that are
located in Edinburgh, but there might be review spam:</p>

 <table border="1">
<tr>
<td><b> rating</b>  </td><td> <b>name</b>      </td><td> <b>hotelname</b>                              </td><td> <b>region</b>      </td>
</tr><tr>
<td> 5       </td><td> "RexR"     </td><td>"Ritchie Centre, Edinburgh"            </td><td> "Edinburgh" </td>
</tr><tr>
<td> 5       </td><td> "PeterS"  </td><td> "Witch's Caldron Hotel, Edinburgh"      </td><td>"Edinburgh" </td>
</tr><tr>
<td> 5       </td><td> "Simon"   </td><td> "Forest Cafe Youth Hostel, Edinburgh"   </td><td>"Edinburgh" </td>
</tr><tr>
<td> 5       </td><td> "RexR"     </td><td>"McRae Palace, Edinburgh"              </td><td> "Edinburgh" </td>
</tr><tr>
<td> 4       </td><td> "JohnD"    </td><td>"Walter Scott Hotel, Edinburgh"          </td><td>"Edinburgh" </td>
</tr>
</table>
</div>

<div class="slide">
<h1>Mashing up Friends and Hotel Reviews</h1>
<ul>
<li>Recall RDF data merges naturally... </li>
<li>... e.g. the <a href="../doc29/xfn.rdf">friends data</a>
and the <a href="../doc29/review.rdf">hotel data</a>
</li>
<li>Any URI used in both data sets is a shared point in the graph.</li>
</ul>
</div>

<div class="slide">
<h1>Querying for Trusted Reviews</h1>

<p>"Find reviews <span class="attn">by my friends</span> of hotels in
Edinburgh better than 2 stars and tell me the name of the hotel and
the reviewer."</p>

<pre><code>
PREFIX xfn: &lt;http://gmpg.org/xfn/11#&gt;

SELECT DISTINCT ?rating ?name ?homepage ?hotelname
FROM &lt;review.rdf&gt;
FROM &lt;xfn.rdf&gt;
WHERE {
?place rev:hasReview ?review;
  vcard:adr [ vcard:Locality "Edinburgh"].
?review
  rdfs:label ?hotelname;
  rev:rating ?rating;
  <span class="attn">rev:reviewer ?reviewer</span>.

FILTER (?rating &gt; 2).

<span class="attn">?reviewer foaf:name ?name;
  foaf:homepage ?homepage.

[ foaf:homepage &lt;janefriends.html> ]
   xfn:friend [ foaf:homepage ?homepage ].</span>
}

</code></pre>

<p>Details: <a href="http://www.w3.org/2001/sw/grddl-wg/doc29/hotelquery3.rq">hotelquery3.rq</a></p>
</div>

<div class="slide">
<h1>Hotel query diagram</h1>

<p>"Find reviews <span class="attn">by my friends</span> of hotels in
Edinburgh better than 2 stars and tell me the name of the hotel and
the reviewer."</p>

<div class="figure">
<img alt="hotel review query diagram" src="hotel-query.png" />
</div>

</div>

<div class="slide">
<h1>Trusted Reviews from SPARQL via GRDDL</h1>

<p>Just right:</p>

<table border="1">
  <tr>
    <th>rating</th><th>name</th><th>region</th>
    <th>homepage</th>
    <th>hotelname</th>
  </tr>
  <tr>
    <td>5</td>
    <td>PeterS</td>
    <td>Edinburgh</td>
    <td>http://peter.example.org</td>
    <td>Witch's Caldron Hotel, Edinburgh</td>
  </tr>
</table>
</div>

<div class="slide">
<h1>Return to Calendar Mash-up</h1>

<p>When can Jane, David, and Robin meet?</p>
<ul>
  <li>Jane keeps <a href="../doc29/janeschedule.html">her calendar</a> in one format (RDFa)</li>
  <li>David uses another (eRDF) for <a
  href="../doc29/david-erdf.html">his calendar</a></li>
  <li>Robin keeps <a href="../doc29/robin-hcal-grddl.html">his schedule</a> in a 3rd format (hCalendar)</li>
</ul>
</div>


<div class="slide">
<h1>Embedded RDF</h1>

<p>David has chosen to mark up his <a href="david-erdf.html">schedule</a> using <a href="http://research.talis.com/2005/erdf/wiki/Main/RdfInHtml">Embedded RDF</a> (an alternative to <a href="http://www.w3.org/2006/07/SWD/RDFa/primer/">RDFa</a>), a  way to use GRDDL to get out RDF from documents.</p>

<p><a href="http://www.w3.org/2001/sw/grddl-wg/doc29/david-erdf.html">Embedded RDF file online</a></p>

<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head profile="http://purl.org/NET/erdf/profile"&gt;
    &lt;title&gt;Where Am I&lt;/title&gt;
    &lt;link rel="schema.cal" href="http://www.w3.org/2002/12/cal#" /&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;p class="-cal-Vevent" id="tiddlywinks"&gt;
      From &lt;span <span class="attn">class="cal-dtstart" title="2006-10-07"</span>&gt;7 October, 2006&lt;/span&gt;
      to &lt;span class="cal-dtend"  title="2006-10-13"&gt;12 October, 2006&lt;/span&gt;
      I will be attending the &lt;span class="cal-summary"&gt;National Tiddlywinks
      Championship&lt;/span&gt; in
      &lt;span class="cal-location"&gt;Bognor Regis, UK&lt;/span&gt;.
    &lt;/p&gt;


    &lt;p class="-cal-Vevent" id="holiday"&gt;
      Then I'm &lt;span class="cal-summary"&gt;on holiday&lt;/span&gt; in the
      &lt;span class="cal-location"&gt;Cayman Islands&lt;/span&gt; between
      &lt;span class="cal-dtstart" title="2006-11-14"&gt;14 November, 2006&lt;/span&gt;

      and &lt;span class="cal-dtend"  title="2007-01-02"&gt;1 January, 2007&lt;/span&gt;.
    &lt;/p&gt;

    &lt;p class="-cal-Vevent" id="award"&gt;
      I then visit Scotland on &lt;span class="cal-dtstart" title="2007-01-08"&gt;the 8th
      January&lt;/span&gt; to &lt;span class="cal-summary"&gt;pick up a lifetime
      achievement award from the world gamers association&lt;/span&gt;. This time
      the ceremony is in &lt;span class="cal-location"&gt;Edinburgh, UK&lt;/span&gt;. I'll be
      taking the train home on the &lt;span class="cal-dtend"  title="2007-01-11"&gt;10th&lt;/span&gt;.
    &lt;/p&gt;

  &lt;/body&gt;
&lt;/html&gt;
  </pre>

</div>


<div class="slide">
<h1>The magic trick: GRDDL Recursion</h1>
<p>GRDDL <b>has gone meta</b>!</p>

<p>This allows the HTML profile document to be GRDDL-enabled to link the standard library transformation of  <span class="attn">  &lt;link rel="transformation" href="http://www.w3.org/2003/g/glean-profile" /&gt;</span> and so extract  the <span class="attn"><a href="http://www.w3.org/2003/g/data-view#profileTransformation">http://www.w3.org/2003/g/data-view#profileTransformation</a></span> whose object is the transformation itself.</p>

<div class="figure">
<img src="http://www.w3.org/2004/01/rdxh/figGleanProfile.png"
alt="A diagram indicating the sequence of steps for obtaining RDF from a document using the profile URI as described in the preceding paragraph"
/>
</div>

</div>

<div class="slide">
<h1>Linking GRDDL to a Profile Document</h1>

<p>Embedded RDF has a link to a GRDDL transformation in its <a href="http://purl.org/NET/erdf/profile">profile document.</a></p>


<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;

  &lt;head profile="http://www.w3.org/2003/g/data-view"&gt;
    &lt;title&gt;Embedded RDF HTML Profile&lt;/title&gt;
  <span class="attn">  &lt;link rel="transformation" href="http://www.w3.org/2003/g/glean-profile" /&gt;</span>
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;
<span class="attn">      &lt;a rel="profileTransformation"
          href="http://purl.org/NET/erdf/extract-rdf"&gt;GRDDL transform&lt;/a&gt;
    &lt;/p&gt;</span>
  &lt;/body&gt;
&lt;/html&gt;
</pre>

</div>


<div class="slide">
<h1>GRDDL in Namespace Documents</h1>
<p class="subhead">
No Transformation Links - just go to the <b>namespace</b> document!
</p>
<p>In RDF, OWL, RDF Schema:</p>
<pre>
&lt;rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  <font color="red">xmlns:dataview="http://www.w3.org/2003/g/data-view#"&gt;</font>
 &lt;rdf:Description <font color="red">rdf:about="http://www.w3.org/2004/01/rdxh/p3q-ns-example"&gt;</font>
   <span class="attn">&lt;dataview:namespaceTransformation
       rdf:resource="http://www.w3.org/2004/01/rdxh/grokP3Q.xsl"/&gt;</span>
 &lt;/rdf:Description&gt;
&lt;/rdf:RDF&gt;
</pre>
<p>In XML Schema:</p>
<pre>
&lt;xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"
            xmlns="http:.../Order-1.0"
            targetNamespace="http:.../Order-1.0"
            version="1.0"
            ...
            xmlns:data-view="http://www.w3.org/2003/g/data-view#"
            data-view:transformation="http://www.w3.org/2003/g/embeddedRDF.xsl" >
    &lt;xsd:element name="Order" type="OrderType">
    &lt;xsd:annotation
      &lt;xsd:documentation>This element is the root element.&lt;/xsd:documentation>
    &lt;/xsd:annotation>
                 ...
  &lt;xsd:annotation>
    &lt;xsd:appinfo>
 <span class="attn">     &lt;rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
	&lt;rdf:Description rdf:about="http://www.w3.org/2003/g/po-ex">
	  &lt;data-view:namespaceTransformation
	      rdf:resource="grokPO.xsl" />
	&lt;/rdf:Description>
      &lt;/rdf:RDF></span>
    &lt;/xsd:appinfo>
  &lt;/xsd:annotation>
...
</pre>

</div>


<div class="slide">
<h1>RDF for Free</h1>
<p><i>Is it too much work to ask people to add the transformation and profile to their individual instance data?</i></p>

<p>Creators or maintainers of vocabularies can also give users of their data the option of  having their data transformed into RDF without having to even add any new markup to individual documents</p>

<p>Since once the tranformation has been linked to the profile or namespace document, all the users of the dialect get the added value of RDF <b>for free</b></p>

<p>In either the namespace document or profile URI  there has to be the following RDF property:  <a href="http://www.w3.org/2003/g/data-view#profileTransformation">http://www.w3.org/2003/g/data-view#profileTransformation</a> whose subject is the namespace doc or profile document and whose object is the transformation itself.
</p>
</div>

  <div class="slide">
    <h1>RDFa</h1>

    <p>While GRDDL has primarily in the wild been used to convert
    widely deployed microformats to RDF, it can actually be used
    with the W3C <a href=
    "http://www.w3.org/2006/07/SWD/RDFa/primer/">RDFa</a> work item that
    allows one to "microformat-style" embed arbitary RDF statements
    in HTML</p>

    <p>RDFa is useful because <a href=
    "http://www.microformats.org">microformats</a> exist as a
    number of centralized vocabularies, and what if you want to
    mark-up meta-data in a web-page about a subject there isn't a
    microformat about?</p>

    <p>Since RDFa is still a <b>moving target</b>, we personally
    recommend people use Embedded RDF for the time being unless
    they are willing to track the changes in RDFa, but RDFa is more
    expressive than Embedded RDF (allowing XML Schema datatypes,
    etc.</p>
  </div>

<div class="slide">
<h1>HTML Contains Implicit Structure</h1>

<pre style="font-size:1.1em;">
This document is licensed under a

&lt;a href="http://cc.org/licenses/by/3.0/"&gt;
   CC License
&lt;/a&gt;

and was written by TimBL.
</pre>

<ul>
    <li> The idea that this implicit structured can be marked up is not new: <b>microformats</b>.</li>
    <li> What's new:
        <ul>
            <li> consistent syntax,</li>
            <li> leveraging all the goodness of RDF,</li>
            <li> true mashup-ability of web data.</li>
        </ul>
    </li>
    <li> RDFa = RDF in attributes</li>
</ul>
</div>

<div class="slide">
    <h1>Basic Stuff: Typing a Link</h1>

    <pre style="font-size:1.1em;">
    This document is licensed under a

    &lt;a href="http://cc.org/licenses/by/3.0/"
       <font style="color:red;">xmlns:cc="http://cc.org/ns#" rel="cc:license"</font>&gt;
       CC License
    &lt;/a&gt;

    and was written by TimBL.
    </pre>

    <ul>
        <li> use existing HTML attributes whenever possible: <tt>rel</tt>.</li>

        <li> "Bridging the Clickable and Semantic Webs": there's already a clickable link, now we type it.</li>

        <li> self-contained:
            <ul>
                <li> copy-and-paste a chunk of HTML along with its RDFa.</li>
                <li> build "RDFa wizards" to create copy-and-paste-able content-and-structure.</li>
                <li> combine "widgets" on a page, each widget with its own HTML+RDFa (no interference).</li>
            </ul></li>
    </ul>
</div>
<div class="slide">
    <h1>More Complex Structure: RDFa goes Deep</h1>

    <pre style="font-size:1.1em;">
    This document
    ...
    &lt;div <font style="color:red;">rel="dc:creator" class="foaf:Person"
       xmlns:dc="http://..." xmlns:foaf="http://..."</font>&gt;
       and was written by
       &lt;span <font style="color:red;">property="foaf:nickname"</font>&gt;
          TimBL
       &lt;/span&gt;.
    &lt;/div&gt;
    </pre>
    <p>
    yields
    </p>

    <pre style="font-size:1.1em;">
    &lt;&gt; dc:creator [a foaf:Person ; foaf:nickname "TimBL"] .</pre>

    <ul>
        <li> slightly expand the use of HTML attributes: <tt>rel</tt> on any element to introduce a new RDF bnode (striping).</li>
        <li> use the inherent semantics of HTML: <tt>class</tt> attribute is type information.</li>

    </ul>
</div>

  <div class="slide">
    <h1>GRDDL Does RDFa</h1>

    <p><a href=
    "http://www.w3.org/2001/sw/grddl-wg/doc29/janeschedule.html">RDFa
    for Jane's schedule online</a></p>

    <p><a href=
    "http://www.w3.org/2001/sw/grddl-wg/doc29/janeschedule.rdf">RDFa
    After GRDDL</a></p>
    <pre>
&lt;html xmlns:cal="http://www.w3.org/2002/12/cal/icaltzd#" xmlns:xs="http://www.w3.org/2001/XMLSchema#"&gt;<br />
 <span class=
"attn">&lt;head profile="http://www.w3.org/2003/g/data-view"&gt;</span>
  &lt;title&gt;Jane's Blog&lt;/title&gt;
<span class="attn">    &lt;link rel="transformation" <br />
href="http://www.w3.org/2001/sw/grddl-wg/td/RDFa2RDFXML.xsl"/&gt;</span>
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p about="#event1" class ="cal:Vevent"&gt;
      &lt;b <span class=
"attn">property="cal:summary"&gt;</span>Weekend off in Iona&lt;/b&gt;: <br />
      &lt;span <span class=
"attn">property="cal:dtstart" content="2006-10-21" datatype="xs:date"</span>&gt;Oct 21st&lt;/span&gt;<br />
<br />
      to &lt;span property="cal:dtend" content="2006-10-21"  datatype="xs:date"&gt;Oct 23rd&lt;/span&gt;.<br />
      See &lt;a rel="cal:url" href="http://freetime.example.org/"&gt;FreeTime.Example.org&lt;/a&gt; for<br />
      info on &lt;span property="cal:location"&gt;Iona, UK&lt;/span&gt;.<br />
  &lt;/p&gt;<br />
  &lt;p about="#event2" class ="cal:Vevent"&gt;<br />
      &lt;b property="cal:summary"&gt;Holiday in Ireland&lt;/b&gt;: <br />
      &lt;span property="cal:dtstart" content="2006-12-23" datatype="xs:date"&gt;Dec 23rd&lt;/span&gt;<br />
<br />
      to &lt;span property="cal:dtend" content="2006-12-27"  datatype="xs:date"&gt;Dec 27th&lt;/span&gt;.<br />
      See &lt;a rel="cal:url" href="http://vacation.example.org/"&gt;Vacation.Example.org&lt;/a&gt; for<br />
      info on &lt;span property="cal:location"&gt;Belfast, Ireland&lt;/span&gt;.<br />
  &lt;/p&gt;<br />
  &lt;p&gt;&lt;b&gt;New Years!&lt;/b&gt; Now it's 2007...&lt;/p&gt;<br />
  &lt;p about="#event3" class ="cal:Vevent"&gt;<br />
<br />
      &lt;b property="cal:summary"&gt;Web Conference&lt;/b&gt;: <br />
      &lt;span property="cal:dtstart" content="2007-01-08" datatype="xs:date"&gt;Jan 8th&lt;/span&gt;<br />
      to &lt;span property="cal:dtend" content="2007-01-11"  datatype="xs:date"&gt;Jan 11th&lt;/span&gt;.<br />
      See &lt;a rel="cal:url" href="http://webconf.example.org/"&gt;webconf.example.org&lt;/a&gt; for<br />
      info on &lt;span property="cal:location"&gt;Edinburgh, UK&lt;/span&gt;.<br />
  &lt;/p&gt;<br />
</pre>
  </div>

<div class="slide">
<h1>Onwards!</h1>
<p>Time for a break!</p>
<p><a href="gtut2.html">Now to Second Part</a></p>
</div>

</body>
</html>