Semantic HTML

4,708 views

Published on

http://tinyurl.com/2flvsk

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • Handy reference and tips for writing Semantic HTML: http://webdesignfromscratch.com/html-css/why-write-semantic-html.php
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,708
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
56
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Semantic HTML

  1. 1. Semantic HTML Dr. Harry Chen CMSC 491S/691S April 23, 2008
  2. 2. Agenda <ul><li>Yet Another Semantic Web Presentation </li></ul><ul><li>Embed semantic description in HTML </li></ul><ul><ul><li>Microformats </li></ul></ul><ul><ul><li>RDFa </li></ul></ul>
  3. 3. Click to watch the video
  4. 4. Problem & Plausible Solutions <ul><li>How should we publish semantic information on the Web? </li></ul><ul><ul><li>One HTML page  One RDF document </li></ul></ul><ul><ul><li>Mix RDF into the HTML page </li></ul></ul><ul><ul><li>Extend HTML with new semantic tags </li></ul></ul>
  5. 5. Microformats <ul><li>Introduce semantics into Web pages by using XHTML tags with standard data format vocabularies </li></ul><ul><ul><li>hCard (People & Organization) </li></ul></ul><ul><ul><li>hCalendar (Calendar & Events) </li></ul></ul><ul><ul><li>XFN (Social Networks) </li></ul></ul><ul><ul><li>rel-tag (tagging) </li></ul></ul><ul><ul><li>… </li></ul></ul>
  6. 6. Microformats basics <ul><li>Use standard XHTML attributes to describe information. </li></ul><ul><ul><li>Mostly thru the “class” attribute </li></ul></ul><ul><ul><li>Sometimes thru the “id”, “title”, “rel” or “rev” attr. </li></ul></ul><ul><li>As the webots process the pages, they reads information from those attributes. </li></ul><ul><ul><li>For search indexing </li></ul></ul><ul><ul><li>Grabbing contact & social network information </li></ul></ul>
  7. 7. Describe yourself using Microformats My Home Page
  8. 8. Find my name
  9. 9. Wrap my name in “fn” <ul><li>“ fn” == Full Name in hCard </li></ul><ul><li>“ url” == my URL CSS Class (not MF) </li></ul>http://harry.hchen1.com/contact-me/biosketch
  10. 10. What’s next? http://kitchen.technorati.com/contact/search
  11. 11. Another Example http://hchen1.com/contact-me/biosketch/ I live in Columbia Maryland.
  12. 12. Add Geo location Geo vocabulary comes from W3C Geo http://www.w3.org/2003/01/geo/
  13. 13. Prepare mashup data <ul><li>Optimus is a Microformats data transformer. </li></ul><ul><li>Transform Microformatted page to </li></ul><ul><ul><li>XML, </li></ul></ul><ul><ul><li>JSON or JSON-P </li></ul></ul><ul><li>Implementation </li></ul><ul><ul><li>One PHP file and Few XSTL </li></ul></ul><ul><ul><li>Let’s see a demo… </li></ul></ul>
  14. 14. http:// microformatique.com/optimus /
  15. 15. RDFa <ul><li>“ a” == “awesome” -- src:http://www.youtube.com/watch?v=ldl0m-5zLz4 </li></ul><ul><li>“ a” == provide a set of “attributes” that can be used to carry metadata in an XML language </li></ul><ul><li>XHTML is XML </li></ul>
  16. 16. RDFa uses… <ul><li>XML Attributes </li></ul><ul><ul><li>“ about” </li></ul></ul><ul><ul><li>“ rel” </li></ul></ul><ul><ul><li>“ href” </li></ul></ul><ul><ul><li>“ property” </li></ul></ul><ul><ul><li>“ content” </li></ul></ul><ul><ul><li>“ datatype” </li></ul></ul><ul><ul><li>“ typeof” </li></ul></ul>
  17. 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. 18. XHTML + RDFa
  19. 19. Let’s try something cool <ul><li>Fuzzbot is a Firefox plugin for detecting RDFa and Microformats descriptions </li></ul><ul><ul><li>http://rdfa.digitalbazaar.com/fuzzbot/ </li></ul></ul><ul><li>Demo </li></ul><ul><ul><li>http://rdfa.digitalbazaar.com/fuzzbot/demo/foaf-depictions.html </li></ul></ul>
  20. 20. Additional Resources <ul><li>Microformats </li></ul><ul><ul><li>http://microformats.org/ </li></ul></ul><ul><li>RDFa </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/RDFa </li></ul></ul>
  21. 21. Concluding Remarks <ul><li>Microformats & RDFa are two different approaches to embed semantic information in XHTML pages. </li></ul><ul><li>Tools for processing and consuming these data formats are under development. </li></ul><ul><li>Question: Which technology will developers embrace in the future Web? </li></ul>

×