microformate, microdate, rdfaadria/teach/wad/l5... · microdata • bing, google, yahoo au creat...
TRANSCRIPT
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>, <span>, 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
– hCard — contine informatii de contact despre persoane si organizatii
– http://microformats.org/wiki/hcard
8
HTML5 Microformate
– hCard — contine informatii de contact despre persoane si organizatii
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
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
<p itemscope> I’m going to <span itemprop="name">Spain</span> with some colleagues next week. Great!</p>
Explicatii:
– p este un item microdata
– Itemprop defineste o proprietate a acestui item numita name si cu valoarea: continutul elementului <span>
– Un item trebuie sa aiba cel putin un itemprop ca sa fie valid
• Itemii pot fi imbricati (nested items)
<p itemscope> Our <span itemprop=“name”>Spain</span> guide will be
<span itemprop=“guide” itemscope> <span itemprop =“name”> John Fisher.</span></span></p>
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
HTML5 Microdata | Atribute
– 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=“”
<p itemscope> 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!</p>
Explicatie: definim un item cu proprietatile url si date ce au valorile http://www.spain.com, si respectiv 2013-09-21
20
HTML5 Microdata | Atribute
– Exercitiu: Dorim ca intregul continut din <a href=“”> sa fie valori ale proprietatilor item-ului
<p itemscope> I’m going to <a itemprop=“url“ href=“http://www.spain.com”> <span itemprop=“name”>Spain</span></a> with some colleagues <time itemprop=“date” datetime=“2013-09-21”> next week</time>. Great!</p>
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
<span itemprop="members" itemscope> My colleges are <span itemprop="name">Chris</span>, <span itemprop="name">Alexandra</span> and <span itemprop="name">Ovidiu</span>.</span>
– Obs. itemprop poate avea valori separate de spatii
<span itemprop="homeLocation workLocation">New York</span>
Atributul itemref=“” – permite realizarea de referinte
<p itemscope itemref=“YYY”> 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!</p>
<span id=“YYY” itemprop="members" itemscope> My colleges are <span itemprop="name">Chris</span>, <span itemprop="name">Alexandra</span> and <span itemprop="name">Ovidiu</span>.</span>
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:
<span itemprop="name">James Cameron</span>
(born <span itemprop="birthDate">August 16, 1954)
</span>
</div>
<span itemprop="genre">Science fiction</span>
<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
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
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
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
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
HTML5 Microformate| Microdate| RDFa - Exemplu: Structured Data Testing Tool - http://www.google.com/webmasters/tools/richsnippets
39
HTML5 Microformate| Microdate| RDFa - Exemplu: Structured Data Testing Tool - http://www.google.com/webmasters/tools/richsnippets
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
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