Návrh a realizace webové prezentace firmy

Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín

1

Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín studijní obor: Marketing pro střední stupeň řízení

Návrh a realizace webové prezentace firmy

Červen 2014

Adam Bečka

Tento Tentoprojekt projektjejespolufinancován spolufinancovánEvropským Evropskýmsociálním sociálnímfondem fondemaastátním státnímrozpočtem rozpočtemCR. ČR.


2

Tato absolventská práce s názvem „Návrh a realizace webové prezentace firmy.“ byla zpracována jako práce v rámci projektu reg. č. CZ.1.07/2.1.00/32.0038

“Inovace

vzdělávacích programů dle požadavků podnikatelské praxe v rámci procesu stabilizace VOŠE Zlín“.

ABSTRAKT Absolventská práce se zabývá návrhem a realizací webové prezentace firmy s ohledem na co nejmenší vynaložené náklady. Teoretická část shrnuje začátky a historii Internetu, postup při tvorbě webové prezentace a důležité faktory pro optimalizaci webových stránek. Praktická část se věnuje analýze vybraných open source redakčních systémů a následně popisu realizace samotné webové prezentace od počátečního návrhu až po finální publikaci webu. Klíčová slova: Internet, webová prezentace, redakční systém, Wordpress, SWOT analýza, SEO

ABSTRAKT This graduate thesis deals with design and implementation of the company's web page considering to the minimum costs. The theoretical part summarizes the beginnings and history of the Internet, process of creating a website and important factors for optimizing web pages. The practical part is oriented on the analysis of selected open source content management system and subsequently description of implementation of the website from the initial design to final publication of the web page. Keywords: Internet, web presentation, content management system, Wordpress, SWOT analysis, SEO

Tímto bych rád poděkoval paní Ing. Janě Šilhánové za poskytnuté rady a odborné připomínky. Dále bych chtěl poděkovat paní Vladislavě Bittó, která mi umožnila vykonávat pracovní stáž ve své firmě.

Prohlášení

Já, Adam Bečka, absolvent denního studia Obchodní akademie Tomáše Bati a Vyšší odborné školy ekonomické Zlín tímto prohlašuji, že: a) jsem autorem a nositelem autorských práv k absolventské práci na téma Návrh a realizace webové prezentace firmy.“, která vznikla v rámci studia na Obchodní akademii Tomáše Bati a Vyšší odborné školy ekonomické Zlín a v rámci projektu reg. č. CZ.1.07/2.1.00/32.0038; b) k práci jsem použil zdroje, které jsou uvedeny v seznamu použité literatury; c) s účinností od dnešního dne poskytuji k této absolventské práci níže specifikovanou licenci

Creative

commons,

jejíž

plné

znění

je

dostupné

na

adrese

http://creativecommons.org/licenses/by/3.0/cz/legalcode (dále jen „licence“), resp. zpřístupňuji dílo za podmínek této licence, a to takto: 

licence opravňuje nabyvatele šířit pouze k nekomerčním účelům a to pouze pod stejnou nebo obdobnou licencí vždy s uvedením jména autora a názvu díla;



licence neopravňuje nabyvatele k úpravě díla a k šíření upraveného díla;



licence vylučuje jakékoli komerční využití díla;

d) na díle neváznou práva třetích osob, která poskytnutí licence brání, a jsem oprávněn ji poskytnout; e) souhlasím s tím, aby absolventská práce byla k dispozici v Informačním centru pro potřeby studentů Obchodní akademie Tomáše Bati a Vyšší odborné školy ekonomické Zlín.

Ve Zlíně, dne 12. 5. 2014 .......................................... podpis

OBSAH ÚVOD .................................................................................................................................... 7 I TEORETICKÁ ČÁST ............................................................................................... 8 1 INTERNET ................................................................................................................. 9 1.1 HISTORIE INTERNETU......................................................................................... 9 1.2 ZAČÁTKY INTERNETU V ČR ............................................................................ 10 1.3 SLUŽBY INTERNETU ......................................................................................... 11 2 WWW ........................................................................................................................ 13 2.1 VZNIK A HISTORIE ........................................................................................... 13 3 WEBOVÁ PREZENTACE ..................................................................................... 14 3.1 WEBDESIGN ..................................................................................................... 14 3.2 OBSAHOVÁ STRÁNKA ...................................................................................... 14 3.2.1 Copywriting ...................................................................................... 15 3.2.2 Přístupnost webu .............................................................................. 16 3.3 TECHNICKÉ ZPRACOVÁNÍ................................................................................. 16 3.3.1 Webhosting ....................................................................................... 16 3.3.2 Doména ............................................................................................ 17 3.3.2.1 Řády domény .................................................................................... 17 3.3.3 Redakční systém ............................................................................... 18 4 OPTIMALIZACE WEBOVÝCH STRÁNEK ....................................................... 20 4.1 ON-PAGE ......................................................................................................... 20 4.1.1 Název domény .................................................................................. 20 4.1.2 Titulek .............................................................................................. 21 4.1.3 Meta description ............................................................................... 21 4.1.4 URL adresa ....................................................................................... 22 4.1.5 Klíčová slova .................................................................................... 22 4.1.6 Alternativní popis obrázku ............................................................... 23 4.1.7 Obsah stránky ................................................................................... 23 4.2 OFF-PAGE ........................................................................................................ 24 4.2.1 Linkbuilding ..................................................................................... 24 II PRAKTICKÁ ČÁST ................................................................................................ 26 5 AZ REKLAMA – VLADISLAVA BITTÓ ............................................................ 27 5.1 CHARAKTERISTIKA KLIENTA ........................................................................... 28 6 ANALÝZA REDAKČNÍCH SYSTÉMŮ ............................................................... 29 6.1 DRUPAL ........................................................................................................... 30 6.1.1 SWOT analýza ................................................................................. 31 6.2 JOOMLA! .......................................................................................................... 32 6.2.1 SWOT analýza ................................................................................. 33 6.3 WORDPRESS .................................................................................................... 34 6.3.1 SWOT analýza ................................................................................. 35 6.4 VYHODNOCENÍ ................................................................................................ 36 7 REALIZACE WEBOVÉ PREZENTACE FIRMY .............................................. 38

GRAFICKÉ ZPRACOVÁNÍ................................................................................... 38 7.1.1 Informační struktura webu ............................................................... 38 7.1.2 Architektura webu ............................................................................ 39 7.1.3 Logotyp ............................................................................................ 40 7.2 TECHNICKÉ ZPRACOVÁNÍ................................................................................. 41 7.2.1 Výběr vhodného webhostingu .......................................................... 42 7.2.2 Výběr vhodné domény ..................................................................... 43 7.3 REDAKČNÍ SYSTÉM WORDPRESS ..................................................................... 45 7.3.1 Instalace ............................................................................................ 45 7.3.1.1 Nahrání systémových souborů na webhosting ................................. 46 7.3.1.2 Vytvoření MySQL databáze ............................................................. 46 7.3.1.3 Instalace skrz webové rozhraní ........................................................ 47 7.3.2 Použité pluginy ................................................................................. 51 7.3.2.1 Akismet ............................................................................................ 51 7.3.2.2 Contact Form 7 ................................................................................. 51 7.3.2.3 Google Maps Ready ......................................................................... 53 7.3.2.4 Google XML Sitemaps ..................................................................... 56 7.3.3 SEO optimalizace ............................................................................. 57 7.3.4 Popis obsahu jednotlivých stránek ................................................... 58 8 VÝSLEDNÁ PODOBA STRÁNEK........................................................................ 61 9 ZHODNOCENÍ EKONOMICKÉHO HLEDISKA .............................................. 62 ZÁVĚR ............................................................................................................................... 63 SEZNAM POUŽITÉ LITERATURY.............................................................................. 64 SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK ..................................................... 66 SEZNAM OBRÁZKŮ ....................................................................................................... 67 SEZNAM TABULEK ........................................................................................................ 68 7.1


7

ÚVOD Tato absolventská práce se bude zabývat návrhem a samotnou realizací webové prezentace pro firmu pana Zdeňka Gazdoše. Tato firma je menší podnikatelský subjekt, který si prozatím nemůže dovolit investovat obrovské finanční prostředky na propagaci na internetu. Proto hlavním cílem této práce bude, vytvořit webové stránky s co možná nejmenšími, nejlépe nulovými náklady na pořízení. K tomu budou využity bezplatné nástroje, které jsou na internetu k dispozici. Začátek teoretické části se bude skládat z historie a vývoje Internetu a to nejen ve světě, ale i v České Republice. Dále pak bude zkoumat služby internetu s detailnějším zaměřením na službu WWW, která je nejrozšířenější službou internetu a ve vyspělém světě ji už dnes používá téměř každý. Následovat bude obecné pojmenování a vysvětlení základních prvků, které se vyskytují u problematiky webových stránek se zaměřením na webdesign, obsahovou stránku a technické zpracování. Ke konci teoretické části bude čitatel seznámen se základními on-page i off-page faktory pro optimalizaci webových stránek. Na úvod praktické části bude představena firma a klient, pro kterého je tato práce zpracovávána. V praktické analytické části proběhne seznámení s vybranými redakčními open source systémy, které budou detailně popsány a u každého z nich bude vypracována SWOT analýza. Díky této analýze a porovnání všech vybraných redakčních systémů budeme moci stanovit, který redakční systém nejlépe vyhovuje našim požadavkům. Do této analytické části spadá ještě výběr toho nejvhodnějšího doménového jména a hostingových služeb. V závěrečné části práce proběhne popis samotné realizace webových stránek. Popis bude obsahovat vše od prvotního návrhu informační struktury webu, přes instalaci vybraného redakčního systému až po SEO optimalizaci. Tato práce vzniká díky spolupráci s AZ reklamní agenturou a měla by sloužit jako určitý návod pro další podnikatelské subjekty, které si nemohou dovolit investovat velké finanční prostředky na tvorbu profesionálních webových stránek.

I TEORETICKÁ ČÁST


1

9

INTERNET

Internet je celosvětový systém navzájem propojených počítačových sítí. Počítače v jednotlivých sítích mohou být navzájem propojeny kabely, nebo bezdrátově. To jim umožňuje spolu komunikovat a navzájem si vyměňovat informace. Každý takový počítač, který je připojen do sítě, může navázat kontakt s jiným, libovolným počítačem této sítě. Propojení těchto menších lokálních počítačových sítí s celosvětovou sítí je umožněn jenom díky protokolu TCP/IP, anglicky Pro Transmission Control Protocol/Internet Protocol. Česky by se tato zkratka dala přeložit jako přenosový kontrolní protokol/ internetový protokol. Tento protokol umožňuje, aby komunikace probíhala co možno bez chyb a mezi správnými počítači. (Musil, 2003) Počítače obsahují velké množství různých informací a jsou to právě sítě, které nám tyto informace dokážou zprostředkovat, zpřístupnit. Počítače na internetu mají dvojí roly. Počítač může vystupovat jako klient, nebo jako server. Pod klientem si můžeme představit, nás, obyčejné lidi, kteří využívají internet. Servery mohou nabízet klientovi internetové služby a je jen na klientech zda tyto služby využijí. Nabízené služby jsou většinou v podobě dat ukládané na pevném disku serveru. V dnešní době internet obsahuje nepředstavitelné množství dat v podobě například obrazových galerií, osobní a firemní stránky, nebo velkokapacitní cloudová úložiště. (Musil, 2003)

1.1 Historie internetu Historie internetu sahá do šedesátých let dvacátého století, kdy se v USA snažili o propojení svých významných vojenských a vládních sálových počítačů. Podmínkou bylo, aby mohli mezi sebou komunikovat i v případě, že jeden, nebo více z počítačů bude vyřazen z provozu v důsledku případné jaderné války. Přišli tedy s decentralizovanou sítí, kde by zničení jednoho z uzlů nehrálo žádnou roli, informace by byla jednoduše vedena na místo určení jinou cestou. (Stuchlík a Dvořáček, 2000) V srpnu 1969 byla ve Velké Británii v Národní výzkumné laboratoři zprovozněna první internetová síť, která měla čtyři uzly. To vyvolalo velký ohlas u amerického ministerstva obrany, ti požadovali vybudování podobné sítě mezi vojenskými a vědeckými objekty. Tato americká síť dostala jméno ARPANET. Síť sloužila převážně pro elektronickou poštu a kromě vědeckých konferencí, kde se předávali informace, se vynořili i první konference určené primárně pro zábavu. V roce 1973 se k síti připojili další instituce a to University


10

College of London a Royal Radar Establishment. Ty tuto síť využívali k výměně informací. (Malík a Salač, 2004) Obliba internetu rostla a v roce 1992 dosáhl internet milionu uzlů. S tím byl ale spojen problém přidělování jmen, proto byl zprovozněn doménový systém DNS, anglicky Domain Name Services. Teprve po roce 1993 se internet začíná dostávat i do komerční sféry. Předtím byl internet výhradně určen pro vědecké projekty a potřeby. V současné době je internet nedílnou součástí každé domácnosti v civilizovaném světě. Uživatel může nakupovat online, ovládat bankovní převody v pohodlí domova, nebo se skrz mapy podívat na druhý konec světa. (Malík a Salač, 2004)

1.2 Začátky Internetu v ČR Internet v České Republice má počátky teprve v 90. letech dvacátého stolení. To je téměř o 30 let později, než vznikla síť ARPANET. Bylo to hlavně díky tehdejšímu režimu, který byl v ČSSR nastolen. Po listopadu 1989 vznikl další problém a to nedostatečná a hlavně zastaralá telekomunikační infrastruktura. Až v říjnu 1990 se současné Výpočetní centrum Českého vysokého učení technického v Praze připojilo k evropské vědecké síti EARN, anglicky European Academic and Research Network pomocí uzle v rakouském Linci a stalo se tak národním uzlem pro Československo. Síť EARN se využívala k elektronické korespondenci. Přenášel se tedy velmi malý objem dat a na to stačily i pomalé přenosové linky. (Stuchlík a Dvořáček, 2000) Datum 13. února 1992 je zapsáno do historie českého Internetu. Toto je formální datum kdy se tehdejší ČSFR slavnostně připojila k Internetu. Internet byl ale prozatím dostupný pouze na ČVUT. Netrvalo dlouho a Internet chtěli mít i další vysoké školy po celém Československu a tak ministerstvo školství schválilo projekt na vytvoření páteřní sítě, která by spojovala univerzitní města. Na tento projekt bylo vyčleněno celých 20 milionů korun. Federální projekt se ale brzy rozdělil a tak vznikly dva samostatné oddělené projekty. Pro česko to byl CESNET (Czech Educational and Scientific Network) a pro slovensko SANET (Slovac Academic Network). CESNET byl vybudován původně jako akademická síť, ale pod tíhou obrovské poptávky začal CESNET poskytovat své služby dalším nevýdělečným organizacím a nakonec se stal komerčním poskytovatelem Internetu. (Stuchlík a Dvořáček, 2000)


11

1.3 Služby internetu V rámci Internetu mohou uživatelé využívat nepřeberné množství různých služeb. K používání jednotlivých služeb musí mít uživatel na svém počítači nainstalován speciální program, který poskytuje požadovanou službu a díky připojení k internetu komunikuje se serverem. Může to být například webový prohlížeč, FTP klient či messenger. Často se spojují pojmy WWW a Internet, jsou to ale dvě odlišné věci. WWW je jedna z mnoha služeb, které může uživatel na Internetu používat. (Musil, 2003) WWW (Word Wide Web) 

Bezesporu jedna z nejvíce využívaných služeb internetu. Největší výhoda www stránek jsou minimální náklady na pořízení a následné provozní náklady v porovnání s tištěnými dokumenty. Www stránky zpřístupňují možnost vytvořit vlastní web a tak se prezentovat na internetu. Více o www v samostatné kapitole.

E-mail (Electronic Mail) 

E-mail slouží k posílání zpráv mezi uživateli internetu. V dnešní době plně nahradil papírové dopisy. Ke zprávě můžeme připojit přílohu, v podobě fotky, obrázku, videa nebo dokumentu.



Tyto služby získáme zdarma, nabízí ji mnoho internetových serverů (Seznam.cz, nebo Google.com)

FTP (File Transfer Protocol) 

Služba FTP slouží k hromadnému zasálání a přijímání většího množství datových souborů mezi dvěma počítači, připojených k internetu, pomocí počítačové sítě.



Pro použití této služby musíme mít nainstalovaného FTP klienta, který nám umožní manipulaci se soubory.

HTTP (HyperText Transfer Protocol) 

HTTP je protokol, služba pro přenos hypertextových stránek. Díky http se přenáší hypertextové odkazy, které jsou uloženy na www serverech.

IRC (Internet Relay Chat) 

Služba IRC je chatovací sít a je unikátní tím, že poskytovala jako jedna z prvních služeb komunikaci v reálním čase. K této službě je potřeba mít nainstalovaný IRC klient, přes kterého se můžete přihlásit k IRC serveru.


12

News 

News jsou internetové diskusní skupiny a fóra, kam uživatelé mohou psát své názory a naopak mohou číst názory a odpovědi ostatních uživatelů diskuse. Diskuse se obvykle dělí do určitých témat a příspěvky i odpovědi na ně jsou přístupné všem.



K této službě patří i chat, který je většinou rozdělen podle místa bydliště či věku uživatele. (Musil, 2003)

Existuje i další řada služeb například Telnet a Gopher, ale ty nejsou v dnešní době skoro vůbec běžnými uživateli internetu využívány. (Musil, 2003) Gopher 

Gopher je už dávno zapomenutá služba a už vůbec se nepoužívá. Je to předchůdce služby www. V počátku spolu tyto služby bojovali, ale nakonec Gopher podlehl a zanikl.

Telnet 

Telnet umožňuje uživateli, přihlásit se z jeho počítače na jiný vzdálený počítač a ten ovládat. Můžete tedy brouzdat po internetu, psát e-maily nebo přesouvat soubory. Díky Telnetu můžete pracovat na jiném počítači, než je ten, u kterého právě teď sedíte. (Musil, 2003)


2

13

WWW

Zkratka WWW neboli Word Wide Web je v současnosti nejrozšířenější a nejpopulárnější služba internetu, která zpřístupňuje uživatelům hodnotné informace. Do češtiny bychom toto mohli přeložit jako celosvětová pavučina. WWW je atraktivní pro miliony uživatelů po celém světě a to nejenom díky obrovskému množství zdrojů, ale i grafickou úpravou stránek a multimediálních prvků. (Stuchlík a Dvořáček, 2000) Celý tento systém je založen na hypertextových dokumentech. Systém prohledává internet po celém světě a tyto setříděné informace nám poté zobrazí skrz speciálně vyvinutý program internetového prohlížeče na naší obrazovce. Tyto hypertextové dokumenty jsou psány programovacím jazykem HTML, anglicky Hyper Text Markup Language. Dokumenty slouží i jako odkazy, mezi kterými můžeme libovolně přecházet a vracet se zpět na začátek. Obsahují nejenom informace v podobě textu, ale mohou také obsahovat obrázky, videa, soubory, grafy a tabulky. (Musil, 2003)

2.1 Vznik a historie Za otce služby WWW se považuje fyzik Tim Bernes Lee, který se v roce 1989 ve švýcarském CERN, potýká s problémem, jak by vědci, kteří jsou na opačných koncích planety, mohli mezi sebou navzájem komunikovat, a jak by si co nejrychleji mohli mezi sebou vyměňovat nové zkušenosti a poznatky z výzkumu. Zaměří se tedy na internet a hledá takovou službu, která by dokázala zobrazit jak text, ale například i vzorce v podobě obrázků a grafů. Nic takového nenalézá a tak vyvíjí hypertextovou aplikaci, která by splňovala všechny požadavky. Tímto krokem se začala psát historie Word Wide Web. Tato internetová služba se začala šířit světem a postupem času a rostoucí popularitou se dostala i do komerční sféry, kde ji začali využívat velké společnosti. Ty mohli díky webovým stránkám lépe informovat stávající i potencionální klienty o svých službách a nabízených produktech. (Stuchlík a Dvořáček, 2000)


3

14

WEBOVÁ PREZENTACE

3.1 Webdesign Webdesign, na rozdíl od obsahu, nehraje na stránkách hlavní roli, ale neznamená to, že je tato položka naprosto nedůležitá či podřadná. Když návštěvník poprvé navštíví nějaké webové stránky, nejdříve se rozhoduje podvědomě a až poté racionálně. Podvědomí uživatele vyhodnotí, zda se mu dané stránky po grafické stránce líbí a až poté začne racionálně uvažovat. Při racionálním uvažování jsou nejdůležitější informace. Pokud se tedy skloubí dobrý grafický design a kvalitní obsah stránky, návštěvník se bude webu více věnovat a začne očima projíždět po důležitých prvcích stránky jako je logo, nadpisy, systém navigace nebo zvýrazněné části textu. (Krug, 2006) Krug (2006) vyjádřil svůj pohled na design takto: 

Design je jenom doplněk stránek, měl by proto být vyvážený a nesmí návštěvníkovy překážet.



Design vyjadřuje účel a poslání webu. Design by měl návštěvníkovi podat informace o tom kde je a co mu stránka nabízí.



Design poskytuje informace v atraktivní formě.



Design usnadňuje orientaci na stránkách a zřetelně rozděluje co je navigace a obsah stránky. Usnadňuje tedy návštěvníkovy orientaci a pohyb po stránce.



Design webové prezentace by měl být přizpůsoben k vizuální identitě firmy, jako je např. firemní logo.



Díky pěknému designu si uživatelé web snadněji zapamatují a rádi se na něj budou znovu vracet.

3.2 Obsahová stránka Text je už po dlouhá tisíciletí důležitá součást jak si předávat informace bez nutnosti řečníka. Text jako základní prvek předání informací neverbálně má své významné místo i na internetu. Dobře napsané texty nejen že ušetří čas, ale dokážou přilákat na web mnohem více návštěvníků. (Baar, 2009)


15

3.2.1 Copywriting Hlavním cílem copywritingu je proměnit návštěvníka stránek v zákazníka. Jde tedy o činnost, která zaštituje psaní textů k propagaci firmy, jejich produktů a služeb. Kvalitní obsah už sám o sobě vylepšuje dobrou reputaci stránek a navíc z pohledu optimalizace pro vyhledávače dopomáhá k lepším pozicím ve výsledcích vyhledávání. (Baar, 2009) Struktura textu Samotný text pro webové stránky je dosti specifický, proto se v zásadě nedoporučuje čerpat text pro obsah webu z propagačních materiálů či informačních letáků. (Baar, 2009) 

Potřebnost odstavců – Pro lepší přehlednost je lepší, když je text rozdělen do odstavců a ty jsou dále jednoznačně pojmenovány nadpisy. Je tedy důležité strukturovat dokument od hlavních nadpisů, až po ty méně důležité. Nadpisy je nutno volit tak, aby co nejsrozumitelněji shrnoval to, o čem se v daném odstavci může

návštěvník

dočíst.

Pokud

obsah

neodpovídá

nadpisu,

s největší

pravděpodobností návštěvník z našich stránek odejde. 

Formátování textu – Důležitým faktorem je používání formátovacích prvků jakým jsou např. tučné písmo a kurzíva. Návštěvník si jako první prohledne zvýrazněný text (nadpisy) a až poté, co je obsaženo pod nadpisem. Kurzívou jsou ve většině případů značeny citace, nebo odkazy v textu. Velké množství těchto formátovacích prvků v textu spíše škodí.



Barevnost – Všeobecný trend je použití minima barev v textové oblasti. Ideální je kombinace jednobarevného textu v dostatečném kontrastu mezi barvou písma s pozadím. Můžeme tedy zvolit černé písmo na bílém pozadí a naopak bílé písmo na černém pozadí.



Obrázky – Text je dobré obohatit vhodným obrázkem, který souvisí s daným textem. I zde ale platí, že přemíra obrázků spíše škodí. (Baar, 2009)

Obsah textu Samotný obsah textu, by měl být vylepšen správnou strukturou. Text by neměl obsahovat překlepy, hrubky a mnoho cizích slov. Velký důraz by se měl také klást na diakritiku a správně napsané čárky ve větách. (Baar, 2009) 

Stručnost a unikátnost – Pro webové stránky je důležité, vytvořit vlastní jedinečný obsah. Nedoporučuje se tedy kopírovat text ze stránek dodavatelů nebo


16

vlastních tištěných materiálů. Lidé v dnešní době spěchají a proto dlouhé texty nebudou číst, není třeba je zahltit spoustou informací. Je lepší poskytovat text v dostatečně velkých porcích, případně text stejné problematiky rozdělit do více částí. 

Slovník pojmů, terminologie – Na stránky se dostane velké množství lidí, kteří nejsou zcela seznámeni s problematikou daného webu a mohou být frustrování z odborných výrazů, které jsou na stránkách použity. Doporučuje se tedy vytvořit terminologický slovních, který by nejasné odborné pojmy vysvětloval. (Baar, 2009)

Pravidelná aktualizace Pravidelná aktualizace zaručí to, že se návštěvníci budou na stránky pravidelně vracet. Pokud návštěvník nalezna na webových stránkách firmy např. rok starý katalog produktů a neaktuální ceník s velkou pravděpodobností odejde a už se nevrátí. Firma tak zbytečně přichází o zákazníky. Každý web by měl přinášet vždy něco, co bude pro návštěvníky důvod, aby se v budoucnu vrátili. (Holčík et al., 2003) 3.2.2 Přístupnost webu Určitá část populace má problémy s přístupností a použitím webových stránek. Pro lidi, kteří jsou slepí, hluší či mají tělesné postižení, je složité, mnohdy nemožné navigovat se po webových stránkách vytvořených bez ohledu na jejich možnosti. Dále tu máme segment malých dětí, které zatím nemají plně vyvinuté motorické dovednosti či senioři, kteří mohou mít zhoršený zrak a sluch. (Duyne, Landay a Hong, 2005) Z druhého úhlu pohledu může jít o přístupnost skrz mobilní zařízení (mobilní telefony, tablety). Těchto zařízení je stále více a více a tak se zvyšuje poptávka po optimalizaci webových stránek pro tyto mobilní zařízení. (Duyne, Landay a Hong, 2005)

3.3 Technické zpracování 3.3.1 Webhosting Většina lidí si myslí, že webhosting je jen pronájem místa na serveru, ale není tomu zcela tak. K místu na serveru si uživatelé platí také za další služby, které jsou mnohem nákladnější než samotná poskytnutá kapacita na pevném disku serveru. (Zralý, [2010])


17

Většina zaplacené částky jde na tyto služby: 

Fyzická správa serverů, administrativa, komunikace s klienty.



Výpočetní výkon serveru.



Datové přenosy. (Zralý, [2010])

3.3.2 Doména Doména neboli doménové jméno je unikátní adresa na internetu, pod kterou bude stránka k nalezení. Hlavní funkce doménového jména spočívá v tom, že nahrazuje číselný kód, IP adresu. Nemusíme si tedy pamatovat změť čísel, ale stačí název stránky. Doménovou adresu můžeme přirovnat k adrese v běžném životě, každý dům má svojí adresu, pokud by ji neměl, museli bychom se orientovat podle zeměpisné šířky a zeměpisné délky. Doménové jméno se skládá z názvů a koncovky. (Zralý, [2010]) 3.3.2.1 Řády domény Adresu webové stránky tvoří vždy několik domén. Doména je vždy nějakého řádu, kolik slov, oddělených tečkami obsahuje, tolikátého řádu je. (Zralý, [2010])

Zdroj: Český hosting, ©2013 Obr. 1 Grafické znázornění řádů domény. Domény 1. řádu. Domény prvního řádu se rozdělují na dva druhy: 

Generické – Generické domény nepatří k žádnému národu, ale mají jiný specifický význam. Například koncovka .com znamená komerční, .org zamená organizace, .info znamená informační.



Národní – Národní domény jsou speciálně vytvořeny a patří k nějakému národu. Například k České Republice patří doména .cz. (Zralý, [2011])

Tyto domény jsou vytvářeny a přidělovány na základě rozhodnutí mezinárodních institucí.


18

Domény 2. řádu. Domény 2. řádu si může zaregistrovat kdokoli. Registrace probíhá prostřednictvím určených registrátorů. (Zralý, [2011]) Domény 3. řádu. Doménám 3. řádu se také říká subdomény. Tyto domény jsou sice poskytovány zdarma, ale poskytovatel takovéto domény si do stránek umístí reklamu, která nevypadá vždy pěkně. (Zralý, [2011]) 3.3.3 Redakční systém Pod pojmem redakční systém, si můžeme představit aplikaci, která spravuje data a informace různého charakteru a obsahu. Zároveň se stará o to aby byli informace efektivně využity a správně zobrazeny na některém z předpřipravených výstupů. Hlavní výstup pro webový redakční systém je internetová služba word wide web, která je každému z nás přístupná skrze internetový chcete-li webový prohlížeč. Redakční systémy tedy mají vstupní a výstupní rozhraní. Vstupní rozhraní slouží převážně pro vkládání dat a výstupní rozhraní pro jejich prezentaci. Redakční systém jako takový, má mnoho alternativních názvů. Význam je ale ve všech případech naprosto totožný. Můžeme tedy slyšet o názvech, jako jsou: publikační systém, zkratka RS, CMS a Content Mangement Systém. (Lukáš, 2005) Druhy redakčních systémů Existuje velké množství redakčních systémů v různé kvalitě a také za velice odlišné pořizovací náklady. (Lukáš, 2005) 

Svobodné systémy – Tyto systémy jsou volně šiřitelné. Kdokoli si je může stáhnout a používat zadarmo. Bohužel za svobodný systém nikdo neručí a tak jeho provoz nemůže být garantován.



Otevřené systémy s komerční podporou – Jsou to systémy vyvíjené soukromými firmami, které jsou poskytovány pro veřejné použití. Použití je zdarma, ale rozšířená technická podpora je už za příplatek, jako každá komerční služba.



Systémy komerčního typu – Nejsou k dispozici zdarma, autoři je nabízení jako komerční produkt.

Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 

19

Proprietární systémy – Systém vyvíjený přesně na míru konkrétnímu zákazníkovi. Tuto možnost využívají velké webové portály a bývají z pravidla nejnákladnější. (Lukáš, 2005)


4

20

OPTIMALIZACE WEBOVÝCH STRÁNEK

Optimalizace pro vyhledávače, neboli SEO, anglicky Search Engine Optimalization, je v dnešní době považována za naprostou nutnost, bez které se žádný web neobejde, chce-li být navštěvovaný. Optimalizace má za úkol získat co největší množství návštěvníků, kteří cílí přímo na produkt či službu firmy, za co možno nejnižší náklady. SEO optimalizace zajistí, aby byla webová stránka dostatečně viditelná a na předních příčkách vyhledávačů. (Adaptic, © 2005 – 2014)

4.1 On-page On-page faktory jsou umístěny přímo na stránce, jsou přímo svázané s kódem stránky a jeho obsahem. Autor dané webové prezentace může tyto on-page faktory přímo ovlivnit. Důsledné propracování těchto faktorů může výrazně zlepšit hodnocení stránky a její umístění ve vyhledávačích. (Adaptic, © 2005 – 2014) 4.1.1 Název domény Název domény je z mnoha hledisek velmi důležitý. Webové stránky ve většině případů nemohou použít vizuální podměty, které by s ním byly přímo spjaty, na rozdíl od kamenných obchodů. Pro lepší vysvětlení, potencionální zákazníci mají možnost vizuálně stanovit kamennou budovu a určit, zda funguje jako banka nebo jako sportovní potřeby. To z názvu domény jednoduše nelze poznat. A aby toho nebylo málo, všechny domény používají stejný formát. Jako příklad můžeme použít http://www.google.com. Dnes znají tuto stránku téměř všichni, ale najdou se i tací, kteří nevědí o čem je řeč. Proč by si tedy neinformovaní návštěvníci měli myslet, že jde o vyhledávač. Z názvu to není patrné, nenachází se tam žádné slovo hledat, či vyhledej. (Dover a Dafforn, 2012) Naprostá většina lidí hledá konkrétní URL adresu, když chtějí navštívit nějakou webovou stránku. Proto je pro větší množství stránek nejvhodnější takové jméno domény, které je dobré pro vyhledávání. (Dover a Dafforn, 2012) „Při vymýšlení a registraci doménového jména je důležité dát pozor na následující faktory: 

Vyhněte se pomlčkám. Pomlčky v názvu domén snižují důvěryhodnost webu a mohou fungovat jako indikátor spamu, čili nevyžádané pošty.



Vyhněte se obecným a neobvyklým doménám nejvyšší úrovně. Domény jako .info, .cc, .ws a .name mohou být dalším indikátorem spamu.

Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 

21

Vyhněte se názvům domén delším než 15 znaků. Lidé jsou líní. Nechtějte po nich, aby psali romány, aby se dostali na vaše webové stránky.



Dejte si pozor na permutace. Majitelé domény ExpertsExchange.com vložili do propagace této domény hodně úsilí, než si uvědomili, že tento název by se mohl nesprávně interpretovat jako ExpertSexChange.com.“ (Dovern a Dafforn, 2012, s. 40)

4.1.2 Titulek Titulek stránky by měl obsahovat to, co potencionální návštěvník na konkrétní stránce najde. Zapisuje se do tagu ve formě Samotný text v HTML kódu stránky a měl vy shrnovat obsah dané stránky. Klíčová slova titulku by se měla volit tak, aby korespondovala s tím, co se na stránce opravdu nachází, není třeba se snažit o vměstnání co největšího počtu klíčových slov. Vyhledávače ve výsledcích vyhledávání zobrazují titulek v délce kolem 200 znaků. (Janovský, 2013) Samotný titulek můžeme vidět ve výsledcích vyhledávání jako odkaz, zobrazuje se také v záložkách a jako nadpis v horní liště internetového prohlížeče nebo například v historii prohlížeče. Zvolení správného klíčového slova rozhoduje o tom, že při více výsledcích vyhledávání uživatel zvolí právě vaši webovou stránku. (Janovský, 2013) 4.1.3 Meta description Metaznačka Description slouží jako stručný textový popis obsahu dané stránky a také jako lákadlo pro návštěvníka, který by měl po přečtení stránku navštívit. Každá jednotlivá stránka webu by měla mít unikátní popis. V samotném popisu stránky může být použita věta či jeden krátký odstavec. (Dover a Dafforn, 2012) Do zdrojového HTML kódu stránky se metaznačka Description zapisuje zhruba takto: <meta name="description" content="Samotný popis stránky"/>. (Dover a Dafforn, 2012) Vyhledávácí enginy tento kód zahrnou do výsledků vyhledávání. Největší vyhledávací portál u nás Seznam.cz a na světě Google.com vypisují description a nalezneme jej přímo pod titulkem, odkazem na stránku. Pokud by na webové stránce metaznačka Description nebyla, tak se jako popisek zobrazí kousek textu stránky. (Dover a Dafforn, 2012)


22

4.1.4 URL adresa URL je anglická zkratka z Uniform Resource Lacator. Je známá také pod označení www adresa. Skrz tuto adresu se může uživatel dostat na zvolenou stránku. (Kubíček a Linhart, 2010) Možnosti zápisu URL adresy http://www.jmenodomeny.cz http://www.jmenodomeny.cz/stranka http://www.neco.jmenodomeny.cz www.jmenodomeny.cz/stranka/stranka/stranka Na začátku adresy je umístěn tzv. protocol identifier, česky identifikátor protokolu. Ten rozhoduje o tom, jaký protokol použít. Mezi nejznámější protokoly patří: http, ftp a mailto. Následující část je označena jako resource name, česky zdrojové jméno. To udává jméno domény, nebo IP adresu, kde se požadovaný zdrojový dokument nachází. Protocol identifier a ressource name je vždy od sebe odděleno dvojtečkou a dvěma lomítky. (Krčmář, 2013) URL adresa z pohledu optimalizace pro vyhledávače je důležitá nejen pro lidi, ale i pro roboty vyhledávacích enginy. URL adresa by měla být pro snadnější zapamatování co nejkratší a měla by jasně vystihovat zaměření daného webu. Nejlepší možné řešení je rozdělit webovou stránku do kategorií a vytvořit tak optimalizovanou strukturu URL, která bude obsahovat název položky a informaci o kategorii. To pomůže zjistit jak uživatelům, tak vyhledávacím enginům, co se na dané stránce nachází, bez toho, že by danou stránku museli navštívit. (Dover a Dafforn, 2012) Příklad optimalizované struktury URL adresy www.jmenodomeny.cz/podkategorie/kategorie/nazev-polozky.html www.jmenodomeny.cz/kategorie/nazev-polozky.html www.jmenodomeny.cz/nazev-polozky.html (Dover a Dafforn, 2012) 4.1.5 Klíčová slova Klíčové slovo je takové slovo, které zadává uživatel do vyhledávače. Vyhledávač pak nabídne návštěvníkovy výsledky vyhledávání v podobě odkazů na webové stránky, které


23

mají v sobě zaindexována hledaná slova. Klíčová slova by tedy měla být taková, která s nevětší pravděpodobností zadají potencionální zákazníci. Proto musíme dobře vědět, kdo jsou naši zákazníci a jak naši zákazníci přemýšlejí. Díky těmto poznatkům budeme schopni klíčová slova lépe určit. (Herout, [2013]) Naprostým základem je analýza klíčových slov a jejich následné použití v URL, titulku stránky, popiscích obrázků, meta značkách, nadpisech a textu. Dobře zvolená klíčová slova pomáhají nejen při SEO optimalizaci webových stránek, ale napomáhají i k lepší orientaci návštěvníků a pochopení hlavního sdělení webové stránky. (Herout, [2013]) 4.1.6 Alternativní popis obrázku Obrázek není text a proto i přes dnešní technologicky vyspělou dobu, internetové vyhledávače neumí rozpoznat co se na daném obrázku nebo fotce nachází. Proto musíme vyhledávači pomoci a popsat mu co je na daném obrázku zobrazeno. K tomu nám pomůže alternativní text, neboli atl tag v HTML kódu. Obrázky jsou nedílnou součástí každého webu, je tedy dobré zařadit i je mezi faktory ovlivňující výsledky vyhledávání. Jako další významné plus dobře vyplněného alt tagu je možnost získat zobrazení ve výsledcích vyhledávání obrázků. (Řezníček, 2013) Alternativní text by měl být napsán výstižně a měl by obsahovat klíčová slova související přímo s obrázkem. Text by neměl být příliš stručný, ale ani příliš dlouhý, bohatě postačí jedna kratší věta. Doplnění tohoto popisku do kódu stránky není nijak extra složité, nezabere to dlouhou dobu, ale pozitivně ovlivní pozici při vyhledávání. (Řezníček, 2013) 4.1.7 Obsah stránky Obsah stránky je sama podstata webu. Dobrý obsah vždy byl, je a bude zásadním faktorem v SEO. Je to právě dobrý obsah, který uživatelé internetu hledají a je to také důvod, proč na daný web přijdou. Stránky by měli být obsahově velmi konkrétní k dané problematice a účelu webu. Obsah by měl být originální, strukturovaný prolinkovaný a měl by také obsahovat klíčová slova. (Dover a Dafforn, 2012) „Ideální stránka by měla: 

Poskytovat vysokou relevanci ke konkrétnímu tématu.



Zahrnout téma stránky do značky .  Zahrnout téma stránky do URL adresy. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 24  Zahrnout téma stránky do alternativního popisku pro obrázky.  Několikrát zmínit dané téma v textovém obsahu.  Odkazovat se zpět na domovskou stránku. Toto je obvykle zajištěno obrázkovým odkazem levém horním rohu stránky (logo webových stránek).  Poskytovat unikátní obsah o daném tématu.“ (Dover a Dafforn, 2012, s. 52 – 54.) 4.2 Off-page Off-page faktory se na webové stránce přímo nenachází. Autor webové prezentace nemá ve svých silách tyto faktory přímo ovlivnit, mají však svůj určitý vliv při výsledcích vyhledávání. Off-line faktory by se dali vyjádřit jako odkazy, které míří na vaši stránku z jiných, cizích stránek. Důležitá je nejenom kvantita zpětných odkazů, ale i kvalita a důvěryhodnost stránek, z kterých odkaz pochází. I zde platí několikrát zmiňované pravidlo, čím lepší off-page faktory jsou, tím má web lepší a vyšší pozici ve výsledcích vyhledávání. (H1.cz, © 2005 – 2014) 4.2.1 Linkbuilding Linkbuilding je do češtiny přeloženo jako budování zpětných odkazů. Zpětné odkazy můžeme získat skrz mnoho technik, o kterých si něco málo řekneme. V první řadě je můžeme rozdělit podle rizika a to na malé riziko a větší riziko. Techniky pro budování zpětných odkazů s větším rizikem se zásadně nedoporučují a tyto techniky nemohou být považovány za dlouhodobě efektivní. Jedná se převážně o to, že si firma zaplatí za to, že někdo bude odkazovat na jejich web. Je tu velká pravděpodobnost, že placené odkazy budou odhaleny, zdiskreditovány a vyhledávacími enginy budou ignorovány. (Dover a Dafforn, 2012) Techniky pro budování odkazů – větší riziko  Nákup odkazů od zprostředkovatelů – Možnost využití služeb různých zprostředkovatelů, kteří prodávají, nebo pronajímají prostor na hojně navštěvovaných a odkazovaných webech.  Podplacení vlivných přispěvovatelů do sociálních sítí – Sociální sítě jsou dnes velmi populární a většinu oblíbeného obsahu tvoří malá skupina uživatelů. Technika spočívá v tom, domluvit se s těmito lidmi na vytvoření obsahu, přesně podle našich požadavků a přání. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín  25 Nákup odkazů z adresářů – Pokud se zvolí tato metoda, musíme se ujistit, že kupujete jenom ty odkazy, které mají vysokou hodnotu, jsou umístěny co nejblíže domovské stránce a působí co nejvíce legitimně. (Dover a Dafforn, 2012) Techniky pro budování odkazů – malé riziko  Kontaktujte své obchodní partnery – Další možností jak získat zpětný odkaz jsou firemní obchodní partneři. Není nic jednoduššího než je kontaktovat a požádat o vzájemnou výměnu.  Účastněte se událostí v odvětví – Spousta lidí upřednostňuje vytváření odkazů na lidi, které znají osobně. Účastí na událostech v daném odvětví, například veletrh či výstava, dopomůže k budování osobní reputace a může vést i k navázání nových kontaktů.  Tvorba odborného článku z oboru – Vytvoření odborného článku a poté ho publikovat on-line, samozřejmě se zpětným odkazem. Existuje opravdu mnoho internetových služeb, co ocení dobré články. Stačí si na těchto portálech vybudovat dobrou reputaci. (Dover a Dafforn, 2012) II PRAKTICKÁ ČÁST Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 5 27 AZ REKLAMA – VLADISLAVA BITTÓ Firma AZ Reklama paní Vladislavy Bittó vznikla v roce 1997 jako fyzická osoba samostatně výdělečně činná. Hlavním předmětem podnikatelských aktivit reklamní agentury je reklama a design. Zdroj: Interní zdroj Obr. 2 Logo – AZ Reklama Na začátku svého vzniku, tj. v prvních letech svého působení se firma zaměřovala výhradně na údržbu a správu e-shopů svých zákazníků se specializací na úpravu fotografií e-shopu a v neposlední řadě na zpracovávání a aktualizaci popisků k jednotlivým skladovým položkám daného internetového obchodu. V dalších letech firma postupně svou činnost rozšířila o následující činnosti:  Průzkum trhu,  zpracování marketingové analýzy,  tvorba komunikační strategie,  grafický design,  zprostředkování pronájmu reklamních ploch, zprostředkování výroby reklamních předmětů,  služby v oblasti administrativní správy. Všechny tyto činnosti výrazně pozvedly úroveň poskytovaných služeb. V rámci průzkumu trhu, který je ideálním nástrojem a důležitým faktorem k získání konkurenční výhody pro klienty firma sbírá poznatky pro identifikaci a analýzu trhu, řeší přání, požadavky a očekávání zákazníků, ohraničuje velikost trhu a jeho potenciál. V rámci tvorby komunikační strategie firma vybírá nejlepší strategie se zacílením na současné i potencionální zákazníky. Firma našla klienty i pro oblast grafického designu – navrhuje prezentační materiály, jako jsou letáky, inzeráty, prezentace a reklamní bannery. (Interní informace) Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 28 V současné době – díky VOŠE Zlín a projektu STUDENTI a PRAXE, firma uvažuje o dalším rozšíření činnosti firmy v oblasti tvorby a komplexního řešení webových prezentací, počínaje její tvorbou, navržením grafické a obsahové podoby, navrhnutím možností administrace, přizpůsobením nejnovějším trendům a optimalizací stránek. Prvním klientem, který si nechá kompletně zpracovat webovou prezentaci, spadající pod tento projekt, se stává firma Zdeněk Gazdoš – Elektroservis. 5.1 Charakteristika klienta Firma Zdeněk Gazdoš – Elektroservis vznikla v roce 1992 jako fyzická osoba samostatně výdělečně činná. Předmětem podnikatelské činnosti subjektu jsou elektrické instalace, montáže hromosvodových zařízení, opravy a revize elektrických instalací, hromosvodů a přístrojů. V průběhu prvních let se firma zaměřovala na revize elektrických zařízení a hromosvodů a následné opravy závad z těchto revizí vyplývajících. Postupem času se stěžejní činností staly samostatné elektrické instalace a montáže hromosvodů u novostaveb, rekonstrukce těchto zařízení a instalace elektrických vytápění. V roce 2012 získává firma regionální zastoupení firmy Fenix Jeseník, která vyrábí výrobky pro elektrická vytápění. Firma se stává jak dodavatelem jejich výrobků, tak jejich autorizovanou montážní firmou a servisem. Zdeněk Gazdoš - Elektroservis se rovněž snaží zajišťovat i drobné zakázky a opravy, které jsou pro větší firmy většinou nerentabilní a nemají o ně zájem. (Interní informace) Webové stránky jsou v dnešní době naprostou nutností pro každou firmu. Je to vynikající marketingový nástroj, jak jednoduše propagovat firmu. Toto si uvědomuje i pan Zdeněk Gazdoš, který se rozhodl investovat do propagace na internetu. Klade si za cíl, že díky webovým stránkám bude moci oslovit širší spektrum potencionálních zákazníků. Zvýší se tak i firemní image a obecné povědomí o firmě. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 6 29 ANALÝZA REDAKČNÍCH SYSTÉMŮ Náplní a smyslem této analýzy bude srovnání a zvolení nejvhodnějšího redakčního systému. Analýza vybraných redakčních systémů je jeden z cílů této práce. Použita bude SWOT analýza, kde budou po všech stránkách analyzovány přednosti a nevýhody každého redakčního systému, dále budou určeny příležitosti, které mohou do budoucna pozitivně ovlivnit vývoj daného softwaru či preference potencionálních uživatelů. Také budou zkoumány hrozby, které by se mohli negativně odrazit na popularitě systému a s tím spojený odliv uživatelů. Protože redakčních systémů jako takových je velké množství, zúžil se výběr pouze na freeware redakční systémy a na open source licence. To hlavně z ekonomického hlediska, cílem je vytvořit web s co nejmenšími, nejlépe nulovými náklady na pořízení. Freeware software je zdarma, tudíž náklady na jeho pořízení jsou nulové. Velkou nevýhodou ale je, že neposkytují žádnou bezplatnou podporu od svých vývojářů. Obvykle je tento freeware software poskytován jen v holé, základní verzi a bývá často propojen s placenými službami jako je poradenství, realizace webdesignu či marketingové aktivity spojené profesionální tvorbou stránek. Freeware licence informuje svého uživatele jenom o bezplatném pořízení a užívání, ale bez jakékoliv možnosti ho používat komerčně a bez možnosti zasahovat a upravovat zdrojový kód systému. Na druhé straně software s licencí open source, užívání tohoto softwaru není ničím podmiňováno. Uživatelé tak mají bezplatnou podporu jak ze strany vývojářů daného systému, tak i ze strany komunit, které působí okolo těchto projektů. Existuje řada diskusních fór, která se zabývá touto problematikou, kde jsou ochotni poradit. Celá tato open source licence je zastřešena myšlenou tzv. „svobodného softwaru“, takže se může volně nakládat se zdrojových kódem a používat ho i ke komerčnímu využití. Na základě těchto poznatků a z osobní zkušenosti autora jsou zvoleny tři uživatelsky nejpopulárnější redakční systémy, jsou to: Drupal, Joomla! a WordPress. Dalším důležitým faktorem při volbě těchto redakčních systémů, je česká lokalizace. Všechny tři systémy jsou kompletně přeloženy do českého jazyka. V následujících kapitolách budou jednotlivé redakční systémy kompletně představeny, stanoveny jejich minimální požadavky na instalaci a následně budou rozebrány v zmíněné SWOT analýze. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 30 Aby byl zvolen ten nejlepší systém, který bude vyhovovat všem nárokům, byly výše zmíněné redakční systémy autorem vyzkoušeny. Dle získaných zkušeností bude vybrán jeden systém, který se použije v konečné realizaci. 6.1 Drupal Drupal je open source redakční systém, který napsal v roce 2000 student Dries Buytaert. Ten potřeboval sdílet informace s kolegy a tak vymyslel tento systém. Název Drupal pochází z holandštiny, z anglické výslovnosti slova drop – druppel. Systém umožňuje tvorbu blogů, e-shopů, firemních webů, osobních stránek či internetových časopisů. (Polzer, 2010) Drupal je napsán skriptovacím jazykem PHP a pro ukládání a správu dat používá databázi MySQL a PostgreSQL. (Polzer, 2010) Zdroj: Drupal, ©2014 Obr. 3 Logo redakčního systému Drupal Pro otestování tohoto systému byla použita systémová verze 7.22, která je ke stažení na oficiálních stránkách projektu Drupal.org. Následně byla použita česká lokalizace, která je přístupná na českém webu Drupal.cz. Na internetu je k dispozici i online demo verze tohoto systému k vyzkoušení, ale pro účely tohoto projektu je demo verze nedostačující. Proto byla zvolena varianta kompletní instalace na vlastní hosting a to z toho důvodu, že autor práce chce projít instalací krok po kroku a seznámit se základním ovládáním a administračním prostředím. Instalace probíhá ve třech krocích, nahrání souborů na server, vytvoření databáze a nastavení údajů o stránce. Administrace má mnoho možností Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 31 nastavení, ale po grafické stránce nevypadá příliš pěkně. Vzhled působí jednoduše a příliš stroze. Hardwarové nároky na instalaci redakčního systému Drupal:  Webový server (Apache, IIS, doporučujeme Apache)  PHP verze alespoň 5.2  Alespoň 24MB limit paměti pro PHP, doporučujeme však vyšší  Povolen soubor .htaccess a modul mod_rewrite pro čisté URL  Povolené funkce v PHP: glob(), move_uploaded_file(), copy()  Drupal nevyžaduje vypnutý safe_mode, některé chybné konfigurace však mohou znemožnit nahrávání souborů  MySQL (či PostgreSQL, viz níže) alespoň verze 5.0  PostgreSQL (či MySQL, viz výše) alespoň verze 7.3 6.1.1 SWOT analýza Strengths (Silné stránky)  Velká podpora komunity, včetně IRC kanálů,  snadná instalace,  flexibilní administrační prostředí,  více než 6 000 modulů, které jsou dostupné zdarma, díky nimž se Drupal stává vysoce modulovatelný a rozšiřitelný,  podpora „pěkných“ URL adres,  velké možnosti nastavení veškerých součástí webu. Weaknesses (Slabé stránky)  Pro jednoduché webové stránky může být zbytečně pokročilý,  těžší na pochopení základních funkcí pro začínající uživatele,  nedostatek kvalitních, volně stažitelných šablon,  základní šablony jsou nijaké a téměř nepoužitelné,  systém vytváření šablon je velmi složitý,  problémy s dokumentací k některým modulům. Oppotrunities (Příležitosti)  Přilákat nové uživatele propagací projektů, které běží na systému Drupal, Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín  využití čistě nekomerčního charakteru Drupalu,  využít toho, že je to zadarmo, lidé láká, když je něco dostupné zdarma. 32 Threats (Hrozby)  Nepříliš vzhledově pěkné administrační prostředí, které by mohlo některé uživatele odradit,  nástup nových, vyspělejších technologií, které nahradí stávající technologie,  zastavení vývoje a aktualizací systému, s tím je pojena ztráta obliby a odliv vývojářů či samotných uživatelů. 6.2 Joomla! Joomla je jeden z velice populárních open source redakčních systémů. Systém Joomla! používají jak jednotlivci, malé a střední podniky tak i velké organizace na celém světě. První verze systému vznikla už v roce 2005, ale kořeny sahají ještě dál až do roku 2000. Joomla je nástupce systému zvaný Mambo. (Žmijovský, 2011) Systém Joomla! Je napsán skriptovacím jazykem PHP a využívá databázi MySQL, provozovat ji lze na serveru s Apache nebo s IIS. Od verze 2.5 není závislá jenom na MySQL, ale může se provozovat i na PostgreSQL, Oracle, SQLite. Joomla! podporuje caching, indexaci stránek, RSS, zobrazování novinek, blogy, diskusní fóra, hlasování, kalendář, vyhledávání v rámci webserveru, lokalizace, vícejazyčné verze a mnoho dalších vlastností. Výstupem systému Joomla! Je HTML, CSS kód a JavaScript. (Dexter a Landry, 2013) Zdroj: Joomla!, © 2005 - 2014 Obr. 4 Logo redakčního systému Joomla! Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 33 I u redakčního systému Joomla, byla použita možnost kompletní instalace na vlastní hosting. Použita byla verze 3.2.3 a čeština verze 3.2.3.4. Kompletní instalační balíček je ke stažení na stránkách http://www.joomla.org. Instalace proběhla v několika základních krocích, nahrání souborů na server, vytvoření databáze a zadání základních informací o stránce. Po instalaci je nutné nainstalovat jazykový balíček. Administrační prostředí působilo zprvu velmi složitě a to hlavně díky propracovaným možnostem nastavení, pro začátečníka je orientace velmi složitá. Zvolené ikonové zobrazování v administrační části nepůsobí příliš profesionálně. Hardwarové nároky na instalaci redakčního systému Joomla!:  PHP 4.3.10 (doporučeno 4.4.3) a výše,  MySQL 3.23 a výše,  webový server Apache 1.13.19 a výše s aktivovanými moduly mod_mysql, mod_xml a mod_zlib, popř. rozšířením o mod_rewrite, který je třeba pro práci s „pěknými URL adresami“,  nebo Microsoft IIS s modulem FastCGI, popř. URL Rewrite modulem pro tvorbu „pěkných URL adres“. 6.2.1 SWOT analýza Strengths (Silné stránky)  Velmi aktivní uživatelská komunita,  velké množství dokumentace k dispozici,  snadná instalace systému, pluginů, šablon, jazyků a dalších dostupných komponent,  velké množství rozšiřujících komponent, pluginů, modulů,  kvalitní, graficky zdařilé šablony,  možnost vytvoření mnohajazyčného webu  časté aktualizace systému. Weaknesses (Slabé stránky)  Systém nabízí pouze dvouúrovňovou strukturu,  kvalitní moduly bývají zpravidla placené, nebo mají omezené funkce,  problém s vytvářením tzv. „pěkné“ URL adresy, Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín  34 administrace je pro začátečníky příliš složitá, obsahuje mnoho voleb a možnosti nastavení, chvíli trvá, než se uživatel s tímto administračním prostření sžije, Oppotrunities (Příležitosti)  Přilákat nové uživatelé využitím velké popularity a díky velkému množství rozšiřujících doplňků,  lepší využití komerčních aktivit ke zdokonalení či dalšímu vývoji systému nebo rozšíření pracovního týmu, Threats (Hrozby)  Administrace působí díky použitému „ikonovému, obrázkovému“ stylu až dětsky, může tedy některé uživatele odradit,  nástup nových, vyspělejších technologií, které nahradí stávající technologie,  zastavení vývoje a aktualizací systému, s tím je pojena ztráta obliby a odliv vývojářů či samotných uživatelů. 6.3 Wordpress Wordpress je publikační systém, který jako další free redakční systémy Drupal nebo Joomla, umožňují tvorbu webových stránek. Vzhled stránky a samotný obsah se upravuje skrz vlastní administrační prostředí. Wordpress je vhodný pro všechny druhy webových prezentací. Je přizpůsobitelný jak pro firemní stránku, internetový obchod, tak i pro blog či internetový magazín. Wordpress v dnešní době představuje špičkový a komplexní balíček služeb se vším potřebným pro provoz www stránek. Můžeme ho srovnat i s placenými produkty, které v určitých aspektech i převyšuje. (Šestáková, 2013) Wordpress je napsán skriptovacím jazykem PHP a pro ukládání a správu dat používá databázi MySQL. Je to open source systém pod licencí GPL, je tudíž k dostání zcela zdarma. (Šestáková, 2013) Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 35 Zdroj: Wordpress, ©2014 Obr. 5 Logo redakčního systému WordPress Instalace systému Wordpress se ničím v zásadě neliší od předcházejících systémů. Postupuje se podle stejných kroků. K testování byla použita verze 3.8. a je dostupná na adrese WordPress.com. Administrační prostředí je intuitivní a přehledné. Přímo z administrace stáhneme rozšiřující pluginy a vzhledy stránky. Rozšiřující pluginy jsou hlavní výhodou tohoto systému. Díky nim se dá stránka upravovat podle libosti a přizpůsobit ji tak na blog, firemní stránku, e-shop a další. Další nespornou výhodou je obrovská komunita okolo tohoto systému a časté aktualizace. Hardwarové nároky na instalaci redakčního systému WordPress:  PHP verze 5.2.4 nebo vyšší,  MySQL verze 5.0.15 nebo vyšší,  webový server Apache s jeho modulem mod_rewrite pro tvorbu „pěkných URL“. Zajímavé stránky, které běží na redakčním systému WordPress:  Oficiální stránky zpěvačky Katy Perry - http://www.katyperry.com/  Oficiální web hudební služby Spotify - https://www.spotify.com/  Oficiální stránky amerického basketbalisty Kobe Bryant - http://kobebryant.com/ 6.3.1 SWOT analýza Strengths (Silné stránky)  Obrovská komunita vývojářů,  velké množství bezplatných i placených pluginů,  specializované šablony, které umožňují vytvořit jakýkoliv typ webové prezentace, Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín  snadná instalace,  intuitivní administrační prostředí přístupné i úplným začátečníkům,  nastavení více uživatelů s různými oprávněními,  česká lokace systému,  pravidelné aktualizace, které jsou zdarma 36 Weaknesses (Slabé stránky)  Pro jednoduché webové stránky může být zbytečně pokročilý,  neexistuje žádná oficiální podpora s výjimkou uživatelských fór,  primárně určen pro vytváření blogů. Oppotrunities (Příležitosti)  Možnost využití online verze systému na stránkách WordPress.com,  zaměření se na komunitu blogerů, kterých je hodně a mají samy o sobě velký publikační potenciál,  propojení s Google Analytics, administrátor sleduje údaje o počtu návštěvníků, zdrojích návštěvnosti. Threats (Hrozby)  Vylepšení funkcí konkurenčních platforem,  nástup nových, vyspělejších technologií, které nahradí stávající technologie,  zastavení vývoje a aktualizací systému, s tím je pojena ztráta obliby a odliv vývojářů či samotných uživatelů. 6.4 Vyhodnocení Po vyzkoušení všech výše zmíněných redakčních systému a po sestavení SWOT analýzy každého z nich, byl vybrán jako nejlepší možná varianta, redakční systém Wordpress. Systém Wordpress převyšuje ostatní kandidáty hlavně v jednoduchosti instalace a ve velmi přehledném administračním prostředí. Instalace je v celku rychlá, nezabere mnoho času, postupuje podle přesně daných bodů a vše se nastavuje skrz webový prohlížeč. Administrační prostředí je intuitivní a i naprostý začátečník se v něm zorientuje během krátké chvíle. Nalevo umístěné menu obsahuje vše, co uživatel potřebuje a velmi snadno se v něm prochází. Systém umožňuje vytvoření tzv. „pěkných“ URL adres, které jsou důležité pro optimalizaci pro vyhledávače. Oproti systému Joomla působí po vizuální stránce Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 37 příjemně a budí dojem profesionálního systému. Celá administrace je kompletně přeložena do českého jazyka, to usnadňuje práci těm, kteří neovládají některý ze světových jazyků. Další výhodou je obrovské množství volně stažitelných vzhledů a pluginů, které dopomohou rozšířit funkce stránek. Díky nim se stránka může během krátké chvíle změnit na blog, firemní web nebo e-shop. Okolo systému Wordpress existuje velká skupina fanoušku a uživatelů tohoto systému, jsou založena speciální fóra, kde se věnují nastalým problémům. V neposlední řadě je výhodou i stálý vývoj a častá aktualizace systému, která je nezbytná pro udržení konkurenceschopnosti a také udržení stávajících uživatelů. Pro tento systém hovoří i fakt, že ho využívají na svých stránkách velké světové společnosti, umělci a sportovci. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 7 38 REALIZACE WEBOVÉ PREZENTACE FIRMY V následujících kapitolách bude představena realizace webové prezentace firmy pana Zdeňka Gazdoše od zpracování informační struktury až po finální optimalizaci pro internetové vyhledavače. 7.1 Grafické zpracování 7.1.1 Informační struktura webu Návrh informační struktury webu je naprosto klíčové. Dobře zpracovaná informační struktura je kostra celého webu. Znázorňuje návaznost jednotlivých kategorií a stránek. Struktura je logicky uspořádaná a rozděluje jednotlivé informace na stránky podle různých souvislostí, které jsou mezi sebou nadřízené a podřízené. Zvolena byla stromová informační struktura, která napomáhá uživateli, aby se lépe orientoval v informacích, které mu stránka nabízí. Hlavní stránka Elektroinstalace O firmě Naše služby Ke stažení Reference Hromosvody Revize Elektrické vytápění Inteligentní elektroinstalace Napište nám Kontakt Výkopové práce Zdroj: Vlastní zpracování Obr. 6 Grafické znázornění informační struktury webu Jak je zřejmé z grafického znázornění informační struktury. Menu na hlavní stránce bude obsahovat tyto položky: O firmě, Naše služby, Ke stažení, Reference, Napište nám a Kontakt. Dále pak položka Naše služby bude rozdělena dle poskytovaných služeb a to na: Elektroinstalace, která bude mít pod sebou navazující výkopové práce, Hromosvody, Revize, Elektrické vytápění a Inteligentní elektroinstalace. Popis jednotlivých stránek webové prezentace bude popsán v samostatné kapitole. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 39 7.1.2 Architektura webu Dalším krokem při tvorbě návrhu webové prezentace je navržení architektury webu neboli rozložení stránek, tzv. layout. V tomto případě je postup následující. V horní části stránky je umístěna hlavička webu s logem, které se nachází na levé straně. Pod touto částí je umístěno menu. Zvoleno bylo menu horizontální, které bude obsahovat maximálně 7 položek, viz informační struktura webu. Pokud by jich obsahovalo více, menu by muselo být řešeno jiným způsobem, protože by se vytvořené položky na šířku stránky jednoduše nevešly. Největší část webu zabírá obsah stránky. Na levé straně je umístěn postraní panel, který slouží jako widget area. Widget area je oblast kde se budou zobrazovat další užitečné funkce (ikony sociálních sítí, bannerová reklama, kolonka hledej, RSS kanál). Na úplném konci, ve spodní části stránky je zápatí stránky. Zdroj: Vlastní zpracování Obr. 7 Grafické znázornění webové architektury Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 40 Takovéto rozložení, bude pro každou jednotlivou stránku webové prezentace totožné, kromě stránky úvodní. Toto rozložení je naprosto dostačující, protože stránka má informační charakter. Má za úkol informovat potencionální zájemce o poskytovaných službách. Tudíž není potřeba do stránek implementovat nepotřebné rušící prvky, které by návštěvníka odpoutávaly od obsahu. 7.1.3 Logotyp Součástí práce na realizaci webové prezentace firmy je i zhotovení firemního logotypu, kterým by se firma mohla navenek prezentovat. Logo je nedílnou součástí každé dobré webové stránky, bohužel do současné doby firma nedisponovala žádným logem a tak bylo nutné vytvořit logo nové. Firma neměla žádné konkrétní představy a požadavky, jak by mělo nové logo vypadat a jelikož v minulosti žádné neměli, nemohl se provést ani redesign starého loga. Autor měl tedy volné pole působnosti a mohl tvořit bez omezení. Prvotní nápad byl vytvořit jednoduché, přehledné a čisté logo, které by na první pohled zaujalo, upoutalo pozornost, bylo odlišitelné od konkurence a hlavně aby bylo dobře zapamatovatelné. Samotné logo je dobrý marketingový nástroj. Pokud návštěvníka stránek či zákazníka logo zaujme, zapamatuje si ho. Když ho posléze někde uvidí, rovnou se mu vybaví asociace s konkrétní firmou. Dalším důležitým aspektem je, aby se návštěvník stránek na první pohled z loga dozvěděl, co je hlavní činností firmy. Toho lze jednoduše dosáhnout tak, že si odpovíme na tyto otázky: Kdo? Co? Tyto otázky si klade i návštěvník stránek a dozví se z nich vše, co potřebuje vědět. V tomto konkrétním případě se tedy dozví, že jde o firmu pana Zdeňka Gazdoše, to je odpověď na otázku kdo. Na otázku co, co daná firma vykonává? Odpověď zní, jak je na logo patrné, elektroservis. Pod pojmem elektroservis si můžeme představit velké množství služeb, ale konkretizace už není smyslem loga, ale obsahu stránek. Vytvořeny byly dva různé návrhy loga. První varianta je jednoduší, skládá se ze dvou částí, v horní části dominuje nápis elektroservis, bylo použito stejně velké písmo a odstín tmavě modré barvy. V dolní části loga, se nachází jméno Zdeněk Gazdoš. To je umístěno do barevného pole, které plynule přechází od světle modré barvy, přes zelenou až po žlutou. Vytváří to tak pěkný efekt. Bílá barva písma byla zvolena tak, aby byla v konstantním poměru s pozadím a neztrácela se v něm. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 41 Zdroj: Vlastní zpracování Obr. 8 Realizovaný logotyp pro firmu Zdeněk Gazdoš – Elektroservis, verze I. Druhá varianta se v zásadě od té první na první pohled moc neliší. Rozdílných je jen několik prvků. Horní část s nápisem elektroservis zůstala nezměněná. Dolní část prošla úpravou. Na pravou stranu dolní části byl přidán objekt, který má evokovat vidlici zásuvky. Tím tak dát najevo že se jedná o firmu, která se zabývá elektrem. Barva písma zůstala stejná, změnila se jen barva barevného panelu, které na této variantě přechází ze žluté, přes zelenou až po tmavě modrou barvu. Zdroj: Vlastní zpracování Obr. 9 Realizovaný logotyp pro firmu Zdeněk Gazdoš – Elektroservis, verze II. Logo bylo navrhováno a tvořeno tak, aby jeho využití nebylo omezené pouze na připravovanou webovou stránku, ale aby se dalo použít i na co nejširší spektrum firemních, propagačních předmětů a materiálů. Jednoduše, aby logo vypadalo dobře jak na vizitce, tak i na firemním automobilu. 7.2 Technické zpracování Tato kapitola se bude zabývat zvolením nejvhodnějšího poskytovatele webhostingu v závislosti na zvoleném redakčním systému a také výběrem a registrací nejvhodnějšího doménového jména. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 42 7.2.1 Výběr vhodného webhostingu Jelikož byl jako nejvhodnější redakční systém vybrán WordPress, hledán bude takový webhosting, který bude splňovat minimální požadavky na jeho instalaci. Hledaný webhosting tedy musí nabízet minimálně:  PHP verze 5.2.4 a vyšší  MySQL verze 5.0.15 a vyšší Dále musí být rozhodnuto, zda bude využita placená či neplacená verze webhostingu. Jelikož byl vznesen požadavek o co nejnižší náklady spojené s realizací webové stránky, zvolen byl webhosting neplacený, teda zdarma. Jako nejlepší možné varianty se do užšího výběru dostaly dvě společnosti poskytující bezplatný webhosting. Jsou to servery Pipni.cz a Freehosting Endora.cz. Obě varianty splňují minimální požadavky na instalaci. Srovnání vlastností obou bezplatných webhostingů: Endora.cz Pipni.cz Prostor pro web 2 GB 10 GB Maximální měsíční přenos dat 30 GB 1 TB Neomezeně Neuvedeno 25.000 Neuvedeno ANO NE Neomezeně ANO Podpora IPv6 ANO Neuvedeno Správce souborů ANO NE Možnost registrace domény ANO ANO Zálohování ANO NE Počet domén na účtu Maximální počet souborů Domény 3. řádu FTP přístup Zdroj: Freehosting ENDORA.cz, ©2013; PIPNI, ©2014 Tabulka 1 Vlastnosti webhostingových služeb Po detailním prostudování administračního prostředí a nabízených vlastností obou webhostingů bylo rozhodnuto, že se využijí služby firmy Endora.cz a to hlavně díky přehlednějšímu administračnímu prostředí a nabízeným službám. Zejména pak hrála velkou roly možnost vytvoření domény 3. řádu. Nevýhodou Endory oproti serveru Pipni.cz je menší prostor pro web a měsíční přenos dat. Nabízené kapacity jsou ale natolik velké, že pro náš účel plně vyhovují, jsou tudíž dostatečné. Kompletně nainstalovaný redakční systém nezabere více než 50 MB na disku. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 43 Vlastnosti PHP a MySQL serveru Endora.cz Zde je kompletní přehled vlastností PHP a MySQL, které jsou nezbytné pro nainstalování a chod zvoleného redakčního systému WordPress. Pro připravované stránky byla zvolena varianta Free, tedy na přiloženém obrázku třetí sloupeček zprava. Obrázek znázorňuje, o jakou verzi obou služeb se jedná, velikost paměti a databáze a další funkce. Verze Plus a Mega jsou placené verze. Cena verze Plus bez domény na jeden rok se pohybuje kolem 230,- Kč s DPH. Verze Mega je o něco dražší, tam se cena pohybuje při stejných podmínkách na jeden rok, bez domény okolo 1.000,- Kč s DPH. Tyto dvě placené varianty nabízení oproti variantě Free mnohanásobně větší paměť a kapacitu databáze. Zdroj: Freehosting ENDORA.cz, © 2013 Obr. 10 Vlastnosti PHP a MySQL poskytované serverem Endora.cz 7.2.2 Výběr vhodné domény Výběr vhodné domény jde ruku v ruce s výběrem kvalitního webhostingu. Nejlepší možná situace je, když poskytovatel webhostingu nabízí i registraci domény. V předešlé kapitole byl zvolen nejlepší webhosting od společnosti Endora.cz. Jeden z faktorů, proč byla zvolena právě tato společnost je, že poskytují nejenom webhostingové služby ale i možnost registrace domény. Proto bylo rozhodnuto, že bude využito stejné společnosti pro Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 44 zaregistrování domény. Odpadají tedy starosti s hledáním jiné společnosti poskytující tyto služby. Endora.cz má v nabídce možnost registrace domény 2. a 3. řádu. Doména 3. řádu je zdarma, doména 2. řádu .cz vyjde zhruba na 240,- Kč s DPH na jeden rok. V rámci minimalizací celkových nákladů byla zvolena prozatímní možnost zaregistrování domény 3. řádu. Do budoucna se však počítá s tím, že se doména 2. řádu koupí a celý web se přenese tam. V návaznosti na tyto fakta byl sestaven seznam potencionálních doménových jmen. Byla vybrána koncovka .cz jako zástupce domény 2. řádu a .8u.cz jako zástupce domény 3. řádu. Název se sestavoval z kombinace jména majitele firmy, Zdeněk Gazdoš a hlavním oborem činnosti, což je elektro či elektroservis. Hledal se tedy takový název, který by obsahoval zmíněnou kombinaci a aby toto jméno bylo volné jak na doméně .cz, tak i .8u.cz a to z důvodu aby při zaregistrování placené domény nevznikl problém, že daná doména už bude obsazena. V následující tabulce je seznam doménových jmen, která splňují stanovená kritéria. Volné domény k 9.4.2014: .8u.cz .cz gazdoselektro gazdoselektro gazdos-elektro gazdos-elektro gazdos-elektroservis gazdos-elektroservis gazdoselektroservis gazdoselektroservis elektrogazdos elektrogazdos elektro-gazdos elektro-gazdos elektroservis-gazdos elektroservis-gazdos elektroservisgazdos elektroservisgazdos zdenekgazdos zdenekgazdos zdenek-gazdos zdenek-gazdos gazdoszdenek gazdoszdenek gazdos-zdenek gazdos-zdenek Zdroj: Vlastní zpracování Tabulka 2 Možnosti doménových jmen Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 45 Po důkladném zvážení všech možných variant a po dohodě s panem Gazdošem bylo zvoleno jméno gazdoselektro. Přihlédnuto také bylo k tomu, že se do budoucna počítá se založením velkoobchodu a tvorbou e-shopu. Na spodním obrázku je zobrazen objednávkový formulář, přes který probíhá kontrola, zda je požadovaná doména se zvolenou koncovkou k dispozici. Na obrázku jsou také zachyceny jaké koncovky 3. řádu Endora.cz nabízí. Na stejném snímku pod částí věnované doménám se nachází sekce se třemi volitelnými programy hostingu. Na samotném konci se vypočítává cena jednotlivých navolených položek. Zdroj: Vlastní zpracování Obr. 11 Objednávkový formulář Endora.cz 7.3 Redakční systém Wordpress 7.3.1 Instalace Jako první krok instalace musí proběhnout stažení redakčního systému WordPress. Nejnovější verze systému je dostupná na oficiálních stránkách http://wordpress.org. Na této stránce je k nalezení i celá řada rozšíření tzv. pluginy. Česká lokalizace Wordpressu je k dispozici na stránkách http://cs.wordpress.org. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 46 7.3.1.1 Nahrání systémových souborů na webhosting Wordpress je k dispozici ke stažení ve formátu. ZIP. Po stáhnutí tohoto souboru na pevný disk počítače je nutné ho rozbalit a následně nahrát všechny rozbalené soubory na webhosting. K tomu bude nejlepší využít FTP klienta, např. Total Commander. Po spuštění FTP klienta zadáme přístupové údaje od našeho webhostingu. Adresu serveru, přihlašovací jméno a heslo. Veškeré tyto údaje byly získány při registraci webhostingu od poskytovatele. S největší pravděpodobností všechny potřebné údaje přišly na zadaný email při zřizování webhostingu. Dále je možné tyto informace zjistit v administrační části hostingu. Rozbalené soubory (wp-admin, wp-content, atd.) jsou nahrány na webhosting do kořenového adresáře Kořenový adresář je hlavní prostor, který se zobrazí po přihlášení do FTP. V některých případech může kořenový adresář obsahovat další složku nazvanou www nebo web. V tom případě je nezbytné nahrát soubory tam. 7.3.1.2 Vytvoření MySQL databáze Jak už bylo popsáno v požadavcích na webhosting, systém Wordpress potřebuje ke svému chodu MySQL databázi a to v minimální verzi 5.0.15. Ta musí být vytvořena v administračním prostředí webhostingu. Zdroj: Vlastní zpracování Obr. 12 Ukázka administračního prostředí Endora.cz – MySQL Postup vytvoření databáze na serveru Endora.cz je jednoduchý. V pravém sloupci je kolonka Databáze MySQL a dále stačí stisknout tlačítko Rychlé založení databáze a Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 47 uživatele. Databáze se nám automaticky vytvoří a údaje o databázi přijdou na e-mail. Vytvoření databáze může poskytovateli webhostingu trvat pár minut. Email bude obsahovat tyto údaje:  Název databáze  Přihlašovací jméno do databáze  Heslo do databáze  Hostitel, databázový server Výše zmíněný postup platí pro server Endora.cz. Vytvoření databáze se liší v závislosti na poskytovateli hostingu. 7.3.1.3 Instalace skrz webové rozhraní Již byla vyřešena otázka stažení .ZIP souboru, nahrání rozbalených souborů na náš webhosting a vytvoření nové MySQL databáze. Dalším krokem je samotná instalace systému WordPress skrze webové rozhraní internetového prohlížeče. V prvním kroku byl otevřen internetový prohlížeč a zadána URL adresa naší domény do vyhledávače. V tomto případě to bude konkrétně vypadat takto: http://www.gazdoselektro.8u.cz. Stránka se načte a posléze se objeví tabulka s informací, která říká, že není vytvořen soubor nazvaný wp-config.php. Zdroj: Vlastní zpracování Obr. 13 Vytvoření souboru wp_config.php Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 48 Pokud se tato tabulka nezobrazí je ve většině případů chyba ve špatném nahrání souborů na webhosting. Nějaký soubor chybí nebo je poškozen. Když se toto stane, proces nahrání rozbalených souborů na server musí být opakován. Pokud je vše v pořádku stisknutím tlačítka Vytvořit konfigurační soubor přejdeme k dalšímu kroku. Zobrazí se další tabulka, která upozorňuje, jaké informace je nutné znát. Jedná se o informace ohledně MySQL databáze. Zobrazí se další, v pořadí třetí tabulka, kam patří doplnit údaje o MySQL databázi. Název databáze, uživatelské jméno, heslo, databázový server, předpona tabulek. První tři položky tabulky jsou jasné. Do kolonky databázový server se uvádí localhost. Poslední kolonka se nemění, tam je už přednastaveno wp_. Po vyplnění všech nezbytných údajů a po stisknutí tlačítka Potvrdit se databáze vytvoří a propojí. Zdroj: Vlastní zpracování Obr. 14 Připojení k MySQL databázi Pokud je databáze správně vytvořena a propojena se systémem Wordpress zobrazí se text s gratulací, že byla úspěšně splněna další částí instalace a že Wordpress komunikuje s naší databází. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 49 V dalším kroku se musí vyplnit následující informace:  Název webu – Uveďte název, jak se bude jmenovat webová stránka. V tomto případě to je Zdeněk Gazdoš – Elektroseris. Tento název se bude zobrazovat i např. v záložkách.  Uživatelské jméno – Jedná se zde o jméno, kterým se správce webu bude přihlašovat do administrační části webu. Uživatelské jméno je standardně nastaveno na admin, ale není to povinnost. Je doporučeno zvolit jméno jiné, než je primárně nastaveno.  Heslo – V případě nevyplnění této kolonky s heslem, systém sám, automaticky vygeneruje heslo a zašle ho na emailovou adresu.  E-mail – Do této kolonky se uvádí platný email. Na tento email totiž přijdou veškeré přihlašovací údaje to i v případě že zapomenete své heslo.  Viditelnost – Toto nastavení se týká toho, zda bude web viditelný pro vyhledávače hned po dokončení instalace Wordpressu, či nikoli. Viditelnost se může kdykoli změnit. Dobré je tedy toto pole prozatím nezaškrtávat a povolit viditelnost až v okamžiku, kdy bude webová stránka hotova. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 50 Zdroj: Vlastní zpracování Obr. 15 Vyplnění údajů o webové stránce Tímto posledním krokem je instalace úspěšně dokončena. Následuje přihlášení do administrace systému Wordpress pomocí zadaných údajů z předešlého kroku. Přihlášení do administračního prostředí systému http://www.gazdoselektro.8u.cz/wp-login.php. je možné také z adresy Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 51 7.3.2 Použité pluginy 7.3.2.1 Akismet Plugin jménem Akismet slouží jako spamový filtr komentářů. Pokud je tento plugin aktivní, je schopen zadržet komentářový spam, aby se nezobrazoval na webových stránkách. Akismet je už v redakčním systému Wordpress verze 3.8.1. přeinstalovaný. Abychom se už dále nemuseli bát nevyžádaných spamových komentářů, musíme Akismet nejdříve aktivovat. Aktivace se provádí tak, že si vyžádáme svůj unikátní API klíč. To není nic jiného než registrace na oficiálních stránkách Akismetu. Požadují emailovou adresu, uživatelské jméno a heslo. Po vyplnění těchto údajů se zobrazí unikátní 12ti místný API klíč, který stačí zadat v administrační části Wordpressu do pluginu Akismet a aktualizovat nastavení. Součástí tohoto pluginu je i podrobná statistika zachyceného spamu, kde jsou podrobně sledovány měsíce a dny s nejvíce zachycenými spamovými komentáři. 7.3.2.2 Contact Form 7 Contant Form 7 slouží k vytváření jednoduchých webových formulářů, bez kterých se žádná webová stránka neobejde. Tento formulář slouží výhradně návštěvníkům stránek a umožňuje jim zkontaktovat se s provozovatelem stránek, vyjádřit svůj názor na stránky samotné, popřípadě si skrz tento webový formulář objednat produkt či službu. Pro stránky GazdosElektro.8u.cz byl zvolen jednoduchý formulář, který slouží převážně ke komunikaci mezi potencionálním klientem a firmou. Formulář je umístěn na stránce Napište nám, odkaz na tuto stránku webu nalezneme v hlavním menu. Je tak dobře dostupná a uživatel ji nemusí zdlouhavě hledat. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 52 Zdroj: Vlastní zpracování Obr. 16 Plugin Contact Form 7 – Ukázka tvorby kódu formuláře Samotné nastavení toho pluginu není nijak složité. Začneme u formuláře. Musíme si rozmyslet, co všechno tam chceme vlastně dát a pokud nemáme konkrétní představu, můžeme se podívat co je všechno v nabídce pod rozbalovacím tlačítkem generovat kód. Tam si jednoduše vybereme požadovanou funkci a tu nastavíme podle našich požadavků. Jak je zřejmé z obrázku autor práce zvolil ten nejjednodušší formulář s pěti funkcemi. Vaše jméno a předmět zprávy je vybráno textové pole. U Váš email je zvolena funkce email, Vaše zpráva funkce textová oblast a nakonec tlačítko odeslat pomocí funkce submit. To by bylo k základnímu vytvoření formuláře. Další nastavení se týká toho, aby zprávy od návštěvníků vůbec přišli a na správný email. V první kolonce Komu, se nastavuje email, kam nám mají zprávy chodit. V dalších kolonkách použijeme kód, který jsme si vytvořily už při vytváření formuláře. Konkrétně se jedná o vaše jméno, váš email a předmět. Pokud jeden email nestačí, stačí odkliknout zaškrtávací políčko druhý email a zprávy z webového formuláře budou současně chodit na jeden i druhý email. Nastavení tohoto druhého emailu je naprosto totožné s tím prvním s jedinou změnou. Kolonka komu musí obsahovat jiný email, nesmí se shodovat s prvním. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 53 Zdroj: Vlastní zpracování Obr. 17 Plugin Contact Form 7 – Náhled hotového formuláře 7.3.2.3 Google Maps Ready Plugin Google Maps Ready, je velmi zjednodušeně řečeno nástroj pro vložení interaktivní mapy přímo na vaše stránky. Návštěvník stránek tak může hned vidět kde má vaše firma pobočku či sídlo, což ze samotné adresy není hned zcela zřejmé. V první řadě je nutné založit novou mapu a pojmenovat ji. Dále je pak popis mapy, co na této konkrétní mapce má návštěvník stránek vlastně hledat. Také bychom si měli ujasnit, kam mapu umístíme, do jaké části webu a kolik na ni máme místa. V následujícím kroku totiž musíme zvolit šířku a výšku mapy. Číselné údaje jsou zadávány v pixelech, popřípadě v procentech. Další nastavení se týká toho, jak samotná mapa bude na stránkách vypadat. K dispozici jsou čtyřmi druhy map, konkrétně je to mapa hybridní, satelitní, reliéfní a klasická mapa. Následným krokem v nastavení je, zda bude umožněno návštěvníkům stránky volně manipulovat s mapou. K tomu slouží políčka Enable Zoom/Control Panel Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 54 a Enable Mouse Zoom/Control Panel. A nakonec si můžeme vybrat, v jakém jazyce bude zobrazená mapa s návštěvníkem komunikovat. Můžeme si zvolit z více jak 30ti světových jazyků. Zdroj: Vlastní zpracování Obr. 18 Plugin Google Maps Ready – Nastavení mapy a markeru Natavení mapy v našem případě vypadá takto, název mapy je Zdeněk Gazdoš – Elektroservis, popisek Kde nás najdete. Mapa je umístěna na stránce kontakt, pod adresou firmy a může využít celou šířku stránky, proto je šířka a výška zvolena na 600px a 250 px. Typ mapy zvolen normální s možností změny na hybridní mapu. Návštěvník stránek může s mapou libovolně pohybovat a také konkrétní místo libovolně přibližovat a oddalovat. Může k tomu použít postraní panel (přiblížit, oddálit), nebo použít kolečko myši. Základní přiblížení mapy je nastaveno na bodu 12. Mapa se zobrazuje kompletně v českém jazyce. Samotná mapa by byla k ničemu, proto v druhém kroku musíme vytvořit marker. Marker je volně přeloženo v tomto případě bod na mapě, který vyznačuje námi určené místo. Nový marker pojmenujeme a popíšeme. Tyto informace se zobrazí po najetí myší na příslušný Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 55 bod. Z názvu je možno také udělat odkaz, pokud by mapa byla zobrazena i mimo naši webovou stránku, kliknutím na název by nás odkaz přesměroval na náš web. Dalším krokem je výběr ikonky markeru. K dispozici je velké množství ikonek, nebo je tu i možnost vytvořit a nahrát vlastní. Poslední a nejdůležitějším bodem je umístění markeru do mapy. Stačí tedy do kolonky Marker Addres vepsat požadovanou adresu, v našem případě Mysločovice 15, 763 01 Mysločovice, Czech Republic, popřípadě GPS souřadnice. Marker se automaticky přiřadí k dané adrese. Po splnění všech výše zmíněných bodů, plugin vygeneruje, podle zadaných informací krátký kód, který vypadá zhruba takto: [ready_google_map id='1']. Tento krátký kód umístíme do zvolené stránky. Zdroj: Vlastní zpracování Obr. 19 Plugin Google Maps Ready – Máhled stránky s interaktivní mapou Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 56 7.3.2.4 Google XML Sitemaps XML Sitemaps je vygenerovaný soubor, který usnadňuje robotovy vyhledávače, ať googlu, nebo seznamu, snadněji procházet vytvořené stránky a lépe je tak indexovat. Pokud budeme mít vygenerovanou sitemapu, nastavení priorit a aktualizací, tak robot vyhledávačů bude vědět, že se má na tu konkrétní stránku vracet pro nový obsah třeba každý den, jednou za měsíc, nebo rok dle vlastního nastavení Umístění a pojmenování sitemapy můžeme zvolit vlastní, nebo zachovat automatické. Zvolena byla automatická detekce. Název je tedy sitemap.xml a je dostupná z adresy http://www.gazdoselektro.8u.cz/sitemap.xml, kde si ji můžeme prohlednout. XML sitemap pro stránky firmy Zdeněk Gazdoš zahrnuje titulní stránku, statické stránky, všechny příspěvky a archivy. Další možnosti nastavení mohou obsahovat rubriky, stránky autorů nebo stránky štítků. Toto nastavení ale nebylo zvoleno. Dále je nezbytné nastavit frekvenci navštěvování stránek roboty vyhledávačů. Zde jsou možnosti od nepřetržitě, přes denně, měsíčně, až po nikdy. Posledním krokem je volba priority, zde je škála nastavena od nejnižší možné hodnoty 0,0 až po tu nejvyšší hodnotu 1,0. Nejvyšší hodnotu samozřejmě má titulní strana webu. Nastavené frekvence a priority jsou pro lepší přehled zobrazeny na obrázku. Zdroj: Vlastní zpracování Obr. 20 Plugin Google XML Sitemap – Ukázka nastavení Jak je zobrazeno na obrázku, v prvním sloupci je odkaz na stránku, v druhém sloupci je zobrazena nastavená priorita stránky, ve třetím sloupci je frekvence zobrazování stránky a v posledním sloupci je zobrazeno datum poslední změny na dané stránce. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 57 7.3.3 SEO optimalizace SEO optimalizace je na webu http://gazdoselektro.8u.cz řešena pomoci velmi oblíbeného pluginu WordPress SEO od tvůrce, který se zabývá touto problematikou, jménem Joost de Valk. Tato varianta byla zvolena proto, že je přizpůsobena přímo pro redakční systém Wordpress a obsahuje všechny nezbytné nástroje pro kvalitní optimalizaci. Pomocí Wordpress SEO pluginu jsou nastaveny základní prvky SEO optimalizace tj. title, description a keywords nejen pro celou webovou prezentaci, ale i pro jednotlivé stránky a příspěvky. Po úspěšném nainstalování pluginu se v administrační sekci redakčního systému v nabídce zobrazí záložka SEO. Tam se nastavují základní prvky pro celý web, titulek hlavní stránky, popis hlavní stránky a klíčová slova. Na stejné stránce zadáváme informace o webmaster tools. Pomocí těchto nástrojů je možné sledovat, skrze jaké klíčová slova se návštěvníci na web dostali. Verifikace webu proběhla pro Google a Bing Webmaster Tool a ověřovací meta hodnoty byly zapsány do příslušných kolonek. Další možností jak optimalizovat web je optimalizace jednotlivých stránek a příspěvků. Wordpress SEO plugin se používá jak při tvorbě nových stránek, tak úpravě těch stávajících. Nastavení prvků optimalizace je k nalezení u jednotlivých stran webu pod editorem psaní textu. Ke každé jednotlivé stránce, musíme nastavit hlavní klíčové slovo, SEO titulek, meta popis a meta klíčová slova. Jak je zřejmé z obrázku, v horní části je náhled. Ten slouží k tomu, abychom si mohli prohlédnout, jak bude vypadat odkaz na stránku při vyhledávání. Při vyplňování jednotlivých položek se provádí automatická aktualizace tohoto náhledu v reálném čase. Dále je nastavení hlavního klíčového slova, které vystihuje stránku. Zvolený obrázek pochází ze SEO nastavení stránky O firmě. Po vyplnění hlavního klíčového slova, plugin automaticky zkontroluje, zda se nachází v nadpisu článku, titulku stránky, URL adrese, obsahu a v meta popisu. Pokud ano zvýrazní položky zeleně a pokud se tam klíčové slovo nenachází, označí ji červeně. Další položky jsou SEO titulek a meta popis, pokud jsou tyto položky prázdné plugin vygeneruje vlastní, tak jak je zobrazeno v náhledu. K tomu používá název stránky, název webu a obsah dané stránky. V záložce analýza stránky se zobrazují stanovená kritéria pro dobrou optimalizaci a jejich splnění. Zda dané klíčové slovo již není použito, jestli se na stránce nachází obrázek a má Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 58 vyplněná alt tag, četnost výskytu klíčového slova v textu, použití podnadpisů (H2, H3) a podobně. Zdroj: Vlastní zpracování Obr. 21 SEO optimalizace Další možnosti nastavení u jednotlivých stránek je možnost optimalizace popisků pro sdílení zobrazujících se na sociálních sítích. Prozatím je podporován Facebook a Google +. Toto nastavení se provádí u každé stránky na webové prezentaci a u každého napsaného, publikovaného článku. 7.3.4 Popis obsahu jednotlivých stránek Hlavní stránka Hlavní stránka je úvodní stránkou celého webu. Na hlavní stránce dominuje velký horizontální slider, kde se zobrazují nejnovější novinky. Slider se skládá z velkého úvodního obrázku a krátkého popisku k článku. Pod zmiňovaným sliderem může návštěvník naleznout krátké přivítání a informace o firmě. Zhruba uprostřed stránky se nachází hlavní textová oblast, kde se zobrazují publikované články. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 59 O firmě Na stránce pojmenované O firmě, nalézá návštěvník zajímavé informace z historie firmy, jako je rok založení, co je předmětem podnikatelské činnosti subjektu, jaké služby poskytuje a vývoj poskytovaných služeb, ale i další významné události, které jsou nedílnou součástí firmy. Naše služby V sekci Naše služby návštěvník nalezne popis jednotlivých poskytovaných služeb. Každá poskytovaná služba má svoji stránku, kde je detailněji rozebráno, co se za danou službou skrývá. Jinak řečeno, sekce Naše služby slouží jako odkazovník na konkrétní stránky jednotlivých služeb. Jedná se o stránky:  Elektroinstalace o Výkopové práce  Hromosvody  Revize  Elektrické vytápění  Inteligentní elektroinstalace Ke stažení Návštěvníci zde mohou najít například ceník, katalog produktů, nebo aktuální katalog produktů společnosti Fenix, s.r.o., jehož je firma Zdeněk Gazdoš – Elektroservis autorizovaným prodejcem ve Zlínském kraji. Všechny dokumenty jsou uloženy na soukromém webhostingu. Návštěvník stránek má možnost si zvolený dokument stáhnout rovnou do svého počítače, popřípadě si ho ve formátu .pdf jen prohlédnout. Tato možnost je ale podmíněna tím že návštěvník musí mít ve svém počítači nainstalovanou aktuální verzi, prohlížeče dokumentů, programu Adobe Reader. Reference Reference jsou velmi důležité. Slouží ke shrnutí doposud odvedených prací firmy. Potencionální zákazník se tak může přesvědčit o minulých zakázkách, popřípadě kontaktovat samotné firmy a dotázat se na kvalitu odvedené práce. Rozložení samotných referencí je následující. U levého okraje stránky je umístěno logo zákazníka. Od loga Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 60 napravo je název firmy a pod ním stručný popis práce, která byla vykonána. Další reference jsou řazeny pod sebe podle data vykonání. Napište nám Stránka Napište nám slouží k jednoduchému a hlavně rychlému kontaktu mezi návštěvníkem stránek, potencionálním zákazníkem a firmou. Pokud má návštěvník jakýkoli dotaz či připomínku, není nic jednoduššího než zadat své jméno, emailovou adresu, předmět zprávy a samotnou zprávu do příslušných kolonek na stránce a zmáčknutím tlačítka odeslat odešle návštěvník email s jeho dotazem příslušnému člověku ve firmě. Celý tento formulář je vytvořen díky pluginu Contact Form 7. O všech použitých pluginech se autor práce podrobněji zmiňuje v samostatné kapitole. Kontakt Na závěrečné stránce jménem kontakt se nachází veškeré důležité informace o firmě, jako jsou kontaktní údaje na majitele firmy, adresa sídla firmy, IČO a DIČ, telefon, emailová adresa a www stránky. Pod těmito základními údaji je umístěna interaktivní mapa od společnosti Google Maps, odkazující pro lepší představu o poloze sídla firmy. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 8 VÝSLEDNÁ PODOBA STRÁNEK Zdroj: Vlastní zpracování Obr. 22 Výsledná podoba realizované webové prezentace 61 Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 9 62 ZHODNOCENÍ EKONOMICKÉHO HLEDISKA Jeden z cílů této práce, bylo vytvořit webovou stránku s co možná nejmenšími náklady na realizaci. Existuje velké množství subjektů, které si nemohou dovolit investovat obrovské finanční obnosy do propagace na internetu. Avšak v dnešní době je k dispozici velké množství bezplatných nástrojů, které se dají použít a tím tak náklady minimalizovat. Celkové náklady na realizaci webové prezentace firmy pana Zdeňka Gazdoše jsou nulové, pokud nezapočítáme čas, který byl tvorbě věnován. Použit byl bezplatný redakční systém, pluginy, webhosting. Zdarma byla i registrace domény 3. řádu a drobné grafické práce a tvorba logotypu. Ne všechny volně dostupné nástroje jsou tak kvalitní jako ty placené, proto je dobré vynaložit alespoň minimální náklady na webhosting a doménu druhého řádu. Jsou to náklady v řádech stokorun za rok. V případě grafických služeb je o to něco nákladnější, cena se odvíjí od propracovanosti designu a složitosti zpracování. Doporučené minimální výdaje:  Webhosting – za vlastní webhosting s dostatečnou kapacitou přibližně 300,- Kč za rok.  Doména druhého řádu s koncovkou .cz okolo 250,- Kč za rok.  Vlastní grafický design stránek – profesionální zpracování visuální stránky webu se pohybuje od 1 500,- Kč.  Další grafické práce – v případě potřeby další grafické tvorby (logo) jsou ceny stanoveny okolo 1 500,- Kč. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 63 ZÁVĚR Hlavním cílem absolventské práce bylo navrhnout a vytvořit funkční webovou prezentaci pro firmu pana Zdeňka Gazdoše s ohledem na ekonomickou stránku celého projektu. K tomu byli využiti bezplatné nástroje, které jsou v současné době na internetu k dispozici. Tím se minimalizovali pořizovací náklady na celkovou realizaci webové prezentace. V teoretické části byla popsána historie a vývoj Internetu. Dále byly představeny základní služby, které nám Internet nabízí a detailněji byla popsána nejpoužívanější a nejznámější služba Word Wide Web. Následovala část, kde se autor práce snaží čitatelům objasnit vše o problematice webových stránek se zaměřením na webdesign, technické zpracování a obsahovou stránku. Následně byly popsány on-page a off-page faktory pro správnou optimalizaci webových stránek. V praktické části byla představena AZ Reklama a její klient Zdeněk Gazdoš – Elektroservis. Následuje analytická část, kde jsou analyzovány vybrané redakční systémy pomocí SWOT analýzy. Po pečlivém vyhodnocení byl jako nejlepší redakční systém, který splňuje potřeby, vybrán systém Wordpress. Dále byli porovnáváni poskytovatelé hostingových služeb a následovala volba nejlepších variant na doménové jméno. Dalším bodem v praktické části byla samotná realizace webové prezentace. V práci byl popsán kompletní postup při realizaci a to od počátečního návrhu, přes instalaci systému Wordpress, představení použitých pluginů až po finální optimalizaci pro vyhledávače. Stránky jsou dostupné na adrese http://www.gazdoselektro.8u.cz/. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 64 SEZNAM POUŽITÉ LITERATURY 1. ADAPTIC, ©2005 – 2014. Adaptic.cz [online]. [cit. 2014-03-28]. Dostupné z: http://www.adaptic.cz/. 2. BAAR, Ondřej, Články.tez.cz, 2009. Copywriting – Píšeme text pro webové stránky [online]. [cit. 2014-03-31]. Dostupné z: http://clanky.tez.cz/marketing/sem. 3. DEXTER, Mark a Louis LANDRY, 2013. Mistrovství v Joomla!: kompletní průvodce vývojáře. 1. vyd. Brno: Computer Press, 559 s. ISBN 978-80-251-3740-6. 4. DOVER, Danny a Erik DAFFORN, 2012. SEO: optimalizace pro vyhledávače profesionálně. Vyd. 1. Brno: Zoner, 400 s. ISBN 978-80-7413-172-1. 5. H1.cz, ©2005 – 2014. Off-page faktory [online]. [cit. 2014-03-31]. Dostupné z: http://www.h1.cz/znalosti/h1-cz-pro-vas/slovnicek-pojmu/off-page-faktory/. 6. HEROUT, Tomáš, HelpMark [2013]. Klíčová slova [online]. [cit. 2014-03-31]. Dostupné z: http://www.helpmark.cz/seo/klicovaslova. 7. HOLČÍK, Tomáš et al., 2003. 1001 tipů a triků pro WWW stránky. Brno: Computer Press. ISBN 80-7226-756-6. 8. Interní zdroje firmy. 9. JANOVSKÝ, Dušan, Jak psát web, 2013. Titulek stránky. [online]. [cit. 2014-0331]. Dostupné z: http://www.jakpsatweb.cz/titulek.html. 10. KRČMÁŘ, Michal, Objevit.cz, 2013. URL (Uniform Resource Locator) online]. [cit. 2014-03-31]. Dostupné z: http://objevit.cz/url-uniform-resource-locatort18318. 11. KRUG, Steve, 2006. Web design: nenuťte uživatele přemýšlet!. 2. aktualiz. vyd. Brno: Computer Press, 167 s. ISBN 80-251-1291-8. 12. KUBÍČEK, Michal a Jan LINHART, 2010. 333 tipů a triků pro SEO. Brno: Computer press, 262 s. ISBN 978-80-251-2468-0. 13. LUKÁŠ, Jiří, Super Svět, 2005. Co je to redakční systém? [online]. [cit. 2014-0404]. Dostupné z: http://www.supersvet.cz/view.php?cisloclanku=2005050501. 14. MALÍK, Antonín a Radek SALAČ, HISTORIE A VÝVOJ INFORMAČNÍCH TECHNOLOGIÍ, 2004. Historie a vývoj internetu [online]. [cit. 2014-03-31]. Dostupné z: http://encit.wz.cz/internet/web/internet%20historie.html. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 65 15. MUSIL, Marek, Historie sítě Internet, 2003. Co to je Internet. [online]. [cit. 201403-31]. Dostupné z: http://ihistory.webzdarma.cz/chap/coToje.php. 16. MUSIL, Marek, Historie sítě Internet, 2003. Přehled služeb Internetu [online]. [cit. 2014-03-31]. Dostupné z: http://ihistory.webzdarma.cz/chap/sluzbyInternetu.php. 17. POLZER, Jan, 2010. 333 tipů a triků pro Drupal. Vyd. 1. Brno: Computer Press, 264 s. ISBN 978-80-251-2942-5. 18. ŘEZNÍČEK , Josef, Včeliště.cz, 2013. Alternativní popisek obrázku v SEO [online]. [cit. 2014-03-31]. Dostupné z: http://www.vceliste.cz/alternativnipopisek-obrazku-v-seo/. 19. STUCHLÍK, Petr a Martin DVOŘÁČEK, 2000. Marketing na Internetu. 1. vyd. Praha: Grada, 247 s. ISBN 80-7169-957-8. 20. ŠESTÁKOVÁ, Lucie, 2013. WordPress: vlastní web bez programování. 1. vyd. Brno: Computer Press, 248 s. ISBN 978-80-251-3832-8. 21. VAN DUYNE, Douglas K, Jason I HONG a James A LANDAY, 2005. Návrh a tvorba webů: vytváříme zákaznicky orientovaný web. Vyd. 1. Brno: CP Books, 672 s. ISBN 80-251-0508-3. 22. ZRALÝ, Jiří, Vše o hostingu, 2010. Co je to webhosting? [online]. [cit. 2014-03-31]. Dostupné z: http://vseohostingu.cz/webhosting. 23. ZRALÝ, Jiří, Vše o hostingu, 2011. Doména [online]. [cit. 2014-03-31]. Dostupné z: http://vseohostingu.cz/domena. 24. ŽMIJOVSKÝ, Marek, 2011. 333 tipů a triků pro systém Joomla!. Vyd. 1. Brno: Computer Press, 272 s. ISBN 978-80-251-3230-2. Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK DNS Domain Name Server FTP File Transfer Protocol HTML HyperText Markup Language HTTP HyperText Transfer Protocol IRC Internet Relay Chat MySQL My Structured Query Language PHP Hypertext Preprocessor SEO Search Engine Optimalization SWOT Strengths, Weaknesses, Opportunities, Threats TCP/IP Transmission Control Protocol / Internet Protocol URL Uniform Resource Locator WWW Word Wide Web 66 Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 67 SEZNAM OBRÁZKŮ Obr. 1 Grafické znázornění řádů domény. ........................................................................... 17 Obr. 2 Logo – AZ Reklama ................................................................................................. 27 Obr. 3 Logo redakčního systému Drupal ............................................................................. 30 Obr. 4 Logo redakčního systému Joomla! ........................................................................... 32 Obr. 5 Logo redakčního systému WordPress ...................................................................... 35 Obr. 6 Grafické znázornění informační struktury webu ...................................................... 38 Obr. 7 Grafické znázornění webové architektury ................................................................ 39 Obr. 8 Realizovaný logotyp pro firmu Zdeněk Gazdoš – Elektroservis, verze I. ................ 41 Obr. 9 Realizovaný logotyp pro firmu Zdeněk Gazdoš – Elektroservis, verze II. .............. 41 Obr. 10 Vlastnosti PHP a MySQL poskytované serverem Endora.cz ................................. 43 Obr. 11 Objednávkový formulář Endora.cz......................................................................... 45 Obr. 12 Ukázka administračního prostředí Endora.cz – MySQL ........................................ 46 Obr. 13 Vytvoření souboru wp_config.php ......................................................................... 47 Obr. 14 Připojení k MySQL databázi .................................................................................. 48 Obr. 15 Vyplnění údajů o webové stránce ........................................................................... 50 Obr. 16 Plugin Contact Form 7 – Ukázka tvorby kódu formuláře ...................................... 52 Obr. 17 Plugin Contact Form 7 – Náhled hotového formuláře ........................................... 53 Obr. 18 Plugin Google Maps Ready – Nastavení mapy a markeru ..................................... 54 Obr. 19 Plugin Google Maps Ready – Máhled stránky s interaktivní mapou ..................... 55 Obr. 20 Plugin Google XML Sitemap – Ukázka nastavení ................................................. 56 Obr. 21 SEO optimalizace ................................................................................................... 58 Obr. 22 Výsledná podoba realizované webové prezentace ................................................. 61 Obchodní akademie Tomáše Bati a Vyšší odborná škola ekonomická Zlín 68 SEZNAM TABULEK Tabulka 1 Vlastnosti webhostingových služeb .................................................................... 42 Tabulka 2 Možnosti doménových jmen............................................................................... 44 </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/navrh-a-realizace-webove-prezentace-firmy" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Návrh a realizace webové prezentace firmy"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <a href="https://adoc.pub/about">About Us</a> | <a href="https://adoc.pub/privacy">Privacy Policy</a> | <a href="https://adoc.pub/term">Terms of Service</a> | <a href="https://adoc.pub/copyright">Copyright</a> | <a href="https://adoc.pub/contact">Contact Us</a> | <a href="https://adoc.pub/cookie_policy">Cookie Policy</a> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close">×</button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html>

Návrh a realizace webové prezentace firmy

Recommend Documents