WWW2008 Tutorials — RDFa

 

RDFa: Bridging the Human and Data Webs

Ben Adida, Creative Commons / Harvard University
Ivan Herman, W3C
Elias Torres, IBM

Agenda

Chasm Between Human and Data Webs [RSS]

2 published documents, 2 document types

Chasm Between Human and Data Webs [Cal]

2 published documents, 2 document types

Chasm Between Human and Data Webs [Semweb]

2 published documents, 2 document types

So much data on the web.... [Social Network]

So much data on the web.... [Craigslist]

So much data on the web.... [Flickr]

So much data on the web.... [WWW2008 Program]

The Chasm

A significant gap between what browsers see and what humans see

Bridging the Human and Data Webs [Correspondence]

Bridging the Human and Data Webs [Correspondence]

Bridging the Human and Data Webs [Correspondence]

Bridging the Human and Data Webs [Correspondence]

Bridging the Human and Data Webs [A Single DRY Format]

Change the visual, change the machine-readable

Change: 
distributed under a 
<a href="http://creativecommons.org/licenses/by/3.0/">CC License</a>
To: 
distributed under a 
<a href="http://creativecommons.org/licenses/by-nc/3.0/">CC License</a>

The Machine Readers should Follow

Bridging the Human and Data Webs [A Single DRY Format]

Bridging the Human and Data Webs [A Single DRY Format]

Bridging the Human and Data Webs [Extensibility & Modularity]

The Flickr Photostream

Bridging the Human and Data Webs [Extensibility & Modularity]

Flickr used by a Newsreader

Bridging the Human and Data Webs [Extensibility & Modularity]

Flickr used by a Digital Photo Frame

Bridging the Human and Data Webs [Extensibility & Modularity]

Flickr used by an Asset Management Program

Superposition of Applications

 
 

One DRY document; Multiple, superposed applications

A Link with Flavor

distributed under a
<a href="http://creativecommons.org/licenses/by/3.0/">
    Creative Commons License
</a>

A Link with Flavor

distributed under a
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
    Creative Commons License
</a>

Text with Flavor

<h2>The Trouble with Bob</h2>
<h3>Alice</h3>

Text with Flavor

<h2 property="dc:title">The Trouble with Bob</h2>
<h3 property="dc:creator">Alice</h3>

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
    ....
</div>

Text with Flavor

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>
</div>

Text with Flavor and Datatype

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>
    <em>April 21st, 2008</em>
</div>

Text with Flavor and Datatype

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>
    <em property="dc:date">April 21st, 2008</em>
</div>

Text with Flavor and Datatype

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>
    <em property="dc:date" datatype="xsd:date"
        content="20080421">April 21st, 2008</em>
</div>

A Few Articles

<div ...>
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>
</div>

...

<div ...>
    <h2 property="dc:title">Jo's Barbecue</h2>
    <h3 property="dc:creator">Eve</h3>
</div>

A Few Articles

<div about="/alice/posts/trouble_with_bob"...>
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>
</div>

...

<div about="/alice/posts/jos_barbecue"...>
    <h2 property="dc:title">Jo's Barbecue</h2>
    <h3 property="dc:creator">Eve</h3>
</div>

A Few Articles

 

Image within an Article

<div about="/alice/posts/trouble_with_bob"...>
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>
</div>

Image within an Article

<div about="/alice/posts/trouble_with_bob"...>
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>

    <p>The trouble with Bob is that he takes
    much better photos than I do:</p>

    <div>
        <img src="/bob/photos/sunset.jpg" />
        <span>Beautiful Sunset</span>
        by <a href="/bob/">Bob</a>
    </div>
</div>

Image within an Article

<div about="/alice/posts/trouble_with_bob"...>
    <h2 property="dc:title">The Trouble with Bob</h2>
    <h3 property="dc:creator">Alice</h3>
    
    <p>The trouble with Bob is that he takes
    much better photos than I do:</p>
    
    <div about="/bob/photos/sunset.jpg">
        <img src="/bob/photos/sunset.jpg" />
        <span property="dc:title">Beautiful Sunset</span>
        by <a rel="dc:creator" href="/bob/">Bob</a>
    </div>
</div>

Image within an Article

The power of about

Comment Authors with Properties but no URL

<h2 property="dc:title">The Trouble with Bob</h2>
...
<div id="comments">
    <p id="c_1">
        Yes, Bob is an evil-doer.
        <em>Cindy</em>
    </p>
    <p id="c_2">
        No way, Bob rocks.
        <em>Michelle</em>
    </p>
</div>

Comment Authors with Properties but no URL

<h2 property="dc:title">The Trouble with Bob</h2>
...
<div id="comments">
    <p id="c_1">
        Yes, Bob is an evil-doer.
        <em typeof="foaf:Person">Cindy</em>
    </p>
    <p id="c_2">
        No way, Bob rocks.
        <em typeof="foaf:Person">Michelle</em>
    </p>
</div>

Comment Authors with Properties but no URL

<h2 property="dc:title">The Trouble with Bob</h2>
...
<div id="comments">
    <p id="c_1">
        Yes, Bob is an evil-doer.
        <em typeof="foaf:Person" property="foaf:name">
            Cindy</em>
    </p>
    <p id="c_2">
        No way, Bob rocks.
        <em typeof="foaf:Person" property="foaf:name">
            Michelle</em>
    </p>
</div>

Comment Authors with Properties but no URL

 

Comment Authors with Properties but no URL

<h2 property="dc:title">The Trouble with Bob</h2>
...
<div id="comments">
    <p id="c_1" about="#c_1">
        Yes, Bob is an evil-doer.
        <em typeof="foaf:Person" property="foaf:name">
            Cindy</em>
    </p>
    <p id="c_2" about="#c_2">
        No way, Bob rocks.
        <em typeof="foaf:Person" property="foaf:name">
            Michelle</em>
    </p>
</div>

Comment Authors with Properties but no URL

<h2 property="dc:title">The Trouble with Bob</h2>
...
<div id="comments">
    <p id="c_1" about="#c_1" rel="dc:creator">
        Yes, Bob is an evil-doer.
        <em typeof="foaf:Person" property="foaf:name">
            Cindy</em>
    </p>
    <p id="c_2" about="#c_2" rel="dc:creator">
        No way, Bob rocks.
        <em typeof="foaf:Person" property="foaf:name">
            Michelle</em>
    </p>
</div>

Comment Authors with Properties but no URL

 

Connecting the Comments

<h2 property="dc:title">The Trouble with Bob</h2>
...
<div id="comments">
    <p id="c_1" about="#c_1" rel="dc:creator">
        Yes, Bob is an evil-doer.
        <em typeof="foaf:Person" property="foaf:name">
            Cindy</em>
    </p>
    <p id="c_2" about="#c_2" rel="dc:creator">
        No way, Bob rocks.
        <em typeof="foaf:Person" property="foaf:name">
            Michelle</em>
    </p>
</div>

Connecting the Comments

<h2 property="dc:title">The Trouble with Bob</h2>
...
<div id="comments" rel="blog:comment">
    <p id="c_1" about="#c_1" rel="dc:creator">
        Yes, Bob is an evil-doer.
        <em typeof="foaf:Person" property="foaf:name">
            Cindy</em>
    </p>
    <p id="c_2" about="#c_2" rel="dc:creator">
        No way, Bob rocks.
        <em typeof="foaf:Person" property="foaf:name">
            Michelle</em>
    </p>
</div>

Connecting the Comments

<h2 property="dc:title">The Trouble with Bob</h2>
...
<div id="comments" rel="blog:comment">
    <p id="c_1" about="#c_1" rel="dc:creator">
        Yes, Bob is an evil-doer.
        <em typeof="foaf:Person" property="foaf:name">
            Cindy</em>
    </p>
    <p id="c_2" about="#c_2" rel="dc:creator">
        No way, Bob rocks.
        <em typeof="foaf:Person" property="foaf:name">
            Michelle</em>
    </p>
</div>

Connecting the Comments

 

A Second Complete Example: FOAF

<span>Ivan Herman</span>
Email: <a href="mailto:ivan@w3.org">ivan@w3.org</a>
(<span>5ac8032d5f6012aa1775ea2f63e1676bafd5e80b</span>)

Phone numbers:
phone: <a href="tel:+31-20-5924163">+31-20-5924163</a>
mobile: <a href="tel:+31-641044153">+31-641044153</a>
fax: +31-20-5924312
<a href="/pgpkey.html">GnuPGP key</a>

Misc:
I am often on
    freenode, (acc. name <span>IvanHerman</span>

...

A Second Complete Example: FOAF

<span property="foaf:name">Ivan Herman</span>
Email: <a href="mailto:ivan@w3.org">ivan@w3.org</a>
(<span>5ac8032d5f6012aa1775ea2f63e1676bafd5e80b</span>)

Phone numbers:
phone: <a href="tel:+31-20-5924163">+31-20-5924163</a>
mobile: <a href="tel:+31-641044153">+31-641044153</a>
fax: +31-20-5924312
<a href="/pgpkey.html">GnuPGP key</a>

Misc:
I am often on
    freenode, (acc. name <span>IvanHerman</span>

...

A Second Complete Example: FOAF

<span property="foaf:name">Ivan Herman</span>
Email: <a rel="foaf:mbox" href="mailto:ivan@w3.org">ivan@w3.org</a>
(<span>5ac8032d5f6012aa1775ea2f63e1676bafd5e80b</span>)

Phone numbers:
phone: <a href="tel:+31-20-5924163">+31-20-5924163</a>
mobile: <a href="tel:+31-641044153">+31-641044153</a>
fax: +31-20-5924312
<a href="/pgpkey.html">GnuPGP key</a>

Misc:
I am often on
    freenode, (acc. name <span>IvanHerman</span>

...

A Second Complete Example: FOAF

<span property="foaf:name">Ivan Herman</span>
Email: <a rel="foaf:mbox" href="mailto:ivan@w3.org">ivan@w3.org</a>
(<span property="foaf:mbox_sha1sum">5ac8032d5f6012aa1775ea2f63e1676bafd5e80b</span>)

Phone numbers:
phone: <a href="tel:+31-20-5924163">+31-20-5924163</a>
mobile: <a href="tel:+31-641044153">+31-641044153</a>
fax: +31-20-5924312
<a href="/pgpkey.html">GnuPGP key</a>

Misc:
I am often on
    freenode, (acc. name <span>IvanHerman</span>

...

A Second Complete Example: FOAF

<span property="foaf:name">Ivan Herman</span>
Email: <a rel="foaf:mbox" href="mailto:ivan@w3.org">ivan@w3.org</a>
(<span property="foaf:mbox_sha1sum">5ac8032d5f6012aa1775ea2f63e1676bafd5e80b</span>)

Phone numbers:
phone: <a rel="foaf:phone href="tel:+31-20-5924163">+31-20-5924163</a>
mobile: <a rel="foaf:phone href="tel:+31-641044153">+31-641044153</a>
fax: +31-20-5924312
<a href="/pgpkey.html">GnuPGP key</a>

Misc:
I am often on
    freenode, (acc. name <span>IvanHerman</span>

...

A Second Complete Example: FOAF

<span property="foaf:name">Ivan Herman</span>
Email: <a rel="foaf:mbox" href="mailto:ivan@w3.org">ivan@w3.org</a>
(<span property="foaf:mbox_sha1sum">5ac8032d5f6012aa1775ea2f63e1676bafd5e80b</span>)

Phone numbers:
phone: <a rel="foaf:phone href="tel:+31-20-5924163">+31-20-5924163</a>
mobile: <a rel="foaf:phone href="tel:+31-641044153">+31-641044153</a>
fax: +31-20-5924312
<a rel="wot:pubkeyAddress" href="/pgpkey.html">GnuPGP key</a>

Misc:
I am often on
    freenode, (acc. name <span>IvanHerman</span>

...

A Second Complete Example: FOAF

<span property="foaf:name">Ivan Herman</span>
Email: <a rel="foaf:mbox" href="mailto:ivan@w3.org">ivan@w3.org</a>
(<span property="foaf:mbox_sha1sum">5ac8032d5f6012aa1775ea2f63e1676bafd5e80b</span>)

Phone numbers:
phone: <a rel="foaf:phone href="tel:+31-20-5924163">+31-20-5924163</a>
mobile: <a rel="foaf:phone href="tel:+31-641044153">+31-641044153</a>
fax: +31-20-5924312
<a rel="wot:pubkeyAddress" href="/pgpkey.html">GnuPGP key</a>

Misc:
I am often on
<span rel="foaf:holdsAccount">
  <span about="http://www.freenode.net/irc_servers.shtml"
        typeof="foaf:OnlineAccount foaf:OnlineChatAccount">
    freenode, (acc. name <span property="foaf:accountName">IvanHerman</span>
  </span>
</span> 
...

A Second Complete Example: FOAF

Adding Fields: Digg

<div about="/articles/cheneys_glasses">
    <a rel="dc:source" href=".." property="dc:title">
      Enhancement of Reflection in Cheney's Glasses
    </a>
    <h3 property="dc:creator">Rick</h3>
    
    1957 diggs
    <a href="up?article_id=42">up</a>
    <a href="down?article_id=42">down</a>
    <a href="bury?article_id=42">bury</a>
</div>

Adding Fields: Digg

<div about="/articles/cheneys_glasses"
     xmlns:digg="http://digg.com/vocab/">
    <a rel="dc:source" href=".." property="dc:title">
      Enhancement of Reflection in Cheney's Glasses
    </a>
    <h3 property="dc:creator">Rick</h3>
    
    1957 diggs
    <a href="up?article_id=42">up</a>
    <a href="down?article_id=42">down</a>
    <a href="bury?article_id=42">bury</a>
</div>

Adding Fields: Digg

<div about="/articles/cheneys_glasses"
     xmlns:digg="http://digg.com/vocab/">
    <a rel="dc:source" href=".." property="dc:title">
      Enhancement of Reflection in Cheney's Glasses
    </a>
    <h3 property="dc:creator">Rick</h3>
    
    <span property="digg:score">1957</span> diggs
    <a href="up?article_id=42">up</a>
    <a href="down?article_id=42">down</a>
    <a href="bury?article_id=42">bury</a>
</div>

Adding Fields: Digg

<div about="/articles/cheneys_glasses"
     xmlns:digg="http://digg.com/vocab/">
    <a rel="dc:source" href=".." property="dc:title">
      Enhancement of Reflection in Cheney's Glasses
    </a>
    <h3 property="dc:creator">Rick</h3>
    
    <span property="digg:score">1957</span> diggs
    <a rel="digg:up" href="up?article_id=42">up</a>
    <a href="down?article_id=42">down</a>
    <a href="bury?article_id=42">bury</a>
</div>

Adding Fields: Digg

<div about="/articles/cheneys_glasses"
     xmlns:digg="http://digg.com/vocab/">
    <a rel="dc:source" href=".." property="dc:title">
      Enhancement of Reflection in Cheney's Glasses
    </a>
    <h3 property="dc:creator">Rick</h3>
    
    <span property="digg:score">1957</span> diggs
    <a rel="digg:up" href="up?article_id=42">up</a>
    <a rel="digg:down" href="down?article_id=42">down</a>
    <a rel="digg:bury" href="bury?article_id=42">bury</a>
</div>

Adding Fields: Digg

Adding Fields: Flickr

<div about="/photos/timbl/12345">
    <img src="/photos/timbl/12345_medium.jpg" />
    <span property="dc:title">
      Me and Vint Cert, partying Beijing style
    </span>
    <h3 property="dc:creator">DanC</h3>
    
    Other Sizes:
    <a href="12345_small.jpg">small, 300x200</a>
    <a href="12345_big.jpg">big, 800x600</a>
    
    Taken with:
    <a href="...">Canon Rebel XTi</a>
</div>

Adding Fields: Flickr

<div about="/photos/timbl/12345" xmlns:photo="...">
    <img src="/photos/timbl/12345_medium.jpg" />
    <span property="dc:title">
      Me and Vint Cert, partying Beijing style
    </span>
    <h3 property="dc:creator">DanC</h3>
    
    Other Sizes:
    <a href="12345_small.jpg">small, 300x200</a>
    <a href="12345_big.jpg">big, 800x600</a>
    
    Taken with:
    <a rel="photo:camera" href="...">Canon Rebel XTi</a>
</div>

Adding Fields: Flickr

<div about="/photos/timbl/12345" xmlns:photo="...">
    <img src="/photos/timbl/12345_medium.jpg" />
    <span property="dc:title">
      Me and Vint Cert, partying Beijing style
    </span>
    <h3 property="dc:creator">DanC</h3>
    
    Other Sizes:
    <a rel="photo:alternate" href="12345_small.jpg">
      small, 300x200
    </a>

...

Adding Fields: Flickr

<div about="/photos/timbl/12345" xmlns:photo="...">
    <img src="/photos/timbl/12345_medium.jpg" />
    <span property="dc:title">
      Me and Vint Cert, partying Beijing style
    </span>
    <h3 property="dc:creator">DanC</h3>
    
    Other Sizes:
    <a rel="photo:alternate" href="12345_small.jpg">
      small, <span property="photo:dimensions">300x200</span>
    </a>

...

Adding Fields: Flickr

RDF: What is it?

RDF: Let's Get Concrete

<http://example.com/alice/posts/42>
    <http://purl.org/dc/elements/1.1/title> "The Trouble with Bob" ;
    <http://purl.org/dc/elements/1.1/creator> "Alice" .

<div about="http://example.com/alice/posts/42">
    <span property="dc:title">The Trouble with Bob</span>
    <span property="dc:creator">Alice</span>
</div>

RDF: Why is Everything a URL?

Sure it's a convenient naming scheme, but is there anything more?

Yes! You can fetch the URL to find out more about the property! 

<rdf:Property rdf:about="http://purl.org/dc/elements/1.1/creator">
    <rdfs:label xml:lang="en-US">Creator</rdfs:label>
    <rdfs:comment xml:lang="en-US">
        An entity primarily responsible for making the resource.
    </rdfs:comment>

    ...

</rdf:Property>

RDF Schema indicates: the name and description of the property, the expected types of the subjects and objects, etc...

RDF: Equivalences between Properties

<div xmlns:photo="http://flickr.com/photo/vocab/">
  ...
  <a rel="photo:alternate" href="..">
      ...

As it turns out, there's already rdf:seeAlso.

So, what could fictitious Flickr do?
Update the definition of photo:alternate at http://flickr.com/photo/vocab/alternate 

<./alternate> owl:equivalentProperty rdf:seeAlso .

 

Vocabularies can Evolve

RDF: Follow Your Nose

 

Given a document, follow your nose to the namespaces, to the individual vocabulary terms, to their descriptions, to their equivalences, and make as much sense of the web data as possible

RDF: Query the Graph

RDF: Query Data with SPARQL

Some vocabularies: Dublin Core

 

http://dublincore.org/documents/dcmi-terms/

Some vocabularies: FOAF

 

http://xmlns.com/foaf/0.1/

Some vocabularies: Creative Commons

 

http://creativecommons.org/ns#

 

ccREL: http://creativecommons.org/ccrel

Status of RDFa

Now is the perfect time to build RDFa into your site

Demo Time



Let's Write some RDFa!

Loosely Coupled Data

Why are there so many "share" links?

Conclusion

Questions?

slide 1/5
* help? contents? restart?