title: Adding Semantics to Your Web Site - RDF, RDFa, Microformats - Web 3.0 in Action
gradient-colors: green lime

h1. Adding Semantics to Your Web Site - RDF, RDFa, Microformats - Web 3.0 in Action 

"Gerald Bauer":http://geraldbauer.ca @ "RDF Vancouver/Semantic Web Group":http://rdfvancouver.org,
Vancouver, B.C., November 2008

<hr>
("Source":http://slideshow.rubyforge.org/svn/samples/friends.textile)

*Slide Show Keyboard Controls (Help)*

| Action | Key |
| Go to next slide | Space Bar, Right Arrow, Down Arrow, Page Down |
| Go to previous slide | Left Arrow, Up Arrow, Page Up |
| Toggle between slideshow and outline view (&#216;) | T |
| Show/hide slide controls (&#216; &laquo; &raquo;) | C, Move mouse to bottom right corner |


h1. Agenda

* Part I: Contact Info/Business Card
** Plain Old "Classic" Web Markup
** Using RDF
** Using Microformats
** Using RDFa - RDF The Microformats Way, Sort Of

* Part II: Adding Friends
** Using RDF
** Using Microformats


h1. Contact Info/Business Card

Example:

{{{
Gerald Bauer
Internet Professional
Vancouver, B.C.
Web: GeraldBauer.ca
Email: gerald@vanbeta.com
}}}

What?
* Name
* Title
* City
* Web Site
* Email

h1. Plain Old "Classic" Web Markup

Web markup tags such as @h2@ (heading2) and @p@ (paragraph) and @br@ (break)
are kind of meaningless (without semantics).

{{{
<h2>Gerald Bauer</h2>

<p>Internet Professional <br>
Vancouver, B.C.<br>
<br>
<em>Web: GeraldBauer.ca</em> <br>
<em>Email: gerald@vanbeta.com</em>
</p>
}}}

<div style='background: white; color: black; border: 1px solid black; padding: 2em;'>
<h2>Gerald Bauer</h2>
<p>Internet Professional <br>
Vancouver, B.C. <br><br>
<em>Web: GeraldBauer.ca</em> <br>
<em>Email: gerald@vanbeta.com</em> 
</p>
</div>

h1. Semantic Web - Web 3.0 

Semantic Web - add semantics to your web page by marking up events, people, locations, resumes, listings, feeds and much more.

How? The "official" semantic web led by Tim Berners-Lee (the inventor of the "classic" web)
proposes new extension to web markup such as Resource Description Framework(RDF) or eXtensible Markup Language (XML)

The "pragmatic" semantic web led by the Microformats initiative proposes - let's just use conventions and best practices for today's web markup and today's browsers.


h1. Using RDF (Resouce Description Framework) plus Friend of a Friend (FOAF) Vocabulary

@gerald.rdf@:

{{{
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:foaf="http://xmlns.com/foaf/0.1/">
  <foaf:Person>
    <foaf:name>Gerald Bauer</foaf:name>
    <foaf:title>Internet Professional</foaf:title>
    <foaf:city>Vancouver, B.C.</foaf:city>
    <foaf:weblog rdf:resource="http://geraldbauer.ca" />
    <foaf:mbox rdf:resource="mailto:gerald@vanbeta.com" />
  </foaf:Person>
</rdf:RDF>
}}}

Add to your web page header:

{{{
<link rel="meta" type="application/rdf+xml" title="FOAF" href="gerald.rdf" />
}}}

What's different?

* Machine-Readable Only
* Requires Namespaces
* Standalone Document (Web Feed-like)



h1. FOAF Tools - FOAF-a-matic, FOAF Explorer

FOAF-a-matic:

Fill out a form to create your FOAF file using "FOAF-a-matic":http://www.ldodds.com/foaf/foaf-a-matic.html

FOAF Explorer:

Browse and explore FOAF data displayed as web pages using "FOAF Explorer":http://xml.mfd-consult.dk/foaf/explorer



h1. Using Microformats and hCard 

Plain Old "Classic" Web Markup:

{{{
<h2>Gerald Bauer</h2>

<p>Internet Professional <br>
Vancouver, B.C.<br>
<br>
<em>Web: GeraldBauer.ca</em> <br>
<em>Email: gerald@vanbeta.com</em>
</p>
}}}

Adding Semantics Using Microformats:

{{{
<div class="vcard">
 <h2 class="fn">Gerald Bauer</h2>
 <p>
 <span class="title">Internet Professional</span><br>
 <span class="adr">
   <span class="locality">Vancouver</span>,  
   <abbr class="region" title="British Columbia">B.C.</abbr>
 </span><br>
 <br>
 Web: <a class="url" href="http://geralbauer.ca">GeraldBauer.ca</a><br>
 Email: <span class="email">gerald@vanbeta.com</span>
 </p>
</div>
}}}

<div class="vcard" style='background: white; color: black; border: 1px solid black; padding: 2em;'>
 <h2 class="fn">Gerald Bauer</h2>
 <p>
 <span class="title">Internet Professional</span><br>
 <span class="adr">
   <span class="locality">Vancouver</span>,  
   <abbr class="region" title="British Columbia">B.C.</abbr>
 </span><br>
 <br>
 <em>Email: <span class="email">gerald@vanbeta.com</span></em><br>
 <em>Web: <span class="url">GeraldBauer.ca</span></em>
 </p>
</div> 

h1. Using Microformats and hCard Continued

What's different?

* Human-Readable First, Machine-Readable Second
* No Namespaces Required
* Semantics Added to Web Page
* (Builts on vCard Internet Standard) 

vs. Using RDF (Resouce Description Framework) plus Friend of a Friend (FOAF) Vocabulary

* Machine-Readable Only
* Requires Namespaces
* Standalone Document (Web Feed-like)

h1. Microformats Tools - hCard-o-matic, Operator

hCard-o-matic:

Fill out a form to create your hCard markup using "hCard-o-matic":http://microformats.org/code/hcard/creator

Operator:

Free, open source browser addon lets you add hCards to Yahoo address book or
export hCards as vCards and much more - "Install Operator Firefox Browser Addon":https://addons.mozilla.org/en-US/firefox/addon/4106  

h1. Using RDFa - RDF The Microformats Way, Sort Of

Classic RDF - @gerald.rdf@:

{{{
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:foaf="http://xmlns.com/foaf/0.1/">
  <foaf:Person>
    <foaf:name>Gerald Bauer</foaf:name>
    <foaf:title>Internet Professional</foaf:title>
    <foaf:city>Vancouver, B.C.</foaf:city>
    <foaf:weblog rdf:resource="http://geraldbauer.ca" />
    <foaf:mbox rdf:resource="mailto:gerald@vanbeta.com" />
  </foaf:Person>
</rdf:RDF>
}}}

RDFa Version:

{{{
<html xmlns:foaf="http://xmlns.com/foaf/0.1/">
...
<div typeof="foaf:Person">
 <h2 property="foaf:name">Gerald Bauer</h1>
 <p>
 <span property="foaf:title">Internet Professional</span><br>
 <span property="foaf:city">Vancouver, B.C.</span><br>
 <br>
 Email: <span property="foaf:mbox">gerald@vanbeta.com</span><br> 
 Web: <a rel="foaf:weblog" href="http://geraldbauer.ca">GeraldBauer.ca</a>
 </p>
</div>
}}}


h1. Using RDFa - RDF The Microformats Way

What's different (vs. Microformats)?

* Namespace required
* New web markup extensions required (@typeof@, @property@)

RDFa Version:

{{{
<html xmlns:foaf="http://xmlns.com/foaf/0.1/">
...
<div typeof="foaf:Person">
 <h2 property="foaf:name">Gerald Bauer</h1>
 <p>
 <span property="foaf:title">Internet Professional</span><br>
 <span property="foaf:city">Vancouver, B.C.</span><br>
 <br>
 Email: <span property="foaf:mbox">gerald@vanbeta.com</span><br> 
 Web: <a rel="foaf:weblog" href="http://geraldbauer.ca">GeraldBauer.ca</a><br>
 </p>
</div>
}}}

Microformats Version:

{{{
<div class="vcard">
 <h2 class="fn">Gerald Bauer</h2>
 <p>
 <span class="title">Internet Professional</span><br>
 <span class="adr">
   <span class="locality">Vancouver</span>,  
   <abbr class="region" title="British Columbia">B.C.</abbr>
 </span><br>
 <br>
 Web: <a class="url" href="http://geralbauer.ca">GeraldBauer.ca</a><br>
 Email: <span class="email">gerald@vanbeta.com</span>
 </p>
</div>
}}}


h1. Using RDF (Resouce Description Framework) plus Friend of a Friend (FOAF) Vocabulary

Adding Friends

@jim.rdf@:

{{{
<foaf:Person>
  <foaf:name>Jim Pick</foaf:name>
  <foaf:title>Freelance Software Developer</foaf:title>
  <foaf:mbox rdf:resource="mailto:jim@jimpick.com" />
</foaf:Person>
}}}

Use unique identifier (such as @mbox@, @mbox_sha1sum@, @weblog@)
plus @seeAlso@ with link to FOAF file.

@gerald.rdf@:

{{{
<foaf:Person>
  <foaf:name>Gerald Bauer</foaf:name>
  <foaf:knows>
    <foaf:Person>
      <foaf:mbox rdf:resource="mailto:jim@jimpick.com" />
      <rdfs:seeAlso rdf:resource="http://jimpick.com/jim.rdf" />
    </foaf:Person>
  </foaf:knows>
</foaf:Person>
</rdf:RDF>
}}}



h1. Using Microformats and XFN (XHTML Friends Network)

Just add a link with a relationship (@rel@) value of @contact@ from your site to your friends site.
Sample:

{{{
<a href="http://jimpick.com" rel="contact">Jim Pick</a>
}}}


h1. Links - Learn More

* FOAF (Friend of a Friend) - "foaf-project.org":http://foaf-project.org
* Microformats - "microformats.org":http://microformats.org
* RDF Vancouver - "rdfvancouver.org":http://rdfvancouver.org

h1. That's it - Thanks

Questions? Comments?

Send them along to the "Vancouver Ajax & Web 3.0 Developer Forum/Mailing List":http://forum.vanajax.com.
Thanks!