dezvoltarea aplicațiilor web (supliment): modelarea datelor în html: microformate, scheme de...

93
Dr. Sabin Buragawww.purl.org/net/busaco date structurate în cadrul documentelor HTML microformate, microdate HTML5 & RDFa Dezvoltarea aplica ț iilor Web

Upload: sabin-buraga

Post on 13-May-2015

268 views

Category:

Technology


0 download

DESCRIPTION

Dezvoltarea aplicațiilor Web (supliment) — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html

TRANSCRIPT

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

date structurate în cadrul documentelor HTMLmicroformate, microdate HTML5 & RDFa

Dezvoltarea aplicațiilor Web

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

Albert Einstein

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Constatare

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Idee:specificarea unor meta-date (date privind datele)

direct în cadrul documentelor HTML

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Idee:specificarea unor meta-date (date privind datele)

direct în cadrul documentelor HTML

soluții:microformate

scheme de microdate HTML5RDFa

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microformate(Tantek Çelik & Kevin Marks, 2004)

www.microformats.org

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microformate

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microformate

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

“curentul” POSH (Plain Old Semantic HTML)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microformate

reutilizarea unor vocabulare de termeni,disponibile liber și standardizate

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

structurareapaginilor Web:

precizareaînțelesului

(semanticii)conținutului

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microformate

elementare (desemnează o singură caracteristică)+

compuse (specifică mai multe proprietățicare modelează un aspect de interes

– e.g., un concept: persoană, eveniment,…)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

rel-tag

asociază unei legături hipertext un termen (tag)– cuvânt-cheie ori subiect – ales liber de autor

(tagging content)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

XFN (XHTML Friend Network)

relații între “prieteni”: colaboratori, rude, cunoscuți,…

<a href="http://www.infoiasi.ro/~dlucanu/"

rel="met, colleague, co-worker, neighbor">

Dorel Lucanu</a>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

recurgerea la XFN în cadrul sistemului WordPress

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

hCalendar

desemnează evenimente & orare

vezi formatul iCalendar – RFC 2445

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

hCard

informații de contact despre persoane, organizații etc.

în conformitate cu formatul vCard – RFC 2426

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

specificarea informațiilor despre o persoană via hCard

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

hResume

modelează informații despre un CV

folosit în conjuncție cu hCard și hCalendar

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

hReview

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

<div class="hreview">

<!-- resursa recenzată -->

<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> <!-- 'punctajul' obținut (5 din 5), sumarul & data recenziei -->

<abbr class="rating stars" title="5">* * * * *</abbr>

<span class="summary title">Modern</span>,

<abbr class="dtreviewed" title="20100518T224500">18 mai</abbr>

</p>

<!-- autorul recenziei marcat prin hCard -->

<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"> <!-- detalii despre recenzie --> </div>

</div>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

geo

definește coordonatele geografice ale unui loc

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microformate 2

simplifică maniera de specificare (2012)

http://microformats.org/wiki/microformats2

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microformate 2

vocabularele sunt definite pe baza unor prefixe

h- includerea unui microformatp- specificarea unei proprietăți simpleu- desemnarea unui URLdt- definirea de valori privind data & timpule- specificarea de proprietăți compuse

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

exemplu concret de utilizare a microformatului hCard(în ambele versiuni)

preluat de la https://webfwd.org/about/experts/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microformate 2

vocabulare predefinite (în stadiu de ciornă):

h-adr h-card h-entry h-event

h-geo h-item h-product h-recipe

h-resume h-review h-review-aggregate

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

<!-- specificarea unui eveniment via microformate versiunea 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>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

{"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 JSONrezultate în urma procesării

marcajelor HTML

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

microformate: utilizări

AppleGoogle

IntelLast.fm

Six ApartYahoo!XWiki

și multe altele

detalii la http://microformats.org/wiki/implementors

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

microformate: utilizări

detectarea și exportul de microformate cu extensia Operator pentru Firefox

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microdata HTML 5

alternativă la microformate

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

www.w3.org/TR/microdata/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microdata HTML 5

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microdata HTML 5

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microdata HTML 5

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

creare via atributul itemscope

specificarea unei proprietăți prin atributul itemprop

referire cu ajutorul atributului itemref

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microdata HTML 5

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

asocierea unui tip de date se face cu atributul itemtype

pentru identificarea unui item se folosește itemid

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Microdata HTML 5

ca tipuri de date se pot folosi microformatele

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

<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:[email protected]">

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>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Există o serie de modele de date(exprimate via microformate sau microdate)

ce pot fi indexate și folositede actualele motoare de căutare?

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

schema.org

colecție de vocabulare (scheme de date)– e.g., Book, Event, LocalBusiness, Movie, Offer, Person,

Place, Recipe, Review, TVSeries,… – recunoscute șiindexate de roboții principalelor motoare de căutare

Bing, Google, Yahoo!, Yandex

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

specificarea faptului că Sabin Buraga este o persoană

recurgerea la elemente structurale și scheme de microdate HTML5

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Studiu de caz: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/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

extragerea/verificarea de date structurate via Structured Data Testing Tool

http://www.google.com/webmasters/tools/richsnippets

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Alte resurse de interes,inclusiv instrumente de validare și conversie,

sunt oferite de situl Webhttp://getschema.org/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Specificarea construcțiilor RDF direct în (X)HTMLRDFa

reprezintă un alt format de serializare a modelului RDF

RDF + HTML = RDFa

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

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

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

utilizarea unor atribute HTML specifice menite a modeladatele disponibile într-o pagină Web

în vederea procesării acestora de către un program

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

minimal, se pot utiliza atributele specificate de RDFa Lite

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

minimal, se pot utiliza atributele specificate de RDFa Lite

vocab – precizează URL-ul vocabularului de date folosit

exemplificări:http://schema.org/

http://open.vocab.org/terms/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

minimal, se pot utiliza atributele specificate de RDFa Lite

typeof – desemnează un tip de date (clasă de „lucruri”)

de exemplu: Event, Person, Product etc.

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

minimal, se pot utiliza atributele specificate de RDFa Lite

property – specifică o proprietate asociată tipului de date

e.g., pentru tipul Event sunt definite proprietățileduration, location, startDate, endDate, performers,…

(conform http://schema.org/Event)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

minimal, se pot utiliza atributele specificate de RDFa Lite

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

minimal, se pot utiliza atributele specificate de RDFa Lite

prefix – desemnează un vocabular specific

e.g., rdf pentru RDF, rdfa – RDFa, xsd – XML Schema

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

RDFa

minimal, se pot utiliza atributele specificate de RDFa Lite

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Exemplu: modelarea grafului social al unui utilizatorpe 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>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

date adnotatesemantic via RDFa

triplele RDF extrase

redareaconținutului

marcat

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

graful RDF corespunzător

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

rdf: utilizari

corelarea și accesarea cunoștințelordespre e-commerce via RDF – @kidehen & @mfhepp (2010)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

<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-businesspe baza Good Relations – după Martin Hepp (2009)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

O listă a siturilor/aplicațiilor care recurg la adnotărisemantice RDFa referitoare la produse via Good Relations

poate fi consultată lahttp://notes.3kbo.com/goodrelations-sites

exemplificări:BestBuy, CheapToTravel, Magento Shop, O’Reilly Media,

Overstock, ProductDB, Yahoo! Real Estate

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

http://rdfa.info/

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Există o serie de studii de cazprivitoare la RDFa?

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Generarea de construcții RDFape baza editorului on-line RDFaCE

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Generarea de constructii RDFape baza editorului on-line RDFaCE

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

rdf: utilizari – rdfa

inspectarea construcțiilor RDFa din cadrul unui document HTML 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>

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

extragerea de triple RDF din construcții RDFavia 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"

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

vizualizarea triplelor RDF incluse într-un document HTMLcu extensia Green Turtle RDFa pentru Chrome

aici se recurge la Open Graph Protocol – http://opengraphprotocol.org/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

recomandări de resurse pe baza marcajelor RDFa Lite extensia RuleTheWeb pentru Firefox

http://ruletheweb.org/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

rNews

model de date pentru includerea de meta-date din domeniul publicațiilor

(e.g., știri, articole, periodice) în documentele HTML

standard IPTC (International PressTelecommunications Council) – octombrie 2011

rnews.org

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

rNews

pe bazează pe microdate HTML5 și/sau RDFa

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

microformate↔microformate↔RDFa

Microformatele pot fi exprimatevia microdate HTML care, la rândul lor,

pot avea asociate construcții RDF(a)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

microformate↔microformate↔RDFa

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

<!-- microformate (utilizarea microformatului hCard) --><div class="vcard">

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

</div>

<!-- microdate HTML5 --><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>

<!-- aceleași construcții exprimate via RDFa --><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)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

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

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

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

{ "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 în JSON(accesat via un serviciu Web respectând paradigma REST)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

vizualizarea datelor structurate cu SmartWebBrowserproiect realizat de Ionuț-Cosmin Atomei (absolvent FII, 2013)

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

extragere & export de microformate, microdate HTML5 și RDFa cu extensia POSHex – Tiberiu Pasat (2013)

http://students.info.uaic.ro/~constantin.pasat/wad/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

microformate↔microformate↔RDFa

Alte resurse de interes privind modelarea și procesarea datelor structurate disponibile pe Web

sunt disponibile lahttp://structured-data.org/

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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busacorezumat

modelarea (meta-)datelor în cadrul paginilor Web