Tvorba webové prezentace s redakčním systémem a návrh logotypu pro cykloservis

Mendelova univerzita v Brně Provozně ekonomická fakulta Tvorba webové prezentace s redakčním systémem a návrh logotypu pro cykloservis Bakalářská práce Vedoucí práce: Ing. Naděžda Chalupová, Ph.D. Anna Marková Brno 2013

Ráda bych zde poděkovala vedoucí své práce Ing. Naděţdě Chalupové, Ph.D za její čas, odborné vedení a cenné rady při zpracování bakalářské práce.

Prohlašuji, ţe je tato bakalářská práce mým dílem, které jsem vypracovala samostatně. Všechny vyuţité zdroje a literatura jsou v práci řádně uvedeny a citovány. V Brně dne 13. května 2013

Abstract Marková, A. Creating web presentation with CMS and logo creation for bike repair. Brno: PEF MENDELU, 2013. This bachelor thesis deals with the problematic of creating and proposition of logotype, followed by the proposition and realization of web presentation of bike repair Magda with the system for easy web administration. In the first part, the analysis for detecting the concrete needs was done. In the theoretical part, we concentrate on the general problematic of logotype creating and technical tools needed for realization itself. The core of the thesis lies in creating of logotype, web page following the client s demands and in the implementation of redaction system for its maintenance Keywords Logo, web presentation, SEO optimalization, content management system Abstrakt Marková, A. Tvorba webové prezentace s redakčním systémem a návrh logotypu pro cykloservis. Bakalářská práce. Brno: PEF MENDELU v Brně, 2013. Tato bakalářská práce se zabývá problematikou tvorby a návrhu logotypu, dále pak návrhem a realizací webové prezentace cykloservisu Magda se systémem pro jednoduchou administraci webu. V první části je provedena analýza pro zjištění konkrétních potřeb. V teoretické části se probírá všeobecná problematika tvorby logotypu i webových aplikací a technické prostředky nutné k realizaci. Vlastní práce spočívá ve vytvoření logotypu, webových stránek dle poţadavků zadavatele a v implementaci redakčního systému pro jejich správu. Klíčová slova Logotyp, webová prezentace, SEO optimalizace, redakční systém

Obsah 9 Obsah 1 Úvod a cíl práce 12 1.1 Úvod... 12 1.2 Cíl práce... 12 2 Současný stav 13 2.1 Analýza současné situace cykloservisu... 13 2.2 Analýza konkurence... 14 2.2.1 Cykloservis KOŢAK... 14 2.2.2 Rock & Road... 15 2.2.3 BARNEX SPORT... 16 2.3 Poţadavky a potřeby cykloservisu... 17 3 Všeobecná problematika tvorby webových aplikací a logotypu 18 3.1 Logotyp... 18 3.1.1 Identifikační kritéria... 18 3.1.2 Sémantická kritéria... 19 3.1.3 Estetická kritéria... 19 3.1.4 Technologická kritéria... 19 3.2 Tvorba webových stránek... 20 3.2.1 Pouţitelnost... 20 3.2.2 Přístupnost... 20 3.2.3 Viditelnost (SEO optimalizace)... 21 3.2.4 Vzhled a rozloţení... 23 3.2.5 Copywriting... 23 4 Prostředky pro realizaci 24 4.1 Technické prostředky pro návrh webu... 24 4.1.1 HTML... 24 4.1.2 CSS... 24 4.1.3 PHP... 24 4.1.4 MySQL...25 4.1.5 JavaScript...25

10 Obsah 4.2 Programy pro návrh logotypu a grafických prvků webu... 25 4.3 Dostupné redakční systémy... 25 4.3.1 WordPress... 26 4.3.2 Joomla!... 26 4.3.3 Drupal... 26 4.3.4 Závěrečné zhodnocení... 26 4.4 Databáze... 27 5 Realizace práce 28 5.1 Návrh logotypu... 28 5.2 Návrh webové prezentace... 30 5.2.1 Informační architektura... 30 5.2.2 Drátěný model... 31 5.2.3 Grafický návrh... 32 5.2.4 Struktura adresářů... 33 5.2.5 Návrh databáze... 33 5.2.6 Realizace stránek... 34 5.2.7 SEO optimalizace... 36 5.3 Administrace stránek... 37 5.3.1 Přístup do administrace... 37 5.3.2 Implementace systému pro správu stránek... 38 5.3.3 Nové články... 39 5.3.4 Editace a mazání článků... 40 6 Závěr a diskuze 41 6.1 Diskuze přínosů... 41 6.2 Osobní zhodnocení... 41 6.3 Moţnosti rozšíření... 42 7 Literatura 43 A Náhledy webové prezentace 46 B Kontrola validace a SEO 49

Seznam obrázků 11 Seznam obrázků Obr. 1 Ukázka původní webové prezentace cykloservisu Magda... 13 Obr. 2 Ukázka webové prezentace cykloservisu Kožak... 14 Obr. 3 Internetové stránky ROCK & ROAD... 15 Obr. 4 Ukázka webových stránek BARNEX SPORT... 16 Obr. 5 Skicy upravené v programu Corel Draw... 28 Obr. 6 Finální podoba logotypu, černobílá varianta... 29 Obr. 7 Barevná varianta logotypu... 29 Obr. 8 Schematické znázornění struktury informací... 30 Obr. 9 Wireframe pro cykloservis Magda... 31 Obr. 10 Výsledný návrh webové prezentace cykloservisu Magda... 32 Obr. 11 Přehled tabulek v databázi... 34 Obr. 12 Ukázka zdrojového kódu úvodní stránky... 35 Obr. 13 Ukázka kódu pro zobrazení náhledů jednotlivých článků... 35 Obr. 14 Funkce edit... 38 Obr. 15 Změna rozlišení obrázku... 39 Obr. 16 Články, jednotlivé náhledy... 47 Obr. 17 Náhled článku... 47 Obr. 18 Administrace, editace podstránky servis... 48 Obr. 19 Administrace, tvorba nového článku... 48 Obr. 20 Analýza zdrojového kódu úvodní strany, první část... 49 Obr. 21 Analýza zdrojového kódu úvodní strany, druhá část... 50

12 Úvod a cíl práce 1 Úvod a cíl práce 1.1 Úvod Magda je malá opravna kol v Brně Králově poli specializující se především na základní servis značkových kol a stavbu kol na zakázku. Pokud se chce v dnešní době podnikatel či firma prosadit, je skoro nezbytné mít alespoň jednoduchou webovou prezentaci a značku, jako nejvíce viditelnou část firemního stylu (corporate identity). Majitel cykloservisu, pan Václav Magda, byl donedávna i provozovatelem penzionu v České Kanadě a webová prezentace byla pouze součástí stránek této ubytovny. Majitel se rozhodl zviditelnit svůj podnik a vyţaduje proto zcela nový návrh webových stránek, včetně návrhu logotypu. Dále potřebuje, aby si mohl sám a jednoduše spravovat obsah webových stránek, popřípadě psát nové články. Teoretická část práce obsahuje analýzu současného stavu a konkurence, stručně se zabývá obecnou problematikou návrhu logotypu, webových stránek, jejich dostupnosti a pouţitelnosti. Jedna kapitola popisuje dostupné redakční systémy a jejich zhodnocení. Druhá část dokumentace se věnuje vlastní práci. 1.2 Cíl práce Cílem této práce je navrhnout a zkonstruovat vhodný logotyp pro cykloservis Magda v Brně. Vytvořit moderní webovou prezentaci pro tento subjekt a implementovat systém pro administraci podstránek pomocí WYSIWYG editoru. Pro splnění těchto cílů bude nutné obeznámit se s problematikou tvorby logotypu, webových stránek, aplikací a s databázovými systémy.

Současný stav 13 2 Současný stav V této kapitole je popsán a zhodnocen současný stav daného subjektu i jeho konkurence. Na konci jsou shrnuty poţadavky na výslednou webovou prezentaci i logotyp, abychom měli představu, co má samotná práce obsahovat. 2.1 Analýza současné situace cykloservisu Cykloservis Magda sídlí v městské části Brno Královo Pole na adrese Skácelova 32. Majitel, pan Václav Magda, zde sídlí od roku 1994. Cykloservis zatím nemá ţádnou reklamu ani značku, funguje na doporučení spokojených zákazníků především z dané městské části. Opravna nabízí klasický servis všech modelů kol i jeho součástí. Významnou součástí podnikání je i stavba kol na zakázku, podle finančních i vizuálních představ zákazníka. Původní webové stránky byly nepřehledné a informace určené pro zákazníky cykloservisu obsahovala pouze jediná podstránka. Dřívější podoba webu měla také velmi špatnou SEO optimalizaci a neobsahovala ţádnou administraci pro jednoduchou správu obsahu. Bohuţel ani grafický design stránek nebyl dostatečně kontrastní a pro uţivatele příjemný, jak můţete vidět na obrázku 1. Obr. 1 Ukázka původní webové prezentace cykloservisu Magda Zdroj: http://cyklopenzion.stalkov.cz/cykloservis-v-brne

14 Současný stav 2.2 Analýza konkurence V Brně se nachází velké mnoţství cykloservisů, řada z nich je zároveň autorizovaným prodejcem nějaké značky kol, oblečení, doplňků a poskytuje k ní i servis. Zaměříme se na opravny kol v blízkém okolí, především v Brně Králově Poli. V dané lokalitě bylo nalezeno celkem pět opraven kol, z nichţ servisy Rostislav Drmela a firma Amekonet nemají webovou prezentaci. Dále byly objeveny i velké prodejny kol (CYKLOS Brno, Kočař), které poskytují svým zákazníkům pouze záruční servis kol zdarma, proto zde podrobněji rozebrány nebudou. Ostatním konkurentům se budu věnovat důkladněji níţe. 2.2.1 Cykloservis KOŽAK Tato opravna nabízí veškerý servis kol i stavbu kol na zakázku, stejně jako cykloservis Magda. Majitel je bývalým mechanikem profesionálního MTB 1 týmu Merida. Webová prezentace je jednoduchá a přehledná, uţivatel se snadno zorientuje. Horní menu nabízí 7 poloţek, z nichţ jsou některé docela zbytečné. Odkazy Kudy do cykloservisu a kontakty obsahují stejné informace. Cykloservis sídlí na ulici Palackého třída 164, z analyzovaných konkurentů se nachází nejblíţe. Vzhled a uspořádání webových stránek je k vidění na obrázku 2. Obr. 2 Ukázka webové prezentace cykloservisu Koţak Zdroj: http://brno.cykloservis-kozak.cz/ 1 MTB je zkratka pro horská kola (z anglického mountain bike)

Současný stav 15 2.2.2 Rock & Road Rock & Road je cyklistický obchod, ale poskytuje široký sortiment zboţí. Mimo kol, koloběţek a doplňků prodává i fitness stroje a pomůcky. Servis kol, lyţí a snowboardů se provádí přímo v kamenné prodejně na Palackého třídě 50. V průběhu sezóny obchod přijímá do servisu pouze po předchozí rezervaci a kola musí být řádně očištěná. Na rozdíl od předchozí opravny se jedná o velkou provozovnu, kde je dílna pouze malou součástí podnikání. Rock & Road je zároveň jedním z RockShox center, při servisu tedy primárně dodává součástky této značky a nenabízí dodání či výběr vlastních dílů. Stránky jsou vzhledem k povaze podnikání rozsáhlé, nabídku cykloservisu lze najít pod poloţkou sluţby v hlavním horizontálním menu. Tato podstránka obsahuje výčet prováděných sluţeb, který je identický se seznamem sluţeb v levé navigaci, coţ můţe uţivatele mást. Prezentace je funkční a přehledná, dojem můţe všímavému zákazníkovi zkazit několik pravopisných chyb v textu. Podobu webové prezentace si můţete prohlédnout na obrázku 3. Obr. 3 Internetové stránky ROCK & ROAD Zdroj: http://www.rockroad.cz/cykloservis-brno/

16 Současný stav 2.2.3 BARNEX SPORT Ski a cykloservis má pobočky po celé české republice. Brněnská prodejna sídlí na adrese Bratislavská 7. BARNEX SPORT se především specializuje na prodej lyţařské výbavy, ale provádí i základní servisní sluţby kol. Odkaz na opravnu kol se nachází v menu na pravé straně prezentace, které je aţ pod nabídkou virtuální prohlídky a vyhledávacím polem. Servis kol a kolečkových bruslí je v nabídce aţ předposlední, jak můţete vidět i na obrázku 4. Pro nezkušeného uţivatele tak můţe být problém danou poloţku nalézt. Ze začátku sezóny najdete upozornění na servisní sluţby i na úvodní straně. Obr. 4 Ukázka webových stránek BARNEX SPORT Zdroj: http://www.barnexsport.cz/servis-kol-a-koleckovych-brusli

Současný stav 17 2.3 Požadavky a potřeby cykloservisu Hlavním poţadavkem zadavatele bylo, aby se jeho stránky zobrazovaly na předních místech ve vyhledávačích, tedy kvalitní a fungující SEO optimalizace. Dále vyţaduje moderní webovou prezentaci se správou obsahu. K správě webu by měl mít přístup pouze majitel servisu, případně další mechanik, kteří jako koncoví uţivatelé vyţadují co nejjednodušší ovládání. Součástí administrace má být i tvorba nových článků, jejich editace a v případě potřeby moţnost celý článek smazat. Co se týče vzhledu, měla by být v prezentaci zastoupena typická ţlutá nadační barva Lance Armstronga. Ţádné další specifické poţadavky na grafický design stránek nebyly zadány. Současné stránky budou fungovat dál do konce roku 2013 kvůli propagaci cyklopenzionu, nové stránky budou proto hostovány na jiné doméně. Logotyp je poţadován černobílý, pro účely webové prezentace pak i v jiné jednobarevné variantě. Měl by obsahovat text Magda a libovolný grafický prvek.

18 Všeobecná problematika tvorby webových aplikací a logotypu 3 Všeobecná problematika tvorby webových aplikací a logotypu 3.1 Logotyp Pro správné pochopení významu slova logotyp je nutné vysvětlit několik pojmů. Obchodní značka je grafický portrét instituce v dobře zapamatovatelné podobě. Značka je součástí jednotného vizuálního stylu firmy a je zdokumentována v grafickém manuálu. Základ obchodní značky většinou tvoří firemní barvy, písmová a obrazová značka. Obrazová značka je tvořena pouze piktogramem nebo grafickým symbolem. Písmová značka je tvořena stylizovaným písmem. Typografickým logotypem můţe být iniciála, monogram či plný text a jako kombinovaný logotyp je chápán typografický logotyp doplněný o obrazovou značku. Kvalitní logotyp by měl mít několik důleţitých vlastností, některé spolu úzce souvisí a doplňují se. K celkovému hodnocení značky se pouţívají čtyři kritéria. 3.1.1 Identifikační kritéria Nejdůleţitější je, aby lidé značku poznali a pamatovali si ji. Identifikační kritéria se povaţují za primární a patří mezi ně následující vlastnosti: Nezaměnitelnost a originalita Originalita je dokonce podmínkou pro registraci značky na Úřadě průmyslového vlastnictví. Rozpoznatelnost Snáze rozpoznatelné jsou tvarově jednoduché značky, logo musí fungovat i v černobílé podobě a pro barevnou variantu je třeba zvolit vhodný počet barev. Zapamatovatelnost Nápaditost Nadčasovost Čitelnost Komplikací můţe být například nevhodně zvolený font, nebo příliš nahuštěné písmo. Logo musí být čitelné i po aplikaci na různé materiály. Kulturní přizpůsobitelnost Tato vlastnost platí pro nadnárodní značky, které musí být převoditelné do různých jazyků a respektovat kulturní odlišnosti. Rozšiřitelnost

Všeobecná problematika tvorby webových aplikací a logotypu 19 3.1.2 Sémantická kritéria Sémantická 2 kritéria se zabývají významem ztvárněným ve značce, lidé by v logu měli vţdy spatřovat to, co je zamýšleno. Název Vhodné pojmenování je základem pro ztvárnění značky, jméno musí být dobře vyslovitelné a ne příliš dlouhé. Název má vliv na rozpoznatelnost, originalitu i zapamatovatelnost značky. Srozumitelnost Značka by měla zaručovat správný výklad u spotřebitelů, ten by neměl dávat prostor pro dvojsmysly. Vztah k oboru Při tvorbě logotypu se bere v úvahu, jak oslovit zákazníka a tím zvýšit jeho zájem o produkty. Proto musí být i v logotypu obsaţená informace o tom, jaké sluţby subjekt nabízí. Emotivní hodnota Motivace zákazníka je velmi často iracionální, značka by proto měla vzbuzovat sympatie. Odolnost proti zneuţití a vandalismu 3.1.3 Estetická kritéria Častou chybou při výběru značek bývá fakt, ţe značka je posuzována pouze v základní emotivní rovině líbí/nelíbí. Nevýhodou je tedy subjektivita při posuzování těchto kritérií. Patří sem především následující vlastnosti: Kvalita výtvarné stylizace Barevné řešení Tvarové varianty Inverzní varianty Kvalita pouţitého písma Atraktivita 3.1.4 Technologická kritéria Minimální velikost Provedení detailů Pouţívané technologie 2 Sémantika je nauka o významu jednotlivých slov, jejich částí a jiných znaků, případně téţ jejich vztahu ke skutečnosti, kterou označují.

20 Všeobecná problematika tvorby webových aplikací a logotypu Materiály Světelné podmínky Barevné systémy Značka by měla splňovat všechna výše zmíněná kritéria, avšak v praxi se stává, ţe se některé z uvedených poţadavků záměrně ignorují, coţ značce dává větší šanci na originalitu (Tippman, 2012, [online]). 3.2 Tvorba webových stránek Proces tvorby webových aplikací zahrnuje několik kroků, včetně jiţ provedené vstupní analýzy. Úspěšné webové stránky by měly splňovat několik kritérií, v následující kapitole jsou stručně uvedeny nejdůleţitější z nich. Problematika tvorby webových stránek je velmi obsáhlá a sahá hlouběji, není však předmětem práce ji popisovat důkladněji. 3.2.1 Použitelnost Uţivateli by v kaţdém okamţiku mělo být jasné, o čem daná stránka je a jak ji má pouţít, aniţ by o tom musel nějak zvlášť přemýšlet. Uţivatel hledá informaci a chce ji získat co nejrychleji. Pokud se na stránce neorientuje, pravděpodobně zde ani nebude zkoušet hledat a půjde rovnou jinam (Krug, 2006). Pouţitelný web by měl být intuitivní, přehledný a na první pohled by mělo jít rozlišit důleţité informace od těch méně podstatných. Stránky bychom tedy měli navrhovat s ohledem na tato pravidla. Podle Kruga (2006, s. 18) existuje zásadní rozdíl v tom, jak si webmasteři myslí, ţe lidé pouţívají web, a jak jej pouţívají ve skutečnosti. Uţivatel stránky nečte, nýbrţ jen prohlíţí a většinou klikne na první odkaz, který jej zaujme. Při návrhu prezentace je potřeba dobře promyslet strukturu a účelnost webu. Web by měl být rozdělen do oblastí s jednotlivými prvky rozmístěnými podle zvyklostí. Uţivatel je například zvyklý hledat logo firmy v horním levém rohu stránky, pokud ho tedy umístíme na neobvyklé místo, je třeba prvek zvýraznit. Důleţitou částí je návrh navigace. Dobrá navigace nejen vzbuzuje důvěru, ale především informuje uţivatele o tom, co vše můţe na stránce nalézt a dokáţe jej navést k hledaným informacím. Měla by být přehledná a uţivateli musí být na první pohled jasné, na co se dá kliknout a kde se nachází. Ke zjištění, kde se uţivatel právě nachází, slouţí i nadpisy, titulky, u sloţitějších struktur drobečková navigace. Nadpis stránky je nejdůleţitější. Měl by být největším písmem v horní části textu a musí odpovídat odkazu, který chtěl uţivatel navštívit. 3.2.2 Přístupnost Přístupný web je bezbariérový, přístupný i pro všechny handicapované uţivatele internetu. Nejpočetnější skupinou handicapovaných uţivatelů internetu jsou

Všeobecná problematika tvorby webových aplikací a logotypu 21 zrakově postiţení (například barvoslepost, slabozrakost), ale patří sem i další skupiny (poruchy soustředění, pohybové postiţení). Prezentace by se proto měla tvořit s ohledem na jejich specifické potřeby a měla by být nezávislá na zobrazovacím zařízení (různé prohlíţeče, PDA, čtečky ). Existuje několik pravidel přístupného webu, asi nejdůleţitější českou metodikou jsou pravidla tvorby přístupného webu pro účely novely zákona č. 365/2000Sb., o informačních systémech veřejné správy. Stručné shrnutí některých zásad přístupnosti podle těchto pravidel uvádím v následujícím výčtu: (Špinar, 2007, [online]) Obsah webových stránek je dostupný a čitelný Informace sdělované barvou jsou dostupné i bez barevného rozlišení. Barvy popředí a pozadí jsou dostatečně kontrastní a na pozadí není vzorek, který sniţuje čitelnost. Kaţdý netextový prvek nesoucí významné sdělení má svou textovou variantu. Práci s webovou stránkou řídí uţivatel Obsah webových stránek se mění, pouze pokud uţivatel aktivuje nějaký prvek. Na stránce nejsou ţádné prvky blikající rychleji neţ jednou za sekundu. Informace jsou srozumitelné a přehledné Ovládání webu je jasné a pochopitelné Odkazy jsou zřetelné a návodné Kód je technicky způsobilý a strukturovaný 3.2.3 Viditelnost (SEO optimalizace) Zkratka SEO pochází z anglického Search Engine Optimization, tedy optimalizace pro vyhledávače. Obecně je to řada úkonů a operací, jejichţ cílem je především zlepšení pozic ve fulltextových vyhledávačích. (Webdoména s.r.o., 2012, [online]). Metod SEO je mnoho, ale v zásadě existují dvě kategorie, metody etické a neetické. Neetickými metodami je souhrn metod, které mají za úkol přesvědčit vyhledávací roboty o kvalitě webových stránek tím, ţe zahltí titulky i text klíčovými slovy bez informační hodnoty pro zákazníka, nebo roboty oklamou jinými způsoby. Těmito metodami se nebudeme vůbec zabývat. Etické metody SEO v principu zkvalitňují webové stránky pro zákazníky. Jsou dvě kritéria, na základě kterých vyhledávač zjišťuje, do jaké míry se web věnuje zadanému tématu. Co se nachází na optimalizovaných stránkách a o čem web píše, jsou On-page faktory. Co se nachází mimo stránky (zpětné odkazy) řeší Off-page optimalizace. Ještě před samotnou optimalizací je potřeba provést analýzu klíčových slov. Klíčová slova jsou nejziskovější slova a fráze. V ideálním případě jde o do vyhledávačů často zadávaná relevantní slova, která vystihují obsah webové stránky. Co a jak často zákazníci hledají, se dá zjistit například prostřednictvím

22 Všeobecná problematika tvorby webových aplikací a logotypu našeptávačů v různých vyhledávačích nebo pomocí nástrojů pro návrh klíčových slov, například bezplatná aplikace Google AdWords dostupná na adrese https://adwords.google.com/select/keywordtoolexternal. Umístění klíčových slov v kódu, jejich hustota a prominence (pozice na stránce) patří do On-page faktorů. Klíčová slova by se měla objevit v následujících částech stránky: Název souboru Ve značce <title> Doporučená délka titulku je 10-60 písmen, ţádné speciální znaky (Kouba, 2012, [online]). V meta značce keywords V meta značce description Poskytuje informace o obsahu stránky. Meta tag description můţe obsahovat několik vět a měl by být unikátní pro kaţdou stránku. V nadpisech h1, h2, h3 Od h1 aţ po h6 se důleţitost sniţuje V odkazech Je vhodné nepouţívat odkazy typu klikněte zde. Odkazy na našem webu by měly vést na vhodné stránky. Zvýrazněný text Stěţejní klíčové slovo by měla obsahovat i URL adresa. Podoba URL adresy je důleţitá hlavně pro lidi, proto by URL adresy měly splňovat několik vlastností. Měly by být krátké, výstiţné, zapamatovatelné, jedinečné, trvalé a technologicky neutrální (Mikula, 2010, [online]). Vhodnému tvaru adresy se říká cool URL a k jeho dosaţení se pouţívá například modul mod_rewrite, který se běţně zapisuje do souboru.htaccess umístěném v kořenovém adresáři webu. V cool URL se například nepěkný query string /index.php?page=servis nahradí za /servis. Častou chybou v souvislosti s URL je situace, kdy se na různých URL objevuje totoţný obsah. Takové stránky jsou označeny jako duplicitní a vyhledávač si obvykle vybere pouze jednu URL, ostatní ignoruje a můţe ignorovat i zpětné odkazy (Adaptic, 2008, [online]). Duplicita stránek (např. URL verze obsahující www a URL bez www) se opět ošetřuje v souboru.htaccess. Další moţností SEO optimalizace je vytvoření souboru robots.txt. Zde se můţe nastavit, co mohou roboti indexovat, jaké adresáře mohou prohledávat a jaké ne. Měřítkem kvality webových stránek je také validita (syntaktická správnost) kódu. Posledním On-page prvkem je hodnotný a originální obsah webu, pokud moţno pravidelně aktualizovaný. Mezi Off-page faktory se řadí především zpětné odkazy (backlinks). Počet a kvalita zpětných odkazů je jedním z nejsilnějších parametrů pro řazení výsled-

Všeobecná problematika tvorby webových aplikací a logotypu 23 ků ve vyhledávači. S počtem odkazů z dobře hodnocených stránek se zvyšuje i hodnota (rank) naší stránky. Se zpětnými odkazy souvisí hodnocení vyhledávače, u Googlu jde o tzv. PageRank. Ideální je přirozené získávání odkazů, kdy se na danou stránku začnou různé weby odkazovat z vlastní vůle. Ze začátku je vhodná registrace do známých katalogů (Seznam, Centrum). Další moţností je výměna či nákup zpětných odkazů. Získávání zpětných odkazů se označuje pojmem linkbuilding. 3.2.4 Vzhled a rozložení Před vlastním grafickým návrhem je třeba mít rozmyšlenou informační architekturu, která znázorňuje strukturu informací webu. Zásadní úlohu nejen v informační architektuře, ale i ve funkčnosti prezentace, hraje navigace. Navigace musí být konzistentní a měla by se chovat na všech stránkách stejně. Pro návrh budoucího rozloţení webu, ze kterého se bude vycházet, slouţí tzv. wireframe. Pojem wireframe (téţ drátěný model ) se v oblasti vývoje webových prezentací či aplikací pouţívá pro zjednodušený model či architektonický návrh definující funkci a obsah stránek webu (Symbio Digital, [online]). Drátěný model je tvořen pouze pomocí jednoduchých čar, textu a neobsahuje ţádné obrázky. Nepouţívají se ani barvy s výjimkou hypertextových odkazů. Wireframe nám pomáhá odstranit problémy při tvorbě webu. Odhalí případné problémy (špatné navrţení, nelogické rozmístění obsahu) a tím ve výsledku ušetří práci. Případné změny je totiţ mnohem jednodušší zapracovat do wireframu neţ do hotových grafických návrhů či webu. 3.2.5 Copywriting Stránky musí nést atraktivní a pro uţivatele přínosný obsah. O kvalitní a obchodně úspěšné texty se postará právě copywriting. Jde o poměrně specifickou záleţitost, a proto se většinou vyplatí svěřit tvorbu textů odborníkovi. Výsledný text by měl obsahovat ideální mnoţství vhodně umístěných klíčových slov, na které je stránka optimalizována pro vyhledávače (Dobiáš, [online]).

24 Prostředky pro realizaci 4 Prostředky pro realizaci 4.1 Technické prostředky pro návrh webu 4.1.1 HTML Jazyk HTML (HyperText Markup Language) je základním jazykem pro tvorbu webových stránek. Zdrojový kód se vytváří z HTML značek (neboli tagů) a jejich atributů. Tagy mohou být párové nebo nepárové, ale vţdy se zapisují do špičatých závorek. Součástí HTML dokumentu je hlavička, která obsahuje informace o stránce. Samotný obsah stránky je pak uvnitř tagu body. Pro pokročilejší grafickou úpravu stránky se vyuţívá tzv. kaskádových stylů. Uţ bylo zmíněno, ţe validita je základním krokem k dobré funkčnosti webu. Validní HTML kód se také snáze edituje a je přehlednější. K validaci HTML kódu pouţijeme W3C validátor dostupný na http://validator.w3.org/. 4.1.2 CSS CSS (Cascading style sheets) vznikly někdy v roce 2006 jako reakce na chaoticky se vyvíjející jazyk HTML. Snahou bylo oddělit vzhled stránek od jejich obsahu. Styl se můţe deklarovat více způsoby, v praxi je nejběţnější pouţití externího stylopisu v CSS souboru, na který se stránka odkazuje tagem <link>. V současné době je k dispozici specifikace CSS3, ale některé starší prohlíţeče bohuţel nové vlastnosti nepodporují. CSS mají, stejně jako HTML, svůj validátor k ověření syntaktické správnosti souboru. Oficiální CSS validátor najdete na adrese http://jigsaw.w3.org/css-validator/. 4.1.3 PHP PHP (Hypertext Preprocessor) je programovací jazyk, který pracuje na straně serveru. PHP na serveru interpretuje stránky HTML s vlastními příkazy před jejich odesláním ke klientovi (obvykle je jím webový prohlíţeč). To znamená, ţe PHP umoţňuje vkládat vlastní skripty (krátké úseky kódu, ale i celé programy) přímo do hypertextových stránek (Brázda, 2005). PHP je relativně jednoduché na pochopení, je multiplatformní a podporuje řadu souvisejících technologií. Díky tomu a bohaté zásobě funkcí se stal PHP nejrozšířenějším skriptovacím jazykem pro web. V kombinaci s databázovým systémem (obvykle MySQL nebo PostgreSQL) a webovým serverem Apache je mocným nástrojem při tvorbě webových aplikací.

Prostředky pro realizaci 25 4.1.4 MySQL MySQL je relační databázový systém vlastněný společností Oracle. MySQL je bezplatně dostupná v rámci licence GPL 3, lze samozřejmě zakoupit i licenci placenou. Kaţdá databáze je tvořena z tabulek, které mají řádky a sloupce. Sloupce nesou jméno a určují datový typ, v řádcích rozeznáváme jednotlivé záznamy. Práce s daty v tabulce se provádí pomocí dotazů SQL (Structured Query Language). 4.1.5 JavaScript JavaScript je klientský skript, to znamená, ţe se program odesílá na stránku klienta a teprve tam je vykonán. Z toho vyplívá, ţe je závislý na prohlíţeči a uţivatel si jej můţe vypnout. Vše vytvořené v JavaScriptu se nazývá skript. Skript se můţe volně umístit do stránky nebo se vytvoří odkaz na samostatný soubor s příponou js. Javascriptem jsou ovládány různé animace, okna a jiné oţivující prvky pro interaktivní dynamický web. 4.2 Programy pro návrh logotypu a grafických prvků webu Existuje mnoho vývojových prostředí pouţitelných ke konstrukci logotypu. Pro úpravu a tvorbu vektorové grafiky se pravděpodobně nejvíce vyuţívá program Adobe Ilustrator, dále se v hojné míře pouţívá Corel Draw, AutoCAD a řada dalších. K navrţení značky byl pouţit grafický editor Corel Draw X5 od firmy Corel Corporation. Program nabízí moţnosti pro tvorbu, změny i úpravy obrazů a umoţňuje jejich následnou konverzi do různých grafických formátů. Lze v něm efektně zkombinovat grafiku a text. Corel Draw bude pouţit i pro vytvoření blokového wireframe. K tvorbě pozadí stránek a úpravě obrázků pouţitých v prezentaci bude pouţit program Adobe Photoshop. Adobe Photoshop je profesionální nástroj pro editaci bitmapových obrázků v nejvyšší kvalitě. Umoţňuje úpravy fotografií i tvorbu zcela nových obrázků. Je vhodný pro tvorbu webové grafiky, dokáţe rozřezat obrázek a exportovat do HTML. 4.3 Dostupné redakční systémy Na internetu je k dostání řada redakčních systémů dostupných jako svobodný software i komerční řešení. Všeobecně známými se staly systémy pro správu obsahu WordPress, Joomla! A Drupal. Uvedené tři systémy jsou flexibilní, vý- 3 Software šířený pod licencí GPL (General Public Licence) je moţno volně pouţívat, modifikovat i šířit, ale za předpokladu, ţe tento software bude šířen bezplatně s moţností získat bezplatně zdrojové kódy (Internet Info, [online]).

26 Prostředky pro realizaci konné a dají se pouţít pro různé weby. Méně známé, avšak také velmi kvalitní jsou například bezplatně dostupné TextPattern, Contao, SilverStripe, Umbraco a Concrete. Všechny nabízí dobrou podporu, mnoţství funkcí a snadné pouţití. 4.3.1 WordPress WordPress je velmi oblíbený bezplatný redakční systém. Je napsaný v jazyku PHP a vyuţívá databázi MySQL. Jedná se o opensource projekt, coţ umoţňuje zapojení velkého mnoţství programátorů do jeho vývoje. Díky široké komunitě vývojářů je k dispozici rozsáhlá dokumentace a mnoţství návodů. Oficiální webová stránka nabízí i moţnost vyzkoušení live demo verze systému. Ovládání je intuitivní a přívětivé. Existují různé pluginy, vlastní témata a integrované funkce, pomocí Wordpressu lze proto vytvořit prakticky jakýkoliv typ webu. 4.3.2 Joomla! Joomla! Je taktéţ bezplatný systém, zaloţený na PHP a MySQL databázi. Stejně jako Wordpress nabízí mnoho funkcí a doplňků. Je vhodný i na větší projekty a pouţívají jej i velké organizace po celém světě. Uţivatelské rozhraní uţ není tak uţivatelsky přívětivé jako u Wordpressu, ale není těţké se zorientovat. Joomla! nabízí oficiální podporu a k dispozici je velké mnoţství dokumentace. 4.3.3 Drupal Další populární systém pro správu obsahu naprogramovaný v jazyku PHP. Oficiálně podporuje databáze MySQL i PostgreSQL. Je vhodný pro náročnější a informačně rozsáhlé projekty. Velké mnoţství společností nabízí sytému Drupal komerční podporu. Systém správy je poměrně sloţitý a vyţaduje aspoň základní znalost vývoje webu a programování. 4.3.4 Závěrečné zhodnocení Všechny výše probrané redakční systémy (i další prostudované dostupné systémy) jsou pokročilými nástroji pro tvorbu rozsáhlých webových prezentací. Obsahují velké mnoţství funkcí a doplňků, včetně řízení přístupu k souborům, statistikám a diskuzím, které jsou pro základní webovou prezentaci zbytečné. Další nevýhodou je fakt, ţe se jedná o Open source. Díky tomu je otevřený kód dostupný i potenciálním útočníkům, coţ sniţuje bezpečnost systému. Poţadavky daného subjektu zahrnují pouze administraci tří předem daných sekcí, tvorbu, editaci a případné mazání článků. Koncový uţivatel by neměl mít moţnost tvořit nové podstrky či některou stávající smazat. Ačkoliv je moţné existující systémy upravit, bude ve výsledku vhodnější vytvořit vlastní řešení na míru cykloservisu. Kaţdý programátor má jiný styl a formátování kódu, proto je pouţívání cizích kódů nepřehledné. Navíc je náročně se zorientovat a pochopit, jak některé věci fungují. Pro výše zmíněné potřeby zadavatele postačí WYSIWYG editor a tlačítko pro uloţení změn. U článků

Prostředky pro realizaci 27 by měl být navíc formulář pro vloţení náhledového obrázku, názvu a klíčových slov pro lepší SEO optimalizaci. Mezi aktuálně nejpouţívanější WYSIWYG editory patří TinyMCE a CKEditor. Práce s oběma editory je prakticky shodná, CKEditor umoţňuje navíc v základní verzi upload obrázků na server, ale produkuje velmi sloţitý a nepřehledný kód. TinyMCE kód čistí od zbytečných tagů. Zadavatel je zvyklý pracovat v MS Word a dá se předpokládat, ţe bude ve velké míře texty do editoru pouze vkládat. Pro práci byl proto zvolen editor TinyMCE. 4.4 Databáze Neţ se dostaneme k samotnému návrhu databáze, je potřeba definovat několik pojmů. Databáze je strukturovaná mnoţina homogenních souborů Systém řízení báze dat je integrovaný softwarový prostředek řídící bázi dat Databázový systém je spojení databáze a systému řízení báze dat (SŘBD) Existuje několik databázových modelů (síťový, hierarchický, relační), avšak v současné době se nejčastěji pouţívají relační databáze (Pokorný, 2004). Je to především proto, ţe se snadno ovládají a dobře reprezentují běţné datové struktury. Relační databázový systém umoţňuje vytvářet jednotlivé databáze, přičemţ kaţdá databáze můţe obsahovat jednu či více tabulek. Tabulka se skládá ze sloupců a řádků. Kaţdý sloupec musí mít jedinečný název a určitý datový typ. Řádky reprezentují jednotlivé záznamy v databázi. Řádek by měl mít jedinečný identifikátor, který jednoznačně určí příslušný záznam. Z tohoto důvodu existují primární klíče. Nejčastěji se jedná o sloupec s názvem ID, který uloţí pro kaţdý řádek číslo o jedna větší neţ u předchozího záznamu. Pro práci s relační databází se pouţívá jazyk SQL. Princip je logicky zaloţen na relační algebře a relaci mnoţin. Příkazy se dají podle svého účelu rozdělit do několika skupin. Příkazy pro definici dat, pro řízení dat, pro správu databáze a nakonec nejpouţívanější příkazy pro běţnou manipulaci s daty. Do této skupiny patří především příkazy SELECT pro výběr dat z databáze, INSERT pro vkládání, UPDATE k aktualizaci a DELETE, který záznamy z databáze odstraňuje (602SQL, [online]).

28 Realizace práce 5 Realizace práce Vlastní práce obnáší několik dílčích úkolů. Prvním bude návrh a konstrukce logotypu, který bude podnik reprezentovat v budoucích letech. Dalším je zhotovení zcela nových webových stránek s kvalitní SEO optimalizací a nakonec vytvoření administrace. 5.1 Návrh logotypu Před samotným návrhem je důleţité uvědomit si, pro jakou firmu se bude značka navrhovat. Analýza podniku byla provedena v podkapitole 2.1 a od té se bude značka odvíjet a navrhne se tak, aby splňovala kritéria zmíněná v předchozí kapitole. Cílovou skupinou, kterou má značka oslovovat, jsou rekreační i výkonnostní cyklisté bez rozdílu věku. Valná většina cykloservisů pouţívá ve svém logotypu piktogramy kol, cyklosoučástek, popřípadě nářadí. Je důleţité se od konkurence odlišit, nebýt podobný tvarem ani názvem, aby nemohlo dojít k záměně, ale zároveň by mělo být patrné, jaké sluţby subjekt nabízí. Jediným poţadavkem firmy bylo, aby logo obsahovalo název servisu. Po domluvě se zadavatelem bylo rozhodnuto, ţe bude obsahovat kromě textu Magda ještě jednoduchý piktogram. Piktogram je stylizovaný obrázek, který na první pohled něco sděluje. Proto by měl být co nejjednodušší. Vzhledem k faktu, ţe piktogram poslouţí pro účely vizualizace servisu jízdních kol, byly jako předlohy pro tvorbu piktogramu vybrány obrázky související s cyklistikou. Návrhů značky bylo mnoho, všechny byly skicovány na papír, v černobílém provedení. Povedenější skicy byly následně upraveny v programu Corel Draw viz následující ukázka. Obr. 5 Skicy upravené v programu Corel Draw Vítězem se stal poslední z návrhů na obrázku 5. Písmeno M je znázorněno jako kopec, který právě zdolává cyklista. Logotyp vybraný pro uplatnění v praxi musí být jednoduchý, jednak kvůli zapamatovatelnosti, ale také aby se snadno konstruoval a dobře se s ním pracovalo. Z tohoto důvodu byla značka ještě upravena do následující podoby.

Realizace práce 29 Obr. 6 Finální podoba logotypu, černobílá varianta Písmo v logu bylo pečlivě vybráno, aby se k subjektu hodilo, jedná se o font Sagoe Print. Logo je dostatečně čitelné a kontrastní, na tmavé pozadí byla vytvořena jednobarevná varianta značky (obrázek 7). Jako základní barva barevného logotypu byla zvolená tmavě ţlutá, RGB hodnoty (255, 204, 0). Tmavý odstín ţluté barvy je spojován s vedoucími jezdci v cyklistických závodech, je dostatečně kontrastní a viditelná, proto je celkově oblíbenou barvou cyklistů. Ţlutou barvu pouţívá i cyklistické a turistické značení. V kombinaci s černou jde o typickou nadační barvu Lance Armstronga, coţ je zároveň preferovaný odstín majitele cykloservisu. Obr. 7 Barevná varianta logotypu Obě varianty loga jsou vytvořené ve vektorovém editoru Corel Draw, proto nedojde ani při změně velikosti ke zhoršení kvality. Značka je dostatečně kontrastní a čitelná, tím dodrţuje technologická kritéria. Z hlediska identifikačních kritérií logo splňuje základní poţadavky. Je snadno rozpoznatelné, jednoduché, zapamatovatelné a originální. Podnik se nebude rozšiřovat, nemá v plánu ani expandovat do jiného města, natoţ do zahraničí. Rozšiřitelnost a kulturní přizpůsobitelnost tedy nemusíme řešit. Pokud jde o sémantická kritéria, název a jeho srozumitelnost je daná. Jméno Magda je snadno vyslovitelné a krátké. Obor podnikání je zřejmý, logo obsahuje piktogram cyklisty. Do estetických kritérií se řadí mimo jiné barva a font, které uţ byly rozebrány výše.

30 Realizace práce 5.2 Návrh webové prezentace Co se týče hostingu, po domluvě s majitelem byl vybrán základní nejlevnější tarif u firmy Station webhosting, určený pro nenáročné weby, kterým stačí jedna databáze a omezený počet ftp účtů. Z hlediska SEO je dobré mít v doméně obsaţena klíčová slova. U víceslovného názvu odděleného pomlčkami hrozí, ţe jej lidé budou psát například s tečkou, proto byla vybrána víceslovná varianta domény magdacykloservis psáno dohromady. Vyhledávače uţ v dnešní době naštěstí umí slova rozdělit samy, takţe je varianta bez pomlček vhodná. Výsledná URL adresa stránek tedy bude ve formátu http://www.magdacykloservis.cz/. 5.2.1 Informační architektura Subjekt se věnuje pouze servisu a opravám kol, proto bude web obsahovat méně informací neţ některé konkurenční stránky zabývající se navíc prodejem. Stránka bude mít z tohoto důvodu pouze vertikální menu s čtyřmi poloţkami. Úvod Hlavní stránka obsahuje nejdůleţitější informace (pro koho je web určen, otevírací doba, kontakt a mapa) Servis Zde bude seznam nabízených sluţeb, v budoucnu po rekonstrukci i fotografie dílny. Články Sekce poskytuje tipy a rady z oblasti cyklistiky. S mnoţstvím přibývajících článků se tato podstránka můţe v budoucnu dále dělit. Odkazy Odkazy na zajímavé stránky s cyklistickou tematikou a spřízněné weby. Obr. 8 Schematické znázornění struktury informací V administraci bude informační architektura totoţná, pouze přibude odkaz nový článek a poloţka pro návrat na úvodní stranu webu.

Realizace práce 31 5.2.2 Drátěný model Základní prvky, které musí kaţdá stránka obsahovat, a jejich rozmístění definujeme v drátěném modelu. Rozloţení prvků na stránce si můţete prohlédnout na obrázku 9. Obr. 9 Wireframe pro cykloservis Magda Stránka má fixní šířku 895 pixelů a bude zarovnána na střed prohlíţeče. Základ tvoří čtyři bloky. Hlavička, menu, prostor pro obsah stránky a patička, kde je pouze datum poslední aktualizace, jméno autora a odkaz na vstup do administrace. V případě hlubšího zanoření do struktury, například při čtení článku, se nad samotným obsahem stránky zobrazí ještě drobečková navigace. V hlavičce je napravo zarovnaný klikací logotyp a vlevo blok pro rychlý kontakt obsahující název firmy a telefonní číslo. Důleţitá informace je tak návštěvníkovi dostupná z jakékoliv podstránky. Menu je umístěno na levou stranu, většina lidí je na takové rozmístění zvyklá a vzhledem k rozsahu stránky by bylo rozdělení na hlavní a vedlejší navigaci zbytečné.

32 Realizace práce Podle objemu vloţeného obsahu se určuje výška textového bloku a jeho výšce se přizpůsobuje i velikost celé stránky. Právě obsah této části bude moţné libovolně měnit v administraci. 5.2.3 Grafický návrh Jedním z poţadavků zadavatele bylo, aby byla v prezentaci obsaţená tmavě ţlutá barva. Poloţky menu budou tedy vyvedeny v tmavém odstínu ţluté barvy RGB (255, 204, 0) stejně jako logotyp. Ţlutá barva je velice výrazná, signální a pouţívá se pro upoutání pozornosti. Jako doplněk k ţluté byla vybrána barva modrá a modrošedá. Na nadpisy bude pouţita světle ţlutá a samotný text zůstane černý. Na pozadí celé stránky byl zvolen barevný přechod z tmavě modré na ţlutou s abstraktní kresbou. Tapeta byla navrţena v programu Adobe Photoshop. Samotná prezentace má modré poloprůhledné pozadí a pozadí textu je modrošedé RGB (31, 90, 87). Výsledný design prezentace si můţete prohlédnout na následujícím obrázku, ukázky dalších stránek pak najdete v příloze A. Obr. 10 Výsledný návrh webové prezentace cykloservisu Magda

Realizace práce 33 5.2.4 Struktura adresářů Pro lepší přehlednost a pořádek je dobré mít v souborech na webu pořádek. V kořenovém adresáři bylo vytvořeno několik souborů. Ve sloţce css jsou umístěny externí styly CSS, zvláštní styl byl vytvořen speciálně pro starší verze Internet Exploreru, kde se některé vlastnosti zobrazují jinak neţ v ostatních prohlíţečích. V adresáři je také sloţka img obsahující veškeré obrázky. Ve sloţce rsrc jsou zdroje pro webovou stránku. Jedná se o soubory, které jsou vkládány do kaţdé stránky a v případě potřeby stačí změnit pouze jediný soubor, aby se výsledek promítnul v celém systému. Jmenovitě se jedná o hlavičku stránky, patičku, menu, skript pro připojení k databázi a skript s funkcemi. Sloţka js obsahuje javascriptové soubory, konkrétně adresář WYSIWYG editoru TinyMCE. V adresáři pages nalezneme veškeré podstránky webové prezentace (úvod, servis, články, odkazy a skript informující o nenalezení poţadované stránky) a také další sloţku s názvem články, která slouţí k ukládání nově vytvořených článků a náhledových obrázku do nové sloţky thumbs. Poslední adresář admin obsahuje samotnou webovou stránku pro administraci. Přímo v kořenovém adresáři se nachází ještě další soubory napomáhající dobré funkčnosti stránky. Jedná se o index.php, robots.txt, sitemap.xml a speciální soubor.htacces. 5.2.5 Návrh databáze Ke splnění všech poţadavků stačí relativně jednoduchá struktura. Pro data byly vytvořeny celkem tři tabulky. Tabulka stranky slouţí k uchování dat statických stránek úvod, servis a odkazy. Tabulka obsahuje tři sloupce. Sloupec id typu integer má nastavenou hodnotu auto_increment, coţ zaručuje automatické navyšování id nově vloţené stránky. Zároveň se jedná o primární klíč. Sloupec název typu varchar o délce 30 znaků nese vlastnost unique a nesmí se tedy opakovat. Pomocí názvu lze identifikovat jednotlivé stránky. V posledním sloupci text typu text je uloţen samotný obsah konkrétní stránky a právě data tohoto sloupce bude moţné v administraci modifikovat. Porovnání u textu i názvu je nastaveno na utf8_czech_ci 4 pro správné zobrazení všech českých znaků. Druhá tabulka clanky slouţí k ukládání nových článků, které je samozřejmě moţné později upravovat a měnit. Články mají 4 sloupce, první tři slupce id, název a text plní stejnou funkci jako v předchozí tabulce. Přibyl sloupec thumb. Sloupec thumb je typu tinyint a pouze informuje o tom, jestli je u vloţeného článku přítomen náhledový obrázek či nikoliv. Sloupec má nastavenou výchozí 4 utf8_czech_ci znamená nastavení znakové sady na UTF8 v češtině a nezáleţí na velikosti písmen (case insensitive).

34 Realizace práce hodnotu 0, tedy obrázek nepřítomen. Kódování je opět nastavené na utf8_czech_ci. Poslední tabulka uzivatele uchovává přihlašovací údaje pro vstup do administrace. Sloupce id a jméno jednoznačně identifikují uţivatele. Hodnoty posledního sloupce heslo se zaznamenávají v šifrované podobě. Pro bezpečné uloţení hesla byla pouţita hashovací 5 funkce SHA1. SHA1 vytváří otisk dlouhý 160 bitů, tzn. 40 znaků. Sloupec je tedy typu varchar o délce 40 znaků. Obr. 11 Přehled tabulek v databázi K vizuálnímu návrhu databáze byl pouţit program MySQL Workbench, samotnou databázi lze spravovat například pomocí rozhraní PhpMyAdmin dostupného přímo ze stránek webhostingu. 5.2.6 Realizace stránek Nejdříve byl vytvořen CSS stylopis a HTML šablona stránky. Následně byl kód rozdělen na několik částí, které se neustále opakují (hlavička, menu, patička). Tyto části jsou vyříznuty a uloţeny jako PHP soubor, který je pak vkládán do kaţdé stránky pomocí příkazu require. Mimo výše zmíněných opakujících se částí kaţdé stránky je pomocí příkazu require vkládán i skript pro připojení k databázi (connect.php). Na začátku kódu jsou do proměnných uloţeny klíčová slova a titulek stránky. Proměnná $class informuje o tom, na jaké stránce se uţivatel momentálně nachází a daná poloţka menu bude patřičně zvýrazněna. Základní strukturu stránky postihuje obrázek 12. 5 Hashovací funkce je funkce, která určitým sloţitým matematickým postupem převede vstupní data (v našem případě heslo) do speciálního čísla. Toto číslo se nazývá hash nebo otisk.

Realizace práce 35 Obr. 12 Ukázka zdrojového kódu úvodní stránky Php kód na řádcích 11-14 zajišťuje načtení dat poţadované stránky z databáze. Funkce mysql_query() provede dotaz na aktuální spojení v aktivní databázi, a pokud se nepodařilo, tak vrátí chybovou zprávu. Podstránka články se skládá z jednotlivých náhledů oddělených horizontální čárou, proto má trochu jinou strukturu neţ ostatní stránky. Načítání náhledů postihuje následující kus kódu. Obr. 13 Ukázka kódu pro zobrazení náhledů jednotlivých článků Pro kaţdý řádek v tabulce clanky je vypsán název, náhledový obrázek, pokud nějaký existuje a prvních třicet slov textu. Na konci ukázky nechybí odkaz

36 Realizace práce k přečtení celého článku. Na náhled samotné stránky i ukázkového článku se můţete podívat v příloze A. Výchozí soubor index.php obsahuje skript, který načte poţadovanou stránku podle parametru page v URL adrese. 5.2.7 SEO optimalizace Co vše je potřeba udělat pro snadno dostupný web uţ bylo podrobně rozebráno v kapitole Viditelnost (SEO optimalizace). Titulek kaţdé stránky je uloţen v proměnné $title na začátku kaţdého skriptu. V hlavičce je potom vypisován ve formě titulek stránky cykloservis Magda, a to splňuje podmínku unikátního titulku pro jakoukoliv stránku. Kaţdá stránka obsahuje krátký popis a klíčová slova, která jsou předávána pomocí proměnné obdobně jako titulek stránky. Klíčová slova se vyskytují i v nadpisech a textu. Všechny stránky obsahují právě jeden nadpis H1, ostatní nadpisy jsou ve správném pořadí a jsou tak vhodně strukturované. Pro vyhledávače byl vytvořen soubor Sitemap ve formátu XML. Tento soubor poskytuje vyhledávačům seznam dostupných stránek webu a pomůţe tak zajistit, ţe se vyhledávač dozví o všech adresách URL (i o těch, které během obvyklého procesu procházení neodhalí). Soubor Sitemap.xml byl vytvořen automaticky pomocí XML Sitemap generátoru dostupném na http://www.xmlsitemaps.com/. Lepší indexace byla podpořena také umístěním metatagu <meta name = robots content = index, follow > v hlavičce kaţdé stránky. Aby vyhledávací roboti neindexovali ţádná data uvnitř sloţky admin, byl jim zablokován přístup do sloţky pomocí souboru robots.txt. Dalším důleţitým krokem bylo nahradit query stringy za pěkné URL adresy. Toho bylo dosaţeno úpravou souboru.htaccess. Na prvním řádku zapneme mod_rewrite pomocí příkazu RewriteEngine on. Konkrétně přepisování na pěkné adresy bylo docíleno zápisem pravidla RewriteRule ^([a-za-z0-9- ]+)$ /index.php?page=$1 [L,QSA]. Regulární výraz říká, ţe parametr můţe obsahovat pouze písmena anglické abecedy, číslice a pomlčky. Příznak QSA zajišťuje, ţe se do cílové adresy vloţí i případné předávané proměnné (vše co je za otazníkem). L znamená, ţe jde o poslední pravidlo a další se jiţ nebudou aplikovat. K zamezení duplicity stránek byl taktéţ pouţit soubor.htaccess. Byla vybrán formát URL adresy s www na začátku. K přesměrování adresy zadané bez www na adresu s www se pouţilo pravidlo RewriteRule (.*) http://www.magdacykloservis.cz/$1 [R=301,L]. Nakazuje, aby se všechny zadané adresy splňující podmínku RewriteCond 6 přesměrovaly na formát ve tvaru 6 RewriteCond je porovnávací příkaz, který vyhodnotí název proměnné a váţe se vţdy na jedno následující pravidlo RewriteRule (Schlezinger, 2005, [online]). V tomto případě (RewriteCond %{HTTP_HOST} ^magdacykloservis.cz [NC]) je proměnnou serverová HTTP_HOST, tedy jméno celé domény.

Realizace práce 37 www.magdacykloservis.cz/pozadovana-stranka. Trvalé přesměrování zajišťuje příznak R=301 v hranatých závorkách. Poslední věc, kterou v souboru.htacces provedeme, je podstrčení své vlastní chybové stránky namísto výchozí chybové stránky 404 webhostingu, pro případ, ţe uţivatel poţádá o neexistující stránku. Ke kontrole SEO byl vyuţit nástroj Síla webu SEO-Servisu (http://seo-servis.cz/source-zdrojovy-kod/), který nabízí širokou škálu hodnocených parametrů. K otestování jsem pouţila především analýzu zdrojového kódu, kde jsou hodnoceny základní SEO techniky. Průměrné hodnocení jednotlivých stránek bylo pěkných 88%. Ostatní parametry (ranky, zpětné odkazy, stáří domény ) měly o něco horší výsledky, ale jedná se o faktory, které budou mít lepší výsledky aţ časem. Dalším pouţitým SEO nástrojem byl SEO analyzátor na http://www.seo-analyzator.cz. Zde se web hodnotí opět z několika hledisek. Co se týče kvality kódu a čitelnosti roboty, dostal cykloservis známku A. Niţší známky bohuţel získal opět v kategorii zpětné odkazy. Vzhledem k stáří webu se však není čemu divit, stránky byly prozatím registrovány do katalogu firmy.cz a výměnu odkazů s jinými weby si majitel nepřál. Do SEO patří i validita. Vše bylo ověřeno pomocí příslušných validátorů a HTML kód, CSS, soubor robots.txt i sitemapa jsou syntakticky správné. Výsledek SEO testu a testu validace naleznete v příloze B. 5.3 Administrace stránek Vzhledově se administrační stránky od celého webu příliš neliší. Je pro ně pouţit stejný stylopis a změna nastává pouze v poloţkách menu. Náhledy administračních stránek si můţete prohlédnout v příloze A. 5.3.1 Přístup do administrace Přístup na administrátorské stránky je moţný z odkazu v patičce stránky. Po kliknutí na odkaz se uţivateli zobrazí stránka pro přihlášení do administrace. K zjištění, jestli je uţivatel přihlášen, byla pouţita session 7 proměnná user_is_logged. Pokud byl odeslán přihlašovací formulář a přihlašovací údaje odpovídají, je proměnná user_is_logged nastavena na hodnotu 1. Do všech administrátorských stránek je vloţen skript kontrolující hodnotu této proměnné a v případě, ţe se nerovná jedné, pošle hlavičku stránky pro opětovné přihlášení. Shoda hesel se po odeslání přihlašovacích údajů vyhodnocuje podmínkou if ($res && mysql_num_rows($res) && sha1($_post['passwd']) == $radek['heslo']). Ta nejdříve testuje, zda se podařilo provést sql dotaz. Pokud ano, testujeme počet vrácených řádků (uţivatelské jméno je unikátní, proto dotaz vrátí právě 1 řádek, pokud uţivatel existuje) a teprve poté z výsledku vezmeme 7 Session umoţňuje uloţit určité informace na serveru a uchovat je, dokud nedojde k jejich vymazání, nebo nebude zavřen prohlíţeč.

38 Realizace práce vrácené heslo v šifrované podobě a porovnáme jej se zašifrovaným heslem předaným z formuláře. Při odhlášení (opět v patičce stránky) dojde ke zrušení relace příkazem session_destroy(). Ke zrušení session dojde i automaticky po zavření okna prohlíţeče nebo po 3o minutách nečinnosti. 5.3.2 Implementace systému pro správu stránek Pro správu stránek nebude pouţit ţádný volně dostupný redakční systém, ale pouze WYSIWYG editor TinyMCE, jak uţ bylo zmíněno v kapitole 4.3. Editor Tiny MCE je zdarma dostupný na svých domovských stránkách http://www.tinymce.com/. Editor poskytuje uţivateli prakticky veškeré moţné formátování textu, výběr barev, písma, pro pokročilejší uţivatele je moţné zobrazit generovaný HTML kód. Cestu k editoru (nachází se ve sloţce js) určíme v hlavičce administrátorských stránek příkazem pro vloţení skriptu <script type="text/javascript" src="../js/tiny_mce/tiny_mce.js"></script>. V hlavičce také nastavíme češtinu a omezíme paletu nástrojů. Výchozí nastavení povoluje všechny klasické nástroje dostupné v textových editorech, ale pro jednotný vzhled stránek je lepší znepřístupnit například výběr fontů a jiné moţnosti. V administraci následně můţeme vytvořit formulář a uvnitř textareu editoru, ve které zobrazíme text upravované stránky z databáze. Textarea má kromě jiných atribut name = text_edit. Pokud byl formulář odeslán, zavolá se funkce pro zpracování dat edit s parametrem text_edit. Obr. 14 Funkce edit Na obrázku 14 si můţete prohlédnout funkci, která ukládá nový obsah stránky do databáze. Pokud bylo do pole textarea něco nového vyplněno, zjistí funkce název upravované stránky a updatuje v tabulce její sloupec text.

Realizace práce 39 5.3.3 Nové články Tvorba nových článků vyuţívá taktéţ editoru TinyMCE, ale formulář obsahuje navíc další tři vstupy. Vstupní pole, kam uţivatel zadá název článku, pole pro klíčová slova a pole k nahrávání náhledových obrázků článku. Pro uploadování obrázku na server se pouţívá formulářový prvek input type = file. Bohuţel se tento prvek zobrazuje v kaţdém prohlíţeči trochu jinak a ani text na tlačítku nelze ţádným atributem změnit. K odevzdání formuláře dojde po stisknutí tlačítka uloţit. Stane-li se tak, zavolá se skript exe_clanky a postará se o vloţení nového řádku do tabulky články v databázi a vytvoří nový soubor nazevclanku.php. Vstupní podmínkou je, aby byla vyplněna pole název článku, klíčová slova a text. Pokud byl nahrán i obrázek, testuje se, ţe jeho velikost nepřesáhla 1MB a ţe se jedná o formát JPEG. Jsou-li podmínky splněny, provedou se popořadě všechny výše zmíněné úkony a zobrazí se kategorie články na webové stránce. V opačném případě je znovu poslána hlavička stránky pro vytvoření článku. Na obrázku 15 je kód postihující změnu velikosti vloţeného obrázku na náhled o šířce 250 pixelů. Obr. 15 Změna rozlišení obrázku Výška obrázku je vypočítána v poměru. Následně se pomocí příkazu imagejpeg($img,"../pages/clanky/thumbs/".$zaznam["id"].".jpg",85) uloţí obrázek v kvalitě 85% pojmenovaný id číslem vloţeného článku. SQL dotaz $sql3 = "UPDATE clanky SET pict = 1 WHERE id = ".$zaznam["id"]."" pak nastaví novému článku hodnotu sloupce pict na 1. Nakonec se vytvoří příkazem fopen("../pages/clanky/".friendly_url($_post['art_name']).".php", "w") nový php soubor se stejnou strukturou jako ostatní stránky webu. K zápisu dat do souboru poslouţila funkce fwrite.

40 Realizace práce 5.3.4 Editace a mazání článků Po vstupu do sekce články se v administraci stejně jako na webových stránkách objeví jednotlivé náhledy oddělené horizontální čarou. Libovolný článek lze upravit nebo smazat. Úprava článku se uskuteční přes textareu TinyMCE editoru. Při volbě smazat článek se nejdříve odstraní soubor nazev_clanku.php pomocí funkce unlink("./pages/clanky/".$soubor.".php") a následně se vymaţe záznam pro daný článek z databáze. K odstranění záznamu slouţí příkaz $sql2 = "DELETE FROM clanky WHERE id = ".$clanek."" Forma příkazu s hvězdičkou není pro databázi MySQL přípustná. V proměnné článek je uloţeno id mazaného článku získané jako parametr předaný v URL adrese. Po úspěšném smazání je zobrazen aktualizovaný přehled článků.

Závěr a diskuze 41 6 Závěr a diskuze Práci bych zhodnotila ve dvou rovinách. Jednak přínosy pro samotný cykloservis a pak osobní zhodnocení. 6.1 Diskuze přínosů Cykloservis Magda získal nové stránky s moderním designem a dobrou SEO optimalizací. Co se týče prezentace na internetu, uţ za svými konkurenty nezaostává a naopak si myslím, ţe se v tomhle ohledu dostal do vedoucí pozice. Do jaké míry bude web plnit svůj účel, uţ závisí na konkrétním vyuţití. Je potřeba stránky naplnit kvalitními texty a aktualizovat je. S tím souvisí i velmi důleţité získávání zpětných odkazů, těch zatím na stránky vede bohuţel málo a musí se získat postupně. Majitel byl s novou prezentací velmi spokojen. Administrační rozhraní umoţňuje prostřednictvím formulářů měnit obsah webových stránek, a jak potvrdil sám zadavatel, ovládání je skutečně jednoduché a intuitivní. Vzhledem k začínající cyklistické sezóně a mnoţství závodů, kterých se v nejbliţších dnech pan Magda i další mechanici účastní, ocenil především moţnost rychlé aktualizace otevírací doby. V nejbliţší době se také plánuje rekonstrukce dílny, takţe na podstránce servis snad přibude zanedlouho i několik fotografií. Moţnosti tvorby a editace článků se údajně vyuţije aţ časem, kdy nebude pracovní týden tak hektický. Přístup do administrace je řádně zabezpečený a v případě potřeby lze velmi jednoduše přidat do databáze nového uţivatele administrace. S kladnými ohlasy se setkal i návrh logotypu. Na podzim letošního roku se budou tisknout nové vizitky a do budoucna se počítá s dalším vyuţitím návrhu. Nové stránky přinesly podniku významnou úsporu času a peněz, které by jinak musel vynaloţit na zaplacení externí společnosti. Vzájemná komunikace probíhala velmi rychle, částečně i proto ţe majitel neměl ţádné zvláštní poţadavky a veškerý návrh vzhledu i výchozího obsahu ponechal zcela v mé reţii. Výsledná podoba stránek údajně uţ týden po spuštění přilákala několik nových zákazníků a majitel dokonce vyjádřil obavy z toho, ţe bude muset vzhledem k omezené kapacitě dílny odmítat zákazníky, kteří přijdou bez předchozí domluvy. 6.2 Osobní zhodnocení Celá práce významně obohatila mé zkušenosti s jazykem HTML, PHP i MySQL, se kterými jsem se předtím setkala pouze zběţně v rámci vybraných předmětů na naší fakultě. Naučila jsem se několik uţitečných postupů a technik, které jistě dále vyuţiji. Zároveň jsem ráda za něco, co můţe být v budoucnu přínosem pro podnik.

42 Závěr a diskuze 6.3 Možnosti rozšíření Překvapilo mě, ţe pan majitel nad ţádným rozšířením neuvaţuje. Prodej součástek a vybavení do budoucna rozhodně neplánuje, takţe například e-shop nepřichází v úvahu. Osobně bych povaţovala za přínosný nějaký online formulář na objednávky, ale ani o ten majitel nejevil ţádný zájem, upřednostňuje telefonickou domluvu a dokonce si nepřál na stránkách uvádět ani e-mail. Moţností rozšíření by však mohla být jednoduchá online aplikace, která by slouţila k vlastnímu návrhu designu kola pro zájemce o stavbu kola na zakázku. Jednoduše by si tak namysleli své poţadavky na barevné kombinace jednotlivých komponent.

Literatura 43 7 Literatura ADAPTIC. SEO: Duplicita [online]. 2008 [cit. 2013-04-24]. Dostupné z: http://www.tvorba-webu.cz/seo/duplicita.php BRÁZDA, Jiří. PHP 5: začínáme programovat. Praha: Grada Publishing, 2005, s. 244. ISBN 80-247-1146-X. DOBIÁŠ, Richard. SONIX DESIGN. Jak na webdesign a tvorbu úspěšného webu [online]. 2003-2013 [cit. 2013-04-24]. Dostupné z: http://www.sonixdesign.net/webdesign/ INTERNET INFO, s.r.o. Slunečnice.cz: Softwarové licence [online]. 1998-2013 [cit. 2013-04-25]. Dostupné z: http://www.slunecnice.cz/licence/#lic-gnugpl KOUBA, Tomáš. CHCI WWW. SEO: Zvýšení návštěvnosti [online]. 2012 [cit. 2013-04-24]. Dostupné z: http://www.chciwww.cz/zvyseni-navstevnostiseo/ KRUG, S. Webdesign: Nenuťte uţivatele přemýšlet. 2. vydání. Brno: Computer Press, 2006. ISBN 80-251-1291-8. MIKULKA, Jan. SEO: Jak by měla vypadat URL adresa?. In: Prohlizece.info: internetové prohlíţeče a moderní tvorba stránek [online]. 2010 [cit. 2013-04-24]. Dostupné z: http://prohlizece.info/clanky/seo-jak-by-melavypadat-url-adresa/ POKORNÝ, Jaroslav. Databázové systémy. Vyd. 2. Praha: ČVUT, 2004, 148 s. ISBN 80-010-2789-9. SCHLEZINGER, Vojtěch. Mod_rewrite pro hezká URL - RewriteCond. In: Interval.cz [online]. 2005 [cit. 2013-05-06]. Dostupné z: http://interval.cz/clanky/mod_rewrite-pro-hezka-url-rewritecond/ SYMBIO DIGITAL. Wireframe webu [online]. 1999 2013 [cit. 2013-04-24]. Dostupné z: http://www.symbio.cz/slovnik/wireframe-webu.html ŠPINAR, David. Přístupnost: Web a weblog věnovaný přístupnosti webových stránek [online]. 2007 [cit. 2013-04-22]. Dostupné z: http://pristupnost.nawebu.cz/ TIPPMAN, Jan. Unie grafického designu [online]. 2012 [cit. 2013-05-15]. Dostupné z: http://unie-grafickeho-designu.cz/ WEBDOMÉNA S.R.O. SEO [online]. 2012 [cit. 2013-04-22]. Dostupné z: http://www.seo-optimalizace.info/

44 Literatura 602SQL SERVER. 602SQL Server: úplná dokumentace [online]. [cit. 2013-05- 17]. Dostupné z: http://sql602.sourceforge.net/helpdircs/xml/html/top.html

Přílohy 45 Přílohy

46 A Náhledy webové prezentace Na následujících obrázcích je několik screenshotů stránek cykloservisu. Obrázky 16 a 17 znázorňují vybrané podstránky. Obrázky 18 a 19 jsou náhledy administračních stránek. Obrázky 17 a 19 byly kvůli ušetření místa ořezány, pro ilustraci a představu však stačí.

Přílohy 47 Obr. 16 Články, jednotlivé náhledy Obr. 17 Náhled článku

48 Obr. 18 Administrace, editace podstránky servis Obr. 19 Administrace, tvorba nového článku

Přílohy 49 B Kontrola validace a SEO Na obrázcích 20 a 21 si můţete prohlédnout výsledek analýzy zdrojového kódu úvodní stránky. Obr. 20 Analýza zdrojového kódu úvodní strany, první část Při validaci se vyskytla chyba, ţe u některých netextových prvků chybí alternativní obsah (obrázek 21). Zjistila jsem, ţe se jedná pouze o prvky v pozadí stránek (barevný přechod a obrázky na pozadí), u kterých je zbytečné specifikovat jejich alternativní popis. Všechny netextové prvky nesoucí sdělení svou alternativu textu mají, takţe z hlediska přístupnosti je kód v pořádku.

50 Obr. 21 Analýza zdrojového kódu úvodní strany, druhá část Varování, ţe stránka obsahuje málo slov (tím pádem málo odstavců), se vyskytuje pouze u úvodní strany, protoţe obsahuje jen nejdůleţitější informace pro zákazníky.