The document discusses RDFa (Resource Description Framework in Attributes), which allows adding semantic metadata to web pages. It provides an overview of RDFa and examples of using RDFa to annotate events, people, and other entities on web pages in order to make the information machine-readable. The examples demonstrate how RDFa can be used to embed semantics in HTML and reuse attributes, allowing the HTML and RDF data to coexist in the same document.

1. 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

2. 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.

4. What is RDFa?

5. Why use RDFa?

6. How to use RDFa?

7. How is RDFa related to Semantic Web?

9. 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?

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

11. 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.

12. 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

13. 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

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

15. 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>

17. What is RDFa?

18. Why use RDFa?

19. How to use RDFa?

20. How is RDFa related to Semantic Web?

22. 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... </p> Last modified: <span property="dc:modified" datatype="xsd:date” content="2009-02-06"> 6th Feb 2009 </span> </div> Borrowed from a talk by JeniTennison at the XML Summer School

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

24. 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

25. 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, …

26. RDFa example – person <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> My name is <span property="v:name">Bob Smith</span>, but people call me <span property="v:nickname">Smithy</span>. Here is my homepage: <a href="http://www.example.com" rel="v:url">www.example.com</a>. I live in <span rel="v:address"> <span typeof="v:Address"> <span property="v:locality">Albuquerque</span>, <span property="v:region">NM</span> </span> </span> and work as an <span property="v:title">engineer</span> at <span property="v:affiliation">ACME Corp</span>. 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>

27. 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" /> <span property="v:description">After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show. </span> When: <span property="v:startDate" content="2009-10-15T19:00-08:00">Oct 15, 7:00PM</span>— <span property="v:endDate" content="2009-10-15T21:00-08:00">9:00PM</span> Where: <span rel="v:location"> <span typeof="v:Organization"> <span property="v:name">Warfield Theatre</span>, <span rel="v:address"> <span typeof="v:Address"> <span property="v:street-address">982 Market St</span>, <span property="v:locality">San Francisco</span>, <span property="v:region">CA</span> </span> </span> … Category: <span property="v:eventType">Concert</span> </div>

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

29. Microformat example – event <div class="location vcard"> <span class="fn org">Warfield Theatre</span>, <span class="adr"> <span class="street-address">982 Market St </span>, <span class="locality">San Francisco</span>, <span class="region">CA</span> </span> </span> </div>

30. Microdata example - event <span itemprop="location" itemscopeitemtype="http://data-vocabulary.org/Organization"> ​<span itemprop="name">Warfield Theatre</span> ​<span itemprop="address" itemscopeitemtype="http://data-vocabulary.org/Address"> <span itemprop="street-address">982 Market St</span>, <span itemprop="locality">San Francisco</span>, <span itemprop="region">CA</span> </span> </span> </span>

32. What is RDFa?

33. Why use RDFa?

34. How to use RDFa?

35. How is RDFa related to Semantic Web?

37. 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>

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

40. What is RDFa?

41. Why use RDFa?

42. How to use RDFa?

43. How is RDFa related to Semantic Web?

45. A sample webpage with RDFa

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

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

48. 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

49. 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> <p> <b>Weekend at the Silicon Valley Code Camp 2010</b><br /><br /> Starts on: <span>10-09-2010</span><br /> Ends on: <span>10-10-2010</span><br /><br /> See <a href="http://siliconvalley-codecamp.com/">Silicon Valley Code Camp 2010</a> This event is located at <span>Foothills College</span><br /> </p> </body> </html>

50. 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"> <html xmlns="http://www.w3.org/1999/xhtml" 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</b> Starts on: <span property="cal:dtstart" datatype="xs:date">10-09-2010</span> Ends on: <span property="cal:dtend" datatype="xs:date">10-10-2010</span> See <a rel="cal:url" href="http://siliconvalley-codecamp.com/"> Silicon Valley Code Camp 2010</a><br /><br /> This event is located at <span property="cal:location">Foothills College</span> </p> </body> </html>

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

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

53. 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/

54. An example of RDFawith GRDDL profile <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" 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"> <span id="a1"> <link rel="rdf:type" href="[foaf:Person]"/> <span property="foaf:name">Patrick Hayes</span> see <a rel="foaf:homepage" href="http://www.ihmc.us/users/user.php?UserID=42"> homepage</a> </span> </dd> </dl> </body> </html> Source: http://www-sop.inria.fr/acacia/personnel/Fabien.Gandon/tmp/grddl/rdfaprimer/PrimerRDFaSection.html

56. An output of GRDDL service is RDF

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

59. What is RDFa?

60. Why use RDFa?

61. How to use RDFa?

62. How is RDFa related to Semantic Web?

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

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

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

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

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

70. What is RDFa?

71. Why use RDFa?

72. How to use RDFa?

73. How is RDFa related to Semantic Web?

79. RDFa helps software to understand the content of web pages

80. Useful RDFa tools are RDFaDev, checkrdfa.info, GRDDL Service, HTML editor, etc.

81. RDFa is a stepping stone to full Semantic Web capability