Jo has lots of friends, family and work colleagues with which she would like to stay
in touch during her busy schedule. She would like to set up a home-page for herself,
where people who know her can find useful contact information, such as her phone
number or work email.
2.1 Setting Up the Web Page
Jo's first stop is to create a page that contains information about her that can
be read by anyone using a web browser. She begins with some details for people
who might be trying to contact her at work:
<html>
<head>
<title>Jo Lamda's Home Page</title>
</head>
<body>
<p>
Hello. This is Jo Lamda's home page.
<h2>Work</h2>
If you want to contact me at work, you can
either <a href="mailto:jo.lambda@example.org">email
me</a>, or call +1 777 888 9999.
</p>
</body>
</html>
Jo can now pass on the address of her home-page to her friends, which is
http://jo-lamda.blogspot.com/.
2.2 Adding Name and Contact Metadata
One of Jo's friends, Terri, tells Jo that the address book software she uses can be
automatically kept up-to-date with Jo's details. All Jo needs to do is to add some
tags to her home page to help the system understand her data. The tags that Terri's
address book understands come from a special list-often called a vocabulary-specifically
for describing relationships between people. The particular vocabulary is called
'Friend-of-a-friend', or FoaF [FOAF].
The first thing that Jo needs to do is add an identifier to the top of her document
that will make the FoaF vocabulary available to the rest of her home-page:
<html
xmlns:foaf="http://xmlns.com/foaf/0.1/"
>
Jo then looks through the FoaF vocabulary, and sees that the pieces of information
that she has in her page—name, phone number and email address—all have
names within FoaF. She therefore adds those names to her document, using the following
approach:
if the value we want to use for a property is in the href attribute
of an <a> element, then the rel attribute
can be added to the element, set to contain the name of the property;
if the value to be used for a property that we want to add doesn't have
an element to contain it, then one must be added;
the name of the property used to describe the contents of an element
is placed in an attribute called property.
Let's look at each of those rules.
2.2.1 Using URLs as Property Values
Jo has provided a link in her home-page to her email address, which is
jo.lambda@example.org:
.
.
.
If you want to contact me at work, you can
either <a href="mailto:jo.lambda@example.org">email
.
.
.
However, to ensure that Terri's address book software understands this, Jo
can use the FoaF mailbox property:
.
.
.
If you want to contact me at work, you can
either <a rel="foaf:mbox" href="mailto:jo.lambda@example.org">email
.
.
.
2.2.2 Using Text As Property Values
In addition to her email address, Jo also wants to add her name and phone number.
Currently the values that she would like to use for these properties are not
separated from the other text items so, as per rule 2, Jo adds some simple wrapper
elements:
<p>
Hello. This is <span>Jo Lamda</span>'s home page.
<h2>Work</h2>
If you want to contact me at work, you can
either <a rel="foaf:mbox" href="mailto:jo.lambda@example.org">email
me</a>, or call <span>+1 777 888 9999</span>.
</p>
Now that the text is inside span elements it is easy to add the FoaF
properties for name and phone number, using the RDF/A attribute property:
<p>
Hello. This is <span property="foaf:name">Jo Lamda</span>'s home page.
<h2>Work</h2>
If you want to contact me at work, you can
either <a rel="foaf:mbox" href="mailto:jo.lambda@example.org">email
me</a>, or call <span property="foaf:phone">+1 777 888 9999</span>.
</p>
2.2.3 Complete Mark-up
The completed document looks like this:
<html>
<head>
<title>Jo Lamda's Home Page</title>
</head>
<body>
<p>
Hello. This is <span property="foaf:name">Jo Lamda</span>'s
home page.
<h2>Work</h2>
If you want to contact me at work, you can
either <a rel="foaf:mbox" href="mailto:jo.lambda@example.org">email
me</a>, or call <span property="foaf:phone">+1 777 888 9999</span>.
</p>
</body>
</html>
Now all Terri needs to do is to provide the internet address for Jo's home page to her contact
software, and it will be able to extract the following information about Jo:
foaf:name = "Jo Lamda"
foaf:mbox = "mailto:jo.lambda@example.org"
foaf:phone = "+1 777 888 9999"
foaf:homepage = "http://jo-lamda.blogspot.com/"
Terri's software gets the final piece of data 'for free', since that was how Terri made the software aware
of Jo's data in the first place. And from now on, synchronisation of Jo's data to Terri's address book will
be automatic.
Emboldened by how easy it was to keep her friend Terri up-to-date with her information, Jo decides to
encourage the same approach amongst her work colleagues. Jo is part of the widget development department
at her company, and is currently working on a project to make the widgets shinier. She decides she wants
this information to also be in a form that can be automatically kept up-to-date.
2.3 Adding A Departmental List
Jo's company intranet runs a Wiki, so it is quite straightforward to create a page for the department
in which she works. On this page she wants, amongst other things, to have a list of the deparment's
members. The page is http://intranet/WidgetDevelopmentDepartment.
The first step is to indicate in the header of the document that we are dealing with a FoaF group:
<html
xmlns:foaf="http://xmlns.com/foaf/0.1/"
>
<head>
<title>Widget Development Department</title>
<link rel="rdf:type" href="[foaf:Group]" />
</head>
The title of the group is also set:
<body>
<p>
Hello. Welcome to the
<span property="foaf:name">Widget Development Department.</span>
</p>
We have now established a foaf:group with the foaf:name of "Widget Development
Department". The next step is to list each member of the group. The best way to do this is to add
a link to a member's details, since then anyone synchronising their address
book with the departmental list will also remain synchronised with the contact details of each
member, just as Terri is synchronised with Jo's information:
<p>
<h2>Departmental Members</h2>
<ul>
<li>
<a rel="foaf:member" href="http://jo-lamda.blogspot.com/">Jo Lamda</a>
</li>
Of course, not everyone will be as up-to-the-minute as Jo, with her home-page doubling up as
an automatic source of FoaF information; so for people without available contact information,
details can still be added inline:
<li id="andrew" about="#andrew">
<link rel="rdf:type" href="[foaf:member]" />
<span property="foaf:firstname">Andrew</span>
<span property="foaf:surname">Smith</span> can be contacted on
<span property="foaf:phone">+1 777 888 9998</span>
</li>
</ul>
</p>
</body>
</html>
Note that if the list item (li) does not have an about attribute, then the
foaf:surname, foaf:firstname and foaf:phone properties would apply to the
foaf:group and not to the individual member of the group. Also, the type of the entry needs
to be set to foaf:member.