Semantic HTML

Slide 1: Semantic HTML Dr. Harry Chen CMSC 491S/691S April 23, 2008 This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/us/

Slide 2: Agenda  Yet Another Semantic Web Presentation  Embed semantic description in HTML  Microformats  RDFa

Slide 3: Click to watch the video

Slide 4: Problem & Plausible Solutions  How should we publish semantic information on the Web?  One HTML page  One RDF document  Mix RDF into the HTML page  Extend HTML with new semantic tags

Slide 5: Microformats  Introduce semantics into Web pages by using XHTML tags with standard data format vocabularies  hCard (People & Organization)  hCalendar (Calendar & Events)  XFN (Social Networks)  rel-tag (tagging) …

Slide 6: Microformats basics  Use standard XHTML attributes to describe information.  Mostlythru the “class” attribute  Sometimes thru the “id”, “title”, “rel” or “rev” attr.  As the webots process the pages, they reads information from those attributes.  Forsearch indexing  Grabbing contact & social network information

Slide 7: Describe yourself using Microformats My Home Page

Slide 8: Find my name

Slide 9: Wrap my name in “fn”  “fn” == Full Name in hCard  “url” == my URL CSS Class (not MF) http://harry.hchen1.com/contact-me/biosketch

Slide 10: What’s next? http://kitchen.technorati.com/contact/search

Slide 11: Another Example http://hchen1.com/contact-me/biosketch/ I live in Columbia Maryland.

Slide 12: Add Geo location Geo vocabulary comes from W3C Geo http://www.w3.org/2003/01/geo/

Slide 13: Prepare mashup data  Optimus is a Microformats data transformer.  Transform Microformatted page to  XML,  JSON or JSON-P  Implementation  One PHP file and Few XSTL  Let’s see a demo…

Slide 14: http://microformatique.com/optimus/

Slide 15: RDFa  “a” == “awesome” src:http://www.youtube.com/watch?v=ldl0m-5zLz4 --  “a” == provide a set of “attributes” that can be used to carry metadata in an XML language  XHTML is XML

Slide 16: RDFa uses…  XML Attributes  “about”  “rel”  “href”  “property”  “content”  “datatype”  “typeof”

Slide 17: Dublin Core example RDF Triples (http://www.example.com/books/wikinomics, dc:title, “Wikinomics”) (http://www.example.com/books/wikinomics, dc:creator, “Don Tapscott”) (http://www.example.com/books/wikinomics, dc:date, 2006-10-01”) Source: http://en.wikipedia.org/wiki/RDFa

Slide 18: XHTML + RDFa

Slide 19: Let’s try something cool  Fuzzbot is a Firefox plugin for detecting RDFa and Microformats descriptions  http://rdfa.digitalbazaar.com/fuzzbot/  Demo  http://rdfa.digitalbazaar.com/fuzzbot/demo/foaf-depict

Slide 20: Additional Resources  Microformats  http://microformats.org/  RDFa  http://en.wikipedia.org/wiki/RDFa

Slide 21: Concluding Remarks  Microformats & RDFa are two different approaches to embed semantic information in XHTML pages.  Tools for processing and consuming these data formats are under development.  Question: Which technology will developers embrace in the future Web?