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

Články ‐ Honza Sládek ‐ Webdesign ‐ 19. 11. 2008

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 (11 dílů)

Kódujme sémanticky s mikroformáty: úvod 15. 10. 2008
Kódujme sémanticky s mikroformáty: 1. část – rel 22. 10. 2008
Kódujme sémanticky s mikroformáty: 2. část – XFN 29. 10. 2008
Kódujme sémanticky s mikroformáty: 3. část – hCard 5. 11. 2008
Kódujme sémanticky s mikroformáty: hCard (dokončení) 12. 11. 2008
Kódujme sémanticky s mikroformáty: 4. část – hCalendar 19. 11. 2008
Kódujme sémanticky s mikroformáty: hCalendar (dokončení) 26. 11. 2008
Kódujme sémanticky s mikroformáty: hAtom 3. 12. 2008
Kódujme sémanticky s mikroformáty: hResume 10. 12. 2008
Kódujme sémanticky s mikroformáty: náměty a problémy 17. 12. 2008
Kódujeme sémanticky s Mikroformáty: Value Class Pattern 2. 12. 2009

Nálepky:

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 rel v 1. čá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/podvlastnosti).

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 summary a dtstart.

`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í datum.

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?

Honza Sládek

Návrhář uživatelských zážitků. Spoluzaložil Clevis s.r.o., školí responsive a mobile webdesign, organizuje konferenci Webovina a soutěž pro mladé Junior Internet.

Odebírat

3 Komentářů

Nejstarší

Nejnovější Most Voted

Inline Feedbacks

Zobrazit všechny komentáře

btudruz

16 let před

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

Odpovědět

Jarda

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

Martin Hassman

Odpovědět na Jarda

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).

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

Nálepky:

Vše začalo u iCalendar

Časově vymezené aktivity

Základy

Profil

Příklad

Proberme to postupně

Hlavní třídou je vevent

Povinné vlastnosti: `summary` & `dtstart`

`summary`

`dtstart`

Designové vzory pro datum a čas

Zbytek vlastností pro datum a čas

`dtend`

`duration`

V příštím díle

Honza Sládek

Komentáře

Vitest 4.0 – nové vizuální testování, lepší debugging a stabilní Browser Mode

Docker + Bun + Caddy: mikroslužba za hodinu

AI pro vývojáře: jak využít LLM v běžném workflow

Sledujte Zdroják:

Hádej co? Cookies!

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

Nálepky:

Vše začalo u iCalendar

Časově vymezené aktivity

Základy

Profil

Příklad

Proberme to postupně

Hlavní třídou je vevent

Povinné vlastnosti: summary & dtstart

summary

dtstart

Designové vzory pro datum a čas

Zbytek vlastností pro datum a čas

dtend

duration

V příštím díle

Honza Sládek

Komentáře

Vitest 4.0 – nové vizuální testování, lepší debugging a stabilní Browser Mode

Docker + Bun + Caddy: mikroslužba za hodinu

AI pro vývojáře: jak využít LLM v běžném workflow

Sledujte Zdroják:

Hádej co? Cookies!

Povinné vlastnosti: `summary` & `dtstart`

`summary`

`dtstart`

`dtend`

`duration`