Date structurate pe Web: microformate, microdate HTML5, RDFa

Dr.SabinBuragawww.purl.org/net/busaco
de la microformate la microdate & RDFa
Dezvoltarea aplicatiilor Web

“Imaginația este mai importantă ca erudiția.”
Albert Einstein

Constatare
clientul care consuma (acceseaza) reprezentari
de resurse Web nu neaparat trebuie sa fie uman

Cum am putea descrie continutul resurselor Web
astfel incat sa poata fi procesat “inteligent”?

Idee:
specificarea unor meta-date (date privind datele)
direct in cadrul documentelor HTML

Idee:
specificarea unor meta-date (date privind datele)
direct in cadrul documentelor HTML
solutii:
microformate
scheme de microdate HTML5
RDFa

Microformate
(Tantek Çelik & Kevin Marks, 2004)
www.microformats.org

Microformate
idee:
utilizarea de marcaje (X)HTML pentru a desemna
semantica (structura) continutului

Microformate
idee:
utilizarea de marcaje (X)HTML pentru a desemna
semantica (structura) continutului
“curentul” POSH (Plain Old Semantic HTML)

Microformate
reutilizarea unor vocabulare de termeni,
disponibile liber si standardizate

Microformate
reutilizarea unor vocabulare de termeni,
disponibile liber si standardizate
realizarea de adnotari semantice direct in (X)HTML
si alte limbaje similare
procesare automata a reprezentarilor resurselor

marcaje XHTML (<div>, <span>)
pentru specificarea datelor &
structurii lor
“clase” CSS pentru prezentare
& asocierea de descrieri
ale meta-datelor
structurarea
paginilor Web:
precizarea
intelesului
(semanticii)
continutului

Microformate
elementare (desemneaza o singura caracteristica)
+
compuse (specifica mai multe proprietati
care modeleaza un aspect de interes
– e.g., un concept: persoana, eveniment,…)

rel-tag
asociaza unei legaturi hipertext un termen (tag)
– cuvant-cheie ori subiect – ales liber de autor
(tagging content)

rel-tag
<a href="http://technorati.com/tag/fish" rel="tag">fish</a>
<a href="http://en.wikipedia.com/wiki/UNIX" rel="tag"
class="skill">UNIX</a>
<a href="http://flickr.com/photos/tags/Penguin" rel="tag">
<img src="tux.jpg" alt="Foto cu un pinguin" /></a>

XFN (XHTML Friend Network)
relatii de “prieteni”: colaboratori, rude, cunoscuti,…
<a href="http://www.infoiasi.ro/~dlucanu/"
rel="met, colleague, co-worker, neighbor">
Dorel Lucanu</a>

recurgerea la XFN in cadrul sistemului WordPress

hCalendar
desemneaza evenimente & orare
vezi formatul iCalendar – RFC 2445

hCalendar
<div class="vevent">
<a class="url" href="http://profs.info.uaic.ro/~web/2007/">
<abbr class="dtstart" title="20061117">November 17</abbr> --
<abbr class="dtend" title="20061118">18, 2006</abbr>
<span class="summary">Summer Web 2007</span> la
<span class="location">Sala Romtelecom</span></a>
<div class="description">Se anunta editia a VII-a a workshop-ului
dedicat tehnologiilor Web!</div>
</div>

hCard
informatii de contact despre persoane, organizatii etc.
in conformitate cu formatul vCard – RFC 2426

specificarea informatiilor despre o persoana via hCard

hResume
modeleaza informatii despre un CV
folosit in conjunctie cu hCard si hCalendar

hReview
desemneaza opinii emise despre o resursa
(produs, locatie, eveniment, persoana,…)

<div class="hreview">

<h1 class="item">Recenzie despre <a class="fn url" title="Situl FII"
href="http://www.info.uaic.ro/">situl Web al FII</a></h1>
<p> 
<abbr class="rating stars" title="5">* * * * *</abbr>
<span class="summary title">Modern</span>,
<abbr class="dtreviewed" title="20100518T224500">18 mai</abbr>
</p>

<p class="reviewer">Autor al recenziei: <span class="vcard">
<a class="url fn n" href="http://www.purl.org/net/busaco"
title="Spre situl Web al lui Sabin Buraga">
<span class="given-name">Sabin</span>
<span class="family-name">Buraga</span></a></span></p>
<div class="description">  </div>
</div>

geo
defineste coordonatele geografice ale unei locatii

microformate: utilizari
Flickr
www.info.uaic.ro
Last.fm
Revyu
Upcoming
WordPress
XWiki
Yahoo! Tech
etc.

Desigur, putem definite microformate proprii:
hLocation – referentierea (in termeni fuzzy) a locatiilor
(S. Dumitriu, M. Girdea & S. Buraga, 2007)
hMusic – specificarea datelor privind productii muzicale
(S. Buraga, 2008)

O melodie o putem considera – la nivel abstract –
ca fiind un evenimentputem extinde hEvent
<ul class="music">
<li class="vevent"><span class="summary">
<a href="Hidden%20Love.mp3">Hidden Love</a></span>
<span class="dur">08:29</span>
<abbr class="dtstart" title="2008-09-20">20 Sep 2008</abbr>
</li>
…
</ul>

Microdata HTML 5
http://www.w3.org/TR/microdata/
alternativa la microformate
specificatie W3C in stadiu de ciorna
(Ian Hickson, martie 2012)

Microdata HTML 5
posibilitatea de a specifica perechi de proprietati
(nume, valoare) “scufundate” in HTML

Microdata HTML 5
grupurile de perechi de proprietati nume—valoare
sunt denumite items
creare via atributul itemscope
specificarea unei proprietati prin atributul itemprop
referire cu ajutorul atributului itemref

Microdata HTML 5
grupurile de perechi de proprietati nume—valoare
sunt denumite items
asocierea unui tip de date se face cu atributul itemtype
pentru identificarea unui item se foloseste itemid

Microdata HTML 5
ca tipuri de date se pot folosi microformatele

<section itemscope itemtype="http://microformats.org/profile/hcard">
<h1 itemprop="fn">
<span itemprop="n" itemscope>
<span itemprop="given-name">Tuxy</span>
<span itemprop="family-name">Pinguinescu</span>
</span>
</h1>
<img itemprop="photo" alt="Portretul lui Tux" src="tux.jpg">
<p itemprop="org" itemscope>
<span itemprop="organization-name">Linux</span></p>
<h2>Detalii & contact:</h2>
<ul>
<li><a itemprop="url" href="http://en.wikipedia.org/wiki/Tux">
Wikipedia</a></li>
<li itemprop="email"><a href="mailto:tux@penguin.org">
tux AT penguin.org</a></li>
</ul>
<address><span itemprop="adr" itemscope>
<span itemprop="street-address">Penguins Blv., 33</span>
<span itemprop="locality">Penguin City</span>,
<span itemprop="postal-code">740033</span> </span> </address>
</section>

Exista o serie de modele de date
(exprimate via microformate sau microdate)
ce pot fi indexate si folosite
de actualele motoare de cautare?

schema.org
colectie de vocabulare (scheme de date)
– e.g., Book, Event, LocalBusiness, Movie, Offer, Person,
Place, Recipe, Review, TVSeries,… – recunoscute si
indexate de robotii unor motoare de cautare
Bing, Google, Yahoo!, Yandex

<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="tux-de-catifea-cu-paiete.jpg" />
<span itemprop="name" lang="ro">Tux de catifea cu paiete</span>
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">74</span>
din <span itemprop="bestRating">100</span> de puncte
pe baza a <span itemprop="ratingCount">33</span> de evaluari ale utilizatorilor
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
disponibil de la <span itemprop="lowPrice">30</span>
la <span itemprop="highPrice">130</span> de RON
pe baza ofertei a <span itemprop="offerCount">10</span> comercianti
Oferta zilei:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="http://jucarii.biz/tucsi/tux-catifea-paiete">
Jucarii pentru toti, acum cu paiete</a>
</div>
</div>
</div>

Studiu de caz:
adnotarea semantica via microdate HTML5 a datelor
in contextul interactiunii om-calculator
persona & teste de utilizabilitate
(Stefan Negru & Sabin Buraga, 2012)
http://blankdots.com/open/schema/

<article itemscope itemtype="http://schema.org/Persona">
<section id="personal-info">
<h3>Type: <strong itemprop="personaType">Primary</strong></h3>
<figure><img itemprop="image" src="teacher.jpg" alt="persona image" /></figure>
<h4>Identity: <span itemprop="givenName">Tuxy</span>
<span itemprop="familyName">Pinguinescu</span></h4>
<h4>Background</h4>
<ul>
<li>Date of Birth: <time itemprop="birthDate"
datetime="1980-10-23">23 octombrie 1980</time></li>
<li>Gender: <span itemprop="gender">Male</span></li>
<li itemprop="location" itemscope itemtype="http://schema.org/Place">
Location: <span itemprop="name">Iasi, Romania</span></li>
<li>Tech Level:<span itemprop="technicalLevel">Advanced</span></li>
</ul>
</section>
<section id="goals">
<h4>Goals</h4>
<ul>
<li>Practical Goals: <span itemprop="endGoal">…</span></li>
<li>Personal Goals: <span itemprop="experienceGoal">…</span></li>
</ul>
</section>
</article>

Alte resurse de interes,
inclusiv instrumente de validare & conversie,
sunt oferite de situl Web
http://getschema.org/

Folosind modelul RDF (subiect, predicat, obiect),
n-am putea include triplele RDF in paginile Web?

Specificarea constructiilor RDF direct in (X)HTML
RDFa
reprezinta un alt format de serializare a modelului RDF
RDF + HTML = RDFa

RDFa
recomandari ale Consortiului Web
RDFa 1.0 (2008)
RDFa 1.1 (2012)
www.w3.org/TR/rdfa-core

RDFa
“punte” intre Web-ul social si Web-ul semantic
http://www.w3.org/TR/rdfa-primer/

RDFa
utilizarea unor atribute XHTML specifice menite a modela
informatiile disponibile intr-o pagina Web
in vederea procesarii acestora de catre calculator

RDFa
minimal, se pot utiliza atributele specificate de RDFa Lite
http://www.w3.org/TR/rdfa-lite/

RDFa
vocab – precizeaza URL-ul vocabularului de date folosit
exemplificari:
http://schema.org/
http://open.vocab.org/terms/

RDFa
typeof – desemneaza un tip de date (clasa)
de exemplu: Event, Person, Product etc.

RDFa
property – specifica o proprietate asociata tipului de date
e.g., pentru tipul Event sunt definite proprietatile
duration, location, startDate, endDate, performers,…
(conform http://schema.org/Event)

RDFa
resource – indica un identificator de resursa
despre care se “vorbeste” in termeni de meta-date

RDFa
prefix – desemneaza un vocabular specific
e.g., rdf pentru RDF, rdfa – RDFa, xsd – XML Schema

RDFa
prefix – desemneaza un vocabular specific
e.g., rdf pentru RDF, rdfa – RDFa, xsd – XML Schema
lista prefixelor predefinite:
www.w3.org/2011/rdfa-context/rdfa-1.1

Exemplu recurgand la vocabularul schema.org
adaptare dupa (Manu Sporny, 2012)
<p vocab="http://schema.org/" typeof="Person"
resource="#tux">
Salut, eu sunt
<span property="name">Tuxy Pinguinescu</span>
si va invit sa vizitati
<a property="url" href="http://tux.info/">situl meu</a>.
</p>

Exemplu: modelarea grafului social al unui utilizator
pe baza vocabularului FOAF (Friend Of A Friend)
<div vocab="http://xmlns.com/foaf/0.1">
<div resource="#busaco" typeof="Person">
<a property="url" href="http://purl.org/net/busaco">
<span property="name">Sabin Buraga</span></a>
îi are drept cunoscuți pe
<a property="knows" href="#alecsandru">Alecsandru</a> și
<a property="knows" href="#blankdots">Ștefan</a>.
</div>
<p resource="#alecsandru" typeof="Person">
<span property="name">Alecsandru Grigoriu</span></a>
</p>
…
</div>

date adnotate
semantic via RDFa
triplele RDF extrase
redarea
continutului
marcat
http://rdfa.info/play/
instrument Web de editare si vizualizare a constructiilor RDFa

graful RDF
corespunzator

Exemplu: specificarea “punctajului” dat unei resurse
(adnotare semantica via review vocabulary de la Google)
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review">
<span rel="v:itemreviewed">
<span about="urn:ISBN:978-973-46-0249-0" typeof="bib:book">
Titlu: <span property="v:name" xml:lang="ro">Tehnologii XML</span>
</span>
</span>
Evaluare: <span property="v:rating" content="5">*****</span>
<span property="v:summary">…</span>
</div>

rdf: utilizari
corelarea, consolidarea si accesarea cunostintelor
despre e-commerce via RDF – @kidehen & @mfhepp (2010)

<div typeof="gr:Offering" about="#fabulous-offer">
<div rev="gr:offers" resource="http://www.undeva.biz#business">
<span property="gr:validFrom" datatype="xsd:dateTime"
content="2011-11-20T00:00:00Z"></span>
<span property="gr:validThrough" datatype="xsd:dateTime"
content="2012-11-20T00:00:00Z"></span>
</div>
<div rel="gr:hasPriceSpecification">
<span typeof="gr:UnitPriceSpecification" about="#UnitPriceSpec">
Pret:
<span property="gr:hasCurrencyValue" datatype="xsd:float">
33.33</span>
<span property="gr:hasCurrency" datatype="xsd:string">Euro</span>
</span>
</div>
<a rel="product:specification"
href="http://undeva.biz/product#spec">Specificatiile produsului</a>
</div>
modelarea in RDFa a unei oferte de e-business
pe baza Good Relations – dupa Martin Hepp (2009)

O lista a siturilor care recurg la adnotari semantice RDFa
referitoare la produse via Good Relations
poate fi consultata la
http://notes.3kbo.com/goodrelations-sites
exemple notabile:
BestBuy, O’Reilly Media, Sears, Yahoo! Real Estate

RDFa transforma orice pagina Web intr-un API
acces la date structurate, nu doar la continut textual
http://rdfa.info/

Exista o serie de studii de caz
privitoare la RDFa?

Generarea de constructii RDFa
pe baza editorului on-line RDFaCE
abordare WYSISYG (What You See Is What You Get)
genereaza reprezentari RDFa – inclusiv rNews
recurge la API-uri de adnotare a continutului textual
(e.g., Alchemy, Open Calais, Ontos, Dbpedia)
disponibil si ca extensie pentru WordPress
http://aksw.org/Projects/RDFACE

Generarea de constructii RDFa
pe baza editorului on-line RDFaCE
A. Khalili, S. Auer & D. Hladky (2012)

rdf: utilizari – rdfa
inspectarea constructiilor RDFa din cadrul unui document
XHTML via RDFa Highlight bookmarklet
<li about="/issues/59939" typeof="g:Issue" property="g:hasPublicationDate"
content="2011-10-14" rel="g:hasNotice"><a href="/issues/59939/notices/1457466/…"
about="/issues/59939/notices/1457466" typeof="g:Notice">…</a></li>

extragerea de triple RDF din constructii RDFa
via instrumentul RADiFy – http://duncangrant.co.uk/radify/
(aici se folosesc vocabularele FOAF, Good Relations, Open Graph)
<#offering> gr:name "Ty Pennington Style Mayfield 4 Pc. Deep Seating Set"
<#offering> gr:hasCurrency "USD"
<#offering> gr:hasCurrencyValue "849.99"

recomandari de resurse pe baza marcajelor RDFa Lite
extensia RuleTheWeb pentru Firefox
http://ruletheweb.org/

rNews
model de date pentru includerea de meta-date
din domeniul publicatiilor
(e.g., stiri, articole, periodice) in documentele HTML
standard IPTC (International Press
Telecommunications Council) – octombrie 2011
rnews.org

rNews
pe bazeaza pe microdate HTML5 si/sau RDFa
detalii in prezentarea E. Sandhaus, S. Myles & A. Gebhard,
“The State of rNews”, Semantic Technology & Business
Conference, San Francisco (2012)
https://speakerdeck.com/u/agebhard/p/the-state-of-rnews

Microformatele, microdatele HTML5 si asertiunile RDF(a)
sunt indexate de motoarele de cautare
Bing – http://tinyurl.com/3mgq27b
Google rich snippets – http://tinyurl.com/3c6naq7
Yahoo! BOSS (Build your Own Search Service)
http://developer.yahoo.com/search/boss/

microformate↔microformate↔RDFa
Microformatele pot fi exprimate
via microdate HTML care, la randul lor,
pot avea asociate constructii RDF(a)

Cel mai expresiv – general – model este RDF(a)

<div class="vcard">
<p>Nume: <span class="fn">Sabin Buraga</span></p>
<p>Titlu academic: <span class="title">Dr.</span></p>
</div>

<div itemscope itemtype="http://schema.org/Person">
<p>Nume: <span itemprop="name">Sabin Buraga</span></p>
<p>Titlu academic: <span itemprop="title">Dr.</span></p>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<p>Nume: <span property="v:name">Sabin Buraga</span></p>
<p>Titlu academic: <span property="v:title">Dr.</span></p>
</div>
adaptare dupa Marco Lisci & Luisa Scarlata (2011)

<li class="conference" itemscope itemid="/2011/oscon/"
itemtype="http://schema.org/Event"
itemclass="SocialEvent BusinessEvent EducationEvent">
<h2><a itemprop="url" href="/2011/oscon/">
<span itemprop="name">OSCON 2011</span></a></h2>
<p itemprop="location" itemscope itemid="/places/portland/"
itemtype="http://schema.org/Place">
<span itemprop="name"><a href="/places/usa/">USA</a> /
<a itemprop="url" href="/places/portland/">Portland</a></span></p>
<p class="date">
<time itemprop="startDate" datetime="2011-07-25">25</time> –
<time itemprop="endDate" datetime="2011-07-29">29 iulie</time>
</p>
...
</li>
modelarea unui eveniment via microdate HTML5,
pe baza schemelor de date oferite de schema.org
(Jeni Tennison, 2011)

@prefix s: <http://schema.org/>
</2011/oscon/> a s:Event ,
s:SocialEvent , s:BusinessEvent ,
s:EducationEvent ;
s:url <http://lanyrd.com/2011/oscon/> ;
s:name "OSCON 2011" ;
s:location </places/portland/> ;
s:startDate "2011-07-25"^^xsd:date ;
s:endDate "2011-07-29"^^xsd:date .
</places/portland/> a s:Place ;
s:url <http://lanyrd.com/places/portland/> ;
s:name "United States / Portland" .
constructiile RDF echivalente pe baza asocierilor
(mappings) realizate – Jeni Tennison, 2011

{ "type" : "http://schema.org/Event",
"id" : "http://lanyrd.com/2011/oscon/",
"properties" : {
"url" : [ "http://lanyrd.com/2011/oscon/" ],
"name" : [ "OSCON 2011" ],
"location" : [
{ "type" : "http://schema.org/Place",
"id" : "http://lanyrd.com/places/portland/",
"properties" : {
"name" : [ "United States / Portland" ],
"url" : [ "http://lanyrd.com/places/portland/" ] }
} ],
"startDate" : [ "2011-07-25" ],
"endDate" : [ "2011-07-29" ]
}
}
modelul de date exprimat in JSON
(accesat via un serviciu Web respectand paradigma REST)

Pentru alte detalii, a se studia articolul
Jeni Tennison, Microdata and RDFa Living Together
in Harmony, august 2011:
http://www.jenitennison.com/blog/node/165

Rezumat
modelarea (meta-)datelor in cadrul paginilor Web

?

Date structurate pe Web: microformate, microdate HTML5, RDFa

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Date structurate pe Web: microformate, microdate HTML5, RDFa

Ähnlich wie Date structurate pe Web: microformate, microdate HTML5, RDFa (20)

Mehr von Sabin Buraga

Mehr von Sabin Buraga (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Date structurate pe Web: microformate, microdate HTML5, RDFa