Más contenido relacionado La actualidad más candente (12) Similar a Semantic web support for POSH (20) Semantic web support for POSH3. 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
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)
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