1. Sematic Web Microdata, Microformat and RDF Advanced Web-based Systems | Misbhauddin

2. HTML as-is for Semantic Web Extensibility HTML is not extensible such as other languages out there such as XML If you want a tag with a specific name in XML, you just go ahead and create it. Advantage to HTML’s limited set of elements Every user agent knows about every element Browsers have a built-in knowledge of HTML Can we make HTML extensible? The answer is YES Adding Semantic Markup to HTML will allow it to be more meaningful Advanced Web-based Systems | Misbhauddin

3. Semantic Markup Types of Semantic Markup How to make your page more meaningful Standardized way of representing common categories of information Basic HTML 5 markup tags MicroformatsRDF Microdata

4. HTML5 for Semantics Document Structuring Algorithm Advanced Web-based Systems | Misbhauddin

5. Simple way to embed semantic markup in HTML Helps in marking content as opposed structure (as seen through HTML5 tags) Search engines use this markup to improve the display of search results makes it easier for people to find the right Web pages Microdata Where do I find these markups? http://schema.org/ Provides list of all semantics to make your webpage more meaningful and searchable

6. itemscope specifies that the HTML contained in the HTML code block is about a particular item Can be applied to any HTML block-level tag itemscope & itemtype iPhone 5 Made By Apple Golden Color Average Rating:

7. itemtype adding itemscope, you are specifying that the HTML contained in the code block is about a particular item Types of items can be found at schema.org itemscope & itemtype iPhone 5 Made By Apple Golden Color Average Rating:

8. Used to markup more specific properties of each item within the itemscop. Properties of items are labeled using the itemprop attribute Each itemtype has a list of properties that can be defined itemprop iPhone 5 Made By Apple Golden Color Average Rating:

9. If you have only part of a tag that needs to be semantically tagged and not the whole HTML tag Use a tag to separate that content Then use itemprop attribute with the span tag Using Itemprop with part content iPhone 5 Made By Apple Golden Color Average Rating:

10. If a itemtype block includes another block of itemtype, we can embed one inside the other Embedding items iPhone 5 Made By Apple Golden Color Average Rating:

11. Usually you will find information (like pictures) that cannot be marked Use the meta tag Un-markable Information iPhone 5 Made By Apple Golden Color Average Rating:

12. Set of conventions which are agreed upon by a community These formats use the class attribute (Remember we used it for CSS) There are a huge list of vocabularies that can be used for different content on the webpage Microformats Where do I find these vocabularies? http://microformats.org/wiki/microformats2 Provides list of all microformat vocabularies to make your webpage more meaningful and searchable

13. simple, open format for publishing people and organizations on the web It is composed many other properties http://microformats.org/wiki/h-card hCard Microformat Dr. Misbha misbha@drmisbha.ney, Khaldiyyah Dist. Al-Ahsa Saudi Arabia

14. h-adr [marking up structured locations such as addresses, physical and/or postal] h-card [marking up people and organizations] h-entry [marking up syndicatable content such as blog posts, notes, articles, comments, photos and similar] h-event [marking up events] h-geo [marking up WGS84 geophysical coordinates] h-item [marking up the item of an h-review or h-product] h-product [marking up products] h-recipe [marking up food recipes] h-resume [marking up resumes] h-review [marking up reviews] h-review-aggregate [marking up aggregate reviews of a single item] v2 vocab notes v2 vocab to-do Other Microformats

15. RDFa allows authors to embed custom vocabularies within HTML What’s Next?

16. Standard model for data interchange on the Web Features that facilitate data merging even if the underlying schemas differ RDF extends the linking structure of the Web to use URIs to name the relationship between things as well as the two ends of the link Also called the “triple” Linking structure forms a directed, labeled graph, where the edges represent the named link between two resources RDF URI relationship

17. Written in XML Examples of Use Describing properties for shopping items, such as price and availability Describing time schedules for web events Describing information about web pages (content, author, created and modified date) Describing content and rating for web pictures Describing content for search engines Describing electronic libraries RDF

18. Resource is anything that can have a URI, such as http://www.kfu.edu.sa/advanced-web-based Property is a Resource that has a name, such as "author" or "homepage“ Property value is the value of a Property, such as “Misbhauddin" or http://www.drmisbha.net Property value of a resource can be another property RDF Resource, Property, and Property Value Mohammed Misbhauddin http://www.drmisbha.net

19. RDF Statement Resource + Property + Property value Statement SubjectPredicate Object http://www.kfu.edu.sa/advanced-web-based Author’s Homepage http://www.drmisbha.net

20. It is not really designed to be integrated with HTML It is used mainly in databases and other back-end works Issues with using RDF So what now? To avoid this, another form of RDF was introduced known as RDFa RDFa means Resource Description Framework in attributes It can integrate with older version of HTML (xHTML) and HTML5 It works similar to MicroData Although RDFa is very huge and complex, another form of RDFa is available for beginners called as RDFa-lite

21. It does exactly what RDFa does, but in a very simple kind of way. http://www.w3.org/TR/2012/REC-rdfa-lite-20120607/ Has a huge advantage over Microformats and MicroData, specially when working with big websites It has only 7 attributes. It is extensible, that means if the 7 attributes are not enough, you can add more from RDFa RDFa Lite

22. RDFa Lite is very similar to MicroData in terms of structure RDFa Lite vs. MicroData iPhone 5 Made By Apple Golden Color Average Rating: itemscope => vocab itemtype => typeof itemprop =>property

23. RDFa Lite Example My name is Manu Sporny and you can give me a ring via 1- 800-555-0199. In this paragraph, I am talking about a person My name is Manu Sporny and you can give me a ring via 1- 800-555-0199.

24. RDFa Lite Example In this paragraph, I mention the name of the person and his phone number My name is Manu Sporny and you can give me a ring via 1- 800-555-0199. My name is Manu Sporny and you can give me a ring via 1- 800-555-0199.

25. Flexibility of using/defining a vocabulary In this class example, we used the same vocabulary as MicroData which is schema.org But we can use others, for example Friend-of-a-Friend [FOAF] vocabulary. It is helpful to use others when one vocabulary does not define all the needed properties On another hand, you can define your own vocabulary in terms of RDF and then use it for adding it to the HTML document. So Why RDFa?

26. How can we add semantic information to the web Using HTML 5 attributes Using MicroData Using MicroFormats Using RDFa or RDFa Lite Conclusion