Mendelova univerzita v Brně Provozně ekonomická fakulta
Tvorba webového administračního systému podniku z oblasti elektroniky Bakalářská práce
Vedoucí práce: Ing. Naděžda Chalupová, Ph.D.
Brno 2012
Michal Biel
Rád bych poděkoval vedoucí mé práce Ing. Naděždě Chalupové, Ph.D. za odborné vedení a cenné rady v průběhu tvorby této práce.
Prohlašuji, že jsem tuto bakalářskou práci vypracoval samostatně s použitím literatury, kterou uvádím v seznamu. V Brně dne 18. května 2012
__________________
Abstract Biel, M. Creating web administration system for company in the branch of electronics. Bachelor thesis. Brno: PEF MENDELU in Brno, 2012. This bachelor thesis deals with the issue of design and creation of the company logo and with the design and realization of the web presentation as well. The logo and website were made for the company called Elektro Biel. Part of this web presentation is the administration system which allows you to manage the website. First of all the analysis and the identification of specific needs of the company has to be done. It will be followed by the theoretical part and there will be the design of the company logo and web presentation. The last part of the thesis describes the implementation of administration system. Keywords Logo, web presentation, administration system, PHP, MySQL, SEO optimalization
Abstrakt Biel, M. Tvorba webového administračního systému podniku z oblasti elektroniky. Bakalářská práce. Brno: PEF MENDELU v Brně, 2012. Tato bakalářská práce se zabývá problematikou návrhu a tvorby loga firmy, dále návrhem a realizací webové prezentace pro firmu Elektro Biel. Součástí webové prezentace je i administrační systém, pomocí kterého je možné spravovat webové stránky. V prvé řadě je provedena analýza a zjištění konkrétních potřeb firmy, dále je teoretická část, po níž následuje návrh loga a webové prezentace. V poslední části je popisována implementace administračního systému. Klíčová slova Logo, webová prezentace, administrační systém, PHP, MySQL, SEO optimalizace
Obsah
9
Obsah 1
2
3
Úvod a cíl práce 1.1
Úvod ......................................................................................................... 13
1.2
Cíl práce ................................................................................................... 13
Současný stav
14
2.1
Analýza subjektu ...................................................................................... 14
2.2
Analýza konkurence ................................................................................. 15
2.2.1
HEDA-Elektronika s. r. o. ................................................................ 15
2.2.2
TEVIS Brno ...................................................................................... 16
2.2.3
VIDEOKLINIK ................................................................................. 17
Metodika a použité metody
19
3.1
Tvorba loga .............................................................................................. 19
3.2
Tvorba webových aplikací....................................................................... 20
3.2.1
Návrh wireframe ............................................................................. 20
3.2.2
Návrh webových stránek.................................................................. 21
3.2.3
Technické prostředky webové aplikace ........................................... 21
3.2.4
SEO optimalizace ............................................................................ 22
3.3
Analýza dostupných store management systémů .................................. 24
3.3.1
Zencart ............................................................................................ 24
3.3.2
Virtuemart ....................................................................................... 24
3.3.3
Opencart .......................................................................................... 25
3.3.4
Prestashop ....................................................................................... 25
3.4
Analýza dostupných redakčních systémů .............................................. 26
3.4.1
WordPress ....................................................................................... 26
3.4.2
Joomla!............................................................................................ 26
3.4.3
Drupal ............................................................................................. 26
3.5 4
13
Vyhodnocení redakčních a store management systémů ........................ 27
Realizace práce
28
10
Obsah
4.1
Návrh loga............................................................................................... 28
4.2
Návrh a realizace webových stránek ...................................................... 30
4.2.1
Návrh webových stránek ................................................................ 30
4.2.2
Realizace webových stránek ............................................................33
4.2.3
Adresářová struktura .......................................................................34
4.2.4
Seo optimalizace .............................................................................. 35
4.3
5
Implementace administračního systému ................................................36
4.3.1
Zabezpečení administrace ...............................................................36
4.3.2
Databázový model ........................................................................... 37
4.3.3
Implementace systému na správu podstránek .............................. 38
4.3.4
Implementace aplikace pro správu zboží ........................................39
Závěr
42
5.1
Diskuze přínosů .......................................................................................42
5.2
Možnosti rozšíření ...................................................................................42
6
Literatura
43
A
Ukázka podstránky kontakt
46
B
Ukázka podstránky nové televizory
47
Obsah
11
12
Seznam obrázků
Seznam obrázků Obr. 1 Ukázka původní webové prezentace včetně správy aktuální nabídky
15
Obr. 2 Ukázka internetové prezentace firmy HEDAElektronika s.r.o. Zdroj: web.telecom.cz/hedaelektronika/
16
Obr. 3 Ukázka internetové prezentace firmy TEVIS Brno Zdroj: www.tevis.cz
17
Obr. 4 Ukázka internetové prezentace firmy VIDEOKLINIK Zdroj: www.videoklinik.cz
18
Obr. 5
28
Výsledné logo firmy Elektro Biel
Obr. 6 Výsledné logo firmy Elektro Biel s ukázkou zarovnání prvků
29
Obr. 7
Ukázka černobílé varianty loga
29
Obr. 8
Ukázka loga v odstínech šedé barvy
30
Obr. 9
Drátěný model pro Elektro Biel
31
Obr. 10
Finální návrh webové prezentace Elektro Biel
33
Obr. 11
Ukázka zdrojového kódu stránky Úvod
34
Obr. 12 Databázový model administračního systému Zdroj: MySQL Workbench
38
Obr. 13
Vkládání textu editoru do databáze
38
Obr. 14 Administrace statických podstránek pomocí WYSIWYG editoru
39
Obr. 15
40
Administrace stránky nové televizory
Úvod a cíl práce
13
1 Úvod a cíl práce 1.1
Úvod
Majitel firmy Elektro Biel ještě před vznikem samotné společnosti, působil jako samostatný podnikatel a zaměstnával jednu osobu – servisního technika. Specializoval se již počátkem 90. let na dovoz použitých televizorů a videí ze Švýcarska. V České Republice probíhal následný servis a prodej. Samotná firma, Elektro Biel, vznikla rokem 2002 společně se sídlem v Brně-Židenicích. V současné době zajišťuje především servis elektrotechniky a řešení problémů s ní, prodej nových i použitých televizorů, a nabízí široký sortiment elektro zboží. V současné době je velice důležité být viděn a to především na internetu. Firma měla vytvořené jednoduché webové stránky v roce 2006, rozhodla se o jejich redesign včetně návrhu nového loga firmy. Mimo to vyžadovala i usnadnění správy obsahu – možnost jednoduché úpravy jednotlivých statických podstránek uživatelem z administrace a možnost prezentovat aktuální nabídku.
1.2 Cíl práce Cílem práce je navrhnout nové logo pro Elektro Biel a moderní webovou prezentaci firmy, dále implementovat systém pro administraci statických podstránek webové prezentace pomocí WYSIWYG editoru a jednoduchou aplikaci pro správu zboží. Pro dosažení těchto cílů bude nutné seznámení se základními pojmy a technologiemi v oblasti návrhu loga, webové prezentace a tvorby webových aplikací včetně databáze.
14
Současný stav
2 Současný stav 2.1 Analýza subjektu Subjekt Elektro Biel sídlí v městské části Brno-Židenice na ulici Vinařického 1. Je zde přítomno malé parkoviště pro 2 automobily zákazníků. Firma zde působí již od roku 2000 a prodává použité i nové televizory, DVD, domácí kina, navigace a další drobnou elektroniku. Významnou součástí podnikání je v posledních letech servis veškeré elektroniky a také řešení individuálních problémů zákazníka na míru (např. zapojování domácích sestav, instalace antén atd.). Mimo prodej elektroniky firma nabízí i široký sortiment elektro zboží a příslušenství, od anténních kabelů, přes žárovky a baterky, až po CD a DVD média. Velice důležitou součástí úspěšného fungování firmy se stává poslední roky moderní a kvalitní webová prezentace, která klade důraz na SEO optimalizaci, pro řazení na vyšších příčkách internetových vyhledavačů. Dřívější podoba stránek neměla optimalizaci SEO na dobré úrovni, to se s novými stránkami má změnit. Zároveň stránky původní neobsahují žádnou ucelenou administraci, kde by bylo možné spravovat obsah bez nutnosti volat administrátora. Původní prezentace obsahuje pouze jednu administrační stránku, kde lze upravit textový výpis aktuální nabídky. Tato stránka však není ani zabezpečena heslem! Je tedy jasné, že dosavadní systém je nezbytné nahradit moderním a bezpečným provedením, které bude pokrývat všechny potřeby firmy. Požadavky firmy na webovou prezentaci jsou následující. Je vyžadována moderní webová prezentace, která bude mít kvalitní SEO optimalizaci. Dále je třeba vytvořit plně zabezpečenou administraci, ve které bude možné jednoduše spravovat dané statické podstránky pomocí WYSIWYG editoru. Mimo to firma vyžaduje jednoduchý výpis zboží s popisem, obrázkem a cenou, který bude možné spravovat taktéž skrze administraci. Výpis zboží bude realizován v několika kategoriích. Mimo požadavky webové prezentace ještě firma žádá návrh nového loga firmy, který by obsahoval název – Elektro Biel. Mimo název má logo obsahovat tři libovolné prvky. Tyto prvky budou barev červená, zelená, modrá, a budou představovat základní barvy, z nichž se skládá obraz (televizoru). Logo má odpovídat dnešním technikám a má působit, stejně jako webová prezentace, moderním dojmem, logo nemá působit nijak zastarale.
Současný stav
Obr. 1
15
Ukázka původní webové prezentace včetně správy aktuální nabídky
2.2 Analýza konkurence 2.2.1
HEDA-Elektronika s. r. o.
Tato firma má k Elektro Biel velmi blízko svým zaměřením, zabývá se servisem a prodejem elektroniky, prodejem příslušenství (žárovky, vypínače, zásuvky, sluchátka…), opravou a montáží anténních a satelitních rozvodů. Dále poskytuje autorizovaný servis značek OVP, Roadstar a Goodmans. Samotná internetová prezentace HEDA-Elektronika s. r. o. je základní a nepůsobí moderním dojmem. Při pohledu na zdrojový kód lze vidět použití dnes již staré technologie rámců. Na vstupních stránkách nenalezneme ihned kontakt na firmu, informace o prodávaném zboží jsou pouze obecné. V sekci kontakt můžeme nalézt adresu, telefon, e-mail, otevírací dobu i mapu, kde lze firmu nalézt. Samotné stránky lze považovat za funkční a přehledné, i když moderním dojmem na návštěvníka zřejmě nezapůsobí. Firma HEDA-Elektronika s. r. o. sídlí v Brně-Černovicích na ulici Charbulova 67. Z analyzovaných konkurentů je firmě Elektro Biel geograficky nejblíže.
16
Současný stav
Obr. 2 Ukázka internetové prezentace firmy HEDA-Elektronika s.r.o. Zdroj: web.telecom.cz/hedaelektronika/
2.2.2
TEVIS Brno
Tato firma se zabývá prodejem LCD televizorů, DVD rekordérů, digitálních přijímačů, náhradních dílů i repasovaných televizorů. Firma poskytuje značkový servis značek Sharp, Thomson, Mascom a Finlux. Ihned na úvodní straně webové prezentace firmy je uveden přehledně kontakt. Na stránkách dále nalezneme pár vět o historii firmy a jejím zaměření. Část textu v hlavičce webu však není dobře čitelná a při zobrazení na dnes nejběžnějších rozlišeních je přes velkou část obrazovky poměrně zbytečně vidět pouze velký televizor. Stránky stejně jako v případě firmy HEDA-Elektronika s. r. o. nejsou nijak rozsáhlé. Aktuální nabídku zde nehledejme, stránky nabízí pouze základní informace. TEVIS Brno sídlí v Brně-Žabovřeskách na ulici Blatného 2. Z analyzovaných konkurentů je firmě Elektro Biel geograficky nejdále.
Současný stav
17
Obr. 3 Ukázka internetové prezentace firmy TEVIS Brno Zdroj: www.tevis.cz
2.2.3
VIDEOKLINIK
Firma VIDEOKLINIK nabízí na rozdíl od konkurentů mimo pozáruční servis i servis záruční významných značek. Jedná se o autorizované servisní centrum značek Sony, LG, ONKYO, JAMO a LOEWE. Mimo servis firma nabízí i prodej příslušenství. Na hlavní straně webové prezentace můžeme najít ihned kontakt a novinky v pravém menu. Hned několik kategorií v levém i horním menu je však nefunkčních. Horní menu je z neznámého důvodu identické s levým menu, dvojí umístění tak postrádá smysl a může uživatele mást. Firma VIDEOKLINIK má sídlo ve čtvrti Brno-Veveří na ulici Antonínská 4. Z analyzovaných konkurentů se geograficky nachází mezi firmou HEDAElektronika s. r. o. a firmou TEVIS Brno. Díky poloze v centru Brna má zřejmě nejvýhodnější pozici.
18
Obr. 4 Ukázka internetové prezentace firmy VIDEOKLINIK Zdroj: www.videoklinik.cz
Současný stav
Metodika a použité metody
19
3 Metodika a použité metody 3.1 Tvorba loga „Logotyp (z řeckého logos – slovo, řeč, nauka, zákon, pojem, typos – výraz, znak) je originálně graficky upravený název společnosti, který neobsahuje piktogram (obrázek). Ryze český ekvivalent k tomuto slovu neexistuje. Piktogram je obrazový symbol, který funguje buď samostatně, nebo doprovází textovou část loga. Někdy se v této souvislosti užívají i následující pojmy: symbol, emblém, ikona. Logo je grafické ztvárnění názvu organizace, společnosti, firmy nebo instituce obohacené o piktogram. Tento pojem odpovídá českému výrazu grafická značka.“ (Tippmann, 2008, [online]) Tvorba úspěšného loga (grafické značky) zahrnuje mnoho aspektů, které je třeba vzájemně propojit a musí být v souladu. Dle Dabnera (2004, s. 90) musí celkové pojetí loga odrážet charakter společnosti, logo by mělo být ucelené a osobité, musí působit stejně v jednobarevné i celobarevné podobě a mělo by se také dát adekvátně reprodukovat v různých velikostech, od velmi malé po neobyčejně velkou. Do velmi malé velikosti můžeme řadit např. vizitky, naopak mezi neobyčejně velké můžeme řadit např. titulky, plakáty a billboardy. Z pohledu Tippmanna (2008, [online]) jsou důležité především kritéria identifikační, významové, estetické a technologické. Identifikační kritéria jsou důležitá z hlediska rozpoznatelnosti samotného loga mezi jinými. Logo by mělo být nezaměnitelné s jinými a nesmí být příliš složité. S příliš složitým logem nastává problém rozpoznatelnosti, čím jsou tvary a křivky jednodušší, tím se logo stává rozpoznatelnějším. S jednodušším provedením také stoupá pravděpodobnost zapamatovatelnosti. Mezi další identifikační vlastnosti můžeme zařadit nápaditost, nadčasovost, čitelnost, kulturní přizpůsobitelnost a rozšiřitelnost. U významových kritérií je nejdůležitější určení názvu, který je základem pro vizuální ztvárnění značky. Důležité je, aby nebyl problém s jeho vyslovitelností a významem v daném jazyce. Názvy jsou doporučovány v co nejkratší podobě. Srozumitelnost je nutná pro eliminaci dvojsmyslů a vztah k oboru může napomáhat k vizuálnímu přiřazení k určitému oboru. Každé logo vyvolává v člověku určité emoce. Emotivní hodnota je proto dalším kritériem, které je třeba vyhodnotit a správně navrhnout. Posledním významovým kritériem je odolnost proti zneužití a vandalismu, která má mít preventivní charakter. Logo nesmí svádět k různým dokreslováním, lidé by v něm neměli spatřovat něco jiného a mělo by být odolné i proti vandalismu a poškození ve své fyzické podobě. Estetická kritéria zahrnují kvalitu výtvarné stylizace, kde svou roli hraje estetika, cit, vkus a elegance. Posouzení, zdali je značka „výtvarně čistá“ je dobré svěřit odborníkům. Podobné kritérium míra výtvarné stylizace hodnotí míru tvarové složitosti a neexistuje zde jasné doporučení, jaká míra je ideální. Barevné řešení vypovídá o tom, že je třeba u značek dlouhodobého charakteru vytvořit
20
Metodika a použité metody
mimo barevnou verzi i verzi černo-bílou a verzi v různých odstínech šedi. Zpravidla je jen otázkou času, kdy budou tyto barevné provedení potřeba. Je doporučeno navrhnout prvně černo-bílou verzi a až poté vybrat barevnou kombinaci. U značek krátkodobého charakteru není tvorba černo-bílé varianty ani varianty různých odstínů šedi nutná. Značku je dobré vytvořit i v inverzní variantě pro užití na tmavém pozadí. Případně se může hodit i varianta tvarová, v praktických případech kdy chceme logo užít např. na šířku nebo na výšku, tak aby lépe vyniklo. Další aspekt, kvalita použitého písma, může o značce mnohé napovědět. Písmo se k subjektu musí hodit a je třeba jej pečlivě vybrat. Posledním kritériem je atraktivita, která je úzce spojena s módními trendy a různými grafickými efekty. U dlouhodobých značek je dobré se těchto efektů vyvarovat, aby značka vydržela co nejdéle. Technologická kritéria zahrnují aplikovatelnost a světelné podmínky. Aplikovatelnost je dána především schopností zobrazení, ovlivňují ji některé faktory: minimální velikost, kvalita provedení detailů, používané technologie, materiály a barevné systémy. Světelné podmínky by měly zajišťovat dostatečnou míru kontrastu. Logo musí být v naprosté většině případů užití dostatečně čitelné a tyto případy užití musí být předem promyšleny.
3.2 Tvorba webových aplikací 3.2.1
Návrh wireframe
„Wireframe (drátěný model) definuje textový i grafický obsah, rozmístění funkčních prvků, ale také navigaci a znění nadpisů, klíčových textů či tlačítek (tzv. labeling). Wireframe není grafickým návrhem, neobsahuje obrázky a je tvořen pouze pomocí čar ("drátů", wires) a textu. Nepoužívá se ani barev, výjimkou je pouze odlišení hypertextových odkazů. Vytváření wireframu přichází na řadu po vzniku úvodní analýzy a návrhu obchodních a uživatelských cílů. Zároveň však předchází fázi tvorby grafických návrhů a prezentační vrstvy webu. Informační architekt vytvoří pomocí wireframu návod či vzor pro grafiky a vývojáře a zároveň jej využije k diskuzi s klientem. Změny a úpravy (v této fázi je žádoucí, aby k nim došlo) je daleko snažší a rychlejší zapracovat právě do wireframu než do již hotových grafických návrhů či naprogramovaných beta verzí webu. Další výhodou je, že grafik se v případě existence wireframu může soustředit plně na svoji úlohu. Nemusí řešit, co má navrhovaná stránka obsahovat, jak mají být jednotlivé prvky rozmístěny či pojmenovány. Zároveň však nejsou grafici existencí wireframu svazováni a mohou web kreativně zpracovat. Proto si nelze při prohlížení wireframu představovat, že se jedná o finální vizuální podobu webu. Z výše zmíněných důvodů je wireframe významnou součástí vývojového cyklu webu, který zlepšuje naplnění jeho cílů, minimalizuje riziko vzniku rozdílu
Metodika a použité metody
21
mezi zadáním a výsledkem a zkracuje celkovou dobu vývoje.“ (Wireframe webu, [online]) 3.2.2
Návrh webových stránek
„Nenuťte uživatele přemýšlet“ (Krug, 2006), aneb základní pravidlo při tvorbě návrhu webové stránky. Webová stránka musí být intuitivní, nový návštěvník by ji měl snadno a rychle pochopit, dále by měla být samovysvětlující. Při příchodu na stránku nesmí uživatele napadat spousta otázek „kde co najít?“, nebo „co k čemu slouží?“. „Uživatel vidí naše stránky podobně, jako kdyby míjel billboard rychlostí 100 kilometrů za hodinu“ popisuje Krug (2006, s. 27). Snaží se tím vysvětlit, že většina uživatelů v podstatě každou stránkou pouze „prolétne“ a případně klikne na odkaz, který ho zaujme. Pokud odkaz pozornost návštěvníka neupoutá, návštěvník zase pokračuje na jiný web. Důležitý je návrh navigace, který by měl správně návštěvníka nasměrovat tam, co hledá. Navigace nám poskytuje opěrné body, říká nám, co vše na stránkách můžeme nalézt, jak máme stránky používat, a vzbuzuje důvěru v lidi, kteří stránky vybudovali. U složitějších struktur je třeba přehledně oddělovat úrovně a poskytovat návštěvníkovi informaci, kde se právě nachází. Každá stránka potřebuje svůj název umístěný na správném místě, kde bude vidět. Ve většině případů to bude největší text na stránce. Název stránky musí odpovídat odkazu, na který bylo kliknuto. Při tvorbě návrhu je tedy nutné dobře promyslet strukturu webu, jednoduchost a účelnost. Je třeba se zdržet všelijakých „vychytávek“, vkládání zbytečných slov, či snažit se do menu vložit co nejvíce položek. 3.2.3
Technické prostředky webové aplikace
Jazyk HTML (Hypertext Markup Language) je jedním ze základních jazyků pro tvorbu webových stránek. HTML strukturuje text pomocí speciálních značek, tzv. tagů a jejich atributů. Části textů jsou vloženy mezi tyto značky a definuje se tak jejich význam. Značky jsou většinou párové, vybraný text je tak označen tagem na začátku i na konci. Pro pokročilejší grafickou úpravu html stránek je využíván velice šikovný jazyk CSS. CSS (Cascade Style Sheet) popisuje způsob zobrazení stránek napsaných v jazyce html. Hlavním smyslem CSS byla možnost oddělení samotné stránky od způsobu zobrazení, ten může být definován v CSS souboru, tato deklarace je v praxi nejběžnější. Mimo CSS soubor lze styl definovat i v hlavičce html dokumentu, či přímo v html kódu pomocí atributu style. CSS přináší velmi rozsáhlé možnosti formátování, snadnější údržbu webové prezentace, nebo třeba možnost dynamické změny CSS vlastností pomocí JavaScriptu. „JavaScript je skriptovací jazyk, který umožňuje vytvořit hodiny, hodnotit data ve formuláři, počítat, dynamizovat data, umožňuje tvorbu všemožných prvků k oživení webu, přes blikající texty po jednoduché hry. Základem dynamického webu je právě JavaScript. Pro práci s JavaScriptem je nutné znát základy jazyka HTML. JavaScript je závislý na prohlížeči (uživatel si ho může vy-
22
Metodika a použité metody
pnout). V různých verzích prohlížečů nemusí skript vždy korektně fungovat.“ (JavaScript, [online]) PHP (Hypertext Preprocessor) je skriptovací programovací jazyk, který je hojně využívaný k programování dynamických webových stránek. Při tomto použití je PHP kód vyhodnocován na straně serveru, k uživateli se pak dostává už pouze výsledek v podobě html stránky. „PHP umožňuje vývoj různorodých aplikací počínaje jednoduchým počítadlem přístupů a konče tvorbou podnikového informačního systému v prostředí intranetu či extranetu. Možnosti PHP umocňuje důsledná integrace s mnoha databázovými systémy. Velká výhoda PHP spočívá v jeho nezávislosti na používaných platformách. Výsledkem běhu PHP-skriptu je obyčejný HTML dokument, který umí zobrazit každý internetový prohlížeč – odpadají tedy problémy s kompatibilitou, které mají některé jiné vývojové prostředky.“ (Kosek, 1999) Jazyk PHP nabízí oproti ostatním jazykům značně uvolněnou práci například s proměnnými, není třeba při vytváření proměnné deklarovat její typ. I pro svou jednoduchost se tento jazyk stal velice oblíbeným, člověk se tento jazyk snadno a rychle naučí. MySQL je databázový server, který běží na Unixu i na Windows. MySQL server je dostupný jak pod bezplatnou licencí, tak i pod licencí komerční, placenou. Patří mezi nejpoužívanější databázové systémy, je velice rychlý a vhodný na použití s programovacím jazykem PHP. 3.2.4
SEO optimalizace
„SEO optimalizace (z anglického Search Engine Optimization) je soubor úkonů, které mají za úkol zajistit co nejlepší (nejvyšší) pozice ve vyhledávačích v přirozeném výsledku vyhledávání – SERP.“ (Jaroslav Vašut, [online]) Jedná se o soubor drobných úprav částí webových stránek, který však jako výsledný celek může zajistit výraznou pozitivní změnu ve výsledcích vyhledavačů. Označování názvu stránek značkou
uvnitř značky <head> je třeba zajistit pokaždé v souvislosti s konkrétní podstránkou. Titulek stránky vyhledavačům i uživatelům sděluje, co je tématem dané stránky a měl by být stručný a výstižný. Zároveň se titulek zobrazuje v seznamu konkrétních výsledků vyhledavačů, je proto nutné zvolit takový titulek, který odpovídá konkrétnímu obsahu dané stránky. Každá stránka by v ideálním případě měla mít jedinečnou značku <title>. Dle SEO analyzátoru je správná délka titulku 20 až 60 znaků, dále titulek nesmí obsahovat stejné slovo více než dvakrát. (SEO-analyzator.cz, [online]) Metaznačka description poskytuje vyhledavačům jakýsi popis konkrétní stránky a informace o jejím obsahu. Stejně jako <title> se zapisuje v hlavičce stránky – uvnitř značky <head>. Metaznačka může obsahovat několik vět a opět by měla být unikátní pro každou podstránku v ideálním případě. „Metaznačky description jsou důležité, protože je Google může u vašich stránek použít jako úryvky. Slovo „může“ je zmíněno úmyslně. Google totiž mů-<br />
<br />
Metodika a použité metody<br />
<br />
23<br />
<br />
že použít také relevantní část viditelného textu stránky, pokud tato část odpovídá vyhledávacímu dotazu uživatele.“ (Google, [online]) SEO analyzátor uvádí správnou délku popisku jako 80 až 160 znaků. Stejné slovo by se nemělo vyskytovat více než 3× a popisek by neměl být totožný s titulkem stránky. (SEO-analyzator.cz, [online]) Zlepšení struktury adres URL je dalším nástrojem ke zlepšení nejen SEO optimalizace, ale i přehlednosti adresy pro uživatele. Tzv. „pěkná URL“ (např. /opravy-tv-a-elektroniky/) vypovídá o obsahu samotné stránky, dostupné pod touto URL. URL se také zobrazuje ve výsledcích vyhledavačů, takže i zde zaujme případného návštěvníka. Pro navigaci je důležité vytváření přirozené hierarchie, konkrétní odkazy navigace by měly být v textové podobě. Není dobré stavět navigaci pouze na rozbalovacích nabídkách, obrázcích nebo animacích. Pro rozmanitější webové stránky je dobré vytvoření sitemap, který návštěvníkovi poskytne rozcestník na všechny stránky daného webu. Kvalitní obsah a služby jsou žádoucí pro každou webovou stránku, je třeba vytvářet jedinečný obsah. Obsah je třeba vytvářet pro uživatele, text je třeba psát čitelně a držet se tématu. Důležitá je správná struktura a využívání nadpisů H1–H6, které vyhledavače berou v potaz. První v pořadí stránky musí být vždy nadpis H1, dále H2 atd. Nadpis H1 se na každé stránce musí vyskytovat právě jednou. S využíváním nadpisů H2–H6 se to nesmí přehánět a musí být použity v přiměřeném množství k rozsahu textu dané stránky. Mezi další možnosti SEO Optimalizace patří například vytvoření souboru robots.txt, který má za úkol směrovat vyhledavače do složek, popř. jim přístup do složek omezit. Tento soubor se umísťuje do kořenového adresáře webové stránky. Dalším prvkem je i validita kódu, která může kladně i záporně ovlivnit hodnocení dané webové stránky. Důležité je i zajištění pouze jedné varianty stránky, a to s verzí bez www nebo verzi obsahující www. Toto lze zajistit pomocí přesměrování přes 301 stavový kód. V neposlední řadě je dobré vytvořit pro vyhledavače i soubor sitemap.xml, který vyhledavačům dává informace o všech dostupných podstránkách dané stránky. Pomocí tohoto souboru tak lze vyhledavači sdělit informace o existenci stránky, kterou by vyhledavač mohl přehlédnout. Všechny tyto zmíněné postupy můžeme zařadit do tzv. on-page optimalizace. On-page optimalizace se týká samotné stránky a jejího sestavení kódu. Naproti tomu Off-page optimalizace se zabývá tvorbou zpětných odkazů (backlinků) na dané stránky. Čím více ostatních stránek na ty naše odkazuje, tím se hodnota (rank) naší stránky zvyšuje. Důležitá je však i hodnota stránek, které na nás odkazují. Pokud na nás odkazují stránky s vysokým rankem, naší stránce to jenom prospívá a tato situace má pozitivní vliv na zvýšení ranku i naší stránky. Naproti tomu odkazování ze stránek s nulovým rankem nemusí mít žádný přínos. S daným tématem úzce souvisí pojem linkbuilding, který je možný chápat jako synonymum pro off-page optimalizaci. Zabývá se právě odkazováním mezi webovými stránkami, které může být prodáváno a poskytováno jako reklama za<br />
<br />
24<br />
<br />
Metodika a použité metody<br />
<br />
úplatu. Důležité je získat co největší počet tzv. zpětných odkazů, které zaručí vyšší prestiž naší stránce.<br />
<br />
3.3 Analýza dostupných store management systémů 3.3.1<br />
<br />
Zencart<br />
<br />
Zencart je Open Source store management systém určený pro tvorbu elektronického obchodu (e-shopu). Systém je založený na programovacím jazyku PHP a využívá databázový systém MySQL. Domovské stránky systému je možné naleznout na adrese www.zen-cart.com. Oficiální českou podporu tvoří komunita na stránkách www.zencart.cz. Demoverzi administračního systému e-shopu je možné vyzkoušet na adrese www.opensourcecms.com/demo/2/96/Zen_Cart. Zencart nabízí širokou škálu rozšiřitelných modulů od různých administračních nástrojů (přihlášení administrátora v roli zákazníka, exportér emailových adres, ukládání historie vyhledávání zákazníků), přes možnosti jednoduché změny šablony, marketingových nástrojů (Facebook komentáře, RSS čtečku, modul 1+1 produkt zdarma…) až po různé specifické moduly plateb. Při práci se systémem uživatel nemusí ovládat jazyk html. Z některých vybraných vlastností můžeme zmínit, že produkty mohou být označené jako „zdarma“, popř. „volat pro zjištění ceny“, dále je možné produkty zkopírovat do dalších kategorií či na ně odkazovat, podporováno je větší množství měn i jazyků. Systém nabízí širokou škálu dalšího nastavení, mimo jiné je možné využít i plateb pomocí služby PayPal. Zencart však působí poměrně zastarale a ze zkušeností uživatelů není mnoho doporučován. 3.3.2<br />
<br />
Virtuemart<br />
<br />
„VirtueMart je Open Source internetové komerční řešení, internetový obchod a rozšíření pro redakční systém Joomla! a Mambo. Je možné jej provozovat jako internetový obchod, případně jako katalog zboží pro Váš web. VirtueMart nezná žádné limity, umí spravovat neomezený počet položek zboží, kategorií a podkategorií. Optimalizace pro IE 5.5 a vyšší, Firefox a další. Nejdříve je nutné mít nainstalovaný redakční systém Joomla nebo Mambo (zdarma), až po té je možné instalovat a konfigurovat internetový obchod Virtuemart. Joomla poskytuje kostru a jádro, které VirtueMart používá. Virtuemart je po instalaci plně integrován do Vašich webových stránek.“ (VirtueMart, [online]) Virtuemart je tedy vázaný na redakční systém Joomla!, oficiální stránky produktu jsou dostupné z url www.virtuemart.net, systém má také svou českou základnu s podporou na adrese www.obchod-virtuemart.cz. Systém je napsaný pomocí jazyku PHP a spolupracuje s databází MySQL. Na domovských stránkách je možné si systém plně vyzkoušet včetně administrace. Systém taktéž podporuje různé administrační rozšíření, importní systémy, platební sys-<br />
<br />
Metodika a použité metody<br />
<br />
25<br />
<br />
témy a mnoho dalšího. Široká je i nabídka možných šablon vzhledů samotného systému. Z vlastností sytému lze zmínit možnost neomezeného počtu produktů a kategorií, možnost upozornění zákazníků při znovu naskladnění produktu či možnost hodnocení produktů uživateli. Z administrace je možná správa různých měn a zemí, podpora více obrázků a souborů pro produkt a mnoho dalšího. Virtuemart je limitující svou závislostí na redakčním systému Joomla!, který může být pro někoho nevhodný. Tato závislost mu pak nedává dobrou výchozí pozici pro výběr. 3.3.3<br />
<br />
Opencart<br />
<br />
Opencart je jednoduchý internetový obchod, který je postavený opět na programovacím jazyku PHP a využívající databázi MySQL. Jedná se o Open Source projekt. Na domovských stránkách produktu www.opencart.com se lze dočíst, že tento elektronický obchod byl navržený pro přívětivé uživatelské rozhraní a bohatý balík vlastností. Opencart nabízí možnost vyzkoušení demoverze, kde je možný přístup do administrace systému. Administrace působí vskutku velmi přehledně, i když nabízí široké možnosti nastavení. Systém se chlubí možnosti vytvoření neomezeného množství kategorií, produktů a výrobců, dále možnostmi změny šablon, podporou více měn a možností změny jazyků. Dále systém umí hodnocení produktů, jejich recenze, zobrazení podobných produktů, možná je automatická změna velikosti obrázků produktu, kalkulace ceny dodání v závislosti na váze produktu, slevový kupónový systém, nástroje pro obnovu a zálohu systému či možnost vytvoření libovolného množství počtu informativních stránek. K dispozici je pro poslední verzi ke stáhnutí čeština, která překládá potřebné stránky. Není však přeloženo vše, takže se v administraci můžeme setkat s položkami v angličtině. U tohoto produktu není přítomna až tak silná česká základna, která by vytvořila vlastní stránky pro českou podporu, jako u produktu Zencart a Virtuemart. Možné rozšíření jsou k dispozici, některé jsou zdarma, některé jsou placené a ceny se pohybují od $10 například za možnost změny pozadí určitého produktu až po $299 za možnost 3D zobrazení a rotace produktu. Opencart, dle zkušeností uživatelů, patří mezi jedno z nejlepších řešení díky čistotě své práce a jednoduchému, příjemnému designu. Vyzdvihována je i podpora hodně platebních modulů. 3.3.4<br />
<br />
Prestashop<br />
<br />
Dalším Open Source projektem je Prestashop, který se na svých domovských stránkách www.prestashop.com chlubí překladem do 41 jazyků a užitím ve 150 zemích světa. Tento systém je opět naprogramován v jazyku PHP a využívá databázi MySQL. Silnou českou základnu má Prestashop na stránkách www.prestashopcesky.cz, kde autoři hned v titulku píší, že se jedná o nej-<br />
<br />
26<br />
<br />
Metodika a použité metody<br />
<br />
lepší Open Source e-shop. K tomuto systému byla dokonce vydána i česká kniha od nakladatelství Computer Press, která seznamuje uživatele se systémem a jeho úpravou. Na domovských stránkách produktu je možné vyzkoušení demoverze a uživatel se tak může seznámit se systémem. Demo administrace nepůsobí tak jednoduchým a přehledným dojmem jako v případě Opencartu, nicméně vše má i zde svou logiku a strukturu. V administraci je opět možné prozkoumat široké možnosti nastavení. Mezi hlavní vlastnosti produktu patří efektivní správa skladových položek, možnost exportu produktu na Ebay, Amazon, popř. Google shopping, možnost nastavení počtu produktů na stránku, křížené nakupování, prodej elektronických stažitelných produktů, neomezené množství produktů, kategorií a atributů, možnost porovnání produktů, nebo je vyzdvihována kvalitní vrstvená navigace. Prestashop se hodnotí jako nejspolehlivější a nejflexibilnější Open Source eshop, který je dostupný od roku 2007. Vývojářský tým se skládá z více než 100 nadšenců a komunita kolem tohoto systému dosahuje přes 300 000 členů. Prestashop je mezi českými vývojáři velice oblíbený a představuje dobré řešení. Uživatelé vyzdvihují přímou podporu platebního modulu GoPay.<br />
<br />
3.4 Analýza dostupných redakčních systémů 3.4.1<br />
<br />
WordPress<br />
<br />
Systém WordPress je u nás velmi populární, je napsaný v jazyku PHP a využívá MySQL databázi. Jedná se o bezplatný redakční systém a mezi silné stránky patří jednoduché a intuitivní ovládání, časté aktualizace, nebo třeba nahrávání souborů pomocí „drag and drop“. Systém je možné upravovat pomocí velkého množství skinů a pluginů, dále je možné doplnění různými funkčními panely (widgety). Systém je vhodný na použití u jednodušších prezentací popř. blogů, nebo i středně složitých projektů. 3.4.2<br />
<br />
Joomla!<br />
<br />
Joomla! je taktéž velice oblíbeným bezplatným redakčním systémem napsaným v PHP, využívá stejně jako WordPress databázi MySQL. Tento systém však už má za úkol uspokojit i náročné uživatele, nabízí dlouhý seznam funkcí, doplňků a přizpůsobení. Mnozí uživatelé si však stěžují na zbytečně složitý a „ošklivý kód“, který Joomla! produkuje. Jiní uživatelé zase vyzdvihují dobrou podporu tohoto systému. 3.4.3<br />
<br />
Drupal<br />
<br />
Systém Drupal bývá vnímán jako profesionální publikační systém pro náročnější projekty. Drupal je napsaný v PHP a využívá databáze MySQL, nebo PostgreSQL. Současná verze vyžaduje PHP ve verzi minimálně 5.2. V základní instalaci nabízí moduly pro tvorbu článků, statických stránek, diskuzní fórum, blog,<br />
<br />
Metodika a použité metody<br />
<br />
27<br />
<br />
přidávání komentářů k obsahu a mnoho dalších. Uživatelé se shodují, že jeho komplikovanější ovládání se pojí s určením na složitější a náročnější projekty.<br />
<br />
3.5 Vyhodnocení redakčních a store management systémů Po podrobném nastudování dostupných redakčních systémů a store management systémů bylo rozhodnuto, že nejvhodnější bude zvolit vlastní řešení na míru danému subjektu. Požadavky subjektu nejsou natolik rozsáhlé, aby se vyplatila instalace velkého redakčního systému a instalace rozsáhlého e-shopu, o který firma v tuto chvíli ani nemá zájem. Firma požaduje pouze jednoduchý výpis produktů, který se bude odehrávat v pěti kategoriích, s obrázkem, popiskem a cenou. Toto jednoduché řešení je požadováno z důvodu velmi malého rozsahu produktů. Správa statických podstránek má obsahovat pouze WYSIWYG editor a tlačítko uložit. Úprava těchto rozsáhlých produktů na požadavky firmy by nedávala příliš smysl a stála by více úsilí, než vytvoření samotné aplikace na míru. Výsledek by zřejmě ani nebyl příliš kvalitní, minimálně co se týče zdrojového kódu. Dalším faktorem, který ovlivnil výsledné rozhodnutí, je složité ovládání ze strany budoucích uživatelů – laiků. Ovládání administrace má být co nejjednodušší, měl by ho zvládnout každý, bude proto dělané přímo na míru subjektu, v co nejjednodušší podobě. V případě analyzovaných systémů je ovládání velmi rozmanité. Dalším požadavkem bylo, aby všechny podstránky pro podnik byly předem pevně dané a uživatel neměl možnost jejich rozšíření či smazání. Pro administrátora však nebude problém jakoukoliv novou podstránku v budoucnu snadno přidat či upravit.<br />
<br />
28<br />
<br />
Realizace práce<br />
<br />
4 Realizace práce 4.1 Návrh loga Z požadavků firmy vyplývá, že firma chce vytvořit nové logo, které bude obsahovat název firmy – Elektro Biel a piktogram, který se bude skládat ze tří prvků. Tyto tři prvky mají být barev RGB – tedy červená, zelená a modrá. Po nastudování potřebné teorie, která byla zmíněna v kapitole Tvorba loga, bylo vytvořeno logo, které odpovídá požadavkům firmy a požadavkům správného loga. Z hlediska identifikačních kritérií logo není zaměnitelné s jinými, není příliš složité a je dobře rozpoznatelné. Logo díky použitému písmu působí i moderním dojmem. Významová kritéria byla určena názvem subjektu, který se měl objevit v logu, tento název však ovlivnit nelze. Název „Elektro Biel“ je však dobře vyslovitelný v domácím jazyce i různých cizích jazycích. Logo nesvádí k dokreslování různých objektů a lidé by v něm neměli spatřovat cokoliv jiného. Z hlediska estetických kritérií je nutné posouzení odborníků. Jelikož se jedná o dlouhodobou značku, byla vytvořena i černobílá varianta a varianta různých odstínů šedi. Písmo v logu bylo pečlivě vybráno, jedná se o písmo Trebuchet MS a k subjektu se dobře hodí. Logo nebylo ovlivněno žádnými módními trendy, mělo by tedy vydržet po delší dobu působnosti firmy. S ohledem na technologická kritéria bylo logo vytvářeno tak, aby splňovalo dostatečnou míru čitelnosti a kontrastu. Pro tmavé podklady byla vytvořena i varianta s textem bílé barvy. Pro zajištění správné reprodukce v různých velikostech jsou všechny varianty loga vytvořené ve vektorové grafice. Zvětšení loga např. na velký billboard pak není doprovázeno žádnou ztrátou kvality.<br />
<br />
Obr. 5<br />
<br />
Výsledné logo firmy Elektro Biel<br />
<br />
Důležitou součástí návrhu byla kompozice jednotlivých prvků, která musí působit vyváženě. Jednotlivé prvky jsou rovnoměrně uspořádané do naznačeného trojúhelníku.<br />
<br />
Realizace práce<br />
<br />
Obr. 6<br />
<br />
29<br />
<br />
Výsledné logo firmy Elektro Biel s ukázkou zarovnání prvků<br />
<br />
Důležitá varianta byla varianta jednobarevná. Tato varianta nesmí nijak zásadně změnit význam ani působení loga. Logo v černé variantě působí správně stejným dojmem jako ve variantě barevné.<br />
<br />
Obr. 7<br />
<br />
Ukázka černobílé varianty loga<br />
<br />
Poslední vytvářená varianta byla varianta různých odstínů šedi, například pro použití při černobílém tisku. Opět zde nedochází k žádné změně významu loga a působí stejným dojmem.<br />
<br />
30<br />
<br />
Obr. 8<br />
<br />
Realizace práce<br />
<br />
Ukázka loga v odstínech šedé barvy<br />
<br />
4.2 Návrh a realizace webových stránek 4.2.1<br />
<br />
Návrh webových stránek<br />
<br />
Návrh webové prezentace byl realizován v souvislosti se zásadou „nenuťte uživatele přemýšlet“ (KRUG, 2006). Ze zadaných podstránek, které firma požaduje na stránkách, byla vytvořena základní navigační struktura, která má návštěvníkovi vždy jasně poskytnout informace co kde najít. Základní navigační strukturu postihuje wireframe (drátěný model). Wireframe byl vytvořen pomocí webové aplikace na stránkách: app.mockflow.com.<br />
<br />
Realizace práce<br />
<br />
Obr. 9<br />
<br />
31<br />
<br />
Drátěný model pro Elektro Biel<br />
<br />
Navigace se skládá ze dvou částí – levého menu a horního menu. V horním menu můžeme nalézt položky, které se týkají firmy samotné, jsou to tyto položky: Úvod, O nás, Kontakt a Podmínky. Horní menu je součásti horizontálního pruhu, který představuje hlavičku stránky. Můžeme zde nalézt logo firmy, obrázky elektroniky, kterou se firma zabývá, velký nadpis Elektro Biel a menší podnadpis, který představuje slogan firmy. Hlavička je výrazně vizuálně oddělená od obsahové části stránky, kde je mimo levé menu generován hlavní obsah. Levé menu má za úkol informovat návštěvníka o službách, které firma nabízí, aktuální nabídce zboží a poskytnout rychlý kontakt návštěvníkovi na fir-<br />
<br />
32<br />
<br />
Realizace práce<br />
<br />
mu. Menu tedy obsahuje tři hlavní kategorie, těmi jsou: Služby, Aktuální nabídka a Rychlý kontakt. Kategorie Služby poskytuje výpis služeb, které firma nabízí. Těmito službami jsou: Prodej televizorů, Opravy TV a elektroniky, Řešení domácích sestav, Prodej navigací, Montáže a opravy navigací, Automobilové úpravy. Po kliknutí na jednotlivou položku jsou návštěvníkovi poskytnuty podrobné informace. Dále je možné v této kategorii nalézt i Ceník služeb a položku Naše práce s ukázkou zakázek především v oblasti automobilů vytvořených v minulosti. Úkolem těchto podstránek je možnost snadného spravování z administrace pomocí WYSIWYG editoru, stejně jako podstránky v horním menu. Kategorie Aktuální nabídka obsahuje položky Nové televizory, Použité televizory, Hifi, DVD, kina, Navigace a příslušenství a Elektro zboží. Položky této kategorie slouží k výpisu produktů a budou spravovány speciální aplikací na míru, přímo z administračního systému. Poslední kategorie levého menu je Rychlý kontakt, který má návštěvníkovi poskytnout rychlé informace o adrese, otevírací době, telefonu a mailu. Tyto informace jsou návštěvníkovi přístupné z jakékoliv podstránky, návštěvník tak má vždy kontaktní informace po ruce. Kliknutím na adresu je návštěvník odkázán přímo na mapu.<br />
<br />
Realizace práce<br />
<br />
Obr. 10<br />
<br />
33<br />
<br />
Finální návrh webové prezentace Elektro Biel<br />
<br />
Na samotném konci stránky se nachází patička, kde můžeme nalézt odkaz na statistiky a odkaz do administračního systému. Barva písma je méně výrazná, běžného uživatele nemá za úkol nijak upoutat žádnou podstatnou informací. 4.2.2<br />
<br />
Realizace webových stránek<br />
<br />
K realizaci webových stránek bylo využito jazyků Html, CSS, JavaScript a PHP. V první fázi byla vytvořena šablona pomocí Html a CSS. Byl kladen důraz na správné zobrazení ve všech dnešních moderních prohlížečích a čistotu kódu. V druhé fázi došlo k rozdělení šablony do speciálních souborů, které budou následně pomocí jazyku PHP spojeny. Každá jednotlivá podstránka tedy vkládá speciální soubor pro hlavičku, levé menu a patičku. Pro představu je přiložen zdrojový kód stránky Úvod.<br />
<br />
34<br />
<br />
Obr. 11<br />
<br />
Realizace práce<br />
<br />
Ukázka zdrojového kódu stránky Úvod<br />
<br />
Jak můžeme vidět z ukázky zdrojového kódu, mimo vkládání hlavičky (header.php), menu (menu.php) a patičky (footer.php) je ještě pomocí příkazu require načítáno připojení k databázi (connection.php). Dále je načítán jednoduchý JavaScriptový kód zmena_home.js pro změnu podkladového obrázku na stránce úvod, který se vykresluje jako pozadí hlavní části stránky, kde je generovaný obsah. Na ostatních stránkách je obrázek také zobrazován, avšak jeho viditelnost je jen 20 % a je přes něj vypisován vlastní obsah stránky. Poté již následuje php kód, který zajišťuje načtení dat stránky z databáze a uložení do proměnné $vysledek. Následně je zajištěn výpis textu konkrétní stránky, v tomto případě stránky označené v databázi jako uvod. 4.2.3<br />
<br />
Adresářová struktura<br />
<br />
Kvalitní web musí obsahovat i přehlednou adresářovou strukturu, například pro další administrátory, kteří by mohli stránku v budoucnu spravovat. Názvy souborů musí dávat smysl, stránky nemají být pojmenovávány obecnými názvy jako třeba stranka1.html. Zároveň by neměla být adresářová struktura zbytečně hluboká, na prvním místě je však logika uspořádání. V kořenovém adresáři se nachází složka admin, contents, css, data a pages. Mimo tyto složky je zde i index.php, soubor .htaccess, sitemap.xml a robots.txt. Adresář admin obsahuje samotnou novou webovou administrační stránku, v tomto adresáři je také mimo soubor .htaccess i soubor .htpasswd, v kterém jsou uložena povolená jména a zašifrovaná hesla pro přístup do administračního systému.<br />
<br />
Realizace práce<br />
<br />
35<br />
<br />
Adresář contents obsahuje soubory, které jsou vkládány do jednotlivých stránek a jsou pro vícero stránek společné. Najdeme zde soubory pro hlavičku stránky, menu, patičku či připojení k databázi. Mimo tyto soubory se zde nachází i adresář samotného CKEditoru, který je využíván jako WYSIWYG editor. Adresář css obsahuje mimo samotné kaskádové styly webových stránek i obrázky, které jsou součástí vzhledu stránek. Tyto obrázky jsou v podadresáři označeném img. Adresář data slouží primárně pro ukládání souborů obsahu webových stránek. Jsou sem ukládány například obrázky uploadovaného zboží včetně náhledu. Dále do této složky mohou být nahrávány různé dokumenty či PDF manuály a podobně. Poslední adresář, který se nachází v kořenovém adresáři, je adresář pages. Nalezneme zde všechny podstránky webové prezentace, které jsou vhodně pojmenované. Nachází se zde tedy soubory montaze_a_opravy_navigaci.php, navigace_a_prislusenstvi.php, reseni_domacich_sestav.php atd. 4.2.4<br />
<br />
Seo optimalizace<br />
<br />
Jak jsme si mohli všimnout na obrázku Ukázka zdrojového kódu stránky Úvod, na začátku každé stránky je do proměnné $nadpis ukládáno označení konkrétní podstránky. Toto označení je pak použito i při výpisu titulku stránky. Například v případě podstránky Opravy TV a elektroniky je titulek v hlavičce následující: <title>Opravy TV a elektroniky | Elektro Biel – Váš specialista na TV a Elektroniku. Požadavek unikátního titulku každé stránky, který ji vystihuje, je tak splněn. Taktéž je splněn i rozsah 20 až 60 znaků a maximální výskyt jednoho slova není větší než dvojnásobný. Popisek stránky odpovídá doporučovanému rozsahu 80 až 160 znaků, neobsahuje stejné slovo více jak 3× a není totožný s titulkem stránky. Veškerá navigace na stránkách je v textové podobě. Vyhledavače tak nemají problém s načtením navigačních položek a mohou s nimi pracovat. Dále je využíváno nadpisu H1, který označuje každou podstránku velkým modrým nadpisem na jejím začátku. Opět je zde využíváno názvu stránky z proměnné $nadpis. Je tak správně zajištěn automatický nadpis pro každou podstránku webové prezentace. Nadpis H1 je také nad všemi nadpisy H2–H6, takže je správně vyřešená struktura nadpisů. Dalším důležitým řešením bylo vytvoření tzv. „pěkných url“. Těch bylo docíleno úpravou souboru .htaccess. Jako dobrý zdroj informací posloužil Osobní blog Tomáše Erlicha, kde je možné nalézt i praktické ukázky. Hlavním úkolem bylo přepsání skutečné adresy na adresu „pěknou“, která správně funguje v rámci Seo optimalizace. Cílem je přepsání skutečné adresy pages/opravy_tv_a_elektroniky.php na adresu opravy-tv-a-elektroniky. Této úpravy je dosaženo vložením řádku RewriteRule ^opravy-tv-a-elektroniky$ pages/opravy_tv_a_elektroniky.php, přičemž před samotný přepis je nastaven RewriteEngine na možnost „on“. Tento přepis byl proveden s každou podstrán-
36
Realizace práce
kou, nyní se již lze odkazovat na stránku pomocí „pěkné url“ /opravy-tv-aelektroniky. Pro zabránění duplicity webové stránky variantou s www a bez www byl opět použit soubor .htaccess. Do tohoto souboru byl vložen následující kód: RewriteEngine on RewriteCond %{HTTP_HOST} ^www\.biel\.cz [nc] RewriteRule (.*) http://biel.cz/$1 [R=301,L] (Erlich, 2008, [online]) Tento kód zajišťuje přepsání adresy s www.biel.cz na variantu biel.cz pro zabránění duplicity a využívá 301 stavový kód. Tento postup byl získán ze stránek Osobní blog Tomáše Erlicha, kde je ukázka i opačné varianty přesměrování na verzi s www. Pro vyhledavače byl dále vytvořen soubor robots.txt a soubor sitemap.xml, které vyhledavačům pomáhají s indexací. V souboru robots.txt bylo vyhledávacím botům řečeno, aby se nesnažili indexovat složku admin, která slouží pro správu webových stránek. Sitemap.xml pak poskytuje vyhledavačům odkazy na všechny stránky webové prezentace a byl vygenerován pomocí nástroje na url: www.xml-sitemaps.com. Oba tyto soubory se nachází v kořenovém adresáři webové stránky a vyhledavače je tak snadno naleznou. Pro ověření SEO optimalizace bylo využito SEO analyzátoru na url www.seo-analyzator.cz, který označil výsledek optimalizace jako „výborný výsledek“. Splněny byly výše uvedené kritéria, analyzátor pro dokonalou optimalizaci poukazoval ještě na některé drobnosti, které by šlo zlepšit. Druhý použitý nástroj na SEO analýzu byl SEO Servis dostupný z www.seo-servis.cz. Tento nástroj analyzoval stránku z hlediska SEO optimalizace jako bezchybnou. U obou analyzátorů se vyskytl menší problém s úvodní stranou, kde není přítomen nadpis H1. Nadpis pak po nastudování problému byl vložen i na úvodní stranu, byla mu však nastavena pomocí css vlastnost display: none, která zaručuje, že se prvek nezobrazí. Z hlediska SEO optimalizace je však vše v pořádku.
4.3 Implementace administračního systému 4.3.1
Zabezpečení administrace
Pro zabránění vstupu do administrace a autorizaci byla použita metoda využívající možnosti souboru .htaccess a .htpasswd. Jedná se dokonce o nejspolehlivější metodu ze všech. (Churý, 2005, [online]) V souboru .htaccess je nutné definovat AuthUserFile, kde se určí cesta k souboru s povolenými jmény a jejich hesly – .htpasswd. Dále je určen AuthName, jako označení složky a AuthType pro definici způsobu autorizace. Poslední nutný příkaz require valid-user zajišťuje vstup pouze ověřeným uživatelům. Soubor .htpasswd obsahuje povolená uživatelská jména a hesla. Každé jméno je na novém řádku, heslo je za jménem oddělené dvojtečkou. Heslo však musí být šifrované, k účelům zašifrování hesla slouží například Htpasswd gene-
Realizace práce
rator dostupný generator. 4.3.2
37
na
stránce
www.htaccesstools.com/htpasswd-
Databázový model
Databázový model pro konkrétní požadavky webové aplikace nepotřebuje nijak složitou strukturu, pro ukládání dat jsou vytvořené tabulky stranky a zbozi. Tabulka stranky slouží pro ukládání dat z CKEditoru a slouží pro účely uchovávání dat statických podstránek. Tabulka obsahuje sloupce id typu INTEGER, sloupec text typu TEXT a nazev, který je typu VARCHAR o maximální délce 30 znaků. Sloupec id má nastavenou vlastnost auto_increment, která se stará o automatické navyšování id nově přidané stránky a zároveň se jedná o primární klíč. Sloupec text slouží k uchovávání obsahu podstránky, který je ukládán z CKEditoru. Poslední sloupec nazev nese vlastnost unique a je pomocí něj identifikován název jednotlivé podstránky. Tabulka zbozi obsahuje sloupce id, nazev_zbozi, popis_zbozi, cena, nazev_stranky, obrazek. Id je primární klíč typu INTEGER a má vlastnost auto_increment, která se opět stará o automatické navyšování. Sloupec nazev_zbozi je typu VARCHAR o délce 30 znaků a je do něj ukládán titulek vkládaného zboží. Sloupec popis_zbozi obsahuje popis vkládaného produktu a je typu TEXT. Z důvodu větší volnosti označení ceny byl sloupec cena nastaven na typ VARCHAR (o délce 20 znaků), který zajišťuje možnost vložení jakéhokoliv znaku, nejenom čísla. Při vkládání pak bude možné vložit libovolnou hodnotu, která se uživateli administrace v budoucnu může někdy hodit. Sloupec nazev_stranky je nutný k uchování názvu kategorie zboží, ze které bylo vkládáno. Kategorií pro správu zboží je celkem 5. Při výpisu pak je pomocí tohoto sloupce filtrováno správné zboží do dané kategorie. Poslední sloupec Obrazek nenese vlastní obrázek, nýbrž pouze hodnotu 0 nebo 1, která informuje, zdali obrázek je či není přítomen u daného zboží.
38
Realizace práce
Obr. 12 Databázový model administračního systému Zdroj: MySQL Workbench
4.3.3
Implementace systému na správu podstránek
Jedním ze základních požadavků byla správa podstránek pomocí WYSIWYG editoru. Vybraný WYSIWYG editor byl CKEditor, který je dostupný zdarma pro nekomerční i komerční účely. Tento Editor je dostupný na svých domovských stránkách www.ckeditor.com. Editor poskytuje uživateli širokou paletu formátu textu od tučného písma či kurzívy po možnost horních či dolních indexů, číslování, odrážek atd. Důležitou vlastností pro administrátora či zkušenějšího uživatele je možnost zobrazení html kódu. Pak není problém cokoliv upravit či dopsat pomocí jazyku html. Paletu je však možné upravit a zbytečné položky byly pro uživatele odstraněny. Po stažení CKEditoru je třeba ho nahrát do jakékoliv složky ve webových stránkách a následně určit cestu pomocí příkazu: <script type="text/javascript" src="/contents/ckeditor/ckeditor.js"> v hlavičce administrační stránky. Pokud nyní vytvoříme v administraci
