WEB PLATFORMS SUPPORT FOR POSH CONSTRUCTS IN ORDER TO SEMANTICALLY 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 and software agents can better troll the Net and find what we’re looking for.” (PCMag)

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 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

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 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)

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">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>

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>

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>

MICRODATA

Only in Html5 and XHtml 5 (X)Html5 attributes:

itemscope  itemtype  itemid itemprop itemref 

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

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>

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>

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>

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

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

Q&A?