WADe 2017-2018 Tutorial (2/3): Data Modeling in HTML: Schema.org HTML5 Microdata

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Dezvoltarea aplicațiilor Web
</>date structurate în cadrul documentelor HTML
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 direct în cadrul
documentelor HTML pentru a „explica”
unui program (software – e.g., motor de căutare)
conținutul unei resurse Web

Soluții actuale aliniate problematicilor
Web-ului semantic – Web of Data
microformate – microformats.org
scheme de microdate HTML5 – schema.org
RDFa (standard al Consorțiului Web) – rdfa.info
săptămâna
viitoare

Microdata HTML 5
specificație HTML Living Standard (octombrie 2017)
https://html.spec.whatwg.org/multipage/microdata.html
a se studia și http://html5doctor.com/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
stabilește și domeniul de vizibilitate

Microdata HTML 5
sunt denumite items
specificarea unei proprietăți prin atributul itemprop

Microdata HTML 5
sunt denumite items
referire cu ajutorul atributului itemref

Microdata HTML 5
sunt denumite items
asocierea unui tip de date se face cu atributul itemtype

Microdata HTML 5
sunt denumite items
pentru identificarea unui item se folosește itemid

Există o serie de modele de date
(exprimate via 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
istoric și viziune:
R. Wallis, “Schema.org: Where did that come from?”,
LODLAM Summit 2017
www.slideshare.net/rjw/schemaorg-where-did-that-come-from-77955231

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
amănunte la https://schema.org/docs/gs.html
modele
conceptuale

de explorat ș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
(clasificări realizate riguros)
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

<div itemscope="" itemtype="http://schema.org/RealEstateAgent">
<span itemprop="name">Tuxy Unlimited</span>
<div itemprop="address" itemscope=""
itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Banchiza, 1</span>
<span itemprop="addressLocality">Iasi</span>,
<span itemprop="addressRegion">Iasi</span>
<span itemprop="postalCode">700550</span>
</div>
Phone: <span itemprop="telephone">+4032201090</span>
<a href=
"http://www.openstreetmap.org/way/243817200#map=18/47.17493/27.57378"
itemprop="maps">Details on OpenStreetMap</a>
</div>
fapte vizând
domeniul imobiliar
…pe baza modelului
conceptual schema.org

<p itemid="#busaco" itemscope="" itemtype="http://schema.org/Person">
This discipline is taught by
<span itemprop="honorificPrefix">Dr.</span>
<a href="https://profs.info.uaic.ro/~busaco/"
title="Visit the Website of Sabin-Corneliu Buraga" itemprop="url">
<span itemprop="name">
<span itemprop="givenName">Sabin</span>-
<span itemprop="additionalName">Corneliu</span>
<span itemprop="familyName">Buraga</span>
</span>
</a>.
</span>
</p>
specificarea (adnotarea explicită a) faptului:
„entitatea având numele Sabin-Corneliu Buraga este
o persoană, posedă titlul Dr. și are situl Web propriu
disponibil la adresa https://profs.info.uaic.ro/~busaco/”

extragerea/verificarea de date structurate
via Structured Data Testing Tool
https://search.google.com/structured-data/testing-tool

<section id="week3">
<h2>Săptămâna 3</h2>
<ul>
<li itemscope="" itemtype="http://schema.org/CreativeWork"
itemid="#cliw-lecture3" class="lecture">
<aside class="menu">concurs:
<a href="web-contest.html" title="Detalii">SEO @ CLIW</a></aside>
<p>Curs: <a itemprop="url" title="Prezentare în format PDF"
href="presentations/web03-…-MicrodateHTML5.pdf">
<span itemprop="name">(Re)găsirea resurselor Web</span></a>
</p>
<div class="terms" itemprop="keywords">Web search, robot,
search engine, SEO, HTML5 microdata, schema.org</div>
</li>
…
</ul>
</section>
specificarea în HTML5 a lucrărilor creative
de tip CreativeWork conform schema.org

extragerea informațiilor din HTML5
aici, despre prelegerile materiei Tehnologii Web

<article itemscope="" itemtype="http://schema.org/Event">
<section id="contest">
<h2>Tema</h2>
<p itemprop="description">Concursul este destinat studenților
<span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
<a href="http://www.info.uaic.ro/" itemprop="url" title="Spre situl FII>
<span itemprop="name">FII</span></a>
(UAIC <span itemprop="address">Iași, România</span>)</span>
și constă în optimizarea conținutului și structurii unui sit Web.</p>
…
<p>Perioadă de desfășurare:
<span itemprop="startDate" content="2017-10-14T00:00">14 octombrie 2017
</span>—<strong><span itemprop="endDate" content="2018-01-07T17:00">
7 ianuarie 2018, ora 17:00</span></strong>.</p>
</section>
…
</articol>
pe baza schema.org, se pot modela în HTML date vizând un
eveniment (Event) și locul de desfășurare a acestuia (Place)

date pentru „consum” uman vs. date structurate
interpretate și prelucrate, ulterior, de algoritmi

acțiuni asociate vizualizării unui produs
(instanță a Product)
detalii la http://schema.org/docs/actions.html
caz concret: eBay
acțiuni ce pot fi efectuate de utilizator
(ViewAction e sub-concept al Action)
context: dispozitive mobile, e-mail,…

<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 sărbători pentru toți, acum și cu paiete!</a>
</div>
</div>
</div>
modelarea cunoștințelor privind
produse și oferte comerciale

inspectarea datelor structurate cu OpenLink Structured Data Sniffer
– extensie de browser Web: http://osds.openlinksw.com/
exemple reale: pinterest.com/kidehen/structured-metadata-related/
specificarea meta-datelor privitoare
la instanța de Articol
construcții RDFa utilizând
Open Graph Protocol (Facebook) – ogp.me

extragerea de microdate HTML5, plus convertirea în
triple RDF via Microdata2RDF Service (serviciu REST)
disponibil la http://getschema.org/microdataextractor/about
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.
@prefix schema: <http://schema.org/>.
<_:gs0>
rdf:type <http://schema.org/WebPage>;
schema:name "Web Application Development";
schema:description "syllabus (aka the WADe film)";
schema:license <https://creativecommons.org/licenses/by-nc-sa/4.0/>;
schema:author "#busaco".
"#wade-lecture5"
rdf:type <http://schema.org/CreativeWork>;
schema:url <https://profs.info.uaic.ro/~busaco/teach/.../web05ModelulRDF.pdf>;
schema:name "Data Modeling in RDF (Resource Description Framework)";
schema:keywords "Web, model, RDF, vocabulary, DCMI, FOAF, DOAP, SIOC, JSON-LD".
"#busaco"
rdf:type <http://schema.org/Person>;
schema:url <https://profs.info.uaic.ro/~busaco/>;
schema:name "Sabin-Corneliu Buraga".
detalii în cursul
despre RDF

Studiu de caz:
adnotarea semantică via microdate HTML5 a datelor
în contextul interacțiunii om-calculator
persona și teste de utilizabilitate
(Ștefan Negru & Sabin Buraga, 2012)
http://blankdots.com/open/schema/

model de cunoștințe + proprietăți
specifice asociate conceptului Persona
detalii în cadrul disciplinei
Human Computer Interaction
profs.info.uaic.ro/~busaco/teach/courses/hci/

<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

Observație:
construcțiile schema.org
pot fi „scufundate”
în documentele HTML
și ca date JSON-LD
exemplificare:
exprimarea acțiunii de
interacțiune dintre persoana
Tuxy și organizația UAIC
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "InteractAction",
"agent" : {
"@type" : "Person",
"name" : "Tuxy"
},
"participant" : {
"@type" : "Organization",
"name" : "UAIC"
}
}
</script>
concept

generarea de construcții JSON-LD ce recurg la schema.org
www.microdatagenerator.com

Diverse utilizări practice:
artefacte culturale
A. Isaac, Europeana and Schema.org, DCMI 2013
www.slideshare.net/antoineisaac/europeana-and-schemaorg-dc2013
http://www.few.vu.nl/~aisaac/#pub
biblioteci digitale (digital libraries)
R. Wallis, prezentări la ELAG 2014, Smart Data 2015 etc.
www.slideshare.net/rjw/why-schemaorg-for-libraries
www.slideshare.net/rjw/schemaorg-extending-benefits
lucrări științifice
formatul Scholarly HTML
http://scholarly.vernacular.io/
medicină computațională
http://schema.org/docs/meddocs.html

Diverse utilizări practice:
finanțe
extensia schema.org privitoare la FIBO
(Financial Industry Business Ontology)
http://www.edmcouncil.org/financialbusiness
https://schema.org/FinancialProduct
industria auto
http://auto.schema.org/
IoT (Internet of Things)
http://iot.webschemas.org/docs/iot-gettingstarted.html
http://iot-datamodels.blogspot.com/
turism
C. Bizer, Schema.org Annotations in Websites. Opportunities
& Challenges for the Tourism Industry, TFF’15
www.slideshare.net/TourismFastForward/bizer-christian-schema-orgtourism

A se studia și inițiativa Web Data Commons
extragere cu Common Crawl – http://commoncrawl.org/ –
și acces la seturi de date modelate
via microformate, microdate și RDFa
webdatacommons.org/structureddata/

extragere și export de microformate, microdate HTML5
și RDFa cu extensia POSHex
proiect al absolventului FII Tiberiu Pasat (2013)

Inclusiv, suport pentru scheme de microdate HTML5
implementat în sistemele de management de conținut
(e.g., DokuWiki, Drupal, Joomla, TYPO3, WordPress)
M. Mössmer, Schema.org Plugins for CMS Systems (2014)
http://oc.sti2.at/sites/default/files/schemaorg_cmsplugins.pdf
exemple practice:
https://www.dokuwiki.org/plugin:semantic
https://extensions.joomla.org/extension/google-structured-data-markup
https://wordpress.org/plugins/all-in-one-schemaorg-rich-snippets/

statistici vizând
includerea de meta-date
direct în codul HTML
trends.builtwith.com/docinfo

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

WADe 2017-2018 Tutorial (2/3): Data Modeling in HTML: Schema.org HTML5 Microdata

More Related Content

What's hot (13)

Similar to WADe 2017-2018 Tutorial (2/3): Data Modeling in HTML: Schema.org HTML5 Microdata (20)

More from Sabin Buraga (20)

WADe 2017-2018 Tutorial (2/3): Data Modeling in HTML: Schema.org HTML5 Microdata