Kódujme sémanticky s mikroformáty: 4. část – hCalendar
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
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
relv 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 rokyP10D= doba trvání je 10 dníP3H= doba trvání je 3 hodinyP2W= doba trvání je 2 týdnyP12DT8H30M= 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.
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.
Dávat do title cokoliv jiného, než lidsky (dobře) čitelný řetězec reprezentující daný objekt prasárna jest…
Jde udělat v hCalendar taky opakované akce nebo multiakce (akce s více termíny) jako to jde u iCal?
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).