WebOrganics - Taggings

Posted by Martin, about 1,156 days ago.

hFoaf (Hypertext Friend of a Friend) has recently been updated to version 0.3, this one has been an important update because basically the XSLT needed a lot of tidying, refining, which also gave me an opportunity to add a few more actions such as being able to extract things that a user has made or authored, and a more complete expansion of XFN rel="me".

What may be a good idea now would be to give you some clues on how to build hFoaf in a quick and dirty howto, but first... hFoaf is not a microformat or a proposed one, although it does rely heavily on microformats to determine the output of a FOAF RDF document.

The first step is to create a hcard, then add an id="" to the hcard and a class="url" with the XFN relationship rel="me"

Example:

<div class="vcard" id="weborganics">
<p class="fn n">
<span class="given-name">Martin</span>
<span class="family-name">McEvoy</span>
</p>
<p><img alt="weborganics" src="http://weborganics.co.uk/images/me.jpg" class="photo"/></p>
<p>Contact: <a class="email" href="mailto:weborganics@googlemail.com"
id="sha1:3cc1a719a5023e9087ced9c74610b66cfbb58d54">weborganics@googlemail.com</a></p>
<p>Web: <a rel="me" class="url" href="http://weborganics.co.uk/">WebOrganics</a></p>
<div class="geo">
<p>Location: <abbr title="53.7552" class="latitude">N 53.7552</abbr>,
<abbr title="-2.3675" class="longitude">W -2.3675</abbr><p>
</div>
</div>

hCard classes and how they map to FOAF are as follows...

"vcard" => foaf:Person
"fn" => foaf:name
"given-name" => foaf:givenname
"family-name" => foaf:family_name
"email" => foaf:email
"url" => foaf:homepage
"url org" => foaf:workplaceHomepage
"photo" => foaf:img

The geo component of hcard maps to foaf:based_near and defined using the WGS84 Geo Positioning RDF vocabulary...

"geo" => geo:Point
"latitude" => geo:lat
"longitude" => geo:long

Lastly The value of foaf:mbox_sha1sum uses the id="" of class email prefixed with "sha1:"

XFN relationship values are also expanded and added to your FOAF output. rel="me" values that are links to popular social networking sites are mapped to foaf:holdsAccount, although not all rel me links are added to the output, a list of supported sites are as follows...

twitter
flickr
digg
ma.gnolia
last.fm
delicious
pownce
youtube

Example:

<a rel="me" href="http://delicious.com/weborganics">delicious</a>

All XFN relationships are defined as foaf:knows, foaf:Person, foaf:name and foaf:weblog along with its XFN value eg: xfn:met.

Example:

<a rel="friend met" href="http://www.djkippax.com/" title="James Kippax">James Kippax</a>

Interests and things that have been made or authored by a user are simply defined as foaf:interest maps to hAtom rel="bookmark".

And thats it, easy eh? There is a Demo of how to use hFoaf With GRDDL along with some copy and paste code and some example output available at hFoaf Demo and also a webservice available at TransFormr that extracts a FOAF document

Tags: hFoaf microformats FOAF RDF

Comments: 0

Extending hCard using RDFa

Posted by Martin, about 1,408 days ago.

Mark Birbeck the Designer of RDFa has recently posted a couple of really good articles recently one about the first steps in adding Foaf to RDFa and a second one about using RDFa and Microformats. Both these articles has inspired me to write a little introduction about how to use the hcard microformat and extend it using RDFa.

I am going to mark up this example of a hCard as RDFa:

<div class="vcard" id="weborganics">
<p><span class="fn">Martin McEvoy</span></p>
<p><img alt="weborganics" src="http://weborganics.co.uk/images/me.jpg" class="photo"></p>
<p>Contact: <a title="Email" class="email" href="mailto:info@weborganics.co.uk">Email</a>
Web: <a rel="me" class="url" href="http://weborganics.co.uk/index.xhtml">WebOrganics</a></p>
<div class="geo">
        <abbr title="53.7552" class="latitude">N 53.7552</abbr>,
        <abbr title="-2.3675" class="longitude">W -2.3675</abbr>
</div>
</div>

I have included the geo part of hcard because its useful for people, clients, or customers to know where you are yes?

First add the RDFa document type to your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

So far so good your page is now RDFa and you are ready to add some namespaces, a namespace is just a place where a set of names and definitions is stored.

I am going to use two namespaces in this example:

1. Foaf, xmlns:foaf="http://xmlns.com/foaf/0.1/"
Foaf Is primaraly used to define People, FOAF documents are machine-readable home pages.
2. Geo, xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
Geo Is the RDF equivalent of the World Geodetic System or WGS84 and is used to represent Latitude/Longitude information about the location of things.

There are two ways to add a namespace in RDFa one is In the <html> tag of your page or another way is in the page using say a <div> or a <span> I am going to add the namespace to the hcard markup itself:

<div class="vcard" id="weborganics"
                xmlns:foaf="http://xmlns.com/foaf/0.1/" 
                typeof="foaf:Person" 
                about="#weborganics">

@typeof is similar to a html <div> it describes a block of some thing, in this case Its a block of foaf:Person. @about means exactly as it says what this thing is about in this case Its about the foaf:Person weborganics.

Lets add a Name to this person:

<p><span property="foaf:name" class="fn">Martin McEvoy</span></p>

Easy eh?, Properties are use to add information about the subject, in this case a person, the contents are usually just text.

Next you may want to add your picture:

<p rel="foaf:img">
<img alt="weborganics" src="http://weborganics.co.uk/images/me.jpg" class="photo"/>
</p>

@rel is used in the same way as a html rel to describe the relationships between things. The above example has a relationship of a foaf:img of the foaf:Person. In RDFa you can use @rel anywhere in your page not just in links, you may also want to add your email address and homepage url in the same way:

<p>Contact: <a rel="foaf:mbox" title="Email" class="email" href="mailto:info@weborganics.co.uk">Email</a>
Web: <a rel="foaf:weblog me" class="url" href="http://weborganics.co.uk/index.xhtml">WebOrganics</a></p>

You can leave it there if you wanted which is great! but I am going to take this a little further and demonstrate how you can mark up the Geo bit of a hcard. All in one go this time using the same techniques as demonstrated above:

<div class="geo" id="weblog" rel="foaf:based_near"
        xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
        <span typeof="geo:Point" about="#weblog">
                <abbr property="geo:lat" content="53.7552" title="53.7552" class="latitude">N 53.7552</abbr>, 
                <abbr property="geo:long" content="-2.3675" title="-2.3675" class="longitude">W -2.3675</abbr>
        </span>
</div>

There Is one thing extra I have added I have used @content this works in the same way as the @title attribute in the abbr design pattern, Its used to carry machine readable data without it interfering with the human content, If you think about that from an accessible point of view its actually better than the current abbr design pattern.

So there you have it a hCard marked up as RDFa in a few easy steps. I have created two examples to accompany this mini how-to. which you can simply just copy and paste with your own details.

A Page marked up in just hcard
A Page marked up as a hCard+RDFa
The RDF output of hCard+RDFa

Microformats and RDFa work pretty well together I think, It adds Scope when previously there wasn't any, Microformats also make excellent building blocks for RDFa they give you hints on where everything should go. Thanks.

Tags: rdfa microformats FOAF RDF

Comments: 0

The Web, Naturally!

WebOrganics » Taggings » FOAF