"RDFa - what, why and how?" by Mike Hewett and Shamod Lacoul

What, Why and How
Silicon Valley CodeCamp 2010
October 9, 2010
Mike Hewett (mike@HewettResearch.com)
Shamod Lacoul (shamod@gmail.com)
Members of the League of Extraordinary Modelers (LEM)
Licensed under a Creative Commons Attribution-
Noncommercial-Share Alike 3.0 Unported License

The Speakers
Mike Hewett has 25 years of experience in building AI systems, focusing on constructing knowledge bases and reasoning about knowledge. He is the author of the Algernon rule engine and the Jatha LISP library. Mike has a Masters in AI from Stanford University and a PhD in Computer Science from the University of Texas at Austin.
Shamod Lacoul is a software entrepreneur, developer and consultant. He has been working as a software consultant for 7 years, focusing on back-end and data integration technologies. He is an assistant organizer of the Silicon Valley Semantic Technologies (SVST) Meetup. He has a Masters in Software Engineering and Bachelors in Computer Science from San Jose State University.

Outline
A quick overview of RDFa and a scenario setup
What is RDFa?
Why use RDFa?
How to use RDFa?
How is RDFa related to Semantic Web?
Current websites using RDFa

Overview of RDFa
RDFa adds semantics to web page content.
Semantics == Meaning
However, RDFa can be added to any XML-like
structured content.

What is Semantics?
What does this sentence mean?
“The Bears are in New York”
Bears are migrating to New York state.
Bears are migrating to New York City.
Chicago is playing the Giants in football.
Prices are lower on the NY Stock Exchange.
Is it the title of a book?

Scenario: Lou’s Café hours
Scraping information from web pages.
Can a program find out when Lou’s Café is open on Saturday?

Scenario: Lou’s Café hours
When is Lou’s Café open on Saturday?
The hours are hard to find by eye.
Even harder to find with a program.
But…
The hours could be annotated with RDFa tags.
Programs can easily find the information.
Easier than scraping the web page and guessing.

Scraping information from the web
People often use programs to scrape information from web pages
Web Page
Web Server
Database
Copy
Find
Extract
Use
Program

Scraping information is easier:
RDFa makes it easier to find and retrieve information from web pages
Web Page
Web Server
Database
Copy
Find
Extract
Use
Program

The vision of the Semantic Web
Agents access information in DBs directly.
Web Page
Web Server
RDF
Database
Program
Query
Use

What is RDF?
RDF is a data model where all data consists of 3-tuples of entities, commonly called triples.
<subject> <predicate> <object>
<x:Person-9372> <x:firstName> “Don”
<x:Person-9372> <x:lastName> “Knuth”
<x:Person-9372> <x:friendOf> <x:Person-8614>

Outline
What is RDFa?
Why use RDFa?
How to use RDFa?
Any questions?

What is RDFa?
RDFa defines attributes for words or phrases that should be treated as semantic entities.
<div xmlns:v=“http://rdf.data-vocabulary.org/#”
typeof="v:Person">

Albuquerque
NM

</div>
RDFa is a W3C recommendation

RDFa example – metadata
<div about="/id/rdfa-course">
<h3 property="dc:title">RDFa Course</h3>
<pproperty="dc:description" lang="en">
This course covers the basics of RDFa...

Last modified:

6th Feb 2009

</div>
Borrowed from a talk by JeniTennison at the XML Summer School

RDFa attributes
The attributes map to RDF components
<div about=”rdfa-course">
<h3 property="dc:title">RDFa Course</h3>

RDFa vocabulary
Provides the keywords and the semantics
Often called a microformat
Examples of vocabularies:
DC = Dublin Core
Describes document metadata
dc:title
dc:author
FOAF = Friend of a Friend
foaf:name
foaf:mbox

Other useful vocabularies
hReview(recognized by Google): itemreviewed, rating, reviewer, dtreviewed, description, summary
hCard (Person) (rec. by Google): name, nickname, photo, title, role, url, affiliation, address, …
hCalendar (Event) (rec. by Google): summary, url, location, description, startDate, endDate, duration, eventType, geo, photo
Facebook Share & Yahoo SearchMonkeyRDFa (video) (rec. by Google): image_src, video_src, description, title, video_width, video_height, …

RDFa example – person
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
My name is Bob Smith, but people call me Smithy.
Here is my homepage: <a href="http://www.example.com" rel="v:url">www.example.com</a>.
I live in 
Albuquerque, NM 
and work as an engineer
at ACME Corp.
My friends: <a href="http://darryl-blog.example.com" rel="v:friend">Darryl</a>, <a href="http://edna-blog.example.com" rel="v:friend">Edna</a>
</div>

RDFa example – event
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Event">
<a href="http://www.example.com/events/spinaltap" rel="v:url" property="v:summary">Spinal Tap</a>
<imgsrc="spinal_tap.jpg" rel="v:photo" />
After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show. 
When: Oct 15, 7:00PM—
9:00PM
Where: 
Warfield Theatre,


982 Market St,
San Francisco,
CA 
…
Category: Concert </div>

Alternatives for adding Semantics
RDFa – W3C standard + validator
Microformat syntax
Microdata syntax
Proprietary tags and syntax
Facebook: Open Graph

Microformat example – event
<div class="location vcard">
Warfield Theatre,

982 Market St ,
San Francisco,
CA 

</div>

Microdata example - event

Warfield Theatre 
982 Market St, San Francisco, CA

Outline
A quick overview of RDFaand a scenario setup
What is RDFa?
Why use RDFa?
How to use RDFa?
Any questions?

Why use RDFa?
Embed semantics in XHTML
Re-use attributes
The HTML and the RDF can exist in the same document
For Search Engine Optimization (SEO)

Open Graph
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og=http://opengraphprotocol.org/schema/
xmlns:fb="http://www.facebook.com/2008/fbml">
<head> <title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url"
content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image"
content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
... </head> ... </html>

How
Better understanding of the content
Better ad placement
To build Rich Snippets:
Uses RDFa

Outline
What is RDFa?
Why use RDFa?
How to use RDFa?
Any questions?

A sample webpage without RDFa

A sample webpage with RDFa

Can you tell the difference?
NO, it’s tough with your naked eye.

Reasons:
RDFaattributes are meant for machines.
RDFaattributes are embedded inside HTML tags
invisible to the user.

One quick way to find RDFa tags is by using a tool called RDFaDev
http://rdfadev.sourceforge.net/
RDFaDev is a Firefox plugin
enables you to examine the RDFa markup
allows you to query the data on the page using SPARQL
detects common pitfalls in the use of RDFa

HTML without RDFa
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Silicon Valley Code Camp</title>
</head>
<body>

Weekend at the Silicon Valley Code Camp 2010 
Starts on: 10-09-2010 
Ends on: 10-10-2010 
See <a href="http://siliconvalley-codecamp.com/">Silicon Valley Code Camp 2010</a>
This event is located at Foothills College 

</body>
</html>

HTML with RDFa
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns:cal="http://www.w3.org/2002/12/cal/icaltzd#"
xmlns:xs="http://www.w3.org/2001/XMLSchema#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<pabout="#event1" typeof="cal:Vevent">
<bproperty="cal:summary">Weekend at the Silicon Valley Code Camp 2010
Starts on: 10-09-2010
Ends on: 10-10-2010
See
<a rel="cal:url" href="http://siliconvalley-codecamp.com/">
Silicon Valley Code Camp 2010</a> 
This event is located at Foothills College

</body>
</html>

http://check.rdfa.info/
Use
to validate RDFa

Result from
http://check.rdfa.info/
NOTE: It also tells you how Facebook, Google parses your RDFa

GRDDL = Gleaning Resource Descriptions from Dialects of Languages
a technique of extracting RDF data from
XML documents (in particular XHTML pages).
Source: http://www.w3.org/TR/2006/WD-grddl-primer-20061002/

An example of RDFawith GRDDL profile
<?xml version="1.0" encoding="UTF-8"?>
xml:base="http://www.dc4plus.com/references/rdf_sem.html"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:foaf="http://xmlns.com/foaf/0.1/" >
<head profile="http://ns.inria.fr/grddl/rdfa/">
<title>Biblio description</title> </head>
<body> <h1>Biblio description</h1>
<dl about="http://www.w3.org/TR/2004/REC-rdf-mt-20040210/">
<dt>Title</dt>
<ddproperty="dc:title">RDF Semantics - W3C Recommendation 10 February 2004</dd>
<dt>Author</dt>
<ddrel="dc:creator" href="#a1">
 <link rel="rdf:type" href="[foaf:Person]"/>
Patrick Hayes see
<a rel="foaf:homepage" href="http://www.ihmc.us/users/user.php?UserID=42">
homepage</a> 
</dd>
</dl>
</body>
</html>
Source: http://www-sop.inria.fr/acacia/personnel/Fabien.Gandon/tmp/grddl/rdfaprimer/PrimerRDFaSection.html

An output of GRDDL service is RDF

A visual graph of an RDF
Source: http://www-sop.inria.fr/acacia/personnel/Fabien.Gandon/tmp/grddl/rdfaprimer/PrimerRDFaSection.html

Outline
What is RDFa?
Why use RDFa?
How to use RDFa?
Any questions?

How is RDFarelated to
the Semantic Web
as a whole?

Linked Data
Source: http://www.flickr.com/photos/ldodds/4043803502/

Semantic Web stack
Source: http://www.semanticfocus.com/blog/entry/title/introduction-to-the-semantic-web-vision-and-technologies-part-2-foundations/

Web Ontology Language (OWL)
- additional vocabulary along with a formal semantics
- an extension to RDF and RDF-Schema (RDF-S)

Triple Store (A database for RDF)
Source: http://test.ical.ly/tags/phpunit/

SPARQL – a query language for RDF
- a glue to connect, query and reconstruct
disparate sources of RDF data
- similar to SQL for RDF

Outline
What is RDFa?
Why use RDFa?
How to use RDFa?
Any questions?

Examples of websites
currently using
RDFa

Summary
RDFa provides semantic tags that are embedded in web pages
RDFa helps software to understand the content of web pages
Useful RDFa tools are RDFaDev, checkrdfa.info, GRDDL Service, HTML editor, etc.
RDFa is a stepping stone to full Semantic Web capability
BBC, BestBuy, O’Reilly are the early-adopters.

Links to related information
http://www.w3.org/TR/rdfa-core/
http://en.wikipedia.org/wiki/Rdfa
http://www.google.com/webmasters/tools/richsnippets
http://developers.facebook.com/docs/opengraph
http://semantic-drupal.com/
http://xmlsummerschool.com/curriculum-2010/semantic-technologies-2010/
http://www.jenitennison.com/talks/xmlss2010/RDFa.pdf
http://opengraphprotocol.org/

"RDFa - what, why and how?" by Mike Hewett and Shamod Lacoul

by Shamod Lacoul

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 3

Statistics