Mikroformáty

1. Mikroformáty Ing. Marián Pecko, PhD. doc.Ing. Juraj Vaculík, PhD.,

2. Mikroformáty • spôsob, ako do webových stránok ukladať strojovo čitateľné informácie pomocou súčasného HTML alebo xHTML. • spôsob ako dodať extra sémantiku, ktorá je strojovo čitateľná • vykonávajú sa pomocou atribútov: • class • rel • rev – upadlo do úzadia, keďže ho nikto správne nepoužíval • profile – nie je v HTML5 • každý mikroformát definuje špecifický druh dát • vcard / hcard – adresár • hcalendar – kalendár • ostatné slovníky - http://microformats.org/wiki/Main_Page#Specifications

3. rel - license • pre informácie o licencii <small>Tento článok je licencovaný podlicenciou <a rel="license"href="http://creativecommons.org/licenses/by-nc-sa/2.0/"> Creative Commons Attribution Non-commercial Share-alike (By-<abbr>NC</abbr>-<abbr>SA</abbr>)</a>. </small>

4. XFN • eXtensibleFriendsNetwork • spôsob ako definovať váš vzťah s ľuďmi, ako atribút rel na odkaze na ich domovskú stránku • hodnoty • rel="contact" – pre niekoho, s kým viete ako sa spojiť • rel="me" - udáva vlastníctvo rôznych vašich stránok, vrátane vašich účtov na sociálnych sieťach <p>OliStudholme — <a rel="me"href="http://twitter.com/boblet">sledujte ma na Twitter (@boblet)</a></p>

5. hCard • používa sa pre kontaktné informácie <p class="vcard"><span class="fn">OliStudholme</span> — <a class="url"href="http://oli.jp/">http://oli.jp</a>, or <a class="url" href="http://twitter.com/boblet">follow me on Twitter (@<span class="nickname">boblet</span>)</a>.</p> • fn (fullname) – celé meno, povinný • url – domovská stránka • nickname – prezývka

6. hCalendar • používa sa pre zaznamenanie udalostí <div class="vevent"> <h3><a class="urlsummary" href="http://atnd.org/events/5181"> WDE-ex Vol.11 — DesigningforiPad: Ourexperience so far</a></h3> <p><spanclass="dtstart"><abbrclass="value" title="2010-07-21"> July 21st</abbr> <span class="value">19:00</span></span>- <spanclass="dtend"><span class="value">20:00</span></span> at <a class="locationurl"href="http://www.apple.com/jp/retail/ginza/map/"> Apple Ginza</a></p> </div> • summary – povinný • dtstart – dátum a čas začatia, povinný • dtend – dátum a čas ukončenia

7. Nástroje • na validáciu od Google - Rich Snippets testing tool • http://www.google.com/webmasters/tools/richsnippets

8. Mikrodata používajú sa k zavedeniu sémantiky v rámci existujúceho obsahu webových stránok.

9. Mikrodáta • používajú podporné slovníky pre popis položiek a dvojice názov–hodnota k priradeniu hodnoty a jej vlastnosti • pomáhajú vyhľadávačom a prehľadávačom lepšie pochopiť, aké informácie sú obsiahnuté na webovej stránke • poskytujú tak lepšie výsledky hľadania • pokúšajú sa doplniť základné HTML elementy o atribúty, ktoré sú strojovo čitateľné. • podobnou technológiou je komplexné RDFa a jednoduché Mikroformáty.

10. HTML5 • prináša nové sémantické prvky • starým prvkom dodáva sémantiku • ponúka metadáta, odľahčenú sémantickú meta-syntax • metadáta sú skupiny dvojíc názov-hodnota, ktoré nám dodávajú extra sémantickú informáciu • Google indexuje HTML5 mikrodáta • na čo sú dobré mikrodáta: • sú strojovo čitateľné • jednoduché pridávanie kontaktov do zoznamu, udalostí do kalendára

11. Atribúty • itemscope – definuje skupinu párov názov-hodnota, nazývané položka • itemprop="property-name" – pridáva vlastnosť do položky • názov vlastnosti môže byť slovo alebo URL a hodnota je obsah prvku s týmto atribútom • pre väčšinu prvkov – hodnota je textový obsah prvku • pre prvky s URL atribútom je hodnota URL (<img src="">, <a href="">, <object data="">, etc.) • pre prvok <time> jehodnota atribút datetime • pre <meta itemprop="" content=""> je hodnota atribút content • itemref="" – povoľuje položke obsahovať vlastnosti prvkov, ktoré nie sú potomkami, odkazovaním sa na id prvku, ktoré ich obsahujú

12. Atribúty • itemtype="" – definuje typ položky keď sa použije na rovnaký prvok ako itemscope; hodnota je URL, ktorý sa odkazuje na slovník • itemid="" – povoľuje slovníku definovať globálny identifikátor pre položku, napr. ISBN • používa sa na rovnaký prvok ako atribúty itemscope a itemtype

13. itemscope a itemprop <p itemscope>Budúci týždeň idem na <span itemprop="name">Salter Cane</span>.</p> • itemscope robí z odseku mikrodáta položku • itemprop na potomkovi definuje vlastnosť položky (name) s hodnotou SalterCane • prvok musí obsahovať aspoň jeden itemprop aby bol validný

14. hodnota itemprop z atribútu <p itemscope> <time itemprop="date" datetime="2013-03-18">Budúci týždeň</time> idem na <a itemprop="url"href="http://www.saltercane.com/">Salter Cane</a> <p> • toto definuje položku s vlastnosťami url a date obsahujúce vlastnosti http://www.saltercane.com/ a 2013-03-18 • prvky s URL ako hodnotami: a, area, audio, embed, iframe, img, link, object, source, video • prvky s URL, ktoré nie sú hodnotami: base, script, input

15. hodnota itemprop z atribútu • ak chceme ako hodnotu text musíme dodať ďalšie itemprop <p itemscope> <time itemprop="date" datetime="2013-03-18">Budúci týždeň</time> idem na <a itemprop="url"href="http://www.saltercane.com/"><span itemprop="name">Salter Cane</span></a> </p>

16. Vnorené položky <p itemscope>Bubeníkom v <spanitemprop="name">Salter Cane</span> je <spanitemprop="members" itemscope><spanitemprop="name">Jamie Freeman</span>.</span></p> • definuje položku s dvoma vlastnosťami, name a members • members je vnorená položka s vlastnosťou name; nemá textovú hodnotu • položky, ktoré nie sú súčasťou iných položiek sa nazývajú položky najvyššej úrovne

17. Mnohonásobné vlastnosti <spanitemprop="members" itemscope>Členovia skupiny sú <spanitemprop="name">ChrisAskew</span>, <spanitemprop="name">JeremyKeith</span>, <spanitemprop="name">JessicaSpengler</span> a <spanitemprop="name">JamieFreeman</span>.</span> • položka môže mať viaceré vlastnosti s rovnakým názvom a rôznou hodnotou, ale i viaceré vlastnosti s rovnakou hodnotou • vlastnosť name so 4 hodnotami <p itemscope><span itemprop="guitar vocals">Chris Askew</span> je zasnený.</p> • definuje vlastnosti guitar a vocals s rovnakou hodnotou

18. Odkazovanie sa v rámci stránky <p itemscopeitemref="band-members">I’mgoing to the <a itemprop="url" href="http://www.saltercane.com/"> <spanitemprop="name">SalterCane</span></a> gig <timeitemprop="date" datetime="2010-07-18">next week</time>. Excited!</p> … <p>SalterCane are <spanid="band-members" itemprop="members" itemscope> <spanitemprop="name">ChrisAskew</span>, <spanitemprop="name">JeremyKeith</span>, <spanitemprop="name">JessicaSpengler</span> and <spanitemprop="name">JamieFreeman</span>.</span></p> • definuje vlastnosti url, name a datea odkazuje sa idband-members, ktoré obsahuje položku members so 4 vlastnosťami name

19. <meta> pre vkladanie obsahu <p itemscope><span itemprop="name" itemscope itemref="meta-likes">Fanúšikovia Jessica Spengler <meta id="meta-likes" itemprop="likes" content="Mameshiba"> </span> sú vždy veľmi drsní.</p> • používa sa ak text nie je súčasťou obsahu stránky • keďže niektoré prehliadače dávajú meta tag do hlavičky je dobré sa odkazovať cez itemhref • je to vkladanie skrytého obsahu, čo sa neodporúča – ľahko sa naň zabúda, ťažko sa spravuje

20. itemtype a globálne názvy • hodnota itemtypeje URL, ktoré predstavuje odkaz na slovník, kde sú definované itemprop názvy <p itemscopeitemtype="http://schema.org/MusicGroup"> Išiel som na poslednú noc s hear <a itemprop="url" href="http://saltercane.com/"><span itemprop="name"> Salter Cane</span></a>. Boli vynikajúci!</p> • alternatívne sa môže používať URL pre itempropnázvy <p itemscope> Išiel som na poslednú noc s hear <a itemprop="http://schema.org/MusicGroup/url" href="http://saltercane.com/"><span itemprop="http://schema.org/MusicGroup/name"> Salter Cane</span></a>. Boli vynikajúci!</p>

21. Globálne identifikátory • používa s atribút itemid, ak je definovaný v slovníku; a len na prvkoch kde je itemscope a itemtype <p itemscopeitemtype="http://vocab.example.com/book" itemid="urn:isbn:0321687299"> <!– informácie o knihe --> </p>

22. schema.org slovníky • Bing, Google a Yahoo zostavili súbor mikrodáta slovníkov • ak ich využijeme, potom s týmito sémantickými dátami dokážu pracovať i tieto vyhľadávače • základné slovníky • CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries… • AudioObject, ImageObject, VideoObject (netextové objekty) • Event • Organization • Person • Place, LocalBusiness, Restaurant… • Product, Offer, AggregateOffer • Review, AggregateRating

23. Nástroje • na validáciu od Google - Rich Snippets testing tool • http://www.google.com/webmasters/tools/richsnippets • na tvorenie mikrodát • Schema Creator - Person, Product, Event, Organization, Movie, Book, and Review • http://schema-creator.org/ • Microdata Generator - Attorney, Auto Dealer, Dentist, HVAC, Local Business Schema (NAP), Locksmith, Physician, Plumber, Real Estate, and Restaurant • http://www.microdatagenerator.com/ • HTML5 Microdata Templates - events, organisations, people, reviews, and content • http://microdata.freebaseapps.com/

24. RDFa Resource Description Framework (RDF), systém popisu zdrojov, je rodina špecifikácií vypracovaných (W3C), pôvodne navrhnutých ako model metadát. Používa sa ako všeobecná metóda pre modelovanie informácií v rôznej syntaxi.

25. Model RDF • Metadatový model je založený na myšlienke priradenia výrazu v tvare podmet – vlastnosť - predmet (subjekt –predikát - objekt) k jednotlivým zdrojom. • Týmto výrazom sa v RDF terminológii hovorí trojica. • Podmet určuje, o aký zdroj ide, a vlastnosť určuje charakter zdroje a vyjadruje vzťah medzi podmetom a predmetom. • Napríklad jeden spôsob reprezentácie výroku: „Obloha má modrú farbu“ v RDF je trojica reťazcov: podmet je „obloha“, vlastnosť je „má farbu“ a predmet je „modrá“.

26. Sémantický web • Spôsob popisu zdrojov je hlavným komponentom sémantického webu - návrh konzorcia W3C: evolučný stupeň World Wide Webu, v ktorom môžu aplikácie ukladať, meniť si a používať strojovo čitateľné informácie distribuovane cez sieť, čo by umožnilo používateľom pracovať s informáciami efektívnejšie a s väčšou istotou. • Jednoduchý dátový model RDF a schopnosťmodelovať rôznorodé abstraktné koncepty ho robí použiteľným v aplikáciách pre riadenie znalostí, ktoré sa nezlučujú s aktivitou sémantického webu.

27. RDFa (Resource Description Framework in attributes) • systém popisu zdrojov v atribútoch, je technológia pre prenos štruktúrovaných informácií vo vnútri webových stránok. • RDFa je jeden zo spôsobov zápisu (serializácie) dátového formátu Resource Description Framework (RDF). • K prenosu dát v RDF používa atribúty XHTML alebo HTML elementov webovej stránky. • Rozšiřuje spôsoby použitia atribútov prítomných v špecifikácii (x)HTML (napr. rel alebo href) a zavádza nové atribúty (napr. content).

28. RDFa 1.1 Lite • Resource Description Framework – in – attributes • rozšírenie do HTML5 • funguje ale i v XML, SVG, HTML4, XHTML1 a iné značkovacie jazyky založené na XML • atribúty: • vocab • typeof • property • resource • prefix

29. vocab • definujeme cestu ku slovníku <p vocab="http://schema.org/"> Moje meno je Marián Peckoa môžete mi zavolať na 041-5133065. </p>

30. typeof • definujeme druh dát, o ktorých hovoríme <p vocab="http://schema.org/" typeof="Person"> Moje meno je Marián Peckoa môžete mi zavolať na 041-5133065. </p>

31. property • definujeme vlastnosti dát <p vocab="http://schema.org/" typeof="Person"> Moje meno je <spanproperty="name">Juraj Vaculík</span> a môžete mi zavolať na <spanproperty="telephone">041-5133132</span> alebo navštívte <a property="url" href="http://nf110.uniza.sk/">stránku experimentálneho serveru učebne NF110</a>. </p>

32. resource • definujeme identifikátor dát, na ktorý sa potom môžeme odvolávať <p vocab="http://schema.org/"resource="#pecko"typeof="Person"> Moje meno je <spanproperty="name">Marián Pecko</span> a môžete mi zavolať na <span property="telephone">041-5133065</span> alebo navštívte <a property="url" href="http://fpedas.uniza.sk/~pecko/">moju domovskú stránku</a>. </p> • predpokladajme, že sa daný text nachádza na stránke http://fpedas.uniza.sk/osoby, potom identifikátor na tento súbor dát je http://fpedas.uniza.sk/osoby#pecko

33. prefix • daný slovník nemusí obsiahnuť všetky informácie, ktoré chceme popísať; potom môžeme definovať ďalší slovník s použitím prefixu • ov (OpenVocabulary), a.i. (http://www.w3.org/2011/rdfa-context/rdfa-1.1 ) <p vocab="http://schema.org/" prefix="ov: http://open.vocab.org/terms/"resource="#pecko"typeof="Person"> Moje meno je <spanproperty="name">Marián Pecko</span> a môžete mi zavolať na <span property="telephone">041-5133065</span> alebo navštívte <a property="url" href="http://fpedas.uniza.sk/~pecko/">moju domovskú stránku</a>. Moje obľúbené zviera je <span property="ov:preferredAnimal">Liger</span>. </p>

34. Ďakujem za pozornosť