Inovace interního informačního systému Audiovizuálního centra

Mendelova univerzita v Brně Provozně ekonomická fakulta

Inovace interního informačního systému Audiovizuálního centra Mendelovy univerzity v Brně Diplomová práce

Vedoucí práce: Ing. Oldřich Trenz, Ph.D.

Bc. David Schubert

Brno 2011

Na tomto místě bych rád poděkoval vedoucímu své diplomové práce Ing. Oldřichu Trenzovi, Ph.D. za vedení, podporu a cenné připomínky při tvorbě této práce.

Prohlašuji, že jsem tuto práci vyřešil samostatně s použitím literatury, kterou uvádím v seznamu.

V Brně dne 20. května 2011

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

4

Abstract Schubert, D. Innovation of the internal information system of the Audiovisual center at Mendel University in Brno. Diploma thesis. Brno, 2011. This diploma thesis deals with the innovation of the internal information system of the Audiovisual Center at Mendel University in Brno. The theoretical part discusses the role of web design in communication between the web presentation and end user, then the general rules for creation of web applications and their optimization for performance. The practical part focuses on a specific innovation system. There is an analysis of current system status, and designed changes according to specifications put on a system, their models and their subsequent implementation using available web technologies. Keywords: Innovation of information system, web application, webdesign, system optimization

Abstrakt Schubert, D. Inovace interního informačního systému Audiovizuálního centra Mendelovy univerzity v Brně. Diplomová práce. Brno, 2011. Tato diplomová práce pojednává o inovaci interního informačního systému Audiovizuálního centra Mendelovy univerzity v Brně. Teoretická část se zabývá úlohou webového designu při komunikaci mezi webovou prezentací a koncovým uživatelem, dále pak obecnými pravidly pro tvorbu webových aplikací a jejich optimalizací pro výkon. Praktická část se zaměřuje na konkrétní inovaci systému. Je zde provedena analýza současného stavu systému, a podle specifikace kladeného na systém pak navrhnuty změny, jejich modelování a jejich následná realizace pomocí dostupných webových technologií. Klíčová slova: Inovace informačního systému, webová aplikace, webdesign, optimalizace systému

5

OBSAH

Obsah 1 Úvod a cíl práce 1.1 Uvedení do problematiky . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Cíl práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Teoretická východiska 2.1 Definování pojmů . . . . . . . . 2.2 Vývoj informačního systému . . 2.3 Návrh informačního systému . . 2.3.1 Jazyk UML . . . . . . . 2.3.2 Návrh databází . . . . . 2.4 Použité webové technologie . . . 2.4.1 Značkovací jazyk HTML 2.4.2 Kaskádové styly . . . . . 2.4.3 JavaScript . . . . . . . . 2.4.4 Knihovna JQuery . . . . 2.4.5 Ajax . . . . . . . . . . . 2.4.6 Flash . . . . . . . . . . . 2.4.7 PHP . . . . . . . . . . . 2.4.8 MySQL . . . . . . . . .

8 8 9

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

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

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

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

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

10 10 11 14 14 15 17 18 18 18 19 21 22 22 24

3 Webdesign jako prostředek pro komunikaci 3.1 Metody komunikace . . . . . . . . . . . . . . . . . 3.2 Problémy při vytváření webových stránek s jasnou 3.3 Co by mělo být uživateli sděleno . . . . . . . . . . 3.4 Efektivní komunikace . . . . . . . . . . . . . . . . 3.5 Výsledky dobré komunikace . . . . . . . . . . . . 3.6 Současné trendy webdesignu . . . . . . . . . . . . 3.7 Frameworky pro webdesign . . . . . . . . . . . . .

. . . . . . . komunikací . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

25 25 27 29 30 32 33 35

4 Postupy pro tvorbu webové aplikace 4.1 Definování cíle projektu . . . . . . . . . . . . . 4.2 Uspořádání souborů a složek . . . . . . . . . . . 4.2.1 Pojmenování souborů a složek . . . . . . 4.2.2 Uspořádání prostředků . . . . . . . . . . 4.3 Postupy pro značkování pomocí jazyka HTML . 4.3.1 Definice typu dokumentu . . . . . . . . . 4.3.2 Postupy značkování . . . . . . . . . . . . 4.3.3 Pravidla přístupnosti pro webový obsah 4.4 Postupy pro formátování CSS . . . . . . . . . . 4.4.1 Přenastavení výchozího stylu prohlížeče . 4.4.2 Kaskádové chování a specifičnost . . . . 4.4.3 Přiřazení více tříd jednomu elementu . .

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

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

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

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

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

37 37 38 38 38 40 40 41 43 44 44 44 44

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6

OBSAH

4.5

4.4.4 Používání relativní velikosti písma . . . . . . . 4.4.5 Zkracování pravidel . . . . . . . . . . . . . . . Optimalizace výkonu . . . . . . . . . . . . . . . . . . 4.5.1 Ladění webového serveru pro zlepšení výkonu 4.5.2 Optimalizace kódu HTML pro výkon . . . . . 4.5.3 Optimalizace šablon stylů pro výkon . . . . . 4.5.4 Optimalizace obrázků pro výkon . . . . . . . . 4.5.5 Optimalizace kódu JavaScriptu pro výkon . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

5 Metodika práce 6 Vlastní práce 6.1 Analýza současného stavu systému . . . . . . . . . . . . . . . . . 6.1.1 Analýza cílové skupiny uživatelů . . . . . . . . . . . . . . . 6.1.2 Analýza grafického rozhraní . . . . . . . . . . . . . . . . . 6.1.3 Analýza funkcí systému . . . . . . . . . . . . . . . . . . . 6.1.4 Analýza implementace systému . . . . . . . . . . . . . . . 6.2 Specifikace požadavků . . . . . . . . . . . . . . . . . . . . . . . . 6.2.1 Funkční požadavky . . . . . . . . . . . . . . . . . . . . . . 6.2.2 Nefunkční požadavky . . . . . . . . . . . . . . . . . . . . . 6.3 Navrhované změny . . . . . . . . . . . . . . . . . . . . . . . . . . 6.3.1 Návrh na změnu způsobu poskytování informací . . . . . . 6.3.2 Návrh na inovaci grafického rozhraní . . . . . . . . . . . . 6.3.3 Návrh na změny v implementaci . . . . . . . . . . . . . . . 6.4 Tvorba modelů . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.4.1 Modelování případů užití . . . . . . . . . . . . . . . . . . . 6.4.2 Modelování diagramu tříd . . . . . . . . . . . . . . . . . . 6.4.3 Databázový model . . . . . . . . . . . . . . . . . . . . . . 6.4.4 Drátěný model . . . . . . . . . . . . . . . . . . . . . . . . 6.5 Realizace a implementace změn . . . . . . . . . . . . . . . . . . . 6.5.1 Inovace grafického rozhraní a uspořádání funkčních prvků . 6.5.2 Tvorba šablony webové prezentace . . . . . . . . . . . . . 6.5.3 Tvorba programového kódu v jazyce PHP . . . . . . . . . 6.6 Optimalizace systému . . . . . . . . . . . . . . . . . . . . . . . . .

45 45 45 48 48 50 52 54 56

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

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

58 58 58 58 60 61 62 62 63 63 64 65 65 66 66 67 68 69 72 72 74 76 76

7 Diskuze

77

8 Závěr

79

9 Literatura

80

Přílohy

83

A CSS reset

84

OBSAH

7

B Definování základních tříd v CSS

86

C Vybrané ukázky aplikace

88

1

ÚVOD A CÍL PRÁCE

1 1.1

8

Úvod a cíl práce Uvedení do problematiky

V současné době jsou informační systémy již nedílnou součástí většiny společností bez ohledu na to, v jakém odvětví či oboru daná společnost působí. Informační systém jakožto soubor informací, lidí, technologických prostředků a metod hraje v podniku klíčovou roli při uchovávání a prezentaci dat nebo informací spojených s podnikovými procesy. Takovýmto systémem může být například systém vedení evidence knih v knihovně, systém vedení zásob ve skladu či evidence zaměstnanců v podniku. Informační technologie, které jsou jednou z jeho hlavních součástí, můžeme chápat jako souhrn technických a programových prostředků včetně jejich metodického a znalostního zázemí sloužících ke zpracování a poskytování informací. Stejně jako nejrůznější stroje a technologie, které jsou pořízeny, provozovány a opotřebovávány s plynoucím časem zastarávají a jsou nahrazovány novými, vylepšenými verzemi, které většinou podléhají soudobým trendům, tak i informační technologie a metody zastarávají a po určité době se mohou stát nevyhovujícími a je nutno je vylepšit nebo zcela nahradit. Může se jednat o zastarávání hardwarových nebo softwarových prostředků i zastarání použitých metod při navrhování a implementaci informačního systému. V současné době je zcela běžné provozovat nejrůznější aplikace včetně informačních systémů v podobě webových aplikací na internetu. Jelikož se webové technologie a standardy neustále rozvíjí a obohacují, mohou webové aplikace rychle zastarávat. Například jazyk HTML prošel v posledních dvou desetiletích značným vývojem, kdy v roce 1994 byl poprvé standardizován komunitou Internet Engineering Task Force. Následně se vyvíjel přes zavrženou verzi 3.0, 4.0 a 4.01. Předpokládalo se, že nástupcem HTML se stane jazyk XHTML. V roce 2007 však byla založena pracovní skupina, jejímž cílem bylo vytvoření nové verze HTML s označením HTML5 a její XML variantu XHTML5. Jednotlivé verze s sebou přinášejí nejrůznější vylepšení a opravy předešlých chyb. Jelikož internet prochází neustálým vývojem, jako jsou specifikace, trendy ve webdesignu, knihovnách nebo zvycích uživatelů, je neustále nutné tyto změny sledovat a s časem se jim přizpůsobovat a zohledňovat tento vývoj i ve svém informačním systému v podobě jeho inovace. Dále je také nutné počítat se změnami spojenými s vývojem a fungováním společnosti, a proto jsou následné inovace informačního systému stejně tak důležité jako jeho prvotní návrh a realizace. Jsou-li však jeho návrh a implementace navrženy špatně či nejasně, je možné při inovaci narazit na celou řadu problémů, které na sebe váží další problémy, a jakákoliv změna je velmi časově i ekonomicky obtížná a je nutné vypracovat nové řešení mnohdy i v podobě nového návrhu a modelování celé části informačního systému nebo dokonce informačního systému jako celku.

1.2

Cíl práce

9

Současný vývoj internetu klade důraz na tvorbu uživatelsky přívětivých aplikací tzv. RIA aplikací, které mnoha charakteristikami připomínají aplikace desktopové. mezi technologie zvyšující interaktivitu a uživatelský komfort patří v současné době například Adobe Flash, Java nebo Microstoft Silverlight. Jako další technologii lze uvést javascriptovou knihovnu JQuery, která je hojně používána v mnoha webových aplikacích, a při jejím použití v kombinaci s technologií ajax mohou vznikat velmi působivé prezentace. Tato práce se bude při inovaci převážně soustředit na použití knihovny JQuery a ajaxu a některých flashových komponent. Dále se pak bude zabývat inovací grafického rozhraní celého systému, databázové a programové struktury a bude kladen důraz na oddělení aplikační a prezentační logiky.

1.2

Cíl práce

Cílem diplomové práce je inovace Interního informačního systému Audiovizuálního centra Mendelovy univerzity v Brně. Inovace by mělo být dosaženo pomocí několika kroků. Prvním krokem je inovace grafického uživatelské rozhraní jak v prezentační, tak i v administrační části systému za účelem lepší orientace uživatele v systému. Druhým krokem je navrhnutí změn a zahájení transformace současného strukturního zdrojového kódu do objektového, návrh a implementace nové databázové struktury, která bude vyhovovat normálním formám. Posledním krokem, který úzce souvisí s novou implementací, bude oddělení prezentační a aplikační logiky pro lepší čitelnost a správu zdrojových kódů systému.

2

TEORETICKÁ VÝCHODISKA

2

10

Teoretická východiska

2.1

Definování pojmů

V úvodu práce je vhodné, aby byly definovány a vysvětleny některé základní pojmy. Většina je sice velmi důvěrně známá a používaná, ale na jejich přesném vymezení se však ne všichni vždy shodnou. Data Data jsou údaje, které jsou používány pro popis nějakého jevu nebo vlastnosti pozorovaného objektu. Lze je získat měřením nebo pozorováním. Mohou být vyjádřením skutečností formálním způsobem, tak aby je bylo možné přenášet nebo zpracovat. Dále to mohou být číselné nebo jiné symbolicky vyjádřené údaje a hodnoty různých entit nebo událostí či fyzicky zaznamenané znalosti, poznatky, zkušenosti nebo výsledky pozorování procesů, projevů, činností a prvků reálného světa. Z dat se pak následně může skládat i informace. Informace Informace jsou data, kterým jejich uživatel přisuzuje určitý význam a která uspokojují konkrétní objektivní informační potřebu svého příjemce. Informace vzniká tedy až v okamžiku jejich užití a představuje vypovídací schopnost dat a je cílem tohoto zpracování. Informaci lze charakterizovat základními vlastnostmi: • Informace je nehmotná, • informace doplňuje poznatky o jistých skutečnostech a snižuje entropii, • informace může být obsažena ve znacích (resp. signálech), tak i v jejich vzájemném uspořádání v rámci zpráv, jejichž fyzická podoba je různá, • znaky a signály poskytují informaci pouze tomu, kdo jim rozumí, tj. kdo je schopen rozpoznat jejich syntaxi a pochopit sémantiku. Systém Existuje mnoho definicí pojmu systém. Bertalanffy uvádí, že „systém je komplex prvků nacházejících se ve vzájemné interakciÿ. Hall uvádí, že „systém je množina objektů spolu se vztahy mezi nimi a jejich atributyÿ. Definice je podobná jako předchozí, ale zdůrazňuje, že objekt jako prvek systému resp. jeho vlastnosti souvisí s ostatními. Vlček zase uvádí, že „systém je konečná množina prvků Q a množina vazeb A mezi nimi s dynamickým, účelovým chováním S = (Q, A)ÿ.

2.2

Vývoj informačního systému

11

Informační technologie Informační technologií lze označit každý přístroj, který je schopen zpracovávat informace, tedy přijmout vstupní data, samostatně s nimi provádět určité operace a vydávat příslušná výstupní data. Obecně lze tedy říct, že informační technologie jsou chápány jako souhrn technických a programových prostředků včetně jejich metodického a znalostního zázemí sloužících ke zpracování a poskytování informací. Informační systém Informační systém je komplex informací, lidí, použitých informačních technologií, organizace práce, řízení chodu systému a metod sloužících ke sběru, přenosu, uchování a dalšímu zpracování dat za účelem tvorby a prezentace informací. S pojmem informační systém také úzce souvisí pojem podnikový informační systém. „Podnikový informační systém vytvářejí lidé, kteří prostřednictvím dostupných technologických prostředků a stanovené metodologie zpracovávají podniková data a vytvářejí z nich informační a znalostní bázi organizace sloužící k řízení podnikových procesů, manažerskému rozhodování a správě podnikové agendyÿ (Sodomka, 2006).

2.2


Při tvorbě či inovaci softwaru pro informační systém je vhodné dodržovat schéma procesu vývoje softwaru. Toto schéma obecně obsahuje následující části: • Specifikace požadavků, • analýza, • návrh, • implementace, • nasazení, • provoz a údržba. Stejný postup pro vývoj aplikace používají i Arlow a Neustadt, kteří se zabývají návrhy aplikací pomocí jazyka UML. Lze tedy provést stručnou charakteristiku jednotlivých fází vývoje s ohledem na daný inovovaný informační systém. Alternativou je proces vývoje webové aplikace podle jazyka WebML. WebML neboli Web Modeling Language je jazyk pro vizuální modelování komplexních datově náročných webových aplikací. Poskytuje formální grafické specifikace obsažené v kompletním návrhovém procesu, který může být podporován vizuálními návrhovými nástroji, jako je například WebRatio. Tento proces vychází z původního obecného vývoje softwaru, ale je přizpůsoben požadavkům kladených na webovou

2.2


12

aplikaci. Protože inovovaný informační systém je navržen a provozován ve webovém prostředí, bude vhodné zohlednit některé poznatky WebML. Specifikace požadavků K popisu aktivit zapojených do zjišťování, dokumentování a údržby množiny požadavků na softwarový systém slouží inženýrství požadavků. Je zastoupeno odhalováním způsobu, jak a k čemu uživatelé daný systém potřebují. Neúspěch v procesu inženýrství požadavků je hlavní příčinou konečného neúspěchu celého projektu. Za další příčinu selhání softwarového projektu je nedostatečný podíl uživatele. Jelikož je uživatel klíčový zdroj požadavků, je obvykle rozsah jeho neúčasti na inženýrství požadavků přímo úměrný neúspěchu celého projektu. Vzhledem k tomu, že je konečný softwarový systém založen na množině požadavků, je efektivní inženýrství požadavků klíčovým faktorem celého softwarového projektu. Požadavek lze definovat jako specifikaci toho, co by mělo být implementováno. Požadavky se dají rozdělit na dva typy: • Funkční požadavky, jež určují, jaké chování bude systém nabízet, • nefunkční požadavky, které specifikují vlastnosti nebo omezující podmínky daného systému. Požadavky jsou nebo by alespoň měly být základem všech systémů. Jsou v podstatě vyjádřením toho, co by měl systém dělat. Požadavky by měly být jediným vyjádřením, co by měl systém dělat, nikoliv však toho, jak by to měl dělat. To je velmi zásadní rozdíl. Lze tedy určit, co by měl systém dělat a jaké chování by měl poskytovat, aniž by bylo cokoliv řečeno o způsobu, jak bude dané funkce dosaženo (Arlow, Neustadt, 2007). Analýza Pracovní postup analýzy se ve značné míře může překrývat se zachycením požadavků. Je to díky tomu, že tyto dvě aktivity jsou spolu velmi úzce spojeny. Z pohledu objektově orientovaného analytika je záměrem analýzy tvorba analytického modelu. Tento model se zaměřuje na to, co systém musí dělat, avšak se nezabývá detaily, které se týkají způsobu, jakým to provede. Tuto otázku pak řeší návrh. Hranice mezi analýzou a návrhem může být někdy velice nejasná a do určité míry závisí na individuálním cítění daného analytika (Vymětal, 2009). Návrh Analýza se zaměřuje hlavně na tvorbu logického modelu připravovaného systému, který zachycuje funkce, které musí tento systém poskytovat, aby vyhověl požadavkům uživatelů. Smyslem návrhu je však přesná specifikace způsobu implementace

2.2


13

těchto funkcí. Spočívá tedy ve výběru nejvhodnějších technických řešení za účelem vytvoření modelu systému, který bude možno skutečně implementovat. Návrh je možné rozdělit na hrubý a detailní. V hrubém návrhu by měly být řešeny základní aspekty celého systému, tedy zpřesnění základních požadavků kladených na systém do úrovně, kdy je možno jej rozdělit do subsystémů. Dále pak vymezení dílčích projektů, návrh hrubého modelu funkcí a dat jednotlivých subsystémů, podrobný návrh rozhraní systému, okolí a mezi jednotlivými subsystémy. Obsahem detailního návrhu je navrhnout systém až na úroveň, kdy bude možné začít systém implementovat. Dále pak podrobný návrh nové organizační struktury. Pokud bude systém rozdělen na subsystémy, jsou v této etapě definovány činnosti, které jsou shodné pro všechny vytvářené subsystémy systému (Arlow, Neustadt, 2007). Implementace Primární aktivitou implementace je tvorba zdrojového kódu softwaru. Spočívá v převodu navrženého modelu do spustitelného kódu. Z pohledu analytika nebo návrháře je smyslem implementace tvorba požadovaného implementačního modelu. V tomto modelu jsou rozdělené návrhové třídy do komponent. Způsob, jakým je to provedeno, obvykle do velké míry závisí na volbě programovacího jazyka. Pracovní postup implementace je především zaměřen na tvorbu spustitelného kódu. Vedlejším produktem této aktivity může být implementační model. Konečné modelování implementace je ponecháno zcela na programátorech, ale existují i případy, kdy může být explicitní modelování implementace důležité. Budeli potřeba generovat kód přímo z modelu, musí být explicitně definovány detaily, jako jsou zdrojové soubory a komponenty. Dále pak, je-li vytvářen komponentový software, je rozvržení návrhových tříd a rozhraní do jednotlivých komponent strategické. V takovém případě by měl být vytvořen model vlastními silami a neměl by se nechávat na jednotlivých programátorech (Arlow, Neustadt, 2007). Nasazení Jak uvádí předchozí citovaný dokument, pod pojmem nasazení si lze představit instalaci technického a programového vybavení, ruční postupy a procedury, provádění konverze stávajícího systému a zajištění počáteční podpory systému. Při nasazení nového systému je třeba, aby byl zajištěn přechod na nový systém s co nejmenším omezením běžné práce organizace a aby měli uživatelé čas si na nový systém zvyknout. Provoz a údržba Úkolem fáze provozu a údržby je zajištění provozu systému, jeho údržby a rozvoje vzhledem k vývoji potřeb uživatelů, a to se záměry a cíli organizace. Součástí je pře-

2.3

Návrh informačního systému

14

devším úprava systému podle aktuálních potřeb, dále také aktualizace dokumentace nebo údržba programového systému.

2.3 2.3.1

Návrh informačního systému Jazyk UML

UML neboli Unified Modeling Language (česky unifikovaný modelovací jazyk) je univerzální jazyk pro vizuální modelování systémů a slouží k vizualizaci, specifikaci, navrhování a dokumentaci softwarových systémů. Jazyk UML je nejčastěji spojován s modelováním objektově orientovaných softwarových systémů, ale má i mnohem širší využití, které vyplývá z jeho zabudovaných rozšiřovacích mechanismů. Tento jazyk byl navržen proto, aby spojil nejlepší existující postupy modelovacích technik a softwarového inženýrství. Je explicitně navržen tak, aby jej mohly implementovat všechny nástroje CASE (computer-aided software engeneering). Jeho koncepce vychází z toho, že rozsáhlé softwarové systémy se obvykle bez podpory nástrojů CASE neobejdou. Diagramy vytvořené v jazyce UML jsou srozumitelné pro lidi, ale také je mohou snadno interpretovat i programy CASE. Jazyk UML nenabízí žádné druhy metodiky modelování. Je samozřejmé, že určité aspekty metodiky lze najít v každém z elementů, z nichž se model UML skládá. Samotný jazyk UML však poskytuje pouze vizuální syntaxi, kterou lze využít při sestavování konkrétních modelů. Unified Process již ale metodikou je. Sděluje, jaké pracovníky musíme využít, jaké činnosti vykonat a jaké produkty vyrobit, aby se podařilo sestavit model funkčního softwarového systému Jazyk UML není vázán žádnou specifickou metodikou nebo životními cykly. Lze jej použít společně se všemi existujícími metodami. Unified Process využívá jazyk UML jako vlastní syntaxi pro vizuální modelování. Z tohoto pohledu lze metodiku Unified Process považovat za upřednostňovanou metodu užití jazyka UML, protože je pro tento jazyk nejlépe adaptovaná (Sparx Systems, 2011). Modelování případů užití Modelování případů užití je jednou z forem inženýrství požadavků a je jiným, doplňkovým způsobem získávání a dokumentování požadavků. Modelování případů užití se skládá z následujících aktivit (Arlow, Neustadt, 2007): • Nalezení hranic systému, • vyhledání účastníků (aktorů), • nalezení případů užití, • specifikace případů užití, • tvorba scénářů.

2.3


15

Výstupem uvedených aktivit je model případu užití, obsahující čtyři komponenty: Účastníci (aktoři) - jsou to role, přidělené osobám nebo předmětům používající daný systém. Případy užití (use cases) - činnosti, které mohou účastníci se systémem vykonávat. Relace - Smysluplné vztahy mezi účastníky a případy užití. Hranice systému - ohraničení zobrazené kolem případů užití, jež je vyznačením území nebo hranic modelovaného systému. James Rumbaught definuje v knize The Unified Modeling Language Reference Manual případ užití jako „specifikaci posloupností činností, včetně proměnných posloupností a chybových posloupností, které systém, podsystém nebo třída může vykonat prostřednictvím interakce s vnějšími (externími) účastníkyÿ. Případ užití je něco, co účastník od systému očekává. Je to případ užití systému specifickým účastníkem, kdy případy užití jsou vždy iniciovány účastníkem. Případy užití jsou vždy napsány z pohledu účastníka. Případy užití jsou obvykle považovány za součást systému. Případy užití lze dále rozšířit na případy užití podsystémů nebo dokonce jednotlivých tříd. Výsledkem modelování případů užití je pak diagram případu užití (Arlow, Neustadt, 2007). Modelování tříd Výsledek modelování objektů reprezentující některé části systému je diagram tříd. Diagram tříd je statická struktura systému, využívaný především v situaci, kdy je potřeba diagramem zachytit konkrétní skutečnost. Proto se v nich velmi zřídka využívají konkrétní a abstraktní objekty zároveň. Objekty se zde zachycují symbolem ve tvaru obdélníku označeného návěštím. Výsledkem modelování tříd je pak diagram tříd znázorněný jako graf obsahující hrany a uzly. Základními prvky jsou v diagramu tříd třídy (uzly grafu) a vztahy mezi nimi (hrany grafu). Pomocí diagramu tříd je na počátku analýzy zachycován konceptuální datový model systému, ve kterém jsou znázorněny entity a vztahy zjištěné v průběhu analýzy. Při modelování objektů v podobě tříd mohou vzniknout mezi třídami vztahy typu agregace, kompozice, asociace nebo generalizace. Diagram tříd je tedy výchozím modelem pro implementaci systému (Ambler, 2010). 2.3.2

Návrh databází

Na počátku vývoje každé databáze stojí především její návrh. To, jak bude databáze navržena, má vliv na to, jak výkonná bude výsledná aplikace, jak jednoduše nebo

2.3


16

složitě se bude programovat a spravovat, a také, jak bude vypadat její flexibilita, když v ní bude třeba provádět změny. Chyby, kterých se vývojář je při návrhu databáze dopustí, se v pozdější fázi napravují jen velmi obtížně. Relace Relační databáze jsou založeny na tabulkách, jejichž řádky jsou brány jako záznamy, a některé sloupce v nich pak jsou chápány tak, že uchovávají informace o vztazích nebo vazbách mezi jednotlivými záznamy. Tyto vazby jsou označovány jako relace. mezi dvěma tabulkami mohou existovat tři typy relací (Kofler M., Öggl B., 2007): Relace 1:1 – Relace 1:1 představuje jednoznačný vztah mezi dvěma tabulkami. Každý záznam v první tabulce bude odpovídat přesně druhému záznamu ve druhé tabulce. Výskyt takovýchto relací je v praxi poměrně vzácný, neboť informace uložené v obou tabulkách se dají stejně snadno uložit do jedné jediné tabulky. Relace 1:n – V tomto případě musí být jeden záznam v první tabulce spojen s několika záznamy v tabulce druhé. Obráceně však tento vztah neplatí. Někdy se v tomto případě hovoří také o vztahu n:1, nicméně označení má stejný význam jako 1:n a jde v podstatě jen o úhel pohledu na daný problém. Relace n:m – Relace n:m znamená, že záznam v první tabulce může být svázán s více záznamy v druhé tabulce a naopak. Normální formy Normalizací v oblasti databází se rozumí proces zjednodušování a optimalizace navržených struktur databázových tabulek. Hlavním cílem je navržení databázových tabulek tak, aby obsahovaly minimální počet redundantních dat, a tím se zabrání tzv. aktualizačním anomáliím. Normalizace vede ke vzniku tabulek, které lze snadno udržovat a efektivně se na ně dotazovat. Správnost takto navržených struktur tabulek lze ověřit některou z normálních forem (Hillyer, 2010). Celem existuje pět normálních forem: První normální forma – Relace je v první normální formě, pokud každý její atribut bude obsahovat pouze atomické neboli nedělitelné prvky. Druhá normální forma – Tabulka je v druhé normální formě, pokud je v první normální formě a každý neklíčový atribut je zcela závislý na primárním klíči. Druhou normální formu je tedy nutné řešit v případě, když tabulka obsahuje vícehodnotový primární klíč. Třetí normální forma – Ve třetí normální formě se nachází relace, pokud splňuje první a druhou normální formu a žádný z jejich atributů není tranzitivně závislý

2.4

Použité webové technologie

17

na klíči, neboli že tabulka je ve třetí normální formě, pokud je ve druhé normální formě a všechny neklíčové atributy jsou navzájem nezávislé. Pro odstranění některých anomálií ve třetí normální formě byla vytvořena Boyce-Coddova (BCNF) normální forma, která říká, že relace R je v BCNF právě tehdy, když pro každou netriviální závislost X → Y, kde X a Y jsou množiny atributů a zároveň Y není podmnožinou X, platí, že X je nadmnožinou nějakého klíče, nebo X je klíčem relace R. Jinak řečeno relace R je v BCNF právě tehdy, když každý determinant funkční závislosti v relaci R je zároveň kandidátním klíčem relace R. Každá relace, která je v BCNF, je zároveň ve třetí normální formě. Naopak relace, která je ve třetí normální formě, nemusí být v BCNF, pokud platí tyto skutečnosti: • V relaci existuje více klíčů, • všechny kandidátní klíče jsou složené ze dvou nebo více atributů, • existuje takový atribut, který je společný pro všechny kandidátní klíče. Čtvrtá normální forma – Relace je ve čtvrté normální formě, je-li v BCNF, a popisuje pouze příčinnou souvislost (jeden fakt). Neboli relace je ve čtvrté normální formě, pokud je v BCNF, a navíc všechny vícehodnotové závislosti jsou zároveň funkčními závislostmi z kandidátních klíčů. Pátá normální forma – Relace je v páté normální formě, pokud je ve čtvrté normální formě a není možné do ní přidat další atribut nebo skupinu atributů tak, aby se vlivem skrytých závislostí rozpadla na několik dílčích relací.

2.4


Při tvorbě webových aplikací se můžeme setkat s celou řadou různých technologií, skriptovacích nebo programovacích jazyků. Tyto technologie mají tendenci se rychle rozvíjet a je potřeba dodržovat některé ze standardních pravidel a postupů, na které by měli vývojáři webových aplikací dbát a kterým by se měli přizpůsobit. Tato pravidla jsou označována jako webové standardy a jejich správu a rozvoj má na starosti organizace The World Wide Web Consortium (W3C). „Webové standardy jsou pečlivě navrženy tak, aby co možná největšímu počtu uživatelů umožnily plně využívat možností internetu a současně zaručily dlouhodobou užitečnost dokumentů na internetu publikovaných. Dodržováním těchto standardů zjednodušíte a zefektivníte svou práci a současně budete dodávat stránky, které jsou přístupné širším okruhem lidí i technických zařízení. Stránky, navržené podle takových standardů, budou správně fungovat jak v budoucích verzích prohlížečů, tak na nových technických zařízeníchÿ (Mozilla Developer Network).

2.4


2.4.1

18

Značkovací jazyk HTML

Jazyk HTML (HyperText Markup Language) nebo XHTML (eXtensible Hypertext Markup Language) je značkovací jazyk pro tvorbu hypertextových dokumentů publikovaných v systému World Wide Web a tvoří základ každé webové stránky. HTML dokument (nebo webová stránka) je prostý textový soubor, který je kódován pomocí HTML tak, že jej webový prohlížeč zobrazí naformátovaný podle HTML značek v něm uvedených. Význam jednotlivých slov (HyperText Markup Language), ze kterých se zkratka HTML nebo XHTML skládá, je následující (Wempen, 2007): • Extensible (rozšiřitelný) znamená že, jazyk HTML je napsaný v jazyce XML a tím pádem ho lze rozšířit o vlastní značky. • Hypertext (hypertextový) znamená, že obsahuje tzv. hyperlinky neboli hypertextové odkazy, díky kterým je možné přecházet z jednoho dokumentu do druhého. Je to schopnost webových stránek vzájemně na sebe odkazovat. • Markup (značkovací) znamená, že značky dají prostému textu strukturu a formát. • Language (jazyk) poukazuje na to, že HTML je považován za značkovací jazyk. 2.4.2

Kaskádové styly

Kaskádové styly (anglicky Cascading Style Sheets se zkratkou CSS) je jazyk navržený organizací W3C určený pro popis a definování vlastností elementů webové stránky, jako jsou barvy, rozložení a font. Kaskádové styly jsou nezávislé na HTML a mohou být použity s jakýmkoliv dokumentem založeným na XML značkování. Slouží pro oddělení strukturní části stránky od vizuální, což umožňuje snadnější správu webové prezentace (W3C, 1999). V roce 1996 vznikl standard CSS 1.0, který je podporován téměř všemi dnes dostupnými prohlížeči. V současné době je aktuální doporučení CSS 2.1. Tato verze není obecně podporována ve všech prohlížečích, ale částečnou podporu lze najít také v převážné většině prohlížečů. Právě je připravována podpora doporučení CSS 3. Nejlepší podporu této verze má zatím Safari 5, které taky podporuje nejnovější verzi jazyka HTML 5. Ostatní prohlížeče jako Firefox nebo Opera mají také stále lepší podporu. Připravovaná verze Internet Exploreru 9 by měla podporu CSS 3 také obsahovat (Odell, 2010). 2.4.3

JavaScript

JavaScript je multiplatformní, objektově orientovaný skriptovací jazyk vyvinutý společností Netscape používaný v převážné většině webových aplikací. Jeho pomocí lze jednoduchým způsobem ”oživit” statické HTML dokumenty, jako například vali-

2.4


19

dovat formulářová data nebo provádět různé výpočty na straně klienta, což vede k větší dynamice webových stránek (Mozilla Developer Network). Charakteristika jakyka JavaScript Jazyk JavaScript je jazyk (Mozilla Developer Network): • Interpretovaný a jeho zdrojový kód se nemusí překládat. O jeho běh se stará webový prohlížeč na straně klienta. • Objektový, tzn. využívá objektů prohlížeče a zabudovaných objektů. • Závislý na prohlížeči, který interpretuje kód do podoby, které rozumí webový prohlížeč. Tuto interpretaci zajišťuje v prohlížeči subsystém pro JavaScript. Tyto subsystémy se v jednotlivých prohlížečích mohou lišit. • Case sensitive, což znamená, že při zápisu zdrojového kódu záleží na velikosti písmen. • Založený na syntaxi Javy a C++. Díky tomu si ho vývojáři dříve osvojí. 2.4.4

Knihovna JQuery

„Knihovna jQuery zasáhla svět vývoje prezentací jako blesk z čistého nebe. Její jednoduchý zápis dělá i z těch nejsložitějších úloh úlohy triviální, dokonce až zábavné. Spoustu programátorů rychle oslovila její elegance a čistota. Pokud používáte tuto knihovnu, jistě již k vašim projektům přidáváte bohatý a interaktivní obsahÿ (Lindley, 2010, s. 17). Charakteristika knihovny jQuery jQuery je rychlá a stručná JavaScriptová knihovna s otevřeným zdrojovým kódem, která zjednodušuje interakci mezi objektovým modelem dokumentu (model DOM) a jazykem JavaScript. Knihovna jQuery ulehčuje procházení a manipulaci s dokumenty HTML, zpracování událostí, animace nad modelem DOM, interakce prostřednictvím technologie Ajax a programování skriptů v jazyce JavaScript tak, aby fungovaly, jak mají ve všech moderních prohlížečích. (The jQuery Project, 2010). Použití této knihovny je v současné době velmi oblíbené a to pro její vlastnosti, které lze shrnout do následujícího seznamu: • Jde o knihovnu s otevřeným zdrojovým kódem a je volně k dispozici. • Knihovna je malá a její velikost ve verzi 1.5.1 v minimalizované podobě nástrojem gzip je 29kb a v nekomprimované pak 212kb. • Vyrovnává rozdíly mezi webovými prohlížeči.

2.4


20

• Má velkou komunitu uživatelů a přispěvovatelů podílejících se jako vývojáři a nadšenci. • Je malá s jednoduchou a promyšlenou architekturou zásuvných modulů. • Databáze zásuvných modulů se neustále rozrůstá • Má kompletní dokumentaci rozhraní API včetně příkladů zdrojového kódu. • Snaží se vyhnout konfliktům s jinými knihovnami pro JavaScript. • Velká podpora komunity kolem knihovny jQuery - velké množství tutoriálů, článků, diskusí a blogových příspěvků. • Díky tomu, že je vyvíjena otevřeně, může kdokoliv opravovat její chyby, vylepšovat ji a pomáhat s jejím vývojem. • Má stabilní a konzistentní vývoj a její vývojový tým vydává nové aktualizace. • Je přijímána velkými společnostmi, čímž je podporována její životnost a stabilita (např. Google, Dell, Bank of America, CBS, Netfix, Wordpress, Drupal). • Začleňuje specifikace konsorcia W3C rychleji než webové prohlížeče. Podporuje většinu selektorů jazyka CSS3. • Je testována a optimalizována pro vývoj v moderních webových prohlížečích, jako jsou Google Chrome, IE 6, IE 7, IE 8, Opera, Safari, Firefox. • Nenarušuje postupy při programování v JavaScriptu. • Lze se ji snadno a rychle naučit, protože používá koncepty, které už vývojáři a návrháři znají (např. z jazyků CSS nebo HTML). Díky těmto vlastnostem se knihovna jQuery odlišuje od ostatních řešení a celý balík je výborným nástrojem pro JavaScript (Lindley, 2010). Filozofie knihovny jQuery Základní filozofii knihovny jQuery lze vystihnout větou: „Pište méně, dělejte víceÿ (The jQuery Project, 2010). Tato filozofie může být rozdělena na tři části (Lindley, 2010): • Vyhledávání elementů pomocí selektorů jazyka CSS a manipulace s nimi pomocí metod knihovny jQuery. Jde o hledání skupiny elementů v modelu DOM, na nichž se bude provádět určitá operace (např. zobrazení či skrytí elementu). • Řetězová volání metod jQuery na skupině elementů. To umožňuje volání nekonečného řetězu metod knihovny na aktuálně vybrané elementy pomocí funkce jQuery, která vždy vrací elementy, aby řetěz mohl pokračovat. Toto zřetězení snižuje dobu zpracování, protože vybere element DOM jen jednou a poté se jen

2.4


21

aplikují metody knihovny. Vyhýbání se průchodu modelem DOM je nezbytné pro optimalizaci výkonu. • Používání obalu jQuery a implicitní interakce, neboli vybírání elementů modelu DOM ze stránky HTML a tyto elementy budou obaleny funkčními prvky knihovny jQuery. 2.4.5

Ajax

Jednou ze základních dovedností RIA aplikací je komunikace s webovým serverem bez nutnosti obnovovat danou stránku. Díky tomu se webové aplikace chovají podobně jako desktopové aplikace, které mohou nahrávat a ukládat data na pozadí a aktualizovat části stránky nezávisle na ostatních. AJAX je zkratka pro Asynchronous JavaScript and XML. Je to obecné označení principu stahování a nahrávání dat na vzdálený webový server pomocí jazyka JavaScript bez nutnosti znovunačtení celé stránky. Přestože AJAX ve svém názvu obsahuje XML, nespoléhá při komunikaci na formát XML, ale lze obecně přenášet jakýkoliv obsah. Asynchronní znamená, že zatímco se nahrává obsah, zbytek skriptu se stále provádí - provádění se nezastaví, aby počkalo, než se nahraje obsah. Technika AJAX neklade žádné požadavky na formát dat, a proto lze odesílat a přijímat data v takovém formátu, který se dá pak snadno zpracovat ve zdrojovém kódu. Analýza kódu v jazyku XML je v JavaScriptu poměrně pomalá, a proto je vhodnější alternativou formát JSON, který vyniká menším objemem dat a vyšší rychlostí zpracování. Protože JSON je přirozeně objekt jazyka JavaScript, je jednoduché z něj vytvořit použitelný objekt. Ve většině případů je možné reprezentovat data XML ve formátu JSON pomocí méně znaků. V některých případech bude žádoucí, aby server vracel dokument HTML a místo analyzování jen jednoduše vloží jeho obsah do modelu DOM. Jazyk XHTML představuje výborný formát pro tento účel. Když se dynamicky vkládá kód HTML do stránky prostřednictvím kódu JavaScript, aplikují se na nový kód všechna nezbytná pravidla jazyka CSS. To znamená, že není potřeba nijak upravovat vzhled stránky, když se do ní Ajaxem dynamicky přidá nový obsah Velkou výhodou této technologie tedy je, že se stránka nemusí po odeslání nějakého požadavku znovu načítat, z čehož vyplývá také potenciál snížit zátěž webových serverů a sítě obecně. Naopak však může dojít při špatné implementaci ke zvýšení počtu HTTP požadavků, i když přenášejí nižší množství dat. Problémem je také předávání URL stránky a možnost navigovat pomocí tlačítek Zpět a Další. Při zpracování požadavku pomocí technologie je při delším zpracování také nutné dát nějakým způsobem uživateli najevo, že se jeho požadavek zpracovává, aby tak nedocházelo k jeho nejistotě. (Odell, 2010).

2.4


2.4.6

22

Flash

Flash je multimediální platforma vyvinutá společností Adobe. Dříve byla určena spíše pro tvorbu křivkových animací, poté interaktivních animací, webových aplikací a her a v současné době slouží obecně k tvorbě obsahově bohatých internetových aplikací. mezi konkurenty flashe se mohou řadit Java od společnosti Sun a Microsoft Silverlight od společnosti Microsoft. Adobe flash používá jako objektový skriptovací jazyk ActionScript. Flashové soubory, které mají koncovku .swf pak interpretuje Adobe Flash Player, který je v prohlížeči nainstalován jako zásuvný modul. „Silnou stránkou Flashe byla vždy práce s multimédii. Ostatně skutečné rozšíření videa na web je právě jeho zásluhou. Kromě obligátního streamovaného přehrávání videí obsahuje Flash také velmi dobrou podporu pro plně duplexní hlasovou a obrazovou komunikaci prostřednictvím webkamer a mikrofonů. Pro aplikace komunikující v reálném čase je také zajímavá možnost perzistentního spojení se socketovým serverem. V desáté verzi Flash Playeru doplněna také o (celkem nevídanou) možnost tvorby P2P sítí ÿ (Honzík M., 2011). Při implementaci systému bude použit flashový přehrávač JW FLV Player, který naprogramoval Jeroen Wijering a jde o znovupoužitelnou komponentu pro přehrávání videa ve formátu .flv nebo videa, která podporují kodek H.264. 2.4.7

PHP

Zkratka PHP dříve znamenala Personal Home Page, v současné době představuje PHP Hypertext Preprocessor. Je to skriptovací jazyk zabudovaný na straně serveru. To znamená, že pracuje uvnitř dokumentu HTML a propůjčuje mu tak schopnost generovat požadovaný obsah. Webovou prezentaci je tak možné převést na webovou aplikaci, která není pouze sadou statických stránek s informacemi, které nemohou být aktualizovány tak často (Castagnetto, 2002). Programovací jazyk PHP je jednoduchý, avšak i přes to disponuje dostatečným množstvím funkcí, aby se dal použít i pro provoz a správu náročných projektů. PHP je distribuovaný jako Open Source a je tedy na internetu zdarma k dispozici. V současné době je dostupná verze PHP 5.3.6. Některé vlastnosti jazyka PHP jsou uvedeny v následujícím seznamu (Kofler M., Öggl B., 2007): • PHP je jazyk interpretovaný. • PHP je multiplatformní jazyk a je možné jej provozovat na většině webových serverů a pod většinou operačních systémů • Je to dynamicky typový jazyk a datový typ proměnné se určuje v okamžiku přiřazení hodnoty. • Používá heterogenní pole, tzn. že pole může obsahovat prvky různých typů. Pole jsou řídká a počet dimenzí není omezen.

2.4


23

• Syntaxi má podobnou jako jazyk C. • Je to jazyk specializovaný na webové stránky. Jazyk PHP má schopnost připojovat se k mnoha databázovým systémům (např. MySQL, PostgreSQL, ORACLE atd.) bez jakýchkoliv prostředníků. Jelikož byl tento jazyk navrhnut pro používání ve webových aplikacích, obsahuje mnoho funkcí pro práci spjatých s webem. Lze sem zahrnout práci s obrázky, připojování k webovým a síťovým službám, odesílání emailů, zpracování XML souborů, generování PDF souborů atd. Z uvedených důvodů bude jazyk PHP použit pro implementaci informačního systému. Smarty Smarty je komplexní šablonovací systém vytvořený v jazyce PHP, který usnadňuje oddělení prezentační logiky (HTML) od aplikační (PHP). Tohoto rozdělení je dobré v praxi využít při tvorbě větších projektů. Lze tak lépe využít rozdělení činností a znalostí různých lidí, kteří se společně podílejí na vývoji jednoho projektu. Hlavní myšlenka spočívá v tom, že člověk, který vytváří webovou šablonu v jazyce HTML, nemusí mít zkušenosti s jazykem PHP a může tak danou šablonu tvořit bez ohledu na to, jak bude aplikace implementována. Dostane od vývojáře pouze seznam informací o proměnných a tím tak přizpůsobí šablonu. Způsob implementace či získávání dat z databáze pro něj není důležitý. Webová prezentace je díky tomuto oddělení více přehledná a snadněji modifikovatelná. Programátor tedy může měnit zdrojové kódy, bez toho aniž by bylo nutné upravovat šablony a tvůrce šablony zase může upravovat šablonu, aniž by tím ovlivnil práci programátora. I přesto, že je šablonovací systém Smarty určen k oddělení aplikační a prezentační logiky, není omezen pouze na tvorbu šablon pomocí značek jazyka HTML. Umožňuje také použití řídících struktur, cyklů a vestavěných funkcí pro práci s řetězci, časem apod. Hlavní předností Smarty je možnost kompilace šablon. Pro každou použitou šablonu se vytváří zkompilovaný tvar, což je běžný PHP skript, který je uložen ve speciálním adresáři. Pokud je daná šablona použita znovu, neprobíhá znovu její zpracování, ale je použita právě její kompilovaná verze, čímž je dosaženo vyšší rychlosti. Alternativa kompilování šablon je cachování obsahu, což je principiálně stejný postup s tím rozdílem, že nejsou vytvářeny PHP skripty a HTML. Filozofie šablonovacího systému Smarty by se dala shrnout do následujících bodů (New Digital Group, Inc., 2010): • Čisté oddělení prezentačního kódu od aplikačního. • V zadní části pracuje PHP, v přední šablona Smarty. • Doplňuje funkce PHP, ale nenahrazuje je. • Rychlý vývoj a rozvržení práce mezi programátory a designéry.

2.4


24

• Rychlá a jednoduchá údržba. • Syntaxe jednoduchá na pochopení. • Není třeba znalostí jazyka PHP. • Flexibilní pro vlastní vývoj. • Volně ke stažení, Open Source. 2.4.8

MySQL

MySQL je systém řízení relačních databází vytvořený švédskou firmou MySQL AB, kterou vlastní společnost Sun Microsystem, dceřinou společností Oracle Corporation. Jedná se o multiplatformní databázi, kterou lze nainstalovat na většinu operačních systémů. Stejně jako jazyk PHP je distribuován pod hlavičkou Open Source a je tedy zdarma. MySQL patří k jednomu z nejrychlejších databázových systémů, který je v současné době k dispozici a je používán i pro správu rozsáhlých webů. Databázový systém MySQL je nejčastěji používán v kombinaci s jazykem PHP a softwarovým webovým serverem Apache. Pro správu MySQL databází se nejčastěji používá PhpMyAdmin, který je také napsán v jazyce PHP. Je to pokročilý nástroj, který slouží pro kompletní správu MySQL systému pomocí webového rozhraní a bývá součástí každého webhostingu s databázovým systémem MySQL.

3

WEBDESIGN JAKO PROSTŘEDEK PRO KOMUNIKACI

3

25

Webdesign jako prostředek pro komunikaci

Dobrá komunikace je jednou ze základních vlastností kvalitního informačního systému nebo webových stránek. Je nedílnou součástí pozitivního uživatelského zážitku a má přínos pro majitele stránek například v podobě opětovné návštěvnosti. Bez ohledu na to, zda se jedná o komerční webové stránky, blog, portfolio, informační webové stránky společností, vládní webové stránky či jakýkoliv jiný typ webových stránek je potřeba, aby byly schopné efektivně komunikovat s návštěvníkem. Důležitost komunikace s návštěvníky musí brát v úvahu jak designér webových stránek, tak i jejich majitel. Bohužel v některých případech je komunikace opomíjená. V ideálním případě design a ostatní prvky určené pro komunikaci s uživatelem poskytují návštěvníkům jasné a jednotné zprávy (Snell, 2009). V následující části budou uvedeny způsoby komunikace webové stránky s uživatelem a typické problémy, kterým mohou návrháři čelit, co konkrétně by mělo být uživateli při návštěvě webu předáno a jak toho dosáhnout. Dále budou uvedeny některé z cílů, které by měly být stanoveny z hlediska komunikace při vytváření webových stránek. Podle Stevena Snella by měl webdesignér ve své práci zohlednit následující body.

3.1

Metody komunikace

Webové stránky komunikují s návštěvníky mnoha různými způsoby. Ne všechny webové stránky budou mít stejný přístup, ale téměř každý web bude používat alespoň několik běžných způsobů komunikace. Základní způsoby komunikace webové stránky s návštěvníkem jsou uvedeny v následující části. Text Text je samozřejmě nejběžnější forma komunikace, která probíhá on-line. Většina návštěvníků webových stránek spoléhá na to, že z textu pochopí základní informace. V závislosti na typu webových stránek může hrát text hlavní komunikační úlohu, jako je tomu v případě blogů. Přístup komunikace pomocí textu bude záviset na účelu internetových stránek. Například obsahy článků stránky internetového obchodu nebo stránky pro členství v určitých skupinách se budou lišit od informační webové stránky. Obrázky Přísloví ”obrázek vydá za tisíc slov” hraje v oblasti webdesignu velkou roli. Fotografie a obrázky jsou nejen vynikajícím zdrojem pro vytvoření atraktivního a zajímavého designu, ale slouží i pro rychlou, přesnou a důraznější komunikaci, než je tomu v případě textu. Webdesigner si musí být vědom zprávy, kterou chce předat prostřednictvím obrázků a zajistit, aby pracovali v harmonii se zbytkem webové komunikace.

3.1

Metody komunikace

26

Titulky a nadpisy Ať už si uživatel prohlíží webové stránky, časopis, noviny či magazín, jsou pro efektivní komunikaci zásadní titulky a nadpisy. Lidská povaha je chtít vědět něco rychle a snadno, což platí zvláště na webu. Titulky a nadpisy pomáhají návštěvníkovi rozeznávat hlavní body a myšlenky a naznačují, co mohou očekávat v následujícím obsahu. Ikony Jedním z důvodů, proč jsou ikony tak užitečné ve webovém designu je, že dokáží předávat zprávy bez použití textu. Jako příklad lze uvést ikonu domečku, který reprezentuje odkaz na domovskou stránku a po kliknutí na ni může uživatel předpokládat, že bude přesměrován na úvodní stránku a tím pádem bude vědět, co položka představuje a co s ní může dělat. Design stylu Styl designu webu hraje také významnou roli v komunikaci s návštěvníkem. Určité designové prvky jsou běžné v určitých odvětvích a jiné naopak nemusejí být pro dané stránky vhodné. Styl může v těchto případech naznačovat návštěvníkovi něco o povaze webových stránek a jak to vyhovuje jeho potřebám. Jako příklad lze uvést webové stránky, které budou zaměřeny na prodej skateboardů a budou nejspíš vytvořeny ve stylu grunge. To je styl, který působí špinavým dojmem s nepravidelnými a křivě uspořádanými prvky. Tento styl většina návštěvníků na cílovém trhu ocení. Tím, že vidí tento typ stylu a sami se k tomuto stylu hlásí, se budou na stránce cítit pohodlně a budou mít s nimi pocit spojení. Podstata komunikace pomocí stylu je, že se návštěvník identifikuje se stylem stránky a že stránka byla vytvořena pro něj. Barvy Ve webdesignu existuje nekonečně mnoho variant barev a barevných schémat. Někdy jsou barvy vybírány na základě toho, zda design bude vypadat dobře, ale jindy mohou do hry vstupovat barvy jako psychologický aspekt. Jelikož každá barva má svou povahu, kterou jedinec nějakým způsobem vnímá, nehrají pouze úlohu v tom, jak stránky vypadají, ale také předávají zprávy návštěvníkům v nějakém jiném psychologickém podtextu. Audio a video Většina webů se skládá z textových zpráv. V posledních letech, kdy dochází mezi uživateli k nárůstu vysokorychlostního připojení k internetu, se stávají audio a video samozřejmou součástí webových stránek. Návrháři mají nyní spoustu možností, jak komunikovat s návštěvníkem stránek a audio a video je jeden ze silných nástrojů.

3.2

3.2

Problémy při vytváření webových stránek s jasnou komunikací

27


S vytvářením webové stránky, která účinně a jasně komunikuje s návštěvníky, je spjata řadou problémů, které je třeba překonat. Ne všechny webové stránky jsou stejné, proto se mohou tyto problémy lišit. V následujícím textu budou některé z nich uvedeny. Příliš mnoho obsahu Jedním z největších problémů, který musí designéři překonat, je rozhodnutí o množství informací, které použijí. Je samozřejmé, že spousta kvalitních informací může být užitečná, ale někdy představuje problém pro čistou komunikaci s návštěvníkem. V mnoha případech se lze setkat s webovými stránkami, které mají méně obsahu, a přesto dokáží komunikovat s uživatelem rychleji a efektivněji. Tím, že se bude designér snažit o to, aby jeho stránky měly hodně obsahu, může dojít ke zbytečnému matení návštěvníka. Hlavní zprávy se tak mohou v nadměrném obsahu ztrácet a tím pádem budou poskytovány v nejasném a smíšeném tvaru. Rozdíly mezi uživateli Při tvorbě webových stránek je třeba mít na paměti, že návštěvníci nejsou stejní a že každý je jedinečný, a proto není možné je všechny řadit do jedné skupiny. Webové stránky jsou většinou navrhovány tak, aby oslovily určitou skupinu uživatelů, ale i v rámci této skupiny budou stále existovat jisté rozdíly. Tyto rozdíly budou mít dopad na komunikaci webových stránek s uživatelem, protože ne každý návštěvník bude reagovat stejně nebo nemusí stejně porozumět sdělované zprávě. Návštěvníci se můžou lišit v mnoha směrech. Velkou roli hraje například demografie. Webové stránky mohou navštívit uživatelé z celého světa, avšak uživatel z jedné části světa se bude lišit od uživatele z jiné části světa, s čímž souvisí například jiná mentalita národa apod. Velkou roli zde bude hrát zcela jistě i věk a pohlaví uživatele. Mimo předešlých charakteristik se může návštěvník lišit také cílem, za jakým webové stránky navštívil. Může navštívit stránky za účelem nákupu nějakého produktu či jen za účelem vyhledání informací. S tím také souvisí způsob jeho vyhledávání. Kromě toho ne všichni návštěvníci mají stejnou úroveň znalostí o povaze daných stránek. Všechny tyto problémy spjaté s odlišností a jedinečností uživatelů mají vliv na komunikaci mezi návštěvníkem a webovou stránkou. Jasnost Jak již bylo řečeno, každý web komunikuje s návštěvníkem různými způsoby. Jednou z důležitých vlastností komunikace je také její jasnost a čistota. Když uživatel na-

3.2


28

vštíví nové webové stránky, je velmi pravděpodobné, že pokud mu nebudou hledané informace sděleny rychle, čistě a jasně, tak je opustí. Aby nedocházelo k tomuto jevu, je nutné, aby měl web dán jasný cíl a poslání a aby komunikoval prostřednictvím zpráv, kterým bude návštěvník schopen porozumět. Krátká, ale kompletní komunikace Vzhledem k požadavku na rychlou a čistou komunikaci je dobré, aby předávané zprávy byly pokud možno konzistentní, stručné a krátké. Stručná a jasná zpráva je pro on-line komunikaci obecně nejefektivnější. Je jasné, že se mohou vyskytnout také výjimky, kdy budou vyhledávány dlouhé a detailní informace požadované zejména pro kompletní popis nějakého jevu či objektu. Mohlo by se jednat například o detailní popis prodávaného produktu, jehož koupi bude uživatel zvažovat. Udržování krátkých a stručných zpráv je velkou výzvou pro tvorbu designu webových stránek. Pro komunikaci pomocí těchto zpráv jsou používány tzv. taglines, což jsou krátké varianty reklamních sloganů používané například ve filmech, reklamách a samozřejmě webových stránkách. Můžou mít také podobu krátkých otázek, které pomohou návštěvníkovi se se stránkou identifikovat a navodit v něm pocit, že by mohl mít z webu určitý prospěch. Jako příklad lze uvést stránky, které se zabývají řešením problémů spojených se spánkovou apnoe, což je vynechávání dechu trvající déle než 20 sekund. Na úvodní stránce jsou v horní části zobrazeny tři otázky, se kterými se návštěvník trpící syndromy nemocí může identifikovat: Chrápete? Vstáváte s bolestmi hlavy? Vstáváte s pocitem únavy? To mohou být příznaky spánkové apnoe. Osobitost Online komunikace pomocí webových stránek je odlišná od osobní komunikace tváří v tvář mezi dvěma lidmi. Při komunikaci online obdrží uživatel zprávy z webu a ne přímo od jiné osoby. Nicméně je pro takovouto komunikaci dobré, aby webové stránky vyjadřovaly nějakým způsobem osobnost majitele nebo společnosti, protože jsou jednou z jejich reprezentativních součástí. Upřednostňování designu nad obsahem Design a vzhled webové stránky by měl být použit pro strategické zvýraznění zprávy, kterou má uživatel obdržet. Může to však být taky významný prvek, který bude bránit kvalitní komunikaci. Prvořadý význam má obsah, zatímco vzhled stránek by měl sloužit ke zpříjemnění pobytu uživatele na webu a k jeho jednodušší zapamatovatelnosti a neměl by dostávat přednost před obsahem. To by pak mohlo vést k problémům v jejich použitelnosti

3.3

Co by mělo být uživateli sděleno

29

Získání důvěry návštěvníků V závislosti na typu nebo účelu webu může být důležitou součástí komunikace získání důvěry návštěvníků. Jako příklad lze uvést webové stránky zaměřené na prodej určitých produktů. Pokud budou stránky komunikovat se zákazníkem ve snaze přesvědčit jej, aby si něco koupil, je jeho přirozenou reakcí nedůvěra. Překonat nedůvěru lze například pomocí uvedením referencí spokojených klientů, kteří v minulosti využívali poskytovaných služeb. Získání a udržení pozornosti Dalším významným předpokladem pro efektivní komunikaci je udržení pozornosti uživatele. Získáním jeho pozornosti bude docíleno toho, že setrvá na stránkách a nebude se snažit (alespoň po určitou dobu) navštívit jiné stránky nebo dokonce ukončit prohlížeč. To také souvisí s některými již zmiňovanými problémy, jako jsou čisté a konzistentní zprávy a jasné a stručné poselství webu. Pokud návštěvník přijde na stránky a nebude schopen jednoduše porozumět jejich účelu nebo tomu, co mu mohou nabídnout, je téměř jisté, že je opustí a přejde na jiné.

3.3

Co by mělo být uživateli sděleno

Při tvorbě webových stránek by měl vývojář či designér vědět, na co se zaměřit v oblasti komunikace. Měl by hlavně vědět, co má být uživateli sděleno, což je klíčová úloha, kterou nelze přehlédnout. Řešení tohoto problému v rámci jedněch webových stránek se jistě bude lišit od jiných stránek, existuje však skupina základních společných pravidel. Cíl společnosti nebo webových stránek Jednou z nejdůležitějších zpráv webových stránek, která by měla být návštěvníkovi sdělena, je bezesporu její účel. Někteří uživatelé již pravděpodobně budou se stránkami nebo společností, která se jimi prezentuje, obeznámeni, ale těch nemusí být mnoho. Pokud přijde na webové stránky nový návštěvník, měl by být schopen rychle a přesně určit účel jejich existence a co mu mohou nabídnout. Díky tomu pak jednoduše pozná, zda se jedná o jeho střed zájmu. Pokud se však jedná o stránky, které nejsou schopny jasně sdělit svůj účel nebo poslání, vede to ve většině případů k flustraci uživatele a tím pádem není dosaženo jejich maximální efektivity. Co je nabízeno Kromě pochopení účelu webu by měli také návštěvníci být schopni poznat, co jim společnost nebo jejich webové stránky chtějí nabídnout. Komerční stránky zaměřené na prodej, by měly jasně sdělovat, jaké druhy produktů lze zakoupit, servisní

3.4

Efektivní komunikace

30

společnosti zase jasně uvádět, jaké služby mohou zákazníkům nabídnout. Obsahově bohaté stránky, jako jsou blogy, by měly návštěvníkovi říkat, jaký typ obsahu bude pro něj dostupný. Pouhý seznam nabízených služeb či produktů, které jsou k dispozici, však nemusí stačit. Mělo by být také uváděno, jak mohou tyto produkty a služby využívat a jaký užitek přinesou. Jaké akce může uživatel uskutečnit Pro efektivní komunikaci webových stránek je vedle nabízených služeb či produktů také důležité, aby uživateli bylo jasné, jaké akce bude moci uskutečnit a jakým způsobem toho dosáhne. Například komerční stránky by měly návštěvníkovi dát jednoduše najevo, jak zakoupit nabízené produkty. Servisní společnosti pak jakým způsobem může využít jejich služby. V tomto směru je dobré si odpovědět na otázky: ”Mohou si návštěvníci objednávat online? Měli by vyplnit kontaktní formulář, aby mohli být v kontaktu se společností? Měli by kontaktovat společnost po telefonu?”

3.4


V následujícím textu budou uvedeny způsoby, jakými by měly webové stránky komunikovat s návštěvníky a co by mělo být sděleno. Uvedeno bude několik příkladů, které mohou být použity v praxi při vývoji webových stránek, které budou účinně komunikovat s uživateli. Stanovení priorit zpráv Nejdůležitějším krokem k vytvoření webové stránky, která se bude vyznačovat jasnou komunikací, je stanovení priorit zpráv a přesně vědět, co by mělo být uživateli předáváno. Pokud nebude na stránkách jasně zachycen hlavní bod, myšlenka nebo zpráva, je pravděpodobné, že návštěvníci nebudou přesně schopni tyto zprávy pochopit. Většina webových stránek, zejména ty větší, mají ke sdělení více zpráv, které chtějí poskytovat od začátku do konce stránky. V takovém případě je důležité stanovit jejich priority tak, že je na důležitější zprávy kladen větší důraz. Informace o společnosti nebo webových stránkách, které by měli uživatelé vědět Každá společnost nebo webová stránka má něco, co by chtěla uživatelům sdělit a o čem by se měli dozvědět. Je proto velmi důležité, aby tyto informace byly návštěvníkovi předány a on je tak snadno a rychle identifikoval. Ve většině případů jsou webové stránky použity jako nástroj pro zviditelnění značky společnosti. Sdělované zprávy by tak v ideálním případě měly se značkou korespondovat a podporovat její poslání.

3.4


31

Jednoduchost Efektivní komunikace je o mnoho snazší, pokud jsou zprávy jednoduché a při jejich nadměrném počtu je lze snadno odstranit. Jakýmkoliv způsobem, který může zjednodušit komunikaci bez ztráty důležitých informací je dosaženo zjednodušení jak pro majitele webových stránek, tak i pro jejich uživatele a tím tak snadnější orientace a pochopení zpráv. V některých případech to bude znamenat redukci rozsahu komunikace mnoha různých prvků na menší počet a tím soustředit pozornost na důležitější aspekty. Snížením množstvím předávaných informací je dosaženo zvýšení vlivu jednotlivých zpráv. Určení cílové skupiny Protože návštěvníci webových stránek jsou většinou různorodí, je důležité při vývoji brát v potaz cílový trh a potencionální spotřebitele nabízeného produktu nebo služeb. Webové stránky by proto měly být navrženy tak, aby mohly komunikovat konkrétně s těmito cílovými uživateli. Při návrhu je možné samozřejmě počítat i s ostatní skupinou návštěvníků, ale prioritou by měla být právě cílová skupina. Tvorba zpráv, které nelze přehlédnout Nejúčinnějším způsobem, jak zajistit, aby návštěvníci dostali nejdůležitější zprávy, je tyto zprávy zviditelnit tak, aby je nebylo možné přehlédnout. To lze provést několika různými způsoby, jako je použití větší velikost, jinou barvu písma nebo jinou designovou techniku. Jako další techniky pro zvýraznění zprávy lze uvést například automatické spouštění videa, audia nebo vyskakovací okna, z nichž každá může mít své opodstatnění. Styl textu Zprávy mohou snadno vyniknout pomocí tučného, barevného nebo velkého písma. Takovéto zvýraznění zpráv naznačuje návštěvníkovi stránek, že je něco důležité a má větší prioritu. Samozřejmě, že čím více textu bude takto vyznačeno, tím menší vliv bude tato část mít. Například, pokud je stránka stylizována velmi základním způsobem, ve kterém je část textu zvýrazněna tučným písmem nebo s odlišným pozadím, bude se od ostatního textu výrazně odlišovat, což uživatele zaujme. Pokud je však na stránce použito tučného, velkého nebo barevného písma na mnoha různých místech, bude to mít za následek, že ve skutečnosti nic nevynikne, jelikož stránka bude postrádat uniformitu. Použití záhlaví a podzáhlaví Na stránkách, které se skládají z velkého množství textu, je dobré použít pro lepší identifikaci hlavních bodů záhlaví nebo podzáhlaví. Toto použití může být velmi

3.5

Výsledky dobré komunikace

32

efektivní, protože přispěje nejen k lepší čitelnosti textu, ale vytváří také vizuální členění stránky. V těchto místech je obvyklé používat tučné písmo větší velikosti než okolní text a jsou zde běžně uváděny hlavní body, jako jsou názvy sekcí nebo obsahu.

3.5

Výsledky dobré komunikace

Webové stránky, které jsou schopny dosáhnout efektivní komunikace s návštěvníky, přinášejí výhody v několika směrech, které budou uvedeny v následujícím textu. Porozumění účelu webových stránek Webové stránky, které efektivně komunikují, budou mít výhodu v tom, že návštěvníci snáze pochopí, k čemu jsou stránky určeny a zkušenosti z jejich prohlížení budou mnohem příjemnější a užitečnější. Vylepšení značky Dalším významným výsledkem efektivní komunikace je zlepšení značky společnosti nebo firmy. Pokud budou webové stránky efektivně komunikovat směrem k uživateli, zanechají v něm dobrý dojem a pomohou mu vytvořit si obrázek o společnosti. Značka společnosti hraje velkou roli v její prosperitě a webové stránky, na nichž se prezentují, jsou velmi účinnou reklamou. Menší flustrace návštěvníka Většina uživatelů má jistě nějakou nepříjemnou zkušenost se špatnou komunikací webové stránky. Tato neefektivita mohla být zapříčiněna nejasným účelem webu nebo si uživatelé nebyli jisti, jak najít to, co potřebovali. Stránky, které trpí špatnou komunikací, dokážou mnoho uživatelů určitým způsobem flustrovat, což má za následek odchod uživatele na jiné stránky. Zvýšení prodeje produktů společnosti Webové stránky mohou mít mnoho různých cílů. Čistá a efektivní komunikace pomáhá těchto cílů lépe dosahovat bez ohledu na jejich specifičnost. Ať jde o prodej produktů, propagační služby, blog, sociální sítě nebo o jednoduché poskytování informací, je komunikace zásadním stavebním prvkem úspěchu. Méně zbytečných dotazů Pokud návštěvníci nemohou na webových stránkách najít, co hledají, nebo si nejsou jisti, co je nabízeno, je pravděpodobné, že budou nějakým způsobem (nejspíš pomocí kontaktního formuláře nebo emailem) kontaktovat majitele stránek a žádat o radu.

3.6

Současné trendy webdesignu

33

Příjem dotazů není samozřejmě špatná věc. Pokud jsou však otázky pokládány opakovaně a majitel nebo správce již na ně někdy odpovídal, je jasné, že komunikace nefunguje efektivně. V tomto případě je dobré tyto odpovědi nějakým vhodným způsobem na stránkách zachytit. Webové stránky, které budou komunikovat efektivně, mohou těmto častým dotazům předejít a majitelé tak budou dostávat méně zbytečných dotazů, což ušetří čas k jejich vyřizování a návštěvníci si budou jisti, že našli to, co hledali, a nebudou muset žádat o pomoc.

3.6


Webdesign je velmi proměnlivý a v posledních několika letech prošel překvapivě rychlým vývojem. V současné době je k dispozici mnoho silných nástrojů sloužících pro tvorbu esteticky nebo funkčně rozmanitých webových prezentací. K dispozici je také velké množství volně dostupných hotových řešení a podpora velké komunity přispěvovatelů. mezi tyto nástroje lze zařadit nastupující standard HTML5 a CSS3 nebo JavaScriptovou knihovnu jQuery. Na internetu lze shlédnout stále více osobních, poutavých a zapamatovatelných webových prezentací. Jaké jsou nové směry webdesignu a jaké nové techniky, koncepty a myšlenky jsou dnes důležité, bude popsáno v následujícím textu. V roce 2011 se webdesign nezaměřuje tolik na krásu, ale na funkčnost. Díky velkému nástupu mobilních zařízení je také nutné počítat s návrhem pro chytré telefony, netbooky, tablety a podobně. Jacqueline Thomas uvádí webdesignové trendy, které jsou aktuální pro rok 2011. HTML5 a CSS3 I přestože ne všechny moderní webové prohlížeče mají implementovánu podporu pro HTML5 a CSS3, dochází v tomto roce k poměrně velkému rozmachu těchto technologií. Jelikož HTML5 má v sobě zabudovanou podporu přehrávání videa a další vylepšení a v kombinaci s jazykem JavaScript a jeho knihovnou jQuery lze vytvářet vysoce interaktivní aplikace, je možné předpokládat, že do jisté míry bude konkurovat technologii Flash od společnosti Adobe. Je však nutné si uvědomit, že HTML5 a Flash nejsou rovnoprávní soupeři. Předpokládá se, že v současném roce bude místa pro uplatnění obou technologií dost. V minulých letech bylo vytvářeno mnoho plně flashových webových stránek. HTML5 dokáže technologii Flash v určitých směrech zastoupit, nicméně však není schopno zcela nahradit mimořádné designové prvky, které lze pomocí Flashe vytvářet. Současně s nástupem HTML5 přišla nová verze kaskádových stylů CSS3. Tato technologie také není zcela podporována ve všech současných moderních prohlížečích. Lze však předpokládat stále větší zájem vývojářů o tuto technologii. Kaskádové styly CSS3 již dokáží elementy jazyka HTML stylovat takovým způsobem, že do jisté míry nahrazují práce v grafickém editoru.

3.6


34

Jednoduchá barevná schémata Jak již bylo uvedeno, jednoduchost je jedním z kritérií pro dobrou komunikaci webových stránek s uživatelem. V tomto roce budou trend udávat jednoduché barevné palety barev. Opouští se od používání černé a bílé barvy nebo odstínů šedé. Naopak se doporučuje omezit se na dvě nebo tři barvy a s nimi pracovat v rámci jejich odstínů. Mobilní zařízení V poslední době, kdy dochází k nárůstu uživatelů, kteří stále více používají mobilní zařízení jako jsou chytré telefony, tablety nebo netbooky je nutné přizpůsobovat design webových stránek i jim. I přes to, že většina nových mobilních zařízení dokáže zobrazit webové stránky stejně dobře jako webový prohlížeč, je vhodné stránky optimalizovat i pro starší zařízení, které tuto možnost nenabízí. Pokud nebudou webové stránky optimalizovány pro mobilní zařízení, nebudou podléhat současným požadavkům. Paralaxní skrolování Paralaxní skrolování je jedna z technik počítačové grafiky, která simuluje trojrozměrnou hloubku pohyblivého obrazu ve dvourozměrném. Tato technika má uplatnění například v animovaném filmu nebo v oblasti herního počítačového průmyslu. Paralaxní skrolování je založeno na zobrazování více vrstev, které je možno skrolovat nezávisle na sobě jak ve vertikálním, tak horizontálním směru. Vrstvy, které se pohybují rychleji, představují předměty blíže k uživateli, které jsou zpravidla vytvářeny pro interakci. Pomocí této techniky je dosaženo toho, že uživatel má pocit hloubky. Pro vytváření takovýchto animací je používáno triků jazyka CSS nebo pomocí pluginů jQuery, jako je například spritely1 . Tuto techniku je doporučováno používat v prvcích webdesignu, jako je například záhlaví, zápatí nebo pozadí. Projektování pro dotykové obrazovky V současné době se začínají stále více prosazovat dotykové technologie, které používají na rozdíl od myši či klávesnice dotyky prstů. Může se jednat o zařízení, jako jsou tablety, chytré telefony nebo i některé desktopové počítače. Drtivá většina webdesignerů přizpůsobuje své návrhy pro ovládání myší. Pokud se kurzorem myši pohybujeme například nad odkazem, je běžné, že nějakým způsobem změní svůj vzhled například pomocí podtržení nebo zvýraznění. Nicméně na dotykových zařízeních, které myš nepoužívají, vyvstává otázka, jakým způsobem uživatel rozpozná, zda se jedná o odkaz. Dalším problémem může být například vysouvací menu, které zobrazí skrytou nabídku až po najetí myši. Je proto nutné 1

http://www.spritely.net/

3.7

Frameworky pro webdesign

35

konstruovat tyto prvky tak, aby na dotykových obrazovkách bylo jasné, zda se jedná o funkční prvky. Je také na zvážení použití kapalného rozložení webové stránky, které se přizpůsobuje velikosti obrazovky. Lze předpokládat, že na mnoha dotykových zařízeních bude možnost měnit orientaci prohlížení ze svislé do vodorovné polohy. Velké grafické pozadí V roce 2011 se počítá s nárůstem stránek, které budou obsahovat velké grafické pozadí v podobě fotek nebo velkých obrázků. Velká a obsahově vhodná fotografie, která nebude kontextově narušovat uživatelský požitek, je rychlý způsob, jak zaujmout své publikum. Kódy Quick Response Quick response je zvláštní maticový tedy dvoudimenzionální čárový kód, jehož čitelnost v současné době podporuje mnoho mobilních zařízení, jako jsou například chytré mobilní telefony. Kód se skládá z černých modulů uspořádaných ve čtvercovém vzoru na bílém pozadí. Data, která jsou v kódu obsažena, mohou mít podobu URL odkazu. Tyto kódy, jak již název napovídá, slouží pro rychlou odezvu. Stačí jej přečíst například mobilním telefonem a ten pak sám může otevřít URL stránky asociované s tímto kódem. Jelikož dochází k masivnímu používání chytrých telefonů a jiných mobilních zařízení, je dobré kódy Quick Response umisťovat na stránky proto, aby uživatelé mohli mít k těmto stránkám rychlý a pohodlný přístup. Design s náhledy Jako velmi užitečnou vlastnost vyhledávače Google lze označit náhledy webových stránek, zobrazované po najetí myši nad ikonu lupy u jednotlivých výsledků vyhledávání. Tento princip usnadňuje prohledávání obsahů jednotlivých webů, kdy není nutné se každým záznamem proklikávat. Uživatel při zobrazení náhledu vidí náznak toho, co ho čeká na dané stránce po kliknutí na daný odkaz ve vyhledávači Google. Design s náhledy tak bude jedním s trendů roku 2011.

3.7


V současnosti je mnoho webových stránek navrhnuto s pomocí nějakého frameworku. Použitím frameworku v oblasti webdesignu je podstatně urychlena práce při návrhu a vývoji webových stránek. Je možné místo existujícího CSS rámce vytvořit vlastní komplexní rozložení webové stránky, avšak na to je nutné využít značné úsilí. Právě pro zjednodušení tvorby webdesignu a rozložení stránky byly vyvinuty frameworky. Použitím některého z frameworků lze dosáhnout hned několika výhod, jako je vizuální soudržnost mezi prvky stránky, jednotnost a konzistence v rozmístění

3.7


36

HTML elementů a s tím spojené snížení chyb při kódování kaskádových stylů, použití zlatého řezu, snížení budoucího úsilí při editaci designu a mnoho dalších. V současné době existuje celá řada těchto pracovních rámců webdesignu, jako je například Blueprint CSS Grid Framework, YAML, Grid Designer nebo 960 Grid System (Dash, 2008). V této práci budou použity některé prvky z níže popsaného frameworku 960 Grid System. 960 Grid System 960 Grid System je Framework sloužící pro návrh a tvorbu grafického designu webových stránek, který vytvořil Nathan Smith. Je založen na myšlence zlatého řezu. Zlatý řez je pokládán za ideální proporci mezi různými délkami a jeho poměr je iracionální číslo o hodnotě přibližně 1,618. Zlatý řez vzniká rozdělením úsečky na dvě části tím způsobem, že poměr větší části k menší je stejný jako poměr celé úsečky k větší části. Rozdělení designu pomocí zlatého řezu pak působí esteticky příznivým dojmem. Dále vychází z toho, že v současné době je nejvíce zastoupeno minimální rozlišení monitorů 1024 × 768 obrazových bodů a optimální šířka webové prezentace je pak 960 obrazových bodů. 960 je číslo, které je dělitelné 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 a 480. Z toho plyne, že při této šířce stránky je práce na webdesignu velmi flexibilní a kompaktní. V praxi pak doporučuje rozdělení stránky do dvanácti, šestnácti nebo dvacetičtyř stejně širokých sloupců s mezerami po dvaceti obrazových bodech. Šířka jednotlivých grafických prvků na stránce by pak měla být součtem těchto sloupců. Například při dvanácti sloupcovém rozložení bude mít šířka sloupce 60 obrazových bodů. Šířka jednotlivých grafických prvků by pak měla být 60, 120, 180 atd. až 960 obrazových bodů (Smith, 2011). Na webových stránkách2 tohoto frameworku je ke stažení balíček, který obsahuje již předpřipravené šablony do grafických editorů, jako jsou například Photoshop, Illustrator nebo Corel DRAW. Obsahuje také hotové šablony kaskádových stylů a HTML dokumentů. Dále jsou v balíčku obsaženy tisknutelné PDF soubory s naznačeným rozvržením stránky pro prvotní náčrtky rozložení stránky. Na těchto stránkách lze také nalézt kompletní dokumentaci a online generátor kaskádových stylů a HTML dokumentů.

2

http://960.gs/

4

POSTUPY PRO TVORBU WEBOVÉ APLIKACE

4

37

Postupy pro tvorbu webové aplikace

Aby se údržba webové aplikace nebo oprava jejích chyb nestala flustrující činností jak v průběhu vývoje, tak v budoucnu, je potřeba dodržovat při její tvorbě určité zásady a postupy. Dodržováním těchto postupů tvorby aplikací je možné vytvářet základní strukturu webových stránek, která bude škálovatelná od jediné stránky s několika řádky až po tisíce stránek s tisíci řádky kódu.

4.1

Definování cíle projektu

Většina vývojářů jistě tráví nejvíce času tvorbou prvků atraktivního uživatelského rozhraní a dobře vypadajících webových stránek a ne přepracováváním jádra zdrojového kódu, které bylo špatně architektonicky navrženo. Je tedy velmi důležité, aby zdrojový kód byl dobře udržovatelný. Bez smysluplné struktury a čitelnosti bude jeho údržba stále těžší. V následujícím textu bude uvedeno několik zásad, které se budou snažit programátorovi práci co nejvíce ulehčit. Při tvorbě a programování webové aplikace by měl vývojář brát v úvahu, jak ji bude koncový uživatel používat a jak ji budou moci další vývojáři měnit. Koncovým uživatelem aplikace nemusí být jen člověk, ale také vyhledávací roboti, RSS čtečky a další služby, které jsou schopny přečíst obsah webových stránek. Tito roboti obvykle sbírají data, odesílají a zpracovávají požadavky na služby vzdálených serverů. Častým příkladem takovýchto robotů jsou vyhledávací roboti internetových vyhledávačů. V současné době je pravděpodobné, že se v příštích letech tento automatizovaný systém bude stále rozšiřovat. Označením obsahu v aplikaci správným způsobem bude zajištěno, že celý systém bude srozumitelný, logický a souvislý, což pomůže vyhledávacím robotům i běžným uživatelům rychleji najít informace, které hledají. Aby bylo zajištěno, že ostatní vývojáři porozumí cizímu zdrojovému kódu, musí autor zvážit, jaké obvyklé úlohy souvisejí s údržbou stránek, které budou prováděny. mezi tyto úlohy lze zahrnout práce spojené s prováděním úprav stávajících stránek, přidávání nových stránek, opětovný návrh nebo úprava rozložení stránky. Tím, že bude autor předem přemýšlet o budoucích úlohách, si usnadní práci, protože nebude muset tolik přepisovat zdrojový kód a rozdělovat soubory (Odell, 2010). Den Odell uvádí sedm pravidel, které by měl vývojář dodržovat, aby si mohl být jistý, že dělá věci správně: • Vždy se řídit vyspělými a otevřenými webovými standardy s kvalitní podporou. • Mít na paměti rozdíly mezi implementacemi jazyků HTML, CSS a JavaScript v jednotlivých webových prohlížečích a umět se s nimi vypořádat. • Počítat s podporou jazyka HTML, ale tvořit webové stránky tak, aby byly použitelné i přes absenci dalších technologií webového prohlížeče (např. jazyka CSS, JavaScript nebo zásuvných modulů).

4.2

Uspořádání souborů a složek

38

• Složky pojmenovávat konzistentně a seskupovat soubory podle jejich účelu, struktury stránek a jazyka. • Pravidelně pročišťovat nadbytečný zdrojový kód, soubory a složky za účelem získání čistého a úhledného jádra zdrojového kódu. • Psaní efektivního zdrojového kódu. • Nepoužívat technologie bez zjevného důvodu.

4.2


Dobrým základem pro správu a budoucí rozšiřování obsahu a prostředků webové aplikace je jednoduchá a rozšiřitelná struktura složek a souborů. Takováto struktura může v budoucnu mnohonásobně ulehčit práci vývojářům při orientaci v souborech a složkách dané aplikace. 4.2.1

Pojmenování souborů a složek

Pro pojmenovávání souborů a složek by měla být používána malá písmena a pro přehlednost každé slovo oddělovat pomlčkou. Je doporučováno vyhýbat se znakům s diakritikou. Pokud je na soubory a složky odkazováno ve zdrojovém kódu, je třeba dbát na dodržování malých písmen, protože některé operační systémy, například Unix, Linux a Mac OS X rozlišují velikosti písmen. Také je třeba se vyhnout v názvech souborů či složek používání mezer a znaků vyhrazených pro adresy URL, včetně ampersandu, mřížky a otazníku, protože v některých webových prohlížečích se pomocí těchto znaků na takové soubory nelze odkázat. Jedním z požadavků, který se neustále vynořuje, je poskytnout koncovým uživatelům obsah, který bude lokalizovaný do jejich rodného jazyka. Tato lokalizace může být velice složitá, pokud začne být řešena až po dokončení webových stránek, protože by pravděpodobně vyžadovala přepsání některých souborů jazyka HTML, CSS a JavaScriptu. Tyto prostředky by měly být seskupovány podle jejich jazyka do vlastních složek pojmenovaných tímto jazykem (například cs pro češtinu). Jazykově nezávislé prostředky by měly být uloženy na stejnou úroveň, jako je struktura složek. 4.2.2

Uspořádání prostředků

Je na zvážení, zda neumístit všechny soubory prostředků (šablony stylů, obrázky, skripty, zvukové soubory a videosoubory), kromě souborů HTML, do společné složky. Tím bude dosaženo logického oddělení zdrojového kódu na straně klienta od struktury a obsahu webových stránek a nebude tak nepořádek v samotném kořenovém adresáři dokumentů. Následný příklad struktury složek se řídí tímto přístupem a zohledňuje také lokalizaci do cizích jazyků.

4.2


39

\prostredky \obrazky \cs - cs \en - en \de - de \skripty \treti-strany \styly \cs - cs \en - en \de - de \flash \dokumenty \cs - cs \en - en \de - de \video \cs - cs \en - en \de - de \audio \cs - cs \en - en \de - de Pravidla pro obrázky Obsahově související obrázky je vhodné pojmenovávat smysluplnými názvy, aby bylo snadné je vyhledat. Tyto názvy mohou odpovídat například mapě webových stránek nebo častěji jejich obsahu, případně jejich využití na stránce. Vhodné je také zvolit formát obrázku, který co nejvíce zmenšuje velikost souboru, ale zachovává nejlepší kvalitu. Komprese by měla být používána s rozvahou. Požadovaným výsledkem je obrázek, který je nerozeznatelný lidským okem od originálu ze vzdálenosti půl metru od obrazovky. Pravidla pro multimediální soubory V současné době je vhodné, aby prohlížeče zobrazovaly videosoubory pomocí zásuvného modulu Adobe Flash Player, pokud nemají vlastní kodek. Pokud uživatelé nemají daný modul v prohlížeči nainstalován, je doporučováno jim nabídnout odkaz na jeho stažení. Pokud však uživatel z nějakého důvodu nechce Adobe Flash Player používat, je vhodné mu daný videosoubor nabídnut ke stažení v jiném formátu.

4.3

Postupy pro značkování pomocí jazyka HTML

40

U zvukových souborů je doporučováno používat formát MP3, které lze také přehrát pomocí Adobe Flash Player. Uživatelé, kteří Adobe Flash Player nepoužívají nebo nevlastní, je dobré nabídnout tento soubor ke stažení.

4.3 4.3.1

Postupy pro značkování pomocí jazyka HTML Definice typu dokumentu

Jak již bylo řečeno, definice typu dokumentu popisuje strukturu dokumentu pomocí jednotlivých elementů, jejich atributů a taky jejich vzájemné uspořádání. Uvedením typu dokumentu ve webové stránce tedy zajistí, že jednotlivé programy, které ji budou analyzovat, budou vědět, o jaký typ dokumentu se jedná a jaká se na něj vztahují pravidla. Při psaní webových stránek je určitě žádoucí, aby tyto stránky přijaly všechny standardy, týkající se zdrojového kódu i softwaru, který jej interpretuje. Je nutné si však uvědomit, že začít používat nejnovější doporučení konsorcia W3C nemusí být vždy nejlepší tah. Je třeba vzít v úvahu, kolik současných oblíbených webových prohlížečů toto doporučení podporuje. V současné době (2011) měly následující definice DTD plnou podporu a jsou doporučované (Odell, 2010) : HTML 4.01 Strict – Jazyk HTML 4.01 je ustupující verze jazyka HTML 4, upřednostňující strukturu nad prezentací. HTML 4.01 Strict vylučuje použití prezentačních elementů a atributů, které souvisejí s rozvržením stránky. Toto rozvržení se předpokládá pomocí kaskádových stylů. Tato definice DTD zobrazuje dokument nejstriktnějším způsobem a zaručuje největší kompatibilitu (W3C, 1999). HTML 4.01 Transitional – HTML 4.01 Transitional je přechodným DTD, která obsahuje všechny elementy z verze HTML 4.01 Strict a navíc přidává prezentační atributy a zastaralé elementy. HTML 4.01 Transitional by mela být použita v případě, kdy je potřeba ke stránkám vložit starší zdrojový kód (W3C, 1999). HTML 4.01 Frameset – HTML 4.01 Frameset obsahuje všechny elementy a atributy verze 4.01 Transitional a přidává podporu rámců. Tato verze by neměla být používána, pokud použití rámců není nutné. (W3C, 1999). XHTML 1.0 Strict – Vylučuje použití prezentačních elementů a atributů, které souvisejí s rozvržením stránky. Toto rozvržení se předpokládá pomocí kaskádových stylů. Tato definice DTD zobrazuje dokument nejstriktnějším způsobem a zaručuje největší kompatibilitu (W3C, 1999). XHTML 1.0 Transitional – XHTML 1.0 Transitional je přechodným DTD, která obsahuje všechny elementy z verze XHTML 1.0 Strict a navíc přidává prezentační atributy a zastaralé elementy. XHTML 1.0 Transitional by mela být po-

4.3


41

užita v případě, kdy je potřeba ke stránkám vložit starší zdrojový kód (W3C, 1999). XHTML 1.0 Frameset – XHTML 1.0 Frameset obsahuje všechny elementy a atributy verze 1.0 Transitional a přidává podporu rámců. Tato verze by neměla být používána, pokud použití rámců není nutné. (W3C, 1999). Rozdíl mezi HTML a XHTML Jak již bylo uvedeno, jazyk XHTML je v podstatě jazyk HTML ve formátu XML. Jazyk XHTML je funkčně prakticky stejný jako HTML, protože obsahuje stejnou základní množinu značek. Každý dokument HTML nebo XHTML by měl obsahovat definici typu dokumentu (DTD), která určuje, zda se jedná právě o dokument HTML nebo XHTML. Definice DTD označuje standard jazyka HTML, který je použit pro obsah stránky, a popisuje jednotlivé elementy, jejich atributy, které mohou obsahovat a jak mohou být jednotlivé elementy navzájem uspořádány a vnořeny. Tato informace je důležitá pro programy, které mají analyzovat obsah stránky a tím pádem mohou předpokládat pravidla, která se na daný dokument vztahují. Pokud například prohlížeč narazí na dokument obsahující elementy jazyka XHTML, může předpokládat pravidla, že každý element je uzavřený, že elementy jsou správně vnořené atd. Rozdíly mezi jazykem HTML a XHTML jsou následující (w3schools, 2011): • XHTML elementy musejí být správně formátované. • Všechny XHTML elementy musejí být uzavřené. • Názvy XHTML elementů musejí být zapsány malými písmeny. • XHTML dokument musí mít jeden kořenový element. • Názvy všech atributů XHTML dokumentu musí být malými písmeny. • Hodnoty atributů v XHTML musejí být zapsány v uvozovkách. • Atributy nesmí být zkracovány. • XHTML má stanoveny povinné elementy. 4.3.2

Postupy značkování

Cílem vývojáře webových aplikací by mělo být psát konzistentní zdrojový kód, který je snadno čitelný pro ostatní vývojáře, a jehož výsledkem bude správně označkovaná webová stránka, která je přístupná koncovým uživatelům. V následujícím textu bude uvedeno několik pravidel, která by měla být při realizaci aplikace zohledněna.

4.3


42

Psaní uspořádaného a čistého zdrojového kódu Pomocí odsazení zdrojového kódu se zlepšuje jeho čitelnost. Díky tomu, že jsou části zdrojového kódu odsazeny podle příslušné skupiny nebo stupně zanoření, bude zdrojový kód čitelnější a pro ostatní vývojáře snáze pochopitelný. Pro odsazení by měly být místo mezer používány tabulátory. Odsazení pomocí tabulátorů usnadňuje údržbu, zlepšuje čitelnost a snižuje celkovou velikost stránky. Ve vývojových prostředích lze většinou nastavit tabulátory tak, aby odpovídaly určitému počtu mezer. Bloky zdrojového kódu, které jsou zanořeny uvnitř jiných elementů, by měly být odsazené a u každé úrovně zanoření by měl přibýt jeden tabulátor. *Oddělení prezentace, obsahu a chování Důležitým pravidlem při vytváření webové aplikace je oddělení obsahu dokumentu od kódu, který má na starost návrh a rozložení. Díky tomuto oddělení je možné snadno vyměňovat styly, aniž by bylo nutné měnit kód jazyka HTML. Tímto lze také dosáhnout změny rozvržení webových stránek, aniž by bylo nutné měnit jejich obsah. Je doporučováno vyhýbat se stylům přímo zapsaných v kódu jazyka HTML (pomocí atributu style), protože díky tomuto zápisu je komplikována údržba celého dokumentu. Do souborů se šablonami stylů by mělo být vkládáno vše, co se týká vzhledu a rozvržení a do dokumentu HTML vše, co se týká obsahu a nemělo by docházet k míchání těchto dvou věcí. Rovněž není vhodné do dokumentů HTML vkládat žádný kód jazyka JavaScript. Místo toho by mělo být v HTML dokumentu odkazováno na tyto soubory pomocí elementu link (v případě kaskádových stylů) a pomocí elementu script (v případě souborů s kódem JavaScript). Oddělení obrázků popředí od pozadí Ve webové prezentaci je důležité, aby byly odděleny obrázky, které se vztahují k obsahu, od těch, které jsou součástí designu. Obrázky vztahující se přímo k obsahu stránky, ilustrace, grafy, fotografie, atd., by měly být označovány elementem img. Na všechny ostatní obrázky včetně log a ikon společností by mělo být odkazováno v souborech s šablonou stylů jako na obrázky pozadí. Díky tomu bude možné rozlišit mezi rozvržením stránky a obsahem. Tam kde je použito elementu img je vhodné použít atribut alt k popisu obrázku pro uživatele, kteří si jej z nějakého důvodu nemohou prohlédnout. Nepoužívat rámce V současné době je obecně doporučováno vyhýbat se rámcům. Kvůli nim se obsah a rozvržení webových stránek špatně udržuje, nevyhovují zařízením s malými obrazovkami (mobilní telefony) a znepříjemňují navigaci v obsahu uživatelům, kteří nepoužívají myš jako primární typ vstupního zařízení. Řádkové elementy jako je element iframe by měl být používán s rozvahou, pokud je to nutné. Mohou zmást

4.3


43

koncové uživatele a schází jim základní přístupná povaha jednostránkového dokumentu HTML (Druska, 2006). Správné uspořádání obsahu Správné uspořádání obsahu je stejně tak důležité jako označit jej správnými elementy. Pokud bude stránka například čtena nahlas, nejdůležitější obsah musí být přečten první a nejméně důležitý obsah, jako je například copyright, jako poslední. Čtečky obrazovky předčítají obsah dokumentu přesně tak, jak je zapsán ve zdrojovém kódu. To znamená, že to, co je napsané první, přečtou jako první. Aby uživatelé čteček obrazovky získali smysluplné informace, měli by obsah elementu body být uspořádán následovně: • titulek stránky, • krátký seznam odkazů, které umožní čtenáři rychle přejít na určitou část dané stránky, • hlavní obsah elementu, • doprovodný obsah (postranní panel, související informace a odkazy), • hlavní navigace, • zápatí a copyright. Pomocí jazyka CSS je pak možné měnit rozvržení stránky tak, aby odpovídalo aktuálnímu designu. 4.3.3

Pravidla přístupnosti pro webový obsah

Konsorcium W3C definuje doporučení WCAG (Web Content Accessibility Guideline) pro přístupnost webové stránky. Tato pravidla stanovují tři úrovně přístupnosti webové stránky: A, AA, AAA, kde AAA je nejpřístupnější obsah. Tyto pravidla přístupnosti nespoléhají jen na technologii, ale také na kreativní design, copywriting a architekturu informací. Kompatibilita AAA je nejvyšší možnou a mělo by být usilováno o její dosažení. Kompatibilita AA je však většinou dostačující, pokud je vývojář tlačen časem nebo požadavky na design. V tomto dokumentu se například nedoporučuje spoléhat se na to, že jsou některé zásuvné moduly dostupné ve všech webových prohlížečích. Jelikož není součástí prohlížeče, nelze jeho přítomnost zaručit. Pokud tento zásuvný modul uživatel nemá, například Adobe Flash Player, měl by mu být poskytnut alternativní obsah nebo zajištěno, že uživatel bez tohoto modulu bude moci daný obsah získat jinou cestou. Jako další pravidlo lze uvést přidávání sémantických informací do elementů dokumentu HTML. V současné době existuje několik otevřených standardů, které přidávají další význam určitým blokům dokumentu HTML. Jedním takovým standardem jsou například mikroformáty. Jedná se o bloky dokumentu HTML, které

4.4

Postupy pro formátování CSS

44

reprezentují lidi, události, elementy, atd. Jsou čitelné lidmi i stroji a zaznamenávají více dat, než když jsou přiřazeny hodnoty určitým atributům. Jako příklad lze uvést mikroformát hCard sloužící k sémantickému zápisu vizitek ve formátu vCard, který se běžně používá pro výměnu vizitek mezi počítačovými programy. Těchto pravidel existuje celá řada a kompletní dokument je dostupný na stránkách W3C v sekci All Standards and Drafts pod odkazem Web Content Accessibility Guidelines (WCAG) 3 (W3C, 2008).

4.4

Postupy pro formátování CSS

Pro dosažení plně přístupných webových stránek a snadné údržby jejich zdrojového kódu je třeba řídit se osvědčenými postupy pro jazyk CSS. Některé vybrané postupy jsou popsány dále v textu. 4.4.1

Přenastavení výchozího stylu prohlížeče

Každý webový prohlížeč standardně obsahuje sadu výchozích pravidel, která se aplikují na stránku bez vlastních pravidel. Tato pravidla definují písmo, jeho velikost, výšku řádku, barvu, vnitřní a vnější okraj pro různé elementy jazyka HTML. Aby se předešlo rozdílům, které plynou z různých definic pravidel v různých prohlížečích, je doporučováno resetovat tato výchozí pravidla prohlížeče. Díky tomu lze získat lepší kontrolu nad každým elementem v šablonách stylů a také lepší konzistenci mezi různými prohlížeči (Meyer, 2011). 4.4.2

Kaskádové chování a specifičnost

U šablon stylů se lze setkat se dvěma důležitými termíny - kaskádové chování a specifičnost. Kaskádové chování označuje způsob, kterým jsou aplikovány styly aditivně. Specifičnost pak definuje úrovně, na kterých je příslušný styl aplikován na danou stránku. Nevhodnějším způsobem, jak psát pravidla, je začít obecnými pravidly a zvyšovat jejich specifičnost, jak bude pokračováno ve vývoji. Obvykle čím jsou pravidla obecnější, tím efektivnější může být šablona stylů. Je doporučováno vyhýbat se příliš specifickým selektorům. Není nutné uvádět každý element, identifikátor a třídu, kterými je označen příslušný element. Je třeba psát pravidla stručně a jednoduše. 4.4.3

Přiřazení více tříd jednomu elementu

Pokud je definován nový element, který včetně nových pravidel obsahuje také totožná pravidla jiné třídy, je možné tuto třídu novému elementu přiřadit. Tím bude dosaženo toho, že nebude třeba duplikovat pravidla ze třídy, která obsahuje tyto 3

http://www.w3.org/TR/WCAG20/

4.5

Optimalizace výkonu

45

stejná pravidla. Přiřazování více tříd danému elementu je realizováno klasickým přiřazením tříd do atributu class oddělených mezerou. Pravidla se pak budou provádět zleva doprava, podle pořadí zapsaných tříd. 4.4.4

Používání relativní velikosti písma

Pokud někteří návštěvníci webových stránek špatně vidí nebo mají velké rozlišení obrazovky, mohou pravděpodobně chtít zvětšit velikost písma v prohlížeči. Všechny hlavní prohlížeče tuto funkci obsahují. Aby byla změna velikosti písma umožněna, měly by se v šablonách stylů používat relativní jednotky. Když se zvětší velikost písma v prohlížeči, mělo by adekvátně dojít i ke zvětšení velikosti písma na dané stránce. Jednou z relativních jednotek je jednotka em, protože je vyjádřena v procentech. V šablonách stylů by se rozhodně neměli používat velikosti písmen s absolutními jednotkami jako je pixel (px) nebo bod (pt), protože ty se nepřizpůsobují nastavení velikosti písma webového prohlížeče. Výpočty s relativními velikostmi písma jsou usnadněny tak, že výchozí velikost písma elementu body bude nastavena na 62.5 %. Ve výchozím nastavení pak bude hodnota 1em odpovídat velikosti 10px. Každé zvýšení této hodnoty bude srovnatelné se zvýšením o 1px, proto 1.1em bude ekvivalentní s 11px atd. (Schaeffer, 2011). 4.4.5

Zkracování pravidel

Určité definice vlastností lze kombinovat a zkrátit. Zkrácené verze by měli být používány všude, kde je to možné, protože tím je snižována velikost souborů s šablonami stylů a také objem dat přenášených z webového serveru do prohlížeče. mezi tyto vlastnosti patří například margin a padding. Používání zkrácených hodnot se věnuje také část optimalizace výkonu, konkrétně část optimalizace šablon stylů.

4.5


Webový prohlížeč je nástroj pro stahování, zobrazování a spouštění webových aplikací koncovým uživatelům. Má vlastnost, že může jednoduchý zdrojový kód zobrazit jako elegantní článek z časopisu nebo jako čistý text bez obrázků a pokročilých funkcí. U webového prohlížeče je důležité rozlišovat mezi uživatelským rozhraním a funkcemi v jeho pozadí. Jeho uživatelské rozhraní nemusí říkat nic o jeho vnitřních funkcích, které mají vliv na jeho dovednosti a výkon. Tyto schopnosti nebo funkce jsou označovány jako subsystém prohlížeče. Tyto subsystémy se ve většině prohlížečů skládají ze dvou hlavních subsystémů. Jedním je vykreslovací subsystém neboli subsystém pro layout, který převádí kód jazyka HTML a CSS na stránku viditelnou na obrazovce. Druhá je subsystém JavaScriptu, který interpretuje kód jazya JavaScript do podoby, které rozumí webový prohlížeč. Protože stále vznikají větší a složitější RIA aplikace, subsystémy webových prohlížečů je musí umět interpretovat na něco, s čím mohou uživatelé pracovat. Vývojáři

4.5


46

subsystému pro Javascript budou jistě motivováni tím, aby mohli říci, že jejich prohlížeč je rychlejší a efektivnější než ostatní prohlížeče na trhu. Skutečným cílem těchto vývojářů je zajistit, aby byl uživatelský požitek z RIA aplikací srovnatelný s desktopovými aplikacemi. Lze s nadsázkou říci, že se prohlížeče stávají novými operačními systémy. Zápory webových prohlížečů, jako jsou například dlouhé doby nahrávání, zamrznutí webového prohlížeče a pomalé odezvy na uživatelské akce, se pomalu stávají minulostí. Jelikož se subsystémy pro vykreslování a pro JavaScript liší, je jasné, že jádra různých webových prohlížečů mají různý výkon. Typicky se v nové verzi prohlížeče vylepšuje efektivita jádra, protože se výrobce snaží změnit zdrojový kód tak, aby jádro zefektivnil. Díky tomu je výkon nových verzí webových prohlížečů až několikrát lepší, než tomu bylo u starších verzí. Obecně lze říci, že čím starší verzi prohlížeče uživatel používá, tím méně bude spokojen s jeho rychlostí zobrazení a zpracování. V současném světě dochází ke stále se navyšující rychlosti síťové komunikaci, širokopásmých a optických připojení a stále k většímu výkonu osobních počítačů. Je proto možné si položit otázku, jestli je vůbec nutné být v tomto směru efektivní. Je možné předpokládat, že pokud bude zvýšena rychlost uživatelova připojení o dvojnásobek, že se stejné stránky zobrazí dvakrát rychleji. Přestože k jistému nárůstu výkonu dojde, ne vždy bude úměrný nárůstu rychlosti připojení. Dvojnásobná rychlost připojení nesníží dobu mezi odesíláním požadavku a přijetím odpovědi na polovinu. Pokud vývojář programuje RIA aplikace založené na tomto předpokladu, nebere na zřetel celosvětový stav komunikace a pravděpodobně opomíjí některé uživatele (Odell, 2010). Podle Dena Odella chce mnoho uživatelů věřit, že webové prohlížeče nahrávají stránku tak efektivně, jak jen to jde, a zobrazují stránku okamžitě, jakmile přijmou kousek dat. V praxi to však nemusí být vždy pravda. Jako příčiny neefektivního nahrávání stránek uvádí několik důvodů popsaných níže. Rychlost uploadu Většina uživatelů připojených k internetu vlastní asymetrické připojení, což znamená, že data se obvykle stahují rychleji, než nahrávají, neboli uploadují, a tudíž rychlosti pro tyto směry komunikace nejsou stejné. Celková šířka pásma je tedy úměrná rychlosti jakou uživatelé data přijímají a odesílají. Při požadavku na webovou stránku musí každý prohlížeč pro každý externí soubor (obrázek, šablonu stylů, souboru JavaScriptu) vytvořit novou zprávu s požadavkem protokolu HTTP a odeslat ji na server a teprve poté jej může stáhnout. Pokud stránka obsahuje velké množství externích souborů, bez ohledu na jejich velikost, je možné dosáhnout i limitu připojení pro odesílání dat a zprávy s požadavky se budou posílat postupně. V současné době, kdy se rychlost připojení neustále zrychluje, získává tento problém stále menší váhu. Je však ale doporučováno, aby nebylo zapomínáno na uživatele s pomalým připojením, které se může vyskytovat například u mobilních zařízení.

4.5


47

Omezení počtu souběžných spojení Mnoho webových prohlížečů je omezeno počtem souběžných spojení, která lze se serverem v daný okamžik navázat. Moderní a složitá RIA aplikace, která obsahuje stránku se složitým designem, může odkazovat třeba až na 50 externích souborů, potřebné pro své zobrazení. Omezením počtu souběžných spojení tak může dojít i k omezení rychlosti, s jakou bude stránka stažena a zobrazena uživateli. Protokol HTTP 1.1 doporučuje omezit souběžné stahování na dva soubory. Prohlížeče Opera a Safari zvýšili toto omezení na čtyři soubory. Internet Explorer 8 umožňuje stahování až osmi souborů najednou. Tyto limity mají samozřejmě dopad na výkon webového prohlížeče. Volba formátu obrázků Ve webovém prostředí je nejvíce zastoupeno používání obrázků ve formátech GIF, JPEG a PNG. Tyto formáty se od sebe výrazně odlišují například počtem zobrazovaných barev nebo kompresí. Pokud bude například zvolena špatná komprese obrázku nebo celý formát, mohou být obrázky zbytečně velké. Jelikož většina webových stránek obsahuje mnoho obrázků, je volba správného typu obrázku hlavním cílem. Nadbytečný obsah Čím větší je obsah zdrojového souboru, tím déle musí uživatel čekat, než ho webový prohlížeč stáhne. Při psaní HTML kódu je vhodné se ujistit, zda není odkazováno na zbytečné šablony stylů či soubory s kódem JavaScriptu nebo nevkládáno příliš mnoho velkých komentářů. Vkládání zbytečných dat způsobí, že prohlížeč bude nucen stahovat informace, které nikdy nepoužije, čímž se zbytečně zvyšuje doba nezbytná k zobrazení kompletní stránky. Nastavení mezipaměti Někteří vývojáři ve svých prohlížečích zakazují používání mezipaměti, aby mohli vždy testovat poslední verze svých souborů. Většina koncových uživatelů však má výchozí nastavení mezipaměti, což znamená, že hlavičky odpovědí rozhodují o tom, co se má uložit a na jak dlouho. Pokud server posílá jen obsah, který se od posledního požadavku změnil, přenáší se do prohlížeče menší množství dat a koncovému uživateli se tak stránka zobrazí dříve a nemusí čekat tak dlouho. Nekomprimované textové soubory a přebytečné bílé znaky Při psaní HTML jsou pro lepší čitelnost důležité bílé znaky, jako jsou tabulátory, zalamování řádků, mezery a komentáře. Každý takovýto znak však představuje data, která musí prohlížeč stáhnout, aniž by je potřeboval k zobrazení stránky. Pokud by

4.5


48

však byla tato přebytečná data odstraněna, soubory budou menší a rychleji se tak stáhnou. Většina webových prohlížečů podporuje kompresní algoritmy, jako jsou gzip a deflate, které zmenšují velikost dat a odstraňují zbytečné znaky. Data se komprimují před přenosem sítí a dekomprimují po přijetí webovým prohlížečem. Soubory, které jsou bez komprese, jsou větší a negativně ovlivňují dobu stahování stránky. 4.5.1

Ladění webového serveru pro zlepšení výkonu

Používání sítě pro doručování obsahu Čím větší vzdálenost musí data překonat při přenosu po internetové síti mezi vzdáleným servery a klientským počítačem, tím více serverů a směrovačů musí navštívit. Každá takováto zastávka může dobu přenosu prodloužit. Kvalita spojení mezi těmito body rovněž ovlivňuje dobu mezi odesláním požadavku z prohlížeče a přijetím odpovědi od webového serveru. Rozdíly v rychlostech znamenají, že uživatelé, kteří přistupují k webové aplikaci z různých míst, neobdrží tato data stejně rychle. Pokud se budou připojovat uživatelé na webový server, který je umístěn na jiném kontinentu, bude tato doba jistě delší než v případě uživatele ze stejné země. Některé společnosti, které mají své servery rozmístěny na všech kontinentech, nabízejí možnost nahrání zdrojového kódu na všechny tyto servery. Tím lze docílit snížení vzdálenosti mezi webovým serverem a webovým prohlížečem a tím tak výrazně vylepšit dobu odpovědi. Tato síť lokálních serverů je označována jako síť pro doručování obsahu neboli Content Delivery Network - CDN. Hostováním souborů na těchto sítích jsou soubory fyzicky blíže ke koncovému uživateli, čímž narůstá výkon aplikace. Tento přístup má v oblibě společnost Google, což je poznat na výkonu jejich aplikací. Společnost Google nabízí uživatelům několik možností pro osobní použití a dovoluje jim nahrávat některé soubory na svou síť. Komponenty stránky je možné uložit na server pro ukládání widgetů s názvem iGoogle4 a některé knihovny jazyka JavaScript jsou k dispozici prostřednictvím služby Google AJAX API (Miller, 2008). 4.5.2

Optimalizace kódu HTML pro výkon

Nejlepšího vylepšení výkonu na straně klienta neboli na straně webového prohlížeče lze dosáhnout pomocí optimalizace kódu. Přes HTML stránku stahuje webový prohlížeč všechny ostatní prostředky. Tato stránka obsahuje všechny odkazy na externí soubory s další funkčností. Je tedy zřejmé, že čím rychleji bude prohlížeč schopen stránku stáhnout, tím dříve bude moci začít stahovat další prostředky. Kromě toho lze upravit kód HTML pro některé prohlížeče tak, že se stránka načte ještě rychleji. 4

http://www.google.com/ig/

4.5


49

Zmenšení velikosti souborů HTML pomocí nástroje HTML Tidy Když webový prohlížeč čte HTML soubor, analyzuje jednotlivé elementy a ukládá je do interních objektů, na které jsou pak aplikovány šablony stylů. Tato analýza se ale věnuje pouze samotným elementům a ignoruje formátovací mezery a tabulátory, které nejsou součástí samotných elementů. Každý tento bílý znak má velikost jednoho bajtu. Pokud bude existovat velký HTML soubor, je možné, že prohlížeč bude ignorovat až čtvrtinu jeho velikosti. Pokud budou tyto zbytečné znaky odstraněny, dojde ke zmenšení velikosti souboru a do prohlížeče se tak nahraje rychleji (Raggett, 2004). Při odstraňování bílých znaků je dobré na webové servery nahrávat pouze verze souborů, kde byly tyto znaky odstraněny. Pracovní verze souborů je vhodné ponechat v původní verzi i s bílými znaky, aby následně nedošlo k obtížné údržbě. Jedním z nástrojů, který automaticky odstraňuje přebytečné bílé znaky a komentáře, je HTML Tidy. Naprogramoval jej David Raggett z konzorcia W3C, ale v současné době je v údržbě open source komunitou a je volně ke stažení5 . Odkazy na soubory jazyka JavaScript na konci dokumentu HTML V mnoha případech se lze setkat, že na externí soubory s kódem jazyka JavaScript je v HTML dokumentu odkazováno v elementu head. Efektivitu stránek lze však vylepšit tak, že na tyto soubory bude odkazováno na konci dokumentu, těsně před koncovou značkou . Za běžných podmínek prohlížeč stahuje současně několik souborů, jako jsou šablony stylů nebo obrázky. To však neplatí, pokud prohlížeč narazí na připojené externí soubory JavaScriptu. V tomto případě dochází k zablokování veškerého stahování jiných komponent stránky, dokud nejsou nahrány a spuštěny všechny skripty jazyka JavaScript. Pokud jsou všechny skripty umístěny do externích souborů, je také využíváno toho, že si je prohlížeč uloží do mezipaměti a nemusí je opětovně stahovat. Pokud je na soubory odkazováno v elementu head dokumentu HTML, prohlížeč pozastaví stahování a zobrazování ostatních částí stránky a místo toho bude načítat a provádět tyto skripty. Jelikož bude webový prohlížeč nejprve analyzovat obsah elementu head a až potom přejde k elementu body, zobrazení stránky se tak zpomalí. Je samozřejmé, že čím budou skripty větší, tím déle se budou stahovat a uživatel tak déle čekat. Tím, že budou odkazy na tyto externí skripty umístěny na konec dokumentu HTML, těsně před značku , bude zamezeno blokování stahování a zobrazení zbytku stránky, a tím tak bude vylepšena efektivita pro koncového uživatele. 5

http://tidy.sourceforge.net/

4.5


50

Snížení počtu elementů v dokumentu HTML Počet elementů v dokumentu HTML ovlivňuje velikost výsledného souboru a tím pak délku stahování do webového prohlížeče. Větší problém však představují skripty jazyka JavaScript a šablony stylů, které se na stránku aplikují. Úroveň zanoření elementů rovněž snižuje výkon. Čím je hloubka zanoření elementů větší, tím je vynakládáno větší úsilí vykreslovacího subsystému na analýzu celé struktury. Čím bude tedy zanoření elementů větší, tím menší bude efektivita. Každý element HTML dokumentu je v jazyce JavaScript reprezentován pomocí modelu DOM. Prohlížeč tyto objekty modelu DOM vytváří z elementů na stránce a skládá je do hierarchické struktury, která odpovídá struktuře dokumentu HTML. Čím složitější bude struktura a čím více elementů bude obsahovat, tím déle bude trvat přístup k těmto elementům v jazyce JavaScript. Při psaní struktury HTML dokumentu je vhodné zvažovat použití každého elementu a zda daný element je v dané situaci skutečně potřeba. Pokud bude element zaváděn jen kvůli designu, mělo by tak být učiněno pomocí kaskádových stylů. Pokud však budou vytvářeny prázdné elementy, které budou později naplněny pomocí JavaScriptu, je dobré zvážit, zda nebude lepší jej vytvořit raději přímo JavaScriptem a vložit do stránky pomocí modelu DOM. Odkazy na neexistující soubory Pokud prohlížeč stahuje stránku, která obsahuje odkazy na neexistující soubory, tak server vrací chybu 404 protokolu HTTP, což značí, že soubor na serveru není. Ve většině případů se může jednat o obrázky pozadí z šablon stylů, kde byl samotný soubor odstraněn, avšak odkaz na něj ne. K takovým případům může docházet v průběhu vývoje webu. Na rozdíl od obrázků na popředí si obrázků na pozadí může málokdo všimnout a často nechtěně zůstanou odkazy na ně v šablonách stylů. Webový prohlížeč tak stále tyto odstraněné obrázky požaduje a server na ně reaguje chybou 404. Jestliže stránka odkazuje na neexistující soubor a server namísto požadovaného souboru vrátí chybovou stránku, prohlížeč pozastaví analýzu stránky a bude čekat, než se stáhne chybová stránka. To zhoršuje výsledek odkazů na neexistující soubory. Jelikož webový prohlížeč umí žádat jen o omezené množství souborů současně, je plýtvání tímto omezením s požadavky bez smysluplné odpovědi velmi neefektivní a snižuje to výkon webové aplikace. 4.5.3

Optimalizace šablon stylů pro výkon

V předchozím textu byly popsány způsoby, které vedou k optimalizaci HTML dokumentu pro výkon. V následujícím textu budou uvedeny techniky, které jsou spojeny s obsahem šablon stylů a její optimalizace do efektivnější podoby.

4.5


51

Zmenšení souboru jazyka CSS pomocí nástroje CSSTidy Jak již bylo zmíněno, bílé znaky mohou zvětšit velikost souborů a jsou užitečné pro programátory, ale nikoliv pro uživatele. Nástroj CSSTidy6 stejně jako HTML Tidy odstraňuje ve zdrojových souborech bílé znaky, které nejsou pro prezentaci potřeba. Dále optimalizuje pravidla a odstraňuje komentáře, které ocení pouze programátoři a nikoliv běžní uživatelé. Stejně jako u HTML souborů je dobré vytvářet si kopie s bílými znaky pro další případnou editaci a na server nahrávat již optimalizované verze. Nepoužívat příkaz @import V souboru HTML lze odkazovat na externí šablonu stylů dvěma způsoby. Jedním způsobem je použití elementu link nebo direktivou @import uvnitř šablony stylů či elementu style. Některé verze webového prohlížeče Internet Explorer při použití této metody čekají, až se načte celá stránka a až poté začnou zkoumat externí odkazy z direktivy @import. Místo tohoto zápisu je lepší použít pro připojení šablon stylů element link. Používání zkrácených hodnot Jazyk CSS obsahuje mnoho podobných vlastností pro rozvržení elementů a typografickou podobu textů v těchto elementech. Za určitých podmínek lze kombinovat více definic vlastností do jedné a tím tak zmenšit výslednou velikost a dobu stahování css souboru, aniž by byla narušena jeho udržovatelnost a škálovatelnost. Mezi tyto vlastnosti lze zařadit margin, padding, border, background, color, list-style a další. Použitím zkrácených hodnot se myslí zapsání menšího počtu hodnot a vlastností. Například pokud by se definoval vnější okraj pomocí vlastnosti margin, lze jej zapsat čtyřmi dílčími vlastnostmi, jako je například margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;. Zkrácena hodnota by pak znamenala zápis margin: 10px 20px 30px 40px;. Pokud by měl mít každý okraj stejnou velikost, pak by stačilo napsat pouze margin: 10px;. V případě že by horní a dolní okraj měli mít 10 pixelů a pravý a levý 20 pixelů, bylo by možné vlastnost zapsat způsobem margin: 10px 20px;. Dalším příkladem může být zápis barev v šestnáctkové soustavě. Pro definování černé barvy v šestnáctkové soustavě by mohla sloužit vlastnost color: #000000;. Zkrácený zápis by bylo možné zapsat stručněji jako color: #000 (Diaz, 2005). Používání techniky CSS spritů Pro snížení počtu a velikosti obrázkových souborů ve webových aplikacích může sloužit technika CSS spritů. Touto technikou dojde ke snížení počtu a velikosti po6

http://csstidy.sourceforge.net/

4.5


52

žadavků protokolu HTTP a často i ke snížení počtu pravidel nutných k prezentaci obrázků na stránce. Technika CSS spritů je založena na spojování souvisejících obrázků do jediného souboru. Tato technika se inspirovala grafikou ze starých počítačových her a později se objevila i v operačních systémech u ikon uložených v jednom souboru. Techniku CSS spritů lze uvést na následujícím příkladu, kdy budou ve webové aplikaci používána čtyři tlačítka pro ovládání multimediálních souborů - Přehrát, Přetočit vpřed, Přetočit zpět a Zastavit. V šabloně stylů se lze na tyto tlačítka odkazovat pomocí čtyř tříd .play, .rewind, .forward a .stop, které budou mít definovanou velikost vlastnostmi width a height po 20 pixelech. Každé této třídě pak lze zvlášť přiřadit vlastností background-image jeden z obrázků, který danou akci vystihuje. Tyto čtyři obrázky lze však uspořádat vedle sebe do jednoho souboru v některém z grafických editorů. Pokud budeme předpokládat, že každé tlačítko bude čtvercové a rozměr jeho strany bude 20 pixelů, potom je možné tyto tlačítka uspořádat do čtverce tak, že vznikne čtverec o stranách 40 pixelů a bude obsahovat tyto čtyři tlačítka. Na jednotlivá tlačítka lze pak v šabloně stylů odkazovat tímto souborem s tím rozdílem, že bude docházet k posouvání pozadí. Každému tlačítku bude tedy přiřazena vlastnost background-position, která definuje polohu daného pozadí elementu. Pokud bude ikona Přetočit zpět v prvním řádku na druhé pozici v obrázku, pak vlastností background-position: -100 0; lze odpovídající třídě .rewind nastavit danou ikonu. Protože jeden sloučený obrázek je většinou menší než několik samostatných obrázků a nepotřebuje tolik HTTP požadavků, lze pozorovat znatelný nárůst výkonu. Se snížením počtu požadavků protokolu HTTP odpadá větší závislost na rychlosti připojení k serveru a omezení souběžných spojení v prohlížeči. Způsob spojování obrázků však má také vliv na výkon. Proto by měli být obrázky spojovány co nejlepším možným způsobem. Mělo by se dbát na používání efektivních mezer mezi jednotlivými obrázky a vyvarování se jednoho obrovského souboru se sprity, který bude mít velkou velikost (Lennartz, 2009). 4.5.4

Optimalizace obrázků pro výkon

Obrázkové soubory tvoří převážnou část všech dat požadovaných od serveru. Složitější design a rozvržení často vyžadují složité obrázkové prostředky, které mají za následek větší velikosti souborů s obrázky a pomalejšího stahování. Třemi nejpoužívanějšími typy obrázkových souboru v prostředí webu jsou GIF (Graphics Interchange Format), JPEG (Point Photographic Experts Group) a PNG (Portable Network Graphics). Většina vývojářů má stále více v oblibě formát PNG a jeho podpora se neustále zlepšuje, a to z mnoha důvodů, které plynou z jeho výhod. Výhody a nevýhody jednotlivých formátu jsou popsány v následujícím textu.

4.5


53

Formát GIF Formát GIF byl vydán v roce 1987 společností ComputerServe. Na webu se stal velmi oblíbeným zejména proto, že produkuje soubory o malých velikostech a jdou v něm provádět i jednoduché animace. Velikost souboru GIF je malá, protože barevná hloubka je pouze osm bitů, z čehož plyne, že může zachytit jen 256 různých barev. Tato paleta však není pevně dána a lze si vybrat z celého rozsahu několika milionů barev. Pokud obrázek má méně jako 256 barev, ukládají se do souboru jen barvy daného obrázku, což vede ke snížení velkosti uložených dat. Malá velikost výsledného souboru je také způsobena komprimací LZW. Jedná se o bezztrátový typ komprese, který neodstraňuje žádná data, ale reprezentuje je efektivněji. Tento formát je velmi efektivní pro uložení malých ikon, typicky do velikosti stran čtverce 16 pixelů a pro jednoduché malby nebo čárovou grafiku. Jelikož mají omezenou barevnou paletu, nejsou vhodné pro větší a složitější obrázky. Při ukládání souboru ve formátu GIF, lze zvolit jednu z barev v paletě jako průhlednou. Při zobrazení takového souboru prohlížečem není tato barva vidět a místo ní je vidět obsah stránky pod daným obrázkem, čímž je dosaženo průhlednosti. Tato technika nefunguje dobře u přechodů a vržených stínů, protože neumí reprezentovat různě stupně průhlednosti (daná barva je buď průhledná nebo ne) (Arandilla, 2011). Jak již bylo zmíněno, formát GIF umožňuje také tvorbu jednoduchých animací. Dokáže uložit několik obrázkových snímků do jednoho souboru a o každém snímku ukládá informaci, kdy a jak dlouho se má zobrazit. V RIA aplikacích se s takovými animacemi lze nejčastěji setkat u ukazatelů průběhu nahrávání. Je to jediný formát pro animace, podporovaný ve všech webových prohlížečích. Lze jím do jisté míry nahradit animace ve Flashi od společnosti Adobe. Formát JPEG Formát JPEG nebo také JPG je vhodný pro ukládání fotografií a velmi složitých obrázků. Vznikl v roce 1986 jako vhodný formát pro kompresi těchto typů obrázků a postupně se vylepšoval a v roce 1994 se z něj stal mezinárodní standard. Formát je otevřený a nikdy nebyl patentován. Tento formát má výhody zejména u složitých obrázků, kde není příliš velký kontrast mezi sousedními pixely, proto není vhodný například pro čárovou grafiku. Na rozdíl od formátu GIF je JPEG formát ztrátový, z čehož plyne, že data se při kompresi odstraňují a nemohou být obnovena. Komprese je dosahováno odstraňováním detailů, které nejsou běžně postřehnutelné lidským okem. Oproti formátu GIF nabízí 24bitouvou barevnou hloubku, což je více než 16 milionů barev. Nepodporuje však transparentrnost a animace (Arandilla, 2011). Při ukládání souboru ve formátu JPEG většinou grafický editor nabízí volbu úrovně komprese finálního souboru. Čím větší bude úroveň komprese, tím menší bude výsledný soubor. Při velkých úrovních komprese však vznikají v obrázku rušivé artefakty.

4.5


54

Formát PNG Formát PNG byl vyvíjen s úmyslem, aby vylepšil formát GIF a současně zůstal otevřený a bez patentu. I přesto, že je nejnovější z předešlých formátů podporován všemi moderními prohlížeči. Formát PNG umí ukládat obrázky s 24bitovou paletou barev, což je více jako 16 milionů barev a také podporuje alfa kanálové vrstvy s průhledností. To znamená, že dokáže na rozdíl od formátu GIF nastavovat různé úrovně průhlednosti různým částem obrázku. Formát PNG je na rozdíl od formátu JPEG bezztrátový, z čehož plyne, že všechna data z původního obrázku zůstanou zachována v novém souboru a po kompresi je lze kdykoliv získat zpět. U formátu PNG je používána komprese deflate, která je podobná kompresi používané u formátu GIF. Téměř ve všech případech jsou soubory typu PNG menší než ekvivalentní GIF soubory, přestože umí uložit libovolný počet barev. Díky malým velikostem výsledných souborů je formát PNG velmi oblíbený. Formát GIF by měl být používán jen pro velmi malé obrázky, kde je výsledná velikost souboru menší než u formátu PNG. Formát JPEG by měl být používán u složitých obrázků, například fotografií, u nichž ztrátová komprese funguje lépe, jelikož odstraní ty části obrázků, kterých si uživatel běžně nevšimne (Arandilla, 2011). Soubory ve formátu PNG obsahují nejen samotná data obrázku. Na začátku souboru je také skupiny dat záhlaví, které popisují obrázek. Některé z těchto skupin jsou povinné, jako jsou barevné palety a data o obrázku. Některé jsou naopak nepovinné, jako jsou údaje o gama korekci nebo vyvážení bílé. Jelikož soubor PNG musí obsahovat pouze povinná data, mohou být volitelné skupiny dat odstraněny a tím se zmenší výsledná velikost souboru. Jelikož je možné, že grafický editor tyto nepovinné skupiny dat bude do souboru ukládat, je třeba najít způsob jak tato data odstranit. U většiny operačních systémů je k dispozici nástroj pro příkazový řádek, který umožňuje tato data odstranit. Tento nástroj je nazýván Pngcrush a lze jej stáhnout7 na internetu. Tuto úlohu lze provádět také na webových stránkách Smush8 . Tyto webové stránky lze nasměrovat na konkrétní adresu URL nebo na ně nahrát obrázky a ony vrátí archiv ZIP se všemi obrázky bez nadbytečných dat. 4.5.5

Optimalizace kódu JavaScriptu pro výkon

Zmenšení souboru jazyka JavaScript pomocí nástroje Dojo ShrinkSafe Zdrojové soubory skriptů jazyka JavaScript obsahují velké množství bílých znaků a také komentářů. Takovéto informace jsou důležité pro vývojáře, aby kód lépe pochopili. Webový prohlížeč však tyto informace k interpretaci skriptu nepotřebuje, proto není žádný důvod, aby server tyto nadbytečné informace posílal. 7 8

http://pmt.sourceforge.net/pngcrush/ http://smushit.com

4.5


55

V závislosti na daném souboru je možné zmenšit velikost souboru s JavaScriptem přibližně o 50 % tím, že budou odstraněny zbytečné bílé znaky a komentáře. Tato redukce se nazývá zmenšení. Velikost souboru je možné také zmenšit procesem zvaným zatemnění, který zkracuje názvy proměnných a funkcí. Zatemnění však představuje riziko, protože se nestará o to, jakým způsobem je komprimovaný soubor použit na daných webových stránkách. Komprimační nástroj Dojo ShrinkSafe využívá technik zmenšení i zatemnění. ShrikSafe však pracuje mnohem inteligentněji než jiné podobné nástroje, jelikož mění jen názvy proměnných a funkcí, které jsou veřejně dostupné mimo daný skript. To znamená, že veřejné rozhraní API nebo jiný kód v souboru bude fungovat správně. Tento nástroj je doporučován používat pro zmenšení souboru a tím tak zajištění rychlejšího stažení do prohlížeče (The Dojo Foundation, 2004). Přístup ke knihovnám jazyka JavaScript přes sítě CDN Jak již bylo řečeno, sítě CDN redukují vzdálenost mezi místy, mezi kterými se mají přenášet data pomocí internetu. Mnoho knihoven jazyka JavaScript, jako je například jQuery nebo Prototype je k dispozici na sítích CDN, které nabízejí rychlejší odezvy pro koncové uživatele. Navíc mají výhodu toho, že prohlížeč použije verzi uloženou v mezipaměti, pokud uživatel navštíví webové stránky odkazující na stejnou adresu URL. Společnost Google nabízí přístup k následujícím knihovnám a komponentám jazyka Javascript: • jQuery, • Prototype, • Dojo Toolkit, • Yahoo! UI, • MooTools, • SWFObjects Všechny soubory těchto knihoven jsou k dispozici z pevné URL adresy buď jako celý původní soubor nebo jako jeho zmenšená verze, která je obvykle až o 50 % menší. Úplná dokumentace je k této službě k dispozici na stránkách společnosti Google9 . Nevýhodou přístupu k souboru na jiné doméně, než jsou stránky uloženy, je to, že se musí vyhledat DNS záznam pro nalezení IP adresy nové domény. Tento čas však vyvažuje rychlost, jakou je odkazovaný soubor stažen. Síť CDN umožní uživateli stáhnout kopii souboru z fyzicky nejbližšího serveru a tím se snižuje zpoždění sítě.

9

http://code.google.com/apis/ajaxlibs/

5

5

METODIKA PRÁCE

56

Metodika práce

Cílem této práce je inovovat interní informační systém Audiovizuálního centra Mendelovy univerzity v Brně. Postup inovace může v některých fázích připomínat stejný průběh jako při tvorbě nového systému. Celkový postup práce lze shrnout do následujících bodů: • Specifikace současných požadavků na systém, • analýza současného stavu systému a definování jeho nedostatků, • návrh změn, • tvorba modelů, • realizace a implementace změn, • optimalizace systému. Specifikace požadavků na systém Jako výchozí úloha při tvorbě informačního systému je sběr a specifikace požadavků, které jsou kladeny na systém. Proto bude v první fázi rozebráno poslání Audiovizuálního centra a v návaznosti na to budou shromážděny specifikace a požadavky a definovány základní funkce systému. Tyto funkce budou poté detailněji rozebrány a stanoveny jednotlivé části systému. Analýza současného stavu Dalším krokem, ze kterého budou vycházet návrhy inovace, bude analýza současného stavu systému. Jako první bude analyzován vzhled stávajícího grafického rozhraní a porovnán se současnými trendy pro tvorbu webdesignu s čistou a přehlednou komunikací. S tím bude také úzce souviset stanovení cílové skupiny návštěvníků systému. Dále bude potřeba analyzovat způsob, jakým je současný systém implementován, co se týče způsobu programování a zhodnocení, zda je možné takovýto kód snadno udržovat a spravovat. V poslední fázi této části bude nutné celkově definovat nedostatky systému, ze kterých budou vycházet konkrétní návrhy na změny. Navržení změn Na základě definovaných nedostatků z předchozí analýzy budou navrhnuty a specifikovány změny, které by měly být v rámci systému provedeny. Tyto změny se budou týkat zejména grafického rozhraní implementace systému. Po specifikaci změn bude následovat část tvorby modelů.

5

METODIKA PRÁCE

57

Tvorba modelů Aby bylo možné přejít k implementaci a provádění změn, je nutné navrhované řešení namodelovat. Pro názornost bude namodelován případ užití pro celý systém. Jako další proběhne modelování nového grafického rozhraní aplikace, bude použit framework 960 Grid System. Nejprve bude navržen předběžný drátěný model pro rozmístění jednotlivých funkčních prvků systému. Model bude navržen na základě požadavků kladených na systém a bude sloužit dále jako předloha pro tvorbu grafického modelu a kódování stránky. Tento model bude vytvořen pomocí online nástroje MockFlow10 . Poté bude přistoupeno k tvorbě samotného grafického designu pomocí grafického editoru Adobe Photoshop. Pro implementaci bude nutné namodelovat také diagram tříd, ze kterého bude vycházet objektový kód systému. Současně s diagramem tříd bude třeba vytvořit nový databázový model. Modelování těchto diagramů bude probíhat pomocí online nástroje Creately11 . Realizace změn Po vytvoření modelů bude možné přistoupit k samotným inovacím informačního systému, jinými slovy webové aplikace. Jako první bude vytvořena HTML šablona pomocí jazyka HTML s definicí dokumentu XHTML 1.0 Strict a kaskádových stylů verze CSS2. Pro zvýšení interaktivity bude použito jazyka JavaScript, konkrétně jeho knihovny jQuery. Kódování této šablony bude probíhat pomocí programu PSPad, který je volně ke stažení. Při tvorbě této šablony bude kladen důraz na to, aby ji bylo možné zobrazit stejným způsobem ve většině současných i webových prohlížečů. Největší problémy budou zřejmě při implementaci pro prohlížeče Internet Explorer. Zde bude snaha, aby se prezentace zobrazovala korektně od verze 7. Po vytvoření HTML šablony bude možné přejít k další fázi realizace v podobě implementace databázového modelu. Bude vytvořena databáze v relačním databázovém systému MySQL. Poté bude možno přejít k implementaci pomocí jazyka PHP. Zde bude kladen důraz na tvorbu jednotlivých objektů, které budou reprezentovat jednotlivé funkcionality systému. Pro oddělení prezentační od aplikační části bude použit šablonovací systém Smarty vytvořený v jazyce PHP. V průběhu implementace změn bude také nutné dbát na dodržování některých zásad pro optimalizaci systému. Optimalizace systému V poslední části inovace bude provedena optimalizace celého systému pomocí metod, které byly v předchozím textu zmíněny, zejména optimalizace velikosti HTML, CSS a JavaScritových souborů.

10 11

http://www.mockflow.com/ http://creately.com/

6

VLASTNÍ PRÁCE

6 6.1

58

Vlastní práce Analýza současného stavu systému

Aby bylo možné přistoupit k modelování změn, které budou na systému provedeny, je nutné nejprve přistoupit k analýze současného stavu systému a navržení změn, které by bylo vhodné provést. V první řadě bude vhodné si uvědomit, jaká skupina uživatelů bude web navštěvovat a provést jejich analýzu. Poté bude provedena analýza současného webového designu systému. Dále pak bude přistoupeno k analýze a stylu implementace. 6.1.1

Analýza cílové skupiny uživatelů

Aby bylo možné začít s analýzou a návrhy změn, je potřeba si uvědomit, jaká skupina uživatelů bude web navštěvovat a využívat jeho služby. Je zřejmé, že Audiovizuální centrum Mendelovy univerzity poskytuje služby výhradně pro studenty a zaměstnance univerzity. Studenty by mohla zaujmou například služba poskytování průkazových fotografií, která probíhá přímo v areálu Mendelovy univerzity v Brně. Dále by je mohla zaujmout možnost stahování powerpointových prezentací vytvořené v duchu jednotného vizuálního stylu, stahování univerzitních a fakultních log. V další řadě poté prohlížení videí a fotografií z akcí konaných v rámci univerzity. Zaměstnanci univerzity, jako jsou například vyučující, kteří mimo výše zmíněných služeb ocení například spolupráci při tvorbě výukového videomateriálu pro studenty nebo služby spojené s fotodokumentací z akcí jimi pořádaných. Z předešlého textu je patrné, že uživatelská základna bude poměrně široká co se týče věku i zaměření. Jelikož na univerzitě existuje pět fakult s různým zaměřením, ať už technickým, přírodovědným nebo humanitním, je nutné počítat s různými zdatnostmi, co se týče výpočetní techniky a s tím spojené používání internetu a webových aplikací. Aby systém mohlo využívat co nejvíce uživatelů, bude třeba webovou prezentaci přizpůsobit tak, aby práce s ní by byla co nejjednodušší, intuitivní a celkově uživatelsky přívětivá. Ve stavu, který je určen k inovaci, je řada problémů spojených s jasnou komunikací mezi uživatelem a aplikací. Největší problém představuje grafické rozhraní a s tím do jisté míry spojená funkcionalita systému. 6.1.2

Analýza grafického rozhraní

Jelikož je v současné době grafika nedílnou součástí webové aplikace, nelze její úlohu při návrhu či inovaci systému podcenit. Kvalitně zpracovaný webdesign hraje významnou roli při komunikaci mezi uživatelem a webovou aplikací a je to první, co v novém nebo stávajícím návštěvníkovi zanechává jistý dojem. Zda jsou tyto dojmy pozitivní či negativní, může do jisté míry záviset také na vkusu či estetickém cítění uživatele a není možné vyhovět všem uživatelům zároveň. Z velké části však lze ovlivnit logické uspořádání prvků na stránce tak, aby působily kompaktním a

6.1

Analýza současného stavu systému

59

celistvým dojmem a intuitivně naváděly uživatele při komunikaci s webovou aplikací. V následujícím textu bude tedy nutné zanalyzovat stávající situaci po stránce grafického a uživatelského rozhraní.

Obr. 1: Původní domovská stránka Audiovizuálního centra

Při vstupu na stránky Audiovizuální centra Mendelovy univerzity v Brně si lze všimnout hned mnoha nedostatků. Jedním z hlavních je nezajímavý a nudný webový design působící archaickým dojmem, na kterém není patrné jasné rozdělení stránky do ucelenějších segmentů, které by zpřehledňovaly orientaci ve stránce, a stránka celkově nepůsobí celistvým a kompaktním dojmem. Tento důvod lze do jisté míry přikládat datu vytvoření systému a také jeho průběžnému vývoji. Hlavním důvodem však nejspíš bude odvození designu od stránek Mendelovy univerzity v Brně, kdy se autor snažil co nejvíce přiblížit jejich vzhledu z důvodu příslušnosti k univerzitě a tím tak přizpůsoboval design na úkor obsahu. V jednotném vizuálním stylu (JVS) je definováno pouze orientační schéma stránek a nepostihuje všechny možnosti. Proto není důvod se jich striktně držet jako předlohy, ale je vhodné dodržovat základní pravidla, která jsou JVS uvedena, jako je například stanovený řez písma, barvy a další ochranné prvky.

6.1


60

Prvním zásadním problémem stránek je, že při uživatelově první návštěvě není ze stránek patrné, co nabízejí a jaká je jejich úloha či poslání, což vede k jeho částečné dezorientaci. Jednak je to způsobeno tím, že stránka žádným způsobem nenaznačuje, o co se jedná a co může uživateli nabídnout. Největším problémem komunikace stránek s uživatelem však bude bezesporu navigace. Hlavní navigace je umístěna na stránce vlevo. Při procházení jednotlivých položek není uživateli jednoznačně řečeno, ve které sekci nebo části aplikace se nachází. Ukázkovým příkladem tak může být sekce Videodatabáze a zde podsekce Streamované video která je pojmenována jako Filmotéka. Nedostatků podobného typu je zde mnohem více. Primární menu by také mohlo kvůli přehlednosti obsahovat méně položek. Přebytečné položky jako například Kontakty nebo Kde nás najdete by bylo možné zařadit jako jednu položku s názvem Kontakt. Odkaz Stránky MENDELU by se mohl klidně zařadit do sekce Odkazy. Odkaz na domovskou stránku představovaný položkou Interní informační systém by bylo vhodnější pojmenovat jako Domů nebo na něj odkazovat například pomocí loga stránek, jak je tomu zvykem. V menu je také položka Výroba, která má představovat část Audiovizuální centra, která se zabývá natáčením a zpracováním akcí univerzity. Existence tohoto odkazu je zde nanejvýš zbytečný a lze jej bez problémů zařadit do sekce služby. Kontextově podobné položky by se tedy daly zahrnout do jedné položky v hlavním menu a byly by zobrazovány pomocí roletového menu. Velkou nevýhodou je také špatná modifikovatelnost současného menu. Pokud by bylo požadováno přidání nové položky, bylo by nutné se uchýlit k přidání další položky i kontextově podobné, do již na poměrně malé stránky rozsáhlého menu. Za zbytečný a rušivý element lze označit část, která zobrazuje výčet použitých technologií při implementaci systému, který je zobrazen ve spodní levé části stránky. Tyto údaje běžnému uživateli nic neřeknou a místo, které zabírají, by mohlo být využito nějakým jiným efektivnějším způsobem. Jakoby vytržením z kontextu stránek může působit sekce Fotogalerie. Vzhled této podsekce je zcela jistě ovlivněn tím, že byla použita volně dostupná fotogalerie Coppermine a její vzhled byl částečně přizpůsoben vzhledu stránek. Opět zde proběhlo jisté přizpůsobení vůči cizímu designu, což má za následek nekompaktnost vzhledu stránek. Stránky jsou navrženy pomocí tabulek s relativní velikostí, takže celý obsah se přizpůsobuje velikosti okna prohlížeče, což má na větších monitorech za následek roztažení obsahu přes celou plochu a stránka s relativně malým množstvím obsahu může působit prázdným dojmem. 6.1.3

Analýza funkcí systému

Informační systém Audiovizuální centra Mendelovy univerzity v Brně by měl mít několik funkcí, které je možné rozdělit z pohledu uživatele a z pohledu správce. Z pohledu běžného uživatele neboli návštěvníka webových stránek, to bude poskytování informačních sdělení. Tato sdělení budou vkládána zaměstnanci AVC

6.1


61

na požádání některého ze zaměstnanců či studentů univerzity. Dále by měl systém poskytovat základní informace o poskytovaných službách Audiovizuálního centra a vybrané URL odkazy, které by mohly být pro uživatele užitečné. Dále by měl systém poskytovat seznam videí, která mohou být vypůjčena zaměstnanci či studenty univerzity a také možnost shlédnout videa, která jsou určena ke streamování. Možností videodatabáze by mělo být také vyhledávání podle zvolených parametrů. Stejně tak bude možnost zhlédnutí fotografií z akcí, vázaných k univerzitě. Zde by měla být také volba vyhledávání podle parametrů. Jako další funkcí by mělo být stahování souborů. Bude se jednat o stahování formulářů, žádanek nebo dokumentů. Nejužitečnější z této funkce by mělo být poskytnutí stažení log univerzity, fakult a univerzitních součástí v několika datových formátech. Poslední funkcí pro běžné uživatele bude posílání zpráv pracovníkům Audiovizuálního centra. Z pohledu správce by měla být první funkce samotné přihlašování a odhlašování ze systému. V systému pak bude mít uživatel možnost měnit si své přihlašovací údaje. Dále pak přidávat, mazat či editovat informační zprávy, které obdrží od žadatele. Další funkcí systému bude ukládání, mazání nebo editování záznamů o zhotovených audiovizuálních dílech. Stejné funkce bude poskytovat uživateli i fotogalerie, s možnostmi vkládání, mazání a editací záznamů. Pro uživatele s nejvyšším stupněm oprávnění bude systém poskytovat funkci na správu uživatelů, kde bude možnost zavedení nového uživatele, jeho editaci nebo vymazaní. Poslední funkcí systému bude sledování statistiky přístupů na web. 6.1.4

Analýza implementace systému

Pro určení změn v rámci implementace je třeba analyzovat, jakým způsobem byl celý systém navrhnut a implementován. Jelikož je systém provozován ve webovém prostředí, první věcí, na kterou je vhodné se detailněji zaměřit je kódování stránek pomocí jazyka HTML. HTML stránka je navržena s definicí typu dokumentu HTML 4.01 Transitional, avšak tento standard nedodržuje. Z hlediska validity a tím pádem i budoucí kompatibility je zcela nevyhovující. Pro lepší využitelnost a kompatibilitu by bylo vhodnější přejít na XHTML. Stránka využívá kaskádových stylů, které jsou mnohdy definované přímo v HTML kódu místo toho, aby byly přiloženy pomocí externího souboru. Podobně tomu je i v případě JavaScriptu. V případě vložení kaskádových stylů pomocí externího souboru je však používán příkaz @import, který, jak již bylo uvedeno dříve, není doporučován. Stránka je rozdělena v podstatě na dva hlavní segmenty, a to na hlavu a obsah. Při kódování HTML stránek platí konvence, že stránka by měla být rozdělena na hlavu, obsah a patu. Zde však pata stránky, ve které by mohly být uvedeny například kontaktní údaje, zcela chybí. Obsah stránky je tvořen dvěma segmenty a to navigačním menu a vlastním obsahem. Menu je vytvořeno s fixní velikostí, proto

6.2

Specifikace požadavků

62

je při zvětšování velikosti šířky neměnné. To však neplatí o obsahu, který je tvořen pomocí tabulky s relativní velikostí a s tím spojené rozšiřování nebo zmenšování šířky při změně velikosti okna. To má za následek, že stránky na větších a širších monitorech působí velmi prázdně a nekompaktně. O změnu obsahu stránek se stará skriptovací jazyk PHP. Skripty jazyka PHP jsou však psány přímo v kódu HTML, což má za následek při další editaci značnou nepřehlednost a špatnou orientaci v kódu, kterou navíc umocňuje fakt, že je zde použito strukturovaného programování místo objektového, což není při větším objemu kódu vhodné. V sekci fotogalerie je zakomponována a používána volně dostupná fotogalerie Coppermine. Tato galerie je poměrně robustní a komplexní a nějaké větší přizpůsobení či změna zdrojového kódu ve vlastní prospěch je velmi náročná. Bylo by proto lepší implementovat vlastní galerii, která bude přizpůsobena potřebám daného systému. Další část implementace, kterou je nutno analyzovat, je databáze systému. Systém používá relační databázový systém MySQL, který je vhodným nástrojem pro tuto aplikaci. Databázový model však nesplňuje databázové normální formy, díky čemuž je správa databáze velmi komplikovaná a náročná. Jako příklad lze uvést, že tabulky nesplňují první normální formu, tedy další nedělitelnost prvků.

6.2

Specifikace požadavků

Při tvorbě systému nebo v tomto případě při inovaci je první fází specifikace požadavků. Aby bylo možné se pustit do objektově orientované analýzy nebo návrhu, je nutné mít alespoň rámcový přehled o tom, čeho by mělo být dosaženo. Je nutné jednak zjistit, co vlastně má systém dělat a jednak dosáhnout v tomto bodě shody. Požadavky, které určují, jaké chování bude systém nabízet, se označují jako funkční požadavky. Vlastnosti nebo omezující podmínky daného systému specifikují naopak nefunkční požadavky. 6.2.1

Funkční požadavky

Funkční požadavky je možné rozdělit z hlediska uživatelů, kteří budou systém využívat. Tito uživatelé se dají rozdělit do dvou základních skupin. První skupinu budou představovat uživatelé, kteří budou mít oprávnění přistupovat do interní části systému a nějakým způsobem prohlížet, přidávat, editovat, mazat či zveřejňovat data. Druhou skupinou pak budou externí neboli koncoví uživatelé, kteří budou prohlížet nebo stahovat obsah zveřejněný oprávněným uživatelem. První skupinu uživatelů, oprávněných přistupovat do interní části systému, lze dále rozdělit na další podskupiny. Tyto podskupiny uživatelů se budou od sebe lišit přidělenými právy, která je budou opravňovat nebo omezovat k vykonání operací spojených s prací v interní části systému. Uživatel s nejnižším oprávněním bude mít možnost přihlásit se do systému a v něm bude mít možnost pouze prohlížet interní i zveřejněná data, avšak nebude

6.3

Navrhované změny

63

mít již možnost je jakkoli měnit, přidávat, editovat nebo mazat. Tyto možnosti již bude mít uživatel na druhém stupni oprávnění. Tento uživatel by se dal označit jako správce obsahu. Bude moci do systému vkládat informační zprávy, které budou chtít jiné osoby zveřejnit, vytvářet fotogalerie a s tím spojené vkládání fotografií, vkládat nové videozáznamy a údaje o vytvořených filmech, dále pak vkládat různé soubory ke stažení. Správce obsahu bude mít tedy možnost prohlížet, přidávat, editovat nebo mazat záznamy v systému. Nevyšší práva bude mít osoba, kterou lze označit jako administrátora. Tento uživatel bude mít všechna předešlá oprávnění a k tomu mít na starosti účty jednotlivých uživatelů. Ty bude moci vytvářet, mazat nebo editovat. Se správou účtů bude také souviset přidělování jednotlivých práv ostatním uživatelům. Koncoví uživatelé pak budou přistupovat na stránky Audiovizuální centra a prohlížet zveřejněný obsah. Jako první si mohou přečíst zprávy na informační tabuli, které budou obsahovat informace, které si přáli zveřejnit žadatelé. Bude se jednat převážně o informace týkající se Mendelovy univerzity v Brně. Jako další si budou moci prohlížet fotogalerie z vybraných akcí konaných na Mendelově univerzitě v Brně nebo s ní spjatých. Ve videodatabázi budou moci zhlédnout filmy z produkce Audiovizuálního centra. Ve videodatabázi bude také uveden seznam všech vytvořených a vedených videí včetně těch, která nebudou z nějakých důvodů (např. právních) ke zhlédnutí k dispozici. Některé z těchto filmů je pak možné vypůjčit například pro účely výuky, ale ne pro komerční užití. Jako další část systému, kterou budou moci koncoví uživatelé využívat, bude část pro stahování souborů. Zde se bude jednat zejména o žádanky na provedení díla či akce zaměstnanci Audiovizuálního centra. Dále se pak bude jednat o stahování jednotlivých barevných, jazykových verzí univerzitních log a powepointových prezentací v jednotném vizuálním stylu Mendelovy univerzity v Brně. Jako poslední funkce, kterou budou moci uživatelé používat, bude kontaktní formulář pro odesílání dotazů nebo požadavků. 6.2.2

Nefunkční požadavky

Jako omezení některých částí systému by se daly označit autorská práva. U streamovaného videa nemusí aktér nebo autor souhlasit s jeho zveřejněním i když si záznam své činnosti přál zaznamenat pro osobní účely. Toto video by proto mělo být evidováno pouze v interní části systému, ke kterému budou mít přístup pouze oprávnění uživatelé. Tento problém se může samozřejmě vyskytnout i u pořízených fotografií pracovníky Audiovizuální centra. Další omezující podmínky již na systém kladeny nebyly.

6.3

Navrhované změny

V této části práce budou navrženy změny, které budou v pozdější fázi realizovány. Tyto návrhy vycházejí z předchozí analýzy systému.

6.3

Navrhované změny

6.3.1

64

Návrh na změnu způsobu poskytování informací

Před přistoupením ke konkrétním grafickým a implementačním změnám je zapotřebí definovat obecnější návrhy změn informačního systému. Tyto návrhy se budou především týkat způsobu, jakým budou některé informace poskytovány koncovým uživatelům. První změna by se týkala úvodní stránky, kde by byl umístěn hlavní baner a dynamicky by zobrazoval nabízené služby a další aktuální informace. Dále by informační zprávy byly členěny do záložek podle kategorie, do které spadají, a přechod mezi jednotlivými kategoriemi byl realizován také dynamicky, například využitím horizontálního rolování v rámci obsahu stránky. Vhodným nástrojem by byl některý ze zásuvných modulů knihovny jQuery. V oblasti streamovaného videa by byl využit místo Windows Media Playeru některý z flashových přehrávačů, který je volně ke stažení k nekomerčním účelům. Vhodnou komponentou by byl v tomto případě JW Player12 od společnosti LongTail. Komponentu JW Player naprogramoval Jeroen Wijering a jde o znovupoužitelnou komponentu pro přehrávání video a audio formátů jako jsou FLV, MP4, MP3, AAC a dalších. Výhodou tohoto přehrávače je například progresivní stahování, kdy je možné sledovat video, aniž by bylo ještě celé staženo do počítače. Dále také podporuje řadu doplňků s dodatečnými funkcemi. Další změna by se měla týkat fotogalerie, která by byla integrována do obsahu stránky. Procházení fotogalerie by bylo realizováno dynamickými přechody mezi obrázky, při kterých nebude docházet k novému načítání celé stránky. Jednalo by se o dvě oblasti. První oblast by obsahovala zobrazení samotné fotky v původní velikosti a pod ní by byla umístěna lišta obsahující zmenšené náhledy jednotlivých fotek. V případě že by se náhledy do této oblasti nevešli, bylo by možné se v nich orientovat pomocí horizontálního skrolování s využitím myši. Tuto galerii by bylo vhodné implementovat pomocí některého zásuvného modulu knihovny jQuery, který je volně ke stažení. Výraznou změnou by měla projít také část systému pro poskytování a stahování univerzitních log. V obsahu stránky by bylo zobrazováno aktuální vybrané logo. Pro výběr loga by sloužilo roletové menu obsahující jednotlivé varianty log. Další změnou by měl být způsob stahování jednotlivých formátů, který by měl být realizován pomocí tří tlačítek. Každé tlačítko by představovalo stažení jednoho z požadovaných formátů (JPEG, PNG, EPS). Po stisknutí toho tlačítka by bylo vyvoláno dialogové okno pro uložení nebo otevření zvoleného loga. Tím by se předešlo klasickému stahování pomocí pravého tlačítka myši a volbě textitUložit obrázek jako. . ., čímž by došlo k usnadnění práce. Dále by také bylo vhodné zavést v sekci kontakty kontaktní formulář, který bude sloužit jako nástroj pro odesílání požadavků nebo dotazů na Audiovizuální centrum pomocí emailů. 12

http://www.longtailvideo.com/

6.3

Navrhované změny

6.3.2

65

Návrh na inovaci grafického rozhraní

Jako první by mělo být rozhodnuto o tom, zda zvolit fixní nebo plovoucí rozvržení stránky. Jelikož stránky neobsahují velké množství obsahu a při plovoucím rozvržení by mohla tato stránka na větších monitorech působit prázdným dojmem, bylo rozhodnuto o použití fixní šířky. Dalším důvodem pro fixní rozvržení byla absolutní kontrola nad umístěním jednotlivých prvků na stránce. Jako další obecnější změna by bylo vytvoření základní struktury stránek, ve kterých by se jednotlivé prvky integrovaly do větších celků. Těmito celky jsou myšleny hlavička, baner, obsah a patička stránky. Pro lepší využití celé šířky stránky by bylo lepší namísto vertikálního menu zvolit menu horizontální. Menu by bylo roletové, aby se stalo přehlednějším a daly se do něj v případě potřeby umístit ještě další položky, což by přispělo k jeho flexibilitě. Jeho umístění by bylo v hlavičce stránky. Baner stránky by byl umístěn pod hlavičkou stránky a měl by úlohu upoutání návštěvníkovi pozornosti. Tu by měly upoutat nejzajímavější služby které web, potažmo Audiovizuální centrum nabízí. Jako další část bude obsah, který má za úkol poskytovat informace ze zvolených sekcí. Zde je vhodné umístit ”drobénkové menu”, které bude jednoznačně označovat uživatelovu pozici na stránkách. V rámci obsahu je také doporučeno jednotně definovat vzhled a použití hlavních typografických prvků jako jsou nadpisy, text, seznamy, tabulky, text, odkazy, atd. Inovací grafického rozhraní by mělo mít za následek přehlednější členění stránky a tím dosažení její celkové kompaktnosti. Dále pak by měla graficky a esteticky sjednotit jednotlivé sekce v rámci celých webových stránek. 6.3.3

Návrh na změny v implementaci

Jak již bylo naznačeno v analýze, první návrhy na změny se budou týkat HTML kódu. Zde by bylo vhodné pro lepší kompatibilitu stránek přejít z HTML 4.01 Transitional na XHTML 1.0 Strict. S tím bude také souviset dodržování všech pravidel, která se na tento dokument vztahují. V rámci HTML kódu by bylo lepší se vyvarovat rozložení elementů stránky pomocí tabulky a raději se zaměřit na rozložení pomocí kaskádových stylů. V kaskádových stylech by pak bylo výhodné použít některých hotových řešení z frameworku 960 Grid Systém, jako jsou například velikosti jednotlivých sloupců atd. Při psaní kaskádových stylů by pak nebylo na škodu zohlednit některé z optimalizačních technik jako je zápis se zkrácenými hodnotami nebo použití css spritů. V rámci psaní skriptů v jazyce PHP by bylo dobré použít objektový návrh pro lepší orientaci v kódu a jeho snadnější údržbu. Dále by měl být oddělen aplikační kód od prezentačního, což opět přispěje ke zpřehlednění celkového kódu. Toto oddělení je možné provést pomocí šablonovacího systému Smarty.

6.4

Tvorba modelů

66

Jako poslední návrh na změnu implementace by mělo být zavedení nového databázového modelu, který bude splňovat normální formy. Normalizací databáze se tak v budoucnu usnadní jeho správa a údržba.

6.4

Tvorba modelů

Než bude přistoupeno k provádění navrhnutých změn, je na místě vytvořit několik modelů systému. Aby bylo možné začít s tvorbou nové grafiky, bude nutné zachytit rozvržení jednotlivých elementů na stránce pomocí drátěného modelu. Tento model může být také v jisté míře využit při implementaci systému. Pro znázornění základních funkcí systému poslouží diagram případů užití (tzv. Use Case diagram). Jako šablona pro implementaci poslouží diagram tříd, který zachycuje atributy, metody a vzájemné vazby mezi objekty systému. Nová databázová struktura bude zachycena pomocí entitně relačního diagramu. Po vytvoření těchto modelů se bude možné pustit do realizace samotných změn systému. 6.4.1

Modelování případů užití

Při modelování případů užití se bude vycházet z již uvedených specifikací požadavků na systém. Diagramy případů užití budou pro lepší přehlédnout rozděleny podle jednotlivých aktérů. Jako první bude uveden celkový obecný diagram užití. Poté budou detailně zobrazeny jednotlivé případy užití pro samotné aktéry. Základní diagram užití zobrazuje celkový pohled na systém. Jsou zde aktéři Host a Správce. Aktér Host bude mít dostupné uživatelské služby. U aktéra správce bude abstrahováno od jednotlivých práv. Ten pak bude mít k dispozici svého účtu, správu obsahu systému a správu uživatelů. Při detailním pohledu na aktéra Host je patrné, že jeho uživatelské služby budou zahrnovat prohlížení videí, prohlížení fotografií, prohlížení inzerátů, stahování souborů a odesílání zpráv pracovníkům Audiovizuálního centra. V rámci prohlížení videí a fotografií zde bude mít možnost ještě vyhledávat položky podle zadaných parametrů. Aktér správce bude mít v případě užití Správa účtu možnost po zadání přihlašovacího jména a hesla přihlášení do systému. Zde pak bude mít možnost měnit si přihlašovací údaje k účtu, prohlížet a vyhledávat interní obsah systému. Jako poslední možnost bude možnost se z účtu odhlásit. V případě Správy účtu bude mít Správce na starosti obecně editaci obsahu systému. Jako první bude moci zanášet a zveřejňovat informační zprávy, které se budou zobrazovat návštěvníkům stránky. Další případ bude Správa fotografií, kde má možnost vytvářet a editovat fotogalerie a s tím spojené vkládání fotografií. Dalším případem užití bude Správa videí, ve které bude mít na starost vkládání a editaci videí. Jako poslední bude Správa souborů, kde bude vkládat a mazat soubory ke stažení.

6.4

Tvorba modelů

67

Obr. 2: Základní diagram případů užití

Posledním případem užití bude případ Správa uživatelských účtů. Správce zde bude mít na starosti editace účtů ostatních uživatelů, mazaní jejich účtů a vytváření nových účtů. 6.4.2

Modelování diagramu tříd

Jak již bylo řečeno, výsledkem modelování objektů, které reprezentují části systému je diagram tříd. Jedná se o statickou strukturu systému, využívanou především v situaci, kdy je potřeba diagramem zachytit konkrétní skutečnost. V tomto případě představuje strukturu tříd, která je použita v inovovaném informačním systému. Celkem bylo navrženo osm tříd, které mezi sebou, až na jednu výjimku, komunikují. Je možné, že během implementace se mohou metody nebo atributy tříd rozrůstat nebo může přibýt i samotná třída. Výchozí návrh tříd je znázorněn na obr. 5. Třída Login bude obsahovat metody spojené s přihlašováním uživatele do administrační části, jako jsou kontrola hesla, přihlášení, chybové hlášky a odhlašování. Třída User bude zajišťovat například zobrazování údajů o přihlášeném uživateli, přidávání, mazání uživatele nebo změnu uživatelského profilu. O správu informačních zpráv se bude starat třída Messages, která bude obsahovat metody pro přidávání, mazání, editaci zpráv, jejich načítání či vyhledávání. Podobné metody budou obsahovat také třídy FotoGallery a Video zajišťující správu fotogalerií a videodatabáze. Tyto dvě třídy budou komunikovat se třídou FileManager, která bude mít na starost práci se soubory, jako je jejich nahrávání či mazání ze serveru. Dále je třeba

6.4

Tvorba modelů

68

Obr. 3: Diagram užití pro aktéra Host a případ užití Uživatelské služby

také zmínit třídu DataBaseQuery, se kterou bude komunikovat většina ostatních tříd. Ta bude sloužit pro dotazování se na databázi a zanášení změn do databáze. Bude se jednat o obsluhu příkazů SELECT, INSERT, DELETE a UPDATE. Tato třída byla zavedena kvůli zjednodušení a zpřehlednění zápisu zdlouhavých databázových příkazů. Poslední třídou je třída Email, starající se o odesílání dat z kontaktního formuláře na společný email Audiovizuálního centra. 6.4.3

Databázový model

Aby bylo možné začít implementovat novou databázi, je třeba zhotovit její model, ve kterém jsou zachyceny tabulky a způsob jejich propojení. Toto propojení bude umožňovat svázat vzájemně související data. Při návrhu databází je tedy obvyklé, že jedna databáze je rozdělena do několika tabulek, které jsou spolu svázané pomocí vybraných údajů ve vybraných sloupcích. Důležitou roli zde přitom hrají právě zmíněná propojení tabulek neboli relace. Návrh nové databáze je zachycen v tzv. entitně relačním diagramu (ERD), který je znázorněn na obr. 6. Při modelování tohoto diagramu byl kladen důraz na jednoduchost a dodržování pravidel pro normalizaci databází. Základní model databáze je tvořen tři-

6.4

Tvorba modelů

69

Obr. 4: Diagram užití pro aktéra Správce a případ užití Správa účtu

nácti tabulkami. Za základní stavební kameny databáze lze považovat tabulky User, Fotogalerie, Video titul, Informacni zprava a Soubory. Tabulka User bude sloužit pro ukládání informací a přihlašovacích údajů uživatelů a bude hrát hlavní roli při přihlašování do systému a také bude poskytovat informace o právech uživatele a s tím spojená oprávnění provádět určité operace v administrační části. Tabulky Fotogalerie, Video titul a Informacni zprava budou sloužit pro ukládání a správu fotogalerie, videodatabáze a informační tabule. Tabulka Soubory bude určena pro ukládání informací o nahraných souborech na server pomocí administrační části, jako jsou dokumenty, prezentace nebo formuláře. Je možné, že počet tabulek nebo počet jejich atributů se může v průběhu implementace rozrůstat. Důvodem může být například změna požadavků na systém nebo odhalení případných nedostatků v navrženém modelu. Při zahájení implementace se však bude vycházet z tohoto základního modelu. 6.4.4

Drátěný model

Pro vytvoření a kódování grafiky, ale i pro implementaci webových stránek je vhodné navrhnout a vytvořit tzv. drátěný model, navrhovaný na základě požadavků a zadání klienta. Tento model by měl být navržen hlavně proto, aby minimalizoval rozdíl mezi požadavkem klienta a finálním výstupem. Drátěný model neboli wireframe je jednoduchý model, který bude definovat obsah, rozložení a funkce vytvářeného

6.4

Tvorba modelů

70

Obr. 5: Diagram tříd

webu. V tomto modelu nebude nutné používat pestrou paletu barev, obrázky a jiné rozmanité grafické prvky, ale soustředit se hlavně na rozložení jednotlivých funkčních i nefunkčních elementů na stránce. Aby bylo možné přistoupit k tvorbě grafiky, byl vytvořen následující drátěný model (obr. 7), který naznačuje základní rozdělení stránky na čtyři hlavní stavební bloky: Hlavička a menu - Tato část stránky by měla v levé části představovat název stránky v podobě loga. Vedle loga by pak mělo být umístěno hlavní menu, které bude sloužit k primární navigaci mezi sekcemi stránek. Banner, popis stránky - Druhá část bude tvořena v domovské stránce pohyblivým banerem, který bude prezentovat hlavní služby Audiovizuálního centra. V takzvané podstránce (každá mimo stránky domovské - HOME) bude místo tohoto baneru zobrazován název stránky v podobě zvolené sekce. Obsah stránky - V této části stránky bude v horním pravém rohu zobrazováno drobénkové menu pro snadnější orientaci. Dále zde bude zobrazen obsah odpovídající jednotlivým sekcím. Pata - Tato část bude představovat grafické ukončení stránky a několik odkazů.

6.4

Tvorba modelů

Obr. 6: Model navrhované databáze

71

6.5

Realizace a implementace změn

72

Obr. 7: Ukázka drátěného modelu hlavní stránky

6.5 6.5.1

Realizace a implementace změn Inovace grafického rozhraní a uspořádání funkčních prvků

V dnešní době, kdy je tak masivně rozšířen internet a stále dochází k jeho expanzi, je kvalitní webová prezentace samozřejmostí jak pro velké společnosti, tak i pro drobné podnikatele. Profesionální a efektivní design webových stránek může výrazně napomáhat úspěšnosti firmy na trhu. To samé může platit i o informačním systému, kdy špatné uspořádání prvků na stránce v kombinaci s nevýrazným, nezajímavým designem může odradit uživatele od jeho používání. Cílem inovace grafického rozhraní informačního systému Audiovizuální centra Mendelovy univerzity bylo inovovat rozložení funkčních prvků a webdesignu s ohledem na jednotný vizuální styl Mendelovy univerzity v Brně tak, aby se stal přehlednějším, zajímavějším a uživatelsky přívětivějším, než tomu bylo doposud a zajistil tak snadnou orientaci na stránkách. Graficky byla inovována jak samotná webová prezentace, tak i administrační část. Při inovaci bylo použito grafického editoru Adobe Photoshop CS5, což je profesionální program pro tvorbu a úpravu bitmapové grafiky. Dále pak byl použit

6.5


73

framework 960 Grid System pro náčrt, návrh a programování rozložení stránek s rozložením na 12 sloupců. Jelikož v jednotném vizuálním stylu Mendelovy univerzity v Brně nejsou přímo definována pravidla pro webovou prezentaci, byly zohledněny základní pravidla pro práci s barvami, písmem a logy. Jako písmo bylo použito bezpatkový typ písma Arial. Použité barvy pak byly základní zelená barva univerzity s hodnotami RGB: 120/190/20, dále pak odstíny šedé RGB: 80/80/80, RGB: 180/180/180. Jako doplňková barva pro drobné grafické prvky byl použit odstín šedé s hodnotou RGB: 240/240/240. Webová prezentace Inovace webdesignu systému byla provedena jak v uživatelské, tak i v administrační části. Jelikož grafika webového designu stránek má úzkou návaznost na dříve vytvořený drátěný model, jsou jednotlivé části stránek v podstatě identické. Jednotlivé části jsou zde však již detailně zpracovány tak, aby odpovídaly realitě: Hlavička a menu - Hlavička obsahuje název stránek a roletové menu, které je uspořádáno horizontálně. Po najetí kurzoru myši na některou z položek je menu rozevřeno a je zobrazeno submenu. Tímto způsobem uspořádání bylo docíleno zpřehlednění jednotlivých položek menu, tím i rozdělení do sekcí a snadnější orientace pro uživatele. Menu tak může být rozšiřováno o další položky submenu, aniž by došlo k narušení vzhledu hlavního menu, které by mělo být neměnné. Banner, popis stránky - Dalším blokem stránky je baner nebo popis stránky. Baner je zobrazován pouze na úvodní stránce a informuje uživatele o poskytovaných službách a měl by působit jako poutač. V dalších stránkách se už baner nezobrazuje, ale zobrazuje se pruh s nadpisem sekce, ve které se uživatel nachází, což opět zpřehledňuje orientaci ve stránkách. Obsah stránky - V bloku obsah je pak zobrazováno drobénkové menu, které zobrazuje jednoznačnou pozici uživatele na stránkách. Dále je zde pak zobrazován obsah jednotlivých stránek, jakým mohou být například videa, fotky atd. Pata - Patička slouží jako grafický prvek, který opticky ukončuje stránku. Obsahuje také několik odkazů.

Administrační systém Grafický návrh administračního systému je vytvořen v podobném barevném provedení jako celá webová prezentace. Rozdělení hlavních elementů stránky je také podobné a skládá se z následujících tří částí: Hlavička - Tato část stránky obsahuje v levé části logo administračního systému a v pravé části stručné údaje o přihlášeném uživateli včetně možnosti prohlédnutí

6.5


74

Obr. 8: Ukázka grafického návrhu úvodní stránky vycházející z drátěného modelu

nebo nastavení vlastního profilu. Také je zde umístěno tlačítko pro odhlášení ze systému. Ovládací panel - Tato část slouží v administračním systému jako navigační menu. Menu bude obsahovat položky odkazující na správu jednotlivých sekcí webové prezentace jako je například videodatabáze nebo fotogalerie. Obsah stránky - Je to poslední část administračního systému, ve které se zobrazují požadované údaje. Tato část bude obsahovat sekundární menu, jehož jednotlivé položky budou sloužit k pokročilejšímu ovládání jednotlivých sekcí, jako je například přidávání nebo zobrazování položek v systému. 6.5.2

Tvorba šablony webové prezentace

Po vytvoření grafického návrhu je možné přejít k samotné tvorbě HTML šablony za pomocí kaskádových stylů a JavaScriptu. Tvorba HTML dokumentu byla reali-

6.5


75

Obr. 9: Ukázka grafického návrhu administračního rozhraní

zována pomocí volně dostupného textového editoru PSPad. HTML dokumenty byly vytvořeny s definicí typu dokumentu XHTML 1.0 Strict a dbalo se na dodržování pravidel, která se vztahují na elementy a jejich atributy, aby byla webová prezentace validní podle validátoru W3C. Validitou HTML dokumentů tak bude zajištěna současná i budoucí kompatibilita s webovými standardy. Pro znakovou sadu byl použit standard ISO-8859-2. Současně s kódováním HTML dokumentů bylo nutné vytvářet jejich rozložení v rámci stránek, které bylo zprostředkováno pomocí kaskádových stylů. Jako první bylo vhodné vložit do css souboru pravidla, která mění výchozí hodnoty vlastností některých HTML elementů na nulové. To bylo provedeno z toho důvodu, že různé prohlížeče mají nastaveny různé výchozí hodnoty pro tyto elementy a CSS vlastnosti a jejich přenastavení podle vlastní potřeby by bylo neefektivní. Na internetu je k dispozici mnoho variant těchto stylů. Pro tuto práci byl vybrán styl vytvořený Erikem Meyerem a je volně k dispozici13 . Po přenastavení vlastností těchto elementů bylo v kaskádových stylech definováno několik pravidel pro formátování a rozložení základních elementů na stránce. Byly zde nastaveny styly nadpisů, odkazů, obrázků, zarovnání, šířky jednotlivých sloupců atd. Po provedení tohoto úkonu již bylo přistoupeno k samotné definici konkrétních elementů stránky. V rámci tvorby šablony webové prezentace byl začleněn do jednotlivých stránek kód jazyka JavaScript. Konkrétně byla využívána JavaScriptová knihovna jQuery pro snadnější implementaci. Z velké části zde byly pro ulehčení práce použity již 13

http://meyerweb.com/eric/tools/css/reset/

6.6

Optimalizace systému

76

hotové zásuvné moduly, které jsou volně k dispozici. Jedná se například o samopřevíjecí baner, prohlížení fotek ve fotogalerii nebo validaci formulářů. Velkou výhodou těchto zásuvných modulů jsou rozsáhlé možnosti přizpůsobení a nastavení. Jako příklad lze uvést zásuvný modul pro fotogalerii s názvem AD Gallery14 , jejíž kód je pod značkou Open Source a je volně ke stažení. Tento jQuery modul nabízí mnoho užitečných funkcí a nastavení. Lze zde nastavovat například přechody mezi jednotlivými obrázky, rychlost přechodu atd. Dalšími užitečnými vlastnostmi je přecházení mezi jednotlivými obrázky pomocí navigačních šipek na klávesnici, přednačítání dalších obrázků, zobrazování obsahu atributu alt nebo automatické přizpůsobování velikosti obrázků v zobrazovací části. 6.5.3

Tvorba programového kódu v jazyce PHP

Programový kód celé aplikace je tvořen ve skriptovacím jazyce PHP. Vývojový proces tvorby tohoto systému by se dal z hlediska tvorby softwaru přirovnat k iterativnímu přístupu, kdy dochází k rozložení implementace celého sytému na jednotlivé části a systém je tak realizován krokovým přístupem. V podstatě tvorba programového kódu v jazyce PHP můžeme po tvorbě HTML kódu označit jako další iterace. Při tvorbě aplikační části v jazyce PHP je dodržován objektový přístup. Jednotlivé objekty napsané v jazyce PHP vycházejí z výše uvedeného diagramu tříd. O oddělení aplikační logiky od prezentační se stará již dříve popsaný šablonovací systém Smarty vytvořený také v jazyce PHP. Za zmínění by v této části textu stálo řešení oprávnění v administračním systému. Jak již bylo řečeno, práva budou rozděleny na tři úrovně. Vzhledem k menší velikosti systému a prakticky malého počtu oprávněných uživatelů jsou práva řešeny přímo v jednotlivých funkcích, které se provedou na základě přidělených práv. Pro znázornění, že uživatel nemá oprávnění provádět dané operace, slouží zašednutí tlačítka a nemožnost na něj kliknout, což je realizováno pomocí šablonovacího systému.

6.6

Optimalizace systému

V průběhu implementace a po jejím dokončení je ještě třeba provést optimalizaci informačního systému pomocí výše zmíněných technik. První optimalizace se týkala grafického rozhraní, kde byla snaha o optimalizaci obrázků a ikon pomocí programu Adobe Photoshop. Dále bylo dbáno na průběžné dodržování optimalizačních technik při psaní šablon stylů. Zde našel uplatnění zejména zkrácený zápis hodnot pravidel a použití CSS spritů. Po dokončení implementace celého systému bude možné použít i další optimalizační techniky, jako je například zmenšení velikosti HTML, CSS a JavaScriptových souborů dostupnými optimalizačními nástroji, které byly uvedeny v předešlém textu. 14

http://coffeescripter.com/code/ad-gallery/

7

7

DISKUZE

77

Diskuze

Po návrhu změn, jejich modelování a zahájení implementace lze nyní přistoupit k diskuzi, která shrnuje výsledky práce, její budoucí vývoj a zamýšlí se nad alternativními možnostmi realizace inovace. Analýza systému a specifikace požadavků nejspíš mnoho alternativ nenabízí. Jisté odchylky by se však mohli vyskytnout v návrhu nových změn systému, které však záleží na individuálním cítění a přístupu autora k dané problematice. Co se týče tvorby modelů, také do velké míry záleží na individuálním přístupu a zkušenostech dané osoby. O čem lze však spekulovat, je použití jednotlivých nástrojů pro tvorbu těchto modelů. V této práci byly použity pro tvorbu diagramů a modelů převážně online nástroje, u kterých není nutná žádná instalace na klientský počítač. Výhodou těchto nástrojů lze spatřit v přístupu ke zdrojovým souborům pomocí internetu a možnost modelovat takřka z každého počítače připojeného k internetu, který obsahuje zásuvný modul Adobe Flash Player. Tyto nástroje se v současné době velmi blíží klasickým desktopovým aplikacím a nabízejí řadu možností generování vytvořeného obsahu. Nevýhodu lze najít opět v internetovém připojení. Pokud dojde k nějakému výpadku serveru nebo není počítač připojen k síti, nelze s modely pracovat. Další nevýhodou je to, že tyto online aplikace nejsou vhodné pro rozsáhlé projekty. Tyto problémy řeší desktopové aplikace určené pro tvorbu těchto modelů. Mnoho těchto kvalitních desktopových aplikací však není volně dostupná pro delší používání a je potřeba licence pro jejich instalaci a provozování. Jako zástupce takových aplikací lze uvést například Enterprise Architect od společnosti Sparx System. V oblasti návrhu grafického rozhraní aplikace a tvorbu jeho modelu bude opět záležet na autorově cítění pro design a jeho nápadech spočívajících v rozmístění jednotlivých elementů na stránce. Grafický návrh byl vytvořen pomocí grafického editoru Adobe Photoshop CS5, které je pro práci s grafikou zcela jistě vhodnou volbou. Za alternativu k tomuto nástroji lze do jisté míry považovat volně dostupný grafický editor GIMP. Při převodu grafické podoby do HTML šablony byl použit volně dostupný editor PSPad. Zde je opět na zvážení, zda by nebylo vhodnější použít opět nástrojů od společnosti Adobe a to Adobe Fireworks a Adobe Dreamweaver. Aplikace Adobe Fireworks poskytuje také nástroje potřebné k tvorbě působivé a vysoce optimalizované grafiky pro web a prakticky pro každé zařízení. Do jisté míry lze říci, že jde o vylepšený Photoshop, určený převážně ke tvorbě webové grafiky. Tento program také nabízí generování funkčních modelů webových stránek, které jsou určeny pro ukázky zákazníkům. Samotnou implementaci webové prezentace lze pak provádět pomocí již zmíněného Adobe Dreamweaveru. Jedná se o velice kvalitní software pro vytváření a úpravu webů s bohatými funkcemi vizuální tvorby i přímého psaní kódu pro vytváření standardních webů a návrhů pro počítače, smartphony, tablety a další zařízení. Tato aplikace již podporuje formáty CSS3 a HTML5 a integruje v sobě také knihovnu jQuery. Nepochybně se jedná o velice kvalitní aplikace, avšak tato kvalita je kompenzována cenou. Pokud si však lze tyto aplikace dovolit, jsou jistě dobrou volbou.

7

DISKUZE

78

Co se týče použitého frameworku pro webdesign, byl v diplomové práci použit framework 960 Grid System od Nathana Smitha. Zde lze také nalézt mnoho alternativ, avšak pro tuto práci se jevil nejvhodnější právě 960 Grid System z důvodu jeho jednoduchosti a velkých možností jeho použití. Pro implementaci byl využit šablonovací systém Smarty napsaný v jazyce PHP, který slouží k oddělení prezenční a aplikační logiky. Jako alternativní volbu šablonovacího systému Smarty lze zvolit například systém Dwoo nebo Savant3. Při implementaci by bylo možné také využít některý z PHP frameworků jako je například PHP Cake nebo Zend. Bylo by možné využít i některého z CMS systémů jako je například Wordpress, Joomla nebo Drupal. Implementovaný systém však neoplývá zvlášť velkou složitostí a proto bylo přistoupeno k implementaci vlastními silami. Dalším důvodem byla zbytečná složitost PHP frameworků a CMS systému a také snaha získaní vlastních zkušeností s implementací systému. V budoucnu by bylo vhodné systém rozšířit o statistické vyhodnocování přístupů na stránky. Toho by mohlo být dosaženo vlastní implementací, což by však vyžadovalo jisté úsilí. Alternativou by mohlo být použití například Google Analytics. Jako další rozšíření by bylo vhodné zavést generování pdf dokumentů se seznamy vyrobených a poskytovaných video dokumentů.

8

8

ZÁVĚR

79

Závěr

Jak bylo uvedeno v úvodu tohoto dokumentu, cílem této práce byla inovace interního informačního systému Audiovizuálního centra Mendelovy univerzity v Brně. Podařilo se analyzovat současný stav systému, navrhnout změny a následně je namodelovat. Po těchto změnách bylo přistoupeno ke tvorbě grafického modelu a jeho převedení do webové šablony, do které se povedlo také začlenit prvky knihovny jQuery. Největší změna viditelná zvenčí se tedy týká grafického rozhraní a způsobu ovládání systému. Dále se podařilo zahájit implementaci aplikačního kódu v jazyce PHP a také se podařilo tento kód propojit se šablonovacím systémem Smarty vytvořeném rovněž v jazyce PHP, což vede k oddělení aplikační logiky od prezentační. Tyto kroky vedly k naplnění cíle této diplomové práce. Nyní už jen zbývá dokončit celou implementaci, dooptimalizovat systém pro výkon pomocí výše uvedených technik a jeho nové nasazení. Po analýze, modelování, tvorbě webové šablony bylo tedy přistoupeno k implementaci, na které se průběžně pracuje. Programová část aplikace je implementována pomocí skriptovacího jazyka PHP a databázového systému MySQL na serveru Apache. Server, na kterém systém poběží, je v plné správě Audiovizuálního centra a je umístěn v areálu Mendelovy univerzity v Brně. Rozpracovaná testovací verze systému je k dispozici na http://avc.mendelu.cz/beta_test/ a jeho administrační část na http://avc.mendelu.cz/beta_test/admin/. Příhlašovací jméno je admin a heslo admin. Současné stránky audiovizuálního centra jsou pak dostupné na http://avc.mendelu.cz/.

9

9

LITERATURA

80

Literatura

Ambler, S. W., UML 2 Class Diagrams [online]. 2010 [cit. 21. 4. 2011]. Dostupné z WWW: http://www.agilemodeling.com/artifacts/classDiagram.htm. Arandilla, R., Different Image Formats 8211; And When to Use Them [online]. 15. 3. 2011 [cit. 20. 4. 2011]. Dostupné z WWW: http://www.1stwebdesigner. com/design/different-image-formats/. Arlow, J., Neustadt, I., UML2 a unifikovaný proces vývoje aplikací: Průvodce analýzou a návrhem objektově orientovaného softwaru. Brno: Computer Press, 2007. 567 s. ISBN 978-80-251-1503-9. Castagnetto, J., Harish, R., Sascha, S., Chris, S., Deepak, V. PHP Programujeme profesionálně. Brno: Computer Press, 2002. 656 s. ISBN 80-7226310-2. Dash, R., Which CSS Grid Framework Should You Use for Web Design? [online]. 21. 5. 2008 [cit. 11. 4. 2011]. Dostupné z WWW: http://net.tutsplus.com/tutorials/html-css-techniques/ which-css-grid-framework-should-you-use-for-web-design/. Diaz, D., CSS Shorthand Guide [online]. 22. 10. 2005 [cit. 9. 5. 2011]. Dostupné z WWW: http://www.dustindiaz.com/css-shorthand/. Druska, P., CSS a XHTML: tvorba dokonalých webových stránek krok za krokem. Praha: Grada, 2006. 200 s. ISBN 80-247-1382-9. Hillyer, M., An Introduction to Database Normalization [online]. 2010 [cit. 18. 4. 2011]. Dostupné z WWW: http://dev.mysql.com/ tech-resources/articles/intro-to-normalization.html. Hozík, M. Úvod do platformy Adobe Flash [online]. 2011 [cit. 28. 3. 2011]. Dostupné z WWW: http://flash.jakpsatweb.cz/adobe-flash/. Kofler, M., Öggl, B. PHP 5 a MySQL 5: Průvodce webového programátora. Brno: Computer Press, 2007. 608 s. ISBN 978-80-251-1813-9. Lennartz, S., The Mystery Of CSS Sprites: Techniques, Tools And Tutorials [online]. 27. 4. 2010 [cit. 25. 4. 2011]. Dostupné z WWW: http://www.smashingmagazine.com/2009/04/27/ the-mystery-of-css-sprites-techniques-tools-and-tutorials/. Meyer, E., CSS Tools: Reset CSS [online]. 2011 [cit. 8. 5. 2011]. Dostupné z WWW: http://meyerweb.com/eric/tools/css/reset/. Miller, R., The Google CDN [online]. 2008 [cit. 23. 4. 2011]. Dostupné z WWW: http://www.datacenterknowledge.com/archives/2008/12/15/ the-google-cdn/.

9

LITERATURA

81

Mozilla Developer Network About JavaScript [online]. 24. 12. 1999 [cit. 28. 3. 2011]. Dostupné z WWW: https://developer.mozilla.org/en/ JavaScript/About_JavaScript. Mozilla Developer Network: Webové standardy [online]. 22. 2. 2010 [cit. 24. 3. 2011]. Dostupné z WWW: https://developer.mozilla.org/ index.php?title=cs/Webove_standardy. New Digital Group, Inc.: About Smarty [online]. 2010 [cit. 10. 4. 2011]. Dostupné z WWW: http://www.smarty.net/about_smarty. Odell, D. JavaScript: Průvodce programováním ajaxových aplikací. Brno: Computer Press, 2010. 368 s. ISBN 978-80-251-2733-9. Raggett, D., Clean up your Web pages with HTML TIDY [online]. 2011 [cit. 20. 4. 2011]. Dostupné z WWW: http://www.w3.org/People/Raggett/ tidy/. Schaeffer, K., CSS Font-Size: em vs. px vs. pt vs. percent [online]. 30. 8. 2008 [cit. 18. 4. 2011]. Dostupné z WWW: http://kyleschaeffer.com/ best-practices/css-font-size-em-vs-px-vs-pt-vs/. Sharp J., Burns R., Murphey R., Flesler A., Lindsey C., Sharp R., Hostetler M., Whitbeck R., Smith N., Cherne B., Zaefferer J., Padollsey J., González S., Gray M., Wachs M., Jehl S., Parker T., Toland P., Worth R. D. jQuery Kuchařka programátora. Brno: Computer Press, 2010. 440 s. ISBN 978-80-251-3152-7. Smith N., 960 Grid System [online]. 2011 [cit. 11. 4. 2011]. Dostupné z WWW: http://www.960.gs. Snell, S., Clear And Effective Communication In Web Design [online]. 3. 2. 2009 [cit. 11. 4. 2011]. Dostupné z WWW: http://www.smashingmagazine.com/ 2009/02/03/clear-and-effective-communication-in-web-design/. Sodomka, P., Informační systémy v podnikové praxi. Brno: Computer Press, 2006. 352 s. ISBN 80-251-1200-4. Sparx Systems, UML Tutorial [online]. 2011 [cit. 8. 5. 2011]. Dostupné z WWW: http://www.sparxsystems.com/uml-tutorial.html. The Dojo Foundation Dojo ShrinkSafe - the safe way to make your JS sprightly [online]. 2011 [cit. 23. 4. 2011]. Dostupné z WWW: http://shrinksafe. dojotoolkit.org/. The jQuery Project: jQuery [online]. 2010 [cit. 24. 3. 2011]. Dostupné z WWW: http://jquery.com/.

9

LITERATURA

82

Thomas, J., Web Design Trends in 2011 [online]. 4. 1. 2011 [cit. 20. 4. 2011]. Dostupné z WWW: http://www.webdesignledger.com/tips/ web-design-trends-in-2011. Vymětal, D., Informační systémy v podnicích: Teorie a praxe projektování. Praha: GRADA, 2009. 144 s. ISBN 978-80-247-3046-2. W3C Document Type Definition [online]. 24. 12. 1999 [cit. 28. 3. 2011]. Dostupné z WWW: http://www.w3.org/TR/html401/sgml/dtd.html. W3C Frameset Document Type Definition [online]. 24. 12. 1999 [cit. 28. 3. 2011]. Dostupné z WWW: http://www.w3.org/TR/html401/sgml/framesetdtd.html. W3C Transitional Document Type Definition [online]. 24. 12. 1999 [cit. 28. 3. 2011]. Dostupné z WWW: http://www.w3.org/TR/html401/sgml/loosedtd.html. W3C Web Content Accessibility Guidelines (WCAG) 2.0 [online]. 11. 12. 2008 [cit. 2. 5. 2011]. Dostupné z WWW: http://www.w3.org/TR/WCAG20/. w3schools Differences Between XHTML And HTML [online]. 2011 [cit. 26. 3. 2011]. Dostupné z WWW: http://www.w3schools.com/XHTML/ xhtml_html.asp. Wempen, F. HTML a CSS krok za krokem. Brno: Computer Press, 2007. 328 s. ISBN 978-80-251-1505-3.

Přílohy

A

A

CSS RESET

CSS reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after {

84

A

CSS RESET

content: ’’; content: none; } table { border-collapse: collapse; border-spacing: 0; }

85

B

DEFINOVÁNÍ ZÁKLADNÍCH TŘÍD V CSS

B

86

Definování základních tříd v CSS

.none .hidden .fl .fr .left .right .center .bold .italic .nomargin img

{ { { { { { { { { { {

display: none;} visibility: hidden;} float: left !important;} float: right !important;} text-align: left;} text-align: right;} text-align: center;} font-weight: bold;} font-style: italic;} margin: 0 !important;} border: none;}

/* -- Headlines -- */ h1, h2, h3 { font-weight: normal; } h1 { font-size: 2em; color: #fff; margin: 0 0 25px; } h1.subpage-title { font-size: 2.750em; font-weight: bold; padding-top: 27px; } h2 { font-size: 1.833em; color: #505050; margin: 0 0 20px; text-align: left; } h2.big { font-size: 2.5em; color: #0063a8; font-weight: bold; } h3 { font-size: 1.5em; color: #78be14; margin: 5px 0 10px; } /* -.cols .cols .cols

Cols layout -- */ { overflow: hidden; height: 100%; clear: both; } .col1 { float: left; } .col2 { float: left; }

.cols50 .col1 { float: left; width: 47% !important; } .cols50 .col2 { float: right; width: 47% !important; } .cols3 .cols3 .cols3 .cols3

.col1, .col2, .col3 { width: 33%; } .col3 { float: right; }

.cols4 .cols4 .cols4 .cols4

.col1, .col2, .col3, .col4 { float: left; width: 25%; }

.cols2v1 .col1 { width: 64%; margin-right: 4%; } .cols2v1 .col2 { width: 31%; }

B

DEFINOVÁNÍ ZÁKLADNÍCH TŘÍD V CSS

87

.cols1v2 .col1 { width: 31%; margin-right: 4%; margin-bottom: 20px;} .cols1v2 .col2 { width: 64%; margin-bottom: 20px;} hr { height: 1px; border: none; background-color: #f0f0f0; } a { color: #505050;}

C

C

VYBRANÉ UKÁZKY APLIKACE

Vybrané ukázky aplikace

Obr. 10: Ukázka ze sekce Fotogalerie

88

C


Obr. 11: Ukázka ze sekce Ke stažení - stažení loga

89

C


Obr. 12: Ukázka ze sekce Kontakt

90

Inovace interního informačního systému Audiovizuálního centra

Recommend Documents