260 likes | 281 Views
Sematic Web. Microdata , Microformat and RDF. 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
E N D
Sematic Web Microdata, Microformat and RDF Advanced Web-based Systems | Misbhauddin
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
Semantic Markup How to make your page more meaningful Types of Semantic Markup Standardized way of representing common categories of information Basic HTML 5 markup tags Microformats RDF Microdata
HTML5 for Semantics • Document Structuring Algorithm • <header> • <section> • <footer> • <aside> • <nav> • <article> Advanced Web-based Systems | Misbhauddin
Microdata • 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 Where do I find these markups? http://schema.org/ Provides list of all semantics to make your webpage more meaningful and searchable
itemscope & itemtype • itemscope • specifies that the HTML contained in the HTMLcode block is about a particular item • Can be applied to any HTML block-level tag <div itemscope> <h1>iPhone 5</h1> <p>Made By Apple </p> <p>Golden Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>
itemscope & itemtype • itemtype • adding itemscope, you are specifying that the HTML contained in thecode block is about a particular item • Types of items can be found at schema.org <div itemscopeitemtype="http://schema.org/Product"> <h1>iPhone 5</h1> <p>Made By Apple </p> <p>Golden Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>
itemprop • Used to markup more specific properties of each item within the itemscop. • Properties of items are labeled using the itempropattribute • Each itemtype has a list of properties that can be defined <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone 5</h1> <p>Made By Apple </p> <p>Golden Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>
Using Itemprop with part content • If you have only part of a tag that needs to be semantically tagged and not the whole HTML tag • Use a <span> tag to separate that content • Then use itemprop attribute with the span tag <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1> <p>Made By Apple </p> <p> <span itemprop=“color”> Golden </span>Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>
Embedding items • If a itemtype block includes another block of itemtype, we can embed one inside the other <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1> <p itemscopeitemtype=“http://schema.org/brand “> Made By <span itemprop=“name”>Apple</span> </p> <p> <span itemprop=“color”> Golden </span>Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>
Un-markable Information • Usually you will find information (like pictures) that cannot be marked • Use the meta tag <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1> <p itemscopeitemtype=“http://schema.org/brand “> Made By <span itemprop=“name”>Apple</span> </p> <p> <span itemprop=“color”> Golden </span>Color</p> <p itemscopeitemtype=“http://schema.org/aggregateRating“> Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”> <meta itemprop=“ratingValue” content=“4”> </p> </div>
Microformats • Set of conventions which are agreed upon by a community • These formats use the classattribute (Remember we used it for CSS) • There are a huge list of vocabularies that can be used for different content on the webpage 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
hCardMicroformat • simple, open format for publishing people and organizations on the web • It is composed many other properties • http://microformats.org/wiki/h-card <p class="h-card"> <img class="u-photo" src="http://drmisbha.net/photo.png" alt="" /> <a class="p-name u-url" href="http://drmisbha.net">Dr. Misbha</a> <a class="u-email“ href="mailto:misbha@drmisbha.net">misbha@drmisbha.ney</a>, <span class="p-street-address">Khaldiyyah Dist.</span> <span class="p-locality">Al-Ahsa</span> <span class="p-country-name">Saudi Arabia</span> </p>
Other Microformats • 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
RDFa allows authors to embed custom vocabularies within HTML What’s Next?
RDF • 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 URI relationship URI
RDF • 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 Resource, Property, and Property Value • 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 <?xml version="1.0"?><RDF> <Description about="http://www.kfu.edu.sa/advanced-web-based"> <author>Mohammed Misbhauddin</author> <homepage>http://www.drmisbha.net</homepage> </Description></RDF>
RDF Statement Statement Resource + Property + Property value Object Subject Predicate http://www.drmisbha.net http://www.kfu.edu.sa/advanced-web-based Author’s Homepage
Issues with using RDF • It is not really designed to be integrated with HTML • It is used mainly in databases and other back-end works 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
RDFa Lite • 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 vs. MicroData • RDFa Lite is very similar to MicroData in terms of structure itemscope vocab => itemtype typeof => itemprop => property <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1> <p itemscopeitemtype=“http://schema.org/brand “> Made By <span itemprop=“name”>Apple</span> </p> <p> <span itemprop=“color”> Golden </span>Color</p> <p itemscopeitemtype=“http://schema.org/aggregateRating“> Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”> <meta itemprop=“ratingValue” content=“4”> </p> </div>
RDFa Lite Example In this paragraph, I am talking about a person <p > My name is Manu Sporny and you can give me a ring via 1- 800-555-0199. </p> <p vocab=http://schema.org typeof=“Person”> My name is Manu Sporny and you can give me a ring via 1- 800-555-0199. </p>
RDFa Lite Example In this paragraph, I mention the name of the person and his phone number <p vocab=http://schema.org typeof=“Person”> My name is Manu Sporny and you can give me a ring via 1- 800-555-0199. </p> <p vocab=http://schema.org typeof=“Person”> My name is <span property=“name”>Manu Sporny</span> and you can give me a ring via <span property=“telephone”>1- 800-555-0199</span>. </p>
So Why RDFa? • 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.
Conclusion • How can we add semantic information to the web • Using HTML 5 attributes • Using MicroData • Using MicroFormats • Using RDFa or RDFa Lite