Post on 15-Jul-2015
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
www.purl.org/net/busa
co
“Imaginația este mai importantă ca erudiția.”
Albert Einstein
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Constatare
clientul care consumă (accesează) reprezentăride resurse Web nu trebuie obligatoriu să fie uman
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Cum am putea descrie conținutul resurselor Webastfel încât să poată fi procesat „inteligent”?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Idee:specificarea unor meta-date (date privind datele)
direct în cadrul documentelor HTML
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Microformate(Tantek Çelik & Kevin Marks, 2004)
www.microformats.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Microformate
utilizarea de marcaje (X)HTML pentru a desemnasemantica și/sau structura conținutului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Microformate
reutilizarea unor vocabulare de termeni,disponibile liber și standardizate
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
hCalendar
desemnează evenimente & orare
vezi formatul iCalendar – RFC 2445
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
hCard
informații de contact despre persoane, organizații etc.
în conformitate cu formatul vCard – RFC 2426
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
hResume
modelează informații despre un CV
folosit în conjuncție cu hCard și hCalendar
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
hReview
desemnează opinii emise despre „ceva”(produs, locație, eveniment, persoană,…)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
<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>
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Microformate 2
simplifică maniera de specificare (2012)
http://microformats.org/wiki/microformats2
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
<!-- specificarea unui eveniment via microformate versiunea 2 -->
<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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
microformate: utilizări
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
www.purl.org/net/busa
co
microformate: utilizări
detectarea și exportul de microformate cu extensia Operator pentru Firefox
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Microdata HTML 5
posibilitatea de a specifica perechi de proprietăți(nume, valoare) „scufundate” în HTML
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Microdata HTML 5
grupurile de perechi de proprietăți nume—valoare sunt denumite items
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Microdata HTML 5
ca tipuri de date se pot folosi microformatele
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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: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>
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
diverse proprietăți ce relaționează Integer cu alte concepte
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Person – modelează conceptul „persoană”http://schema.org/Person
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
schema.org
relațiile dintre entități sunt precizate via proprietăți
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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>
<!-- 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
<!-- 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>
microformate↔microdateadaptare după Marco Lisci & Luisa Scarlata (2011)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
model conceptual + proprietăți specifice asociate
conceptului Persona
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
extragerea/verificarea de date structurate via Structured Data Testing Tool
http://www.google.com/webmasters/tools/richsnippets
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Alte resurse de interes,inclusiv instrumente de validare și conversie,
sunt oferite de situl Webhttp://getschema.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
vizualizarea datelor structurate cu SmartWebBrowserproiect de licență realizat de Ionuț-Cosmin Atomei
(absolvent FII, 2013)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
extragere și export de microformate, microdate HTML5 și RDFa cu extensia POSHex – Tiberiu Pasat (2013)
http://students.info.uaic.ro/~constantin.pasat/wad/