Redesign webové stránky  · B hem studia jsem se nauil vytvářet statické a dynamické webové aplikace. Mimo školu se jiţ nkolik let zajímám o tvorbu webové grafiky, kterou

1

Vysoká škola ekonomická v Praze

Fakulta informatiky a statistiky

Vyšší odborná škola informačních sluţeb v Praze

Martin Voldřich

Redesign webové stránky www.Jinov.cz

Bakalářská práce

2011

2

Prohlášení

Prohlašuji, ţe jsem bakalářskou práci na téma „Redesign webové stránky

www.Jinov.cz.“ zpracoval samostatně a pouţil pouze zdrojů, které cituji a uvádím v

seznamu pouţité literatury.

V Praze dne 19. 12. 2011 ………………………………….

Martin Voldřich

3

Poděkování

Rád bych poděkoval Ing. Radimu Čermákovi za ochotu, trpělivost a věcné

připomínky, kterými mi výrazně pomohl při vypracování této bakalářské práce. Dále

bych chtěl poděkovat firmě Jinova s.r.o., potaţmo jejím zaměstnancům za poskytnutí

webové stránky pro realizaci redesignu. Osobní poděkování patří mé rodině a všem

přátelům, kteří mě po celou dobu studia plně podporovali.

4

Abstrakt

Cílem mojí práce je na základě teoretických poznatků navrhnout a realizovat

redesign internetové stránky firmy Jinova s.r.o. Stránka bude ve výsledku obsahovat

moderní design, nové funkcionální prvky, kvalitní informační design, jednoduchý

redakční systém a v neposlední řadě moderní SEO optimalizaci.

Nejprve bude nutné analyzovat současnou webovou stránku a určit její silné a

slabé stránky. Na základě výsledků analýzy vznikne nový vzhled, nová funkcionalita,

nově strukturovaný obsah a nově také základní SEO prvky.

V praktické části bude problematika řešena pomocí návrhu a na kódování

originálního webdesignu a za pomoci jazyků HTML, PHP, SQL s vyuţitím

kaskádových stylů CSS. Jak současná, tak mnou vytvořená verze webové stránky se

bude krátký čas analyzovat. Výstupem této analýzy by mělo být posouzení délky pobytu

návštěvníků mezi původní a mnou vytvořenou webovou stránkou.

5

Abstract

Primary goal of this work, based on my theoretical knowledge, is to redesign and

implement Jinova Ltd. websites. At first it will be necessary to analyze current website

condition and determine its strengths and weaknesses.

As a result, these pages will contain new functional elements, high-quality

information design, simple editorial management and finally modern SEO

optimalization.

This issue will be solved in the practical part by reforming the original

webdesign using HTML, PHP, SQL languages and Cascading Style Sheets (CSS). Both

the original site and the new one, created by me, will go through a short-term analysis.

The outcome of this analysis will be an assessment of both versions in aspect of visitors'

length of stay on these websites.

6

Obsah

POUŽITÉ ZKRATKY ......................................................................................... 9

1 ÚVOD ........................................................................................................... 11

2 TEORETICKÁ ČÁST - VYMEZENÍ POJMŮ ........................................ 12

2.1 ZÁKLADNÍ GRAFICKÉ POJMY ...................................................................... 12

2.1.1 Pixel .................................................................................................... 12

2.1.2 Typy vykreslovacích stylů ................................................................... 12

2.1.2.1 Bitmapová grafika ....................................................................... 12

2.1.2.2 Vektorová grafika ....................................................................... 12

2.1.3 Barevné modely .................................................................................. 13

2.1.3.1 RGB ............................................................................................ 13

2.1.3.2 CMYK ......................................................................................... 14

2.1.4 Formáty obrázků ................................................................................ 14

2.1.4.1 JPG .............................................................................................. 14

2.1.4.2 PNG ............................................................................................. 15

2.1.5 Fonty – písma ..................................................................................... 15

2.1.6 Software .............................................................................................. 15

2.1.6.1 Grafický software........................................................................ 15

2.1.6.2 Software pro editaci kódu ........................................................... 16

2.2 ZÁKLADNÍ POJMY FUNKCIONÁLNÍ ČÁSTI. .................................................. 16

2.2.1 HTML ................................................................................................. 16

2.2.1.1 Základní HTML Tagy ................................................................. 16

2.2.1.2 Základní příkazy ......................................................................... 17

2.2.2 PHP .................................................................................................... 18

2.2.2.1 Základní PHP skripty .................................................................. 18

2.2.3 MYSQL ............................................................................................... 19

2.2.3.1 Základní MYSQL příkazy .......................................................... 19

2.2.4 jQuery ................................................................................................. 20

2.2.5 Kaskádové styly CSS. ......................................................................... 21

3 ÚVOD DO SOUČASNOSTI....................................................................... 22

7

3.1 PRVNÍ NÁVŠTĚVA – HLEDÁNÍ OBSAHU ...................................................... 22

3.2 ROZDÍL PRVNÍ A OPAKOVANÉ NÁVŠTĚVY .................................................. 23

3.3 ORIENTACE NA WEBOVÉ STRÁNCE ............................................................. 23

3.4 ČTENÍ NEBO PROHLÍŢENÍ OBSAHU WEBOVÉ STRÁNKY? ............................. 24

3.5 REDESIGN ................................................................................................... 25

3.6 ÚČEL GRAFICKÉ ČÁSTI WEBOVÉ STRÁNKY ................................................ 25

3.7 SÉMANTIKA ................................................................................................ 26

3.8 INFORMAČNÍ DESIGN .................................................................................. 27

3.9 DŮLEŢITÉ PRVKY STRÁNKY ....................................................................... 27

3.9.1 Kompozice .......................................................................................... 27

3.9.2 Optický střed ...................................................................................... 28

3.10 KOMPOZICE TEXTU ................................................................................. 28

3.10.1 Zápatí a záhlaví .............................................................................. 29

3.10.1.1 Zápatí .......................................................................................... 29

3.10.1.2 Záhlaví ........................................................................................ 29

3.10.2 Navigace ......................................................................................... 29

3.10.3 Kontrast .......................................................................................... 30

3.11 BARVA A JEJÍ VLASTNOSTI...................................................................... 30

3.11.1 Tón barev ........................................................................................ 31

3.11.2 Světlost barvy .................................................................................. 31

3.11.3 Sytost barev ..................................................................................... 31

3.11.4 Barevné odstíny .............................................................................. 31

3.11.5 Rozdělení barev .............................................................................. 31

3.11.6 Zlepšení přehlednosti ...................................................................... 32

4 ANALÝZA A SPECIFIKACE POŽADAVKŮ ........................................ 33

4.1 ANALÝZA SOUČASNÉHO STAVU ................................................................. 33

4.2 POŢADOVANÁ FUNKCIONALITA ................................................................. 34

4.2.1 Diagramy ............................................................................................ 35

5 PRAKTICKÁ ČÁST ................................................................................... 39

5.1.1 Úvod ................................................................................................... 39

5.1.1.1 Návrh ........................................................................................... 39

8

5.2 SAMOTNÁ TVORBA ..................................................................................... 40

5.2.1.1 Volba barvy ................................................................................. 40

5.2.1.2 Optický střed ............................................................................... 41

5.2.1.3 Záhlaví ........................................................................................ 42

5.2.1.4 Zápatí .......................................................................................... 42

5.2.2 Některé další grafické prvky ............................................................... 43

5.2.2.1 Logo ............................................................................................ 43

5.2.2.2 Ostatní grafické prvky ................................................................ 43

5.2.2.3 Navigace ..................................................................................... 44

5.3 SÉMANTIKA ................................................................................................ 45

5.4 FUNKCIONALITA......................................................................................... 47

5.4.1 Banner ................................................................................................ 47

5.4.2 MYSQL ............................................................................................... 50

5.4.2.1 Zakládání tabulek ........................................................................ 50

5.4.2.2 Zobrazení dat .............................................................................. 51

5.4.2.3 Vkládání ...................................................................................... 51

5.4.2.4 Mazání záznamů ......................................................................... 51

5.5 POPIS PHP APLIKACÍ .................................................................................. 52

5.5.1 Aplikace pro přidávání referencí ....................................................... 52

5.5.1.1 Zobrazení referencí ..................................................................... 53

5.5.2 Přidání referencí, strojů a technologií ............................................... 53

5.5.2.1 Zobrazení referencí, strojů a technologií .................................... 57

5.5.2.2 Systém pro načtení a následnou interpretaci dokumentů ........... 58

5.5.2.3 Aplikace pro zaloţení galerií. ..................................................... 59

6 ZÁVĚREČNÁ ANALÝZA ......................................................................... 61

7 ZÁVĚR ......................................................................................................... 63

8 SEZNAM LITERATURY A POUŽITÝCH ZDROJŮ ........................... 65

9 SEZNAM PŘÍLOH ..................................................................................... 68

9

Použité zkratky

CMYK - Cyan, Magenta, Yellow, Black model

CS5 - Creative Suite 5

CSS - Kaskádové styly

GIF - Graphics Interchange Format

HTML - HyperText Markup Language

ISO - International Organization for Standardization

JPG - Joint Photographic Experts Group

JQuery - JavaScript framework

M+R - Sestavné větrací a vytápěcí jednotky

MTP - Kompaktní ohřívače vzduchu

MYSQL - My Structured Query Language

PHP - Hypertext Preprocessor

PNG - Portable Network Graphics.

RGB - Red Green Blue model

SEO - Search Engine Optimization

SQL - Structured Query Language

SŘBD - Systém řízení báze dat

UML - Unified Modeling Language

URL - Unique Resource Locator

10

11

1 Úvod

Téma redesign jsem si vybral za účelem spojení znalostí získaných při studiu

a znalostí získaných mimo školní výuku. Během studia jsem se naučil vytvářet statické

a dynamické webové aplikace. Mimo školu se jiţ několik let zajímám o tvorbu webové

grafiky, kterou bych chtěl implementovat do internetové stránky. Celá práce by měla

dokázat odpovědět na otázku: Proč je stejně důleţitý vzhled stránky jako její obsahová

a funkční část.

Teoretická část bude obsahovat některá obecná ustanovení, která nám řeknou,

jak vytvořit působivý design a přesto neporušovat pravidla, při tvorbě moderní webové

aplikace. V praktické části bude předělána stránka www.Jinov.cz, tak, aby vyhovovala

současným trendům a funkcím. Hlavními prvky výsledné webové stránky budou:

grafický návrh, informační design a nová funkcionalita vytvořená v kódu HTML,

s prvky Java skriptů, PHP kódu s vyuţitím databázového jazyka MYSQL

a kaskádových stylů CSS. Vzhled nové stránky bude tvořen kombinací estetické

grafiky, lépe strukturovaného obsahu a moderní funkčnosti.

Praktickou část rozdělím na několik kapitol, které vyuţiji při tvorbě webové

stránky. Kapitoly se postupně zabývají aplikací teoreticky získaných zkušeností do

praxe. V bakalářské práci jsem se zaměřil na pro mě tři nejdůleţitější prvky: Tvorbu

vizuálního vzhledu, funkcionalitou celé aplikace a v neposlední řadě sémantiku.

Všechny grafické i funkcionální prvky budou obsaţeny v datové příloze

bakalářské práce.

12

2 Teoretická část - Vymezení pojmů

V této části bych se chtěl věnovat vysvětlením některých důleţitým pojmům

z oboru vývoje webových aplikací a grafiky.

2.1 Základní grafické pojmy

2.1.1 Pixel

Nejmenší jednotka digitální grafiky. Reprezentuje jeden barevný bod tištěného

dokumentu nebo jeden svítící bod na obrazovce.

2.1.2 Typy vykreslovacích stylů

Počítač zpracovává obrázkové informace dvěma základními způsoby. První

technologie se nazývá bitmapová a druhá vektorová.

2.1.2.1 Bitmapová grafika

Bitmapová grafika je tvořená malými čtverečky, kterým se říká pixely.

Kombinace většího počtu těchto uspořádaných barevných čtverečků vytváří smysluplný

obraz. Kaţdý čtvereček má určitou číselnou hodnotu, která určuje barvu. Optimální

příklad bitmapového obrazu je fotka. V některých zdrojích se bitmapové grafice říká

rastrová.

2.1.2.2 Vektorová grafika

Obraz ve vektorové grafice je definován vektorem. Tedy počátečním bodem,

směrem a délkou cesty křivky.

Tvar křivky je určen body, které jsou umístěny podél cesty. Data o umístění

a délce křivky jsou reprezentovány číselnými hodnotami. Dále se k těmto hodnotám

přidávají hodnoty definující barvy a tloušťky čar. Vektorové obrázky obsahují pouze

popis hodnot jednotlivých bodů, proto je hlavní výhoda libovolné zmenšování či

zvětšování bez ztráty kvality. Spojením několika křivek dosáhneme vytvoření

smysluplného obrázku. Srovnání vektorové i bitmapové grafiky jsem znázornil na

obr č. 1.

13

Obr č. 1. Rozdíl vektorové a bitmapové grafiky.

2.1.3 Barevné modely

Barevný model slouţí k popisu základních nebo respektive míchaných barev.

Skládá se vţdy ze čtyř částí. První část tvoří dopadající světlo a další tři části pak dané

barvy.

2.1.3.1 RGB

Barevný model RGB (Red, Green, Blue – červená, zelená, modrá; viz obr. č. 2)

je zaloţen na třech základních barvách, jejichţ skládáním můţeme získat všechny

ostatní barvy.

Barevný model RGB odpovídá barevným receptorům lidského oka. Model RGB

je ideální pro zobrazení barev na obrazovce nebo monitoru. V barevném modelu RGB

se na rozdíl od modelu CMYK barvy přidávají k černé. Základní barvy schématu svítí

na černé stínítko a tím zobrazují danou barvu. Čím se přidá větší počet barev, tím se

výsledek víc blíţí k bílé.

Obr č. 2. RGB model.

14

2.1.3.2 CMYK

Barevný model CMYK (Cyan, Magenta, Yellow, Black – azurová, purpurová,

ţlutá černá; viz obr. č. 3) je zaloţený na vyuţití čtyř tiskových barev. V barevném

modelu CMYK se pro zobrazení barev vyuţívá opačný postup, respektive barvy se

přidávají k bílé. Vyuţití barev závisí na předpokladu bílého pozadí. Pozadí odráţí

všechny barvy na něj dopadající. Čím větší je nanesená vrstva barev, tím se dostáváme

blíţe k černé. V praxi se CMYK vyuţívá pro téměř veškeré tiskové stroje.

Obr č. 3. CMYK model.

2.1.4 Formáty obrázků

Formát je způsob organizace dat uloţených ve formě souboru. Soubory

digitálních obrázků lze ukládat hned několika formáty např.: JPG, PNG, BPM a mnoho

dalších. Zaměřím se však jen na formáty, které jsem vyuţil při tvorbě praktické části.

2.1.4.1 JPG

Nejrozšířenější formát pro vizuální reprezentaci bitmapových obrázků. Jedná se

o ztrátový formát, kde výsledná kvalita obrázku závisí na míře komprese. Ztrátová

komprese můţe být pouţita záměrně, ale častěji se jedná o neţádoucí vlastnost. Barevná

hloubka formátu JPG je 16.7 milionu barev, proto se stala ideální pro reprezentaci fotek.

Formát JPG neumoţnuje průhlednost ani polo průhlednost obrázků.

15

2.1.4.2 PNG

Formát PNG vyuţívá vylepšený bezztrátový systém komprese. Barevná hloubka

je aţ 48bitů, jenţ odpovídá 281474976710656 počtu barev. Přesto se PNG nejčastěji

vyuţívá s hloubkou 24b, coţ odpovídá 16.7 milionu barev. Hlavní výhodou oproti

formátu JPG je, ţe PNG disponuje osmibitovou průhledností. Objekt se tak můţe stát

polo nebo zcela průhledným. Vlastnosti PNG formátu umoţní zapisovat obrázky

s dokonalou přesností a průhledností. Přesto je na některých velkých barevných

plochách vhodnější vyuţit formát JPG, zejména kvůli datové velikosti.

2.1.5 Fonty – písma

Písmo se pouţívá na vizuální zápis jazyka se symboly[1]. Písma se rozdělují do

dvou základních skupin. První skupina se nazývá patková a druhá bezpatková.

V současné době existuje nespočet druhů písmen. Pro webové účely se pouţívají

zásadně písma, která podporuje nejrozšířenější operační systém windows. Jsou to písma

typu: ARIAL, Verdana, Tahoma, Times new roman, Georgia, Courier, Comic sans MS.

2.1.6 Software

2.1.6.1 Grafický software

Adobe Fireworks CS5

Aplikace Adobe® Fireworks® je víceúčelový nástroj pro vytváření, úpravy

a optimalizaci webové grafiky. S jeho pomocí lze vytvářet a upravovat jak vektorové, tak

bitmapové obrazy, navrhovat webové efekty (efekty přechodu a rozbalovací nabídky),

ořezávat a optimalizovat grafiky, popřípadě zmenšit velikost cílového souboru. Čas je

ušetřen automatizací opakujících se úkolů. Dokument lze exportovat nebo vložit jako

soubor JPEG, GIF, nebo v jiných formátech. Tyto soubory lze uložit společně se

soubory HTML obsahujícími tabulky HTML a kód JavaScript tak, aby je bylo možné

používat na webu [2].

16

2.1.6.2 Software pro editaci kódu

Adobe Dreamweaver CS5

Adobe Dreamweaver nabízí podporu nejnovějších standardů, kombinací

nástrojů a funkcí. Dále návrh webových stránek, vývoj dynamických aplikací či přímou

práci s kódem. Umožňuje vytvářet weby, které vyhovují současným standardům.

Navrhovat webové stránky lze vizuálně, nebo přímo psaním kódu. Vyvíjet jdou stránky

se systémy pro správu obsahu a díky integraci se službou Adobe BrowserLab, která je

součástí online služby Adobe CS Live, lze testovat kompatibilitu s prohlížeči. Pomocí

funkce Live View můžeme vidět prováděné změny v HTML či CSS v reálném čase.

V nabídce je split režim, kde jsou k dispozici dvě okna. Jedno obsahuje grafiku, druhé

zdrojový kód stránky. Nebo také efektivní našeptávač, usnadňující psaní kódu [3.]

2.2 Základní pojmy funkcionální části.

2.2.1 HTML

HTML – (HyperText Markup Language) je značkovací jazyk pro tvorbu

webových stránek. Jako kaţdý jiný jazyk, tak i HTML jazyk obsahuje tagy neboli

značky. Spojením HTML tagů s obsahovou sloţkou dostává stránka význam.

V současnosti byla uvedena do provozu revoluční verze HTML 5.

2.2.1.1 Základní HTML Tagy

HTML tagy neboli znaky se zapisují do hranatých závorek a vkládají se před

a případně za obsahovou část. U některých syntaxí se vyuţívají atributy neboli

vlastnosti zapsaného tagu. Tagy se dále rozdělují na párové a nepárové.

Párová značka

Tag <div> značí začátek.

Taga </div> určuje konec.

Mezi začátek a konec tagu se vkládá obsahová část.

Nepárová značka

Značka <br /> obsahuje začátek i konec tagu.

17

2.2.1.2 Základní příkazy

Znakových tagů v HTML jazyce existuje celá řada. V bakalářské práci se

zaměřím pouze na ty základní, případně na ty, které jsem vyuţil v praktické části.

Znak <html></html> určuje začátek a potaţmo konec stránky.

Tagy <head></head> slouţí k oddělení hlavičky webové stránky.

Tag <body></body> slouţí k oddělení těla webové stránky.

<h1></h1>

Nadpisy se zapisují tagy h1, h2, h3, h4, h5 a h6. h1 je nadpis první úrovně zatímco H6

je nadpis nejniţší úroveň. Nadpisy dále přestavují nejvýznamnější komunikační faktor

s vyhledávači. Nadpisy úrovně <h> musí odpovídat obsahu webové stránky a tím jí

zajistit kvalitní za indexování.

Tag <p></p> slouţí k oddělení samotného odstavce.

Značka <br /> zajištuje zalomení textu.

Tagy <b></b> označují tučné písmo (Bold)

<div>

Div je úsek stránky, kde se můţou nacházet texty, formuláře, obrázky atd. Tento tag se

nejčastěji vyuţívá s kombinací kaskádových stylů.

Tag <a> znázorňující odkaz, ke kterému neodmyslitelně patří atribut href.

Značka <img> pouţíváme pro vkládání obrázků.

<ul>

<li> </li>

</ul>

Tag <li> označuje jednotlivé poloţky v seznamu.

Tag <ul> se vyuţívá pro vytvoření seznamu poloţek.

18

<table>

<tr></tr>

<td></td>

<th></th>

</table>

Tag <table> vytváří tabulku. Tagy <tr> <th> tvoří elementy záhlaví a zápatí tabulky.

Tag <td> se pouţívá u tabulek k vytváření jednotlivých buněk. Zmíněné syntaxe v praxi

vlastní hned několik atributů.

2.2.2 PHP

PHP (Hypertext Preprocessor) je skriptovací jazyk, který je určen pro tvorbu

dynamických internetových stránek. Veškeré procesy PHP kódu jsou prováděny na

straně serveru a uţivateli poskytnou aţ výsledek činnosti, coţ deklaruje bezpečnost naší

aplikace. PHP je technologie, která je volně šiřitelná a je nezávislá na technologické

platformě. PHP se často kombinuje s ostatními kódy jako například HTML, MYSQL

atd.

2.2.2.1 Základní PHP skripty

Stejně jako v HTML existuje celá řada skriptů v PHP. V bakalářské práci se

zaměřím pouze na ty základní, případně na ty, které jsem vyuţil v praktické části.

<?php

?>

Tag určující část, kam se vkládá php syntaxe.

ECHO „text“;

Nejčastěji pouţívaných příkaz, který má za úkol vytisknutí jednoho či více řetězců.

Require (umístění);

Příkaz slouţící k načtení skriptu z jednoho souboru do jiného. Uţívá se hlavně, pokud

se vyuţívá stejná funkce ve více skriptech. Změna provedená v requirovaném souboru,

se projeví ve všech souborech, kde je vloţený daný příkaz require(). Vyskytuje se

hlavně u opakovaných příkazů jako například: menu, připojení k databázi, atd.

19

If, else (podmínka)

Příkaz if, else je jeden z nejčastěji vyuţívaných příkazů v jazyce PHP. Příkaz zjišťuje,

zda je daná podmínka pravdivá. Pokud ano spustí proces 1, ve všech ostatních

případech spustí proces 2. V některých případech se cyklu přidává příkaz elseif. Příkaz

elseif umoţňuje odpovídat na několik podmínek.

if → { spustí se proces 1}

else → { spustí se proces 2 }

$proměná

Proměnná nebo také proměnlivá hodnota slouţí k uchování řetězců či hodnot. V Php

jazyce proměnná funguje podobně jako paměť.

Databáze

Databáze je strukturovaný soubor dat. S pojmem databáze je úzce spjat pojem SŘBD

(systém řízení báze dat). SŘBD je nástroj, kterým můţeme data v databázi ukládat,

mazat nebo měnit.

2.2.3 MYSQL

MYSQL je nejpouţívanější relační SŘBD pro internetové aplikace. Komunikace

bází probíhá pomocí jazyka SQL. Hlavní výhoda MYSQL je moţnost přímé

komunikace s jazykem PHP.

2.2.3.1 Základní MYSQL příkazy

Následně bych chtěl shrnout jen několik základních příkazů nebo pojmů, které

jsem vyuţil v praktické části bakalářské práce.

CREATE table produkty;

Při pouţití příkazu zaloţíme tabulku s názvem produkty.

Drop table produkty;

Tento příkaz smaţe tabulku produkty.

20

Select * from produkty;

Tento příkaz vybere všechny data z tabulky produkty.

insert into produkty (nazev) values ("tiskárna");

Tento příkaz přidává do poloţky název tabulky produkty záznam tiskárna

Limit 0, 4

Funkce vypíše pouze určitý počet záznamů. První hodnota značí, na jakém místě čítání

začne. Druhá hodnota značí počet záznamů.

Auto_increment

Výraz, který při kaţdém vloţení zvýší hodnota o jednu hodnotu.

Integer

Datový typ označující celé číslo.

Varchar(hodnota)

Datový typ označující textový řetězec s velikostí zadané hodnoty.

primary key

Primární mezení umoţňující jednoznačně identifikovat záznam v tabulce.

Omezení Primary key musí být v tabulce alespoň jednou stanoveno.

IS NOT NULL

Operátor nenulové hodnoty.

IS NULL

Operátor nulové hodnoty.

2.2.4 jQuery

JQuery je poměrně nová technologie, která usnadňuje psaní aplikací

v javascriptech. Veškeré procesy se provádí na straně uţivatele. Výhodou je kombinace

funkčnosti HTML a jQuery nezávisle na sobě. To umoţní vytvářet dynamické funkce

bez opakovaného načtení webové stránky.

21

2.2.5 Kaskádové styly CSS.

CSS - (Cascading Style Sheets) je výčet metod pro grafickou úpravu webové

stránky. V současnosti se kaskádové styly stále častěji pouţívají jako dynamické prvky

(viz. dynamické kaskádové styly).

22

3 Úvod do současnosti

V současnosti většina velkých i malých firem vyuţívá pro prezentaci svých

výrobků a sluţeb webové stránky. Bohuţel konkurence je v dnešní době značně vysoká,

ať uţ se jedná o jakékoli produkty. Jiţ nezáleţí pouze na tvrdě pracujících

zaměstnancích, popřípadě na dobrém jméně firmy, ale také na prezentaci firmy jako

takové. Důvodů, proč by měla firma vlastnit webovou prezentaci, je hned několik.

Jeden z nejzávaţnějších argumentů je stále zvyšující se počet uţivatelů internetu.

Návštěvník webových stránek můţe být budoucím zákazníkem nebo dokonce

obchodním partnerem.

Internet se stal ideálním prostorem, kde lze prezentovat nejlepší a nejucelenější

informace o firmě svým zákazníkům. Důleţité je však také zváţit otázku konkurence na

webovém prostoru. Abychom dokázali s konkurencí drţet krok, musíme se neustále

vyvíjet. Na internetu je konkurence víc neţ kdy předtím a do budoucna se zdá, ţe

situace nebude jiná. Jak píše Steve Krug ve své knize: „Na internetu je konkurence

vzdálená jen jedno kliknutí, takže pokud uživatele znechutíte, zamíří jinam.“[4]

O internetové stránce si návštěvník dokáţe vytvořit podvědomý názor za několik

desetin vteřiny. Jiţ za tak krátkou dobu si podvědomě přenese hodnocení na stupeň

důvěry a ta rozhodne, jestli bude pokračovat v návštěvě našeho webu nebo jednoduše

překlikne na konkurenci. Negativům předejdeme vytvořením moderního, přehledného

a originálního vzhledu, díky kterému se lépe dostane do podvědomí návštěvníka. Pokud

ke kvalitnímu vzhledu webové stránky přidáme stejně kvalitní obsah, pak se návštěvník

začne na náš web opakovaně vracet. To však stále závisí na prvním, potaţmo celkovém

dojmu, který na uţivateli zanecháme.

3.1 První návštěva – Hledání obsahu

Zatímco v předchozí části se spíše jednalo o celkový dojem z webových stránek.

Nyní musíme návštěvníkovu pozornost upoutat především správným rozmístěním,

barevností a grafickými prvky, kde hrají velkou roli i ty nejmenší detaily. „Když se

uživatel pohybuje v neznámém prostředí, je zásadní, aby mu grafika pomohla k dobré

orientaci“[5].

23

3.2 Rozdíl první a opakované návštěvy

Při opakované návštěvě ztrácí pro uţivatele originální design svoji úlohu, přesto

je vizuální stránka stále důleţitá. Vzhled musí následně slouţit pro návštěvníka jako

neomylné vodítko, kde se vlastně nachází. Grafické prvky nesmějí odpoutávat

návštěvníkovu pozornost od obsahu. Dále by uţivatel neměl být rušen zvuky nebo

donekonečna opakujícími se animacemi. Pro stálé návštěvníky se v konečném důsledku

můţe stát nadbytek grafických elementů spíše na obtíţ. Na obrázcích č. 4 a č. 5 se

snaţím demonstrovat rozdíl prvního a opakovaného vstupu na webovou stránku pomocí

diagramů.

Obr č. 4. První návštěva uživatele. Obr č. 5. Opakovaná návštěva uživatele.

3.3 Orientace na webové stránce

Dobrá orientace je základem úspěšné webové stránky. Dosáhneme ji dodrţením

správného oddělení některých hlavních elementů: navigace, obsahu od pozadí, obrázků,

atd. Vţdy je dobré mít na paměti, ţe i přes vkládání více nesourodých textů na jednu

stránku musíme zachovat správné rozvrstvení obsahů a přehledných nadpisů. Vhodné je

rozvrhnout obsah po celé ploše webové stránky a tím předejít výskytu prázdných míst.

Důleţité je hlavní prvky umístit tak, aby je návštěvník našel co nejrychleji

a nejjednodušeji. V neposlední řadě nesmíme zapomenout na efektivní zvýraznění

ostatních elementů, jako jsou podnadpisy a odkazy.

24

Na obrázku č. 6 demonstruji cílené hledání obsahu. Uţivatel prochází jednotlivé

podsekce ve snaze najít cílený obsah. Při neúspěšném pokusu se návštěvník se vrací

o úroveň výš, případně stránku opouští. Tomuto chceme vţdy předejít.

Obr č. 6. Orientace návštěvníka na webové stránce, který hledá obsah.

3.4 Čtení nebo prohlížení obsahu webové stránky?

Jedna z nejlépe dokumentovaných pravd o používání webu říká, že lidé stráví jen

velmi krátkou dobu čtením webových stránek.[6] Realita je taková, ţe uţivatel si stránku

prohlíţí a pátrá po slovech, které upoutají jejich pozornost. (viz. Obr. č. 7)

25

Obr č. 7. Čtení webových stránek – počet přečtených slov podle Jakoba Nielsona.

3.5 Redesign

Redesign je proces, jehoţ výsledkem je přeměna některých nebo všech fází

předcházejícího stavu. Webovým redesignem obvykle vytvoříme nový vzhled,

přijatelnější informační obsah a případně novou funkčnost. Redesign se provádí

zpravidla po několika letech. Několik základních důvodů proč se aplikuje redesign se

pokusím shrnout v následujících bodech.

- Vzhled nevyhovuje současným trendům.

- Změna firemní identity.

- Stránka nedosahuje vytyčených obchodních cílů.

- Špatně strukturované informace, nebo informace které se nedají najít.

- Nízká návštěvnost webu.

- Přidání funkcí nebo obsahu a aplikace do současného designu není moţná.

3.6 Účel grafické části webové stránky

Grafický vzhled je jednou ze tří nejdůleţitějších sloţek úspěšného webu, proto

jej musíme kvalitně a originálně zpracovat. Jak jsem se zmínil v úvodu, návštěvník se

nejprve rozhoduje podvědomě a toho se musí vyuţít. Design se musí stát snadno

26

zapamatovatelným a tím donutit uţivatele, aby se vraceli. Hlavním účelem grafického

vzhledu je usnadnit orientaci uţivatele webové stránky. Není dobré, kdyţ grafické

elementy znepříjemňují návštěvu uţivatele. Vzhled musí na první pohled vyjádřit,

o jakou stránku se jedná a co je jejím účelem. Je vhodné členit informace do několika

obsahových částí, aby se vzhled stal pro uţivatele více přehledným. V neposlední řadě

musí design prezentovat vizuální identitu firmy a tím pomáhat k propagaci i na webu.

3.7 Sémantika

Sémantika by se dala charakterizovat jako, strukturovaní informací a uloţení

textu podle standardizovaných pravidel. Téma sémantiky je spojeno zejména

s informacemi, které mají předem definovaný význam a tím pomáhají při zpětném

vyhledávání. Pro správnou sémantiku musíme vyuţívat několik následných pravidel:

- nadpisy označovat značkami <h1> až <h6>, nikoliv pouhým vizuálním

formátováním

- odstavce se vytvářejí značkou <p>, nikoliv pomocí <div>, ani odřádkováním

<br />

- pro zdůraznění textu slouží tagy <strong> nebo <em>, nikoliv hrátky

s kaskádami

- někdy se hodí značky pro logické formátování jako např. <address> nebo

<cite>

- navigace se definuje pomocí seznamu <ul>, případně speciální značkou

<menu>

- tabulky slouží tabulkovým datům, nikoliv pro vizuální formátování

- formuláře mají svůj řád a příslušné značky <fieldset>, <legend>, <label>[7]

Výsledná kvalitní webová stránka musí být spojením poutavého vzhledu,

kvalitního obsahu a bezchybné funkcionality spojené v jeden celek.

Při tvorbě webového designu nesmíme zapomenout na základní elementy, jako

jsou: grafické vyjádření identity firmy, dodrţení přehlednosti a hlavně zajištění

stoprocentní funkčnosti.

27

3.8 Informační design

Hlavním úkolem informačního designu je poskytnout informace tak, aby je

dokázal návštěvník najít, potaţmo rychle a kvalitně vstřebat. Slovy Dirka Knemeera:

„Pamatuj, že informace mají hodnotu jen tehdy, jsou-li úspěšně sděleny. Nelze-li se

k nim dostat, nebo jim porozumět, hodnotu nemají.“[8]

Obsah musí vţdy projít několika procesy, jako jsou třídění, uspořádaní a vhodné

pojmenování, aby se stal kvalitním. S informačním designem se setkáme nejen na

internetových stránkách, ale také u knih, časopisů nebo novin.

Při aplikaci správného informačního designu se musí nejprve rozdělit obsah do

několika hlavních sekcí, případně podsekcí. Struktura stránky se musí logicky rozčlenit

do několika částí. Kaţdá část musí být jednoznačně nadepsaná. Dále je důleţité, aby

kaţdý odstavec pojednával o jednom tématu. Kaţdá podsekce musí nadřazenou sekci

zkonkrétňovat nebo zobecňovat. U Jednotlivých stránek nesmí chybět jasně definovaný

název a hlavní nadpis. Stejně jako v sémantice je vhodné dodrţovat určitou

hierarchickou strukturu nadpisů. Následné odráţky demonstrují hlavní výhody

informačního designu:

- Návštěvníci se snadno zorientují a rychle naleznou hledanou informaci.

- S dobrou informační strukturou se lépe pracuje.

- Dobře provedený informační design umoţňuje lepší pozici ve vyhledávačích.

3.9 Důležité prvky stránky

3.9.1 Kompozice

Kompozice, nebo takzvaná vizuální logika, je jeden ze základních předpokladů

dobrého vzhledu u webdesignu, ale i v mnoha jiných grafických i negrafických oborech.

Webový designer musí znát alespoň základní kompoziční pravidla, aby dokázal správně

rozmístit grafické prvky tak, aby upoutaly nebo nasměrovaly návštěvníkovu pozornost.

„Správná hierarchie prvků i obsahu je také důležitá, neboť je určitá neviditelná ruka,

která vede oči návštěvníka stránkou. Kvalitní kompozice prvků tedy dokáže určit

prioritu informací a rozlišit jednotlivé prvky stránek.“ [9]. Dodrţením těchto

kompozičních pravidel dosáhneme zvýšení struktury přehlednosti.

28

3.9.2 Optický střed

Optický střed je místo, kam nejprve pohlédne oko pozorovatele. Místo optického

středu se jednoduše zjistí podle takzvaného optického řezu. Optickým řezem se myslí

imaginární linka v první a druhé třetině výšky strany. Optický střed je nejvhodnější

místo pro umístění nadpisů, krátkého textu o několika řádkách, či obrazového prvku,

který má výrazně poutat pozornost.[10] Optický střed se často zaměňuje za střed

geometrický, coţ je však nesprávně. Sazba postavená na geometrický střed stránky

vyvolává dojem „padání“ sazby. Rozdíl mezi optickým a geometrickým středem jsem

naznačil na obr č. 8.

Obr č. 8. Rozdíl optického a geometrické středu.

3.10 Kompozice textu

Nejjednodušším nástrojem pro dosaţení přehlednosti je kompozice textu.

Obecně platí základní stručné pravidlo, jimž dosáhneme příjemného vizuálního účinku:

Vzdálenost textu od okrajů rámečku, barevných ploch aj by měla být vždy větší než

mezera mezi slovy či řádky (řádkový proklad).[11]

Pro lepší vzhled nadpisů a podnadpisů se v některých případech vyuţívají

29

vyrovnání mezipísmenných mezer. Jde o vyrovnávací sazbu mezi dvojicí znaků písmen,

které se říká Kerning. Cílem vyrovnávání je zlepšení optického dojmu z textu.

Dalším nástrojem pro zdokonalení kompozici textu je prázdné místo neboli

White-space. Prázdné místo se řadí mezi grafické elementy a pouţívá se zejména pro

zpřehledňování webové stránky bílou plochou.

3.10.1 Zápatí a záhlaví

3.10.1.1 Zápatí

Zápatí neboli patička je ukončovací prvek webové stránky. Jedná se o prostor

pod obsahovou částí webové stránky. Zpravidla se do zápatí umisťuje: mapa webu,

kontaktní informace, copyright, stáří, vlastník nebo krátké shrnutí obsahu. Patička má

kromě ukončovacího prvku také za úkol přesměrovat uţivatele na jinou obsahovou

stránku.

3.10.1.2 Záhlaví

Záhlaví se pouţívá jako prostor nad obsahovou sloţkou internetové stránky. Do

webové hlavičky se vkládá navigace, loga, nadpisy, ale hlavně informace o tom kde se

návštěvník nachází. Hlavička by měla dále slouţit jako vstupní prvek pozornosti

návštěvníka.

3.10.2 Navigace

Navigace je kombinací grafického a funkčního prvku, který zpřístupňuje ostatní

sekce webové stránky. Ostatních sekce zpřístupňují jiný obsah neţli stránka první, proto

je moţnost odkazování důleţitá.

Další důleţitou vlastností navigace je poskytování informace, kde se návštěvník

webové stránky nachází. Navigace musí pro správnou funkci splňovat několik zásad,

které cituji z příručky praktický webdesign.

a) Navigace musí vypadat jako navigace – ráda se ukazuje, je velmi dobře

rozeznatelná na první pohled a nikdy se neschová.

b)

30

c) Navigace se nikdy nesmí hnout z místa, kde se návštěvníkovi poprvé zjevila – musí

být vždy stejná a na stejném místě.

d) Navigace je exhibicionista – ráda se ukazuje, je velmi dobře rozeznatelná na první

pohled a nikdy se neschová.

e) Navigace se nachází v horní části stránky – měla by být vidět bez rolování, nejlépe

tedy umístěna horizontálně pod záhlavím či vertikálně po levé straně.

f) Navigace vždy obsahuje odkaz na první stránku, aby návštěvník, který ve svém

vyhledávání neuspěje, mohl začít znova.

g) Navigace používá zavedené či zjednodušené termíny, na které jsou uživatelé zvyklí,

vyhýbáme se tedy odborným výrazům a nezvyklým slovním spojením.

h) Navigace logicky řadí své položky – položky navigace by měly být řazeny dle

určitého systému a logiky, kterou poté nejširší skupinu uživatelů bez problému intuitivně

pochopí.[12]

3.10.3 Kontrast

Kontrast je vzájemné postavení dvou nebo více dostatečně rozdílných částí téže

kvality.[13]. Webová stránka vyuţívá kontrast při rozdělení grafických elementů do

většího počtu celků. Odděluje tedy hlavní prvky od ostatních a celkově vizuálně

organizuje obsah webové stránky. Nejběţněji je kontrast pomocí barev, přesto se lze

setkat i s kontrastem jasu.

3.11 Barva a její vlastnosti

„Barva je vjem, který je vytvářen viditelným světlem dopadajícím na sítnici

lidského oka.“[14]. Barvy umoţnují dokonale obohatit celkový vzhled webové stránky.

Barvy dokáţí ovlivnit spoustu faktorů jako například: pocity, atmosféru, náladu atd.

Volba barevného setu je moţná mnoha způsoby. Barvy se však často vybírají

zejména podle instinktu či typu webové stránky. Přesto mnoho webdesignerů vybírá

barvu převáţně podle psychologie barev.

Barva má hned několik úkolů. První úloha je barevné odlišení naší stránky od

konkurence. Dále by barvy měli jednoznačně oddělit elementy pozadí od obsahu,

nadpisu či odkazů. Na webových stránkách by se měl objevit barevný set zaloţený na

31

maximálně 4 barvách. Dobře zvolené barvy výrazně pozdvihnout kvalitu a originalitu

webového designu. Pokud však zvolíme nevkusnou kombinaci barev, sníţíme vizuální

kvalitu webové stránky.

V příloze přikládám výčet některých základních barev obohaceny

o psychologický účinek.

3.11.1 Tón barev

Ton barvy je vlastnost, která určuje vlnová délka světla. Jednoduše by se dalo

říct, ţe tón barvy nám určuje, název barvy. Přesto je vlastnost spojená s funkcí

zrakových receptorů a vlnovou délkou světla.

3.11.2 Světlost barvy

Světlost barvy nám znázorňuje odraz světla od dané barvy do sítnice oka.

Světlost barvy se určuje intenzitou barevného vjemu. [15]

3.11.3 Sytost barev

Barevná sytost se určuje šířkou barevného tonu, který se odráţí do receptoru

lidského oka. Sytost barev se dá jednoduše měnit pomocí přidání bílé sloţky. Čím větší

hodnota bílé barvy se přidá do barevného spektra, tím se barva stává bledší.

3.11.4 Barevné odstíny

Barevný odstín se vytvoří pomocí míchání dvou nebo více barevných sloţek.

Výsledným barevným kombinacím se v některých případech nazývá lomená barva.

Míchání barev pomocí bílé barvy dosáhneme zpravidla světlejšího tónu. Naopak

míchání pomocí černé barvy tmavého odstínu.

3.11.5 Rozdělení barev

Barvy nemají pouze své fyzikální vlastnosti, ale některé vlastnosti byly barvám

přiřazeny podle tzv. ţivotních zkušeností. Podle vlastností přiřazených lidmi

rozdělujeme barvy na teplé, studené, neutrální, aktivní, pasivní, zimní, letní, jarní

podzimní, atd.

32

3.11.6 Zlepšení přehlednosti

Některé důleţité grafické elementy jako například menu, logo, odkazy, atd. by se

měli na webové stránce opakovat. Dosáhneme tím lepší vizuální přehlednosti, která

pomůţe orientaci uţivatele na webové stránce.

33

4 Analýza a specifikace požadavků

4.1 Analýza současného stavu

Obr č. 9. Současný stav webové stránky Jinov.cz

Firma Jinova s.r.o. vlastní v současné době jednoduché webové stránky. Stránky

jsou kódované v jazyce HTML za pomocí kaskádových stylů CSS. Na první pohled je

zřejmé, ţe webová stránka má několik let zastaralý vzhled viz obr. č. 9. Stránka

obsahuje fotografie svých produktů a technologií, které nejsou příliš kvalitně

zpracované. Poukázal bych na velké nedostatky, kterými jsou například nevýrazné logo,

nic neříkající banner, viditelně nepřesné spojení tabulek hlavičky a těla, matoucí spodní

34

kontaktová lišta a hlavně špatné kompoziční pravidlo. Jednou z dalších nedokonalostí

jsou nevýrazné a v některých případech dokonce špatně pojmenované sekce webové

navigace. Informace, které by se mohl návštěvník dozvědět, jsou velice nepřehledně

rozmístěné. Obsahová část webové stránky je v některých kapitolách nedostačující.

Dále postrádám prokříţení hlavních odkazů, jeţ zhoršuje pozici při fultextovém

vyhledávání. Velkým nedostatkem bych hodnotil zjevné rozdělení grafických prvků do

tabulkového layoutu, který znehodnocuje veškerou doposud vytvořenou sémantiku.

Webová stránka obsahuje tři jazykové mutace, které jsou vyhovující současné

funkčnosti, fotografie svých produktů a technologií, a několik souborových příruček pro

návštěvníky ke staţení. Chtěl bych poukázat na absenci redakčního systému, který by

velice usnadnil přidávání nových informací, produktů nebo kontaktů. Po podrobnějším

přezkoumání je zřejmé, ţe web neobsahuje ţádnou sémantickou navigaci a zároveň

chybí část, která komunikuje s vyhledávači. Dá se jednoduše zjistit, ţe webová stránka

není optimalizovaná krom Mozila Firefox, na ţádné jiné webové prohlíţeče. I přes řadu

nedokonalosti je systém plně funkční. Vzhledem k tomu, ţe tvorba stávajících

webových stránek byla realizována před několika lety, nebude moţné vyuţít ţádné části

současného kódu.

4.2 Požadovaná funkcionalita

Prvořadým cílem bylo splnit poţadavky zadavatele, tedy firmy Jinova s.r.o.

Zadavatel si přál vytvořit webovou stránku s plnou funkčností, přehledností

a v neposlední řadě s moderním vzhledem. Detailnějším poţadavkem bylo vytvoření

redakčního systému s moţností budoucí editace.

Od začátku jsem zadavateli avizoval, jaké technologie vyuţiji pro tvorbu

webové stránky, abych předešel nesrovnalostem s vnitrofiremní úpravou. Při tvorbě

grafické části se tvůrce obvykle setkává s mnoha nařízeními, které demonstrují firemní

identitu. V mém případě jsem měl pouze povinnost dodrţet barevnou identitu firmy.

Proto jsem pro vytvoření vzhledu vyuţil plně své dosavadní zkušenosti.

Poţadavky na vytvoření interního redakčního systému byly následující:

- Systém měl obsahovat tři jazykové mutace pro vkládání dokumentů, referencí,

strojů, technologií a samostatně vytvářející galerie. Kaţdý ze zmíněných systémů by

měl být něčím specifický.

- Vkládání souborů mělo mít funkci detekce typu vloţených souborů.

35

- Systémy pro vkládání obrázků musely dokázat měnit velikosti a tím vytvářet

miniatury.

- Systém pro tvorbu galerií nesměl postrádat funkci zvětšení.

V některých případech bylo zřejmé, ţe aplikace bude vyuţívat většího mnoţství

dat a obrázků, proto bylo nutností vytvořit stránkování obsahu.

Pro lepší pochopení redakčního systému a potaţmo celé webové stránky jsem si

vytvořil několik jednoduchých diagramů. Z diagramů je evidentní, kolik bude stránka

obsahovat sekcí pro vlastní funkčnost.

4.2.1 Diagramy

V této kapitole znázorním některé diagramy, které jsem vyuţil při tvorbě

webové stránky www.Jinov.cz. K tvorbě UML diagramů jsem vyuţil program

PowerDesigner 15.3.1

Obr č. 10. Diagram - Menu administrátor. Obr č. 11. Diagram - Menu uţivatel.

Diagramy na obrázku č. 10 a obrázku č. 11 znázorňují moţnosti jednotlivých

tlačítek navigací. Na obrázku č. 10 je znázorněno tlačítko administrátora. Na obrázku

č. 12 je reprezentován výčet uţivatelských tlačítek.

36

Obr č. 12. Diagram - Menu administrátor.

Obr č. 13. Diagram use case aplikací pro vkládání technologií, strojů a referencí

produktu M+R , MTP.

37

Diagram na obr. č. 13 znázorňuje interakci mezi návštěvníkem a administrátorem na

jedné webové stránce. Administrátor má moţnosti přidávání upravování nebo mazání

obsahu. Návštěvník do obsahu nemůţe zasáhnout proto je jen v roli pozorovatele.

38

39

5 Praktická část

5.1.1 Úvod

V teoretické části jsem shrnul několik důleţitých pravidel a pojmů pro tvorbu

webové aplikace. V praktické části bych se chtěl zaměřit převáţně na prvky, které byly

v současném stavu nekvalitně zpracovány a tím docílit funkci redesignu. Podle mého

názoru je nejslabší sloţkou vzhled, proto designu věnuji zvýšenou pozornost. Dále se

pokusím zaměřit na pasáţe, které osobně povaţuji za důleţité nebo do jisté míry

přínosné. V praktické části budu prezentovat vţdy jen zlomky tvorby, ať uţ kódu nebo

kreslených prvků. Nyní se přesunu rovnou k nejdůleţitější části a to k tvorbě.

5.1.1.1 Návrh

Před samotnou tvorbou webové stránky je dobré si nejprve vytvořil jednoduchý

náčrt rozmístění všech prvků a webových součástí. Návrh má za úkol najít nejvhodnější

a nejlogičtější rozmístění jednotlivých elementů webové stránky. Slouţí také hned

v několika budoucích fázích tvorby jako například: tvorba vzhledu, kompozice textu,

umístění grafických elementů, atd. Náčrt webové stránky jsem vytvořil na obr č14.

V návrhu jsem rozmístil a zvýraznil některé grafické prvky a předběţně jsem stanovil

barvy.

Existují i některé další moţnosti, jak vytvořit elegantní vzhled. Jedna z moţností

je vyuţití detailní fotografie nebo případně přímé tvorby bez návrhu, a to rozmístěním

v grafickém editoru.

Při rozmístění webové stránky jsem vyuţil několik grafických prvků, které jsem

popsal v teoretické části (viz. kapitoly 3.8.3 aţ 3.9.2):

- Logo jsem vyhodnotil jako nadřazený prvek, a tím pádem bude aplikováno

nejvýše ze všech grafických prvků.

- V pravé části figurují tlačítka jazykových mutací, které musejí mít nadřazený

charakter odkazu.

- Navigaci jsem zvolil horizontálního tvaru, převáţně kvůli typu webové

stránky.

- Banner bude fungovat jako klasický odkaz na stránku s produkty. Banner dále

bude fungovat jako ukončovací bod horní části stránky.

- Obsah těla zahrnuje několik oddílů textu s kombinací obrázků.

40

- Uprostřed těla webové stránky jsem navrhl grafický rozcestník odkazovací na

několik jiných stránek. Odkazuje na hlavnější poloţky jako např. reference, produkty

a dokumenty ke staţení.

V návrhu jsem předpokládal, ţe umístím mapu odkazů, miniaturu mapy

a krátkou prezentací firmy, do zápatí stránky, která bude slouţit k lepší SEO

optimalizaci. Pro budoucí tvorbu, návrh jistě prozatím postačí.

Obr č. 14. Skica návrhu webové stránky.

5.2 Samotná tvorba

Vzhled celé webové stránky jsem vytvořil v grafickém softwaru Adobe

Fireworks. Jako adekvátní náhrada grafického softwaru je např. Adobe Photoshop nebo

Corel Draw. O programu Adobe Fireworks jsem se zmínil v teoretické části, proto se

tomuto programu nechci nadále věnovat.

5.2.1.1 Volba barvy

Nyní nadešel čas, kdy musím zvoliv barevnou kombinaci pozadí, grafických

elementů, obsahu, atd. Zadavatel poţadoval udrţení určitého barevného rozsahu, přesto

kombinaci nechal na mém úsudku. Firemní identita firmy Jinova s.r.o. tvoří ţlutou

barvu odstínu #F7C315 a modrou barvu v odstínu #222F63. K dobarvení grafických

elementů jsem vyuţil bílou barvu s kombinací odstínu šedi. Na pozadí se zpravidla

vyuţívají světlejší barvy, proto jsem ţlutou barvu pouţil jako pozadí celého webu. Pro

41

zvýraznění výrobního oboru firmy, jsem vloţil do pozadí vektorový obrázek

strojírenského návrhu vřetena. Pro Grafické prvky neobsahující obsahovou část, jsem

vyuţil barvy tmavšího odstínu a to zejména zmíněné modré případně odstíny šedé.

Jak jsem se zmínil v teoretické části, s počtem barev na webové stránce se to

nesmí přehánět, proto v návrhu vyuţiji pouze barvy a jejich odstíny. Barevná

kombinace je demonstrována na obrázku č. 15.

Obr č. 15. Barevná kombinace žluté (#F7C315) a modré (#222F63).

5.2.1.2 Optický střed

Horní části webové stránky jsem přizpůsobil tak, aby první pohled návštěvníka

na webové stránce spočinul na banneru(viz bod č. 1. Obr č. 16.). V mém případě má

banner za úkol shrnout podstatu produktu a následně na daný produkt návštěvníka

přesměrovat. Samozřejmostí pro dobře zpracovaný banner je kvalitní fotka a moţnost

přelistování obsahu banneru. Na obrázku č. 16. je znázorněna aplikace optického středu

na webové stránce.

Obr č. 16. Aplikace optického středu.

42

5.2.1.3 Záhlaví

S pojmem záhlaví se v současnosti u webdesignu setkáme jen zřídka. Přesto

jsem jako pomyslné hlavičky vloţil Logo, navigaci a odkazy na jazykové mutace viz

obr. č. 17.

Obr č. 17. Záhlaví webové stránky.

1 znázorňuje Logo firmy Jinova s.r.o. Logo funguje jako odkaz, přesměrující

návštěvníka na úvodní stránku dané jazykové lokace.

2 skrývá horizontální navigace. O navigaci jsem pojednával v teoretické části

bakalářské práce.

3 poukazuje na ikony odkazující na jednotlivé jazykové mutace. Při

přesměrování se změní jazyk celé stránky včetně obsahu navigace i patičky.

5.2.1.4 Zápatí

Zápatí webové stránky by mělo obsahovat náleţitosti, které jsem uvedl

v teoretické části. Na obrázku č. 18 vysvětlím funkce jednotlivých prvků obsaţených

v patičce webové stránky.

Obr č. 18. Zápatí webové stránky.

1 skrývá text, který krátce vystihuje čím, se stránka zabývá a co na ní uživatel

najde. Přínos tohoto krátkého textu je zejména sémantického charakteru. Z vlastní

zkušenosti mohu říct, že webový vyhledávač bude lépe komunikovat s krátkým výstižným

textem, který se nachází v patičce než s textovým obsahem. Druhou výhodou je odkaz

pře směrující návštěvníka na první stranu.

43

2 slouží jako informativní prvek pro návštěvníka. Návštěvník vidí, kolik webová

stránka obsahuje podstránek. Zároveň se může návštěvník rychle přesměrovat na jiný

obsah. Mapa odkazů také zpřehledňuje design.

3 jsem využil jako odkaz pro rychle přesměrování do kontaktů webové stránky.

V kontaktech lze najít i větší verzi dynamické mapy.

4 obsahuje rychlý kontakt na firmu Jinov s.r.o. Rychlý kontakt usnadňuje

návštěvníkovi případnou komunikaci s firmou. Hlavním úkolem je však stejně jak v bodě

č. 1 hlavně sémantika webu.

5.2.2 Některé další grafické prvky

5.2.2.1 Logo

Jinova s.r.o. nevlastnila vektorovou podobu loga. Proto jsem logo do vektorů

detailně překreslil ze současného webu. Jak uţ jsem v bakalářské práci psal, vektory

neztrácí kvalitu a tím si značně ulehčím manipulaci. Výsledek překreslení je moţno

vidět na obrázku č. 19.

Obr č. 19. Evoluce grafického prvku - Logo

5.2.2.2 Ostatní grafické prvky

Na následujících obrázcích demonstruji evoluci důleţitých grafických prvků

vyuţitých na webové stránce. Prvky byly vykresleny pomocí vektorových křivek.

V mém případě jde o tlačítka (obr. č. 20), vlajky (obr. č. 21) a ohraničení fotek (obr. č.

22). Přidělaná čísla popisují stav vývoje.

Obr č. 20. Evoluce grafického prvku - tlačítko.

44

Obr č. 21. Evoluce grafického prvku - vlajka.

Obr č. 22. Evoluce grafického prvku - ohraničení fotek.

5.2.2.3 Navigace

Při tvorbě navigace jsem zvaţoval několik moţných variant. V počátku jsem

zvaţoval implementaci navigace rolovací, ale zejména kvůli malému počtu podsekcí

a velké podobnosti produktů jsem vytvořil menu „klasické“ bez moţnosti rolování

podsekcí.

Odkazy jsem poskládal podle důleţitosti jednotlivých stránek. Pro pojmenování

kategorií jsem vyuţil běţně pouţívané výrazy, abych nepodpořil dezorientaci

návštěvníka. Jednotlivé poloţky jsem nepřeplňoval texty a vyuţíval jsem krátké jasně

definující pojmy.

Vytvořil jsem téţ grafické podoby přechodu poloţky, aby bylo zjevné, kam se

uţivatel přesměruje případně, kde se nachází. Některé poloţky jako např. reference

firem a reference strojů jsem spojil do jednoho odkazu, pro lepší orientaci návštěvníka.

Vzhled navigace jsem demonstroval na obrázku č. 23.

Obr č. 23. Navigace webové stránky – obrázek je pouze ilustrativní, navigace obsahuje.

více položek.

1 informuje uživatele, na jaké položce se nachází.

2 znázorňuje, kam jednotlivá položka přesměruje návštěvníka

3 poukazuje na jednoduchost názvu zvolených pro navigaci

4 odkazuje na přesměrování do administrátorské sekce

45

5.3 Sémantika

Sémantiku jsem popsal jiţ v teoretické části, proto bych se v současné chvíli

chtěl věnovat praktickému vyuţití. Základním pravidlem pro vytvoření správné

sémantiky je vyuţití HTML značek výhradně pro definici nadpisů, textů, odkazů

odráţek, atd. Pro definici vzhledu se pouţívají naopak výhradně značky kaskádových

stylů. Pro správnou sémantiku je také podstatné aby při formátování neobsahovala

stránka párové značky <table> nebo je vyuţívala jen ve výjimečných případech. Avšak

pro reprezentaci tabulkových dat stránka zmíněnou značku obsahovat musí. Na

následujících obrázcích vysvětlím některé značky, které správná sémantika vyţaduje.

Obr č. 24. Sémantika webové stránky – horní část.

Aplikací sémantických pravidel jsem začal hned na začátku webové stránky, jak

je moţno vidět na obrázku č. 24. Párovou značkou <a> jsem znázornil odkazy. Značka

odkazu přilákává zejména roboty jednotlivých vyhledávačů. Robot pouţívá odkazy

stejně jako návštěvník, jen s výjimkou sběru data z obsahu. Po sběru se obsah zpracuje.

Takovému procesu se říká indexování. Značku <a> jsem vyuţil pro odkazování na

stránky, které jsem uznal za důleţité. Tím jsem stránkám jako „O nás“, „Produkty“

přidal určitou prioritu.

Párová značka <ul> obecně sloţí jako seznam. V sémantice se pouţívá na

rozlišení odkazů navigace a obyčejných odkazů.

Párová značka <h1> slouţí jako hlavní nadpis a tím má pro roboty i pro

fulltextové vyhledávání prioritní postavení.

46

Obr č. 25. Sémantika webové stránky – Tělo webové stránky

Na obrázku č. 25. je znázorněno několik párových značek <p>. Značky

zarovnávají text do odstavce. Hlavní výhoda spočívá v dobré komunikaci Fulltextových

vyhledávačů s obsahem.

O párové značce <h> jsem se zmínil v minulém odstavci. V následujícím

případě se však jedná o párovou značku <h2>. Značka <h2> na rozdíl od značky <h1>

má prioritu druhého řádu.

Párový znak <ul> a značky <ul> jsem, uvedl v kapitole 2.7.2. Jen dodám, ţe

seznamové značky mají v sémantice nadřazenou prioritu oproti odstavcovým značkám

<p>.

Obr č. 26. Sémantika webové stránky – Spodek a záhlaví webové stránky.

47

Na obrázku č. 26. jsem demonstroval správné vyuţití sémantiky v patičce

webové stránky. Oproti horní, potaţmo prostřední části jsem vyuţil jen několik značek,

které jsem prozatím nevysvětlil. Jsou to zejména nadpisy niţší hierarchických úrovní

<h4> a <h5>. Na sémanticky správné webové stránce se nesmějí opakovat nadpisy

stejné úrovně. Roboti samy nedokáţí určit prioritu jednotlivých nadpisů a tím můţeme

získat status nedůvěryhodného webu při indexování.

Pro status sémanticky správně vytvořeného webu musíme do hlavičky vloţit

informace o stránce, které se nazývají HTML metadata. Metadata obsahují informace

o autorovi, popisek stránky, ale hlavně informace pro roboty. Na obrázku č. 27. Jsou

znázorněny správně vyplněna metadata.

Obr č. 27. Sémantika webové stránky – META data v hlavičce webové stránky.

7. řádek na obr. č. 27. znázorňuje název stránky. 8. Řádek reprezentuje

jazykovou sadu. 9. Řádek zajišťuje vypnutí neestetického tlačítek starých internetových

prohlíţečů. 10. řádek neukládat do hodnoty do vyrovnávací paměti počítače. Řádky

č. 11. a 12. Reprezentují klíčová, které je vhodné mít správně vyplněné jako například:

vyţívat maximálně 6 slov, správně definované výrazy atd. 13. řádek znázorňuje bliţší

popis webové stránky. Řádek č. 14. reprezentuje informace o tom, zda a jakým

způsobem mají roboti indexovat. 15. Řádek slouţí k nastavení, jak často chceme

aby, náš web navštěvovali roboti vyhledávačů. 16. Řádek přidává miniaturu k URL

adrese.

5.4 Funkcionalita

5.4.1 Banner

Banner byl vytvářen v kódu Jquery. Hlavní funkcí banneru je informování,

listování a odkazování. Listování v banneru se provádí na straně uţivatele, proto nemá

48

ţádné negativní vlastnosti na vytíţenost systému. Hlavní vlastnosti jazyku Jquery jsem

jiţ uvedl v teoretické části, proto se zaměřím na vysvětlení některých značek a funkcí.

Pro tvorbu banneru jsem našel a vyuţil podrobný návod, který je moţný najít na adrese

www.dlocc.com. Přesto, ţe jsem banner vytvářel podle návodu, povedla se mi vytvořit

rozdílná funkce přechodu. Autor návodu listoval s celým obsahem nevyjímaje pozadí.

Já jsem pomocí několika změn, převáţně v kódu HTML dosáhl listování pouze

obsahem bez pozadí. Tím jsem dosáhl výrazně lepšího vzhledu funkčnosti webové

banneru. Funkčnost banneru je zajištěna pomocí tří souborů. První sloţka je Jquery

knihovna, která lze stáhnout na adrese http://jquery.com. Druhá je kombinací HTML

a Javascritpu a třetí samotné Jquery.

Obr č. 28. Jquery kód banneru.

Na obrázku č. 28 je znázorněná třetí, funkční část banneru. Funkci následujícího

kódu nechci rozebírat do detailů převáţně proto, ţe jsem na jeho zhotovení vyuţil

návod. Přesto se pokusím některé celky více přiblíţit.

V bodě 1. jsem zadal proměnlivé hodnoty banneru.

Druhý bod zajištuje výčet obrazových přechodů včetně obsahu, odkazů

a obrázků.

Třetí bod nám stanovuje funkčnost přechodu, která je spojená zejména

s přesouváním objektů.

Čtvrtá část definuje tlačítka přechodů.

49

Pátá určuje rychlost a velikost přechodu. Dále se pokusím vysvětlit druhou část

banneru a to kombinaci HTML s prvky Javaskriptů.

Obr č. 29. Javaskript banner.

První řádek obrázku č. 29 odkazuje na Jquery knihovnu (viz. první sloţka

banneru).

Druhý řádek odkazuje na funkční část banneru viz předcházejí popis.

Řádek 4. - 7. zajištuje základní funkci spojenou s velikostí banneru.

Obr č. 30. Javaskript banneru.

Na obrázku č. 30 a řádku 10. – 29. Slouţí k přidávání textů, odkazů, popisků

a fotek.)

Obr č. 31. Obr č. Javaskript banner.

50

Na obrázku č. 31. Řádek č. 30 – 34 zajišťuje funkčnost tlačítek pro rolování

obsahu banneru.

5.4.2 MYSQL

Některé základní příkazy jsem vysvětlil v kapitole 2.9.1. Zaměřím se tedy na

konkrétní situace, kde jsem vyuţil jazyk MYSQL. Z důvodu podobnosti MYSQL

příkazů vyuţiji pro názorný příklad pouze jeden příklad od zakládání, zobrazení

upravování a mazání. Ostatní příkazy budou obsaţeny v elektronické příloze ve sloţce

MYSQL.

5.4.2.1 Zakládání tabulek

Nejprve jsem zaloţil tabulky pro vkládání dat. Pomocí tabulky mtp se na stránce

reference _MTP.php bude zobrazovat popis dle jazykové mutace a odkazovací cestu

k obrázku dané reference.

Obr č. 32. Obr č. MYSQL zakládání tabulek.

První aţ šestý řádek obrázku č. 32 znázorňuje základní příkaz pro zaloţení

tabulky mtp. Tabulka mtp bude obsahovat následující záznamy: id, cesta, popis_CZ,

popis_EN, popis_DE.

Na šestém řádku bylo nastaveno povinné primární omezení pro atribut id.

Při naplnění tabulky daty budou záznamy obsahovat:

id - id slouţí jako jednoznačný identifikátor celého řádku.

Atribut cesta bude obsahovat pomyslný odkaz k předem uloţenému obrázku.

Atribut popis bude obsahovat popis produktu v českém jazyce.

Atribut popis_EN bude obsahovat popis produktu v anglickém jazyce.

Atribut popis_DE bude obsahovat popis produktu v německém jazyce.

51

5.4.2.2 Zobrazení dat

Zobrazení databázových záznamů je nejčastější databázový proces. V MYSQL

se příkaz select vyuţívá pro výběr dat, která následně chceme zobrazit.

Následující příkaz zobrazí data umístěná v tabulce stroje.

Obr č. 33. Obr č. MYSQL zobrazení záznamů.

Příkazem select zvolím záznamy, které zobrazím ve výsledném výčtu

(viz. obr č. 33). V mém případě jde o záznamy cesta a popis_CZ. Limit je příkaz pro

omezující operand, který začne zobrazovat od 0-tého, aţ po 4 prvek.

5.4.2.3 Vkládání

Obr č. 34. Obr č. MYSQL vkládání záznamů.

Na obrázku č. 34, je zobrazen příkaz pro vkládání jednotlivých záznamů. Příkaz

vloţí do tabulky záznam s hodnotami: default, popis, popis_EN, popis_DE, datum.

Hodnota default přidělí atributu jedinečnou číselnou hodnotu.

5.4.2.4 Mazání záznamů

Při odstranění některých záznamu vyuţijeme příkaz delete.

¨

Obr č. 35. Obr č. MYSQL mazání záznamu.

Na obrázku č. 35 je zobrazen příkaz, který odstraní záznam z tabulky

reference_firmy, který je roven jednoznačnému identifikačnímu číslu 4.

52

5.5 Popis PHP aplikací

V praktické části bakalářské práce jsem zhotovil několik aplikací, které jsem

spojil v jeden ucelený redakční systém. Funkce jednotlivých aplikací se v některých

případech opakuje, proto je bezpředmětné popisovat všechny aplikace. Některé aplikace

jsou velice rozsáhlé, proto popíši jen některé důleţité části. Veškeré PHP příkazy všech

aplikací budou obsaţeny v elektronické příloze.

5.5.1 Aplikace pro přidávání referencí

Aplikace pro přidání reference se skládá ze dvou částí. Jedna část je vytvořená

jen pro administrátora. Druhá část je určena pro návštěvníky webové stránky.

Administrátor můţe pomocí redakčního systému vkládat názvy firem, s kterými firma

Jinov s.r.o. spolupracuje. Návštěvníkovi se zobrazí výčet firemních názvů.

Obr č. 36. Obr č. PHP přidání názvu reference.

Na obrázku č. 36 je zobrazen kód vkládající název reference do databáze. Na

řádku 2. – 7. Je znázorněná hlavička PHP dokumentu. Hlavička obsahuje připojení

k databázi, nastavení jazykového kódování, odkaz na kaskádové styly a v neposlední

řadě proměnou, která získává hodnotu POST s formuláře. Mezi 9. a 21. Řádkem je

samotný kód, který přidává záznam do databáze. Pro eliminaci prázdných záznamů

jsem vytvořil jednoduchou If >0.

53

5.5.1.1 Zobrazení referencí

Na obrázku č. 37 je zobrazen náhled reference firem, které si můţe návštěvník

prohlíţet. Data jsou obsaţena v databázi, odkud se pomocí PHP kódu zobrazují. Na

obrázku č. 38 je zobrazen samotný kód.

Obr č. 37. Obr č. Zobrazení názvu reference.

Obr č. 38. Obr č. Zobrazení názvu reference PHP kód.

Na obrázku č. 38 bych chtěl upozornit na č. 11. Řádek, kde jsem si vytvořil

podmínku řádkování záznamů. Výsledek podmínka lze vidět na předešlém obrázku

č. 37. Je evidentní, ţe výsledek se řádkuje do čtyř sloupců a tím dojde k ušetření místa

(viz kapitola 3.2.3.).

5.5.2 Přidání referencí, strojů a technologií

Aplikace jsem pouţil pro přidávání seznamu strojů, pracovišť a referencí strojů.

Reference strojů se dále rozlišuje na stroje MTP a M+R. Aplikaci funguje následně:

Administrátor přidá náleţité popisy s obrázkem do aplikace. Aplikace obrázek

přetypuje na JPG formát a upraví velikost na předem nastavitelné rozměry. Aplikace

54

také současně vytvoří miniaturu velkého obrázku. Miniatura se vyuţije jako náhled

v administrátorské sekci. Oběma obrázků aplikace změní název, aby nedocházelo

k duplicitě. Následně aplikace obrázky uloţí do rozdílných sloţek. Veškerá data, která

administrátor zadá do popisů a informace o názvu a cestě se odešlou do databáze.

Obrázek se vyuţije při zpětném zobrazení návštěvníka daného stroje nebo reference.

Obr č. 39. Obr č. Diagram aktivit aplikací pro vkládání technologií, strojů a referencí

produktu M+R , MTP.

Na obrázku č. 39. jsem znázornil diagram aktivit samotné aplikace. Celou

aplikaci jsem vytvořil pomocí spojení několika skriptů z knihy 1001 tipů a triků pro

PHP od Jakuba Vrány. Skripty jsou v některých částech hodně sloţité. Přesto jsem

skripty poupravil tak, aby vyhovovali mému uţití. V knize je většina skriptů dokonale

popsána proto si myslím, ţe je zbytečné abych parafrázoval autora. Přesto poukáţu na

základní prvky zmíněné aplikace.

55

Obr č. 40. Obr č. Zobrazení aplikace přidávání seznamů.

Na obrázku č. 40 dob č. 1 znázorňuje proměnné poloţky. Bod č. 2 poukazuje na

MYSQL dotaz, za pomocí kterého přidává aplikace data do databáze.

Obr č. 41. Obr č. Zobrazení změny formátu a velikosti.

56

Na obrázku č. 41 je znázorněna část kde se obrázek mění velikost. Dále se v této

části mění typ formátu obrázku.

Obr č. 42. Obr č. Nastavení umístění a velikosti miniatury.

Na obrázku č. 42 se pod bodem č. 1 skrývá nastavení rozměrů miniatury. V bodě

č. 2 je moţno nastavit typy souborů, které se vkládají do aplikace. Bod č. 3 pouze

vypisuje texty při porušení přiřazených podmínek. V bodě č. 4 se nastavuje umístění,

kam se uloţí miniatura obrázku.

Obr č. 43. Obr č. Nastavení umístění a velikosti obrázku.

Na obrázku č. 43 bod č. 1 znázorňuje nastavení velikosti obrázku. Bod č. 2

znázorňuje umístění obrázku.

57

Obr č. 44. Obr č. Formuláře aplikace.

Na obrázku č. 44. znázorňuji kód, který obsahuje všechny potřebné formuláře pro

funkci webové aplikace.

5.5.2.1 Zobrazení referencí, strojů a technologií

Při reprezentaci popisů a obrázků jsem vytvořil malou aplikaci, která funguje

jako takzvané stránkování. Stránkování se obyčejně pouţívá k prezentaci neurčitého

počtu záznamů, kde jsou stanoveny pevné rozměry stránky. Hlavní výhodu toho

stránková shledávám, ţe velká část procesů se provádí v databázích. Na obrázcích č. 45

a č. 46 bych chtěl vysvětlit základní funkčnost aplikace řádkování.

Obr č. 45. Obr č. Aplikace pro stránkování.

58

Na obr. č. 45 bod č. 1 znázorňuje SQL skript pro zjištění počtu celkových

záznamů. Bod č. 2 poukazuje na proměnné hodnoty. Bod č. 3 vypisuje počet záznamů

z databáze. V tomto případě jde o 4 hodnoty. Bod č. 4 znázorňuje podobný sql dotaz

s výjimkou proměnlivé hodnoty. Pomocí dotazu, který je pod bodem č. 1 můţeme

jednoduše regulovat, jaká část záznamu se nám bude zobrazovat. Bod č. 5 reprezentuje

počátek cyklu.

Obr č. 46. Obr č. Aplikace pro stránkování druhá část.

Na obr č. 46 dob č. 1 znázorňuje, odkud se fotky načítají do konečného výčtu.

Bod č. 2 poukazuje na podmínku, která zabraňuje, aby se na výčtu stránek objevila 0.

Bod č. 3 znázorňuje levé tlačítko přechodu mezi stránkami. Bod č. 4 vytváří tlačítka

počtu stránek podle celkového počtu záznamů. Bod č. 5 znázorňuje tlačítko posunu

vpřed.

5.5.2.2 Systém pro načtení a následnou interpretaci dokumentů

Mnou tvořený redakční systém obsahuje také aplikaci na ukládání potaţmo

stahování dokumentů z webového prostoru. Aplikace funguje následovně:

Administrátor vloţí, do formuláře typu file soubor. Následně administrátor zadá

tříjazyčné popisky, které se odešlou pomocí příkazu do databáze. Soubor se přejmenuje

59

a uloţí do předem stanovené sloţky. Administrátor můţe obdobným způsobem soubory

mazat.

Pro lepší návštěvníkovu orientaci jsem vytvořil řetězec, který detekuje koncovky

vkládaných souborů. Jednotlivé koncovky (například: pdf, jpg, doc, atd.) vlastní

rozdílnou ikonu při zobrazení.

Obr č. 47. Obr č. Aplikace pro vkládání souborů

Na obr. č. 47 znázorňuje bod č. 1 je proměnné hodnoty. Bod č. 2 pokazuje na název

a cestu, kam se soubor uloţí. Na obr. č3 je moţno vidět příkazy vkládající data do

databáze. Na obr. č 48 je reprezentováno rozdílné zobrazení ikonek.

Obr č. 48. Obr č. Aplikace pro vkládání souborů – rozdílné ikony souborů.

5.5.2.3 Aplikace pro založení galerií.

Aplikace má za úkol vytvořit pomocí několik obrázků, vloţených do sloţky ucelenou

obrázkovou galerii. Funkce funguje následně: Administrátor nakopíruje obrázky na

webový prostor. Aplikace vytvoří zmenšeniny obrázků, ke kterým připojí odkazy pro

zvětšení do plné velikosti. Návštěvník, následně můţe obrázky otevírat a zavírat jako

v běţně obrázkové galerii.

60

Obr č. 49. Obr č. Aplikace pro zobrazení obrázků – Kód.

Na obrázku č. 49 pod bodem č. 1 se skrývá konfigurace sloţky, odkad se budou obrázky

načítat. Bod č. 2 znázorňuje zobrazovací cyklus. Bod č. 3 reprezentuje příkaz, který

zajištuje zobrazení pouze 4. miniatur v horizontálním řádku. Na obrázku č. 50 je moţné

vidět výslednou aplikaci v provozu.

Obr č. 50. Obr č. Aplikace pro zobrazení obrázků – zobrazení

Pro kompletní funkci redakčního systému se vyuţívá větší počet typově podobných

aplikací. Z důvodů obsáhlosti všech aplikací, jsem naznačil pouze některé typy, které se

následně typově opakují. Veškeré aplikace budou obsaţeny v datové příloze, která bude

přiloţena k bakalářské práci.

61

6 Závěrečná analýza

Před samotnou implementací nové mnou tvořené verze webové stránky jsem aplikoval

na několik týdnů některé statistické moduly. Po implementaci mnou tvořené verze jsem

samozřejmě aplikoval statistický modul. Pro statistický modul jsem vyuţíval sluţby

produktu google analytics. Bohuţel výsledky analýzy nebudou do plné míry

vypovídající, převáţně kvůli krátkému času analyzování nového stavu. Přesto je

u některých přehledových segmentů zřejmý rozdíl. Na obrázku č. 51 obrázku

demonstruji rozdíl v návštěvnosti před a po redesignu od 25. listopadu do 17. Prosince

2011.

Obr č. 51. Obr č. Vyuţití redesignu před a po implementaci – Počet návštěv.

Zvýšení návštěvnosti není úplně dramatické, pokud však vezmeme na vědomí,

ţe měření se zatím vyuţilo, jen v krátkém horizontu, povaţoval bych to za úspěch.

Hlavní podíl na zvýšení návštěvnosti webové stránky bych přisuzoval kvalitně

zpracované sémantice.

Následný modul, který jsem sledoval před a po redesignu byla průměrná doba

strávená na webu. Výsledný graf modulu, který měří průměrnou bodu strávenou na

webu, jsem rozdělil na dvě části. Na první části grafu (viz. obr. č. 52) je znázorněna

měřená hodnota v období před redesignem. Na druhém grafu (viz. obr. č. 52) je

znázorněné období po aplikaci redesignu. Bohuţel měření průběţné strávené doby se

nedá kvůli krátkému časovému horizontu povaţovat za úplně legitimní. Průměrná doba

strávená na webové stránce se blíţila k 10 minutám. Myslím si, ţe určitý faktor v tomto

měření měl fakt, ţe jsem web nějakou chvíli sám testoval. Přesto je z grafového modulu

znatelné celkové zvýšení časových hodnot mezi prvním a posledním bodem, které

uţivatel na webové stránce stráví.

62

Obr č. 48. Obr č. Využití redesignu před implementaci - průměrná doba návštěvy.

Obr č. 49. Obr č. Využití redesignu po implementaci - průměrná doba návštěvy.

Délka průměrné návštěvy před redesignem byla činila 2 minuty a 37 sekund.

Průměrná délka uţivatele po redesignu byla stanovena (po odečtení nejvyšších

a nejniţších hodnot, které byli zachyceny při testování webové stránky) na 3 minuty 48

sekund. Redesign zvýšil průměrnou návštěvu o 1 minutu a 11 sekund.

63

7 Závěr

Cílem bakalářské práce bylo vytvoření redesignu na konkrétní praktickou situaci

současné webové stránky firmy Jinov.s.r.o. S vyuţitím všeho svého dosavadního

vzdělání, jak na Vysoké škole ekonomické potaţmo na Vyšší odborné škole

informačních sluţeb v Praze, tak všech svých dosavadních zkušeností, jsem novou

a plně funkční stránku www.jinov.cz vytvořil.

Současné webové stránky firmy Jinov s.r.o. byly v jiţ mnoha ohledech zastaralé,

jak ze strany nekvalitních obrazových materiálů, tak ze strany kódování neodpovídalo

moderním trendům.

V teoretické části bakalářské práce jsem naznačil obecné postupy pro tvorbu

redesignu a některé základní pojmy se kterými jsem pracoval. Druhá část je zaměřena

především na analýzu současného stavu systémů

V praktické části jsem zuţitkoval některé teoretické znalosti k vytvoření nové

a v mnoha ohledech lepší webové stránky. Jelikoţ hlavními nedostatky bylo zastaralá

forma kódu a vcelku neucelený design, bylo nutné se na tyto dva hlavní nedostatky

zaměřit.

S pouţitím jazyka HTML s prvky Java skriptů, PHP kódu s vyuţitím

databázového jazyka MYSQL a kaskádovými styly CSS jsem vytvořil velice přehledný

a sémanticky kompatibilní web. Zjištěné výsledky naznačují zvýšení návštěvnosti

a prodlouţení průměrného času návštěv ve statistických modulech produktu google

analytics, ale zároveň musíme brát na vědomí fakt, ţe se měření provádělo v krátkém

časovém horizontu. Zároveň jsem webovou aplikaci firmy Jinova s.r.o. obohatil o malý

redakční systém, který je v současné době škrtů a sniţování nákladů výhodnou

variantou.

Redakční systém je v moderních trendech pro aktualizaci webové stránky

nepostradatelný. Redakční systém obsahuje např.: aplikace pro přidávání referencí,

přidávání referencí pro produkty M+R, přidávání referencí pro produkty MTP,

přidávání seznamu strojů, přidávání seznamu technologií, přidávání souborů s detekcí

koncovek, která zajištuje změnu náhledových ikon a mnoho dalších drobných

vylepšení.

64

Velice důleţitá byla reakce od zadavatele, tedy zaměstnanců firmy Jinov s.r.o.

Zpětná vazba byla velice pozitivní a mou práci si vychvalovali. Vedení společnosti mou

práci také schválilo, a tudíţ si nové stránky ponechali.

Výsledek redesignu je moţno vidět v několika podobách. V tištění příloze

bakalářské práce jsem přidal několik stránek znázorňující vzhled stránky před

a po redesignu. V datové příloze bakalářské práce je vloţena mnou tvořená aplikace

připravená pro implementaci jako hotový produkt. V neposlední řadě je moţné si

webovou stránku prohlédnou přímo na stránce www.jinov.cz tedy stránce zadavatele

kam byla implementována.

65

8 Seznam literatury a použitých zdrojů

Tištěné publikace:

[4, s. 14] KRUG, Steve. Web desgin : Nenuťte uţivatele přemýšlet. 2003. Brno :

Computer press, 2003. 144 s. ISBN 80-7226-892-9.

[10, s. 82 ] HORNÝ, Stanislav. Počítačová grafika. 2010. Praha : Nakladatelství VŠE,

2010. 180 s. ISBN 978-80-245-1104-7

[15, s. 160 ] HORNÝ, Stanislav. Počítačová grafika. 2010. Praha : Nakladatelství VŠE,

2010. 180 s. ISBN 978-80-245-1104-7

[16, s. 160] HORNÝ, Stanislav. Počítačová grafika. 2010. Praha : Nakladatelství VŠE,

2010. 180 s. ISBN 978-80-245-1104-7

HORNÝ, Stanislav. Počítačová grafika. 2010. Praha : Nakladatelství VŠE, 2010. 180 s.

ISBN 978-80-245-1104-7

KRUG, Steve. Web desgin : Nenuťte uţivatele přemýšlet. 2003. Brno : Computer press,

2003. 144 s. ISBN 80-7226-892-9.

VRÁNA, Jakub. PHP : 1001 tipů a triků. Brno : Computer press, 2010. 456 s. ISBN

978-80-251-2940-1.

Web design : průvodce od Jakoba Nielsena. Praha : SoftPress, 2000. 383 s. ISBN 80-

86497-27-5.

STANÍČEK, Petr. CSS Kaskádové styly : Kompletní průvodce. 2. vyd. Brno

:Computer Press, 2003. 178 s. ISBN 80-7226-872-4.

COHENOVÁ, June. Neobyčejně užitečná : kniha o webu. 2004. Praha : SoftPress,

2004. 371 s. ISBN 80-86497-63-1.

Elektronické zdroje:

[1] Písmo. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) :

Wikipedia Foundation, 2.10.2002, last modified on 24. 11. 2011 [cit. 2011-12-18].

Dostupné z WWW: <http://cs.wikipedia.org/wiki/P%C3%ADsmo>.

[2] Adobe Fireworks CS5 [online].[ADOBE], 2011 [cit. 2011-05-17]. O práci ve

Fireworks. Dostupné z WWW:

<http://help.adobe.com/cs_CZ/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b

00cace-7ffd.html>.

[3] Popis produktu Dreamweavwer CS4 [online].Digital Media, 2011 © [cit. 2011-05-

17]. Software, sluţby a řešení pro digitální svět. Dostupné z WWW:

<http://www.digitalmedia.cz/produkty/adobe/dreamweaver/popis.aspx>.

66

[5] Studio 20 [online]. 2008. 2008, 2010 [cit. 2011-12-18]. Www.Studio20.cz.

Dostupné z WWW: <http://www.studio20.cz/vzhled-webovych-stranek/>.

[6] NEILSON, Jackob. Useit [online]. 6.5.2008 [cit. 2011-12-18]. Alertbox. Dostupné

z WWW: <http://www.useit.com/alertbox/percent-text-read.html>.

[7] Sonix design [online]. 2008. Havlíčkův Brod : 2003, 2011 [cit. 2011-12-18].

Www.sonixdesign.net. Dostupné z WWW: <http://www.sonixdesign.net/webdesign/>.

[8] BENEŠ, Jan. Emocio [online]. 22. 05. 2007 [cit. 2011-12-18]. Informační design.

Dostupné z WWW: <http://www.emocio.cz/prectete-si/clanek/informacni-design/>.

[9] BRÁZDILOVÁ, Michaela . Fidjo [online]. 08.08.2011 [cit. 08.08.2011 ]. Vzhled a

kompozice stránky. Dostupné z WWW: <http://www.fidjo.cz/vzhled-kompozice-web-

stranky.html>.

[11] Design [online]. Praha : Computer press, 2009 [cit. 2011-12-18]. Praktický

webdesign, s. . Dostupné z WWW: <Chip.cz>.

[12] Design [online]. Praha : Computer press, 2009 [cit. 2011-12-18]. Praktický

webdesign, s. . Dostupné z WWW: <Chip.cz>.

[13] Design [online]. Praha : Computer press, 2009 [cit. 2011-12-18]. Praktický

webdesign, s. Dostupné z WWW: <Chip.cz>.

[14] Barva. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) :

Wikipedia Foundation, 2000, last modified on 19. 11. 2011 [cit. 2011-12-18]. Dostupné

z WWW: <http://cs.wikipedia.org/wiki/Barva>.

Studio 20 [online]. 2008. 2008, 2010 [cit. 2011-12-18]. Www.Studio20.cz. Dostupné

z WWW: <http://www.studio20.cz/vzhled-webovych-stranek/>.

Old gjk [online]. 2003 [cit. 2011-12-18]. Letem světem HTML. Dostupné z WWW:

<http://old.gjk.cz/~xsvot02/>.

Použitelnost barev [online]. 23. 11. 2011 [cit. 2011-12-18]. Tutoriarts. Dostupné

z WWW: <http://www.tutoriarts.cz/pouzitelnost-v-praxi-6-jak-ucinne-vyuzivat-barvy-

1195>.

DOBIÁŠ , Richard. Tajemství copywritingu, reklamy a úspěšného psaní nejen pro web

[online]. 2010 [cit. 2011-12-18]. O psaní . Dostupné z WWW:

<http://www.o-psani.cz/2011/01/jak-na-prioritu-informaci-v-textu-aneb.html>.

DOBIÁŠ , Richard. Informační architektura [online]. 2007 [cit. 2011-12-18]. Weto.

Dostupné z WWW: <http://www.weto.cz/clanky-o-www/informacni-architektura>.

ZAJÍC, Petr. Linuxsoft.cz [online]. Praha : Správce Pavel Kysilka, 2.6.2004 10:00

[cit. 2011-04-28]. PHP (6) - Typy proměnných. Dostupné z WWW:

<http://www.linuxsoft.cz >.

67

JANOVSKÝ, Dušan. CSS kaskádové styly [online]. 02.12.2011. [cit. 2011-12-18]. Jak

psát web. Dostupné z WWW: <http://www.jakpsatweb.cz/css/>.¨

JFlow Slider Auto Slider with Pause Functionality [online]. 21.5.2010 [cit. 18.12.2011].

Dlocc. Dostupné z WWW: <http://www.dlocc.com/articles/jflow-slider-auto-slider-

with-pause-functionality/>.

68

9 Seznam Příloh

Příloha č. 1. Seznam obrázků.

Příloha č. 2. Psychologie barev.

Příloha č. 3. Vzhled stránky před redesignem.

Příloha č. 4. Vzhled stránky po redesignu.

Příloha č. 5. Znázornění mapy před a po redesignem.

Příloha č. 6. Znázornění před a po redesignu - prvky.

Příloha č. 7. Znázornění před a po redesignu - reference.

Příloha č. 8. Znázornění před redesignem – produkty.

Příloha č. 9. Znázornění po redesignem – produkty.

69

Příloha č. 1. – Seznam obrázků:

Obr č. 1. Rozdíl vektorové a bitmapové grafiky. 8. Str.

Obr č. 2. RGB model. 8. Str.

Obr č. 3. CMYK model. 9. Str.

Obr č. 4. První návštěva uživatele. 18. Str.

Obr č. 5. Opakovaná návštěva uživatele. 18. Str.

Obr č. 6. Orientace návštěvníka na webové stránce, který hledá obsah. 19. Str.

Obr č. 7. Čtení webových stránek – počet přečtených slov podle 20. Str.

Jakoba Nielsona.

Obr č. 8. Rozdíl optického a geometrické středu. 23. Str.

Obr č. 9. Současný stav webové stránky Jinov.cz. 28. Str.

Obr č. 10. Diagram - Menu administrátor. 30. Str.

Obr č. 11. Diagram - Menu uţivate.l 30. Str.

Obr č. 12. Diagram - Menu administrátor. 31. Str.

Obr č. 13. Diagram use case aplikací pro vkládání technologií, 31. Str.

strojů a referencí produktu M+R , MTP.

Obr č. 14. Skica návrhu webové stránky. 35. Str.

Obr č. 15. Barevná kombinace žluté (#F7C315) a modré (#222F63). 36. Str.

Obr č. 16. Aplikace optického středu. 36. Str.

Obr č. 17. Záhlaví webové stránky. 37. Str.

Obr č. 18. Zápatí webové stránky. 37. Str.

Obr č. 19. Zápatí webové stránky. 38. Str.

Obr č. 20. Evoluce grafického prvku - tlačítko. 38. Str.

Obr č. 21. Evoluce grafického prvku - vlajka. 39. Str.

Obr č. 22. Evoluce grafického prvku - ohraničení fotek. 39. Str.

70

Obr č. 23. Navigace webové stránky – obrázek je pouze ilustrativní 39. Str.

navigace obsahuje.

Obr č. 24. Sémantika webové stránky – horní část. 40. Str.

Obr č. 25. Sémantika webové stránky – Tělo webové stránky 41. str.

Obr č. 26. Sémantika webové stránky – Spodek a záhlaví webové stránky. 41. Str.

Obr č. 27. Sémantika webové stránky – META data v hlavičce webové stránky. 42. Str.

Obr č. 28. Jquery kód banneru. 43. Str.

Obr č. 29. Javaskript banner. 44. Str.

Obr č. 30. Javaskript banneru. 44. Str

Obr č. 31. Obr č. Javaskript banner. 44. Str.

Obr č. 32. Obr č. MYSQL zakládání tabulek. 45. Str.

Obr č. 33. Obr č. MYSQL zobrazení záznamů. 46. Str.

Obr č. 34. Obr č. MYSQL vkládání záznamů. 46. Str.

Obr č. 35. Obr č. MYSQL mazání záznamu. 46. Str

Obr č. 36. Obr č. PHP přidání názvu reference. 47. Str.

Obr č. 37. Obr č. Zobrazení názvu reference. 48. Str

Obr č. 38. Obr č. Zobrazení názvu reference PHP kód. 48. Str.

Obr č. 39. Obr č. Diagram aktivit aplikací pro vkládání technologií, 49. Str.

strojů a referencí produktu M+R , MTP.

Obr č. 40. Obr č. Zobrazení aplikace přidávání seznamů. 50. Str.

Obr č. 41. Obr č. Zobrazení změny formátu a velikosti. 50. Str.

Obr č. 42. Obr č. Nastavení umístění a velikosti miniatury. 51. Str

Obr č. 43. Obr č. Nastavení umístění a velikosti obrázku. 51. Str.

Obr č. 44. Obr č. Formuláře aplikace. 52. Str.

Obr č. 45. Obr č. Aplikace pro stránkování. 52. Str.

Obr č. 46. Obr č. Aplikace pro stránkování druhá část. 53. Str.

71

Obr č. 47. Obr č. Aplikace pro vkládání souborů 54. Str.

Obr č. 48. Obr č. Aplikace pro vkládání souborů – rozdílné ikony souborů. 54. Str.

Obr č. 49. Obr č. Aplikace pro zobrazení obrázků – Kód. 55. Str.

Obr č. 50. Obr č. Aplikace pro zobrazení obrázků – zobrazení 55. Str.

Obr č. 51. Obr č. Vyuţití redesignu před a po implementaci – Počet návštěv. 56. Str.

Obr č. 48. Obr č. Využití redesignu před implementaci - průměrná doba 57. Str.

návštěvy.

Obr č. 49. Obr č. Využití redesignu po implementaci - průměrná doba 57. Str.

návštěvy.

72

Příloha č. 2. Psychologie barev

73

Příloha č. 3. Webová stránka firmy s.r.o. před redesignem – o Nás

74

Příloha č. 4. Webová stránka firmy Jinova s.r.o. po redesingu – o Nás

75

Příloha č. 5. Část webové stránky firmy Jinova s.r.o. po redesingu –Znázornění mapy.

Obr. č. 1. Před redesignem

Obr. č. 2. Po redesignu

76

Příloha č. 6. Část webové stránky firmy s.r.o. – záhlaví a zápatí

Obr. č. 1. Záhlaví po redesignu

Obr. č. 2. Záhlaví před redesignem

Obr. č. 3. Zápatí po redesignu

77

Obr. č. 4. Zápatí před redesignem

Příloha č. 7. Část webové stránky firmy s.r.o. – reference

Obr. č. 1. reference po redesignu

Obr. č. 2. reference před redesignem

78

Příloha č. 8. Část webové stránky firmy S.r.o. po redesignem – produkty

79

Příloha č. 9. Část webové stránky firmy S.r.o. před redesignem – produkty