Dezvoltarea aplicațiilor Web (supliment): Modelarea datelor în HTML: microformate, scheme de microdate HTML5 şi RDFa

Dr. Sabin Buragawww.purl.org/net/busaco

Dezvoltarea aplicațiilor Web

date structurate în cadrul documentelor HTML
microformate, microdate HTML5 & RDFa

Albert Einstein


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


Constatare

clientul care consumă (accesează) reprezentări
de resurse Web nu trebuie obligatoriu să fie uman


Cum am putea descrie conținutul resurselor Web
astfel încât să poată fi procesat “inteligent”?


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

soluții:
microformate
scheme de microdate HTML5
RDFa


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

(Tantek Çelik & Kevin Marks, 2004)

www.microformats.org


Microformate

utilizarea de marcaje (X)HTML pentru a desemna
semantica și/sau structura conținutului


Microformate

utilizarea de marcaje (X)HTML pentru a desemna
semantica și/sau structura conținutului

“curentul” POSH (Plain Old Semantic HTML)


Microformate

reutilizarea unor vocabulare de termeni,
disponibile liber și standardizate


Microformate

reutilizarea unor vocabulare de termeni,
disponibile liber și standardizate
realizarea de adnotări semantice direct în HTML
și alte limbaje similare
prelucrare mai faciltă a reprezentărilor resurselor


Microformate

“clase” CSS pentru prezentare
și asocierea de descrieri
ale meta-datelor

structurarea
paginilor Web:
precizarea
înțelesului
(semanticii)
conținutului


marcaje HTML (<div>, <span>)
pentru specificarea datelor &
structurii lor

elementare (desemnează o singură caracteristică)
+
compuse (specifică mai multe proprietăți
care modelează un aspect de interes
– e.g., un concept: persoană, eveniment,…)


Microformate

asociază unei legături hipertext un termen (tag)
– cuvânt-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>


rel-tag

relații între “prieteni”: colaboratori, rude, cunoscuți,…
<a href="http://www.infoiasi.ro/~dlucanu/"
rel="met, colleague, co-worker, neighbor">
Dorel Lucanu</a>


XFN (XHTML Friend Network)


recurgerea la XFN în cadrul sistemului WordPress

desemnează 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 anunță ediția a VII-a a workshop-ului
dedicat tehnologiilor Web!</div>
</div>


hCalendar

informații de contact despre persoane, organizații etc.
în conformitate cu formatul vCard – RFC 2426


hCard


specificarea informațiilor despre o persoană via hCard

modelează informații despre un CV
folosit în conjuncție cu hCard și hCalendar


hResume

desemnează opinii emise despre „ceva”
(produs, locație, eveniment, persoană,…)


hReview

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

definește coordonatele geografice ale unui loc


geo

simplifică maniera de specificare (2012)

http://microformats.org/wiki/microformats2


Microformate 2

vocabularele sunt definite pe baza unor prefixe

hpudte-

includerea unui microformat
specificarea unei proprietăți simple
desemnarea unui URL
definirea de valori privind data & timpul
specificarea de proprietăți compuse


Microformate 2

exemplu concret de utilizare a microformatului hCard
(în ambele versiuni)
preluat de la https://webfwd.org/about/experts/


<div class="h-card vcard">
<img src="/content/content_about-experts/brendaneich.jpg"
alt="Brendan Eich">
<h5><a href="http://brendaneich.com/"
class="p-name fn u-url url">Brendan Eich</a></h5>
<p class="p-note note">
Created JavaScript, co-founded the mozilla.org project…</p>
<span class="p-category category">Technology</span>
</div>

vocabulare predefinite (în stadiu de ciornă):

h-adr
h-geo
h-resume

h-card
h-item
h-review

h-entry
h-event
h-product h-recipe
h-review-aggregate


Microformate 2

<section class="h-event">
<a class="p-name u-url" href="http://potop.info/2013/">
Potop – ediția 2013</a>
de la <time class="dt-start">2013-10-28</time>
până la <time class="dt-end">2013-11-01</time>, fiind organizat la
<span class="p-location h-card">
<a class="p-name p-org u-url" href="http://www.info.uaic.ro/">
Facultatea de Informatică</a>,
<span class="p-street-address">Strada Berthelot, 16</span>,
<span class="p-locality">Iași</span>,
<abbr class="p-region" title="Iași">IS</abbr>
</span>
</section>

}

"items": [ {
"type": [ "h-event" ],
"properties": {
"name": [ "Potop – ediția 2013" ],
"url": [ "http://potop.info/2013/" ],
"start": [ "2013-10-28" ],
"end": [ "2013-11-01" ],
"location": [ {
"value": "Strada Berthelot, 16, Iași, IS",
"type": [ "h-card" ],
"properties": {
"name": [ "Facultatea de Informatică" ],
"org": [ "Facultatea de Informatică" ],
"url": [ "http://www.info.uaic.ro/" ],
"street-address": [ "Strada Berthelot, 16" ],
"locality": [ "Iași" ],
"region": ["Iași" ]
}
aceleași date în format JSON
}]
}
rezultate în urma procesării
}]

marcajelor HTML


{

Apple
Google
Intel
Last.fm
Six Apart
Yahoo!
XWiki
și multe altele
detalii la http://microformats.org/wiki/implementors


microformate: utilizări

Desigur, putem definite microformate proprii:
hLocation – referențierea (în termeni fuzzy) a locațiilor
(S. Dumitriu, M. Gîrdea & S. Buraga, 2007)
hMusic – specificarea datelor privind producții muzicale
(S. Buraga, 2008)





detectarea și exportul de microformate cu extensia
Operator pentru Firefox

alternativă la microformate
specificație W3C în stadiu de ciornă (octombrie 2012)

www.w3.org/TR/microdata/


Microdata HTML 5

posibilitatea de a specifica perechi de proprietăți
(nume, valoare) “scufundate” în HTML


Microdata HTML 5

grupurile de perechi de proprietăți nume—valoare
sunt denumite items


Microdata HTML 5

sunt denumite items
creare via atributul itemscope
specificarea unei proprietăți prin atributul itemprop
referire cu ajutorul atributului itemref


Microdata HTML 5

sunt denumite items
asocierea unui tip de date se face cu atributul itemtype
pentru identificarea unui item se folosește itemid


Microdata HTML 5

ca tipuri de date se pot folosi microformatele


Microdata HTML 5


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


Există o serie de modele de date
(exprimate via microformate sau microdate)
ce pot fi indexate și folosite
de actualele motoare de căutare?

colecție de vocabulare (scheme de date)
– e.g., Book, Event, LocalBusiness, Movie, Offer, Person,
Place, Recipe, Review, TVSeries,… – recunoscute și
indexate de roboții principalelor motoare de căutare
Bing, Google, Yahoo!, Yandex


schema.org


a se studia și http://www.w3.org/wiki/WebSchemas


<body itemscope itemtype="http://schema.org/WebPage">
<header>
<h1 itemprop="name">
<a href="index.html" title="…">Dezvoltarea aplicațiilor Web</a>
</h1>
<p class="slogan" itemprop="description">prezentările aferente cursului</p>
</header>
<article>
<!– conținut propriu-zis -->
specificarea faptului că Sabin Buraga
</article>
este o persoană
<footer>
<h6>
<span itemscope itemtype="http://schema.org/Person">
<a href="http://www.purl.org/net/busaco" title="…"
itemprop="url" accesskey="S">
<span itemprop="name">Sabin Buraga</span>
</a>
</span>
</h6>
</footer>
</body>
recurgerea la elemente structurale și

scheme de microdate HTML5

<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 evaluări 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> comercianți
Oferta zilei:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="http://jucarii.biz/tucsi/tux-catifea-paiete">
Jucării de groază pentru toți, acum cu paiete</a>
</div>
</div>
</div>

adnotarea semantică via microdate HTML5 a datelor
în contextul interacțiunii om-calculator
persona & teste de utilizabilitate
(Ștefan Negru & Sabin Buraga, 2012)

http://blankdots.com/open/schema/


Studiu de caz:


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


extragerea/verificarea de date structurate
via Structured Data Testing Tool
http://www.google.com/webmasters/tools/richsnippets


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


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

reprezintă un alt format de serializare a modelului RDF
RDF + HTML = RDFa


Specificarea construcțiilor RDF direct în (X)HTML
RDFa

recomandări ale Consorțiului Web

RDFa 1.0 (2008)
RDFa 1.1 (2012 – prima ediție; 2013 – a doua ediție)
www.w3.org/TR/rdfa-core


RDFa

“punte” între Web-ul social și Web-ul datelor

www.w3.org/TR/rdfa-primer/


RDFa

utilizarea unor atribute HTML specifice menite a modela
datele disponibile într-o pagină Web
în vederea procesării acestora de către un program


RDFa

minimal, se pot utiliza atributele specificate de RDFa Lite

www.w3.org/TR/rdfa-lite/


RDFa

vocab – precizează URL-ul vocabularului de date folosit
exemplificări:
http://schema.org/
http://open.vocab.org/terms/


RDFa

typeof – desemnează un tip de date (clasă de „lucruri”)
de exemplu: Event, Person, Product etc.


RDFa

property – specifică o proprietate asociată tipului de date
e.g., pentru tipul Event sunt definite proprietățile
duration, location, startDate, endDate, performers,…
(conform http://schema.org/Event)


RDFa

resource – indică un identificator de resursă (subiectul)
despre care se “vorbește” în termeni de meta-date


RDFa

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


RDFa

prefix – desemnează 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


RDFa

<p vocab="http://schema.org/" typeof="Person"
resource="#tux">
Salut, eu sunt
<span property="name">Tuxy Pinguinescu</span>
și vă invit să vizitați
<a property="url" href="http://tux.info/">situl meu</a>.
</p>


Exemplu recurgând la vocabularul schema.org
adaptare după (Manu Sporny, 2012)

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


Exemplu: modelarea grafului social al unui utilizator
pe baza vocabularului FOAF (Friend Of A Friend)

date adnotate
semantic via RDFa

triplele RDF extrase

http://rdfa.info/play/
un instrument Web de editare și vizualizare a construcțiilor RDFa


redarea
conținutului
marcat

graful RDF
corespunzător


Exemplu: specificarea “punctajului” dat unei resurse
(adnotare semantică 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 și accesarea cunoștințelor
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="2012-11-20T00:00:00Z"></span>
<span property="gr:validThrough" datatype="xsd:dateTime"
content="2013-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">Specificațiile produsului</a>
</div>

modelarea în RDFa a unei oferte de e-business
pe baza Good Relations – după Martin Hepp (2009)

exemplificări:
BestBuy, CheapToTravel, Magento Shop, O’Reilly Media,
Overstock, ProductDB, Yahoo! Real Estate


O listă a siturilor/aplicațiilor care recurg la adnotări
semantice RDFa referitoare la produse via Good Relations
poate fi consultată la
http://notes.3kbo.com/goodrelations-sites

acces la date structurate, nu doar la conținut textual

http://rdfa.info/
diverse biblioteci: http://rdfa.info/dev/


RDFa transformă o pagină Web într-un API


Există o serie de studii de caz
privitoare la RDFa?

abordare WYSISYG (What You See Is What You Get)
generează reprezentări RDFa – inclusiv rNews

recurge la API-uri de adnotare a conținutului textual
(e.g., Alchemy, Open Calais, Ontos, DBpedia)
disponibil și ca extensie pentru WordPress
http://aksw.org/Projects/RDFaCE.html


Generarea de construcții RDFa
pe baza editorului on-line RDFaCE


Generarea de constructii RDFa
pe baza editorului on-line RDFaCE

A. Khalili, S. Auer & D. Hladky (2012)

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


rdf: utilizari – rdfa

inspectarea construcțiilor RDFa din cadrul unui document
HTML via RDFa Highlight bookmarklet

extragerea de triple RDF din construcții RDFa
via instrumentul RADiFy – http://code.google.com/p/radify/
(în acest caz, se folosesc vocabulare ca FOAF și Good Relations)


<#offering> gr:name "Ty Pennington Style Mayfield 4 Pc. Deep Seating Set"
<#offering> gr:hasCurrency "USD"
<#offering> gr:hasCurrencyValue "849.99"


vizualizarea triplelor RDF incluse într-un document HTML
cu extensia Green Turtle RDFa pentru Chrome
aici se recurge la Open Graph Protocol – http://opengraphprotocol.org/


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

model de date pentru includerea de meta-date
din domeniul publicațiilor
(e.g., știri, articole, periodice) în documentele HTML
standard IPTC (International Press
Telecommunications Council) – octombrie 2011
rnews.org


rNews

pe bazează pe microdate HTML5 și/sau RDFa


rNews

detalii în 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 și aserțiunile RDF(a)
sunt indexate de motoarele de căutare
Bing – http://tinyurl.com/b9mx2f2

Google rich snippets – http://tinyurl.com/3c6naq7
Yahoo! BOSS (Build your Own Search Service)
http://developer.yahoo.com/search/boss/

Microformatele pot fi exprimate
via microdate HTML care, la rândul lor,
pot avea asociate construcții RDF(a)


microformate↔microformate↔RDFa

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



<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 după Marco Lisci & Luisa Scarlata (2011)



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

modelarea unui eveniment via microdate HTML5,
pe baza schemelor de date oferite de schema.org
(Jeni Tennison, 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>

</2011/oscon/> a
s:url
s:name
s:location
s:startDate
s:endDate
</places/portland/> a
s:url
s:name

s:Event ,
s:SocialEvent , s:BusinessEvent ,
s:EducationEvent ;
<http://lanyrd.com/2011/oscon/> ;
"OSCON 2011" ;
</places/portland/> ;
"2011-07-25"^^xsd:date ;
"2011-07-29"^^xsd:date .
s:Place ;
<http://lanyrd.com/places/portland/> ;
"United States / Portland" .

construcțiile RDF echivalente pe baza asocierilor
(mappings) realizate – Jeni Tennison, 2011


@prefix s: <http://schema.org/>

"http://schema.org/Event",
"http://lanyrd.com/2011/oscon/",
{
[ "http://lanyrd.com/2011/oscon/" ],
[ "OSCON 2011" ],
[
"http://schema.org/Place",
"http://lanyrd.com/places/portland/",
:
{
:
[ "United States / Portland" ],
:
[ "http://lanyrd.com/places/portland/" ] }
:
:

[ "2011-07-25" ],
[ "2011-07-29" ]


{ "type"
:
"id"
:
"properties" :
"url"
:
"name" :
"location" :
{ "type" :
"id" :
"properties"
"name"
"url"
} ],
"startDate"
"endDate"
}
}

modelul de date exprimat în JSON
(accesat via un serviciu Web respectând paradigma REST)

proiect realizat de Ionuț-Cosmin Atomei (absolvent FII, 2013)


vizualizarea datelor structurate cu SmartWebBrowser


extragere & export de microformate, microdate HTML5
și RDFa cu extensia POSHex – Tiberiu Pasat (2013)
http://students.info.uaic.ro/~constantin.pasat/wad/

Alte resurse de interes privind modelarea și procesarea
datelor structurate disponibile pe Web
sunt disponibile la
http://structured-data.org/




rezumat

modelarea (meta-)datelor în cadrul paginilor Web

Dezvoltarea aplicațiilor Web (supliment): Modelarea datelor în HTML: microformate, scheme de microdate HTML5 şi RDFa

More Related Content

Similar to Dezvoltarea aplicațiilor Web (supliment): Modelarea datelor în HTML: microformate, scheme de microdate HTML5 şi RDFa

More from Sabin Buraga

Dezvoltarea aplicațiilor Web (supliment): Modelarea datelor în HTML: microformate, scheme de microdate HTML5 şi RDFa