Autorem článku je Chris Mills. Originál článku vyšel na webu Opery a je publikován s laskavým souhlasem vydavatele.

Úvod

Jedním z hlavních problémů, které stály před HTML5, bylo vyřešit konzistentnost dokumentů – důkazem budiž sémantické tagy jako <header>, <nav> a <figure>. To je všechno správné a v pořádku, ale přesto jsou chvíle, kdy chcete přidat strojově čitelné metainformace ke kouskům obsahu, aby mohly být snadno zpracovány a využity nějakým zpracovatelským skriptem. Tuto potřebu řeší hned několik technologií, od chytře jednoduchých Mikroformátů po ezoteričtější RDFa.

Pravděpodobně nepřekvapí, že řešení tohoto problému bylo ušito na míru a přidáno do specifikace HTML5 v podobě mikrodat, která zahrnují sadu atributů, jež lze přidat k libovolnému elementu, a s tím spojený DOM API pro zpracování mikrodat na stránce.

Mikrodata se pokouší vylepšit to, co jsme už měli: zabudovaný mechanismus, který je tak snadný jako mikroformáty, ale zároveň umožňuje zpracování dat bez toho, abyste si museli psát vlastní parser. Navíc si můžete, samozřejmě, vytvořit vlastní funkce na zpracování mikrodat v JavaScriptu, pokud je prohlížeč nenabízí. V článku si proběhneme použití Mikrodat a syntaxi funkcí DOM API.

Poznámka: podpora mikrodat je dostupná např. v experimentálním buildu Opery — Více na blogu Opera desktop teamu.

HTML syntaxe

Mikrodata sestávají ze série položek (items) a každá má přiřazená metadata pomocí sady vlastností (properties). Vlastnosti jsou běžné páry „jméno-hodnota“. Pojďme si, dle nejlepších tradic geekovské marnivosti, zapsat v mikrodatech sami sebe! Pište si svá vlastní data, já budu ukazovat, jak na to.

Poznámka: Můžete si zkontrolovat, zda máte data syntakticky správně, když svou stránku pustíte do experimentálního HTML5 validátoru. Dále popisovaný příklad také naleznete na webu – autorova mikrodata.

Nejprve si definujme nějaký použitelný element jako kontejner pro položku, a to pomocí atributu  itemscope:

<article itemscope>
</article>

Samozřejmě, měli byste si vybrat element, který obsahuje ta potřebná data. V našem příkladu změním tento article na biografii. První přidaná vlastnost bude jméno, a přidáme ho tímto způsobem pomocí atributu  itemprop:

<article itemscope>
  <h2 itemprop="name">Chris Mills</h2>
</article>

Atribut itemprop jsme přidali k elementu, který obsahuje požadovaná data, a hodnotou tohoto atributu je jméno vlastnosti. Obsah elementu je hodnota vlastnosti. Přidejme několik dalších vlastností, ať se ujistíme, že jme pochopili princip:

<article itemscope>
  <h2 itemprop="name">Chris Mills</h2>
  <ul>
    <li>Nationality: <span itemprop="nationality">British</span></li>
    <li>Age: <span itemprop="age">33</span></li>
    <li>Hair colour: <span itemprop="colour">Brown</span></li>
  </ul>
</article>

V některých případech nejsou požadovaná data ve formě obsahu nějakého elementu, ale místo toho jsou uvnitř atributu, například:

• URL v atributu  src.
• URL v atributu href u elementu <a>.
• Čas a datum v elementu datetime.

Když je hodnota vlastnosti nějaké URL, bývá vyjádřeno v elementu, které odkazuje na (nebo vkládá) nějaké externí zdroje. Podobně hodnoty, které jsou datovými údaji, jsou vyjádřeny atributem datetime v elementu <time>. V takovém případě přidáme rovněž atribut itemprop, ale hodnota vlastnosti nebude obsah elementu, ale hodnota daného atributu.

Několik příkladů:

<article itemscope>
  <h2 itemprop="name">Chris Mills</h2>
  <p><img itemprop="image" src="Chris-Mills.png" alt="Photo of Chris Mills - this is me"></p>
  <ul>
    <li>Nationality: <span itemprop="nationality">British</span></li>
    <li>Age: <span itemprop="age">33</span></li>
    <li>Date of birth: <time itemprop="birthday" datetime="1978-06-27">June 27th 1978</time></li>
    <li>Hair colour: <span itemprop="colour">Brown</span></li>
  </ul>
</article>

Poznámka: V době psaní článku probíhá ve W3C diskuse o nahrazení elementu <time> elementem <data> , takže se popisovaný postup může změnit.

Vkládání mikrodat do mikrodat

Poměrně jednoduše můžete vnořit jednu položku (item) do druhé. Vnější položka je označena atributem itemscope, jako normálně, a vložené položky mají rovněž atribut itemscope. Názorně – přidám si do své biografie informace o skupině, v níž hraju:

<article itemscope itemtype="http://example.org/biography">

  ...

  <li>
    <div itemscope itemprop="band">
      <h3>My band</h3>
      <ul>
        <li>Name: <span itemprop="name">Conquest of Steel</span></li>
        <li>Band: <span itemprop="style">Heavy metal</span></li>
        <li>Members: <span itemprop="size">5</span></li>
      </ul>
    </div>
  </li>

 ...

</article>

Několik hodnot, stejné jméno; stejná hodnota, několik jmen

Je možné vytvořit několik vlastností se stejným jménem a různými hodnotami – například seznam hudebníků ve skupině:

<li>Members:
  <ul>
    <li itemprop="member">Claymore Clark</li>
    <li itemprop="member">DD Danger</li>
    <li itemprop="member">Dan Durrant</li>
    <li itemprop="member">Chris Mills</li>
    <li itemprop="member">Vic Victory</li>
  </ul>
</li>

Výsledkem bude pět vlastností se jménem member a s různými hodnotami.

Obdobně můžete přiřadit jedné hodnotě víc jmen. Výsledkem bude více vlastností se stejnou hodnotou:

<li>Band: <span itemprop="style favouritemusic">Heavy metal</span></li>

Vlastnosti mimo itemscope

Jsou situace, kdy chcete, aby součástí položky mikrodat byla vlastnost, která není ve stejném elementu jako itemscope. Můžete toho dosáhnout vložením odkazu (reference) na ID prvku, v němž jsou definovány další položky. V následujícím příkladu jsem vyňal seznam muzikantů do jiné části kódu:

<article>

  ...

    <li>
      <div itemscope itemprop="band" itemref="members">
        <h3>My band</h3>
        <ul>
          <li>Name: <span itemprop="name">Conquest of Steel</span></li>
          <li>Band: <span itemprop="style">Heavy metal</span></li>
          <li>Members: <span itemprop="bandsize">5</span></li>
        </ul>
      </div>
    </li>
  </ul>
</article>

    <ul id="members">
      <li itemprop="member">Claymore Clark</li>
      <li itemprop="member">DD Danger</li>
      <li itemprop="member">Dan Durrant</li>
      <li itemprop="member">Chris Mills</li>
      <li itemprop="member">Vic Victory</li>
    </ul>

V tomto případě jsou vlastnosti member vloženy do položky mikrodat odkázáním na ID elementu, ve kterém jsou uvedeny, v atributu  itemref.

Takových externích elementů s vlastnostmi můžete uvést víc a v atributu itemref jejich ID oddělit mezerou:  itemref="members instruments gigdates".

Vytváření obecných slovníků pro položky

To co nyní máme hotové je sice dobré a použitelné samo o sobě, ale jsou tam vlastnosti, které jsme si sami definovali. Jak ale definovat „slovník“, který bychom mohli použít i pro další vývojáře? Odpověď je prostá: Dáme jim typ pomocí atributu itemtype. Tento atribut má hodnotu v podobě URL, které může (nebo nemusí) doopravdy existovat. Pomůže, když URL odkazuje na skutečnou stránku na webu, kde jsou informace o slovníku a jeho atributech pro ostatní uživatele, ale není to nezbytné.

Pojďme zpět k našemu příkladu:

<article itemscope itemtype="http://example.org/biography">
  ...
  <div itemscope itemprop="band" itemtype="http://example.org/band" itemref="members">
    ...
  </div>
  ...
</article>

Položka může být právě jednoho typu. Typ dává vlastnostem kontext – tedy „definuje slovník“. V našem příkladu má položka typu http://example.org/biography čtyři vlastnosti — name, style, bandsize a member. To pomůže proti případným zmatkům se stejně pojmenovanými vlastnostmi. můžete mít například i mikrodata s označením členů poroty, kteří budou označeni rovněž pomocí itemprop="member", ale pokud této položce dáte jiný itemtype, jako například itemtype="http://example.org/jury", zmatkům předejdete.

Měli byste se pořádně zamyslet nad tím, jaký slovník použijete pro svoje potřeby, a ujistit se, že je robustní, flexibilní a rozšiřovatelný. Více informací naleznete ve specifikaci, část Selecting names when defining vocabularies. Rovněž se můžete porozhlédnout po webu, zda už někdo jiný nevytvořil slovník použitelný ve vaší situaci. Prohlédněte si i část specifikace o připravených slovnících pro mikrodata, kde naleznete detaily některých existujících slovníků, portovaných z mikroformátů, jako jsou vCard a vEvent.

Přiřazení globálního identifikátoru k položce

Některé položky už mají přiřazen globální identifikátor, jako je například ISBN u knih nebo UPC pro produkty v obchodech. některé slovníky tyto globální identifikátory podporují (musíte si to nalézt sami, což je důvod, proč doporučujeme dávat slovníkům reálná URL a na nich mít podrobnou dokumentaci). Pokud takový identifikátor použijete, zapište ho jako URI do atributu itemid u toho samého elementu, kde je itemscope a itemtype. Skript nebo vyhledávací robot, který těmto věcem rozumějí (zatím ale o žádném nevíme) bude vědět, že vaše položka patří ke stejnému ISBN, UPC atd. jako něčí jiný obsah se stejným itemid. Pak bude moci bez problémů míchat vaše a jeho data, minimálně do chvíle, kdy internet nabude vědomí a stroje povstanou proti lidstvu.

Jako příklad si uvedeme následující využití slovníku http://example.com/book, kde je uveden jednoznačný identifikátor ISBN:

<article itemscope
    itemtype="http://example.com/book"
    itemid="urn:isbn:978-0321703521">
  <h2 itemprop="title">InterACT with web standards</h2>
  <p>Authors:</p>
  <ul>
    <li itemprop="author">Leslie Jensen-Inman</li>
    <li itemprop="author">Chris Mills</li>
    <li itemprop="author">Glenda Sims</li>
    <li itemprop="author">Aarron Walter</li>
  ...

DOM API pro mikrodata

Mikrodata se stanou mnohem užitečnějšími, když budete moci využít zabudované API pro práci s nimi. Můžete je pak skriptem číst, zpracovávat, prezentovat nebo posílat na jiné stránky…

API je velmi jednoduché – použijete document.getItems() k získání seznamu uzlů, které obsahují položky mikrodat ve vaší stránce. Pokud necháte argumenty prázdné, získáte všechny položky; můžete jako argument uvést URL slovníku a získáte pouze položky se stejným itemtype. Příklad:

var biography = document.getItems("http://example.org/biography");

Můžete tak získat ze stránky informace o osobě a uložit si je v proměnné. K jednotlivým vlastnostem pak můžete přistupovat jako k položkám atributu  properties:

var biography = document.getItems("http://example.org/biography")[0];
alert('Hi there ' + biography.properties['name'][0].textContent + '!');

A to je v zásadě vše podstatné, co můžete s API dělat, opravdu. Některé další užitečné příklady najdete v sekci Using the microdata DOM API ve specifikaci. Philip Jägenstedt udělal zajímavý live microdata viewer, který je použitelný při kontrole kódu a získávání dat v jiném formátu, např. JSON.

Na výše uvedený příklad se můžete podívat live: Autorův příklad s mikrodaty. A nezapomeňte na Opera’s microdata tests — byly před nedávnem zaslány do W3C test suite.

Shrnutí

A tak končí naše krátká procházka po světě mikrodat. Doufám, že vám pomohla pochopit tuto zajímavou technologii.