Dajbych.net


Webové mikroformáty

, 14 minut čtení

Význam ob­sahu we­bové stránky měly plně po­pi­so­vat HTML tagy. Web se rychle roz­ši­řo­val i za hra­nice aka­de­mické půdy a tak bylo třeba no­vých tagů k ozna­čení roz­lič­ného ob­sahu, od vi­zi­tek až po ku­chař­ské re­cepty. Pro­tože pro­hlí­žeče měly se stylo­vá­ním no­vých pro ně ještě ne­známých tagů problémy, ujalo se označování ob­sahu okli­kou přes zvláštní ná­zvy CSS tříd. Tyto prak­tiky se ozna­čují jako mi­k­ro­for­máty a jedná se o nejúspěš­nější me­todu, jak zvý­šit sé­man­tiku webu.

Ne­jedná se o ře­šení ele­gantní, zato ale funkční a re­spek­to­vané. Mi­k­ro­for­máty mají vlastní spe­ci­fi­kaci ne­zá­vis­lou na spe­ci­fi­kaci HTML. Přes­tože roli ně­kterých mi­k­ro­for­mátů pře­bírají nové tagy uve­dené v HTML5, nej­roz­šíře­nější mi­k­ro­for­máty nám ale ur­čitě ještě dlouho zů­sta­nou.

Mi­k­ro­for­mát může vznik­nout ně­ko­lika způ­soby. Uvedu dva nej­čas­tější. V obou pří­pa­dech ne­mají mi­k­ro­for­máty žádný do­pad na vy­kres­lení stránky pro­hlí­že­čem. První způ­sob je, že se kon­krét­nímu ná­zvu CSS třídy při­řadí ur­čitý význam. Druhý způ­sob vzniká pře­de­fi­no­vá­ním mož­ných hod­not atri­butu rel v tazích <a> a <link>. Podle spe­ci­fi­kace HTML jsou jejich možné hod­noty (al­ter­nate, ap­pen­dix, chapter, con­tents, co­pyright, glossary, help, in­dex, next, prev, section, start, style­sheet a sub­section) v praxi na­prosto 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­po­kládá, že se její URL ne­bude v čase mě­nit.

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

rel-directory

Lze po­u­žít na­pří­klad v in­ter­ne­to­vém ob­chodě na stránce výrobku, kde ozna­čuje od­kaz na stránku s vý­pi­sem všech výrobků stejné ka­te­go­rie.

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

rel-enclosure

Dá se po­u­žít k ozna­čení přílohy článku. Na­pří­klad pod člán­kem o no­vém po­stupu v pro­gra­mo­vání mů­žou být takto ozna­čeny zdro­jové kódy ke sta­žení.

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

rel-home

Ozna­čuje hlavní stránku webu. Sice platí ne­psané pra­vi­dlo, že po klik­nutí na logo spo­leč­nosti se uži­va­tel do­stane na hlavní stránku webu, z hle­diska přístup­nosti to ale není do­sta­teč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 kte­rou 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 no­vého pod slun­cem, nicméně o mi­k­ro­for­mát se jedná. Dává najevo, že ohod­no­cení cílové stránky by ne­mělo být od­ka­zující strán­kou ovliv­něno. Užívá se hlavně v dis­ku­zích a en­cy­klo­pe­diích, aby ne­byly zne­u­ží­vány zá­pla­vou ne­sou­vi­sejí­cích od­kazů k umě­lému zvy­šo­vání hod­no­cení od­ka­zo­va­ných strá­nek.

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

rel-tag

Výrobky se často řadí do ka­te­go­rií, u článků je ale těžší přesně ur­čit, do které ka­te­go­rie vlastně patří, pro­tože v praxi sou­visí s ně­ko­lika té­maty. Proto se na blo­zích místo ka­te­go­rií po­u­ží­vají spíše štítky. Štít­kem se dá stránka jed­no­duše ozna­čit nejen gra­ficky, ale i kó­dově:

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

Za ná­zev štítku je po­va­žo­ván ře­tě­zec za po­sled­ním lo­mít­kem v ad­rese. Pře­vládá ná­zor, že by se měl ná­zev po­va­žo­vat za case-sensi­tive. Má být kó­do­vaný podle RFC 3986, o což se v .NETu stará me­toda Uri.Es­ca­pe­Da­ta­String.

Tento mi­k­ro­for­mát je velmi často im­ple­men­to­ván špatně. První chy­bou je, že se po­u­žívá i v Tag Cloudu. To je se­znam nej­čas­těji po­u­ží­va­ných štítků na blogu a je umís­těn u kaž­dého článku. Štítky v něm jsou pak ozna­čeny všechny články na blogu, což jistě není úmysl.

Dal­ším ne­šva­rem je po­u­ží­vání štítků pod úryv­kem článku. Fak­ticky však patří stránce s člán­kem, ni­ko­liv stránce s úryvky. Vý­jimku tvoří jen stránka s úryvky for­má­to­vaná podle mi­k­ro­for­mátu hA­tom.

hAtom

Pro mi­lov­níky sta­tic­kých strá­nek, které jsou výhodné z hle­diska zátěže ser­veru, je for­mát hA­tom jako stvo­řený. Ob­vykle má stránka re­dakční systém, ze kte­rého se ge­ne­ruje ob­sah článku, roz­cestí, in­for­mační ka­nály, si­te­map, atp. Pro au­tora sta­tic­kých strá­nek je však namá­havé od­dřít to, co v těchto pří­pa­dech za­jiš­ťuje ASP.NET. Tento for­mát při­dává sé­man­tiku, na zá­kladě které je možné roz­po­znání jed­not­li­vých po­lo­žek webu přímo i s je­jich da­tem vy­dání. Není nutné pak za­vádět vnější de­fi­nici těchto údajů v sa­mo­stat­ném sou­boru ve for­mátu RSS či Atom. hA­tom však není ur­čen jen k syn­di­kaci, ale právě k do­dání sé­man­tiky, aby byla we­bová stránka stro­jově stejně dobře či­telná, jako Atom feed. Zamýšlené po­u­žití je zna­čení článků na blo­zí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­not­livé po­ložky jsou ozna­čeny tří­dou hen­try. Ta má po­vinné po­ložky en­try-title, up­da­ted a author. Ne­po­vinné po­ložky jsou uve­deny ve spe­ci­fi­kaci. Všechny po­ložky pak mo­hou být v tagu ozna­čený tří­dou hfeed. To má smysl zejména na roz­cestí, kde se ur­čitě po­u­žije od­kaz na ob­sah s rel-bookmark. Sa­motný ob­sah pak bude mít stej­nou kostru, jen bude ur­čitě do­pl­něn o ob­sah. Ten bude v tagu s atri­bu­tem en­try-con­tent.

hCalendar

We­bová stránka, která zve na za­jí­ma­vou kon­fe­renci, by údaje o času a místě ko­nání měla mít kó­do­vané podle ně­ja­kého stan­dardu, aby šla udá­lost jed­ním kli­nutím při­dat do kalen­dáře účast­níka. Právě k tomu je ur­čen mi­k­ro­for­mát hCalen­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 mají­cím třídu ve­vent. Po­vinné po­ložky jsou sum­mary a dt­start. Da­tum by mělo být po­u­žito tak, jak je uve­deno v pří­kladě. Da­tum (a čas) za­čátku či konce udá­losti musí být ve for­mátu ISO 8601.

hCard

Na strán­kách je často kon­taktní in­for­mace, která má mimo po­čítače po­dobu vi­sitky. hCard je vi­sitka na webu – stro­jově stejně dobře či­telná, jako pro člo­věka vi­sitka pa­pírová. hCard je možné přímo ma­po­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ří­klad je pro po­cho­pení snazší, než po­drobné vy­svět­lení mož­ných hod­not. Proto jen do­pl­ním, že po­kud je uve­deno jen fn, jedná se o kon­takt osoby. Po­kud je uve­deno fnorg, jedná se o kon­takt or­ga­ni­zace. U typu te­le­fonu není možné po­u­žít li­bo­vol­nou hod­notu. Jed­not­livé typy te­le­fonů jsou de­fi­no­vány v RFC 2426 na straně 14. Výchozí typ je VOICE, což od­po­vídá u nás po­u­ží­va­nému Tel. Dále už vás od­kážu na spe­ci­fi­kaci.

hNews

Jedná se o roz­šíření for­mátu hA­tom, které je ur­čeno pro zpra­vo­daj­ské weby. Hlavní roz­šíření je o zpra­vo­daj­ský zdroj source-org, který je po­vi­nou po­lož­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 mi­k­ro­for­mát slouží k ozna­čení výrobku. Má sjed­no­tit po­pis výrobků a tím zjed­no­du­šit pře­dá­vání in­for­mací o nich mezi výrob­cem a pro­dejci. Jeho význam snad do­sta­tečně ob­jas­ňuje to, že je­den z au­torů je Paul Lee z Go­o­gle Pro­duct 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>

Po­vin­nou in­for­mací je pouze ná­zev pro­duktu v tagu s atri­but­tem fn. Další in­for­mace jsou ne­po­vinné, do­konce i cena.

hRecepie

I ku­chařské re­cepty mají vlastní mi­k­ro­for­mát. Po­vinné po­ložky jsou fn pro ná­zev a in­gre­di­ent pro in­gre­dince. Po­stup se značí tří­dou in­structi­ons. Dobu tr­vání lze ozna­čit tří­dou du­ra­ton a yield značí výsledné množ­ství. Ne­před­po­klá­dají se hmot­nostní jed­notky, ale klidně stačí uvést, ko­lik lidí se na­sytí.

hReview

Mnoho webů ob­sahuje re­cenze na filmy, knihy, re­stau­race nebo ho­tely. Tento mi­k­ro­for­mát má být ote­vře­ným stan­dar­dem usnad­ňující je­jich šíření. Může být po­u­žit jako sou­část hPro­duct, nebo sa­mo­statně. V tom pří­padě je ob­jekt, který je re­cen­zo­ván, ozna­čen tagem s tří­dou fn. Po­kud se jedná o or­ga­ni­zaci nebo spo­leč­nost, po­u­žije se ještě třída org. Za­jí­mavé je, že lze sé­man­ticky vyjá­d­řit i hod­no­cení od jedné do pěti ozna­če­ním čísla tří­dou ra­ting. Au­tora re­cenze lze uvést vlo­že­ním kon­taktu ve for­mátu hCard, jen se místo třídy vCard po­u­žije třída re­viewer.

hSlice

Web Slice je část stránky, která ob­sahuje údaje, které se často mění. Ty­picky třeba po­časí nebo po­čty me­dailí olym­pij­ských týmů. Z po­hledu uži­va­tele se vlastně jedná o desk­to­pový gad­get v In­ter­net Ex­plo­reru, který ale na plo­chu pře­táh­nout nejde. Je umís­těn v pa­nelu ob­líbe­ných po­lo­žek. Jeho text se zvýrazní, do­jde-li k ak­tua­li­zaci. Po klik­nutí na něj se zob­razí 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 ozna­č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ě atri­but id. Jeho ob­sah je v tagu s tří­dou en­try-con­tent. Ná­zev ozna­čuje třída en­try-title. Frek­venci ob­no­vo­vání ur­čuje ča­sový in­ter­val v mi­nutách pod po­lož­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 spe­ci­fi­kaci.