Kódujme sémanticky s mikroformáty: hAtom

Mikroformát hAtom, jak již název vypovídá, se inspiruje ve formátu Atom. Pomocí hAtom můžete přímo v HTML vyznačit obsah, který má být syndikován. Předvedeme, jak se hAtom vytváří a ukážeme si některé nástroje, které s ním umí pracovat. Mikroformát hAtom inspiroval i vývojáře Internet Exploreru 8.

Seriál: Kódujme sémanticky s mikroformáty (11 dílů)

  1. Kódujme sémanticky s mikroformáty: úvod 15.10.2008
  2. Kódujme sémanticky s mikroformáty: 1. část – rel 22.10.2008
  3. Kódujme sémanticky s mikroformáty: 2. část – XFN 29.10.2008
  4. Kódujme sémanticky s mikroformáty: 3. část – hCard 5.11.2008
  5. Kódujme sémanticky s mikroformáty: hCard (dokončení) 12.11.2008
  6. Kódujme sémanticky s mikroformáty: 4. část – hCalendar 19.11.2008
  7. Kódujme sémanticky s mikroformáty: hCalendar (dokončení) 26.11.2008
  8. Kódujme sémanticky s mikroformáty: hAtom 3.12.2008
  9. Kódujme sémanticky s mikroformáty: hResume 10.12.2008
  10. Kódujme sémanticky s mikroformáty: náměty a problémy 17.12.2008
  11. Kódujeme sémanticky s Mikroformáty: Value Class Pattern 2.12.2009

Seriál Kódujme sémanticky s mikroformáty je překladem anglického originálu, který na svém blogu A Blog Not Limited vydává webdesignerka Emily Lewis.

Již jsem se v tomto seriálu zabývala několika mikroformáty, které jsem implementovala na A Blog Not Limited: rel-based, XFN, hCard a hCalendar.

Nyní nastal čas, abychom si něco pověděli o mikroformátu hAtom, který přidává strukturu a sémantiku webovému obsahu, který může být distribuovaný (syndicated), např. příspěvky na blogu nebo aktuální články.

Historie: Atom

Mikroformát hAtom je založen na XML formátu pro distribuci obsahu Atom.

Na rozdíl od přesné (1:1) reprezentace hCard/vCard a hCalendar/vCa­lendar, kterou jsme popsali v předchozích dílech, hAtom není přesný obraz formátu Atom.

Atom je totiž robustní model, který poskytuje mnohem více funkcí, než je třeba pro obsah typu článků na blogu. Proto hAtom používá pouze minimální počet elementů, je tedy spíše podmnožinou formátu Atom.

Každopádně vlastnosti a podvlastnosti hAtom jsou založeny na jménech odpovídajících elementů ve formátu Atom.

Popis částí obsahu, distribuce není nutná

Ačkoli je hAtom založen na Atom, samotný hAtom není formát pro distribuci. Autor a editor formátu hAtom David Janes vysvětluje:

… hAtom nikdy nebyl zamýšlen jako formát pro distribuci nebo jako soupeř pro Atom či RSS. Je jednoduše vymyšlen tak, aby popisoval části obsahu webových stránek, třeba příspěvky na blogu. Použili jsme Atom, protože používá dobrou jmennou konvenci pro popis takových elementů.

Takže hAtom není pouze pro webový obsah, který by mohl být distribuován. Ale pro účely tohoto článku budu mluvit o příspěvcích na blogu, které jsou typicky distribuované.

Základy

Předtím než se pustíme do podrobného popisu mikroformátu hAtom, pojďme si projít pár základních pravidel (podobně jako u hCalendar a hCard):

  • Vlastnosti a podvlastnosti jsou vyjádřeny hodnotami class.
  • Kvůli blízkému vztahu k formátu Atom, vlastnosti a podvlastnosti hAtom odrážejí koncept elementů v Atom.
  • Jména vlastností a podvlastností jsou citlivá na velikost písmen (case-sensitive).
  • Hlavní („root“) vlastnost nesmí být kombinována s žádnou svou vlastností/pod­vlastností. Takže <p class="hfeed author"> je špatně.

A (stejně jako pro všechny mikroformáty) na použitých HTML značkách nezáleží (ačkoli by mohly být jak validní tak sémanticky správné).

To, co definuje mikroformát hAtom, jsou hodnoty class (vlastnosti a podvlastnosti).

Profil

Pokud se rozhodnete implementovat hAtom, měli byste odkazovat na jeho profil v hlavičce <head> webové stránky, na které ho použijete:

<head profile="http://purl.org/uF/hAtom/0.1/"> 

Jak u hCard, tak u hCalendar, jsem zmínila možnost použití kombinovaného profilu, který pokrývá všechny schválené mikroformáty:

<head profile="http://purl.org/uF/2008/03/"> 

Ale specifikace hAtom je ve stádiu návrhu a tím pádem jeho profil není obsažen v kombinovaném profilu. Musíte na něj jednoznačně odkázat sami.

Pokud také odkazujete i kombinovaný profil, jednoduše přidáte profil hAtom. (W3C povoluje definovat více profilů najednou, oddělených mezerou):

<head profile="http://purl.org/uF/2008/03/ http://purl.org/uF/hAtom/0.1/"> 

Nastavení atributu profile ovšem není nutné a prakticky žádný nástroj pracující s mikroformáty toto nastavení nevyžaduje (pozn. redakce).

Příklad: jediný příspěvek

To by k úvodu stačilo. Následuje příklad, jak jsem implementovala hAtom na stránce s plným zněním jednoho článku:

<div class="hentry">
  <h3 class="entry-title">Web Accessibility Is Important</h3>
  <abbr class="published" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr>
  <p class="category">
    <a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">
      Commentaries
    </a>
  </p>
  <p><a href="#commentForm" title="Post your own comment">Got something to say?</a></p>
  <div class="entry-content">
    <p>The National Federation of the Blind v. Target lawsuit was settled
     this past Wednesday on the following key terms:</p>
    …
  </div>
  <dl>
    <dt>Tags:</dt>
      <dd>
        <a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel="tag">
          accessibility
        </a>
      </dd>
      <dd>
        <a href="http://www.ablognotlimited.com/articles/tag/standards/" rel="tag">
          standards
        </a>
      </dd>
      <dd>
        <a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">
          web design
        </a>
      </dd>
  </dl>
</div> 

Hlavní (root) vlastnost: hfeed

Základem hAtom je vlastnost hfeed, která může obsahovat jednu nebo více položek (v tomto příkladě jsou položky články na blogu).

Tato hlavní vlastnost je volitelná. Pokud ji do kódu nevložíte, předpokládá se, že obaluje celou stránku. Což je přesně to, co jsem udělala (či spíše neudělala) já ve výše uvedeném příkladě.

Pokud to uznáte za vhodné, stránka může obsahovat i více vlastností  hfeed.

Povinná vlastnost: hentry

Každá položka musí být obalena vlastností hentry. Jak jsem již zmínila, můžete použít jednu nebo více (teoreticky nekonečně mnoho) vlastností hentry.

V mém příkladě je pouze jedna vlastnost hentry, protože na celé stránce se vyskytuje jen jediný článek. O použití více položek si povíme později.

Vlastnost hentry obaluje všechny informace o položce.

Povinná podvlastnost: entry-title

Jedna z povinných podvlastností je entry-title, která označuje titulek položky.

V mém příkladě jsem entry-title aplikovala na <h3>, protože je to titulek a ze sémantického hlediska je dobré jej vložit do nadpisu.

Povinná podvlastnost: author

Další povinná podvlastnost je author, která označuje autora položky.

Dle specifikace musí být obsah, který je obalen podvlastností author, také označen za pomoci mikroformátu hCard, který je aplikován na element <address>.

Námitka: nechci zobrazovat jméno autora

Jsou zde ale případy, včetně mého blogu, kde vydavatel stránek nechce zobrazovat jméno autora.

Specifikace tuto možnost zohledňuje a umožňuje vyjmutí class=„author“hentry pokud samotná stránka obsahuje hCard informace v elementu <address>, kterému je přiřazeno class=„author“.

Tato alternativa je také vysvětlena v hAtom FAQ.

Protože já mám informace hCard v požadovaném formátu na každé stránce v patičce, vyjmula jsem vlastnost author z mé implementace mikroformátu hAtom a vše je přitom stále validní.

Pro blogy s více autory, které také nechtějí zobrazovat jméno autora, v současné době neexistuje validní alternativa. V  hentry prostě musí být obsažen author.

Dovedu si ale v takových případech představit řešení, že potlačíme ( display:none) zobrazení této informace pomocí kaskádových stylů.

Námitka: address s hCard

Ale to celé vyvolává další problém: použití <address> pro hCard.

Jak jsem zmínila ve 3. části, použití <address> pro hCard je správné řešení jen tehdy, pokud hCard popisuje vlastníka dokumentu. V jiných případech hCard FAQ nedoporučují použít <address> pro hCard.

Z toho vyplývá, že pokud položky hCard jsou podepsány někým jiným než autorem dokumentu, element <address> není ten správný sémantický element, který bychom měli použít.

O tomto problému se v současné chvíli diskutuje. Bylo navrženo, aby se zrušilo povinné použití elementu <address>.

Povinná podvlastnost: updated

Podvlastnost updated je také povinná a označuje datum/čas poslední aktualizace položky.

Ještě jedna poznámka k  updated: pokud tato podvlastnost není definována, je místo ní použita podvlastnost published.

V mém příkladě si všimněte, že jsem nepoužila podvlastnost updated. Místo ní jsem použila published.

Což mě přivádí k …

Volitelná podvlastnost: published

Volitelná podvlastnost published je téměř identická s  updated v tom smyslu, že obsahuje datum/čas vztahující se k položce.

Primární rozdíl je v tom, že published označuje datum publikace položky, zatímco updated může být datum/čas publikace nebo datum/čas poslední aktualizace.

Samozřejmě také můžete použít jak published tak updated najednou:

<abbr class="published updated" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr> 

V mé implementaci jsem se rozhodla použít jen podvlastnost published, protože pro mé účely stačí (a dle mého názoru je i vhodnější ji použít).

Designové vzory pro datum a čas

Jak pro datum/čas v  updated, tak v  published je v mikroformátu hAtom doporučeno používat designové vzory pro datum a čas:

<abbr class="published" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr> 

Tyto vzory specifikují, že obalový element je <abbr>, který má v atributu title informaci o datu/čase ve strojově čitelném formátu, zatímco obalená (a prohlížeči zobrazovaná) informace je snadno čitelná lidmi.

Dále designové vzory pro datum a čas specifikují, že hodnota atributu title by měla být ve formátu ISO 8601.

A, jak jsem již rozebírala minule, jsou zde obavy o problémy s přístupnustí designových vzorů pro datum a čas.

Prozatím nebyly tyto problémy odstraněny, ale komunita okolo mikroformátů na tom usilovně pracuje.

Volitelná podvlastnost: entry-summary

Podvlastnost entry-summary je volitelná. Označuje shrnutí nebo extrakt z položky. Tato podvlastnost může být použita vícekrát a musí být v  hentry.

Nevytvářím na mém blogu žádná shrnutí článků, takže jsem tuto podvlastnost nepoužila.

Volitelná podvlastnost: entry-content

Další volitelná podvlastnost je entry-content, která označuje celý obsah položky.

V mém příkladu je celý obsah článku obalen jedním <div class="entry-content">. Ale podvlastnost entry-content může být v  hentry použita kolikrát chcete.

Volitelné: rel-bookmark

hAtom také specifikuje hodnotu rel, která označuje trvalý odkaz na položkubookmark.

1. části tohoto seriálu jsem mluvila o mikroformátech založených na rel, které jsou používány k určení vztahů mezi odkazem ( <a>) a jeho cílem ( href).

rel-bookmark je jen další příklad toho, jak popsat vztahy určené odkazy. Ale není to samostatný mikroformát, existuje pouze jako část mikroformátu hAtom pro popis trvalého odkazu (permalink).

Pokud používáte hAtom, prostě jednoduše přidáte rel="bookmark" do permalinku na položku:

<a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/"
   rel="bookmark">
     Web Accessibility Is Important
</a> 

Všimněte si, že ve svém prvním příkladě nemám permalink. Je tomu tak proto, že v zásadě vždy se řídím pravidlem rule–of–thumb, které říká, že nemáme poskytovat aktivní odkaz na právě zobrazenou stránku (Nielsen’s #10 of the Ten Most Violated Homepage Design Guidelines).

A protože rel-bookmark je volitelné, můj hAtom je pořád validní.

Pokud hentry nemá specifikovaný permalink, je místo něj použito URL stránky. Dále, pokud má hentry definovaný atribut id, jeho hodnota je přidána na konec tohoto URL, aby se identifikovaly jednotlivé položky na stránce.

Kategorie a kombinování mikroformátů

Také jsem v 1. části seriálu zmínila mikroformát rel-tag.

Přidává se k odkazům ( <a>), které označují, o čem je stránka (nebo její část). V zásadě se tedy jedná o organizaci/ka­tegorizaci za pomoci tagování, které se často používá na blozích.

hAtom využívá informace rel-tag (to je to krásné na kombinování mikroformátů), které jsou obaleny jak hfeed, tak hentry:

  • Odkazy, kterým je přidán rel=„tag“ a jsou umístěny uvnitř hfeed(pamatujte si, že ten může být vynechán a pak se vztahuje na celou stránku), ale vně hentry jsou považovány za „kategorie kanálů“ („feed categories“).
  • Odkazy, kterým je přidán rel=„tag“ a jsou umístěny v  hentry jsou považovány za „kategorie položek“.

V mém příkladě jsem vložila rel-tag do hentry jak pro „kategorie“, tak pro tagy

<p class="category">
  <a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">
    Commentaries
  </a>
</p> 
<dd>
  <a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">
    web design
  </a>
</dd> 

Vzpomeňte si, že specifikace rel-tag vyžaduje, aby cíl odkazu ( href) obsahoval vlastní hodnotu „tagu“ jako poslední část odkazovaného URL. Říká se tomu „tagspace“.

Příklad: více položek na stránce

Teď když jsme si detailně prošli mikroformát hAtom, řekla jsem si, že by bylo dobré si ukázat i implementaci s více položkami na stránce.

Na mém blogu jsem přidala hAtom i na homepage, kde se objevují mé tři nejnovější články:

<div class="hentry">
   <h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel="bookmark">Web Accessibility Is Important</a></h3>
   <abbr class="published" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr>

   <p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
   <div class="entry-content">
   <p>The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:</p>

   …
   </div>
   <p><a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel="bookmark">Continue Reading</a></p>
   <dl>
   <dt>Tags:</dt>

      <dd><a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel="tag">accessibility</a></dd>
      <dd><a href="http://www.ablognotlimited.com/articles/tag/standards/" rel="tag">standards</a></dd>
      <dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">web design</a></dd>

   </dl>
</div>
<div class="hentry">
   <h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/plateau/" rel="bookmark">Plateau</a></h3>

   <abbr class="published" title="2008-08-27T13:59:51-07:00">Aug 27, 2008</abbr>
   <p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
   <div class="entry-content">

   <p>As I posted previously, I'm doing the one hundred push ups challenge: a six-week program designed to get me able to do 100 consecutive push ups. I am now on my seventh week.</p>
   </div>
   <p><a href="http://www.ablognotlimited.com/articles/plateau/" rel="bookmark">Continue Reading</a></p>
   <dl>

   <dt>Tags:</dt>
      <dd><a href="http://www.ablognotlimited.com/articles/tag/exercise/" rel="tag">exercise</a></dd>
      <dd><a href="http://www.ablognotlimited.com/articles/tag/fitness/" rel="tag">fitness</a></dd>

      <dd><a href="http://www.ablognotlimited.com/articles/tag/push+ups/" rel="tag">push ups</a></dd>
   </dl>
</div>
<div class="hentry">

   <h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-introduction/" rel="bookmark">Getting Semantic With Microformats, Introduction</a></h3>
   <abbr class="published" title="2008-09-05T07:05:34-07:00">Sep 5, 2008</abbr>

   <p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
   <div class="entry-content">
   <p>I'm an organizer with a sometimes frustrating need to pay attention to the smallest details.</p>

   …
   </div>
   <p><a href="http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-introduction/" rel="bookmark">Continue Reading</a></p>
   <dl>
   <dt>Tags:</dt>

      <dd><a href="http://www.ablognotlimited.com/articles/tag/French+translation/" rel="tag">French translation</a></dd>
      <dd><a href="http://www.ablognotlimited.com/articles/tag/hAtom/" rel="tag">hAtom</a></dd>
      <dd><a href="http://www.ablognotlimited.com/articles/tag/hCalendar/" rel="tag">hCalendar</a></dd>

      …
   </dl>
</div> 

Na tomto příkladě si všimněte, že používám více instancí hentry; jednu pro každý článek.

Také si všimněte, že jsem označila permalink na každý článek (nadpis a odkaz „Continue Reading“), protože to nejsou odkazy na aktuální stránku.

Kromě těchto dvou odlišností je implementace hAtom shodná jako v mém prvním příkladě.

Další možné implementace

Kromě mých dvou příkladů, které jsem vám zde poskytla, je zde mnoho dalších možných implementací hAtom:

  • Seznam položek, které se objevují v archivu
  • Výsledky vyhledávání
  • Aktuality
  • Komentáře

Přemýšlím o tom, že jakmile budu mít volnou chvilku, implementuji hAtom v archivu a ve výsledcích vyhledávání (a možná i v komentářích, protože ty stejně potřebují hCard).

Status: v návrhu

Ze všech mikroformátů, o kterých jsem v této sérii mluvila, to bylo o hAtom nejtěžší. Osobně si myslím, že je to díky tomu, že se jedná o specifikaci ve stádiu návrhu.

V zásadě jsem se setkala jen s drobnými, ale maličko frustrujícími, problémy:

  • O specifikaci a vlastnostech/pod­vlastnostech hAtom je dostupných o mnoho méně informací.
  • Několik nevyřešných problémů, o kterých se intenzivně diskutuje, dělají z implementace hAtom pořádnou výzvu (kupříkladu použití <address>).
  • Porovnáme-li hAtom s ostatními mikroformáty, tak pro hAtom existuje mnohem méně dostupných nástrojů a zdrojů.
  • Dostupné generátory a parsery hAtom nevypadají (alespoň mně se nezdají) stejně aktuální jako je specifikace. Jako takové neberou v potaz některé námitky, které jsem zmínila (kupříkladu vyjmutí author a rel-bookmark).

Ovšem z mého pohledu, to vše lze od specifikace ve stádiu návrhu očekávat. Stále se na ní pracuje, vyvíjí se, upravuje a diskutuje.

Ale nemyslím si, že by to byl dobrý důvod pro to, abyste neimplementovali hAtom nebo se s ním alespoň neseznámili. Prostě jej vyzkoušejte a jen si pamatujte, že specifikace je v některých bodech náchylná ke změnám.

Nástoje a zdroje

Ačkoli jsem zmínila, že existuje o mnoho méně dostupných nástrojů a zdrojů, přeci jen jich pár je:

Mikroformát hAtom a Internet Explorer 8

Webový prohlížeč Internet Explorer verze 8 obsahuje novinku webslices (nazývanou také výřezy). Ta je mikroformátu hAtom velmi podobná (webslices bychom mohli s klidným svědomím nazvat odlehčeným bratříčkem hAtom), obsahuje shodné názvy některých podvlastností, např. entry-title a entry-content. Od hAtom se liší zej. tím, že neobsahuje vlastnost hentry, ale jeho hlavní (kořenovou) vlastností je  hSlice.

Také účel webslices je trochu jiný. Zatímco hAtom je formát spíše obecný, webslices jsou navrženy pro jeden konkrétní účel, kterým je samostatné zobrazení části (výřezu) webové stránky v prohlížeči. Vlastní formát je proto jednodušší, neobsahuje např. výše diskutovanou povinnost označení autora obsahu apod.

Nelze opomenout fakt, že hSlice (výřezy) jsou historicky prvním mikroformátem, který je nativně implementovaný v nějakém webovém prohlížeči (v tomto případě v Internet Exploreru, pro Firefox existuje rozšíření).

V divočině

Ačkoli je hAtom stále ve stádiu návrhu, začíná se používat:

A existuje samozřejmě mnoho dalších příkladů použití hAtom.

Výhody

Distribuce (X)HTML

Myslím si, že jedna z nejúžasnějších věcí na hAtom je jeho potenciál pro umožnění distribuce XHTML.

V seznamu nástrojů a zdrojů jsem zmínila několik transformátorů. Používají XSLT k přeměně XHTML s hAtom do XML pro kanál Atom nebo RSS.

To znamená, že není potřeba vytvářet a udržovat zvláštní XML soubory pro Atom nebo RSS. Jednoduše stačí použít hAtom a jeden z těchto transformátorů a XML pro distribuci je vygenerováno automaticky.

Vyzkoušejte to sami. Vše co musíte udělat je přidat před URL vaší stránky s hAtom (například http://www.ablog­notlimited.com/) url stránky transformátoru (http://transfor­mr.co.uk/hatom/):

<a href="http://transformr.co.uk/hatom/http://www.ablognotlimited.com/">Atom feed for A Blog Not Limited</a>

Výsledný odkaz vytvoří Atom XML a uživatelé jej mohou použít jako distribuční kanál vaší stránky:

Přihlášení ke Google Reader přes hAtom

Osobně jsem tuto možnost na svém blogu nepoužila a mám speciálně upravený RSS kanál a nehodlám se vzdát svých úprav. Kanál Atom musím teprve přidat.

Každopádně tyto transformace jsou rozhodně na mém seznamu funkcí, které chci více prozkoumat.

Sémantika

Nemysleli jste si snad, že bych na ní zapomněla, že ne?

Za pomoci existujících standardů (XHTML značky a atributy), přidávají mikroformáty sémantickou hodnotu webovému obsahu. A sémantika pomáhá jak lidem, tak strojům procházet, prohledávat a porozumět webu.

Mikroformáty také podporují webové standardy … standardní přístup k označení obsahu, pojmenovávání tříd ( class), a dokonce procesu vývoje.

Sémantika je dobrá. Standardy také. Mikroformáty jakbysmet.

V dalším díle

To by bylo k mikroformátu hAtom vše.

V další části seriálu se podíváme na mikroformát hResume pro psaní životopisu. Těšte se!

Tento článek je překladem textu Getting Semantic With Microformats, Part 5: hAtom, jehož autorkou je Emily Lewis a je zde zveřejněn s laskavým svolením autorky.

Používáte mikroformát hAtom?

Čtení na léto

Jaké knihy z oboru plánujete přečíst během léta? Pochlubte se ostatním ve čtenářské skupině Zdrojak.cz na Goodreads.com.

Zdroj: http://www.zdrojak.cz/?p=2885