wade 2014—2015 (supliment): modelarea datelor în html: microformate & scheme de microdate...

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Dezvoltarea aplicațiilor Web

</>date structurate în cadrul documentelor HTML

microformate + scheme de microdate HTML5

Dr.

Sab

in B

ura

ga


co

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

Albert Einstein

Dr.

Sab

in B

ura

ga


co

Constatare

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

direct în cadrul documentelor HTML

Dr.

Sab

in B

ura

ga


co

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

direct în cadrul documentelor HTML

soluții:microformate

scheme de microdate HTML5RDFa

Dr.

Sab

in B

ura

ga


co

Microformate(Tantek Çelik & Kevin Marks, 2004)

www.microformats.org

Dr.

Sab

in B

ura

ga


co

Microformate

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

Dr.

Sab

in B

ura

ga


co

Microformate

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

„curentul” POSH (Plain Old Semantic HTML)

Dr.

Sab

in B

ura

ga


co

Microformate

reutilizarea unor vocabulare de termeni,disponibile liber și standardizate

Dr.

Sab

in B

ura

ga


co

Microformate

reutilizarea unor vocabulare de termeni,disponibile liber și standardizate

realizarea de adnotări semantice direct în HTMLși alte limbaje similare

prelucrare mai facilă a reprezentărilor resurselor

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Microformate

elementare – desemnează o caracteristică unică+

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

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

Dr.

Sab

in B

ura

ga


co

rel-tag

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

(tagging content)

Dr.

Sab

in B

ura

ga


co

rel-tag

<p>Tutorial despre <a href="http://www.slideshare.net/tag/web"

rel="tag">www</a>.</p>

<p>Expertiză: <a href="http://en.wikipedia.com/wiki/Unix"

rel="tag" class="skill">UNIX</a>.</p>

<a href="http://flickr.com/photos/tags/Penguin" rel="tag">

<img src="tux.jpg" alt="Foto cu un pinguin" /></a>

Dr.

Sab

in B

ura

ga


co

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>

Dr.

Sab

in B

ura

ga


co

recurgerea la XFN în cadrul sistemului WordPress

Dr.

Sab

in B

ura

ga


co

hCalendar

desemnează evenimente & orare

vezi formatul iCalendar – RFC 2445

Dr.

Sab

in B

ura

ga


co

hCalendar

<div class="vevent">

<a class="url" href="http://designjamiasi2014.eventbrite.com/

<abbr class="dtstart" title="20141031">October 31</abbr> --

<abbr class="dtend" title="20141101">November 01, 2014</abbr>

<span class="summary">Design Jam Iasi #3</span> la

<span class="location">FII, UAIC Iasi</span></a>

<div class="description">Un atelier de lucru vizând designul Web</div>

</div>

Dr.

Sab

in B

ura

ga


co

hCard

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

în conformitate cu formatul vCard – RFC 2426

Dr.

Sab

in B

ura

ga


co

specificarea informațiilor despre o persoană via hCard

Dr.

Sab

in B

ura

ga


co

hResume

modelează informații despre un CV

folosit în conjuncție cu hCard și hCalendar

Dr.

Sab

in B

ura

ga


co

hReview

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

geo

definește coordonatele geografice ale unui loc

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Microformate 2

simplifică maniera de specificare (2012)

http://microformats.org/wiki/microformats2

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

<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 de utilizare a microformatului hCard(în ambele versiuni)

Dr.

Sab

in B

ura

ga


co

Microformate 2

vocabulare predefinite – unele î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

Dr.

Sab

in B

ura

ga


co



<section class="h-event">

<a class="p-name u-url" href="http://designjamiasi2014.eventbrite.com/">

Design Jam Iasi #3</a>

de la <time class="dt-start">2014-10-31</time>

până la <time class="dt-end">2014-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>

Dr.

Sab

in B

ura

ga


co

{"items": [ {

"type": [ "h-event" ],"properties": {

"name": [ "Design Jam Iasi #3" ],"url": [ "http://designjamiasi2014.eventbrite.com/" ],"start": [ "2014-10-31" ],"end": [ "2014-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

Dr.

Sab

in B

ura

ga


co

microformate: utilizări

GoogleIntel

MicrosoftSix Apart

Yahoo!XWiki

și multe altele

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

Dr.

Sab

in B

ura

ga


co


Desigur, putem defini 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)

Dr.

Sab

in B

ura

ga


co


detectarea și exportul de microformate cu extensia Operator pentru Firefox

Dr.

Sab

in B

ura

ga


co

Microdata HTML 5

alternativă la microformate

specificație W3C – Working Draft (octombrie 2013)

www.w3.org/TR/microdata/

Dr.

Sab

in B

ura

ga


co

Microdata HTML 5

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

Dr.

Sab

in B

ura

ga


co

Microdata HTML 5

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

Dr.

Sab

in B

ura

ga


co

Microdata HTML 5


creare via atributul itemscope

specificarea unei proprietăți prin atributul itemprop

referire cu ajutorul atributului itemref

Dr.

Sab

in B

ura

ga


co

Microdata HTML 5


asocierea unui tip de date se face cu atributul itemtype

pentru identificarea unui item se folosește itemid

Dr.

Sab

in B

ura

ga


co

Microdata HTML 5

ca tipuri de date se pot folosi microformatele

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

modeleconceptuale

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

tipurile primare de date definite de schema.org

Dr.

Sab

in B

ura

ga


co

diverse proprietăți ce relaționează Integer cu alte concepte

Dr.

Sab

in B

ura

ga


co

Thing – schema cea mai generală, incluzând conceptualizăriAction

BroadcastService

CreativeWork

Event

Intangible

MedicalEntity

Organization

Person

Place

Product

Class

Property

modelare de cunoștințe

(via o ontologie)

Dr.

Sab

in B

ura

ga


co

Person – modelează conceptul „persoană”http://schema.org/Person

Dr.

Sab

in B

ura

ga


co

schema.org

relațiile dintre entități sunt precizate via proprietăți

Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

microformate↔microdateadaptare după Marco Lisci & Luisa Scarlata (2011)

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

model conceptual + proprietăți specifice asociate

conceptului Persona

Dr.

Sab

in B

ura

ga


co

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

moștenite de la Person

Dr.

Sab

in B

ura

ga


co

Microformatele și microdatele HTML5sunt 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/

Dr.

Sab

in B

ura

ga


co

extragerea/verificarea de date structurate via Structured Data Testing Tool

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

Dr.

Sab

in B

ura

ga


co

Diverse utilizări practice recente:

lucrări științifice – J. Mixter et al., Describing Theses and Dissertations Using Schema.org, DCMI 2014

www.slideshare.net/oclcr/describing-theses-and-dissertations-using-schemaorg

biblioteci digitale – R. Wallis, Why schema.org for Libraries, ELAG 2014

www.slideshare.net/rjw/why-schemaorg-for-libraries

artefacte culturale – A. Isaac, Europeana and Schema.org, DCMI 2013

www.slideshare.net/antoineisaac/europeana-and-schemaorg-dc2013

Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


co

vizualizarea datelor structurate cu SmartWebBrowserproiect de licență realizat de Ionuț-Cosmin Atomei

(absolvent FII, 2013)

Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


co

rezumat

</>modelarea (meta-)datelor

în cadrul documentelor HTML