Microsoft's Internet Explorer browser has no built-in vector graphics machinery required for "loss-free" gradient background themes.

Please upgrade to a better browser such as Firefox, Opera, Safari or others with built-in vector graphics machinery and much more. (Learn more or post questions or comments at the Slide Show (S9) project site. Thanks!)

Adding Semantics to Your Web Site – RDF, RDFa, Microformats – Web 3.0 in Action

Gerald Bauer @ RDF Vancouver/Semantic Web Group, Vancouver, B.C., November 2008

(Source)

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 (Ø) T
Show/hide slide controls (Ø « ») C, Move mouse to bottom right corner

Agenda

Contact Info/Business Card

Example:

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

What?

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>

Gerald Bauer

Internet Professional
Vancouver, B.C.

Web: GeraldBauer.ca
Email: gerald@vanbeta.com

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.

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?

FOAF Tools – FOAF-a-matic, FOAF Explorer

FOAF-a-matic:

Fill out a form to create your FOAF file using FOAF-a-matic

FOAF Explorer:

Browse and explore FOAF data displayed as web pages using FOAF Explorer

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>

Gerald Bauer

Internet Professional
Vancouver, B.C.

Email:
Web: GeraldBauer.ca

Using Microformats and hCard Continued

What’s different?

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

Microformats Tools – hCard-o-matic, Operator

hCard-o-matic:

Fill out a form to create your hCard markup using hCard-o-matic

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

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>

Using RDFa – RDF The Microformats Way

What’s different (vs. Microformats)?

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>

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>

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>

Links – Learn More

That’s it – Thanks

Questions? Comments?

Send them along to the Vancouver Ajax & Web 3.0 Developer Forum/Mailing List. Thanks!