Dajbych.net


Webové mikroformáty

, 12 minut čtení

Výz­nam ob­sahu we­bové stránky měly plně popiso­vat HTML tagy. Web se rychle rozšiřo­val i za hran­ice aka­demické půdy a tak bylo třeba nových tagů k oz­načení ro­zličného ob­sahu, od vizitek až po kuchařské re­cepty. Pro­tože proh­lížeče měly se stylováním nových pro ně ještě neznámých tagů prob­lémy, ujalo se oz­načování ob­sahu ok­likou přes zvláštní názvy CSS tříd. Tyto prak­tiky se oz­načují jako mikro­for­máty a jedná se o ne­júspěšnější me­todu, jak zvýšit sé­man­tiku webu.

Ne­jedná se o řešení el­e­gantní, zato ale funkční a re­spek­to­vané. Mikro­for­máty mají vlastní speci­fikaci nezávis­lou na speci­fikaci HTML. Přestože roli něk­terých mikro­for­mátů pře­bírají nové tagy uve­dené v HTML5, ne­jrozšířenější mikro­for­máty nám ale určitě ještě dlouho zůs­tanou.

Mikro­for­mát může vzni­knout něko­lika způ­soby. Uvedu dva ne­jčastější. V obou pří­padech ne­mají mikro­for­máty žádný dopad na vykreslení stránky proh­lížečem. První způ­sob je, že se konkrét­nímu názvu CSS třídy přiřadí určitý výz­nam. Druhý způ­sob vzniká předefi­nováním možných hod­not atributu rel v tazích <a> a <link>. Po­dle speci­fikace HTML jsou jejich možné hod­noty (al­ter­nate, ap­pendix, chap­ter, con­tents, copyright, glos­sary, help, in­dex, next, prev, sec­tion, start, stylesheet a sub­sec­tion) v praxi naprosto k ničemu. Mikro­for­máty nabízí hod­noty nové.

rel-bookmark

Značí, že od­kaz vede na stránku, o níž se před­pok­ládá, že se její URL neb­ude v čase měnit.

<a href="http://dajbych.net/webove-mikroformaty" rel="bookmark">

rel-directory

Lze použít napřík­lad v in­ter­ne­tovém ob­chodě na stránce výrobku, kde oz­načuje od­kaz na stránku s výpisem všech výrobků ste­jné kat­e­gorie.

<a href="/category/notebooks" rel="directory">

rel-enclosure

Dá se použít k oz­načení přílohy článku. Napřík­lad pod článkem o novém pos­tupu v pro­gramování můžou být takto oz­načeny zdro­jové kódy ke stažení.

<a href="/files/source-examples/linq.zip" rel="enclosure">

rel-home

Oz­načuje hlavní stránku webu. Sice platí nep­sané pravidlo, že po kliknutí na logo společnosti se uži­va­tel dostane na hlavní stránku webu, z hlediska přís­tup­nosti to ale není dostatečné řešení.

<link rel="home" href="http://dajbych.net/" title="Dajbych.net" />

rel-licence

Od­kaz s touto hod­no­tou určuje li­cenci, pod kterou se ob­sah dané stránky může šířit.

<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cz/">

rel-nofollow

Ne­jedná se o nic nového pod sluncem, nicméně o mikro­for­mát se jedná. Dává na­jevo, že ohod­no­cení cílové stránky by nemělo být od­kazu­jící stránkou ovlivněno. Užívá se hlavně v diskuzích a en­cyk­lo­pe­diích, aby nebyly zneužívány zá­plavou ne­sou­vise­jících od­kazů k umělému zvyšování hod­no­cení od­ka­zo­vaných stránek.

<a href="http://dragonyas.dajbych.net/" rel="nofollow">

rel-tag

Výrobky se často řadí do kat­e­gorií, u článků je ale těžší přesně určit, do které kat­e­gorie vlastně patří, pro­tože v praxi sou­visí s něko­lika té­maty. Proto se na blozích místo kat­e­gorií použí­vají spíše štítky. Štítkem se dá stránka jedn­oduše oz­načit ne­jen graficky, ale i kó­dově:

<a href="/tag/Mikroform%C3%A1ty" rel="tag">

Za název štítku je po­važován řetězec za posled­ním lomítkem v adrese. Převládá ná­zor, že by se měl název po­važo­vat za case-sen­si­tive. Má být kó­dovaný po­dle RFC 3986, o což se v .NETu stará me­toda Uri.Escape­DataS­tring.

Tento mikro­for­mát je velmi často im­ple­men­tován špatně. První chy­bou je, že se používá i v Tag Cloudu. To je sez­nam ne­jčastěji použí­vaných štítků na blogu a je umístěn u každého článku. Štítky v něm jsou pak oz­načeny všechny články na blogu, což jistě není úmysl.

Dalším neš­varem je používání štítků pod úryvkem článku. Fak­ticky však patří stránce s článkem, niko­liv stránce s úryvky. Výjimku tvoří jen stránka s úryvky for­má­to­vaná po­dle mikro­for­mátu hAtom.

hAtom

Pro milovníky stat­ických stránek, které jsou výhodné z hlediska zátěže serveru, je for­mát hAtom jako stvořený. Ob­vykle má stránka redakční sys­tém, ze kterého se generuje ob­sah článku, rozcestí, in­for­mační kanály, sitemap, atp. Pro au­tora stat­ických stránek je však namáhavé od­dřít to, co v těchto pří­padech za­jišťuje ASP.NET. Tento for­mát přidává sé­man­tiku, na zák­ladě které je možné rozpoznání jed­notlivých položek webu přímo i s je­jich datem vy­dání. Není nutné pak zavádět vnější definici těchto údajů v samostat­ném souboru ve for­mátu RSS či Atom. hAtom však není určen jen k syn­dikaci, ale právě k dodání sé­man­tiky, aby byla we­bová stránka stro­jově ste­jně dobře čitelná, jako Atom feed. Zamýšlené použití je značení článků na blozích.

<div class="hfeed">     <div class="hentry">         <h2 class="entry-title">             <a href="http://dajbych.net/webove-mikroformaty" rel="bookmark">Webové mikroformáty</a>         </h2>         <abbr title="13.6.2010 14:40:00" class="published">13. června 2010</abbr>         <abbr title="30.6.2010 12:20:00" class="updated">30. června 2010</abbr>         <address class="author">             <cite class="fn">                 <a class="url" href="http://dajbych.net">Václav Dajbych</a>             </cite>         </address>         <p class="entry-summary">Význam obsahu webové stránky měly plně popisovat HTML tagy…</p>         <p>             Tags:             <a href="http://dajbych.net/tag/Web" rel="tag">Web</a>,              <a href="http://dajbych.net/tag/Mikroform%C3%A1ty" rel="tag">Mikroformáty</a>         </p>     </div> </div>

Jed­notlivé položky jsou oz­načeny tří­dou hen­try. Ta má povinné položky en­try-ti­tle, up­dated a au­thor. Nepovinné položky jsou uve­deny ve speci­fikaci. Všechny položky pak mo­hou být v tagu oz­načený tří­dou hfeed. To má smysl ze­jména na rozcestí, kde se určitě použije od­kaz na ob­sah s rel-book­mark. Samotný ob­sah pak bude mít ste­j­nou kostru, jen bude určitě do­pl­něn o ob­sah. Ten bude v tagu s atributem en­try-con­tent.

hCalendar

We­bová stránka, která zve na za­jí­mavou kon­ferenci, by údaje o času a místě konání měla mít kó­dované po­dle ně­jakého stan­dardu, aby šla událost jed­ním klin­utím při­dat do kal­endáře účast­níka. Právě k tomu je určen mikro­for­mát hCal­en­dar.

<span class="vevent"> Česká republika po více než 30 letech opět uvítá 2000 špičkových vědců z celého světa. <span class="summary">Mezinárodní astronautický kongres  <a class="url" href="http://www.iac2010.cz/">IAC 2010</a> </span> se bude konat od <abbr class="dtstart" title="2010-09-27">27. září</abbr>  do  <abbr class="dtend" title="2010-10-01">1. října 2010</abbr>  v  <span class="location">Kongresovém centru Praha</span>. </span>

Celá událost musí být obalena tagem ma­jícím třídu vevent. Povinné položky jsou sum­mary a dt­s­tart. Da­tum by mělo být použito tak, jak je uve­deno v přík­ladě. Da­tum (a čas) začátku či konce události musí být ve for­mátu ISO 8601.

hCard

Na stránkách je často kon­tak­tní in­for­mace, která má mimo počí­tače podobu vis­itky. hCard je vis­itka na webu – stro­jově ste­jně dobře čitelná, jako pro člověka vis­itka pa­pírová. hCard je možné přímo mapo­vat na for­mát vCard (RFC 2426).

<p class="vcard">   <img class="photo" src="http://img.microsoft.com/cze/mscorp/images/budova_3odkaz.jpg" />   <a class="fn org url" href="http://www.microsoft.cz/">Microsoft s.r.o.</a><br />   <span class="adr">     <span class="street-address">Vyskočilova 1461/2a</span><br />     BB Centrum, budova Alpha<br />     <span class="postal-code">140 00</span> <span class="locality">Praha 4</span><br />     <span class="country-name">Czech Republic</span>   </span><br />   <span class="tel">     Tel: <span class="value">+420 261 197 111</span>   </span><br />   <span class="tel">     <span class="type">Fax</span>: <span class="value">+420 261 197 100</span>   </span><br />   Email: <a href="mailto:msczech@microsoft.com" class="email">msczech@microsoft.com</a> </p>

Za kon­takt se po­važuje tag, který má třídu vcard a ob­sahuje ale­spoň název osoby či or­ga­nizace v tagu s tří­dou fn. Přík­lad je pro pochopení snazší, než po­drobné vysvětlení možných hod­not. Proto jen do­pl­ním, že pokud je uve­deno jen fn, jedná se o kon­takt osoby. Pokud je uve­deno fn org, jedná se o kon­takt or­ga­ni­zace. U typu tele­fonu není možné použít li­bo­vol­nou hod­notu. Jed­notlivé typy tele­fonů jsou defi­novány v RFC 2426 na straně 14. Vý­chozí typ je VOICE, což od­povídá u nás použí­vanému Tel. Dále už vás od­kážu na speci­fikaci.

hNews

Jedná se o rozšíření for­mátu hAtom, které je určeno pro zpravo­da­jské weby. Hlavní rozšíření je o zpravo­da­jský zdroj source-org, který je povi­nou položkou každé zprávy – tagu s tří­dou hen­try.

<div class="hentry">   <h2 class="entry-title">     <a href="http://dragonyas.dajbych.net/webove-mikroformaty" rel="bookmark">Webové mikroformáty</a>   </h2>   <abbr title="30.6.2010 18:30:00" class="updated">30. června 2010</abbr>   <address class="author">     <cite class="fn">       <a class="url" href="http://dragonyas.dajbych.net">Vít Dajbych</a>     </cite>   </address>   <p class="entry-summary"> Po přečtení bratrova článku o webových mikroformátech byste měli být v obraze… </p>   <p class="source-org"> <a class="fn org url" href="http://dajbych.net/webove-mikroformaty">Dajbych.net</a> </p> </div>

hProduct

Tento mikro­for­mát slouží k oz­načení výrobku. Má sjed­notit popis výrobků a tím zjedn­odušit předávání in­for­mací o nich mezi výrobcem a prode­jci. Jeho výz­nam snad dostatečně ob­jasňuje to, že je­den z au­torů je Paul Lee z Google Prod­uct Search.

<div class="hproduct">     <h1 class="fn">Real-World Functional Programming</h1>     <p class="identifer"><span class="type">ISBN</span>: <span class="value">9781933988924</span></p>     <div class="description">         <p>Functional programming languages are good at expressing complex ideas in a succinct, declarative way…</p>         <p>This book teaches the ideas and techniques of functional programming applied to real-world problems…</p>     </div>     <div class="review">         <blockquote class="description item">An amazingly good book that puts into words the many benefits of the functional paradigm, and shows …</blockquote>         — <author class="reviewer"><span class="fn">Clive Tong</span>, <span class="role">Software Engineer</span>, <span class="org">Gate Software</span></author>     </div>     <div class="review">         <blockquote class="description item">I'd certainly recommend this to any .NET developer curious about learning how to apply ideas derived from functional programming to their C# code…</blockquote>         — <author class="reviewer"><span class="fn">Mark Needham</span></author>     </div>     <div class="review">         <blockquote class="description item">Seriously though, if you've got any passion for programming and are targeting .NET then you should be reading this now.</blockquote>         — <author class="reviewer"><span class="fn">Tom Kirby-Green</span>, Byte Wrangler and Pixel Artist</author>     </div> </div>

Povin­nou in­for­mací je pouze název pro­duktu v tagu s atribut­tem fn. Další in­for­mace jsou nepovinné, dokonce i cena.

hRecepie

I kuchařské re­cepty mají vlastní mikro­for­mát. Povinné položky jsou fn pro název a in­gre­di­ent pro in­gred­ince. Postup se značí tří­dou in­struc­tions. Dobu trvání lze oz­načit tří­dou du­ra­ton a yield značí výsledné množství. Nepřed­pok­lá­dají se hmot­nos­tní jed­notky, ale klidně stačí uvést, ko­lik lidí se nasytí.

hReview

Mnoho webů ob­sahuje re­cenze na filmy, knihy, restau­race nebo hotely. Tento mikro­for­mát má být otevřeným stan­dar­dem us­nadňu­jící je­jich šíření. Může být použit jako součást hProd­uct, nebo samostatně. V tom pří­padě je ob­jekt, který je re­cen­zován, oz­načen tagem s tří­dou fn. Pokud se jedná o or­ga­ni­zaci nebo společnost, použije se ještě třída org. Za­jí­mavé je, že lze sé­manticky vyjádřit i hod­no­cení od jedné do pěti oz­načením čísla tří­dou rat­ing. Au­tora re­cenze lze uvést vložením kon­taktu ve for­mátu hCard, jen se místo třídy vCard použije třída re­viewer.

hSlice

Web Slice je část stránky, která ob­sahuje údaje, které se často mění. Typ­icky třeba počasí nebo počty medailí olympi­jských týmů. Z poh­ledu uži­vatele se vlastně jedná o desk­topový gad­get v In­ter­net Ex­ploreru, který ale na plochu přetáh­nout ne­jde. Je umístěn v pan­elu oblíbených položek. Jeho text se zvýrazní, do­jde-li k ak­tu­al­izaci. Po kliknutí na něj se zo­brazí okno s výstřižkem we­bové stránky.

<div class="hslice" id="synopticka_mapa"> <h2 class="entry-title">Synoptická mapa</h2> <p class="entry-content"> <img alt="synoptická mapa" src="http://www.chmu.cz/meteo/om/inform/analyza.gif" /> </p> <p>Mapa je obnovována jednou za <abbr class="ttl" title="60">hodinu</abbr>.</p> </div>

Výstřižek je oz­načen tří­dou hs­lice. Pro­tože výstřižků může být na jedné stránce více, je nutné uvést ještě atribut id. Jeho ob­sah je v tagu s tří­dou en­try-con­tent. Název oz­načuje třída en­try-ti­tle. Frekvenci ob­novování určuje časový in­ter­val v min­utách pod položkou ttl. Místo toho lze také uvést čas konce plat­nosti in­for­mace. Po­drob­nosti na­jdete kde jinde než ve speci­fikaci.