WEB PLATFORMS SUPPORT FOR POSHCONSTRUCTS IN ORDER TOSEMANTICALLY DESCRIBE THE CONTENT.                           Dinu Suman
WEB 3.0 AND SEMANTIC WEB
SEMANTIC WEB      “… a place where machines can read Web pages much as we humans read them, a place where search engines a...
WHAT IS POSH ?Plain Old Semantic HTML (POSH)POSH ≈ “valid, semantic, accessible, well-structured HTML”
THE POSH CHECKLIST: The first rule of POSH is that you must validate  your POSH. Second, drop the use of TABLEs for pure...
SEMANTIC REPRESENTATIONS Microformats - 2005 RDF – 2004 (not covered here) Microdata - 2011
USAGE:   Search for reviews   Search for songs, albums
USAGE   http://www.flickr.com/map/ - Geo tagging
MICROFORMATS “A microformat is a web-based approach to semantic markup which seeks to re-use existing HTML/XHTML tags to c...
MICROFORMATS Easy to write Html attributes used:     class     rel     rev
COMMONLY USED TYPE: hAtom hCalendar hCard hResume hReview rel=“tag”, rel=“nofollow”, rel=“licence” XFN
EXAMPLE 1 - HCARD<div id="hcard-Dinu-Suman" class="vcard">   <span class="fn">Dinu Suman</span>   <div class="org">Univers...
EXAMPLE 2 - HCALENDAR<div class="vevent" id="hcalendar-Web-Client-Presentation">   <abbr class="dtstart" title="2012-01-10...
EXAMPLE 3 - HREVIEW<div class="hreview" id="hreview-cool-Monitor">  <h2 class="summary">cool Monitor</h2>  <abbr class="dt...
MICRODATA Only in Html5 and XHtml 5 (X)Html5 attributes:       itemscope       itemtype       itemid       itemprop ...
COMMONLY USED TYPE: Creative works: CreativeWork, Book, Movie,MusicRecording, Recipe, TVSeries ... Embedded non-text  ob...
EXAMPLE 1 - PERSON<div itemscope itemtype="http://schema.org/Person">     <a itemprop="url" href="www.info.uaic.ro/~dinu.s...
EXAMPLE 2 - PRODUCT<div itemscope itemtype="http://schema.org/Product">     <a itemprop="url" href="www.mouse.com/razer-x1...
EXAMPLE 3 - MOVIE<div itemscope itemtype="http://schema.org/Movie">   <a itemprop="url" href="www.imdb.com/title/tt1375666...
TOOLS:   Firefox Addon “Operator” -    https://addons.mozilla.org/en-    US/firefox/addon/operator/ IE Addon “Oomph 2” -...
REFERENCES + USEFUL RESOURCES: http://microformats.org/ http://schema.org http://developer.search.yahoo.com/start http...
Q&A?
Upcoming SlideShare
Loading in …5
×

Semantic web support for POSH

1,684 views
1,590 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,684
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Semantic web support for POSH

  1. 1. WEB PLATFORMS SUPPORT FOR POSHCONSTRUCTS IN ORDER TOSEMANTICALLY DESCRIBE THE CONTENT. Dinu Suman
  2. 2. WEB 3.0 AND SEMANTIC WEB
  3. 3. SEMANTIC WEB “… a place where machines can read Web pages much as we humans read them, a place where search engines and software agents can better troll the Net and find what we’re looking for.” (PCMag)
  4. 4. WHAT IS POSH ?Plain Old Semantic HTML (POSH)POSH ≈ “valid, semantic, accessible, well-structured HTML”
  5. 5. THE POSH CHECKLIST: The first rule of POSH is that you must validate your POSH. Second, drop the use of TABLEs for purely presentational purposes, spacer GIFs, and presentational-html in general. Next, fix your “Bed and BReakfast” markup. Eliminate “Anorexic Anchors”. Use good semantic-class-names. ... http://microformats.org/wiki/posh
  6. 6. SEMANTIC REPRESENTATIONS Microformats - 2005 RDF – 2004 (not covered here) Microdata - 2011
  7. 7. USAGE: Search for reviews Search for songs, albums
  8. 8. USAGE http://www.flickr.com/map/ - Geo tagging
  9. 9. MICROFORMATS “A microformat is a web-based approach to semantic markup which seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pages and other contexts that support (X)HTML, such as RSS. This approach allows software to process information intended for end-users (such as contact information, geographic coordinates, calendar events, and the like) automatically.” (Wikipedia)
  10. 10. MICROFORMATS Easy to write Html attributes used:  class  rel  rev
  11. 11. COMMONLY USED TYPE: hAtom hCalendar hCard hResume hReview rel=“tag”, rel=“nofollow”, rel=“licence” XFN
  12. 12. EXAMPLE 1 - HCARD<div id="hcard-Dinu-Suman" class="vcard"> <span class="fn">Dinu Suman</span> <div class="org">Universitatea Alexandru Ioan Cuza</div> <a class="email" href="mailto:dinu.suman@info.uaic.ro">dinu.suman@info.uaic.ro </a> <div class="adr"> <div class="street-address">bd. Carol I</div> <span class="locality">Iasi</span>, <span class="postal-code">70100</span> <span class="country-name">Romania</span> </div> <div class="tel">(0232) 22-33-44</div></div>
  13. 13. EXAMPLE 2 - HCALENDAR<div class="vevent" id="hcalendar-Web-Client-Presentation"> <abbr class="dtstart" title="2012-01-10">January 10th</abbr> : <abbr class="dtend" title="2012-01-18">18th, 2012</abbr> <span class="summary">Web Client Presentation</span> <div class="description">Tema 2 la obiectul “Dezvoltarea aplicatiilor Web la nivel de client" </div> <div class="tags">Tags: <a rel="tag" href="http://eventful.com/events/tags/web">web</a>, <a rel="tag" href="http://eventful.com/events/tags/cliw"> cliw</a>, <a rel="tag" href="http://eventful.com/events/tags/infoiasi"> infoiasi</a>, </div></div>
  14. 14. EXAMPLE 3 - HREVIEW<div class="hreview" id="hreview-cool-Monitor"> <h2 class="summary">cool Monitor</h2> <abbr class="dtreviewed" title="2004-01-09T16:02">Jan 9, 2004</abbr> by <span class="reviewer vcard"> <span class="fn">Dinu</span> </span> <img alt="photo of BenQ XL2410T" src="http://bit.ly/xD5ohY" class="photo" /> <div class="item"> <a class="fn url" href="http://www.trustedreviews.com/BenQ- XL2410T_Monitor_review">BenQ XL2410T</a> </div> <abbr title="5" class="rating">★★★★★</abbr></div>
  15. 15. MICRODATA Only in Html5 and XHtml 5 (X)Html5 attributes:  itemscope  itemtype  itemid  itemprop  itemref
  16. 16. COMMONLY USED TYPE: Creative works: CreativeWork, Book, Movie,MusicRecording, Recipe, TVSeries ... Embedded non-text objects: AudioObject, ImageObject, VideoObject Event Organization Person Place, LocalBusiness, Restaurant ... Product, Offer, AggregateOffer Review, AggregateRating
  17. 17. EXAMPLE 1 - PERSON<div itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href="www.info.uaic.ro/~dinu.suman"> <div itemprop="name"><strong>Dinu Suman</strong></div> </a> <div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Universitatea Alexandru Ioan Cuza</span> </div> <div itemprop="jobtitle">Student</div> <div itemprop="description">Student anul 3</div> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <div> <span itemprop="addressLocality">Iasi</span> </div> <div itemprop="postalCode">70000</div> <div itemprop="addressCountry">Romania</div> </div> <div itemprop="email">dinu.suman@info.uaic.ro</div> <div> <meta itemprop="birthDate" content="1-01-1990">DOB: 01/1990/1 </div></div>
  18. 18. EXAMPLE 2 - PRODUCT<div itemscope itemtype="http://schema.org/Product"> <a itemprop="url" href="www.mouse.com/razer-x123"> <div itemprop="name"><strong>Mouse Razer X123</strong></div> </a> <div itemprop="description">Cel mai bun Mouse</div> <div itemprop="brand" itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Logitech</span> </div> <div>Model: <span itemprop="model">Razer X123</span></div> <div>Product ID: <span itemprop="productID">1</span></div> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">3.7</span> based on <span itemprop="reviewCount">20</span> reviews</div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">500</span> <link itemprop="itemCondition" href="http://schema.org/NewCondition" /> New </div></div>
  19. 19. EXAMPLE 3 - MOVIE<div itemscope itemtype="http://schema.org/Movie"> <a itemprop="url" href="www.imdb.com/title/tt1375666/"> <div itemprop="name"><strong>Inception</strong></div> </a> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Directed by: <span itemprop="name">Christopher Nolan</span> </div> <div> Starring: <div itemprop="actors" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Leonardo DiCaprio</span> </div> <div itemprop="actors" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ken Watanabe</span> </div> </div></div>
  20. 20. TOOLS: Firefox Addon “Operator” - https://addons.mozilla.org/en- US/firefox/addon/operator/ IE Addon “Oomph 2” - http://www.ieaddons.com/en/addons/detail.aspx?id =1110 Safari - http://zappatic.net/projects/safarimicroformats
  21. 21. REFERENCES + USEFUL RESOURCES: http://microformats.org/ http://schema.org http://developer.search.yahoo.com/start http://support.google.com/webmasters/bin/topic.py? hl=en&topic=21997 http://bit.ly/yNolQE - Microformats Cheat-Sheet http://schema-creator.org
  22. 22. Q&A?

×