Transcript Basic recipe apple

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
Basic HTML 5 markup tags
Standardized way of representing common categories
of information
Microformats
Microdata
RDF
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 HTML code 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: <img src=“rating.png” alt=“4 out of 5”></p>
</div>
itemscope & itemtype
• 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
<div itemscope itemtype="http://schema.org/Product">
<h1>iPhone 5</h1>
<p>Made By Apple </p>
<p>Golden Color</p>
<p>Average Rating: <img src=“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 itemprop attribute
• Each itemtype has a list of properties that can be defined
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop=“name”>iPhone 5</h1>
<p>Made By Apple </p>
<p>Golden Color</p>
<p>Average Rating: <img src=“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 itemscope itemtype="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: <img src=“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 itemscope itemtype="http://schema.org/Product">
<h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1>
<p itemscope itemtype=“http://schema.org/brand “>
Made By <span itemprop=“name”>Apple</span>
</p>
<p> <span itemprop=“color”> Golden </span>Color</p>
<p>Average Rating: <img src=“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 itemscope itemtype="http://schema.org/Product">
<h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1>
<p itemscope itemtype=“http://schema.org/brand “>
Made By <span itemprop=“name”>Apple</span>
</p>
<p> <span itemprop=“color”> Golden </span>Color</p>
<p itemscope itemtype=“http://schema.org/aggregateRating“>
Average Rating: <img src=“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 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
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
hCard Microformat
• 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:[email protected]">[email protected]</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
What’s Next?
RDFa allows authors to embed custom
vocabularies within HTML
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
Subject
Predicate
Object
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 itemscope itemtype="http://schema.org/Product">
<h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1>
<p itemscope itemtype=“http://schema.org/brand “>
Made By <span itemprop=“name”>Apple</span>
</p>
<p> <span itemprop=“color”> Golden </span>Color</p>
<p itemscope itemtype=“http://schema.org/aggregateRating“>
Average Rating: <img src=“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