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 1
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 2
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. 3
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. 4
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. 5
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 6
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 7
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 8
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 9
10
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. 11
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. 12
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. 13
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ů. 14
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]. 15
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. 16
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. 17
<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. 18
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. 19
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. 20
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). 21
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]. 22
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. 23
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) 24
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 25
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. 26
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. 27
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í 28
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) 29
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 30
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. 31
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. 32
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í 33
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ů. 34
miniatury. - Systémy pro vkládání obrázků musely dokázat měnit velikosti a tím vytvářet - 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. 35
Obr č. 12. Diagram - Menu administrátor. Obr č. 13. Diagram use case aplikací pro vkládání technologií, strojů a referencí produktu M+R, MTP. 36
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. 37
38
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ů. 39
- 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 40
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. 41
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. 42
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. 43
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 44
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í. 45
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. 46
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á 47
ţá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ů. 48
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. a fotek.) Na obrázku č. 30 a řádku 10. 29. Slouţí k přidávání textů, odkazů, popisků Obr č. 31. Obr č. Javaskript banner. 49
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. 50
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. 51
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. 52
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 53
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. 54
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. 55
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. 56
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í. 57
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 58
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. 59
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. 60
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í. 61
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. 62
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í. 63
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. 64
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>. 65
[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-webstranky.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 >. 66
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-sliderwith-pause-functionality/>. 67
9 Seznam Příloh Příloha č. 1. Příloha č. 2. Příloha č. 3. Příloha č. 4. Příloha č. 5. Příloha č. 6. Příloha č. 7. Příloha č. 8. Příloha č. 9. Seznam obrázků. Psychologie barev. Vzhled stránky před redesignem. Vzhled stránky po redesignu. Znázornění mapy před a po redesignem. Znázornění před a po redesignu - prvky. Znázornění před a po redesignu - reference. Znázornění před redesignem produkty. Znázornění po redesignem produkty. 68
Příloha č. 1. Seznam obrázků: Obr č. 1. Rozdíl vektorové a bitmapové grafiky. Obr č. 2. RGB model. Obr č. 3. CMYK model. Obr č. 4. První návštěva uživatele. Obr č. 5. Opakovaná návštěva uživatele. Obr č. 6. Orientace návštěvníka na webové stránce, který hledá obsah. Obr č. 7. Čtení webových stránek počet přečtených slov podle 8. Str. 8. Str. 9. Str. 18. Str. 18. Str. 19. Str. 20. Str. Jakoba Nielsona. Obr č. 8. Rozdíl optického a geometrické středu. Obr č. 9. Současný stav webové stránky Jinov.cz. Obr č. 10. Diagram - Menu administrátor. Obr č. 11. Diagram - Menu uţivate.l Obr č. 12. Diagram - Menu administrátor. Obr č. 13. Diagram use case aplikací pro vkládání technologií, 23. Str. 28. Str. 30. Str. 30. Str. 31. Str. 31. Str. strojů a referencí produktu M+R, MTP. Obr č. 14. Skica návrhu webové stránky. Obr č. 15. Barevná kombinace žluté (#F7C315) a modré (#222F63). Obr č. 16. Aplikace optického středu. Obr č. 17. Záhlaví webové stránky. Obr č. 18. Zápatí webové stránky. Obr č. 19. Zápatí webové stránky. Obr č. 20. Evoluce grafického prvku - tlačítko. Obr č. 21. Evoluce grafického prvku - vlajka. Obr č. 22. Evoluce grafického prvku - ohraničení fotek. 35. Str. 36. Str. 36. Str. 37. Str. 37. Str. 38. Str. 38. Str. 39. Str. 39. Str. 69
Obr č. 23. Navigace webové stránky obrázek je pouze ilustrativní 39. Str. navigace obsahuje. Obr č. 24. Sémantika webové stránky horní část. Obr č. 25. Sémantika webové stránky Tělo webové stránky Obr č. 26. Sémantika webové stránky Spodek a záhlaví webové stránky. 40. Str. 41. str. 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. Obr č. 29. Javaskript banner. Obr č. 30. Javaskript banneru. Obr č. 31. Obr č. Javaskript banner. Obr č. 32. Obr č. MYSQL zakládání tabulek. Obr č. 33. Obr č. MYSQL zobrazení záznamů. Obr č. 34. Obr č. MYSQL vkládání záznamů. Obr č. 35. Obr č. MYSQL mazání záznamu. Obr č. 36. Obr č. PHP přidání názvu reference. Obr č. 37. Obr č. Zobrazení názvu reference. Obr č. 38. Obr č. Zobrazení názvu reference PHP kód. Obr č. 39. Obr č. Diagram aktivit aplikací pro vkládání technologií, 43. Str. 44. Str. 44. Str 44. Str. 45. Str. 46. Str. 46. Str. 46. Str 47. Str. 48. Str 48. Str. 49. Str. strojů a referencí produktu M+R, MTP. Obr č. 40. Obr č. Zobrazení aplikace přidávání seznamů. Obr č. 41. Obr č. Zobrazení změny formátu a velikosti. Obr č. 42. Obr č. Nastavení umístění a velikosti miniatury. Obr č. 43. Obr č. Nastavení umístění a velikosti obrázku. Obr č. 44. Obr č. Formuláře aplikace. Obr č. 45. Obr č. Aplikace pro stránkování. Obr č. 46. Obr č. Aplikace pro stránkování druhá část. 50. Str. 50. Str. 51. Str 51. Str. 52. Str. 52. Str. 53. Str. 70
Obr č. 47. Obr č. Aplikace pro vkládání souborů Obr č. 48. Obr č. Aplikace pro vkládání souborů rozdílné ikony souborů. Obr č. 49. Obr č. Aplikace pro zobrazení obrázků Kód. Obr č. 50. Obr č. Aplikace pro zobrazení obrázků zobrazení Obr č. 51. Obr č. Vyuţití redesignu před a po implementaci Počet návštěv. Obr č. 48. Obr č. Využití redesignu před implementaci - průměrná doba 54. Str. 54. Str. 55. Str. 55. Str. 56. Str. 57. Str. návštěvy. Obr č. 49. Obr č. Využití redesignu po implementaci - průměrná doba 57. Str. návštěvy. 71
Příloha č. 2. Psychologie barev 72
Příloha č. 3. Webová stránka firmy s.r.o. před redesignem o Nás 73
Příloha č. 4. Webová stránka firmy Jinova s.r.o. po redesingu o Nás 74
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 75
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 76
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 77
Příloha č. 8. Část webové stránky firmy S.r.o. po redesignem produkty 78