As part of learning HTML5 and RDFa I put together a Simple HTML5 RDFa Example, using a photo Irene took of Minoan Figurines during a trip to Crete for the main content.
Using RDFa I wanted to generate RDF statements about:
Each of these five things requires an URI. The example automatically has one ( http://www.3kbo.com/examples/rdfa/simple.html ) while Irene and myself are identified by our FOAF files, Irene and Richard.
The remaining two URIs are created by adding the HTML bookmarks “crete” and “minoan-figurines” to the example, generating the URIs:
To support both HTML5 and RDFa I added the following html5 doctype and rdfa version declaration.
<!DOCTYPE html>
<html version="HTML+RDFa 1.1" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:foaf="http://xmlns.com/foaf/0.1/">
The HTML5 new elements header, hgroup, nav, section, article and footer are used in the example, primarily for constructing a document structure that will be developed further in the future.
The link RDF extracted by pyRDFa uses the RDFa Distiller and Parser to extract the RDF statements. If Tabulator is installed clicking the link provides the following view of the generated RDF.
The statements about A Simple HTML5 RDFa Example are all made in the document meta data, using the properties dc:date, dc:created, dc:creator, dc:title and dc:subject from the Dublin Core Metadata Element Set. The metadata in the head of the document refers to the example itself.
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta property="dc:date dc:created" content="2010-11-11T13:00:00" />
<meta rel="dc:creator" href="http://www.3kbo.com/people/richard.hancock/foaf.rdf#i" />
<meta rel="dc:subject" href="http://dbpedia.org/resource/Semantic_Web" />
<meta rel="dc:subject" href="http://dbpedia.org/resource/RDFa" />
<meta rel="dc:subject" href="http://dbpedia.org/resource/HTML5" />
<meta rel="dc:subject" href="http://dbpedia.org/resource/SPARQL" />
<meta rel="dc:subject" href="http://dbpedia.org/resource/Crete" />
<meta rel="dc:subject" href="http://dbpedia.org/resource/Minoan_civilization" />
<title property="dc:title">A Simple HTML5 RDFa Example</title>
...
</head>
In the code below the RDFa about attribute, specified as about=”#crete” and about=”#minoan-figurines”, sets the current subject for the article on Crete and the photo of the Minoan Figurines respectively. The appropriate creator and subject is also assigned to each subject.
<a name="crete" />
<div about="#crete" rel="dc:creator" href="http://www.3kbo.com/people/richard.hancock/foaf.rdf#i">
<h2 about="#crete" rel="dc:subject" href="http://dbpedia.org/resource/Crete" property="dc:title">Crete 2010</h2>
<a name="minoan-figurines" />
<div class="imgbox" about="#minoan-figurines"><img src="images/minoan-figurines.jpg" alt="figurines" />
<div><span property="dc:title" rel="dc:subject" href="http://dbpedia.org/resource/Minoan_civilization">Minoan Figurines, Crete</span>
photo by <span rel="dc:creator" href="http://www.3kbo.com/people/irene.bell-hancock/foaf.rdf#me">Irene</span>.</div>
</div>
</div>
For Richard and Irene the typeof attribute is set to foaf:Person, the about attribute specifies the appropriate FOAF file and foaf:knows is used to specify that Richard knows Irene.
<div class="socialnet" about="http://www.3kbo.com/people/richard.hancock/foaf.rdf#i" typeof="foaf:Person" property="foaf:name" content="Richard Hancock">
<p><span property="foaf:firstname">Richard</span> knows</p>
<ul rel="foaf:knows">
<li typeof="foaf:Person" about="http://www.3kbo.com/people/irene.bell-hancock/foaf.rdf#me">
<a property="foaf:name" rel="foaf:homepage" href="http://picasaweb.google.com/goannagraphics">Irene</a></li>
</ul>
</div>
One of the benefits of using RDF is that it easy to combine information. A small example of how easily RDF statements from different sources can be combined is provided using Tabulator. If the link RDF extracted by pyRDFa is opened in Tabulator followed by the link to Irenes FOAF file then the is creator of statement is included in the second Tabulator view, even though it is not present in the original FOAF file.
Because Irene is uniquely identified Tabulator can safely combine the information from the two datasources.
RDF extracted from the example can be queried using SPARQL. The following query identifying the content authors can be pasted into the sparql.org query form. The FROM key word specifies that the query will use the RDF extracted from the example, yielding the following results.
PREFIX dc: <http://purl.org/dc/elements/1.1/>
PREFIX foaf: <http://xmlns.com/foaf/0.1/>
select ?Content ?Author
FROM <http://www.w3.org/2007/08/pyRdfa/extract?uri=http://www.3kbo.com/examples/rdfa/simple.html>
where { ?s dc:creator ?o .
?s dc:title ?Content .
?o foaf:name ?Author .
}
order by ?Content
-----------------------------------------------------------
| Content | Author |
===========================================================
| "A Simple HTML5 RDFa Example"@en | "Richard Hancock"@en |
| "Crete 2010"@en | "Richard Hancock"@en |
| "Minonan Figurines, Crete"@en | "Irene"@en |
-----------------------------------------------------------
The example contains the SPARQL Query for Content by Author embedded as the link
This URL encodes the SPARQL Query that is sent to the www.sparql.org SPARQL end point.
When the link is selected the SPARQL Query is run against the RDF extracted from the example and returned directly to the browser.
Both HTML5 and RDFa are addictive. For HTML5 there are lots of new features to explore and for RDFa more meta data to connect up.
