Microformate, Microdate, RDFaadria/teach/wad/L5... · Microdata • Bing, Google, Yahoo au creat...

Microformate, Microdate, RDFa

Lenuta Alboaie [email protected]

HTML5 Microformate

• Au aparut inainte de HTML 5

– (Tantek Çelik & Kevin Marks, 2004) - www.microformats.org

• Idea: utilizarea de marcaje (X)HTML pentru a desemna semantica (structura) continutului

“Curentul” POSH (Plain Old Semantic HTML- http://microformats.org/wiki/posh

• Au fost proiectate sa utilizeze marcaje HTML 4 si XHTML (<div>, , atributul rel) pentru precizarea intelesului (semanticii) continutului

• Microformatele sunt create pentru date specifice, si se bazeaza uzual pe reutilizarea unor vocabulare de termeni, standardizate ( e.g. vcard – RFC2426, calendar data – RFC 2445,…) sau disponibile liber

• Microformatele nu au scop prezentational, si au rolul de a extinde HTML cu “machine-readable semantics” => roboti|scripturi pot “intelege” mai bine continutul

2

HTML5 Microformate

• elementare (desemneaza o singura caracteristica)

– XFN — specifica relatia intre persoane

– rel-nofollow — destinat in special motoarelor de cautare, semnifica faptul ca linkul nu e important relativ la continut

– rel-license — specifica informatii legate de licenta

– rel-tag — asociaza unei legaturi hipertext un termen (tag) – cuvant cheie ori subiect – ales liber de autor (tagging content)

• compuse (specifica mai multe proprietati care modeleaza un aspect de interes – e.g., un concept: persoana, eveniment,…)

– hCard — contine informatii de contact despre persoane si organizatii

– hCalendar — informatii legate de timp

– …

3

HTML5 Atributul rel

- http://www.w3.org/TR/html5/links.html

4

HTML5 Microformate

– rel-license — specifica informatii legate de licenta

– Motoarele de cautare vor putea astfel sa caute resurse care sunt conform unei anumite licente

5

Google – cautare avansata

HTML5 Microformate

– rel-tag — asociaza unei legaturi hipertext un termen (tag) – cuvant cheie ori subiect – ales liber de autor (tagging content)

– XFN (XHTML Friends Network) - specifica relatia intre persoane

• Apeleaza la atributul rel ce poate lua ca valori: “contact”, “me” – permite revendicarea identitatii, …

6

O persoana poate infera asocierea

intre id-ul de twitter si nume

Si o masina poate infera asocierea

Intre id-ul de twitter si nume

HTML5 Microformate

XFN – in WordPress

7

HTML5 Microformate


– http://microformats.org/wiki/hcard

8

HTML5 Microformate


9

Va puteti crea hCard-uri folosind un hCard creator: http://microformats.org/code/hcard/creator

HTML5 Microformate

– hCalendar- desemneaza evenimente si orare

• Foloseste vocabularul iCalendar – RFC 2445

10

HTML5 Microformate

– hResume- modeleaza informatii despre un CV (poate fi folosit in conjuctie cu hCard si hCalendar)

– hReview – desemneaza opinii emise despre o resursa (produs, locatie, eveniment, persoana,…)

11

HTML5 Microformate

– Specificatii

12

HTML5 Microformate - Instrumente:

– Operator:

– Google Rich Snippet – instrument de testare pentru date structurate

13

HTML5 Microformate - Instrumente:

Hint: In modelarile HTML 5 nu utilizati microformatele care nu sunt permise (e.g. VoteLinks cu atributul rev)

14

HTML5 Microformate

– Utilizare (conform Web Data Commons 2012)

15

Utilizari:

Flickr

www.info.uaic.ro

Last.fm

Twitter

Revyu

Upcoming

WordPress

XWiki

Yahoo! Tech

….

HTML5 Microdata

http://www.w3.org/TR/microdata/

- O alternativa la microformate,

de a adauga informatie semantica

- Ofera posibilitate de a specifica

perechi de proprietati

(nume, valoare) “scufundate”

in HTML

• Grupurile de perechi de

de proprietati nume-valoare

sunt denumite items

16



HTML5 Microdata

17

HTML5 Microdata

- Diferente fata de microformate:

- Microdata foloseste noi atribute globale fata de microdate care “supraincarca” atributul class

- Microdata poate fi parsata de masini fara cunoasterea in prealabil a vocabularului utilizat

- Nu exista nici o legatura particulara intre continutul paginii si itemii microdata prezenti

• Introduce cinci atribute globale:

– itemscope: defineste grupuri de perechi name-value, numite item

– itemprop=“property-name” – adauga o proprietate unui item microdata

– itemref=“” – permite realizarea de referinte

– itemtype=“”

• permite definirea unui global identifier pentru un item microdata

• atributul se foloseste in cadrul aceluiasi element ca si itemscope

18

HTML5 Microdata | Atribute

itemscope: defineste grupuri de perechi name-value, numite microdata item

 I’m going to Spain with some colleagues next week. Great!

Explicatii:

– p este un item microdata

– Itemprop defineste o proprietate a acestui item numita name si cu valoarea: continutul elementului 

– Un item trebuie sa aiba cel putin un itemprop ca sa fie valid

• Itemii pot fi imbricati (nested items)

 Our Spain guide will be

 John Fisher.

Explicatii:

– am definit un item cu doua proprietati: name cu valoarea Spain si guide care nu are o valoare.

– guide este un item imbricat continind proprietatea name cu valoarea John Fisher

• Obs. Itemii care nu sunt parte din alti itemi (au itemscope dar nu si itemprop) se numesc itemi top-level

19

– itemprop=“property-name” – adauga o proprietate unui item microdata

• Numele proprietatii poate fi un cuvant sau un URL

• Valoarea este “continutul” elementului cu acest atribut

– Valoarea poate fi continutul text al elementului

– Pentru elementele cu atributul URL, valoarea este URL din <img src="">, <a href="">, <object data="">, etc.

– Pentru elementul <time> valoarea este continutul atributului datatime=“”

– Pentru <meta itemprop="" content="">, valoarea este continutul atributului content=“”

 I’m going to <a itemprop=“url“ href=“http://www.spain.com”> Spain</a> with some colleagues<time itemprop=“date” datetime=“2013-09-21”> next week</time>. Great!

Explicatie: definim un item cu proprietatile url si date ce au valorile http://www.spain.com, si respectiv 2013-09-21

20

http://www.spain.com/

http://www.spain.com/

– Exercitiu: Dorim ca intregul continut din <a href=“”> sa fie valori ale proprietatilor item-ului

 I’m going to <a itemprop=“url“ href=“http://www.spain.com”> Spain</a> with some colleagues <time itemprop=“date” datetime=“2013-09-21”> next week</time>. Great!

Explicatie: avem un item cu trei proprietati url, name, date ce au valorile http://www.spain.com, Spain si respectiv 2013-09-21

21

HTML5 Microdata | Atribute • Proprietati multiple

– Itemii pot avea proprietati cu acelasi nume si valori diferite

 My colleges are Chris, Alexandra and Ovidiu.

– Obs. itemprop poate avea valori separate de spatii

New York

Atributul itemref=“” – permite realizarea de referinte

 I’m going to <a itemprop=“url“ href=“http://www.spain.com”> Spain</a> with some colleagues<time itemprop=“date” datetime=“2013-09-21”> next week</time>. Great!

 My colleges are Chris, Alexandra and Ovidiu.

22

HTML5 Microdata |Atribute

• itemtype=“”

– defineste tipul unui item cand este folosit in acelasi element ca si itemscope

– valoarea este un URL care este un identificator pentru vocabularul respectiv

• Exemplu: ca tip se pot folosi microdatele

• http://microformats.org/profile/hcard

23

HTML5 Microdata

• Bing, Google, Yahoo au creat schema.org

O colectie de vocabulare (scheme de date) recunoscute de motoarele de

cautare

– Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries…

– Embedded non-text objects: AudioObject, ImageObject, VideoObject

– Event

– Health

– Organization

– Person

– Place, LocalBusiness, Restaurant…

– Product, Offer, AggregateOffer

– Review, AggregateRating

24

Microdata

25

HTML5 Microdata

<div itemscope itemtype ="http://schema.org/Movie">

<h1 itemprop="name“> Avatar</h1>

<div itemprop="director" itemscope itemtype="http://schema.org/Person">

Director:

James Cameron

(born August 16, 1954)



</div>

Science fiction

<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>

</div>

Explicatie: http://schema.org/Movie

26

HTML5

27

- Mai multe proprietati: schema.org

HTML5 Microdata | Instrumente si suport

– Google Rich Snippet testing tool care ajuta la verificarea continutului microdatat folosind schema.org

– http://validator.nu/ - valideaza microdata dar nu si vocabularul asociat

– Parser si convertor: http://foolip.org/microdatajs/live/

– Generator de microdate : http://www.microdatagenerator.com/

Limbaje de programare:

JavaScript: MicrodataJS – ofera un API similar Microdata Dom API

PHP - PHP Microdata library – parsare si export in diferite formate

Ruby - Mida – parser in Ruby

Python – omnidator – parser si convertor (json, CSV,…)

Perl - libhtml-html5-microdata-parser-perl (din Ubunutu 11.10)

Java – any23

Platforme: Drupal, Jumla, WordPress, Virtuoso

De ce am utiliza microdata?

- Adaugarea unui plus de semantica usor de manipulat in JavaScript

- utilizarea via itemtype sau itemprop a unor vocabulare standardizate, conduce la crearea unui “API” al continutului paginii

28

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

RDFa – specificarea constructiilor RDF direct in (X)HTML

- reprezinta un alt format de serializare a modelului RDF

• Recomandari ale consortiului Web:

–RDFa 1.0 (2008)

–RDFa 1.1 (2012) - www.w3.org/TR/rdfa-core

– utilizarea unor atribute specifice menite a modela informatiile disponibile intr-o pagina Web in vederea procesarii acestora de catre calculator

– “punte” intre Web-ul social si Web-ul semantic

– minimal, se pot utiliza atributele specificate de RDFa Lite http://www.w3.org/TR/rdfa-lite/

29

http://www.w3.org/TR/rdfa-core



HTML5 RDFa | Atribute:

• Vocab - precizeaza URL-ul vocabularului de date folosit

Exemplu: http://schema.org/, http://open.vocab.org/terms/

• typeof – desemneaza un tip de date (clasa)

Exemplu : Event, Person, Product etc.

30

HTML5 RDFa | Atribute

• property - specifica o proprietate asociata tipului de date

Exemplu: In http://schema.org/, pentru tipul Person sunt definite proprietatile name, telphone, url…

• Cand o persoana cauta: “phone number for Manu Sporny” motorul de cautare va putea furniza un raspuns mai relevant

31

http://schema.org/

http://schema.org/

http://schema.org/

HTML5 RDFa | Atribute

• resource – daca dorim ca altii sa faca referire (to talk about) despre lucrurile (thing) din pagina noastra, trebuie sa detinem un mecanism prin care le identificam

• Daca resursa de mai sus s-ar gasi la adresa: http://example.org/people, atunci

identificatorul va fi acest URL + valoarea

http://example.org/people#manu atributului resource

=> Contribuim astfel la crearea Web of Things

32

http://example.org/people

HTML5 RDFa | Atribute:

• prefix – se foloseste atunci cand vocabularul folosit nu are toti termenii necesari descrierii elementului respectiv

• RDFa are predefinit si o serie de prefixe populare: dc, foaf, schema => chiar daca autorii nu mai declara cu ajutorul prefix, modelarea este functionabila

www.w3.org/2011/rdfa-context/rdfa-1.1

33

HTML5 RDFa | Instrumente

• Modelare folosind http://rdfa.info/play/ - instrument Web de editare si vizualizare a constructiilor RDFa

34

http://rdfa.info/play/

HTML5 RDFa

Vizualiarea modelului din exemplul anterior:

35

HTML5 RDFa | Instrumente

• RDFa Highlight bookmarklet - inspectarea constructiilor RDFa din cadrul unui document XHTML via RDFa

• RADiFy – http://duncangrant.co.uk/radify/ - extragerea de triple RDF din constructii RDFa

• RuleTheWeb - pentru Firefox http://ruletheweb.org/ - recomandari de resurse pe baza marcajelor RDFa Lite

• RDFACE - http://aksw.org/Projects/RDFACE - editor on-line care permite generarea de constructii RDFa

– recurge la API-uri de adnotare a continutului textual (e.g., Alchemy, Open Calais, Ontos, Dbpedia)

– disponibil si ca extensie pentru WordPress

36

HTML5 Microformate| Microdate| RDFa

• Microformatele, microdatele HTML5 si asertiunile RDF(a) sunt indexate de motoarele de cautare

– Bing – http://tinyurl.com/3mgq27b

– Google rich snippets – http://tinyurl.com/3c6naq7

– Yahoo! BOSS (Build your Own Search Service)

– http://developer.yahoo.com/search/boss/

• Microformatele pot fi exprimate via microdate HTML care, la randul lor, pot avea asociate constructii RDF(a)

37

HTML5 Microformate| Microdate| RDFa - Exemplu: Structured Data Testing Tool - http://www.google.com/webmasters/tools/richsnippets

38


39


40

Bibliografie • Beginning HTML5 si CSS3, Richard Clark, Christopher Murphy, Oli Studholme, Divya Manian,

Springer, 2012

• HTML5 Element Index — HTML5 Doctor (http://html5doctor.com/element-index)

• Towards a Unified Ruby Model by Fantasai (http://fantasai.inkedblade.net/weblog/2011/ruby)

• Microformats: Empowering Your Markup for Web 2.0 by John Allsopp (http://microformatique.com/book)

• Dive into HTML5 — "Distributed," "Extensibility," & Other Fancy Words , Mark Pilgrim

• (http://diveintohtml5.net/extensibility.html)

• Linked data tutorial (introduction to RDFa) (http://ld2sd.deri.org/lod-ng-tutorial)

• Microformats vs RDFa vs Microdata by Philip Jägenstedt (http://blog.foolip.org

• /2009/08/23/microformats-vs-rdfa-vs-microdata)

• www.google.com/support/webmasters/bin/topic.py?topic=21997

• http://www.webmonkey.com/glossary/the-difference-between-the-whatwg-and-the-htmlwg/

• http://requirejs.org/docs/whyamd.html

• http://webdesign.about.com/od/html5tags/qt/rel-author-authorship.htm

http://diveintohtml5.net/extensibility.html

http://www.google.com/support/webmasters/bin/topic.py?topic=21997

http://www.webmonkey.com/glossary/the-difference-between-the-whatwg-and-the-htmlwg/















http://requirejs.org/docs/whyamd.html

http://webdesign.about.com/od/html5tags/qt/rel-author-authorship.htm





Rezumat

• Microformate

• Microdate

• RDFa

42

O parte din exemplele din aceasta prezentare au fost preluate/modificate pe baza exemplelor din:

• Beginning HTML5 si CSS3, R. Clark, C. Murphy, Oli S., D. Manian, Springer, 2012 • Curs - Dezvoltarea Aplicatiilor Web la nivel de client, Sabin Buraga

Întrebări?

43

Microformate, Microdate, RDFaadria/teach/wad/L5... · Microdata • Bing, Google, Yahoo au creat...

Documents

Transcript of Microformate, Microdate, RDFaadria/teach/wad/L5... · Microdata • Bing, Google, Yahoo au creat...