Skip to content

Latest commit

 

History

History
333 lines (241 loc) · 8.23 KB

friends.md

File metadata and controls

333 lines (241 loc) · 8.23 KB
Raw

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

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

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

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

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?

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

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: gerald@vanbeta.com
Web: GeraldBauer.ca

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)

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)?

  • 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>

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!