Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Katedra informačního a znalostního inženýrství

Využití mikroformátů při vývoji internetového magazínu Bakalářská práce

Autor práce: Jan Pospíšil Vedoucí práce: Ing. David Chudán prosinec 2009, Praha

Prohlášení Prohlašuji, že jsem vypracoval bakalářskou práci na téma Využití mikroformátů při vývoji internetového magazínu samostatně. Použitou literaturu a další podkladové materiály uvádím v přiloženém seznamu literatury.

V Praze dne 1. prosince 2009

........................ podpis autora

Poděkování Tímto bych chtěl poděkovat Ing. Davidu Chudánovi za pomoc, připomínky a vedení této práce.

Abstrakt Cílem této práce je nahlédnout do problému sémantiky na webu, vybrané sémantické prvky v podobě mikroformátů a HTML 5 elementů implementovat při vývoji nové verze redakčního systému a magazínu mobilenet.cz, a provést průzkum, jak jsou na tom s využíváním mikroformátů konkurenční magazíny a volně dostupné systémy pro správu obsahu na webu. Práce přináší praktický pohled na řešení implementace do systému internetového magazínu, popisuje problémy, které je potřeba při implementaci řešit a jejich možná řešení. Přináší také přehled reálných využití a benefitů, které implementace těchto technologií poskytuje. Průzkum využití mikroformátů pak přináší náhled do aktuální situace a způsobu využití mikroformátů na českém internetu a zároveň poskytuje cennou perspektivu pro vyvíjený magazín v oblasti získání možných konkurenčních výhod. Je také zkoumáno, jaké možnosti v oblasti sémantiky nabízejí volně dostupné systémy pro správu obsahu. Práce je rozčleněna na čtyři kapitoly, přičemž první, teoretická, se zabývá sémantikou na webu a konkrétně pak mikroformáty a HTML 5. Poté následuje základní popis vývoje magazínu mobilenet.cz, jenž je v třetí kapitole následován implementací sémantických prvků. Poslední část práce je pak věnována samotnému průzkumu a hodnocení.

Klíčová slova mikroformáty, sémantika, internet, web, HTML, vývoj, magazín

Abstract The aim of this work is to provide a look in a problem of semantics on the web, to implement the chosen semantic components (microformats and HTML 5) to the new version of internet magazine mobilenet.cz development and to make a research of microformats utilization by the competitive magazines and open source content management systems. This work shows the practical view in the microformats implementation into the system of the internet magazine, describes the implementation problems as well as their solutions. It also shows a review of real world usages and benefits, which these technologies provides. The utilization research also brings a look in the actual situation and the way of utilization on the Czech internet and provides valuable perspective of possible competitive advantages for the magazine too. It is also researched which solutions provide the open source content management systems. The work is divided into four chapters. First theoretic chapter deals with the semantics on the web, concretely with the microformats and HTML 5, followed by the basic description of the magazine’s development and semantic components’ implementation in chapter three. The last chapter is finally dedicated to the research itself.

Key words microformats, semantics, internet, web, HTML, development, magazine

Obsah Úvod ............................................................................................................................................... 9 1. Sémantika na webu .................................................................................................................. 10 1.1. Sémantický web ................................................................................................................. 10 1.2. Mikroformáty .................................................................................................................... 11 1.2.1. Historie....................................................................................................................... 11 1.2.2. Koncept mikroformátů ............................................................................................... 12 1.2.3. XMDP profily .............................................................................................................. 13 1.2.4. Návrhové vzory .......................................................................................................... 13 1.2.5. Jednotlivé mikroformáty ............................................................................................ 16 1.3. HTML 5 .............................................................................................................................. 16 1.3.1. Sémantické prvky HTML 5 .......................................................................................... 17 2. Internetový magazín mobilenet.cz ........................................................................................... 18 2.1. Historie a popis stávající verze ........................................................................................... 18 2.2. Design nové verze magazínu ............................................................................................. 19 2.2.1. Navigace..................................................................................................................... 20 2.3. Technické řešení nové verze magazínu .............................................................................. 20 2.3.1. Serverové zázemí ....................................................................................................... 21 2.3.2. PHP............................................................................................................................. 21 2.3.3. MySQL databáze ........................................................................................................ 27 2.3.4. JavaScript ................................................................................................................... 27 2.3.5. Optimalizace adres ..................................................................................................... 28 3. Implementace sémantických prvků do magazínu ..................................................................... 29 3.1. HTML 5 .............................................................................................................................. 29 3.1.1. HTML nebo XHTML?................................................................................................... 29 3.1.2. Struktura dokumentu ................................................................................................. 29 3.1.3. Problém s reálnou implementací ............................................................................... 30 3.1.4. Výhody použití sémantických prvků ........................................................................... 31 3.2. Implementace mikroformátů do systému ......................................................................... 31 3.3. Mikroformát hAtom .......................................................................................................... 32 3.3.1. Využití ........................................................................................................................ 33 3.4. Mikroformát hSlice (Web Slices) ........................................................................................ 34 3.4.1. Využití ........................................................................................................................ 35

3.5. Mikroformát hCard ............................................................................................................ 35 3.5.1. Problémy implementace ............................................................................................ 36 3.5.2. Využití ......................................................................................................................... 36 3.6. Mikroformát hReview ........................................................................................................ 37 3.6.1. Využití ......................................................................................................................... 37 3.7. Mikroformát hMedia ......................................................................................................... 38 3.7.1. Využití ......................................................................................................................... 39 3.7.2. Doplněk oomph .......................................................................................................... 39 3.8. Mikroformát XOXO ............................................................................................................ 39 3.9. Rel mikroformáty ............................................................................................................... 40 3.9.1. Rel-tag ........................................................................................................................ 40 3.9.2. Rel-home .................................................................................................................... 40 3.9.3. Rel-nofollow ............................................................................................................... 41 3.10. Další mikroformáty .......................................................................................................... 41 3.10.1. hProduct ................................................................................................................... 41 3.10.2. hNews....................................................................................................................... 41 3.11. Shrnutí přínosů implementace ......................................................................................... 41 4. Konkurenční řešení ................................................................................................................... 43 4.1. Mikroformáty v nejpoužívanějších CMS ............................................................................. 43 4.1.1. WordPress .................................................................................................................. 43 4.1.2. Drupal ......................................................................................................................... 43 4.1.3. Joomla! ....................................................................................................................... 43 4.1.4. MediaWiki .................................................................................................................. 43 4.1.5. Další systémy .............................................................................................................. 44 4.1.6. Shrnutí ........................................................................................................................ 44 4.2. Mikroformáty v českých magazínech ................................................................................. 44 4.2.1. Shrnutí ........................................................................................................................ 45 Závěr ............................................................................................................................................. 46 Citovaná literatura ........................................................................................................................ 47 Rejstřík výrazů............................................................................................................................... 49 Rejstřík obrázků ............................................................................................................................ 50 Rejstřík tabulek ............................................................................................................................. 51 Příloha A ...................................................................................... Chyba! Záložka není definována.

Úvod

Úvod Podnětem pro zpracování této bakalářské práce byl vývoj internetového magazínu o mobilních telefonech mobilenet.cz, jehož novou verzi vyvíjím s přestávkami už přes dva roky. I když je téma vývoje internetového magazínu a redakčního systému velice zajímavé, rozhodl jsem se tuto práci zaměřit na použité mikroformáty a okrajově další sémantické prvky, které se na webu dají použít. Je to totiž téma relativně nové a například v publikačním segmentu webu ne příliš rozšířené. Nejprve se tedy v práci budu zaobírat obecně sémantikou na webových stránkách, přičemž se zaměřím hlavně na zmíněné mikroformáty a stručněji též na nové sémantické značky v HTML 5. Dále se budu věnovat právě magazínu mobilenet.cz. Stručně popíšu jeho historii, tak aby dále popisovaná práce na nové verzi tohoto magazínu zapadala do kontextu. U popisu vyvíjené verze magazínu, která má za úkol nahradit stávající zastaralou verzi, se zaměřím především na technickou stránku věci a popíšu především jádro systému a další zajímavá řešení, jelikož v době plánovaného odevzdání této práce nebude magazín jako celek pravděpodobně dokončen a doladěn tak, aby byl nasazen do provozu. Dokončení, zprovoznění a nasazení kompletního internetového magazínu s redakčním systémem tedy není předmětem této práce. V další části se budu zabývat praktickou implementací mikroformátů a HTML prvků jeho páté verze do magazínu mobilenet.cz. Zmíním zde i možné využití nasazených mikroformátů a jejich výhody. V závěrečné části práce bych se pak chtěl zaměřit na průzkum toho, v jakém stavu jsou v současné době mikroformáty v reálném prostředí. Jak a v jaké míře je používají autoři internetových stránek a jaké služby s nimi na druhé straně pracují a využívají je pro prospěch jejich uživatelů. Pokusím se také zmapovat využití mikroformátů nejen u konkurence magazínu mobilenet.cz, ale také obecně na publicistických stránkách. Prozkoumám i možnosti a způsoby implementace mikroformátů ve volně dostupných CMS1 pro web.

1

CMS (Content Management Systém) – systém pro správu obsahu

9

Využití mikroformátů při vývoji internetového magazínu

1. Sémantika na webu Na internetu je dnes mnoho informací a drtivá většina z nich je uložena v HTML. [1] I když má tento jazyk za sebou poměrně dlouhou historii a od svého vzniku prošel výraznými změnami, myšlenku vyjadřovat význam a důležitost některých informací si nese už od svých prvopočátků. Už v návrhu HTML Internet Draft 1.2 z roku 1993 totiž najdeme značky, jako jsou <em>, <strong>,

nebo například

. [2] Ty patří do kategorie takzvaných sémantických značek. Od té doby se toho dodnes v tomto směru v HTML moc nezměnilo. (Pokud bereme v úvahu aktuální poslední schválený W3C2 standard HTML 4.01.) S příchodem větší podpory kaskádových stylů v prohlížečích na konci devadesátých let [3] se začalo vývojářům webů doporučovat, aby ve svých dokumentech oddělovali obsah od formy a místo různých konstrukcí s tagem nebo používání a tagů pro zvýrazňování, se více začaly postupně používat ony sémantické značky. Když se nad nimi ale nad těmito sémantickými značkami zamyslíme, moc konkrétního nám toho neřeknou. Stroj dokáže zjistit, že slovo <em>Praha je v kontextu ostatního textu něčím důležitější, že

Moje firma

je nadpis druhé úrovně, nebo echo $promenna; je kus kódu. Vyhledávačům tyto značky umožní relevantnější určení klíčových slov pro indexaci dokumentu a nám většinou pomocí stylů poskytnou vizuální zpřehlednění. Stále ale nejsme schopni při kódování HTML dokumentu jasně, pro stroj čitelným způsobem, určit konkrétní význam daných informací. Člověk sice dokáže většinou sám z textu poznat, že se konkrétně jedná o adresu, něčí jméno nebo třeba komentář k nějakému produktu. Jak už jsem ale na začátku zmiňoval, na internetu se nachází nepřeberné kvantum informací, které ale člověk nikdy nedokáže sám zpracovat. Právě proto vznikla logická potřeba najít způsob, jak strojům sdělit o datech, která na internet vkládáme, jejich skutečný význam tak, aby nám pomohly s nimi později efektivně a pohodlně pracovat a hlavně získávat pouze ta relevantní.

1.1. Sémantický web Sémantický web (anglicky Semantic Web) v sobě spojuje několik technologií, za pomocí kterých definuje, jak na webu data popisovat tak, aby se dala sdílet, znovupoužít a hlavně, aby jejich význam byl pochopitelný pro počítač a byla tak interakce uživatelem, či jinými službami snadnější. [4] [5] Hlavními stavebními kameny jsou především RDF3, což je XML4 formát pro popis zdrojů na webu pomocí podmětu, vlastnosti a předmětu [6] a OWL5, což je jazyk pro zprostředkování významu některých dat přímo pro počítače, k čemuž se používají takzvané ontologie 6 . Vývoj a 2

W3C (World Wide Web Consortium) RDF (Resource Description Framework) – systém popisu zdrojů 4 XML (Extensible Markup Language) – rozšiřitelný značkovací jazyk 5 OWL (Web Ontology Language) – webový ontologický jazyk 6 „Ontologie je výslovný (explicitní) popis určité problematiky. Ontologie je slovníkem, který slouží k uchovávání a předávání znalosti týkající se určité problematiky.“ [25] 3

10

1. Sémantika na webu

standardizaci Sémantického webu a všech těchto technologií zajišťuje World Wide Web Consortium. Idea Sémantického webu je opravdu zajímavá a potenciál navržených technologií je díky jejich robustnosti a univerzálnosti veliký. Ale právě přílišná rozsáhlost a náročnost Sémantického webu je pravděpodobně v současné době příčinou toho, že se v příliš velké míře nepoužívá. [7] Problém složitosti zápisu kódu a nutnosti publikovat data ve dvou formách – pro člověka a pro počítač – do určité míry řeší RDFa7, které dovoluje zapisovat RDF přímo do XHTML kódu za použití dalších jmenných prostorů. RDFa dokonce umí indexovat i vyhledávače jako jsou Google nebo Yahoo. To z něj dělá docela vhodného kandidáta k implementaci.

1.2. Mikroformáty Mikroformáty (anglicky Microformats) se snaží docílit téměř téhož, jako Sémantický web. Nabízí způsob, jak na webu označit dostupné informace tak, aby byly snadno zpracovatelné a srozumitelné i pro stroje. [8] Ale na rozdíl od Sémantického webu se to snaží dělat co nejjednodušším způsobem a za pomocí už dlouho zaužívaných a známých technik. Lidé propagující mikroformáty často zmiňují tento neoficiální slogan: „Navrženo v první řadě pro lidi, potom pro stroje.“ (V originále: „Designed for humans first and machines second”). [9] Ačkoliv tento krátký slogan zní na poslech přečtení dosti marketingově, opravdu vystihuje přístup mikroformátů k problému sémantiky na webu. Mikroformáty jsou snadné pro implementaci lidmi. Jsou zaměřené na konkrétní scénáře, které mohou přinést užitek běžným lidem. A zároveň nenabízí takový technologický a informační potenciál pro strojové zpracování, jako je tomu u konceptu Sémantického webu. Při rozhodování, zda pro zvýšení sémantiky v nové verzi magazínu použít RDFa (Sémantický web) nebo mikroformáty, jsem se nakonec přiklonil k té jednodušší variantě. Mikroformáty jsou totiž v současné době mnohem více propagovány a je k nim nabízeno mnohem více nástrojů a aplikací, které je využívají. Roli také hrálo rozhodnutí použít HTML místo XHTML, které je pro RDFa podmínkou.

1.2.1. Historie Hlavní postavou v historii mikroformátů je Tantek Çelik, který je považován za hlavního hybatele a zakladatele mikroformátů. Pracoval mimo jiné i pro firmy jako jsou Apple a Microsoft a spolupracoval také s W3C a Technorati. [1] Návrh prvního mikroformátu se objevil v roce 2003. Jednalo se o XFN8, který atributem rel s hodnotou friend označoval, že odkaz vede na stránku týkající se člověka, kterého autor první stránky zná. Jednoduchost toho návrhu inspirovala následně zformovanou komunitu kolem budoucích mikroformátů ke snaze dosažení, tehdy už formulovaných cílů, sémantického webu, pomocí již existujících a zavedených technologií. Jimi se staly HTML atributy class, rel a rev. [7] 7 8

RDFa (Resource Description Framework - in - attributes) - systém popisu zdrojů v atributech XFN (XHTML Friends Network) – mikroformát pro definici vztahů mezi osobami

11

Využití mikroformátů při vývoji internetového magazínu

Vzniklá komunita se časem centralizovala kolem stránky microformats.org, kde kromě rozšíření zmíněného XFN vzniklo na základě veřejných debat mnoho dalších mikroformátů.

1.2.2. Koncept mikroformátů Základní koncept syntaxe mikroformátů je velice jednoduchý. Pomocí vkládání hodnot do atributů class, rel a rev přiřazujeme konkrétním HTML elementům metadata, díky kterým informace na stránce dostávají přesný sémantický význam, definovaný právě standardy jednotlivých mikroformátů. Mikroformáty se dají rozdělit na takzvané elementární a složené. [7] Elementární mikroformáty obsahují pouze jeden atribut a jednu hodnotu. Jedním ze zástupců této kategorie je první zmíněný – XFN. Jan Pospíšil

Přidáním atributu rel s hodnotou me do odkazu na mou osobní stránku, tak jednoduše podle XFN formátu říkáme, že odkazovaná stránka obsahuje informace o autorovi aktuální stránky. HTML a tím pádem i mikroformáty samozřejmě dovolují elementu i atributu definovat více hodnot, ať už v rámci jednoho mikroformátu, nebo při kombinací více mikroformátů. Martin Pultzner

Tímto zápisem v rámci XFN sděluji, že Martin Pultzner je můj kamarád a spolupracovník (atribut rel) a že text elementu je podle mikroformátu hCard jméno označené osoby a hodnota atributu href je stránkou obsahující více informací o této osobě (atribut class). S hCard, která popisuje kontaktní údaje osoby nebo organizace, se už ale dostáváme do kategorie složených mikroformátů. Ty už jsou složitější a vyžadují použití více do sebe vnořených hodnot a vlastností. Předchozí kód by sám o sobě jako hCard nefungoval. hCard totiž vyžaduje, aby informace o kontaktu byly zanořené do kořenového elementu označeného vcard.

Jan Pospíšil (<span class="org">mobilenet.cz, <span class="role">administrátor)

Takto může vypadat jednoduchá vizitka složená z kořenového elementu označeného vcard a z několika subelementů (fn, url, org a role) podle formátu hCard, zkombinovaná se zápisem z XFN (rel="me").

12

1. Sémantika na webu

1.2.3. XMDP profily Každý mikroformát má přiřazen XMDP9 profil, který definuje metadata a třídy specifikované v daném mikroformátu. Každý XMDP je reprezentovaný unikátním URI 10. Profily je doporučené na stránce podle použití jednotlivých mikroformátů definovat. Není to však povinné. [7] XMDP se definují vložením jejich URI do atributu profile elementu . Pokud je použito více mikroformátů, jednotlivé URI se oddělují mezerou, což je v souladu s HTML standardy. Validátor od W3C to ale chybně vyhodnocuje jako chybu. Atribut profile ale nelze podle definice HTML 5 a XHTML 2 použít, takže se pro zachování validity doporučuje URI vkládat do odkazů ( nebo ) s atributem rel="profile". [10] Jednotlivé mikroformáty se rozdělují na formálně dokončené a ty ve vývoji. U mikroformátů ve vývoji je na rozdíl od těch dokončených pravděpodobné, že se jejich specifikace ještě mohou změnit. I přesto je již podpora pro mnoho nedokončených formátů implementována a používána v některých aplikacích. [7] Pro formálně dokončené mikroformáty je možné použít jednu společnou URI, díky čemuž lze zkrátit zápis profilů při použití více mikroformátů na jedné stránce.

1.2.4. Návrhové vzory Z příkladů, které jsem uvedl výše, je patrné, že se způsob zápisu různých částí mikroformátů liší. Proto jsou v oblasti mikroformátů zavedena jednotná pravidla pro řešení různých stylů zápisů – neboli návrhové vzory. Jako zdroj informací o následujících návrhových vzorech mi sloužila kniha E. Lewis – Microformats Made Simple [7].

Class návrhový vzor S tímto návrhovým vzorem jsme se už setkali. Dá se považovat za jádro v označování mikroformátů a je velice jednoduchý. Spočívá pouze v přiřazování definovaných hodnot HTML atributu class. Jak už jsem ukázal výše, je možné do class atributu vložit více hodnot oddělených mezerou.

Rel návrhový vzor Rel návrhový vzor je taktéž jednoduchý a pracuje na stejném principu jako class návrhový vzor. Na rozdíl od něj má ale konkrétněji specifikovaný účel. Označuje význam odkazu, z čehož vyplývá, že ho lze logicky použít pouze pro tagy nebo .

Abbr návrhový vzor Značka v HTML obecně slouží k detailnějšímu popisu zkráceného výrazu – typicky zkratky. Mikroformáty využívají tento model k označování informací, které dávají ve své zkrácené

9

XMDP (XHTML MetaData Profile) – formát pro definici metadat pomocí XHTML URI (Uniform Resource Identifier) – jednotný identifikátor zdroje

10

13

Využití mikroformátů při vývoji internetového magazínu

podobě smysl čtenáři a umožňují k němu vložit i informace v rozšířené podobě, které jsou relevantní pro stroj i pro člověka. Další možností využití je tímto způsobem popsat označená data více formálním způsobem, který je vhodný pro použití v mikroformátech. Zde je jeden takový příklad: Jmenuji se Honza.

Datetime návrhový vzor Některé mikroformáty mohou vyžadovat i definici data a času. Časové údaje se ale běžně na webu zapisují různými způsoby, které můžou být pro stroj těžko rozluštitelné. Vznikl tedy návrh používat pro označování časových údajů abbr návrhový vzor a do title atributu vkládat časový údaj formátovaný podle normy ISO 8601. 1. listopadu 2009, 12.30

Později se ale přišlo na to, že tento zápis značně zhoršuje přístupnost stránek. Mnohé webové čtečky pro nevidomé totiž v případě přítomnosti elementu čtou jen obsah jeho title atributu a ne obsah elementu samotného. Tím se datum označené tímto návrhovým vzorem stává pro uživatele těchto čteček nesrozumitelné. Je samozřejmě otázka, zda by nebylo výhodné podporu pro tento způsob označení do čteček zabudovat. Jejich uživatelé by si tak mohli časové údaje nechat předčítat ve formě, jaká jim nejvíce vyhovuje. Jednodušší ale bylo tento návrhový vzor zamítnout a použít pro zápis datetime hodnot jiné techniky.

Value class vzor Tento návrhový vzor je jeden z novějších ve světě mikroformátů a umožňuje označit pouze část (nebo i více částí) z obsahu elementu, která má být zpracována stroji a považována za jeho hodnotu. Tato část je označena jednoduše libovolným HTML tagem s atributem class="value", který je vnořený do původního elementu.

<span class="type">Fax: <span class="value">+420 225 785 123

Tento zápis tedy říká, že hodnota elementu označeného tel je pouze +420 225 785 123 a stroj zpracovávající tyto informace k ní nemá přiřazovat výraz Fax:. Navíc lze díky tomuto návrhovému vzoru podle mikroformátu hCard říci, že se jedná o faxové telefonní číslo.

Value-title vzor Tento návrhový vzor je označován jako podmnožina value class vzoru, protože z něho vychází. Vznikl na popud problému s přístupností návrhového vzoru datetime.

14

1. Sémantika na webu

Místo označení value, používá jako hodnotu atributu class value-title. To pro stroje znamená, že mají za hodnotu nadřazeného elementu považovat hodnotu atributu title z elementu označeného value-title.

<span class="value-title" title="2009-11-01T12:30:00">1. listopadu 2009, 12.30

Tímto zápisem se vyřeší problém se způsobem zpracování textu některými čtečkami a zároveň dostanou stroje datum ve srozumitelné podobě. Některé webdesignery by mohlo znepokojovat, že se po najetí myší na datum stále objevuje vysvětlivka, která běžnému návštěvníkovi nic neříká. Proto je možné použít i tento způsob zápisu:

<span class="value-title" title="2009-11-01T12:30:00"> 1. listopadu 2009, 12.30

Value-title návrhový vzor může být užitečný i v situacích, kdy při návrhu některých zápisů mikroformátů bylo počítáno hlavně s použitím ve Spojených státech amerických. Týká se to například výše uvedeného příkladu ve value class vzoru. Mikroformát hCard totiž v označení typu telefonního kontaktu počítá s použitím hodnot, které se používají v USA, což je pro tamní webdesignery velice výhodné. Méně už například pro ty v České republice. Pro označení čísla například na mobilní telefon hCard používá výraz cell, který lze na amerických stránkách krásně použít v textu. V jiných zemích je potřeba kvůli srozumitelnosti použít lokalizované popisky, což je díky value-title vzoru možné.

<span class="type"> <span class="value-title" title="cell">mobil : <span class="value">+420 777 785 123

Osobně si myslím, že by bylo mnohem jednodušší používat pro tyto úlohy abbr návrhový vzor s tou změnou, že by se místo tagu mohl použít libovolný jiný tag a předešlo se tak konfliktu s přístupností. Takový postup však není komunitou schválený a proto se nedá spoléhat na jeho podporu v aplikacích. Předchozí kód by tak šel velice výrazně zkrátit:

<span class="type" title="cell">mobil: <span class="value">+420 777 785 123

15

Využití mikroformátů při vývoji internetového magazínu

1.2.5. Jednotlivé mikroformáty To, jak mikroformáty obecně fungují a jak se zapisují, jsem zmínil v předešlé kapitole. Nebudu se zde zabývat konkrétní specifikací každého mikroformátu, jelikož by to bylo nad rozsah této práce a aktuální informace lze jednoduše nalézt na wiki stránce microformats.org [11].

hCard a hCalendar Oba tyto mikroformáty mají společné to, že jejich specifikace byly napsány podle už existujících a používaných standardů. To z nich učinilo asi v aplikacích nejimplementovanější mikroformáty ze všech. Je možné je totiž jednoduše konvertovat do formátů, z nichž původně vychází, a snadno je pak použít ve spoustě jiných aplikací. hCard vychází z formátu vCard, jenž slouží pro ukládání kontaktních informací. Podporují ho

běžní emailoví klenti, jako je MS Outlook nebo Thunderbird a také většina mobilních telefonů. hCalendar potom vychází z iCalendar, jenž pro změnu slouží pro výměnu kalendářových dat a

je opět podporován širokou škálou aplikací.

hAtom a hSlice Mikroformát hAtom je odvozen od XML syndikačního formátu Atom. Jeho účel je tedy opět odvozen od svého „vzoru“. Konkrétně je doporučováno ho používat k sémantickému označení článků, příspěvků na blozích a podobně. Mikroformát hSlice (nazývaný též Web Slices) je od hAtom odvozen. Jako jediný, který v této práci zmiňuji, nevzniknul a není udržován komunitou microformats.org, ale vyvinul ho Microsoft pro svůj internetový prohlížeč Internet Explorer 8. Web Slices slouží k označení kusu HTML kódu, který se celý, podobně jako například RSS11 či Atom, odebírá a je možné sledovat jeho aktuální podobu, aniž by uživatel musel původní stránku navštěvovat. Jeho poslední specifikaci lze nalézt na stránkách Microsoft Developer Network [12].

Další mikroformáty Ostatní mikroformáty už nevznikaly „přepisem“ existujících standardů, ale byly navrženy od začátku, pro svůj konkrétní účel. Z těch nejpoužívanějších pak zmíním XFN pro označení vztahu mezi lidmi, hReview pro označení recenzí, hProduct pro katalogový popis konkrétních produktů, hMedia pro označování videí, obrázků a zvukových souborů nebo například rel-tag pro tagovaní obsahu na stránkách. Všemi v magazínu použitými mikroformáty se budu více zabývat v popisu jejich implementace, bylo by tedy zbytečné je více rozebírat dvakrát.

1.3. HTML 5 Na HTML ve verzi 5 se pod hlavičkou W3C pracuje už od roku 2004. [13] Nová verze má přinést mnoho nových funkcí v práci s multimédii a formuláři, spolupráci s JavaScriptem, a také novinky v oblasti sémantiky. [14]

11

RSS (Rich Site Summary, Really Simple Syndication) – XML formát pro syndikaci obsahu

16

1. Sémantika na webu

Ačkoliv návrh HTML 5 ještě nebyl prohlášen za finální a je tedy teoreticky možné, že se v jeho doporučeních něco změní, začali tvůrci hlavních prohlížečů (kromě Internet Exploreru) podporu nových technologií postupně implementovat.

1.3.1. Sémantické prvky HTML 5 Zatímco všechny ostatní vyjmenované oblasti novinek v HTML 5 do značné míry souvisí s funkčností webu a jeho zobrazením, nové sémantické prvky se dají bezpečně zavést, i když jejich podpora není všude implementována. V případě, že prohlížeč, či jiná aplikace (například indexovací robot) nové sémantické elementy nepodporuje, pro web, který je používá, to nepřinese žádnou zásadní nevýhodu. (Ve skutečnosti zde existuje několik problémů. Ty se ale dají odstranit. Tomu se budu věnovat později v této práci.) Na druhou stranu platí, že až začnou indexovací roboti tyto prvky zohledňovat, web používající HTML 5 už na to bude připravený a může z toho začít okamžitě těžit, zatímco konkurence bude složitě implementovat nové technologie do stávajícího systému. Mimoto také zavedení nových značek přispívá k přehlednosti při kódování webu.

Strukturování HTML jde na sémantiku trochu jinak, než Sémantický web nebo mikroformáty. Nesnaží se konkrétním datům přiřazovat konkrétní významy ve stylu například „toto je jméno osoby, která je mým spolupracovníkem“. Snaží se totiž logicky popsat strukturu stránky, tak aby bylo jasné, kde je hlavička, patička, navigace nebo obsah stránky. S použitými mikroformáty se tak může skvěle doplňovat.

Popis jednotlivých značek Nové značky, které sémanticky popisují strukturu stránky, jsou

,