Semantic HTML

Semantic HTML

• 1.
  Semantic HTML Dr.Harry Chen CMSC 491S/691S April 23, 2008
• 2.
  Agenda Yet AnotherSemantic Web Presentation Embed semantic description in HTML Microformats RDFa
• 3.
  Click to watchthe video
• 4.
  Problem & PlausibleSolutions 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
• 5.
  Microformats Introduce semanticsinto Web pages by using XHTML tags with standard data format vocabularies hCard (People & Organization) hCalendar (Calendar & Events) XFN (Social Networks) rel-tag (tagging) …
• 6.
  Microformats basics Usestandard XHTML attributes to describe information. Mostly thru the “class” attribute Sometimes thru the “id”, “title”, “rel” or “rev” attr. As the webots process the pages, they reads information from those attributes. For search indexing Grabbing contact & social network information
• 7.
  Describe yourself usingMicroformats My Home Page
• 8.
  Find my name
• 9.
  Wrap my namein “fn” “ fn” == Full Name in hCard “ url” == my URL CSS Class (not MF) http://harry.hchen1.com/contact-me/biosketch
• 10.
  What’s next? http://kitchen.technorati.com/contact/search
• 11.
  Another Example http://hchen1.com/contact-me/biosketch/I live in Columbia Maryland.
• 12.
  Add Geo location Geo vocabulary comes from W3C Geo http://www.w3.org/2003/01/geo/
• 13.
  Prepare mashup dataOptimus 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…
• 14.
  http:// microformatique.com/optimus /
• 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
• 16.
  RDFa uses… XMLAttributes “ about” “ rel” “ href” “ property” “ content” “ datatype” “ typeof”
• 17.
  Dublin Core example( 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”) RDF Triples Source: http://en.wikipedia.org/wiki/RDFa
• 18.
  XHTML + RDFa
• 19.
  Let’s try somethingcool Fuzzbot is a Firefox plugin for detecting RDFa and Microformats descriptions http://rdfa.digitalbazaar.com/fuzzbot/ Demo http://rdfa.digitalbazaar.com/fuzzbot/demo/foaf-depictions.html
• 20.
  Additional Resources Microformatshttp://microformats.org/ RDFa http://en.wikipedia.org/wiki/RDFa
• 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?