1. WEB PLATFORMS SUPPORT FOR POSH
CONSTRUCTS IN ORDER TO
SEMANTICALLY DESCRIBE THE CONTENT.
Dinu Suman

2. WEB 3.0 AND SEMANTIC WEB

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. WHAT IS POSH ?
Plain Old Semantic HTML (POSH)
POSH ≈ “valid, semantic, accessible, well-structured
HTML”

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. SEMANTIC REPRESENTATIONS
 Microformats - 2005
 RDF – 2004 (not covered here)
 Microdata - 2011

7. USAGE:
 Search for reviews
 Search for songs, albums

8. USAGE
 http://www.flickr.com/map/ - Geo tagging

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. MICROFORMATS
 Easy to write
 Html attributes used:
 class
 rel
 rev

11. COMMONLY USED TYPE:
 hAtom
 hCalendar
 hCard
 hResume
 hReview
 rel=“tag”, rel=“nofollow”, rel=“licence”
 XFN

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. 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. 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. MICRODATA
 Only in Html5 and XHtml 5
 (X)Html5 attributes:
 itemscope
 itemtype
 itemid
 itemprop
 itemref

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. 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. 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. 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. 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. 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. Q&A?