Open source publikační systém pro nadační fond Bible21

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství

Bakalářská práce

Open source publikační systém pro nadační fond Bible21 Marek Danel

Vedoucí práce: Mgr. Monika Součková

14. května 2014

Poděkování Rád bych poděkoval své vedoucí práce Mgr. Monice Součkové, za odborné vedení a konzultace, a Marku Rolnému za spolupráci na stránkách bible21.cz, cenné rady a podněty.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval(a) samostatně a že jsem uvedl(a) veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů. V souladu s ust. § 46 odst. 6 tohoto zákona tímto uděluji nevýhradní oprávnění (licenci) k užití této mojí práce, a to včetně všech počítačových programů, jež jsou její součástí či přílohou a veškeré jejich dokumentace (dále souhrnně jen „Dílo“), a to všem osobám, které si přejí Dílo užít. Tyto osoby jsou oprávněny Dílo užít jakýmkoli způsobem, který nesnižuje hodnotu Díla a za jakýmkoli účelem (včetně užití k výdělečným účelům). Toto oprávnění je časově, teritoriálně i množstevně neomezené. Každá osoba, která využije výše uvedenou licenci, se však zavazuje udělit ke každému dílu, které vznikne (byť jen zčásti) na základě Díla, úpravou Díla, spojením Díla s jiným dílem, zařazením Díla do díla souborného či spracováním Díla (včetně překladu), licenci alespoň ve výše uvedeném rozsahu a zároveň zpřístupnit zdrojový kód takového díla alespoň srovnatelným způsobem a ve srovnatelném rozsahu, jako je zpřístupněn zdrojový kód Díla.

V Praze dne 14. května 2014

.....................

České vysoké učení technické v Praze Fakulta informačních technologií c 2014 Marek Danel. Všechna práva vyhrazena.

Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.

Odkaz na tuto práci Danel, Marek. Open source publikační systém pro nadační fond Bible21. Bakalářská práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2014.

Abstract This thesis discusses the design of a new web architecture of site bible21.cz based on an analysis conducted by Optimal Marketing s.r.o. and a keyword research. The new architecture takes into account target groups of visitors and removes user interface errors. The new bible12.cz website is going to be powered by an open source content management system. Therefore, a research of three most popular open source CMS was conducted. That includes WordPress, Joomla! and Drupal. Based on this research, WordPress was chosen to manage bible21.cz. Part of tasks resulting from the analysis and design was also implemented, mainly the import from backup of nbk.cz. Website nbk.cz is powered by an unknown content management system without publicly available documentation. Moreover, it was damaged during an attack by hackers and since then it has been broken. Keywords Bible21, website architecture, Bootstrap, import from a damaged backup, keyword research, CMS, content migration, WordPress, Joomla, Drupal

ix

Abstrakt Tato práce pojednává o návrhu nové architektury webu bible21.cz na základě analýzy provedené společností Optimal Marketing s.r.o a analýzy klíčových slov. Nová architektura bere ohled na cílové skupiny návštěvníků a odstraňuje chyby v uživatelském rozhraní. Nový web bible12.cz bude postaven na open source redakčním systému. Proto byla provedena rešerše tří nejpopulárnějších open source CMS, kterými jsou WordPress, Joomla! a Drupal. Na základě této rešerše byl pro správu bible21.cz vybrán WordPress. Část úprav vyplývajících z analýzy a návrhu byla také implementována, zejména provedení importu ze zálohy nbk.cz. Web nbk.cz by vytvořen v neznámém redakčním systému bez veřejně dostupné dokumentace. Navíc byl při napadení hackery poškozen a od té doby byl naprosto nefunkční. Klíčová slova Bible21, architektura webového portálu, Bootstrap, import poškozené zálohy, analýza klíčových slov, migrace webu, WordPress, Joomla, Drupal

x

Obsah Úvod Struktura práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 1

1 Cíl práce

3

2 Vymezení problematiky 2.1 Historie webu . . . . . . . . . . . . 2.2 Porovnání a výběr vhodného CMS 2.3 Architektura . . . . . . . . . . . . 2.4 Import dat se zálohy . . . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

5 5 5 6 6

3 Porovnání open source CMS 3.1 O open source redakčních systémech 3.2 Kritéria hodnocení . . . . . . . . . . 3.3 WordPress . . . . . . . . . . . . . . . 3.4 Joomla . . . . . . . . . . . . . . . . . 3.5 Drupal . . . . . . . . . . . . . . . . . 3.6 Vyhodnocení . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

7 7 8 9 13 17 19

4 Analýza a návrh architektury 21 4.1 Analýza klíčových slov . . . . . . . . . . . . . . . . . . . . . . . 21 4.2 Doporučení vyplývající z analýzy klíčových slov . . . . . . . . . 22 4.3 Architektura . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 5 Realizace 39 5.1 Import zálohy nbk.cz . . . . . . . . . . . . . . . . . . . . . . . . 39 5.2 Výsledek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Závěr

47 xi

Literatura

49

Použité programy

51

A Seznam použitých zkratek

53

B Obsah přiloženého CD

55

xii

Seznam obrázků 3.1 3.2 3.3 3.4 3.5

Instalace WordPressu . Instalace WordPressu . Page Tree plugin . . . . Označení pozic modulů Theme developer . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

10 11 13 15 18

4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 4.11 4.12 4.13 4.14

Klasifikace klíčových slov . . . . . Výsledek klasifikace klíčových slov Výsledek hledání online Bible . . . Výsledek hledání v bible.kazani.cz Stromový seznam článků . . . . . . Původní domovská stránka . . . . Návrh domovské stránky . . . . . . Původní stránka nadační fond . . . Stránka nadační fond . . . . . . . Původní stránka texty . . . . . . . Stránka texty . . . . . . . . . . . . Původní stránka audio . . . . . . . Stránka audio . . . . . . . . . . . . Stránka Bible21 do mobilu . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

23 24 25 26 28 30 31 32 34 35 36 37 37 38

5.1 5.2

Oživený web nbk.cz . . . . . . . . . . . . . . . . . . . . . . . . . . Rekonstrukce konceptuálního modelu . . . . . . . . . . . . . . . . .

41 43

xiii

Úvod Tato práce se zabývá návrhem architektury webu bible21.cz na open source redakčním systému. Web bible21.cz je oficiální webovou prezentací nového překladu Bible, který zajišťuje Nadační fond Bible21. Tento web ale neplní svou úlohu dobře. Tato bakalářská práce tedy pojednává o procesu přeměny tohoto webu tak, aby odpovídal potřebám cílových skupin a cílům klienta. Návrh vychází z analýzy provedené společností Optimal Marketing s. r. o.

Struktura práce Kapitola vymezení problematiky obsahuje podrobnější představení problémů řešených v následujících tří hlavních částech této práce.

Porovnání open source CMS Tato kapitola obsahuje rešerši tří nejrozšířenějších open source redakčních systémů, kterými jsou WordPress, Joomla! a Drupal. Na základě této rešerše je vybrán vhodný CMS pro správu webu bible21.cz po jeho transformaci. Proto rešerše porovnává kromě obecných vlastností systémů i možnosti reagovat na konkrétní potřeby webu Bible21.

Analýza a návrh architektury Tato kapitola pojednává o analýze klíčových slov, která je východiskem pro návrh architektury. Dozvíte se, jak analýza probíhala a jaká doporučení pro úpravy z ní vyplynuly, a jak bude nová architektura webu vypadat. Zde je také zahrnut také rozbor vážných problémů nalezených na stránkách a návrh jejich řešení. Pro klíčové stránky zde najdete i popis řešení jejich nedostatků a jejich grafické návrhy. 1

Úvod

Realizace Toto je praktická část bakalářské práce. Věnuje se importu dat z poškozeného webu nbk.cz, který byl prezentací projektu Bible21 před tím, než byl po napadení hackery odstaven. Dozvíte se zde procesu rekonstrukce mrtvých stránek postavených na neznámém redakčním systému, poznání rozsahu a struktury dat, které bude potřeba převést, a implementaci jejich převodu. Implementace úpravy architektury webu je pouze zmíněná, neboť se jedná o rutinní nezajímavou práci.

2

Kapitola

Cíl práce Cílem této bakalářské práce je návrh a implementace části úprav dohodnuté se zadavatelem, které podle analýzy provedené společností Optimal Marketing s.r.o. je potřeba na webu provést, případně i doplnění analýzy. K tomu patří i porovnání a výběr open source CMS, který bude odpovídat novým potřebám webu. Výsledkem by měl být funkční web, který bude obsahovat všechny dohodnuté úpravy. A pro problémy, kterých řešení se v rámci této bakalářské práce neimplementují, bude řešení navrženo. Kromě provedení úprav zahrnutých v bakalářské práci, je cílem i získání podkladů pro další práci na stránkách bible21.cz a navázání spolupráce pokračující i mimo rámec této bakalářské práce až do zdárného dokončení celého projektu.

3

1

Kapitola

Vymezení problematiky 2.1

Historie webu

Web projektu Bible21 nesídlil vždy na adrese bible21.cz. Dříve běžel na adrese nbk.cz, protože dříve se tento nový překlad Bible jmenoval Nová Bible králická. Tento web byl kompletně jiná aplikace jak vzhledově, tak i z hlediska systému. Tento web byl údajně napaden hackery a od té doby není funkční. Proto byl vytvořen nový web na adrese bible21.cz, který běží na WordPressu.

2.2

Porovnání a výběr vhodného CMS

Momentálně stránky běží na WordPressu. Na stránkách lze ale najít nežádoucí artefakty očividně vzniklé z nutnosti přizpůsobit se systému. Příkladem takových artefaktů mohou být všudypřítomné iframe. Například online Bible, slovo na den a některé formuláře jsou vložené do stránky pomocí iframe očividně proto, že jsou to samostatné aplikace a autor se chtěl vyhnout nutnosti je integrovat do WordPressu.

Je tedy cílem této práce porovnat WordPress s jinými open source CMS a zvážit převedení stránek do jiného. Převádění stránek do jiného CMS by znamenalo nutnost převedení obsahu a přepsání veřejné části. Pro převedení obsahu lze pro nejpopulárnější CMS najít nástroje, které přenos značně usnadňují. Pro převod do Joomla! existují nástroje WordPress to JoomBlog Converter[15] a CMigrator[11]. Pro Drupal například WordPress Migrate[18]. Přepsání veřejné části se ale nedá udělat jinak než ručně. Každopádně je převod do jiného CMS nezanedbatelná práce navíc, a proto budu upřednostňovat zachování WordPressu, pokud se neprokáže přímo nedostačujícím řešením. 5

2

2. Vymezení problematiky

2.3

Architektura

Mezi nejzřejmější problémy v aktuální architektuře webu popsané v analýze od zadavatele[8] patří: • Na úvodní straně jsou velké bannery, které na první pohled neříkají nic moc o poslání webu. Vypadá to, jakože web prodává iPod. • Na stránkách po celém webu se vyskytují tlačítka a odkazy, které nevedou jasně ke kliknutí. • Na všech podstránkách titulky neobsahují skutečně titulek dané stránky, ale titulek úvodní stránky. • Chybí podpora mobilních zařízení. Je tedy přáním zadavatele, aby byly stránky překódovány do Bootstrapu[16]. • Na různých stránkách jsou části obsahu prezentovány pomocí technologie iframe. To je nežádoucí z hlediska optimalizace pro vyhledávače, protože co je v iframe, není považováno za obsah stránky, která iframe obsahuje, ale za obsah stránky uvnitř iframe. Většina crawlerů obsah iframe neindexuje vůbec [6]. Návrh struktury menu a další navigace bude proveden hlavně na základě analýzy klíčových slov. Také je třeba zohlednit články, které budou importovány ze zálohy nbk.cz. Počet stránek se tímto několikanásobně zvětší.

2.4

Import dat se zálohy

Starý web nbk.cz obsahoval velké množství dat, které nyní současnému webu schází. Je tedy potřeba do nových stránek tento obsah převést. K dispozici jsou zálohy jak databáze, tak i systému souborů. Vzhledem k počtu článku, kterých jsou řádově stovky, bude určitě potřeba pro import vytvořit skript. Na internetu je také hodně zpětných odkazů, které vedou na dnes již nefunkční projekt www.nbk.cz. Protože obsah, na který tyto odkazy mají odkazovat, bude nyní přesunut na bible21.cz je také vhodné přesměrovat odkazy 1:1 na ekvivalentní adresy na www.bible21.cz. [8] V praktické části této práce se ukáže, že importovaná data stanoví drtivou většinu nového obsahu webu. Proto je třeba s tím počítat při návrhu architektury, i při výběru redakčního systému.

6

Kapitola

Porovnání open source CMS 3.1

O open source redakčních systémech

Při vývoji webových stránek je jako u všeho nejpodstatnější rychlost zhotovení webu a minimalizace nákladů. Dosažení těchto cílů je možné několika způsoby, ale pro všechny je klíčové omezení práce, kterou musí vykonávat programátor, a použití existujících řešení. Hlavní strategií jak omezit práci programátora je odsunutí práce na správě stránek na jinou osobu. Proto se pro správu stránek používá Content Management System. CMS poskytuje uživatelsky přívětivé grafické rozhraní pro správce webu, které zvládne používat běžný uživatel. Vytvořit takový systém je ovšem netriviální záležitost. Administrace obsahu stránek pro správce je z pravidla o hodně komplexnější aplikace než veřejná část prezentovaná návštěvníkům. Ve větších firmách spravujících stovky webů je možné používat vlastní CMS, který je malým týmem programátorů vyvíjen pro potřeby celého portfolia webů. Takto se náklady na vývoj rozloží, a navíc má společnost naprostou kontrolu nad svým systémem a může lépe vyhovět specifickým požadavkům svých klientů. Vzhledem k stále se rozšiřujícím možnostem open source řešení se vývoj vlastního CMS oplácí ve stále menším počtu případů. Mezi nejpopulárnější CMS patří momentálně WordPress, Joomla! a Drupal. V této rešerši se tedy budu zabývat touto trojicí. Všechny tyto CMS poskytují po základní instalaci veškerou funkcionalitu potřebnou pro běh běžné webové prezentace. Pro případ specifických nároků na systém je mezi sofistikovanými open source CMS standardem poskytovat API pro vytváření zásuvných modulů. A ne jenom to, ale i nástroje pro správu zásuvných modulů. Díky této vlastnosti CMS může technologií webu neznalý správce dokonce i rozšiřovat funkcionalitu svého portálu stále bez pomoci odborníka. Využití open source CMS tedy omezuje drahé hodiny práce programátora na vytvoření jedinečného vzhledu 7

3

3. Porovnání open source CMS veřejné části a případné vytvoření zásuvného modulu na míru klienta, pokud žádný existující nevyhovuje jeho požadavkům.

3.2

Kritéria hodnocení

3.2.1

Systémové požadavky

Systémové požadavky jsou důležité pro určení, zda konkrétní redakční systém je možné spustit na daném hostingu. Obecně platí, že čím menší požadavky, tím větší výběr hostingů, na kterých se dá CMS provozovat. Všechny tři redakční systémy jsou napsané v jazyce PHP. To je velmi populární volba a její podpora je mezi hostingy nejvíce rozšířená. Rozdíly mohou být v požadované minimální verzi PHP a hlavně v požadavcích na konfiguraci a dostupné knihovny. Druhým nejvýznamnějším systémovým požadavkem je databáze. Pro databáze platí, že čím větší počet databází CMS podporuje, tím širší je sortiment severů, na kterých může běžet.

3.2.2

Instalace, aktualizace a správa rozšíření

Všechny uvedené CMS usilují o to, aby i instalaci mohl provést uživatel. V ideálním případě by tedy nemělo být potřeba upravovat konfigurační PHP soubory. Zásah programátora by měl být nutný pouze v případě vážnějších potíží s kompatibilitou serveru, a na tuto skutečnost by měl průvodce instalací uživatele upozornit. To samé co platí pro instalaci, platí i pro správu rozšíření a aktualizaci celého systému. Hodnocena bude také míra automatizace procesu, přítomnost online katalogu hotových rozšíření a šíře sortimentu dostupných rozšíření.

3.2.3

Šablony

Každý redakční systém obsahuje systém šablon, které určují vzhled veřejné části webu. Tato vlastnost bude hodnocena z hlediska programátora implementujícího šablonu. U šablon není pro nás zajímavý výsledek, ten je totiž vždy stejný. Musí totiž vždy přesně odpovídat zadanému designu. Pokud by toto systém šablon neumožňoval, byl by celý redakční systém nepoužitelný a rozhodně by se ani nestal jedním ze tří nejpoužívanějších. Důležitá je tedy jednoduchost a rychlost práce se šablonou pro programátora neboli flexibilita.

3.2.4

Potřeby bible21.cz

Cílem rešerše je vybrat redakční systém pro web bible21.cz. Aktuální potřeby cílového webu budou mít tedy větší prioritu než výše uvedené obecné vlastnosti, které mají význam spíše pro pohodlnější dlouhodobou správu stránek. Pro bible21.cz je nejdůležitější správce stránek, který si zachová přehlednost 8

3.3. WordPress i při velkém počtu stránek. Dále možnost přiřazení štítků ke článkům a vložení do stránky tag cloudu. Systémové požadavky jsou v tomto případě samozřejmé. Pokud redakční systém nebude schopný běhu na hostingu zadavatele, bude z výběru vyřazen, pokud nebude podle ostatních kritérií tak jednoznačně nejlepší volbou, že bude změna hostingu nutností. Na Joomlu a Drupal bude navíc kladen oproti WordPressu jeden požadavek navíc, a to možnost importu z WordPressu.

3.3

WordPress

WordPress vzniknul v roce 2003 jako nová větev již tehdy nevyvíjeného blogovacího nástroje b2/cafelog. WordPress je tedy svým původem systém pro správu blogu. Od té doby se rozvinul do plnohodnotného CMS, a stal se nejrozšířenějším systémem pro správu stránek. WordPress se chlubí především jednoduchostí a flexibilitou, a nekonečnou rozšiřitelností.

3.3.1

Systémové požadavky

Aktuální verze WordPressu běží na PHP 5.2.4 nebo vyšší a MySQL verze 5.0.15. Mezi ostatními porovnávanými systémy je WordPress takto striktně zaměřen na jednu databázi jako jediný. Ve WordPressu totiž úplně chybí vrstva abstrakce pro databázi. V reakci na požadavky na podporu vzniklo několik portů WordPressu do PostgreSQL, ale tyto porty vyžadují aktualizaci po každém vydání další verze WordPressu, což je práce navíc, a proto se rychle stávají neaktuální. Vývojový tým odmítá zavedení abstrakční vrstvy databáze, kvůli nárusu závislostí a tím i systémových požadavků. To je proti zájmům WordPressu, který klade důraz na jednoduchost. Navíc kvůli historii WordPressu úzce zaměřeného na MySQL by teď zavedení vrstvy abstrakce samo o sobě neřešilo závislost na MySQL všech pluginů do teď vytvořených. Musely by se také předělat. Zatím se tedy podpora více data WordPressu nechystá, a dost možná to tak zůstane na vždy.

3.3.2

Instalace, a správa rozšíření

Instalace WordPressu je velmi jednoduchá. Do uživatelsky přívětivého průvodce instalací je třeba zadat pouze nastavení jako účet a heslo administrátora, a údaje pro přístup k databázi, což je opravdové minimum, viz obrázky č. 3.1 a č. 3.2. Neviděl jsem zde ověření konfigurace serveru. To ale nemusí být nutně špatně. WordPress dbá na minimalizaci závislosti a většina nastavení jako Magic Quotes GPC, které může mít vliv na chování některých funkcí, nebo Register Globals, které může dokonce ohrozit bezpečnost stránek, se dá řešit správným ošetřením v kódu. 9

3. Porovnání open source CMS

Obrázek 3.1: Instalace WordPressu

Vzhledem k popularitě WordPressu není překvapením, že bezkonkurenčně vede v počtu volně dostupných rozšíření. WordPress Plugin Directory momentálně obsahuje 30 452 pluginů. V Plugin Directory lze hledat přímo ze správce rozšíření a k instalaci stačí dva klinutí. WordPress poté automaticky ověřuje u všech nainstalovaných pluginů, jestli pro ně není dostupná aktualizace a pokud se nějaké najdou, zobrazí upozornění v hlavním menu. Ve správě pluginů se pak spustí aktualizace všeho najednou pomocí hromadné akce. Aktualizace na rozšíření WordPressu vychází dost často. Jenom během práce na stránkách Bible21 jsem spouštěl hromadnou aktualizaci po přibližně deseti pluginech dvakrát.

3.3.3

Šablony

WordPress má systém šablon značně odlišný od ostatních CMS, až na dědičnost témat společnou s Drupalem. Ostatní systémy mají jeden soubor pro rozložení stránky, ve kterém se na určité pozice dosazuje HTML kód generovaný jinde. Tím dosahují různého vzhledu stránky pro různé typy obsahu. WordPress má naopak pro každý typ obsahu další soubor se šablonou pro celé rozložení stránky. Společné části těchto šablon se pak řeší přesunutím do samostatných souborů a voláním buďto standartní PHP funkce require, nebo pro běžné 10

3.3. WordPress

Obrázek 3.2: Instalace WordPressu

11

3. Porovnání open source CMS bloky jako záhlaví a zápatí má WordPress funkce get_header a get_footer. Takový systém nechává velkou část logiky skládání stránky v režii programátora tvořícího šablonu. Charakteristickou vlastností šablon WordPressu, kterou v ostatních CMS nenajdeme, je vykreslovací smyčka hlavního obsahu stránky. Ta vypadá například takto:

">

Not Found";

Tato smyčka je zpravidla součástí každé šablony. Smyčka dává tvůrci šablony možnost ovlivnit způsob zobrazení hlavního obsahu stránky přímo v šabloně. Další unikátní funkcí WordPressu je možnost určit specifickou šablonu pro zobrazení konkrétního článku nebo jiného typu obsahu jako kategorie nebo autora. To se dá provést buďto vytvořením šablony nazvané podle daných pravidel (například page-id.php) nebo může uživatel administrace vybrat šablonu v editaci článku. Z šablon ostatních CMS známe mechanizmus dosazování ovládacích prvků dle výběru uživatele do šablonou předdefinovaných míst. Šablony WordPressu mají i funkci tomu odpovídající. Ve WordPressu se těmto regionům říká sidebar podle jejich obvyklého způsobu využití a objektům, které se do nich dosazují, se ve WordPressu říká widgety.

3.3.4

Potřeby bible21.cz

Stránky bible21.cz před zahájením prací běžely na WordPressu. Podívejme se tedy, jak dobře jsou potřebné změny proveditelné ve WordPressu. Všechny 12

3.4. Joomla

Obrázek 3.3: Page Tree plugin

běžné funkce pro obsluhu článků jako kategorie, štítky nebo obecně taxonomie WordPress v základní instalaci má, stejně jako ostatní CMS. Těmto věcem tedy nebudu dále věnovat pozornost. Významnější odlišností WordPressu je možnost hierarchické struktury stránek. Page Tree plugin navíc přidává do administrace nejvíc užitečný ovládací prvek pro práci s hromadou importovaných dat, s jakým jsem se během práce setkal, viz obrázek č. 3.3 . Provedení importu napřed do WordPressu se tedy ukázalo jako šťastná volba. Velmi užitečná se ukázala možnost nastavení stránce konkrétní šablonu. Toho se dá využít k vytvoření speciální šablony stránky s vlastní aplikací online bible, která se připojí k vybrané stránce místo iframe. Takto lze docílit integrace online Bible pouhým voláním funkce require z šablony, bez nutnosti předělávat tuto cizí aplikaci.

3.4

Joomla

Joomla vznikla v roce 2005 jako větev CMS Mambo. Pro Joomlu je charakteristická silně objektová orientace. Při prohlížení kódu modulů, komponent, 13

3. Porovnání open source CMS i šablon člověk nenarazí na globální funkci kromě těch v PHP nativních. Mezi třemi porovnávanými CMS je Joomla tímto naprosto výjimečná. Pro mě, jakožto člověka, který se setkává s Joomlou v roli programátora, tato vlastnost dělá Joomlu lákavou. Pro účel této práce jsem nainstaloval Joomlu 3.2.

3.4.1

Systémové požadavky

Joomla vyžaduje PHP verze 5.3.1 a vyšší. Joomla nabízí nejširší podporu databází z porovnávaných CMS. Základní instalace umí pracovat s databázemi MySQL, MSSQL, Oracle, SQL Lite, PostgreSQL a PDO.

3.4.2

Instalace a správa rozšíření

Instalace Joomly kromě nastavení administrátorského účtu a databáze, nabízí oproti WordPressu i možnost při instalaci naplnit databázi vzorovými nebo testovacími daty. Na konci průvodce instalací je stručný přehled požadavků na nastavení PHP. Cokoliv, co by mohlo způsobovat potíže je zde zřetelně označeno. Správce rozšíření v Joomle poskytuje možnost instalace z archivu, ze složky nebo z URL. To jsou všechno varianty stejného scénáře. Vyhledám rozšíření, získám přístup k instalačním souborům a podle formy, v jaké jsem je získal, použiju k instalaci jednu ze tří funkcí. To, co přineslo zásadní urychlení, byla aktivace čtvrté záložky "Install from Web". Pod ní se skrývá katalog rozšíření tak, jak ho znám z WordPressu, dokonce s hezčí grafickou úpravou. Když chci nainstalovat rozšíření, které je zdarma, stačí k instalaci pouze zmáčknutí tlačítka. V případě placeného rozšíření je uživatel odkázán na Joomla! Extension Directory. V Joomla! Extension Directory se momentálně nachází 7881 rozšíření. Z toho je ale něco málo přes polovinu zpoplatněna.

3.4.3

Šablony

V šablonách Joomly se používá pro generování HTML kódu stránky kromě klasických PHP bloků i vlastní nestandartní HTML značka jdoc:include. Její použití vypadá například takto: <jdoc:include type="modules" name="main-menu" /> nebo takto: <jdoc:include type="component" /> Takto se označují pozice pro dosazení do šablony prvků, které se generují na základě dat spravovaných v administraci. Typickými příklady je pozice pro zobrazení menu nebo těla článku. 14

3.4. Joomla

Obrázek 3.4: Označení pozic modulů

Na první pohled to vypadá, jakoby Joomla pro vyhledání a nahrazení pozic modulů v šabloně parsovala šablonu jako HTML, což by bylo zbytečně výpočetně náročné. Při prohledání jádra jsem zjistil, že tyto značky se hledají regulárním výrazem. Konkrétně v souboru libraries/joomla/document/html/html.php takto: if (preg_match_all(’#<jdoc:include\ type="([^"]+)"(.*)\/>#iU’, $this->_template, $matches)) Tato metoda je rychlejší a hlavně nezávislá na HTML validitě šablony, což je pro vývoj šablony praktické.

Tímto způsobem je vytvoření základní šablony určující rozložení stránky jednoduché a rychlé, a dále nás zajímá možnost úpravy vzhledu jednotlivých modulů dosazovaných do předdefinovaných pozic v hlavní šabloně. Toto se v Joomle dá realizovat zkopírováním výchozích šablonových souborů modulu do složky témata. Upravené soubory témata se pak použijí místo výchozích. Tento systém díky své jednoduchosti funguje vždy spolehlivě a vždy dle očekávání, a dobře komentované výchozí šablony jsou návodem a dokumentací pro provedení potřebných úprav samy o sobě. Nicméně dědičnost šablon taková, jakou poskytuje WordPress a Drupal, je přece jenom sofistikovanější systém s většími možnostmi.

Správce stránek, když chce zavést novou šablonu, musí dosadit do šablony moduly na šablonou předdefinované pozice. K tomu potřebuje mít vizuální představu o rozložení pozic modulů v šabloně. To samé potřebuje programátor, který pracuje na rozšíření existující šablony. K tomuto účelu má Joomla v základní instalaci zahrnutou funkci označení pozic definovaných šablonou. Po povolení Global Configuration > Template Manager > Preview Module Positions se při stáhnutí stránky s query string parametrem tp=1 zobrazí orámování všech nastavitelných oblastí jako na obrázku č. 3.4 15

3. Porovnání open source CMS

3.4.4

Potřeby bible21.cz

Joomla nepodporuje hierarchické členění článků tak jako WordPress. Správný způsob třídění článků by bylo využití kategorií, což je ale pro práci s množstvím importovaných článků stále nedostačující, protože chybí jednotné zobrazení kompletního stromu kategorií i s články. Po dokončení aktuálních prací na stránkách ovšem tento požadavek přestane hrát roli, a pro občasné přidávání nových článků je Joomla dostačující.

Na rozdíl od ostatních CMS je tvorba menu v Joomle velice frustrující činnost. Joomla poskytuje obrovské množství typů položek, které lze do menu umístit, a rozhraní pro správu menu se tímto stalo velmi komplexní. Výsledkem je to, že přidání článku do menu je scénář skládající se ze sedmi kroků, které se opakují pro každou další položku menu. Navíc nepředvyplnění názvu položky menu podle názvu zvoleného článku je úplně zbytečná chyba.

V Joomle není možnost nastavit šablonu konkrétnímu článku. Integrace vlastních aplikací, jako je Bible21 online, tak jednoduchým způsobem jako ve WordPressu tedy není v Joomle možná. Možnosti jsou tedy následující: • Integrace do šablony se zobrazením k článku určeném URL, nebo id na pevno zapsané v šabloně. Toto řešení je rychlé a jednoduché, ale nedává správci žádnou kontrolu nad umístěním aplikace. • Vytvoření rozšíření Joomly. Podle terminologie Joomly by se jednalo o komponentu. Toto řešení je korektní, ale pracnější.

3.4.5

Migrace z WordPressu

Pro migraci z WordPressu existují v Joomla! Extensions Directory tři rozšíření JConverter[20], CMigrator[11] a WordPress to JoomBlog Converter[15]. Z toho první dva nejsou zdarma, toto tedy nejsou open source řešení a nebudu se jimi tedy v této práci zabývat. Třetí možnost je zdarma a její instalace není možná přímo ze správce rozšíření. Dá se stáhnout jako zip archiv po přihlášení Facebookem. V menu Components pak přibyla položka WP To JoomBlog, ale po kliknutí na ní hlásí Joomla "404 Component not found". Převod z WordPressu do Joomly tedy nekomerčními prostředky pro běžného uživatele možný není. V případě potřeby bych nainstaloval libovolný modul pro import nejlépe XML, například J2XML a sepsal bych skript pro export z WordPressu do souboru požadovaného formátu nebo XSL transformaci z WXR. Taková metoda je už časovou náročností neporovnatelná s případem, kdy by existující a funkční open source řešení převodu existovalo. 16

3.5. Drupal

3.5

Drupal

Vývoj Drupalu začal už v roce 1999. Tvůrcem Drupalu je Dries Buytaert a po roce kvůli rostoucímu zájmu dalších vývojářů se Drupal stal open source projektem. Drupal byl od počátku vyvíjen jako platforma pro vývoj webových aplikací. Drupal se tedy doporučuje používat pro větší projekty se spoustou typů obsahu. Hodí se tedy více do komerčního prostředí, kde se vyvíjí webové aplikace na míru. Aktuální verze Drupalu je 7.26. Všechny zkušenosti s Drupalem popsané v této kapitole se vztahují k této verzi.

3.5.1

Systémové požadavky

Minimální verze PHP pro Drupal 7 je 5.2.5. Drupal používá vlastní vrstvu abstrakce databáze postavenou na PDO. Umí pracovat s MySQL verze 5.0.15 a výše, PostgreSQL verze 8.3 a výše, a SQLite verze 3.3.7 a výše, a instalací rozšíření lze zajistit i podporu MSSQL a Oracle[2]. S rozšířeními se tedy Drupal podporou databází vyrovná Joomle.

3.5.2

Instalace a správa rozšíření

Průvodce instalací má Drupal porovnatelný s WordPressem, taky obsahuje pouze minimální potřebná nastavení. Možnost naplnění databáze vzorovými daty a přehled kompatibility konfigurace jako byla v Joomle zde taky chybí. V instalaci rozšíření Drupal zaostává za zbylými CMS. Katalog rozšíření v něm úplně chybí a uživatel je odkázán na stránky drupal.org, kde si má modul a jeho instalační soubor najít a pak nainstalovat uploadem archivu nebo z URL. Navíc instalovaný modul moůže být závislý na jiných modulech, ale při absenci jakékoliv integrace katalogu rozšíření nelze očekávat, že by systém doinstaloval závislosti automaticky tak, jak jsme na to zvyklí třeba z instalace balíčků na známých linuxových distribucích. Bez automatického doplnění závislostí by mělo alespoň hlášení o úspěšné instalaci obsahovat pokyny k instalaci chybějících modulů. Nic takového se ale uživatel nedozví, dokud nejde hledat příčinu nefunkčnosti do přehledu nainstalovaných modulů. Po instalaci všech potřebných modulů se musí modul ještě aktivovat ve správci modulů. Tady už funguje automatická aktivace modulů, na kterých je aktivovaný modul závislý, tak, jak se očekává. Tedy s dotazem na potvrzení aktivace závislostí. Na to, že je Drupal v počtu stránek, které jsou na něm postavené, mezi porovnávanými CMS na posledním místě, má překvapivě bohatý výběr rozšíření. Na oficiálních stránkách je jich momentálně 14 927. Z toho zdarma jsou úplně všechny. 17

3. Porovnání open source CMS

Obrázek 3.5: Theme developer

3.5.3

Šablony

Drupal využívá při syntaxi HTML kódu stránky takzvané Render Arrays. Jsou to struktury popisující všechny prvky stránky, jejich hierarchii a všechny atributy těchto prvků. Toto pole se následně prochází a pro každý prvek se hledá šablona v aktuálním motivu, případně v rodičovském motivu rekurzivně až k systémově výchozí šabloně, pokud se dříve nenašla. Šablona ve svém těle volá funkci render na komponenty, ze kterých se skládá, a které jsou popsané vnořenými Render Arrays. Pro ně se hledání šablony opakuje. Takto je Render Array transformována šablonami na výsledné HTML stránky.

Tento princip je dobře srozumitelný a na první pohled jednoduchý. Práce s ním už ale tak jednoduchá není. Základní úpravy, jako je rozložení stránky, se dají realizovat docela snadno a rychle. Jméno šablony, kterou je potřeba vytvořit, lze najít prohledáváním Render Array. Existuje ale i lepší způsob. Nainstalování modulu Theme developer přidá do stránky okno s informací o volané šabloně označeného prvku, viz obrázek č. 3.5 . S modulem Theme developer by už bylo vytváření šablon téměř jednoduché, kdyby se výběr použité šablony nechoval často nepředvídatelně.

Na rozdíl od změn rozložení stránky, větší přizpůsobení vzhledu konkrétních prvků, jako například menu, je velmi obtížné. Provedení změn ve struktuře menu na základě vyhodnocení vlastní aplikační logiky i po studování jádra se ukázalo nemožné, nebo je pro takovou úpravu nutné o hodně hlubší porozumění systému. 18

3.6. Vyhodnocení

3.5.4

Potřeby bible21.cz

Správce stránek a článků ve své základní podobě je taky stránkován po desítkách položek jako ve WordPressu. Zde ale není možné očekávat přehledné stromové zobrazení. Drupal totiž stromovou strukturu stránek vůbec nepodporuje. Tím pádem se Drupal nehodí pro zpracování importu z nbk.cz. Navíc v lineárním seznamu stránkovaném po několika desítkách položek je těžké nalézt konkrétní články, dokud se nenainstaluje modul Find Content, který přidává do správce článků full textové vyhledávání. Drupal má implementované taxonomie a tím pádem finální štítkování a třídění článků do kategorii by bylo dostatečné pro potřeby bible21.cz. V nastavení článků zde ovšem taky chybí možnost přiřadit článku konkrétní šablonu. Integrace samostatných skriptů, které byly původně vložené do stránek přes iframe by bylo třeba řešit v Drupalu stejně jako v Joomle. Slovo na den je možné zavést přímo do šablony, ale korektní řešení pro Bibli21 online by bylo předělat ji na řádný modul pro Drupal.

3.5.5

Migrace z WordPressu

Pro převod dat z WordPressu do Drupalu existuje několik modulů. Při rychlém hledání jsem našel moduly WordPress Import a WordPress Migrate. Vyzkoušel jsem WordPress Migrate pro import z WXR exportu a import proběhl správně, včetně autorů i obrázků. Menu převedená nebyla. To ale ani touto metodou není možné, protože WordPress menu do WXR souboru neexportuje.

3.6

Vyhodnocení

Systémové požadavky Na hostingu zadavatele je PHP verze 5.3.28 a MySQL 5.1.66. Všechny tři CMS tedy na něj lze nainstalovat. Podpora velkého počtu databází u Drupalu a Joomly tedy pro nás nehraje roli.

Instalace a správa rozšíření V této disciplíně rozhodně vede WordPress. Má bezkonkurenčně největší výběr pluginů a nejvíce uživatelsky přívětivé rozhraní.

Šablony Jak ve WordPressu tak i v Joomle jsem neměl problém prostředky každého z těchto systémů dosáhnout žádaných výsledků. WordPress možná nabízí o něco větší flexibilitu šablon než Joomla, což se pro stránky menších rozměrů 19

3. Porovnání open source CMS hodí. V Drupalu ale šablony nejsou tak silným nástrojem a převodu bible21.cz do Drupalu bych se tedy chtěl vyhnout.

Potřeby bible21.cz Bible21.cz není tak velký projekt a je schopný běhu na každém z tří porovnávaných CMS. Doporučuji tedy prozatím nechat stránky na WordPressu. WordPress má nejvíce možností jak snáze implementovat dohodnuté úpravy stránek, což je momentálně největší priorita. Dokud se tedy neobjeví nové požadavky na CMS, na které WordPress nebude stačit, není důvod investovat čas do migrace. Navíc, ponecháním WordPressu odpadá nutnost zaučovat klienta v obsluze nového CMS.

20

Kapitola

Analýza a návrh architektury Žádný projekt se v dnešní době neobejde bez své prezentace na webu. A to platí i pro projekt Bible21. Bible21 přináší nadčasové poselství Bible v současné, čtivé češtině. Usiluje o maximální věrnost původním hebrejským, aramejským a řeckým textům, zároveň však chce oslovit dnešní čtenáře, ať už jsou zvyklí čerpat z této knihy inspiraci pro každý den, anebo ji otevírají poprvé [1]. Web bible21.cz je oficiální webovou prezentací tohoto projektu, ale podle analýzy provedené společností Optimal Marketing s. r. o. neplní svou funkci správně. Proto bude pro Bibli21 navržena nová architektura webu, která bude přizpůsobena potřebám cílových skupin uživatelů. Většina úprav navržených v této kapitole byla implementována jako šablona ve WordPressu. Všechny ilustrace nového vzhledu v sekci 4.3.3 návrhy stránek jsou snímky okna prohlížeče s implementovanými stránkami. Z úprav, které nejsou vidět na obrázcích, bylo implementováno zavedení Bootstrapu a oprava titulků. Kódování šablony je rutinní činnost a nebudu se tím dále zabývat. Implementovanou šablonu naleznete na přiloženém CD.

4.1

Analýza klíčových slov

Nástroje jako jsou Sklik[19] a Google AdWords[13] nám dávají přístup k informacím o tom, jaké dotazy uživatelé hledají. Účelem analýzy klíčových slov je nalezení dotazů, na které náš web odpovídá a přizpůsobit tomu jeho strukturu. Výsledkem analýzy bude seznam vstupních stránek. Z aplikace Collabim[14], do které jsem dostal přístup od společnosti Optimal Marketing s.r.o., si mohu vyexportovat klíčová slova do Excelu[17]. Porovnal jsem klíčová slova z Collabimu s tím co nabízí Sklik a AdWords, a ukázalo se, že Collabim poskytuje o něco více záznamů než oba zbylé nástroje. Pravdě21

4

4. Analýza a návrh architektury podobně klíčová slova z Skliku a AdWords, a možná i dalšich zdrojů agreguje, a to nám velmi urychluje práci taky díky snadnému exportu do Excelu. K takto získaným klíčovým slovům jsem pak v Excelu přidal sloupec pro přiřazení kategorií podobným klíčovým slovům. Nyní tabulka vypadá jako na obrázku č. 4.1 V tomto kroku jsem taky vyhodil dotazy jako "bible a my", nebo "ilustrovaná encyklopedie bible", na které odpovídat nechceme, protože například Bible a my je soutěž pro základní a střední školy, která nemá s Bibli21 nic společného. Poslední krok je vytvoření kontingenční tabulky, která nám ukáže vstupní stránky [7], viz obrázek č. 4.2

4.2

Doporučení vyplývající z analýzy klíčových slov

V tabulce je vidět, že lidé hledají spoustu frází, které by je měly přivést na domovskou stránku Bible21. Nicméně momentálně domovská stránka neobsahuje žádný text, který by na tyto dotazy reagoval. Proto doporučuji na domovské stránce uvést krátký text, který uživateli představí projekt Bible21.

4.2.1

Stránka bible21.cz/online

Druhou nejčastěji dotazovanou kategorií jsou dotazy na Bibli online. Tato stránka je dokonalým příkladem špatného použití iframe. Celý obsah stránky je totiž zobrazen touto metodou. Důsledek je jasně vidět na obrázku č. 4.3, který zobrazuje výsledek hledání fráze "online bible" na googlu. Na třetí pozici je naše stránka bible21.cz/online a na druhé pozici je odkaz na samostatnou aplikaci, která je obsahem výše zmiňovaného iframe. To je velmi špatně ze dvou důvodů. Za prvé, uživatele se přes druhý odkaz dostávají do holé aplikace online Bible, což určitě nebylo záměrem autora. V holé aplikaci chybí navigace do zbytku webu. Uživatel neví, kam se dostal, nezná kontext, neví, že čte novodobý překlad Bible. A za druhé z hlediska SEO je naprosto špatně to, že stránka vlastně sama proti sobě bojuje o pozici ve vyhledávači. Aplikaci onlineb21.bible21.cz ale není nutné zcela zrušit. Místo toho do ní zavedu přesměrování na odpovídající stránky na adrese bible21.cz/online, aby se případné odkazy na ní nestaly mrtvými, ale dovedly uživatele na to správné místo k obsahu, který očekává. Podle heuristického vyhodnocení[5] i samotná aplikace onlineb21.bible21.cz obsahuje výrazné nedostatky. Aplikace obsahuje velmi dlouhé texty celých knih na jedné stránce, přičemž navigace je pouze na hoře a dole. Pokud se tedy 22

4.2. Doporučení vyplývající z analýzy klíčových slov

Obrázek 4.1: Klasifikace klíčových slov

23

4. Analýza a návrh architektury

Obrázek 4.2: Výsledek klasifikace klíčových slov

24

4.2. Doporučení vyplývající z analýzy klíčových slov

Obrázek 4.3: Výsledek hledání online Bible

uživatel nachází někde uprostřed stránky, nevidí navigační prvky a musí je hledat, nebo si pamatovat, kde jsou[5]. Navíc může i lehce ztratit přehled o tom, kde se nachází. Řešením může být rozbalovací strom s kompletní strukturou Bible (podobný jako je seznam kapitol PDF souboru v Adobe Readeru) v levém sloupci připnutý k obrazovce, bez ohledu na scrollování po stránce. Aktuální tlačítka s navigací se stanou tímto zbytečná a budou odstraněna. Dalším kamenem úrazu je vyhledávání. Za prvé, zadavatel si nepřeje, aby bylo řešeno odkazem na hledání v googlu. A za druhé vyhledávání neplní svůj účel do konce. Vyhledávání dovede uživatele ke stránce s celou knihou Bible, která někde uvnitř obsahuje hledanou frázi, ale uživatel neví, kde v té hromadě textu se jeho výsledek nachází. Částečným řešením by bylo získání hledaných klíčových slov na straně serveru z PHP globální proměnné $_SERVER[’HTTP_REFERER’] a pak na straně klienta přesunout stránku ke kotvě verše obsahujícího výsledek hledání. Případně i zvýraznění hledaných slov by bylo na místě. Verše momentálně kotvy neobsahují, jsou ale označeny značkou <sup>.Nebude tedy problém sepsat skript, který do všech knih 25

4. Analýza a návrh architektury

Obrázek 4.4: Výsledek hledání v bible.kazani.cz

značky přidá.

Tento způsob může fungovat dobře, pouze dokud neobsahují hledaná klíčová slova dva, nebo více veršů z jedné knihy. Pak nevíme, na který z nich uživatele odkázat. Řešení, které nakonec doporučuji, se našlo náhodou samo prostřednictvím Google Analytics. Tam je vidět, že pátým největším zdrojem návštěvnosti celého webu je stránka bible.kazani.cz, která má implementováno vlastní vyhledávání v online Bibli21 s zobrazením výsledků až po jednotlivé verše, viz obrázek č. 4.4. Tato funkce by tedy měla být implementována přímo do bible21.cz/online. Od klienta jsme tedy získali kontakt na majitele aplikace, který s fondem spolupracoval a v ideálním případě se povede získat přístup ke zdrojovým souborům této aplikace.

Vyhledávání také vede uživatele do holé aplikace onlineb21.bible21.cz místo na www.bible21.cz/online, čímž zase uživatel ztrácí navigaci do zbytku stránek, jak již bylo probráno výše.

4.2.2

Ostatní doporučení

Třetí nejčastěji dotazovanou skupinou klíčových slov je Bible králická. S ohledem na dřívější název projektu "Nová Bible králická" nelze spojitost s bibli králickou ignorovat. Bible21.cz se ocitá v googlu při dotazu na "bible kralicka" na první stránce a v Seznamu na druhé. Web by tedy měl obsahovat vstupní stránku pro tyto dotazy s článkem, který informuje uživatele o této souvislosti Bible21 s Bibli králickou a o změně názvu. Dobrým výchozím bodem pro tento úkol může být článek "Nový název: Bible, překlad 21. století", který jsem našel v záloze starého webu. Vzhledem k faktu, že klíčové slovo "bible králická" je podle Google Analytics[12] zdrojem pouze 0.6% návštěv, nemají tyto úpravy velkou prioritu. 26

4.3. Architektura Poslední z významnějších změn, které vyplývají z analýzy klíčových slov je vytvoření samostatné stránky pro Bibli21 ke stažení do mobilu. Necelá čtvrtina dotazů na stažení Bible se týká právě Bible do mobilních zařízení. Web by tedy měl obsahovat vstupní stránku pro tyto dotazy s aktualizovaným obsahem. Obsah stránky je blíže popsán v sekci 4.3.1 návrhy stránek.

4.3 4.3.1

Architektura Navigace

Po importu zálohy nbk.cz se zvýšil počet stránek z původních třinácti na několik stovek. S takovým počtem stránek architektura bible21.cz nepočítala. Navigační prvky vůbec neumožňují přístup k stránkám hlouběji než na první úrovni v hierarchii stránek. Ani základní přehled stránek v administraci WordPressu s takovým počtem stránek nepočítá. Při stránkování po dvaceti položkách se hierarchické uspořádání stránek naprosto ztrácí. Nainstaloval jsem tedy plugin CMS Tree Page View, přidává do správy stránek rozbalovací strom, což je jediný způsob jak stránky v takovém počtu spravovat. Dále jsem nainstaloval plugin Nice Navigation, který toto stromové zobrazení přidává jako widget pro sidebar na veřejné části stránek.

Toto řešení navigace je ovšem jenom provizorní. Uspořádání stránek je totiž chaotické a obsahuje příliš mnoho položek na stejné úrovni, viz obrázek č. 4.5 Navíc v tomto systému článků se vyskytují stejné informace duplikované na různých místech. Některé informace, jako třeba bulletiny, jsou rozházené po více stránkách a některé jsou duplikací aktuálnějších stránek z nového webu.

V první řadě je tedy potřeba prohledat importované stránky a vybrat z nich ty, které obsahují informace nejdůležitější pro prezentaci projektu. Ty budou dosažitelné přímo z domovské stránky, z horního menu, případně ze stručného vertikálního menu společného pro tyto vybrané stránky. Zbytek článků se většinou se týká různých události kolem překladu a je těžko tříditelný do přehledné stromové struktury. Navrhuji tedy pro navigaci po zbytku článků použít štítky. Vznikne tedy stránka se seznamem všech štítků a jimi označených stránek, a v sidebaru každého článku bude zobrazován takzvaný tag cloud. Váhu štítků bude určovat počet stránek, které jsou nim označeny. V sidebaru článku bude taky seznam příbuzných článků, neboli seznam článků seřazen podle počtu společných štítků s aktuálně zobrazovaným článkem. Je tedy dohodnuto s klientem, že při revizi importovaných stránek, kvůli kontrole a případné aktualizaci obsahu také doplní stránkám štítky dle vlastního uvážení. 27

4. Analýza a návrh architektury

Obrázek 4.5: Stromový seznam článků

28

4.3. Architektura Z hlediska architektury webu je důležitou oblastí zápatí stránky. Do zápatí totiž kromě kontaktních informací patří i prostor pro další navigaci[3], která bude vždy stejně dostupná bez ohledu na to, kde se právě uživatel nachází. Je to tedy prostor pro uvedení odkazů na ty nejdůležitější stránky, podobně jako hlavní menu v záhlaví, ale je zde možno jich uvést více. Na méně komplexních portálech může obsahovat i kompletní mapu stránek. V případě bible21.cz to ale není možné. Zápatí tedy bude zrcadlit strukturu stránek menu záhlaví, ovšem do celé hloubky, odkaz na seznam štítků a tag cloud.

4.3.2

Globální záležitosti

V rámci bakalářské práce se zabývám obsahem těch nejpodstatnějších stránek webu a řešením globálních záležitostí. Prvním globálním problémem webu jsou titulky podstránek. Pro titulky podstránek bude zaveden nový formát určen jako: název podstránky - název webu. Titulek se zobrazuje například v seznamu záložek[10] v prohlížeči. Proto by měl vždy obsahovat téma konkrétní stránky, což má zajistit unikátnost. Uživatel takto může vidět zřetelně, co se pod záložkou skrývá a nemusí je všechny proklikávat, pokud má otevřených více podstránek otevřených najednou. Titulek je také obvykle uveden na prvním řádku výsledku[4] v internetových vyhledávačích. Proto by měl také obsahovat název webového sídla, aby uživatel okamžitě rozpoznal, které výsledky vedou k nám. Další dva globální řešené problémy jsou nejednotná tlačítka a odkazy s nejasnou grafickou výzvou k akci a chybějící podpora mobilních zařízení. Responzivitu stránky si přeje zadavatel řešit zavedením Bootstrapu. To je naprosto dostačující řešení, a proto není důvod tomuto přání nevyhovět. Pro snadnou údržbu stránek v budoucnu je vhodné použít front-end framework, se kterým má firma, která bude stránky spravovat, nejvíce zkušeností. Bootstrap navíc poskytuje kompletní sadu jednotně nastylovaných běžných ovládacích prvků uživatelského rozhraní. Všechny grafické potíže s tlačítky a odkazy lze tedy řešit nahrazením ovládacími prvky ze sady Bootstrapu. Odladit pak jejich vzhled podle tematických barev webu Bible21 je už triviální záležitost.

4.3.3

Návrhy stránek

Původní vzhled úvodní strany představuje obrázek č. 4.6. V analýze webu od zadavatele[8], byly původní domovské stránce vytknuty tyto nedostatky: 1. Na úvodní straně jsou velké bannery, které na první pohled neříkají ni noc o poslání webu. Vypadá to, jakože web prodává iPod. 2. Chybí informace, kam jsem se vlastně dostal a co zde mám dělat 3. Bannery jasně nevedou ke kliknutí, chybí v nich tlačítka s výzvou k akci 29

4. Analýza a návrh architektury

Obrázek 4.6: Původní domovská stránka

4. Kromě části Slovo na den chybí na stránce život. Není vidět, že web dýchá. Rozhodl jsem se tedy na hlavní stranu umístit obsah stránky www.bible21.cz/bible21, což je krátký text o tom, co to je Bible21 a video o ní. Tímto na úvodní straně přibude informace o tom, kam se uživatel dostal, a o poslání webu. Dále v sekci aktuálně se zobrazují tři nejnovější příspěvky, díky tomu se budou texty na úvodní stránce pravidelně měnit, což je řešením bodu č. 4. Následuje plugin pro zobrazení komunity na Facebooku. Zde si povšimněme využití iframe, které je tentokrát správné, na rozdíl od předešlého použití v různých částech webu. Následuje jedna náhodná recenze z nově importovaných ze zálohy. To taky přináší automatickou obměnu obsahu a navíc je to reference, a to je dobrý způsob prezentace projektu. Návrh vzhledu hlavní stránky tedy představuje obrázek č. 4.7 Původní stránka o nadačním fondu (obrázek č. 4.8) vypadá naprosto nepřehledně, protože je plná textu bez nadpisů druhé úrovně. To způsobuje, že při prvním pohledu na stránku nic nesignalizuje, jaké informace v ní jsou a jediný způsob jak se to dozvědět je mechanicky číst celou stránku, což působí odpudivě. Seskupil jsem tedy odstavce do logických sekcí s výstižnými nadpisy. Nekompletní seznam bulletinů jsem doplnil o bulletiny z importu a udělal 30

4.3. Architektura

Obrázek 4.7: Návrh domovské stránky

31

4. Analýza a návrh architektury

Obrázek 4.8: Původní stránka nadační fond

32

4.3. Architektura pro ně samostatnou stránku. Výsledek úpravy stránky nadačního fondu je na obrázku č. 4.9. Hlavním účelem stránky texty je poskytnutí souborů ke stažení. V původní stránce se tyto relevantní odkazy ztrácejí v hromadě textu. Všechny dostupné soubory jsem tedy vložil do tabulky jednotného formátu pro lepší čitelnost. Využití standartních stylů Bootstrapu pro tabulku a tlačítka zajišťuje přehlednost a srozumitelnost rozhraní. Ostatní méně podstatné informace jako podmínky užití díla byly přesunuty na konec stránky, nebo odsunuty na jinou stránku, aby nerušily hlavní sdělení. Provedené změny ukazují obrázek č. 4.10 a obrázek č. 4.11. Stránku audio jsem předělal analogicky k stránce texty. Zde již byl seznam souborů představen pomocí přehledné tabulky. Nicméně podivné šipky jako odkaz na stažení souboru nejsou na první pohled srozumitelnou výzvou k akci. Předělal jsem tabulku do podoby konformní s tabulkou na stránce texty, viz obrázky č. 4.12 a č. 4.13. Původně byla pro mobilní zařízení pouze vyhrazena sekce ve stránce texty a nejvíce zřetelně vidět v ní byl odkaz na stažení Java aplikace, jak je známe z dob před chytrými mobily. Protože podle statistiky aktuálně 36.6% mobilů běží na Androidu a 34.8% na iOS, měla by stránka odkazy na aplikaci pro tyto platformy udělat více viditelné, ideálně by měly odkazovat přímo na Google Play a AppStore. Další odkazy mohou být na Windows Phone a Symbian, pak odkaz na kompletní seznam platforem kde je aplikace Bible od youversion.com dostupná, případně i na onu Java aplikaci. Výsledná stránka je představená na obrázku č. 4.14.

33

4. Analýza a návrh architektury

Obrázek 4.9: Stránka nadační fond

34

4.3. Architektura

Obrázek 4.10: Původní stránka texty

35

4. Analýza a návrh architektury

Obrázek 4.11: Stránka texty

36

4.3. Architektura

Obrázek 4.12: Původní stránka audio

Obrázek 4.13: Stránka audio 37

4. Analýza a návrh architektury

Obrázek 4.14: Stránka Bible21 do mobilu

38

Kapitola

Realizace 5.1

Import zálohy nbk.cz

Zvažoval jsem dvě možnosti uspořádání práce. První možnost je udělat import až na konec, po provedení rešerše redakčních systémů. Druhá možnost je provést jej hned na začátku. Výhodou provedení importu na konec je, že pokud se rozhodnu redakční systém změnit, budu provádět import do správného redakčního systému. Na druhou stranu výhodou provedení importu hned na začátku do aktuálního redakčního systému, je to, že budu mít od začátku přístupný všechen obsah, pro který se navrhuje architektura webu, a který bude redakční systém podporovat. Provádění importu až na konec může znamenat předělávání dříve hotových věcí. Rozhodl jsem se tedy pro import jako první činnost jednak pro získání kompletní znalosti obsahu webu, a taky proto že v případě pozdější změny redakčního systémů se musí převádět obsah z WordPressu každopádně, bez ohledu na to, jestli do něj byl proveden import z nbk.cz, nebo ne.

5.1.1

Oživení stránek ze zálohy

Záloha webu nbk.cz, která se dochovala, obsahuje jak databázi, tak i systém souborů. Mít k dispozici celý systém souborů se zdrojovými soubory celých stránek i s administrací je užitečné proto, že si takto mohu na localhostu celý zálohovaný web rozběhnout. To mi umožní prohlédnout si obsah, který mám importovat, tak jak má vypadat. Díky tomu vím jak má výsledek importu vypadat, a mohu správnost importu porovnávat s originálním webem. Vytvořil jsem tedy v konfiguraci Apache 2.2[21] virtual host na adrese nbk.localhost a provedl import databáze přes PhpMyAdmin[23] do lokální MySQL 5.6[22] databáze. Při prvním pokusu o otevření stránky je vidět, proč byl web odstaven a nahrazen jiným. Stránka se totiž načítá zhruba 10 vteřin 39

5

5. Realizace a poté se přeruší spojení. Když stránka nehlásí žádnou chybu, jenom hned takto padá, nezbývá nic jiného než začít vkládat řádek echo "script still alive!"; exit; nejdříve doprostřed index.php a pak podle očekávaného výstupu, nebo pádu do čtvrtiny, nebo tří čtvrtiny stejného souboru a takto pokračovat binárním půlením až k nalezení řádku, na kterém PHP modul padá pravděpodobně na porušení ochrany paměti. Pokud nalezený řádek je voláním jiného PHP souboru, nebo voláním funkce či metody, opakuje se půlení v dalším souboru až k nalezení konečného místa, kde vzniká chyba. Použití této metody mně dovedlo k tomuto řádku: preg_match_all|(’|()|s’, $this->templateContent, $matches) Tento regulární výraz má očividně hledat všechny výskyty značky