The Map Is Not The Territory

A blog by Christian Willmes.

RDFa content markup

| categories: webdev, semantic web | View Comments

In this post I document parts of the RDFa markup used on this website. Because I am convinced of Semantic Web technology as the future of the web, I am keen to apply this techniques on my own website. I aimed to apply the W3C recommended RDFa primer best practices techniques. In the following it is described how these best practices are implemented on this site. This post does not aim to teach the concept of RDFa, for this please see the links under Resources, a short overview is given though.

What is RDFa

Resource Description Framework in Attributes (RDFa) is a technique that facilitates adding structured (machine readable) data to HTML using a set of attributes (see Table 1). Sometimes RDFa is also referred to as a CSS for meaning.

attribute description
about a URI or CURIE specifying the resource the metadata is about
content optional attribute that overrides the content of the element when using the property attribute
datatype optional attribute that specifies the datatype of text specified for use with the property attribute
property specifying a property for the content of an element or the partner resource
rel and rev specifying a relationship and reverse-relationship with another resource, respectively
src, href and resource specifying the partner resource
typeof optional attribute that specifies the RDF type(s) of the subject or the partner resource (the resource that the metadata is about)
Table 1: The RDFa attributes. (Source) http://en.wikipedia.org/wiki/RDFa

To be able to provide well defined ("standardized") semantics for your content markup, it is favorable to re-use exisiting vocabularies. This will also increase the interoperability of the data marked up this way. Here you can find a list of officially (W3C) recommended/supported vocabularies for RDFa markup.

Implementation of RDFa within this website

If you want to develop RDFa markup for a website, it is really helpful to use some tools to validate the markup you wrote. A tool which I can recommend is RDFa Developer, it is available as an Add-On for the Firefox web browser. This Add-On provides a window at the bottom of the page displaying warnings and errors for the RDFa markup, much like the famous Firebug Add-On for client side webdevelopment. Additionally it provides a usefull view of the RDF triples modelled in the site and also a SPARQL interface to query that data. The other tool I can recommend, is of course the official W3C RDFa Validator. The validator provides, additionaly to warnings, errors and "informational messages" a statement if the validated document is a valid RDFa resource or not.

The vocabularies used to markup content within the site are defined as XML Namespaces (xmlns) within the <html> tag.

<html  xmlns="http://www.w3.org/1999/xhtml"
xmlns:xhv="http://www.w3.org/1999/xhtml/vocab/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:bibo="http://purl.org/ontology/bibo/"
version="XHTML+RDFa 1.0" xml:lang="en">

Listing 1: Vocabularies included in the <html>-tag.

This part shows, the vocabularies included for RDFa markup on this website. For standard XHTML properties used in property-tags, I assigned a prefix "xhv". This is normaly not necessary, but I find this increases clarity of the semantics, i.e. it clearly defines the vocabulary the property is defined in.

Blog

The RDFa markup of a blog entry is pretty simple. As you can see in the listing, I used just two DCTerms, "title" and "created", to add semantics to blog posts.

<h2 class="blog_post_title" property="dc:title">
<a href="..." rel="bookmark">
RDFa content markup
</a>
</h2>
[...]
<span class="..." property="dc:created">August 01, 2013 at 03:23 </span> | categories:
[...]

Listing 2: RDFa markup for blog posts.

About

For the informal about page, I used the vCard vocabulary, to markup the contact information. See listing 3:

<div xmlns:v="http://www.w3.org/2006/vcard/ns#">    
<div about="http://cwillmes.de/about.html" typeof="v:VCard">
<span property="v:fn">Chrsitian Willmes</span>
<div rel="v:adr">
<div typeof="v:Address v:Home">
<span property="v:street-address">Stammstr. 26</span>,
<span property="v:postal-code">50823</span>,
<span property="v:locality">K&ouml;ln</span>,
<span property="v:country-name">Germany</span>.
</div>
</div>
email:
<a rel="v:email" href="mailto:c.willmes@uni-koeln.de">c.willmes@uni-koeln.de</a>
<span property="v:key" rel="link">(<a href="Christian_Willmes_c.willmes@uni-koeln.de_(0x2FA87ED4)_pub.asc" target="_blank">PGP Public Key</a>)</span>.<br/>
See <span property="v:nickname">@cwillmes</span> Box at the right sidebar for more contact options.
</div>
</div>

Listing 3: RDFa vCard markup.

Curriculum vitae

On the CV page, I only marked up the publications, so far. I will markup the other structured Infromation also, but this is a bit more tricky, because I could not find good vocabularies for this purpose yet. (Please send me recommendations, If you have some.)

Publications

The publication entries of my academic record are marked up using the Bibliographic Ontology (Bibo). This ontology provides an comprehensive vocabulary to describe scientific publications. See listing 4 for an example publication, with RDFa bibo annotations.

<span typeof="bibo:Article">
<span property="bibo:authorList">
<span property="dc:creator">Willmes, C.</span>,
<span property="dc:creator">Brocks, S.</span>,
<span property="dc:creator">Hoffmeister, D.</span>,
<span property="dc:creator">H&uuml;tt, C.</span>,
<span property="dc:creator">K&uuml;rner, D.</span>,
<span property="dc:creator">Volland, K.</span>,
<span property="dc:creator">Bareth, G.</span>
</span>
(<span property="dc:date" datatype="xsd:gYear">2012</span>):
<span property="dc:title">Facilitating integrated spatio-temporal visualization and analysis of heterogeneous archaelogical and palaeonvironmental research data.</span>
<span prperty="bibo:Journal">ISPRS Ann. Photogramm. Remote Sens. Spatial Inf. Sci.</span>
<span property="bibo:Issue">I-2</span>,
<span property="bibo:pages">
<span property="bibo:pageStart">223</span>-
<span property="bibo:pageEnd">228</span>
</span>. DOI:
<span property="bibo:doi">10.5194/isprsannals-I-2-223-2012</span>.
</span>

Listing 4: RDFa markup of bibliographic information.

Conclusion

I am aware, that the RDFa markup I implemented is not perfect. But hey, better doing some steps in the right direction than nothing. I will do follow up posts with extensions and improvements to the RDFa implementation for this site from time to time. I am happy about any feedback regarding the RDFa markup I used and I hope I could provide some helpful things to others who want to implement RDFa on their websites.

Have fun!
Christian



 

comments powered by Disqus

Read and Post Comments

New website

| categories: webdev | View Comments

Its now proven, procrastination is an important tool for me to get things done. In the dawn of an important deadline for a paper abstract, I managed to work a lot on my (completely unrelated from the deadline task) new website, which layed untouched for several month (nearly a year I think)... But Yeah! Its finally done. I got my new website crafted!

Christian is happy to got his new website done

As promised for the last couple of month on this site, I build my new website from scratch. As you know, if you want to build something from scratch, you have first to (re-)invent the universe! If you don't believe me, then you may listen to Carl Sagan?! :) Take this:

Haha! Got it? ;) As you might suspect, I indeed did not (re-)invent the universe, but this new website is old school static HTML only. No more dynamic data base quereies and big fat unsecure and complex CMS frameworks, FTW!

In detail, I use the static website compiler Blogofile which creates static content based on templates marked up using the Mako templating framework. And for the Layout I use Twitter Bootstrap v3, which provides great clean predefined good looking CSS components.


 

comments powered by Disqus

Read and Post Comments

« Previous Page