semantic html
DESCRIPTION
http://tinyurl.com/2flvskTRANSCRIPT
![Page 1: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/1.jpg)
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/
Semantic HTML
Dr. Harry Chen
CMSC 491S/691S
April 23, 2008
![Page 2: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/2.jpg)
Agenda
Yet Another Semantic Web PresentationEmbed semantic description in HTML
Microformats RDFa
![Page 3: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/3.jpg)
Click to watch the video
![Page 4: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/4.jpg)
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
![Page 5: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/5.jpg)
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) …
![Page 6: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/6.jpg)
Microformats basics
Use standard 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
![Page 7: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/7.jpg)
Describe yourself using Microformats
My Home Page
![Page 8: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/8.jpg)
Find my name
![Page 9: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/9.jpg)
Wrap my name in “fn”
“fn” == Full Name in hCard“url” == my URL CSS Class (not MF)
http://harry.hchen1.com/contact-me/biosketch
![Page 10: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/10.jpg)
What’s next?
http://kitchen.technorati.com/contact/search
![Page 11: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/11.jpg)
Another Example
http://hchen1.com/contact-me/biosketch/
I live in Columbia Maryland.
![Page 12: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/12.jpg)
Add Geo location
Geo vocabulary comes from W3C Geohttp://www.w3.org/2003/01/geo/
![Page 13: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/13.jpg)
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…
![Page 14: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/14.jpg)
http://microformatique.com/optimus/
![Page 15: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/15.jpg)
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
![Page 16: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/16.jpg)
RDFa uses…
XML Attributes “about” “rel” “href” “property” “content” “datatype” “typeof”
![Page 17: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/17.jpg)
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
![Page 18: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/18.jpg)
XHTML + RDFa
![Page 19: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/19.jpg)
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-
depictions.html
![Page 20: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/20.jpg)
Additional Resources
Microformats http://microformats.org/
RDFa http://en.wikipedia.org/wiki/RDFa
![Page 21: Semantic HTML](https://reader033.vdocuments.net/reader033/viewer/2022061112/5456b00eb1af9f39378b4f8f/html5/thumbnails/21.jpg)
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?