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

Transkript

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
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>, <h1> nebo například <address>. [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 <font>
nebo používání <b> a <i> 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</em> je v kontextu ostatního textu něčím
důležitější, že <h2>Moje firma</h2> je nadpis druhé úrovně, nebo <code>
echo $promenna;</code> 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
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
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.
<a href="http://hudus.net/" rel="me">Jan Pospíšil</a>
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ů.
<a href="/uzivatel/smurfx/" rel="friend co-worker" class="fn url">Martin
Pultzner</a>
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 <a> 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.
<p class="vcard">
<a href="http://hudus.net/" rel="me" class="fn url">Jan Pospíšil</a>
(<span class="org">mobilenet.cz</span>,
<span class="role">administrátor</span>)
</p>
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.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 <head>. 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ů (<a> nebo <link>) 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 <a> nebo <link>.
Abbr návrhový vzor
Značka <abbr> 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
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 <abbr title="Jan Pospíšil">Honza</abbr>.
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.
<abbr class="dtstart" title="2009-11-01T12:30:00">1. listopadu 2009,
12.30</abbr>
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 <abbr> 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.
<p class="tel">
<span class="type">Fax</span>:
<span class="value">+420 225 785 123</span>
</p>
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
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.
<p class="dtstart">
<span class="value-title" title="2009-11-01T12:30:00">1. listopadu 2009,
12.30</span>
</p>
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:
<p class="dtstart">
<span class="value-title" title="2009-11-01T12:30:00"> </span>1. listopadu
2009, 12.30
</p>
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é.
<p class="tel">
<span class="type">
<span class="value-title" title="cell">mobil</span>
</span>:
</p>
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 <abbr> 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:
<p class="tel">
<span class="type" title="cell">mobil</span>:
</p>
15
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
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 <header>, <nav>,
<article>,
<section>,
<aside>
a
<footer>.
Z názvu jednotlivých značek je celkem jasné,
k čemu slouží. Element <header> označuje
hlavičku stránky nebo článku. Typicky tak
obsahuje například nadpis a nějaké doplňující
informace.
Obrázek 1 - Znázornění layoutu stránky pomocí nových
HTML 5 značek [13]
Tag <nav> jednoduše označuje oblast navigace stránky, pro kterou je typicky použit seznam.
<article> vymezuje část dokumentu, která je nezávislá a její použití se tak nejvíce hodí na
označení hlavních částí obsahu stránky. Například článku, blogového příspěvku nebo příspěvku
v diskuzi.
<section> má za úkol reprezentovat přirozené části obsahu dokumentu, jako jsou například
kapitoly. Značka <aside> je určena pro doplňující informace týkající se obsahu stránky a už z
jeho názvu vyplývá, že své využití najde nejčastěji v postranním sloupci.
A poslední <footer> označuje typicky patičku stránky. [13]
17
2. Internetový magazín mobilenet.cz
Mobilenet.cz je internetový magazín zaměřující se především na tématiku mobilních telefonů,
sítí a dalších technologií s tím souvisejících. Magazín jsem sám vyvinul a společně s Martinem
Pultznerem v roli šéfredaktora jsme ho v říjnu roku 2005 spustili. Od té doby neprošel žádnou
významnější technologickou změnou, ale už přibližně v roce 2007 začala vznikat potřeba přijít
s novou, technologicky lépe provedenou verzí, která se bude snažit držet krok s trendy rychle se
vyvíjejícího prostředí internetu. Právě vývoj nové verze magazínu mobilenet.cz a jeho redakčního
systému se stal podnětem pro tuto bakalářskou práci.
2.1. Historie a popis stávající verze
Magazínu mobilenet.cz původně předcházel ještě amatérský web Techbox.wz.cz. Přibližně
v březnu 2005 jsem začal pracovat na redakčním systému a na magazínu pod novým jménem
mobilenet.cz. K vývoji jsem použil strukturovaně psané PHP12 4 a databázi v MySQL 4. Dá se říci,
že jsem se hlouběji naučil programovat v PHP teprve na tomto projektu a tomu bohužel
odpovídá i kvalita a zabezpečení řešení.
Obrázek 2 – Administrace stávající verze
Obrázek 3 - Úvodní stránka stávající verze
Z administračního systému se dá poměrně jednoduše ovlivňovat podoba výpisu článku
v magazínu. Už se ale nedá manipulovat se sekcemi a rubrikami přímo v magazínu, nedá se
moderovat diskuze pod články a pro moderování diskusního fóra, pro které je použito phpBB13,
se musí přihlašovat do jiného systému. Zkrátka systém postrádá mnoho funkcí a jeho jádro je
dost zastaralé, nejednotné a tudíž je celá aplikace velice těžko rozšířitelná.
Dalším velice omezujícím prvkem magazínu je jeho design. Nejde tak ani o to, že působí po
designové stránce trochu zastarale (i když pro návštěvníka to může být jeden z rozhodujících
faktorů), ale o způsob navržení layoutu, který neodpovídá požadavkům na moderní a flexibilní
internetový magazín. Omezujícím faktorem je zde především šířka, která počítá ještě s rozlišením
monitorů 800 × 600 bodů, které v době vzniku webu zaujímaly nezanedbatelnou část
v návštěvnických statistikách. Při použitém vertikálním menu na levé části stránky tak nezůstává
žádný další informační prostor vedle hlavního obsahu, což je důležité jednak z pohledu
12
PHP (Hypertext Preprocessor) – Hypertextový preprocesor
„phpBB je oblíbený, bezplatný a open source systém pro vytvoření interaktivního fóra používající
serverový skript PHP a podporující širokou škálu databázových systémů.“ [26]
13
18
umisťování inzerce, ale i z pohledu udržení návštěvníka po co nejdelší dobu na stránkách,
nabídnutím mu dalších relevantních a zajímavých informací.
2.2. Design nové verze magazínu
Právě nedostatek informačního prostoru v layoutu magazínu byl hlavním podnětem pro práci na
nové verzi magazínu mobilenet.cz. Podle statistik Google Analytics, jenž je použit pro měření
návštěvnosti, dosahuje podíl návštěvníků v říjnu 2009, používajících rozlišení 800×600 bodů,
necelé jedno procento. Přičemž při pohledu na předešlé roky je trend pro používání tohoto
rozlišení jasně klesající (viz tabulka 1).
Rozlišení obrazovky
1024×768
1280×1024
1280×800
1680×1050
1440×900
1152×864
1366×768
1920×1200
1280×960
1920×1080
1024×600
1280×768
800×600
Rok 2009
1. 21,65%
2. 20,03%
3. 19,46%
4. 9,90%
5. 7,29%
6. 3,15%
7. 2,50%
8. 1,64%
9. 1,63%
10. 1,34%
11. 1,34%
12. 1,12%
13. 0,93%
Návštěvy v říjnu
Rok 2008
1. 32,72%
2. 23,97%
3. 16,34%
4. 6,56%
5. 5,84%
6. 4,50%
15. 0,20%
9. 1,03%
7. 2,06%
24. 0,05%
16. 0,16%
12. 0,84%
8. 1,67%
Rok 2007
1. 40,51%
2. 26,85%
3. 10,89%
5. 3,17%
6. 2,76%
4. 5,07%
14. 0,18%
13. 0,47%
8. 1,76%
63. 0,00%
35. 0,01%
12. 0,58%
7. 2,74%
Tabulka 1 - Přehled používaných rozlišení obrazovky návštěvníků monilenet.cz podle Google Analytics [15]
Nový layout tak sice pro plnohodnotné zobrazení počítá s šířkou obrazovky alespoň 1024 pixelů,
ale ani pro minoritní návštěvníky nebude problém stránky navštěvovat, protože hlavní obsah,
tedy hlavní výpis, případně text článku, se vždy do 800 pixelů vejde.
Obrázek 4 - Úvodní strana nového designu
Obrázek 5 - Zobrazení článku v novém designu
Širší hlavní sloupec by ani pro magazín nebyl vhodný, protože text se na dlouhých řádcích stává
více nepřehledný a hůře se čte. [16] V bližších několika letech navíc ani nepředpokládám, že by
bylo možné stránku ještě rozšiřovat, jednak z důvodu toho, že monitory s XGA
19
(1024×768) rozlišením tak rychle ze stolů návštěvníků nezmizí a také díky stále narůstající
popularitě mobilních zařízení (ať už netbooků nebo telefonů) s menšími displeji. Pro mobilní
zařízení navíc je a i v nové verzi bude k dispozici čistě textová verze magazínu.
2.2.1. Navigace
Zásadní změnu kromě omlazení vzhledu prodělala také navigace. Ta se nyní kompletně
přesunula do horizontálního menu na začátku stránky.
To je oproti rozdělené navigaci stávající verze, kdy je jedna část nahoře v horizontálním menu a
druhá část v levém sloupci ve vertikálním menu, určitě krokem ke zpřehlednění. Celý web má
jasně danou stromovou strukturu, která je dostupná a znázorněná v jedné nabídce, jenž
obsahuje dva řádky.
To s sebou přináší i omezený prostor pro počet stránek v nabídce oproti vertikálnímu menu.
Tento fakt jsem ale pojal jako podnět ke zjednodušení webu a počet rubrik se jednoduše
zmenšil. I ze statistik Google Analytics dlouhodobě vyplývá, že lidé navštěvují hlavně vybrané
stránky první a druhé úrovně a ze stránek té třetí se jich naprostá většina koncentruje v pár
oblíbených rubrikách.
Pořadí
1.
2.
3.
4.
6.
7.
9.
12.
20.
URL stránky
/clanky/
/clanky/mobily/nokia/
/clanky/mobily/sony-ericsson/
/clanky/mobily/samsung/
/clanky/recenze/
/clanky/mobily/lg/
/clanky/aktuality/
/clanky/mobily/htc/
/clanky/mobily/apple/
Popis stránky
Úvodní – výpis všech článků
Mobilní telefony Nokia
Mobilní telefony Sony Ericsson
Mobilní telefony Samsung
Recenze
Mobilní telefony LG
Aktuality
Mobilní telefony HTC
Mobilní telefony Apple
Zobrazení
7,13%
2,80%
1,79%
1,24%
1,03%
0,96%
0,69%
0,60%
0,42%
Tabulka 2 - Přehled návštěvnosti jednotlivých stránek v období 1. 1. 2009 - 6. 11. 2009 [15]
V tabulce 2 je zobrazena statistika návštěvnosti jednotlivých stránek na mobilenet.cz v období
1. 1. 2009 - 6. 11. 2009, přičemž adresy jsou převedeny do podoby odpovídající struktuře nového
magazínu. Vynechané pozice odpovídají jednotlivým článkům, které svou návštěvností zasáhly i
do téměř celoroční statistiky.
Minoritnější rubriky a především různé aktuální trendy bude mnohem flexibilněji pokrývat
systém tagů, který bude fungovat na stejném principu, jako je obvyklé na ostatních webech.
2.3. Technické řešení nové verze magazínu
Jak už jsem zmiňoval, hlavním podnětem pro práci na nové verzi byla potřeba předělat layout.
Jelikož ale ani funkční background magazínu moc neodpovídal nárokům a byl dost nevhodně
navržen, bylo potřeba nový systém napsat úplně od začátku. Od roku 2007, kdy jsem na nové
verzi začal pracovat, se samozřejmě jádro systému několikrát změnilo s tím, jak jsem získával
nové zkušenosti s objektovým programováním v PHP a s návrhem relačních databází.
20
2.3.1. Serverové zázemí
Co se týče zázemí projektu, novou verzi magazínu v současné době provozuji a testuji na
zakoupeném virtuálním serveru od Angel-hosting.cz. Ten nabízí finančně zajímavé programy,
které v sobě spojují výhody virtuálního serveru a klasického hostingu.
Virtuální server nabízí v základu jako operační systém Debian GNU/Linux 5.0 s webovým
serverem Apache 2.2, databází MySQL 5.0 a samozřejmě PHP 5.2.
2.3.2. PHP
Celá aplikace, co se týče programování, stojí hlavně na PHP ve verzi 5. Volba tohoto jazyka byla
ovlivněna hlavně tím, že jsem s ním měl největší zkušenosti a také obrovskou dostupností a tedy
i finančně výhodnou pozicí při výběru hostingu.
Celá aplikace je rozdělena na dvě hlavní logické části. Část magazínu a část administrační.
Jakýkoliv požadavek na server začíná vždy na souboru index.php v kořenové složce pro každou
logickou část zvlášť. To je zajištěno modulem Mod_rewrite serveru Apache, který překládá
požadavky z pěkných adres typu /clanky/recenze/ do podoby /index.php?gui=normal
&lvl1=clanky&lvl2=recenze. Návštěvníkovi, tedy i například indexovacímu robotovi, však
zůstává zobrazena ona „pěkná“ adresa.
Výchozí soubor index.php je tak využíván ke zpracování naprosté většiny požadavků od
zobrazení jakékoliv běžné stránky až po načtení obrázku nebo RSS kanálu.
Při načtení index.php se nastaví vlastní handler chyb a varování, který má na starosti nezávislá
třída Report a poté se spustí instance hlavní třídy aplikace, nazvané klasicky Main. Konstruktor
třídy Main naváže spojení s MySQL databází a zkontroluje, zda je přihlášen nějaký uživatel. Poté,
pokud je přítomna GET proměnná script, spustí se instance třídy Script, jinak se načítá
některá z tříd typu GUI.
Třída Script
Třída Script zpracovává typicky data odeslaná z formuláře, nebo jiné požadavky, u kterých se
primárně očekává provedení nějaké operace, která sama o sobě není spojená s výstupem zpět
do prohlížeče. Po provedení takového úkonu se samozřejmě typicky aplikace přesměrovává zpět
na soubor index.php, která podá uživateli zprávu o výsledku operace skrze třídu GUI. Tím se
zajistí jednak jakési oddělení ryze funkčních částí kódů od těch, které se starají a jsou spouštěny
za účelem grafického výstupu uživateli a také se předejde například vícenásobnému odesílání dat
z formuláře při znovunačtení stránky uživatelem.
Přes Script se typicky zpracovávají i požadavky typu zobrazení obrázku a podobných souborů,
kde opět není potřeba práce s HTML výstupem a požaduje se co nejrychlejší zpracování dat.
Samotná třída Script obsahuje seznam platných skriptů, které smějí spouštět nepřihlášení a
přihlášení uživatelé a po následné validaci spouští samotné skripty, které jsou uloženy
v samostatných třídách. Všechny tyto třídy implementují rozhraní, podle kterého se
v konstruktoru provádí požadovaná operace a následně se volá metoda getBack() sloužící vždy
pro zpracování informací o výsledku operace pro uživatele, které se předávají především
21
v session třídy Report. Po uložení všech informací do session se provádí přesměrování
provedením nového požadavku na index.php s výstupem pomocí GUI.
Znázornění základní struktury tříd PHP kódu
Obrázek 6 - Stručný Class diagram základních PHP tříd (neobsahuje všechny metody a parametry)
Třída typu GUI
Třída GUI, jak její název napovídá, má na starosti vše, co se týká grafického výstupu v HTML. Tříd
GUI může být více. Vždy záleží, jaký typ výstupu je očekáván. Většinou se načítá ta ze souboru
GUI.php, která slouží pro běžné zobrazení stránek magazínu. Dále se například používá třída
GUI ze souboru GUI_text.php pro zobrazení stránek v textové verzi nebo ze souboru
GUI_hslice.php pro zobrazení obsahu Web Slices (těm se budu věnovat později v této práci).
Konstruktor třídy GUI vždy nejprve pomocí tříd Menu a Page ověří, že požadovaná stránka
existuje a případně, zda je pro konkrétního uživatele přístupná. Celá struktura stránek je uložena
v databázi tak, jak je popsána výše v kapitole Navigace. Na základě ověření požadavku v databázi
a načtení dodatečných informací o stránce se vždy načte příslušná třída pro stránku první úrovně
(např.: články, fórum, katalog). Ta by měla obsahovat metody nutné pro fungování podstaty této
sekce. Třída pro sekci články má například veřejnou metodu getArticleList(), sloužící pro
veškerý výpis článků.
Pokud je to v databázi definováno, konstruktor GUI dále načítá i soubory s objekty pro stránky
nižších kategorií.
Důležitým pravidlem, kterým se všechny objekty spojené s GUI musí řídit, je dodržování toho, že
veškeré operace, které mají samozřejmě za výstup nějaký HTML kód (nacházíme se v GUI sekci),
22
tento kód neposílají rovnou na výstup klientovi, ale vše se ukládá do paměti. Až na konci procesu
se pak spustí metoda init() v instanci GUI, která celý obsah stránky pošle klientovi.
To má velkou výhodu v tom, že se dá obsah celé stránky měnit kdykoliv v průběhu výkonu
skriptu. Pokud by aplikace fungovala tak, že by postupně podle toho, jak jde kód v hierarchii
HTML stránky, zpracovávala jednotlivé dílčí operace a jejich výstupy rovnou posílala klientovi,
chod aplikace by byl značně neflexibilní. Například pokud bychom hned na začátku poslali do
výstupu HTML hlavičky, které obsahují i titulku stránky, ale kdykoliv později by nastala situace,
kdy by bylo potřeba na základě jakékoliv události titulku změnit, už by to nebylo možné. Navíc při
běžném nastavení Apache serveru nelze odesílat HTTP14 hlavičky poté, co jsme už poslali nějaký
výstup klientovi.
Tvorba prostředí pomocí objektů Box
Další výraznou novinkou oproti předchozí verzi je možnost podobu magazínu plně ovlivňovat
z administrace. Tím nemyslím přímo design, ale složení a obsah jednotlivých stránek.
Každá stránka v magazínu se totiž skládá z objektů, které jsem nazval jednoduše Box. Ty ve
výsledku odpovídají logickým blokům zapsaných v HTML stránky. Například oblast vypisující
aktuality na úvodní stránce je reprezentována jedním Boxem.
Stálé jsou tedy pouze hlavička a patička stránky. Zbytek stránky je vždy definován uspořádaným
seznamem Boxů.
Každý objekt Box má svůj základ v PHP kódu, kde je popsána jeho funkčnost. Princip Boxů je ale
hlavně v tom, že je jejich reprezentace v PHP pouze jakousi šablonou dané operace. Všechny
údaje o poloze, velikosti, umístění, chování a další důležité proměnné jsou uložené v databázi.
Po naprogramování základních Boxů a zavedení popisu jejich funkčnosti do databáze je už potom
„skládání“ stránek skrze administraci celkem jednoduché. Stačí pouze přiřadit jednotlivé Boxy
k jednotlivým stránkám a nadefinovat jim jejich parametry.
Boxy samotné jsou ovlivňovány jednak zadanými parametry v databázi, které z nich vytváří
rozdílné instance a také proměnnými v celém systému. Vezmeme jednoduchý příklad Boxu
regularArticles, jenž slouží pro umístění standardního výpisu článků. V administraci ho
přiřadíme do layoutu úvodní stránky, kde mu nastavíme mimo jiné nadpis, velikost a kolik článků
má na jednu stránku vypisovat. (Editaci této instance regularArticles je vidět na obrázku 7.)
Potom vytvoříme další instanci tohoto Boxu a přiřadíme ho do layoutu pro výpis článků
v konkrétní rubrice. Opět nastavíme stejné parametry, jako předtím, jen v jiných hodnotách.
Nikde se však nenastavuje, jaké kategorie chceme do výpisu článků zahrnout. To si právě Box
zajišťuje sám zjištěním, kde se v hierarchii magazínu právě nachází.
Z obrázku číslo 7 je vidět, že obsluha Boxu z administrace zatím není práce vhodná pro kohokoliv
a vyžaduje určité znalosti o fungování tohoto systému. Pro vyškoleného administrátora to je ale
poměrně snadný nástroj, jak z naprogramovaných Boxů sestavit celý web a případně během
minuty změnit za běhu layout celé úvodní strany.
14
HTTP (Hypertext Transfer Protocol) – Protokol pro přenos hypertextu
23
V budoucnu by bylo možné k tomuto systému vyvinout natolik intuitivní uživatelské prostředí,
aby případné změny v layoutu magazínu mohl provádět například i oprávněný redaktor.
Obrázek 7 - Znázornění postupu editace Boxu v administraci
Layouty
Systém layoutů jsem už několikrát zmínil v předchozích odstavcích. Layouty slouží
v administračním systému jako určité kolekce Boxů, které se mohou aplikovat na různé stránky.
Bylo by totiž zbytečně složité sestavovat pro každou stránku novou množinu instancí
jednotlivých Boxů. V administraci je tak například vytvořen jednotný layout pro zobrazení
podrubrik ve výpisu článků. Stránka s výpisem článků o Nokiích a Sony Ericssonech může být
koncepčně stejná, jen bude vypisovat články z jiné podrubriky. Proč tedy definovat více stejných
layoutů, když můžeme na všechny aplikovat jeden vzorový?
Administrace
Administrace je vystavěna na podobném principu fungování, jako magazín samotný. Jen se
spouští přes jiný soubor a jádro aplikace načítá jiné třídy ekvivalentní Main a GUI (viz. obrázek 6
výše). Rozdílné třídy hAdminMain a hAdminGUI ale stejně většinu funkčnosti dědí od svých
předků Main a GUI a pouze mění některé parametry specifické pro požadavky administrace.
Řízení přístupu v administraci
Pro přihlášení do administrace je samozřejmě zapotřebí se nejdříve autentifikovat. Kontrolu
zaslaných autentifikačních údajů kontroluje jednotná třída pro celý systém. V administraci je ale
zapotřebí kromě rozlišování toho, zda je návštěvník přihlášený nebo nepřihlášený pod platným
uživatelským účtem, i jeho případné oprávnění k různým úkonům.
To je v administraci řešeno způsobem přidělování rolí jednotlivým uživatelům. Každý uživatel
oprávněný k přístupu do administrace tak má přidělenu jednu nebo více rolí. Základní rolí, která
odděluje uživatele oprávněného k přístupu do administrace od běžného zaregistrovaného
čtenáře, je role uzivatel.
Každá stránka v administraci, která je definována stejným způsobem jako stránka v magazínu,
má potom přidělený seznam nutných rolí, které musí uživatel vlastnit, aby na ni mohl
přistupovat.
24
Například stránka s editorem vlastních článků požaduje minimálně role uzivatel a redaktor a
stránka pro zadávání nových Boxů do systému požaduje uzivatel a sysAdmin.
Jednotlivé skripty pro ukládání informací potom mají úplně stejný systém ověřování rolí, jako
stránky administrace. Tím se dá předejít případnému zneužití, kdy by uživatel mohl zjistit,
například jaký skript slouží pro změnu cizích uživatelských údajů a v jakém tvaru tento skript
předpokládá data, aniž by disponoval požadovaným oprávněním admin pro přístup na stránku s
editačním formulářem cizích údajů.
Framework pro zobrazování a editaci údajů v databázi
Jelikož se naprostá většina úkonů v administraci skládá hlavně z editace údajů uložených
v databázi, vyvinul jsem vlastní framework 15 pro zobrazování a editaci údajů z jednotlivých
tabulek databáze.
Díky tomuto návrhu je nyní mnohem snadnější a rychlejší doplňovat další funkčnost
administrace.
Výpis tabulek
Předtím, než chceme data editovat, potřebujeme si je nejprve přehledně zobrazit. K tomu slouží
třída Table, která vypisuje v přehledné HTML tabulce data z požadovaných databázových
tabulek.
Nejprve je potřeba si připravit seznam instancí tříd TableColumn, které reprezentují jednotlivé
sloupečky. U nich si můžeme nastavit různé formátování podle datového typu nebo i toto pole
seskládat z více položek z databáze a libovolně si ho naformátovat.
Pokud tak chceme mít v tabulce přehledu uživatelů vypsané například jejich ICQ kontakty a to,
zda jsou členy redakce, stačí napsat tento kód:
$columns = array(
new TableColumn("ICQ", "ICQ", "special", '<img src="http://web.icq.
com/whitepages/online?icq={str{ICQ}}&img=5" /> {str{ICQ}}'),
new TableColumn("staff", "zaměstnanec", "bin")
);
Vedle každého ICQ kontaktu se pak zobrazí i stavová ikonka a ve sloupci zaměstnanec se nebude
vypisovat binární 1 nebo 0, ale barevně vyznačené ano nebo ne.
Třída Table také nabízí možnost nechat data třídit podle libovolného sloupce, přidat
jednoduchý stránkovací formulář nebo filtr.
Pokud do výše definovaného pole přidáme instance dalších řádků a doplníme následující kód,
získáme plnohodnotný a lehce ovladatelný tabulkový výpis uživatelů, jako je vidět na obrázku 8.
$filters = array("staff:typ uživatele" => array(1 => "zaměstnanec", 0 =>
"čtenář"));
$tableFilter = new TableFilter("staff", 1);
$tableFilter->setFilters($filters);
15
„Cílem frameworku je převzetí typických problémů dané oblasti, čímž se usnadní vývoj tak, aby se
návrháři a vývojáři mohli soustředit pouze na své zadání.“ [27]
25
$table = new Table($columns, $this->mysql, "user", "name", 30, true, null,
"ASC", $tableFilter);
return '<h2>přehled uživatelů</h2>'.$table->returnTable();
Tímto jednoduchým a celkem krátkým zápisem získáme tabulku, kterou si můžeme filtrovat
podle toho, zda je uživatel zaměstnanec nebo čtenář, dynamicky řadit podle jakéhokoliv
parametru a určovat si délku jejího výpisu.
Obrázek 8 - Administrace - přehled dat v tabulce
Obrázek 9 - Administrace - editace dat ve formuláři
Editační formuláře
Pro editaci dat z databáze slouží druhý návrhový vzor, který je kvůli různorodým požadavkům na
funkčnost a podobu editačních formulářů mnohem komplexnější a rozsáhlejší, a proto se
nespoléhá pouze na zápis několika parametrů do PHP kódu, jako framework pro tabulky, ale
načítá většinu dat z databáze.
Právě díky využití databáze se používaní a definice formulářů stává, navzdory své komplexnosti,
mnohem jednodušší a flexibilnější.
V PHP opět existuje hlavní třída Form a několik dalších podpůrných, které zajišťují funkčnost
formulářů. Podrobná definice parametrů formulářů a jednotlivých jejich polí je uložena
v databázi, takže se skrze administraci dají všechny formuláře jednoduše ovládat.
Na obrázku 9 je zachycena úprava jednoho pole samotného formuláře pro úpravu formulářů. To
myslím jasně demonstruje univerzálnost tohoto frameworku – pomocí jeho nástrojů jde přímo
ovlivňovat i jeho podoba.
Co se týče schopností editačních formulářů, lze samozřejmě editovat libovolné MySQL tabulky.
Mnohdy je ale potřeba v jednom formuláři editovat data zároveň z více tabulek, které jsou
spojeny různými relacemi. Tento problém se řeší tak, že se vytvoří obě tabulky zvlášť a jedna se
potom definuje jako vložená do jednoho z polí té druhé tabulky. Takto lze postihnout všechny
běžné vztahy v relačních databázích (1:N, N:1 a N:M).
Příklad vztahu 1:N je vidět na obrázku 9, kde je do pole položky výběru vložena další tabulka
s možnými 0 až N záznamy.
26
Co se týče možností jednotlivých polí formuláře, je možné k nim definovat mnoho parametrů, jak
mají vypadat, jak se mají chovat a jaká data mají akceptovat. Zde uvedu popis několika klíčových
definovatelných vlastností:



Nápověda – podrobnější sdělení uživateli, zobrazí se automaticky
Typ pole – definuje základní podobu a funkčnost formulářového políčka
o Textové pole – klasické zadávaní textu
 Délka pole
 Maximální délka textu
 Datový typ vloženého řetězce (text, číslo, e-mail, …) – kvůli validaci
o Výběr – zobrazí <select> výběr hodnot
 Zdroj výběru – jaká data se výběru zobrazí
 Výběr ano / ne
 Z níže definovaného statického seznamu hodnot
 Dynamicky generován pomocí AJAX16
o Datum – zobrazí sérii <select> výběrů pro definici data
o Vnořený formulář – vloží další tabulku
Povinné pole – zda je vyžadováno vyplnění toho pole
Jednotlivým polím jde také nastavit, jaké činnosti mají provést po změně své hodnoty. Díky tomu
tak je možné dynamicky pomocí AJAXu měnit obsah na sobě závislých polí. Například, pokud při
editaci údajů stránky změním, že nepatří v navigační hierarchii do třetí, ale do druhé úrovně,
automaticky se také načte nový obsah možných hierarchických předků této stránky.
Framework samozřejmě také zajišťuje validaci odeslaných dat. Jako první se kontroluje, zda je
formulářové pole povinné. U textových polí se potom podle definovaného datového typu
kontroluje odpovídající forma zadaných dat a u výběrových polí se odeslaná data kontrolují
oproti seznamu možných hodnot v tomto výběru.
Zápis pro zobrazení editačního formuláře v PHP je už velmi stručný. Předá se pouze ID tabulky,
definující podobu formuláře, a primární klíč záznamu, který chceme v databázi editovat,
případně, zda chceme vkládat záznam nový. Následující kód zajistí zobrazení editačního
formuláře, jako je vidět na obrázku 9.
$form = new Form(7, $this->mysql, $formRowID);
return '<h2>upravit řádek formuláře "'.$row->title.'"</h2>'.$form->getForm();
2.3.3. MySQL databáze
MySQL databázi ve verzi 5.0 jsem podobně jako PHP zvolil kvůli její snadné dostupnosti,
rozšířenosti a kvůli tomu, že s ní také mám největší zkušenosti. Fyzický model databáze je
k nahlédnutí až na konci práce v příloze A.
2.3.4. JavaScript
JavaScript byl při vývoji magazínu použit pouze na několik oddělených a méně významných
úkolů. Chtěl jsem se ho vyvarovat především v klíčových oblastech webu, jako je navigace,
zobrazování obsahu a podobně.
16
AJAX (Asynchronous JavaScript and XML) – asynchronní JavaScript a XML
27
Za zmínku stojí dvě externí JavaScriptové knihovny, které jsou dostupné pod open source
licencemi. Knihovna Hyphenator slouží, jak název napovídá, pro automatické rozdělování slov na
koncích řádků. Vše navíc probíhá v souladu s pravidly českého pravopisu. Knihovna IE PNG Fix 2.0
slouží pro zavedení podpory průhledných PNG obrázků do starších prohlížečů Internet Explorer
společnosti Microsoft.
2.3.5. Optimalizace adres
Optimalizace stránek pro vyhledávače neboli SEO 17 je pro projekt, jako je internetový magazín,
klíčová. Podle statistik totiž 75,95% návštěvníků přichází na stránky mobilenet.cz právě
z vyhledávačů. [15]
Oproti stávající verzi mobilenetu, verze nová přináší zlepšení především v podobě optimalizace
URL18 adres a lepší využívání sémantických značek v layoutu stránky.
Základní vlastnosti, které se snažím dodržet při generování URL jednotlivých stránek, jsou
výstižnost (použití klíčových slov), stručnost a přehlednost. To je velice snadné díky použití
Mod_rewrite rozšíření webového servu Apache, který jsem už zmiňoval. Adresa recenze telefonu
LG GD900 Crystal s podtitulem průhledný krasavec tak například v nové verzi vypadá takto:
/clanek/4916-lg-gd900-crystal-pruhledny-krasavec/. Adresa ve stávající verzi
potom vypadá takto: /recenze/clanek.php?id=r254&lg-gd900-crystal-pruhlednykrasavec.
17
18
SEO (Search Engine Optimization) – optimalizace pro vyhledávače
URL (Uniform Resource Locator) - jednotný lokátor zdrojů
28
3. Implementace sémantických prvků do magazínu
Základ technického řešení magazínu mobilenet.cz jsem nastínil v předchozí kapitole. Nyní se
budu věnovat praktické implementaci HTML 5 a mikroformátů do tohoto systému a tomu, jaké
problémy a výhody implementace jednotlivých technologií přináší.
3.1. HTML 5
3.1.1. HTML nebo XHTML?
Ačkoliv je současná verze mobilenetu napsaná v XHTML, rozhodl jsem se v nové verzi přejít na
klasickou HTML notaci.
HTML 5 samozřejmě umožňuje využít i XHTML způsobu zápisu. Podle doporučení W3C by ale měl
být XHTML dokument zpracováván jako XML soubor a odesílán s MIME hlavičkou
application/xhtml+xml. [17] To bohužel v praxi není moc vhodné řešení ze dvou důvodů.
Některé prohlížeče (například Internet Explorer) neumějí s tímto typem souboru pracovat, a
pokud dostanou stránku s uvedeným MIME typem, nabídnou obsah ke stažení místo toho, aby
ho zobrazily.
Navíc, jelikož se jedná o XML soubor, je vyžadováno, aby byl takzvaně Well-formed, neboli
zjednodušeně validní. To je v praxi internetového magazínu velmi těžko dodržitelné, jelikož jeho
obsah tvoří mnoho autorů a tak je nemožné zajistit validitu veškerého obsahu, který je na
stránkách publikován. Prohlížeče před zobrazením XML dokumentu celý jeho obsah kontrolují a
v případě chyby zobrazí chybovou hlášku místo obsahu stránky, což je samozřejmě pro
jakoukoliv veřejně prezentovanou stránku nepřípustné.
Výhodou použití XHTML by jistě byla možnost dokument kombinovat s jinými XML formáty, jako
jsou například SVG19 nebo MathML20. Ale vzhledem k tomu, že tyto formáty stejně nejsou
standardně podporovány ve všech prohlížečích, postrádá tato teoretická výhoda XHTML zápisu
význam.
3.1.2. Struktura dokumentu
Strukturu modelového zápisu HTML zobrazujícího článek v magazínu mobilenet.cz jsem pomocí
HTML 5 navrhnul takto:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
...
</head>
<body>
<header>
(obsah hlavičky, grafika)
<nav>
19
20
SVG (Scalable Vector Graphics) – škálovatelná vektorová grafika
MathML (Mathematical Markup Language) – matematický značkovací jazyk
29
<ul>
<li><a href="/clanky/">články</a></li>
...
</ul>
</nav>
</header>
<article>
<h1>Název článku</h1>
(obsah článku)
</article>
<aside>
<h3>obsah článku</h3>
<nav>
<ol>
<li><a href="#nadpis-v-clanku">Nadpis v článku</a></li>
...
</ol>
</nav>
</aside>
<aside>
<h3>související články</h3>
(výpis článků)
</aside>
<footer>
(obsah patičky)
<nav>...</nav>
</footer>
</body>
</html>
3.1.3. Problém s reálnou implementací
Z HTML 5 jsem se rozhodl využít zatím hlavně jeho nové sémantické značky označující strukturu
dokumentu. Především z toho důvodu, že jsem předpokládal, že bude jejich implementace
bezproblémová.
Tento předpoklad se ale velmi záhy ukázal být mylným. Některé prohlížeče (např. Internet
Explorer nebo Firefox 2) totiž s novými HTML elementy vůbec nepočítají a není možné je tak
pomocí CSS selektorů přímo stylovat, což je velmi zásadní problém z hlediska designu.
Pro prohlížeč Internet Explorer se záhy přišlo na způsob, jak tento problém obejít. Stačí pomocí
JavaScriptu nové HTML 5 elementy jednou vytvořit a CSS selektory fungují bez problémů. [18]
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
...
</script>
Tento postup bohužel nezabírá na starou verzi Firefoxu. Pro něj existuje ovšem jiné řešení – mít
stránku zapsanou v XHTML a odesílat ji s MIME typem application /xhtml+xml. To ale z
důvodů, které jsem zmínil dříve, není přípustné řešení.
30
Firefox ve verzi 2 má sice na mobilenet.cz zastoupení jen 0,75%, ale různé mobilní prohlížeče,
kterých je nepřeberné množství, zaujímají přibližně další 1% z návštěvnosti magazínu
mobilenet.cz. [15]
Muselo se tak přistoupit k ne zrovna čistému řešení. Každý nový prvek z HTML 5 byl obalen do
dalšího <div> elementu, který už jde stylovat bez problémů. Výsledkem je větší a nepřehledný
kód. Bohužel zatím asi jediné řešení pro použití HTML 5 a zachování kompatibility s naprostou
většinou používaných prohlížečů.
<div class="header">
<header>
(obsah hlavičky, grafika)
<div class="nav">
<nav>
<ul>
<li><a href="/clanky/">články</a></li>
...
</ul>
</nav>
</div>
</header>
</div>
Dá se ale předpokládat, že stará verze Firefoxu v blízkém časovém horizontu ze statistik úplně
vymizí a v mobilních telefonech také časem převládnou modernější prohlížeče, takže bude
v budoucnu možné kód od těchto duplicitních značek očistit.
Opera Mini 4 (podle statistik nejpoužívanější mobilní prohlížeč [15]) elementy z HTML 5
podporuje, takže doba, kdy se bude dát spolehnout pouze na nové sémantické značky, není
podle mého odhadu moc vzdálená.
3.1.4. Výhody použití sémantických prvků
Výhody jsou myslím zcela zřejmé. Kvalitní popis struktury webové stránky pomůže strojům se
v ní lépe orientovat a vybírat tak relevantní obsah. Dnes totiž musí indexovací stroje prohledávat
celý kód stránky a odhadovat, zda se jedná o navigaci, hlavičku nebo hlavní obsah stránky.
Až vyhledávací nástroje tyto značky začnou podporovat, je velice pravděpodobné, že při
kvalitním označení struktury může stránka získat cenné body v SEO, tak jako získává dnes při
správném použití existujících sémantických HTML 4 elementů (např.: <h1>, <strong>,
<title>).
3.2. Implementace mikroformátů do systému
Jelikož jsou mikroformáty už od své podstaty velice jednoduché, nevyžaduje jejich implementace
do systému žádné rozsáhlé úpravy.
Jediné, co je potřeba na úrovni celého sytému implementovat, je vypisování jednotlivých profilů
podle použitých mikroformátů. K tomu slouží tři metody a jedna proměnná v třídě typu GUI.
V soukromé proměnné mFProfiles jsou do pole ukládány URI jednotlivých profilů. Dvě veřejné
metody potom slouží k zadávání těchto URI. Jedna z nich slouží pro zadávání celých URI a druhá
31
obsahuje seznam URI těch nejpoužívanějších mikroformátů, takže stačí metodě předávat pouze
název mikroformátu. Obě metody před vložením URI kontrolují případné duplicity.
Soukromá metoda getmFProfiles() pak logicky vrátí všechny URI zapsaná v HTML elementu
<link>. Zápis do atributu profile elemetu head není v HTML 5 možný.
Jako zdroj informací o specifikacích v této kapitole zmíněných mikroformátů (pokud není uvedeno jinak) mi sloužila
wiki stránka http://microformats.org/wiki/Main_Page [11].
3.3. Mikroformát hAtom
Tento mikroformát odvozený od syndikačního XML formátu Atom je používán v nové verzi
magazínu pravděpodobně v největší míře ze všech mikroformátů. Je používán k označení všech
článků vypisujících se v rubrikách, obsahu článků samotných nebo například k označování
jednotlivých příspěvků v diskuzích pod články.
V případě označování výpisu článků a obsahu jednotlivých článků není použit kořenový element
označený hfeed. Ten je totiž nepovinný, a pokud není na stránce přítomen, považuje stroj celou
stránku za jeden feed obsahující všechny položky hentry označené v této stránce.
Implementace hAtom pro výpis článků tak může probíhat pouze v rámci metody getArticleList(),
která slouží pro obecný výpis článků, ať už v klasické podobě s velkými ikonkami, nebo jen
v podobě nadpisů, případně pak i v jakékoliv jiné formě.
Kód v cyklu generující klasický výpis článků s velkými ikonkami vypadá takto:
$return .= '
<div class="vypis_clanku hentry" id="clanek-'.$article->articleID.'">
<a href="/clanky/'.$article->url.'-'.$article->articleID.'/"
class="vypis_clanku_nadpis entry-title" rel="bookmark">
<img src="/media/ikonka-'.$article->mediaID.'/" alt="'.$article->title.'"
width="80" height="80">'.$article->title.'
</a>
<div>
'.$highlight.'vydáno '.$this->strFnc->formatDate($article->publishDate,
false, "updated").'
| '.$this->getAuthors($article->articleID, true, true).' |
<a href="/clanky/'.$article->url.'-'.
$article->articleID.'/#">diskuze</a>'.$this->discSize($article->articleID).'
</div>
<span class="entry-summary">'.$article->perex.'</span>
</div>';
Každý záznam s článkem je obalen v <div> tagu označeném povinnou hodnotou hentry. Tím je
označen každý jednotlivý záznam. Další povinnou hodnotou k označení je titulek každé položky
(entry-title). Na ukázce je dále vidět zápis rel="bookmark", který slouží k označení stálého
odkazu na článek a entry-summary, jenž označuje text shrnující obsah článku.
Každá položka má navíc ještě dvě povinné hodnoty, které nejsou na ukázkovém kódu přímo
vidět. Jsou jimi updated pro označení času, kdy byla položka naposledy upravena a author pro
označení autora této položky. Tyto hodnoty jsou vyplňovány jinými funkcemi, které jsou v kódu
označeny kurzívou.
32
Metoda formatDate() slouží pro formátování časových značek z databáze do přívětivější
podoby. Pokud tato metoda dostane nějakou hodnotu v třetím parametru (zde updated), vrací
naformátované datum v souladu s value-title návrhovým vzorem, aby bylo použitelné
v mikroformátech.
public function formatDate($input, $time = false, $mFormat = null, $dateFormat =
null) {
if($mFormat) {
return '<span class="'.$mFormat.'"><span class="value-title" title="'.
$this->formatDate($input, true, null, DATE_ATOM).'"> </span>'.
$this->formatDate($input).'</span>';
}
...
}
Podobně i metoda getAuthors() vypisuje autory jednotlivých článků podle specifikace hCard.
Podle specifikace hAtom má být totiž autor položky označen hodnotou author a v souladu
s hCard mikroformátem.
$authors .= '<address class="vcard author'.$addClass.'"><a
href="/uzivatele/'.$author->login.'/" title="profil autora" class="url
fn">'.$author->name.'</a></address>';
Ke článkům se tak vkládají i stručné vizitky se jménem autora a adresou jeho profilu, kde je o
něm dostupných více informací.
Podobným stylem se potom tvoří i výpis obsahu článku nebo diskuzí pod články. Ve výpisu
obsahu článku je navíc označen i text článku k tomu definovanou hodnotou entry-content a
tagy týkající se článku (rel-tag mikroformátem), vše podle specifikací hAtom.
3.3.1. Využití
Výhody využití mikroformátu hAtom bych rozdělil na teoretické a praktické.
Ty „teoretické“ výhody spočívají v přiřazení struktury a významu hlavnímu obsahu. Možných
využití je velké množství, zmínil bych ale hlavně další potenciální plusové body v SEO.
Praktické využití pak spočívá v možnosti si pomocí nepřeberného množství nástrojů, obsah
označený v hAtom převést na XML dokument Atom nebo RSS. Ten si potom uživatel může
vyexportovat do vlastní čtečky zpráv nebo přímo využít v nějaké webové službě.
Obrázek 10 - Přehled článků označených pomocí hAtom ve Firefoxu
Rozšíření Operator do prohlížeče Firefox v základu sice nabízí pouze možnost si odkaz na každý
článek přidat do oblíbených záložek, ale dal by se udělat i jednoduchý doplňující skript, který by
nabízel například publikování odkazu na Facebooku nebo na Twitteru, což je dnes oblíbená
funkce.
33
3.4. Mikroformát hSlice (Web Slices)
Tento mikroformát vyvinutý v Microsoftu a implementovaný v jejich posledním prohlížeči
Internet Explorer 8 je do velké míry ve svém značení odvozený od hAtom. Na rozdíl od něj se ale
pomocí hSlice označují konkrétní bloky kódu na stránce a ne například do seznamu
uspořádané nejnovější články. Web Slices byly vyvinuty speciálně pro účel možnosti označení a
následného odebírání pouze jednoho kusu stránky.
Uživatel tak místo čistých informací, o jejichž prezentační stránku se stará sama aplikace,
v případě klasických XML feedů Atom a RSS, odebírá přímo kusy stránky i s designem, tak jak ji
navrhnul vývojář.
Obrázek 11 - Zápis pro odebírání boxu aktualit ve Firefoxu
Obrázek 12 - Zobrazení samostatně odebíraného výpisu
recenzí v Internet Exploreru
Prohlížeč se potom stejně jako jakákoliv RSS čtečka stará o kontrolu odebíraných kusů stránky a
o upozorňování na novinky. To může být trochu nevýhodné, protože kvůli kontrole, zda jsou
nějaké změny v malém kusu stránky, se musí vždy načítat stránka celá.
Naštěstí Web Slices nabízejí i možnost jako zdroj aktualizací uvést i jinou adresu. Místo označení
obsahu celého Web Slice zápisem class="entry-content" je možné jako obsah tohoto
výřezu označit libovolnou odkazovanou stránku.
Prohlížeč podporující hSlice tak obsah aktualizuje ze stránky spouštěné s proměnnou gui =
hslice. Stránka se tak načte s jinou GUI třídou, která zajistí načtení pouze odpovídajícího Boxu.
Díky univerzálnímu PHP jádru magazínu tak není potřeba vytvářet jakýkoliv nový kód. Načítá se
úplně stejný Box objekt jako na běžné stránce.
Jediný rozdíl je v tom, že pokud je Box podporující Web Slices načten ve stránce s parametrem
gui = hslice, vloží se do kódu klasický zápis class="entry-content" pro označení
obsahu výřezu. [12]
if($_GET["gui"] == "mikroformát:hSlice“) {
$this->cssClass .= " hslice entry-content";
} else {
$this->cssClass .= " mikroformát:hSlice“;
$hsliceURL = '<a rel="entry-content" href="?gui=hslice&id='.
$this->attributes["mikroformát:hSlice“].'" class="preload">Web Slice Feed</a>';
}
34
3.4.1. Využití
Přínos tohoto mikroformátu je spíše v oblasti reálné prezentace dat novým způsobem, než
v oblasti zvýšené sémantičnosti. Je to sice oproti hAtom trochu jiný přístup k problematice, za
použití stejný prostředků, ale myslím, že je v pořádku. Přináší totiž mnoha uživatelům reálnou
funkčnost bez toho, aniž by se museli o mikroformáty jakkoliv zajímat a hledat nástroje, jak jejich
potenciál využít.
Web Slices je možné navíc využít i v druhém nejpoužívanějším prohlížeči – Firefoxu. Stačí k tomu
doplněk Webchunks, který nabídne totožnou funkčnost jako původní implementace v Internet
Exploreru 8. Přidávání nového výřezu pomocí Webchunks je vidět výše na obrázku 12.
3.5. Mikroformát hCard
Mikroformát hCard je dobrým příkladem znuvupoužitelnosti a jednoduchosti mikroformátů.
Jedná se o celkem robusní formát pro popis kontaktních informací, ale přitom poskytuje
dostatečnou flexibilitu. Ostatní mikroformáty ho tak velice často využívají pro popis jakýchkoliv
kontaktních informací. Například ve výše zmíněném hAtom ho používám pro označení jména a
adresy profilu autora článku.
hCard je používán i na zobrazování kontaktních informací o registrovaných uživatelích v systému
magazínu. V tuto chvíli to jsou pouze redaktoři, ale kvůli diskuzím a možnostem personalizace se
budou moci v budoucnu registrovat i obyčejní čtenáři.
U redaktorů je zapotřebí v kontaktních údajích zobrazovat pouze jméno, post v redakci a
emailovou adresu. Pomocí hCard ale samozřejmě lze označit mnohem více informací, takže
budoucí uživatelé budou mít možnost o sobě nechat zobrazovat mnohem více údajů, pokud
budou chtít.
Implementace hCard tak v profilech redaktorů zatím vypadá velice stručně, ale kromě
telefonního čísla nabízí všechny údaje, které se běžně uvádí na tištěných vizitkách.
$content = '<img src="/media/ikonka-uzivatele-'.$this->user->icon.'"
alt="'.$this->user->name.'" width="100" height="100" class="photo">
<h2 class="fn">'.$this->user->name.'</h2>
<div class="title">'.$this->user->position.'</div>
<p>email: '.$strFnc->handleMail($this->user->email).'</p>
<p class="hide">
společnost: <span class="org">mobilenet.cz</span>
web: <a href="http://mobilenet.cz/uzivatele/'.$this->user->login.'/"
class="url" rel="me">http://mobilenet.cz/uzivatele/'.$this->user->login.'/</a>
</p>';
Z viditelných informací je pomocí hCard mikroformátu označena fotografie, jméno, pozice a
emailová adresa redaktora. Dále pro úplnost je ještě uváděn název společnosti a webová stránka
uživatele.
Emailová adresa je opět zpracovávána externí funkcí, která znak zavináče nahrazuje řetězcem,
který zabraňuje načtení adresy robotem, který je z internetových stránek sbírá pro účely zasílání
spamů.
35
3.5.1. Problémy implementace
Co se týče dalších informací, které by si mohli chtít čtenáři na svých profilech publikovat, jsou
problémové především kontaktní údaje na různé Instant messaging služby. Formát vCard, ze
kterého hCard vychází, je totiž hodně starý a s tímto typem kontaktu nepočítá. U většiny z nich
to ale lze velice elegantně vyřešit pomocí hCard hodnoty url. Do URL odkazu tak stačí přidat
identifikaci protokolu. Pro Skype například takto:
Skype: <a href="skype:muj_skype_kontakt?call" class="url">muj_skype_kontakt</a>
Obdobný postup je možné použít na všechny běžně používané komunikační služby, kromě ICQ.
To totiž nemá vlastní URL schéma, podle kterého by šel protokol identifikovat. Na
microformats.org je sice doporučováno následující označení:
<a class="url" type="application/x-icq" href="http://www.icq.com/people/cmd.php?
uin=icq_cislo&action=message">icq_cislo</a>
V praxi je ale uživateli, který nemá nainstalován originální ICQ klient, po kliknutí na odkaz
nabídnut ke stažení soubor cmd.php místo očekávaného dialogového okna příslušného
chatovacího programu.
3.5.2. Využití
Praktických využití je pro hCard společně s hCalendar asi nejvíce. První příklad využití je
možnost pomocí nepřeberné škály doplňků v prohlížečích označené kontakty procházet,
vyhledávat uvedené adresy, nebo si například kontakt přímo uložit do svého online adresáře.
Jelikož hCard vychází ze zavedeného standardu vCard, je možné si také nechat kontakty do
tohoto formátu exportovat a následně vložit do adresáře například v Outlooku nebo mobilním
telefonu.
Pro doplněk Operator například existuje skript, který dokáže kontakt ve vCard poslat přes
Bluetooth rovnou do telefonu.
Běžné možnosti doplňku Operator jsou vidět na obrázku 14. Pokud by u kontaktu byla vyplněna i
adresa, bylo by možné ji přímo zobrazit i na několika mapových službách.
Obrázek 13 - Exportování kontaktu do formátu vcard
Obrázek 14 - Zobrazení vyexportovaného
kontaktu v prohlížeči kontaktů Microsoft
Windows
Aplikací, které dokážou kontakt zapsaný v hCard různě zpracovat a nějak využít, je opravdu
mnoho, avšak pracují na stejném principu. Další výhoda hCard totiž opět souvisí s vyhledávači.
36
Vyhledávací služby Googlu, Yahoo nebo i českého Seznamu totiž s kontakty označenými tímto
mikroformátem umí pracovat.
Pokud je ve výsledku hledání nějaké osoby anglického Googlu stránka s hCard označením,
zobrazí Google pomocí svých tzv. Rich Snippets doplňující informace o této osobě.
Obrázek 15 - Zobrazení dodatečných informací o hledané osobě na Googlu
3.6. Mikroformát hReview
Jelikož mikroformáty nabízí i formát hReview pro označení recenzí, rozhodl jsem se ho k tomuto
účelu použít i v magazínu, přestože články jsou už celkem podrobně označeny mikroformátem
hAtom. Pomocí hReview totiž lze navíc označit název konkrétního produktu a hlavně stroj pozná,
že se opravdu jedná o recenzi a ne o běžný článek.
Mikroformát hReview navíc samozřejmě podporuje označení dalších hodnot, jako je například
bodové ohodnocení produktu, které potom většinou aplikace převádějí na přehlednou
vizualizaci v podobě hvězdiček, ale tento systém hodnocení se na mobilenetu nepoužívá a je
nesmyslné jej kvůli podpoře v hReview zavádět.
Co se týče implementace, označuje hReview formát téměř ty samé informace jako dříve
popsaný hAtom. Název článku je tak kromě entry-tile označen kvůli hReview ještě hodnotou
summary, autor článku je označen hodnotami author a reviewer a stejně bych mohl
pokračovat u každé společné položky.
Zde se nabízí jasná otázka, zda by nestálo za úvahu značení hReview sjednotit podle hAtom a
tím ušetřit zbytečné dvojité značení. hReview navíc nabízí i nepovinný zápis verze své
specifikace, takže by v budoucnu nemusel být velký problém, pokud by se značení v nové revizi
změnilo. Stroj zpracovávající hReview by obsah interpretoval podle uvedené verze formátu.
Pomocí hReview je navíc oproti standardnímu značení hAtom označen i typ a název
recenzovaného produktu:
<span class="type">product</span>
<span class="item"><span class="fn">'.implode(", ", $models).'</span></span>
3.6.1. Využití
Recenze označené hReview jsou ve světě využívány v různých agregačních a vyhledávacích
službách. V Česku jsou sice dosti populární různé srovnávací a vyhledávací služby výrobků, které
k nim nabízejí i recenze, ale je nutné je buďto ručně napsat nebo na nějakou externí recenzi
ručně zadat odkaz.
37
V současnosti tak pro český magazín zatím vidím výhodu jen v podpoře od Google, který díky
Rich Snippets může odkaz na naši recenzi obohatit o další informace.
Obrázek 16 - Zobrazení doplňujících informací o recenzi díky Google Rich Snippets
3.7. Mikroformát hMedia
Mikroformát hMedia patří mezi mikroformáty, které zatím nejsou v centru dění a moc služeb
s nimi nepracuje. I přesto byl implementován, protože díky němu lze u médií, která jsou
obsažena ve článcích, sémanticky označit dodatečné informace, které jsou o nich v systému
evidována.
Veškeré obrázky a videa (videa zatím nejsou implementována) týkající se článků jsou totiž
vedena v databázi v takzvané galerii médií. Galerie tak obsahuje dodatečné meta informace o
všech obrázcích a videích, které můžeme využít skrz celý portál. Předejde se tím tak zbytečné
duplicitě dat, kdy se nahrávají totožné obrázky k různým článkům týkajících se stejných témat.
Bude také možné tvořit galerie, které bude možné procházet v rámci článku nebo i jednotlivých
rubrik, do kterých jsou média rozřazena.
Navíc bych chtěl zkusit na obrázky použít určitou formu SEO, o které se moc nemluví a je tady
teoretická šance, jak získat další návštěvníky. Kromě optimalizovaných URL obrázků se tak k nim
z databáze přidává co nejvíce meta informací, k čemuž se mikroformát hMedia hodí.
$replace = '<span class="hmedia">
<a href="/galerie/'.$this->strFnc->makeURL($media->name).''.$link[1].'/clanek-'.$articleID.'/" title="zvětšit obrázek" rel="enclosure"
type="image/jpeg"><img src="/media/'.$this->strFnc->makeURL($media->name).''.$link[1].'/nahled/" alt="'.$media->name.'" width="'.$media->widthThumb.'"
height="'.$media->heightThumb.'"'.$additional.' class="photo"></a>
<span class="fn">'.$media->name.'</span>
</span>';
Pomocí mikroformátu hMedia je tak u každého obrázku označen samotný obrázek
(class="photo"), odkaz kde je k zobrazení jeho větší verze (rel="enclosure") a název
obrázku (class="fn").
Ve stránce s větším náhledem obrázku je navíc zobrazen vlastník daného obrázku. U fotografií
v recenzi jím je tedy mobilenet.cz, v případě, že použijeme fotografie například ze zahraničního
portálu, bude jako vlastník uveden on. K tomu v hMedia slouží volitelná hodnota contributor,
pro kterou se může použít mikroformát hCard.
38
if($image->copyright) {
$copyright = ', <span class="contributor vcard">© <span class="fn
org">'.$image->copyright.'</span></span>';
}
3.7.1. Využití
Jak už jsem zmiňoval, tento mikroformát by mohl pomoci magazínu se více prosadit ve
vyhledávačích obrázků. Navíc je hMedia podporován i velice zajímavým doplňkem oomph.
3.7.2. Doplněk oomph
Oomph je dostupný jako instalovatelný doplněk do Internet Exploreru nebo jako open source
Java Scriptová knihovna, vložitelná do kódu stránky. Oomph kromě hMedia podporuje i
mikroformáty hCard a hCalendar.
Obrázek 17 - Zobrazení kontaktu a obrázků z článku v doplňku oomph
Díky tomu, že je oomph použitelný i jako vložitelná knihovna, může autor webu návštěvníkům
nabídnout konkrétní výhody plynoucí z použití mikroformátů v jakémkoliv prohlížeči, bez toho,
aniž by si návštěvník cokoliv instaloval.
V nové verzi mobilenet.cz ale oomph v běžném nasazení použit nebude. Pravděpodobně bude
později nabídnut jako volitelná funkce registrovaným uživatelům. Důvody pro to jsou dva:
a) Běžní návštěvníci nic o mikroformátech ani tomto doplňku nevědí a jeho zobrazování
v levém horním rohu stránky by je mohlo mást.
b) Procházení HTML kódu delšího článku JavaScriptovou knihovnou může být pro slabší
počítače náročné a zdržovat tak od pohodlného načtení stránky.
3.8. Mikroformát XOXO
Mikroformát XOXO je v magazínu využit pro označení mapy stránek. Ta je generována
z databáze, jelikož je celá struktura webu uložena tam.
Implementace XOXO je pak velice jednoduchá. Vygenerovaný netříděný HTML seznam <ul> stačí
označit jako kořenový element zápisem class="xoxo" a všechny jeho položky <li> a další
vnořené seznamy <ul> jsou součástí přehledu podle specifikací XOXO. V každé položce seznamu
je tak definován text položky, odkaz a rozšiřující informace v atributu title. Není tedy potřeba
přidávat žádný další kód.
Takto označená mapa stránek by potom měla jednoduše jít pomocí obecného programu
překonvertovat do formátu Google Sitemaps, který je možné pomocí Google nástrojů pro
39
webmastery uploadovat a pomoci tak idexovacímu robotu Googlu lépe procházet stránky
magazínu, což může pomoci k efektivnější indexaci stránce a se SEO. [7]
3.9. Rel mikroformáty
Mikroformáty založené na atributu HTML rel jsou velice jednoduché a používají Rel návrhový
vzor.
3.9.1. Rel-tag
Sytém tagů je oproti stávající verzi mobilenet.cz také novinkou. Tagovat se dají články a média
v galerii a do budoucna se dá tento systém rozšířit na další objekty v magazínu. Tagy dovolují
flexibilní označovaní obsahu podle různých témat, kterých se obsah týká a pružně tak reagovat
na různé trendy a umožnit jednoduše čtenářům hledat související obsah.
Mikroformát rel-tag nabízí jednoduchý způsob, jak odkazy s jednolitými tagy označit.
Na konci každého článku je výpis tagů týkajících se toho článku. Každé zobrazení tagu v článku
mu připočte jedno zobrazení v databázi.
$tags[] = '<a href="/tag/'.str_replace(" ", "+", $value->tag).'/" rel="tag"
class="tag"><sub>#</sub>'.$value->tag.'</a>';
Odkaz z tagu vede vždy na stránku v podobě /tag/Název+tagu/. Na této stránce se pak
vypisuje veškerý obsah týkající se tohoto tagu, tedy zatím články a média z galerie. Každé
zobrazení této stránky připočte do databáze 10 zobrazení k příslušnému tagu.
Tímto systémem chci zachytit určitou oblíbenost jednotlivých témat. Připočítávané hodnoty
samozřejmě bude potřeba odladit až v reálném provozu.
Na základě takového ohodnocení tagů se potom například na úvodní stránku vkládá seznam
aktuálních témat.
Obrázek 18 - Vyhledávání tagů z článku pomocí doplňku Operator
Pomocí doplňků, jako je například Operator, lze jednoduše označené tagy vyhledávat na
známých vyhledávacích službách.
3.9.2. Rel-home
Mikroformát rel-home je implementován v navigaci a layoutu stránky. Veškeré odkazy vedoucí
na úvodní stránku jsou označeny kódem rel="home".
Tak stroje jasně rozpoznají základní strukturu stránky.
Prohlížeč Opera v základu a prohlížeč Firefox díky rozšířením, dokáže na základě atributu rel
nabízet uživateli rozšířenou navigaci v rámci stránky.
40
3.9.3. Rel-nofollow
Mikroformát rel-nofollow slouží k označení odkazu, který by indexovací roboti neměly brát
v potaz a přiřazovat mu tak pagerank. Tento mikroformát bude využit například v diskuzích, kde
se tak zamezí různým spammerům v přiživování se na pageranku mobilenet.cz.
3.10. Další mikroformáty
3.10.1. hProduct
Tento mikroformát slouží k popisu vlastností nějakého produktu a je tak ideální k popisu
informací v katalogu mobilních telefonů, který je v plánu na mobilenet.cz spustit později. Není
tedy zatím implementován, ale přišlo mi vhodné ho zmínit jako dalšího ideálního kandidáta pro
implementaci hodící se pro jednu z budoucích oblastí magazínu.
3.10.2. hNews
hNews je mikroformát navržený speciálně pro publikování článků na internetu a navíc využívá
z velké části formát hAtom. Bohužel je koncipován spíše pro klasické žurnalistické zprávy a
novinky a označuje informace, jako místo sepsání článku nebo zpravodajskou agenturu, ze které
bylo čerpáno. To se pro technické články o mobilních telefonech nehodí, takže je tento jinak
činnosti magazínu velmi příbuzný mikroformát vypuštěn.
3.11. Shrnutí přínosů implementace
U mnoha mikroformátů a také u HTML 5 jsou výše mnohokrát zmíněny přínosy v optimalizaci pro
vyhledávače, což je pro internetový magazín z technické stránky skutečně klíčový problém.
Jelikož ale žádný z vyhledávačů logicky nikdy přesné postupy, které ovlivňují hodnocení
relevantnosti stránek, nezpřístupní, je obor SEO těžko uchopitelnou disciplínou, ve které nikdo
nemůže poskytnout zaručeně správné postupy a pravidla, která zaručí stránkám vrchní pozice
v organickém vyhledávači.
Existují samozřejmě obecně stanovená a fungující pravidla, která ale používají téměř všichni,
takže je potřeba ve snaze být lepší než ostatní vždy jít trochu dál a zkoušet nové potupy.
Celý problém SEO se dá shrnout v tom smyslu, že vyhledávače se snaží nabídnout co nejvíce
relevantní výsledky, odkazující na opravdu relevantní a kvalitní data a vývojáři webů se je o
kvalitě svého obsahu snaží přesvědčit, ať už čistými, či nečistými praktikami.
Sémantika je myslím jednou z cest, jak indexovacího robota o kvalitě svých stránek přesvědčit.
Sémanticky označené informace na webu totiž pomohou strojům lépe pochopit jejich skutečný
význam. SEO pomocí mikroformátů skýtá podle mého pro internetový magazín opravdový
potenciál. Skutečnost však ukáže až čas a reálné nasazení.
Druhou výhodou mikroformátů je samozřejmě zvýšení komfortu práce se stránkami. To ovšem
vyžaduje buďto výchozí implementaci do nástrojů, které využívá většina čtenářů, nebo lepší
informování čtenářů o nepřeberných možnostech některých nástrojů, ať už v podobě webových
služeb nebo doplňků do prohlížečů.
41
Co se týče první skupiny, několik příkladů mezi běžně používanými nástroji existuje. Je to
například zmiňovaný Internet Explorer 8 nebo poskytování doplňkových informací o výsledcích
ve vyhledávačích, jako jsou Google, Yahoo nebo i Seznam. [19]
Velmi rozšířený prohlížeč Firefox od své třetí verze například nativní podporu mikroformátů ve
svém API nabízí, k jejich reálnému využití je ale stále potřeba instalace doplňků třetích stran, o
kterých běžní uživatelé nevědí. [20]
Zde je tedy stále prostor ke zlepšování, vyvíjení a prosazovaní aplikací, které budou pro běžné
uživatele užitečné a nebudou přitom vyžadovat nějaké zvláštní znalostí, angažovanost, nebo že
vůbec nějaké mikroformáty existují.
42
4. Konkurenční řešení
V této kapitole se pokusím zmapovat, jaké možnosti nabízejí nejpoužívanější volně dostupné
CMS a jiné publikační systémy v oblasti využití mikfrofomátů a zda mikroformáty používají
některé české internetové magazíny.
4.1. Mikroformáty v nejpoužívanějších CMS
Mnoho internetových projektů si nemůže dovolit nechat vyrobit systém na míru. Pro ně se tak
stávají volně dostupné systémy pro správu obsahu ideálním řešením. Open source CMS ale
samozřejmě využívá i mnoho velkých a úspěšných projektů, protože řada z nich nabízí pokročilé
funkce a rozsáhlou možnost customizace. Jaké možnosti nabízí tyto systémy svým uživatelům, co
se týče označování publikovaných informací pomocí mikroformátu?
4.1.1. WordPress
Pravděpodobně nejpokročilejším publikačním systémem v implementaci mikroformátů je
WordPress. Přímo v základu nabízí označování odkazů pomocí XFN. Pomocí velkého množství
témat je do WordPressu možné implementovat podporu mikroformátů jako jsou hAtom, hCard
a XOXO. Pomocí dalších plug-inů lze potom implementovat mnoho dalších mikroformátů (např.
hCalendar). [21]
Většina z těchto doplňků se nezaměřuje přímo pouze na podporu mikroformátů, ale doplňuje je
jako přirozenou součást svých funkcí. Tyto doplňky lze velice snadno dohledat na oficiálních
stránkách WordPress i v jiných zdrojích, čímž se WordPress systém stává ideálním kandidátem při
výběru CMS systému podporujícího mikroformáty.
4.1.2. Drupal
Systém Drupal na tom je, co se týče podpory mikroformátu, o poznání hůře. Z oficiálních
doplňků Drupal nabízí podporu pouze hCard a hCalendar opět jako součást příbuzné
funkčnosti. Dále lze poměrně složitě dohledat mnoho návrhů a uživatelských patchů doplňující
podporu dalších mikroformátů.
Zlepšení by v oblasti sémantiky měla přinést příští, sedmá, verze Drupalu. V něm se plánuje
přímo systémová podpora RDFa. [22]
4.1.3. Joomla!
Tento CMS podporu pro mikroformáty v podstatě vůbec nenabízí. K nalezení je pouze několik
málo uživatelských neoficiálních patchů, které přidají podporu například pro hCard do
stávajícího systému. Na microformtas.org je zmínka o několika dalších implementacích, ty ale
probíhaly přímou úpravou kódu Joomly a nejsou tedy v podobě snadno instalovatelného doplňku
dostupné všem uživatelům.
4.1.4. MediaWiki
Na systému MediaWiki je postavena například velice známá encyklopedie Wikipedia.org. Do
Wikipedie lze samozřejmě ručně zadávat HTML, které tak lze označit i podle libovolného
mikroformátu.
43
Vzniknul ale i projekt nazvaný WikiProject Microformats, pod kterým se sdružují různé šablony
(templates), které zajišťují převod informací zapsaných v MediWiki syntaxi do výsledného HTML
s mikroformáty. Tyto šablony sice také vyžadují naučení se nových postupů při zápisu kódu, aby
převod do mikroformátů fungoval, ale staví na stejné syntaxi, jakou už umí uživatelé MediaWiki
používat. Navíc se tak zajistí jednotný a korektní převod do mikroformátů.
Za pomocí šablon tak lze v MediaWiki publikovat obsah označený libovolným mikroformátem.
Jejich podpora je opravdu široká. [23]
4.1.5. Další systémy
Celkem solidní podporu nabízí i mnoho méně rozšířených publikačních systémů, jako je například
Movable Type, LiveJournal, Textpattern, Postunuke, Plone a další.
4.1.6. Shrnutí
Jako jasná volba se tak v případě, že bychom chtěli použít rozšířený CMS s dobrou a snadno
doplnitelnou podporou mikroformátů, jeví WordPress.
Mnoho tvůrců webů ale po open source CMS sahá i z toho důvodu, že na jejich základu chce
postavit vlastní, upravený portál. V tomto případě pak není moc velký problém sáhnout i po
jiném zmíněném systému s tím, že si vývojář bude muset mikroformáty implementovat sám
nebo využít některé návody a patche dostupné na internetu.
Pozitivní je, že nejrozšířenější nástroj pro vytváření internetových wiki stránek, MediaWiki,
určitou podporu také nabízí. Myslím, že u projektu, jako je internetová encyklopedie, je využití
sémantiky velice přínosné a důležité.
4.2. Mikroformáty v českých magazínech
V mezinárodních službách lze používání mikroformátů vysledovat u mnoha z nich. Za ty největší
uvedu například Google Maps, Twitter, Last.fm, Facebook, LinkedIn a mnoho dalších. Jak jsou na
tom ale české stránky, především potom magazíny?
I mezi českými službami lze najít několik příkladů používajících mikroformáty. Z nich zmíním
například ZlatéStránky.cz nebo Firmy.cz od Seznamu.
Vyhledávač Yahoo, stejně jako Google, umí při indexování využít i mikroformáty. Yahoo ale nabízí
velice zajímavý nástroj pojmenovaný SearchMonkey, pomocí kterého lze například zjistit, které
všechny stránky mikroformáty používají. Pokud tak chceme vyhledat všechny indexováne stránky
v doméně cz používajících hCard, stačí vložit do Yahoo vyhledávání tento řetězec:
searchmonkey:com.yahoo.page.uf.hcard site:cz.
V indexu Yahoo tak lze v doméně cz najít 1 100 000 stránek používajících hCard, 65 000 stránek
používajících hCalendar, 3 120 stránek používajících hReview, 87 200 stránek používajících
hAtom a 186 000 stránek používajících XFN.
Po namátkovém projití těchto výsledků tak zjistíme, že většinu z nich tvoří menší stránky
obsahující profily osob nebo firem, případně blogy nebo jiné stránky postavené na WordPress.
Co se týče konkrétně magazínů na českém internetu, je podpora mikroformátů velice špatná.
44
Z velkých a navštěvovaných magazínů tak lze zmínit pouze projekty vydavatelství Computer
Press Živě.cz a MobilMania.cz. U obou magazínů ale za použitím mikroformátů stojí opět
WordPress, který tyto magazíny používají pro čtenářské blogy integrované do jejich stránek.
Konkrétně se jedná o podporu pouze rel-tag formátu. Živě.cz má navíc na svých stránkách
implementovány ještě Web Slices.
Z menších projektů jsem dohledal ještě magazín ITBIZ.cz (postaveno na Drupalu) a
ExtraWindows.cz, používající opět pouze rel-tag. Zajímavé je, že sesterské projekty těchto
magazínů, které vydávají jejich vydavatelví, mikroformáty neimplementují.
Pomocí SearchMonkey jsem našel ještě magazíny jako Buzzmag.cz, magazin.softimage.cz,
ideje.cz nebo například pcmagazin.cz. Vesměs je implementován pouze rel-tag, u některých i
XFN nebo hAtom.
4.2.1. Shrnutí
Podle Yahoo je stránek na české doméně používajících mikroformáty docela dost. Za velkou částí
této podpory ale stojí WordPress, takže se dá jen spekulovat, do jaké míry je používaní
mikroformátů intencionální. U zpravodajských webů a magazínů obecně je pak penetrace
mikroformáty ještě mnohem nižší.
Tato situace pro magazín, jako je mobilenet.cz, implementující mikroformáty, přináší jedno
pozitivum i jedno negativum.
Negativním aspektem je minimální seznámenost a zkušenost českého uživatele internetu
s mikroformáty, což znamená horší výchozí pozici magazínu, pro snahu jeho návštěvníky
přesvědčit o výhodách mikroformátů a získání si tak větší obliby.
Na druhou stranu nízká penetrace mezi potencionální konkurencí znamená právě vyšší možnost
zaujmout něčím novým a bezesporu také další výhody v optimalizaci pro vyhledávače.
45
Závěr
Hlavními cíly této práce bylo nahlédnout do problému sémantiky na webu, vybrané sémantické
prvky (mikroformáty a HTML 5) začlenit do vývoje 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.
V práci bylo popsáno, proč je sémantika na webu důležitá a jaké výhody může přinést. Jelikož
způsobů, jak sémanticky obohatit obsah webu je více, bylo potřeba vybrat vhodné technologie,
kterými se staly mikroformáty a sémantické značky z HTML 5.
Ačkoliv je implementace mikroformátů ze své podstaty celkem jednoduchá, v praxi je možné se
setkat s několika problémy a otázkami způsobu implementace. Popis implementace
mikroformátů tak může sloužit jako náhled do těchto problémů a jako možný návod řešení.
Mikroformátů je navíc velké množství a stále se vyvíjí a vznikají nové. Ještě více je potom
možných způsobů jejich využití. Bylo tedy důležité vybrat pouze ty, které přinesou
internetovému magazínu užitek a využít je na správných místech a vhodným způsobem.
Reálná implementace také v případě HTML 5 ukázala, že ne všechny technologie je možné
bezproblémově použít už v dnešní době a je potřeba činit určité kompromisy pro zachování větší
kompatibility.
Každá technologie by při vývoji měla být implementována s vědomím jasných přínosů a
případných nevýhod. U každého mikroformátu jsem se tak zaměřil i na možnosti využití a výhod,
které jejich použití přinese pro magazín a jeho čtenáře.
Jelikož je možné pro provozování internetového magazínu, případně jiného projektu, použít i
volně dostupné CMS, provedl jsem průzkum, jaké možnosti tyto systémy nabízejí svým
uživatelům v oblasti mikroformátů. Výsledek příliš dobře nedopadl a z hlediska snadnosti použití
mikroformátů lze doporučit pouze systém WordPress. To ale neznamená, že by podpora u jiných
systémů nebyla žádná.
Rovněž jsem provedl průzkum, jak si v použití mikroformátů stojí české weby a hlavně
konkurence. Za pomocí SearchMonkey se mi podařilo zjistit konkrétnější čísla o využívání
mikroformátů a také to, že využití mikroformátů v českých zpravodajských serverech a hlavně u
přímé konkurence (zaměření na mobilní telefony) není v podstatě žádné. To by pro vyvíjený
magazín mobilenet.cz mohlo znamenat určitou konkurenční výhodu.
Je ale potřeba říci, že žádná z popsaných výhod nebyla ještě ověřena v praxi v běžném provozu.
Určitě by tedy stálo za to, se po spuštění nové verze magazínu k těmto věcem vrátit a pokusit se
dopady nových technologií zanalyzovat v reálném provozu s reálnými návštěvníky.
46
<Citovaná literatura
Citovaná literatura
1. ALLSOPP, John. Microformats: Empowering Your Markup for Web 2.0. 1. vydání. New York :
Springer-Verlag New York, Inc., 2007. str. 345. ISBN: 1-59059-814-8.
2. BERNERS-LEE, Tim a CONNOLLY, Daniel. Hypertext Markup Language (HTML). XHTML2
Working Group Home Page. *Online+ Červen 1993. *Citace: 31. října 2009.+
http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt.
3. HTML. Wikipedia, the free encyclopedia. [Online] Wikimedia Foundation, Inc., 30. října 2009.
*Citace: 31. října 2009.+ http://en.wikipedia.org/wiki/HTML#Semantic_HTML.
4. W3C Semantic Web Activity. World Wide Web Consortium (W3C). [Online] World Wide Web
Consortium, 16. října 2009. *Citace: 31. října 2009.] http://www.w3.org/2001/sw/.
5. Semantic Web. Wikipedia, the free encyclopedia. [Online] Wikimedia Foundation, Inc., 28.
října 2009. *Citace: 31. října 2009.+ http://en.wikipedia.org/wiki/Semantic_Web.
6. MANOLA, Frank a MILLER, Eric. RDF Primer. World Wide Web Consortium (W3C). [Online]
World Wide Web Consortium, 10. února 2004. *Citace: 31. října 2009.+
http://www.w3.org/TR/rdf-primer/.
7. LEWIS, Emily P. Microformats Made Simple. 1. vydání. Berkley : New Riders Press, 2010. str.
301. ISBN: 0-32166-077-3.
8. Microformats.cz - mikroformáty pro sémantický web. Microformats.cz. [Online] [Citace: 2.
listopadu 2009.] http://microformats.cz/.
9. About Microformats. Microformats. [Online] [Citace: 2. listopadu 2009.]
http://microformats.org/about.
10. profile-uris. Microformats Wiki. [Online] microformats.org, 6. dubna 2009. [Citace: 16.
listopadu 2009.] http://microformats.org/wiki/profile-uris.
11. Microformats Wiki. [Online] microformats.org, 19. listopadu 2009. [Citace: 20. listopadu
2009.] http://microformats.org/wiki/Main_Page.
12. Web Slice Format Specification - Version 0.9. MSDN Library. [Online] Microsoft Corporation,
2009. [Citace: 20. listopadu 2009.] http://msdn.microsoft.com/enus/library/cc304073(VS.85).aspx.
13. HUNT, Lachlan. Seznámení s HTML 5. Interval.cz. [Online] ZONER software, a.s., 24. prosince
2007. [Citace: 16. listopadu 2009.] http://interval.cz/clanky/seznameni-s-html-5/.
14. SALVET, Pavel. HTML 5 a sémantika. Interval.cz. [Online] ZONER software, a.s., 4. dubna
2009. [Citace: 16. listopadu 2009.] http://interval.cz/clanky/html5-a-semantika/.
15. Google Analytics | Official Website. [Online] Google Inc., 5. listopadu 2009. [Citace: 5.
listopadu 2009.] http://www.google.com/analytics/.
47
16. PROKOP, Marek. Jak zvolit šířku stránky. Sova v síti. *Online+ 6. října 2003. *Citace: 6.
listopadu 2009.] http://sovavsiti.cz/c01051.html.
17. W3C Working Group. XHTML Media Types - Second Edition. World Wide Web Consortium
(W3C). [Online] World Wide Web Consortium, 16. ledna 2009. [Citace: 19. listopadu 2009.]
http://www.w3.org/TR/xhtml-media-types/.
18. HAGENBURGER, Nico. HTML5 / XHTML5 with CSS for Safari, Firefox, Opera & IE. Nico
Hagenburger. *Online+ 9. března 2009. *Citace: 19. listopadu 2009.+
http://www.hagenburger.net/2009/03/html5-xhtml5-with-css-for-safari-firefox-opera-ie.
19. Mikroformáty. Seznam Nápověda. [Online] Seznam.cz, a.s. [Citace: 22. listopadu 2009.]
http://napoveda.seznam.cz/cz/fulltext-hledani-v-internetu/hledani-fulltext-mikroformaty/.
20. KAPLY, Michael. Where are the microformats in Firefox 3? Mike’s Musings. [Online] 20.
května 2008. *Citace: 22. listopadu 2009.+ http://www.kaply.com/weblog/2008/05/20/whereare-the-microformat-in-firefox-3/.
21. WordPress. Microformats Wiki. [Online] Microformats.org, 19. sprna 2009. [Citace: 25.
listopadu 2009.] http://microformats.org/wiki/wordpress.
22. A roadmap for RDFa in Drupal 7. groups.drupal.org. [Online] 8. listopadu 2008. [Citace: 25.
listopadu 2009.] http://groups.drupal.org/node/16597.
23. Wikipedia:WikiProject Microformats. Wikipedia, the free encyclopedia. [Online] Wikimedia
Foundation, Inc., 14. listopadu 2009. [Citace: 25. listopadu 2009.]
http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats.
24. Semantic Web Case Studies and Use Cases. World Wide Web Consortium (W3C). [Online]
World Wide Web Consortium, 29. července 2009. *Citace: 31. října 2009.+
http://www.w3.org/2001/sw/sweo/public/UseCases/.
25. Ontologie (výpočetní technika). Wikipedie, otevřená encyklopedie. [Online] Wikimedia
Foundation, Inc., 2. září 2009. *Citace: října. 31 2009.+
http://cs.wikipedia.org/wiki/Ontologie_(v%C3%BDpo%C4%8Detn%C3%AD_technika).
26. phpBB. Wikipedie, otevřená encyklopedie. *Online+ Wikimedia Foundation, Inc., 11. září 2009.
[Citace: 6. listopadu 2009.] http://cs.wikipedia.org/wiki/PhpBB.
27. Framework. Wikipedie, otevřená encyklopedie. *Online+ Wikimedia Foundation, Inc., 10. září
2009. [Citace: 13. listopadu 2009.] http://cs.wikipedia.org/wiki/Framework.
28. DUBOIS, Paul. MySQL profesionálně. 2. vydání. Praha : Mobil Media a.s., 2003. str. 1071.
ISBN 80-86593-41-X.
48
Rejstřík výrazů
Rejstřík výrazů
A
AJAX, 27
Atom, 16, 32, 33, 34
C
CMS, 9, 43, 44, 46
Drupal, 43
Joomla!, 43
MediaWiki, 43, 44
WordPress, 43, 44, 45, 46
rel-nofollow, 41
rel-tag, 16, 33, 40, 45
složené, 12
Web Slices, 16, 22, 34, 35, 45
XOXO, 39, 43
MySQL, 18, 21, 26, 27
O
F
ontologie, 10
oomph, 39
Operator, 33, 36, 40
OWL, 10
framework, 25, 26, 27
P
H
PHP, 18, 20, 21, 22, 23, 26, 27, 34
HTML, 9, 10, 11, 12, 13, 14, 16, 17, 21, 22, 23,
25, 29, 30, 31, 32, 39, 40, 41, 43, 44, 46
HTTP, 23
R
JavaScript, 27
RDF, 10, 11
RDFa, 11, 43
Rich Snippets, 37, 38
RSS, 16, 21, 33, 34
M
S
MathML, 29
metadata, 12, 13
mikroformát, 9, 11, 12, 13, 14, 16, 17, 31, 35, 37,
38, 39, 42, 43, 44, 45, 46
elementární, 12
hAtom, 16, 32, 33, 34, 35, 37, 41, 43, 44, 45
hCalendar, 16, 36, 39, 43, 44
hCard, 12, 14, 15, 16, 33, 35, 36, 37, 38, 39,
43, 44
hMedia, 16, 38, 39
hNews, 41
hProduct, 16
hReview, 16, 37, 44
hSlice, 16, 34
mikroformát
hAtom, 16
rel-home, 40
SearchMonkey, 44, 45, 46
Sémantický web, 10, 11, 17
SEO, 28, 31, 33, 38, 40, 41
SVG, 29
J
U
URI, 13, 31, 32
URL, 20, 28, 36, 38
W
W3C, 10, 11, 13, 16, 29
X
XFN, 11, 12, 16, 43, 44, 45
XHTML, 11, 13, 29, 30
XMDP, 13
XML, 10, 16, 29, 32, 33, 34
49
Rejstřík obrázků
Obrázek 1 - Znázornění layoutu stránky pomocí nových HTML 5 značek *13+ .............................. 17
Obrázek 2 – Administrace stávající verze ...................................................................................... 18
Obrázek 3 - Úvodní stránka stávající verze ................................................................................... 18
Obrázek 4 - Úvodní strana nového designu .................................................................................. 19
Obrázek 5 - Zobrazení článku v novém designu ............................................................................ 19
Obrázek 6 - Stručný Class diagram základních PHP tříd (neobsahuje všechny metody a parametry)
...................................................................................................................................................... 22
Obrázek 7 - Znázornění postupu editace Boxu v administraci ...................................................... 24
Obrázek 8 - Administrace - přehled dat v tabulce ......................................................................... 26
Obrázek 9 - Administrace - editace dat ve formuláři .................................................................... 26
Obrázek 10 - Přehled článků označených pomocí hAtom ve Firefoxu .......................................... 33
Obrázek 11 - Zápis pro odebírání boxu aktualit ve Firefoxu .......................................................... 34
Obrázek 12 - Zobrazení samostatně odebíraného výpisu recenzí v Internet Exploreru ................ 34
Obrázek 13 - Exportování kontaktu do formátu vcard .................................................................. 36
Obrázek 14 - Zobrazení vyexportovaného kontaktu v prohlížeči kontaktů Microsoft Windows ... 36
Obrázek 15 - Zobrazení dodatečných informací o hledané osobě na Googlu ............................... 37
Obrázek 16 - Zobrazení doplňujících informací o recenzi díky Google Rich Snippets.................... 38
Obrázek 17 - Zobrazení kontaktu a obrázků z článku v doplňku oomph ....................................... 39
Obrázek 18 - Vyhledávání tagů z článku pomocí doplňku Operator ............................................. 40
50
Rejstřík tabulek
Rejstřík tabulek
Tabulka 1 - Přehled používaných rozlišení obrazovky návštěvníků monilenet.cz podle Google
Analytics [15] ................................................................................................................................ 19
Tabulka 2 - Přehled návštěvnosti jednotlivých stránek v období 1. 1. 2009 - 6. 11. 2009 [15] ..... 20
51

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

Transkript

Podobné dokumenty

Geo mikroformát - Vysoká škola báňská

Abíčko - AbcLinuxu.cz

Vyhledávání na internetu

2 999 - MASCAT.CZ

Sestava 1 - rock for people

ZEMĚ ŽIVITELKA České Budějovice STYL a KABO Brno

dokumentografické informační systémy osnova předmětu (2016

Text práce - Katedra geoinformatiky

Petr Nevrlý seznam.cz>

Sborník příspěvků

Radia live České a Slovenské radia Archív TV Nova TV PRIMA TV TV

stručná anotace

Telefonování s mobilními telefony Nokia 2700 a Blackberry Passport

DEN LATINY MMXVI: 21. 4. 2016, 11-12h

jak vytvářet mapu