Přejít k navigační liště

Zdroják » Webdesign » Kódujme sémanticky s mikroformáty: 4. část – hCalendar

Kódujme sémanticky s mikroformáty: 4. část – hCalendar

Články Webdesign

Pokud chcete do webových stránek vkládat informace o událostech (obecně jakékoliv položky, které mohou být součástí kalendáře), můžete využít mikroformát hCalendar. V dnešním díle představíme, k čemu hCalendar slouží a nastíníme jeho základní strukturu (vlastnosti a podvlastnosti).

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.

Tak jsme tu opět, a ponoříme se do úžasného (alespoň pro mne) světa mikroformátů. Podle plánu je tento článek přibližně uprostřed našeho seriálu. Zatím jsem rozebrala tři implementace mikroformátů na A Blog Not Limited:

  • Specifikaci vztahů za pomoci odkazů, které používají atribut rel1. části
  • Přidání „lidské tváře“ odkazům za použití mikroformátu XFN v 2. části
  • Popisování lidí, firem a míst za pomoci mikroformátu hCard v 3. části

To není špatné. Ale pořád jsme se mikroformátů jen lehce dotkli.

Takže se rovnou pojďme ponořit do mikroformátu hCalendar, který používám pro přidání sémantiky a struktury obsahu. Popisuje události či časem a datem vymezené aktivity.

Vše začalo u iCalendar

Formát iCalendar (neboli iCal) je standard pro sdílení dat z kalendářů. Často se používá v e-mailech, ale není omezen jen na ně.

Podobně jako hCard, byl i hCalendar vytvořen jako způsob, který umožní používat iCalendar tvůrcům webového obsahu.

Mikroformát hCalendar je přesnou (1:1) reprezentací formátu iCalendar, což umožňuje parserům vytáhnout ze stránky informaci o události a použít ji (mimo jiné) v elektronických kalendářích.

Historická poznámka: iCalendar je založen na vCalendar (Virtuální kalendář), což je open source aplikace pro správu událostí a plánování online. vCalendar byl vyvinut spolu s formátem vCard pro elektronické vizitky.

Časově vymezené aktivity

Mikroformát hCalendar označuje ten typ informací o události (nebo o čemkoli, co je časově vymezeno), které byste měli ve svém kalendáři, včetně (ale ne pouze):

  • Shrnutí (krátkého popisu události)
  • Datumu a času
  • Místa
  • Podrobného popisu
  • Opakování události

Základy

Stejně jako hCard, tak i hCalendar má několik základních pravidel:

  • Vlastnosti (properties) a podvlastnosti (sub-properties) jsou vyjádřeny hodnotami  class.
  • Vzhledem k přesnému kopírování formátu iCalendar jsou specifické vlastnosti hCalendar založeny na jménech vlastností v iCalendar (kupříkladu  vevent).
  • Jména vlastností a podvlastností jsou case-sensitive (citlivá na velikost písmen).
  • Hlavní („root“) vlastnost nesmí být kombinována s žádnou z jejích podvlastností. Takže <p class="vevent summary"> je nevalidní.

A ačkoli toto není pravidlo, je důležité to mít na paměti: na použitých značkách vůbec nezáleží, protože mikroformát hCalendar definují hodnoty class (vlastnosti/pod­vlastnosti).

Přesto silně doporučuji používat sémantický (a validní) kód.

Profil

Stejně jako u všech mikroformátů, je doporučeno v <head>  webové stránky, která jej používá, odkazovat profil hCalendar:

<head profile="http://purl.org/uF/hCalendar/1.0/"> 

W3C povoluje použití vícenásobných hodnot u profilu, které jsou odděleny mezerou, takže můžete najednou odkazovat tolik profilů, kolik chcete.

<head profile="http://gmpg.org/xfn/11 http://purl.org/uF/hCard/1.0/ http://purl.org/uF/hCalendar/1.0/"> 

Ale pokud odkazujete již hotové mikroformáty (a tím mikroformát hCalendar je), můžete místo toho použít kombinovaný profil, který pokrývá všechny hotové mikroformáty:

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

Pokud odkazujete jak mikroformáty hotové, tak i ty ve stádiu návrhu, můžete zkombinovat tento kombinovaný profil s profily jednotlivých mikroformátů.

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

Tento blog je relativně nový, a proto jsem neměla moc příležitostí k vložení nějaké události.

Mám pouze jeden reálný příklad, a to díky nedávnému článku o BarCamp Albuquerque 3, kde jsem použila mikroformát hCalendar:

<div class="vevent">
  <p>Yes, it's short notice, but mark your calendars:
    <a href="http://barcamp.org/BarCampAlbuquerque" class="url summary">
      <span class="category">BarCamp</span> Albuquerque 3
    </a> is this weekend.
  </p>
  <dl>
    <dt>When:</dt>
    <dd>
      <abbr class="dtstart" title="2008-09-13T09:00:00">September 13</abbr>–
      <abbr class="dtend" title="2008-09-14T18:00:00">14</abbr>, from 9am–6pm both days
    </dd>
    <dt>Where:</dt>
    <dd class="location vcard">
      <a class="fn org url" href="http://www.chefwhite.com/cjw_cafe.php">CJW Cafe</a>
      on
      <a href="http://maps.google.com/maps" class="adr">
        <span class="street-address">4801 Alameda
          <abbr title="Boulevard">Blvd</abbr>
          <abbr title="Northeast">NE</abbr>
        </span>,
        <span class="locality">Albuquerque</span>,
        <abbr class="region" title="New Mexico">NM</abbr>
        <span class="postal-code">87113</span>
      </a>
    </dd>
    <dt>What:</dt>
    <dd class="description">
      A <abbr class="duration" title="P2D">two-day</abbr>
      event all about the web — design (visual, experience, information architecture),
      technology (infrastructure, programming), social and new media,
      and other stuff that is just plain cool.
    </dd>
  </dl>
</div> 

Proberme to postupně

Pojďme si rozdělit tento dlouhý příklad na jednotlivé části.

Hlavní třídou je vevent

Můžete si všimnout, že hlavní (kořenovou) vlastností v mém příkladě je vevent a ne vcalendar. Je to proto, že hCalendar má dobrovolnou kořenovou vlastnost vcalendar, která je vyžadována pouze v případě, že na stránce popisujete více než jednu událost.

Na stránkách pouze s jednou událostí se vlastnost vcalendar aplikuje automaticky na celou stránku.

A protože můj příklad je jediná událost v jediném „kalendáři“, obalila jsem informace o události <div class="vevent">. To říká, že všechny informace uvnitř popisují jednu událost.

Znovu podotknu, že obalující element by mohl být cokoli (Např. <dl>, <ul>, <p>, <span>, a tak podobně). Ale mě se hodil  div.

Povinné vlastnosti: summary & dtstart

Jediné povinné vlastnosti v hCalendar (jiné než kořenová vlastnost vevent) jsou summarydtstart.

summary

Vlastnost summary označuje krátké shrnutí události. Obsah, kterému je dána tato vlastnost je typicky to, co se zobrazuje v elektronickém kalendáři jako jméno nebo titulek události.

V mém příkladě, „BarCamp Albuquerque 3“ je obalen prvkem s vlastností summary, takže je to informace, která se zobrazuje jako titulek události v mém osobním kalendáři.

<p>Yes, it's short notice, but mark your calendars:
  <a href="http://barcamp.org/BarCampAlbuquerque" class="url summary">
    <span class="category">BarCamp</span> Albuquerque 3
  </a> is this weekend.
</p> 

dtstart

Vlastnost dtstart označuje datum a čas začátku události. V mém příkladě „September 13“ („13. září“).

<dd>
  <abbr class="dtstart" title="2008-09-13T09:00:00">September 13</abbr>–
  <abbr class="dtend" title="2008-09-14T18:00:00">14</abbr>, from 9am–6pm both days
</dd> 

Designové vzory pro datum a čas

Všimněte si, že obalující element pro dtstart je <abbr>, obalený obsah je „September 13“ a hodnota atributu title je „2008–09–13T09:00:00“.

<dd>
  <abbr class="dtstart" title="2008-09-13T09:00:00">September 13</abbr>–
  <abbr class="dtend" title="2008-09-14T18:00:00">14</abbr>, from 9am–6pm both days
</dd> 

Toto je v současnosti doporučovaný přístup pro označení informací o datu a času v mikroformátech – je to známo jako designové vzory pro datum a čas (datetime design pattern), což je rozšíření designových vzorů pro abbr (abbr design pattern).

Tyto vzory byly vyvinuty tak, aby podporovaly jednu ze základních zásad mikroformátů: designovat nejdříve pro lidi, až poté pro stroje. Ale přitom informaci zpřístupnit jak lidem, tak strojům.

Logika věci je, že stroje – třeba webové aplikace – budou používat hodnotu title, zatímco prohlížeče zobrazí lidem obsah  abbr.

Specifikace designových vzorů data a času požaduje, aby datum a čas byly zapsány podle ISO 8601:

  • YYYY-MM-DDThh:mm:ss  – „Y“ reprezentuje číslici roku, „M“ číslici měsíce, „D“ den, „h“ hodinu, „m“ minutu a „s“ sekundu.
  • YYYY-MM-DDThh:mm:ssZ  – „Z“ značí, že se jedná o greenwichský čas (GMT).
  • YYYY-MM-DDThh:mm:ss+hh (nebo -hh) – „+hh“ a „-hh“ nám sděluje odchylku od greenwichského času (GMT) v hodinách.

Abychom si to trošku osvětlili, 2008–09–30T13:00:00 = 30. září 2008, 1:00 odpoledne (místního času).

Znak „T“ v našich příkladech odděluje datum od informací o čase.

Pokud uvádíte pouze datum, jednoduše vynechte „T“ a následující informace o čase. Obdobně pokud uvádíte pouze čas, vynechte znak „T“ a jemu předcházející da­tum.

Zbytek vlastností pro datum a čas

Existují ještě dvě další (volitelné) vlastnosti pro datum a čas

dtend

Vlastnost dtend specifikuje datum a čas konce události. V mém příkladě „September 14“ („14. září“):

<dd>
  <abbr class="dtstart" title="2008-09-13T09:00:00">September 13</abbr>–
  <abbr class="dtend" title="2008-09-14T18:00:00">14</abbr>, from 9am–6pm both days
</dd> 

duration

Vlastnost duration nám sděluje dobu trvání události. V mém příkladě jsou to dva dny:

<dd class="description">
  A <abbr class="duration" title="P2D">two-day</abbr>
  event all about the web — design (visual, experience, information architecture),
  technology (infrastructure, programming), social and new media,
  and other stuff that is just plain cool.
</dd> 

Stejně jako datum a čas, i doba trvání používá designové vzory, kde informace čitelná stroji je umístěna v hodnotě title a informace čitelná lidmi je obsahem tagu <abbr>.

Doba trvání v  title je specifikována za pomoci ISO 8601, které říká, že časové hodnotě předchází znak „P“, který označuje časový úsek (anglicky „period of time“ – odtud P).

Časový úsek může být zadán v letech (Y), měsících (M), týdnech (W), dnech (D), hodinách (H), minutách (M) a/nebo sekundách (S).

Ještě pár příkladů pro lepší pochopení:

  • P2Y = doba trvání je 2 roky
  • P10D = doba trvání je 10 dní
  • P3H = doba trvání je 3 hodiny
  • P2W = doba trvání je 2 týdny
  • P12DT8H30M = doba trvání je 12 dní, 8 hodin a 30 minut

V příštím díle

Pozn. redakce: Díl o mikroformátu hCalendar byl příliš dlouhý, proto jsme jej rozdělili na dvě části. V příštím dílu seriálu dokončíme popis hCalendar, vysvětlíme, jak se kombinuje s mikroformátem hCard (takovou kombinaci obsahuje již příklad uvedený v tomto článku, jen jsme ji zatím ještě podrobně nevysvětlili), povíme si něco o přístupnosti hCalendar a uvedeme některé nástroje, které hCalendar používají.

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

Používáte mikroformát hCalendar?

Komentáře

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
btudruz

Dávat do title cokoliv jiného, než lidsky (dobře) čitelný řetězec reprezentující daný objekt prasárna jest…

Jarda

Jde udělat v hCalendar taky opakované akce nebo multiakce (akce s více termíny) jako to jde u iCal?

Martin Hassman

Záleží na použitých nástrojích. Operator např. umí hromadné akce pro všechny hCaledar na stránce (typicky pro Exportovat vše).

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.