WADe 2014—2015 (supliment): Modelarea datelor în HTML: microformate & scheme de microdate HTML5

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
</>date structurate în cadrul documentelor HTML
microformate + scheme de microdate HTML5

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

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

Idee:
specificarea unor meta-date (date privind datele)
direct în cadrul documentelor HTML
soluții:
microformate
scheme de microdate HTML5
RDFa

Microformate
(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 facilă a reprezentărilor resurselor

marcaje HTML (<div>, <span>)
pentru specificarea datelor &
structurii lor
„clase” CSS pentru prezentare
și asocierea de descrieri
ale meta-datelor
structurarea
paginilor Web:
precizarea
înțelesului
(semanticii)
conținutului

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

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

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>

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>

recurgerea la XFN în cadrul sistemului WordPress

hCalendar
desemnează evenimente & orare
vezi formatul iCalendar – RFC 2445

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>

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

specificarea informațiilor despre o persoană via hCard

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

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

<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
definește coordonatele geografice ale unui loc

Microformate 2
simplifică maniera de specificare (2012)
http://microformats.org/wiki/microformats2

Microformate 2
vocabularele sunt definite pe baza unor prefixe
h- includerea unui microformat
p- specificarea unei proprietăți simple
u- desemnarea unui URL
dt- definirea de valori privind data & timpul
e- specificarea de proprietăți compuse

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

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

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

{
"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 JSON
rezultate în urma procesării
marcajelor HTML

microformate: utilizări
Google
Intel
Microsoft
Six Apart
Yahoo!
XWiki
și multe altele
detalii la http://microformats.org/wiki/implementors

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)

detectarea și exportul de microformate cu extensia
Operator pentru Firefox

Microdata HTML 5
alternativă la microformate
specificație W3C – Working Draft (octombrie 2013)
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

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

schema.org
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

schema.org
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
modele
conceptuale

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

tipurile primare de date definite de schema.org

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

Thing – schema cea mai generală, incluzând conceptualizări
Action
BroadcastService
CreativeWork
Event
Intangible
MedicalEntity
Organization
Person
Place
Product
Class
Property
modelare de
cunoștințe
(via o ontologie)

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

schema.org
relațiile dintre entități sunt precizate via proprietăți

<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

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

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

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/

model conceptual +
proprietăți specifice asociate
conceptului Persona

<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

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

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

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

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

vizualizarea datelor structurate cu SmartWebBrowser
proiect de licență realizat de Ionuț-Cosmin Atomei
(absolvent FII, 2013)

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

rezumat
</>modelarea (meta-)datelor
în cadrul documentelor HTML

WADe 2014—2015 (supliment): Modelarea datelor în HTML: microformate & scheme de microdate HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WADe 2014—2015 (supliment): Modelarea datelor în HTML: microformate & scheme de microdate HTML5

Similar to WADe 2014—2015 (supliment): Modelarea datelor în HTML: microformate & scheme de microdate HTML5 (20)

More from Sabin Buraga

More from Sabin Buraga (20)

WADe 2014—2015 (supliment): Modelarea datelor în HTML: microformate & scheme de microdate HTML5