123 123 123

Poděkování

Velice rád bych touto formou poděkoval důležitým lidem, kteří mi s touto bakalářskou prací pomohli a lidem, kteří mě podporovali během studia. Velký dík patří mému vedoucímu, panu Ing. Zbyňku Hubínkovi za ochotu, odbornou pomoc a hlavně trpělivost.

Dále pak mému konzultantovi, panu Ing. Janu Blažkovi, u kterého jsem zase čerpal rozsáhlé praktické zkušenosti a i všem mým kamarádům a blízkým za podporu.

Pokládám za důležité poděkovat mým rodičům za obrovskou podporu nejen během psaní této práce, ale především během celého studia.

Anotace

Tato bakalářská práce se zabývá metodologií návrhu středně velké webové aplikace.

Použitelnost jednotlivých kroků následně demonstrujeme na konkrétním případě, a to návrhu studentského webového portálu pro studenty na vysokoškolských kolejích Harcov při Technické univerzitě v Liberci. Součástí práce jsou jak pravidla a instrukce pro programátory a vývojáře, tak podklady pro optimální strukturu a obsah webových stránek.

Postupy předcházející samotnému kódování, které zahrnují analýzy a modelování a současně také aktivity navržené jako další možný rozvoj a držbu webové aplikace přispívají ke splnění žádaného výsledku a co nejvyšší počet uskutečněných konverzí ze strany návštěvníků.

Klíčová slova

webdesign, Internet, studentský portál, webové stránky, metodologie vývoje webové aplikace, webové prostředí, průzkum trhu, definice cíle webových stránek, design, analýza, rozvoj webových stránek, jazyk MySQL, jazyk PHP, jazyk HTML, maslowova pyramida potřeb, architektura webových stránek, keywords, SEO, vývojová strategie

Anotation

This bachelor thesis is engaged in design methodology of mid-sized Web applications.

Usability of each step then demonstrates on the particular case, the draft of web portal for students in university dormitories Harcov at the Technical University of Liberec. Part of this work are rules and instructions for programmers and developers and materials for optimal structure and content of the website. Procedures prior to the coding itself includes analysis and modeling, designing a possible future development to achieving the desired result and the highest number of conversions from visitors.

Keywords

webdesign, Internet, student portal, websites, Web applications development methodology, web environment, market research, definition of objectives websites, design, analysis, website development, MySQL language, PHP language, HTML language, Maslow's pyramid of needs, architecture of websites , keywords, SEO, web development strategy

Obsah

Úvod...11

1 WEBOVÉ DATABÁZOVÉ APLIKACE...12

1.1 Metodologie vývoje webové aplikace...13

1.1.1 Záměr webu a oblast působení[3]...14

1.1.2 Analýza trhu[4]...14

1.1.3 Definice funkcí webové aplikace[5] ...15

1.1.4 Webdesign [6]...15

1.1.5 Web development [2]...18

1.1.6 Údržba a rozvoj...19

2 NÁVRH STUDENTSKÉHO WEBOVÉHO PORTÁLU...21

2.1 Metodologie vývoje studentského portálu...21

2.1.1 Stanovení cíle portálu...22

2.1.2 Analýza současných informačních zdrojů na VŠ kolejích Harcov...22

2.1.3 Analýza informačních zdrojů podobného zaměření na ostatních VŠ v České republice...25

2.1.4 Vytvoření profilu návštěvníka...28

2.1.5.1 Průzkum hledaností klíčových slov (keywords)...28

2.1.6 Definice hlavních funkcí portálů...30

2.1.6.1 Volba funkcionalit portálu...31

2.1.6.2 Struktura webové aplikace...32

2.1.7 Webdesign...33

2.1.7.1 Definice menu...33

2.1.7.2 Scénáře...35

2.1.7.3 Rozvržení internetového portálu...35

2.1.7.4 Grafický návrh úvodní stránky portálu...36

2.1.8 Web development...38

2.1.8.1 Pokyny pro vývojáře...38

2.1.8.2 Podklady pro vývojáře HTML...39

2.1.8.3 Podklady pro vývojáře PHP...41

2.1.8.4 Podklady pro vývojáře MySQL...43

2.1.9 Další vývoj...47

Závěr...49

Seznam použité literatury...50

Citace...50

Bibliografie...51

Seznam příloh...51

Přílohy...52

Seznam obrázků

Obrázek 1 Různé úhly pohledu na webdesign...16

Obrázek 2 Maslowova pyramida potřeb...17

Obrázek 3 Hledanosti v dimenzi Kultura...30

Obrázek 4 Část diagramu případů užití...34

Obrázek 5 Část wireframe úvodní strany...36

Obrázek 6 Část designu úvodní strany...37

Obrázek 7 Část programového algoritmu...43

Obrázek 8 Relační model databáze...46

Seznam tabulek

Tabulka 2 Struktura navigačního menu...33

Seznam použitých zkratek, značek a symbolů

PC...Osobní počítač. (Anglicky Personal Computer).

TCP/IP...Sada protokolů pro komunikaci v počítačové síti. (Anglicky Transmission Control Protocol/Internet Protocol).

HTTP...Internetový protokol určený pro výměnu hypertextových dokumentů ve formátu HTML. (Anglicky Hypertext Transfer Protocol).

URL...Řetězec znaků pro přesné umístění dokumentu na Internetu. (Anglicky Uniform Resource Locator).

SWOT...Metoda identifikující silné a slabé stránky, příležitosti a hrozby. (Anglicky Strengths, Weaknesses, Opportunities and Threats).

SEO...Optimalizace pro vyhledávače. (Anglicky Search Engine Optimization).

SQL...Standardizovaný dotazovací jazyk používaný v relačních databázích.

(Anglicky Structured Query Language).

MySQL...Opensource databázový systém.

DDL...Jazyk pro definici dat. (Anglicky Data Definition Language).

DML...Jazyk pro manipulaci s daty. (Anglicky Data Manipulation Language).

HTML...Značkovací jazyk pro vytváření stránek v systému World Wide Web.

(Anglicky HyperText Markup Language).

PHP...Opensource skriptovací programovací jazyk. (Anglicky Hypertext Preprocessor).

Úvod

V šedesátých letech dvacátého století bylo provedeno několik prvních krůčků k celosvětovému systému vzájemně propojených uzlů (počítačů a jiných síťových zařízení) – Internetu. Podobu dnešního Internetu však ani samotní pracovníci agentury ARPA, která vyvinula první síť vzájemně propojených vzdálených počítačů, ARPANET, nemohli očekávat. Prostřednictvím Internetu dnes lidé nakupují, sledují zprávy, neptají se prodavačů v obchodech, ale raději čtou recenze, nestojí fronty na úřadech, ale jednoduše vyplní elektronický formulář. Tento rostoucí trend rovněž dává prostor k vzniku dalších oborů a pracovním příležitostem. Vzniká celá řada specializovaných firem, které se zabývají vývojem webových prezentací a celou řadou souvisejících služeb. My se v této práci zaměříme právě na tvorbu webových prezentaci a na metodiky vývoje rozsáhlejších webových databázových aplikací.

Proč usilovat o co nejkvalitnější a nejzajímavější webové stránky? Jsou v dnešní době hlavním komunikačním prostředkem mezi firmou a jejími zákazníky, mezi úřady a obyvateli státu a pomocí webových stránek probíhá většina komunikace a obchodů.

Nejvíce zákazníků v dnešní době hledá a porovnává firmy právě na internetu. Bez kvalitních, dostatečně interaktivních a přehledných internetových stránek, které zaujmou a jsou dohledatelné se dnes solidní firma neobejde. Počet pevných i mobilních připojení roste a připojení k internetu má dnes doma i v práci téměř každý, s tím souvisí také vzrůstající poptávka po vývojářích webových aplikací a to na téma vývoje webových stránek neexistují žádné specializované školy, pouze několik seminářů nebo oborů. Přitom činnosti webdesignu, návrhu webových stránek, zahrnující rozsáhlé množství důležitých kroků, se věnuje obrovské množství lidí, a bohuže ne vždy se jedná o kvalitní služby.

Kvalitní webdesign totiž není pouhé vytváření grafických vzhledů nebo programování, ale jedná se o mezioborovou disciplínu, kde se prolínají poznatky z mnoha oblastí jako jsou například statistika, psychologie, marketing, design a mnoho dalších.

Tato bakalářská práce obsahuje teoretickou metodologii vývoje středně velké webové databázové aplikace z pohledu zadavatele a v druhé části praktický příklad návrhu takovéto

1 WEBOVÉ DATABÁZOVÉ APLIKACE

Středně velké systémy integrují databáze s prostředím webu a těší se velké oblibě, která plyne z jejich velké dostupnosti a užitečnosti. Ke stejným datům mohou přistupovat tisíce uživatelů současně, aniž by museli instalovat nějaký další software. Většina webových databázových aplikací používá při propojení webu s databází tři vrstvy aplikační logiky.

Při pochopení webových aplikací budeme vycházet z [1]. První, základní vrstva je databázový systém (DBMS), který zajišťuje správu databáze a samotná databáze obsahující data; nejvyšší vrstva představuje software webového prohlížeče, jenž slouží jako rozhraní k webové aplikaci. Mezi základní vrstvou a prohlížečem se nachází složitá prostřední vrstva, ve které se skrývá většina aplikační logiky vyvinuté obvykle za pomoci skriptového jazyka pro webový server, který může komunikovat s příslušným databázovým systémem a následně vytváří HTML kód pro prezentaci dat.

Nejvyšší, klientská vrstva

Definicí pojmu 'web', nebo 'prostředí webu' rozumíme tři nejvýznamější standardy a na nich postavené nástroje: formátovací jazyk HTML, přenosový protokol HTTP a síťový protokol TCP/IP, který se stará o přenos dat mezi aplikacemi na Internetu. Prostřednictvím protokolu HTTP webové prohlížeče vysílají požadavky na webové servery a ty pak pomocí stejného protokolu odpovídají.

Klientskou vrstvu tedy obvykle tvoří webový prohlížeč, který uživateli v grafickém prostředí zobrazuje požadované informace ve formátu HTML, vysílá požadavky a zpracovává hodpovědi pomocí HTTP protokolu.

Nejčastěji využívané jazyky pro kódování klientské vrstvy:[2]

Ajax, Flash, JavaScrip, jQuery, HTML (aktuálně ve verzi 5) a CSS (aktuální verze 3)

Prostřední, serverová vrstva

Ve střední vrstvě se ve většině případů nachází podstatná část aplikační logiky. Můžeme si ji představit jako webový server, který zpracovává požadavky z klientské vrstvy a následně formuluje odpovědi. Tato komunikace se zpravidla dělí na dva způsoby: v prvním případě

klient žádá určitý soubor, pod kterým si můžeme představit například statickou webovou stránku nebo obrázek, a v druhém případě klient žádá spuštění určitého programu nebo skriptu a o navrácení výsledků. Názorným příkladem druhého způsobu komunikace je požadavek na přístup do databáze, čili o komunikaci se základní vrstvou.

Nejpoužívanější skriptovací jazyky:[2]

ASP, ColdFusion, CGI, Erlang, Groovy, Java, Lotus Domino, Node.js, Perl, PHP, Python, Ruby, SSJS, .NET

Databázová vrstva

Databázová vrstva v třívrstvé architektuře zajišťuje veškerou správu dat. Stará se o jejich ukládání a načítání a také spravuje aktualizace. Databázová vrstva musí poskytovat paralelní přístup více než jednoho procesu k databázi a poskytuje potřebné zabezpečení.

Kromě těchto činností se také stará o integritu dat a zajišťuje další podpůrné operace, jako je například zálohování dat. Ve většině webových databázových aplikací zajišťuje tyto služby relační databázový systém a samotná data jsou ukládána do relační databáze.

Většina těchto databázových systémů je pak dotazována jazykem SQL, což je standardní jazyk pro komunikaci s relačními databázemi.

1.1 Metodologie vývoje webové aplikace

Optimální postup při vývoji webu není pevně stanoven. Kromě rozdílných názorů je třeba ještě zohlednit rozdílnost a náročnost různých projektů, například při vývoji rozsáhlého eshopu budeme přípravě postupu věnovat mnohem větší úsilí, než při vytváření obyčejné webové prezentace, která firmě slouží pouze jako elektronická vizitka. Za svou několikaletou praxi v oboru vývoje webových stránek jsem měl tu čest spolupracovat s odborníky, kteří se této problematice věnují delší řadu let. Za tuto dobu jsem zjistil, a to si dnes denně mohu ověřovat, že za kvalitními internetovými stránkamy stojí důkladná připrava. Jak jsem uvedl výše, žádný univerzální návod neexistuje, je zde však řada zajímavých metod vývoje webu a z nich mne nejvíce zaujala metoda předního odborníka na webdesign v ČR, pana Jana Řezáče. Já jsem si ji dovolil nepatrně rozšířit.

1.1.1 Záměr webu a oblast působení

Pro správný start vývoje webové aplikace je třeba co nejpodrobněji stanovit cíle, kterých chceme dosáhnout a účel webové aplikace. K tomu je dobré vypracovat takzvanou analýzu SWOT, kde přehledně zjistíme silné a slabé stránky konkrétního objektu (například firmy).

Analýza SWOT, nebo další podobné nástroje nám poskytnou kompletní a strategický pohled na zkoumaný objekt a jeho konkrétní webovou aplikaci. Cíle je následně dobré rozšířit o metriky, aby bylo dosaženo jejich snadné měřitelnosti a následně zhodnocení dosažených cílů, uskutečněných konverzí. Hlavním cílem většiny webových stránek je vydělat peníze.

1.1.2 Analýza trhu

Ještě před tím, než přistoupíme k stanovení funkcionalit webové aplikace, musíme se zaměřit na jeden důležitý krok, a tím je analýza konkurence a definince uživatele. Během analýzy konkurence se zaměříme na konkurenty, kteří nás budou nejvíce ohrožovat, u nich pak provedeme další analýzu jejich silných a slabých vlastností. V průběhu analýzy konkurentů zjistíme rovněž zažité konvence, na které jsou návštěvníci v daném oboru zvyklí. Pokud tyto konvence nebudeme dodržovat, může se lehce stát, že webovou aplikaci návštěvníci nebudou chtít používat. Rovněž je třeba získat co nejvěrnější obraz našeho cílového návštěvníka a pokusit se mu tak nabídnout přesně to, co hledá. Pro segmentaci našich budoucích návštěvníků je dobré vytvořit jejich profily, kde budou zahrnuty demografické a geografické charakteristiky, dále nesmí chybět socioekonomické a psychografické charakteristiky a charakteristiky chování. Tyto kroky mohou být provedeny například formou anket, analýzy návštěvnosti webových stránek konkurence, průzkumem hledaností klíčových slov atd.

Celkovým výsledkem analýzy trhu bude tedy rozbor konkurence, jejich silných a slabých stránek a specifikace profilu a potřeb našeho budoucího návštěvníka.

1.1.3 Definice funkcí webové aplikace

Nyní se dostáváme do fáze, kdy je již možné s dostupnými podklady vymezit základní funkce a datové struktury webové aplikace na konceptuální úrovni, čili bez ohledu na implementačním prostředí a technologické platformě. Pro výběr funkcionalit webové aplikace je vhodné formou brainstormingu vytvořit nesetříděný seznam všech nápadů, které souvisí s cílem webu, nebo jsou silnou stránkou konkurence. Následně lze vyškrtat nevhodné položky a nakonec vytvořit uspořádanou a přehlednou strukturu funkcí webové aplikace.

1.1.4 Webdesign

Web design je procesem rozvržení, plánování, modelování a následné realizace a údržby elektronického média prezentované pomocí značkovacího jazyka HTML na uživatelském internetovém prohlížeči. Webdesign, (slovo vziklo spojením anglického 'web design' - návrh, projektování webu) představuje mezioborovou disciplínu, která zasahuje jak do psychologie, estetiky, marketingu, ale také do systémového inženýrství a analytiky.

Webdesign je o komplexním zpracování obrovského množství dat, je o psychologii, je o testování, o důkladném studiu lidí, strategii a v neposlední řadě analytice.Webdesign není pouze grafický vzhled, jedná se o náročný proces návrhu, modelování a plánování.

V dnešní moderní 'online' době nároky na kvalitní webové stránky neustále rostou, tím pádem se zvyšují i požadavky na znalosti tvůrců těchto webových prezentací.

Všechno, co souvisí s webdesignem převážně souvisí s potřebami uživatelů a způsobem, jak jim požadovaný obsah poskytnout. Internetové stránky, ke kterým je znemožněn či ztížen přístup, nelze označit jako konkurenceschopné, efektivní a splňující účel, pro který byly vytvořeny. Webdesign se za posledních 20 let neustále mění, obrovské změny jsou patrné i v rozmezí jednoho roku. Na webdesign se dá dívat z několika úhlů pohledu:

Obrázek 1 Různé úhly pohledu na webdesign

Zdroj: ŘEZÁČ Jan. [přednáška]. In: Přednášky – Jan Řezáč [online]. vid.[2.4.2014]. Záznam dostupný z: http://janrezac.com/prednasky

Obsahová strategie

Obsah webové prezentace máme plně pod kontrolou, zaměřením na obsahovou strategii obsah naplánujeme s ohledem na naše cílové skupiny, s ohledem na cíl, necháme ho vytvořit a pak ho kontrolujeme a pravidelně upravujeme. Je to velice důležitá část webdesignu, poněvadž lidé na stránky chodí hlavně kvůli obsahu, nikoliv kvůli vzhledu.

Interakční design

Na rozdíl od klasického grafického designu pro vizuální komunikaci, kde výstupem je plakát, nebo vizitka je u interakčního designu součástí nejen samotný design, ale také interakce - komunikace s webovou aplikací, je od ní očekávaná určitá odezva.

Vizuální komunikace

Je to vlastně samotný vzhled stránek. Lidé web nečtou, ale skenují, jde o to je zaujmout.

Vývoj kvalitní webové aplikace může trvat i několik let, primárně od ní očekáváme

následující tři fáze: 1. chceme mít na svých webových stránkách co nejvyšší návštěvnost, 2. chceme, aby návštěvníci vykonali požadovanou akci označovanou jako konverzi a 3.

chceme, aby se k nám zase vrátili. Pro úspěch webové aplikace, splnění těchto tří požadavků můžeme využít ilustraci pomocí Maslowovy pyramidy potřeb a pokus vyšplhat se v ní co nejvýše.

Obrázek 2 Maslowova pyramida potřeb

Zdroj: ŘEZÁČ Jan. [přednáška]. In: Přednášky – Jan Řezáč [online]. vid.[2.4.2014]. Záznam dostupný z: http://janrezac.com/prednasky

Nalezitelnost

Webové stránky fungují pouze, pokud tam chodí návštěvníci. Mohou nás navštívit přes vyhledávače, dozvědět se o nás pomocí vizitek, letákovou kampaní, přirozeným rozšiřováním mezi lidmi a mnoha dalšími způsoby.

Dostupnost

Zajištění dobrého technického řešení zahrnující rychlý hosting, validní kód bez chyb, rychlou odezvu webové aplikace atd.

Přístupnost

Nesmíme opomenout handicapované návštěvníky a vyhledávače, které stránky vidí pouze jako zdrojový kód a rovněž nesmíme zapomenout na uživatele mobilních zařízení, kde je obrovská rozmanitost technického vybavení.

Použitelnost

S webovou aplikací se musí dobře pracovat, měla by obsahovat intuitivní ovládání a uživatelé by měli rychle pochopit, jak s ní pracovat.

Důvěryhodnost

Je dobré návštěvníka přesvědčit o důvěryhodnosti firmy. Lze toho docílit několika kroky, například udáváním kompletních fakturačních údajů, referencemi, poděkováním od zákazníků, použiváním zabezpečeného připojení atd.

Přesvědčivost

Pro přesvědčení velkého množství návštěvníků k vykonání konverze je dobré mít silný prodejní argument, nabízet něco navíc (následně za to budeme něco chtít, například časově omezené slevy). Pro přesvědčení návštěvníka jsou vyvýjeny sofistikované metody sahající až k oborům psychologie, fungování lidské mysli a předvídání lidského chování.

Emoce

Emocoje prohlubují zapamatovatelnost webu a pomáhají integraci webu mezi lidi.

Zajímavým příkladem může být gamifikace - uplatňování herních principů: odměny za vyplnění formuláře, zobrazování počtu plusových bodů a pod.

1.1.5 Web development

Web development představuje realizaci webové aplikace dle zadání. Realizace zahrnuje jak grafický návrh vzhledu, tak samotné vyvíjení skriptů. Programování se dělí na klientské, serverové a databázové. Před samotným programováním a vytvářením grafických materiálů je třeba provést selekci technologií, náročnost aplikace na výkon PC a rychlost připojení uživatele, zvážit rozsah obsahu, míru zabezpečení, finanční a časový rozpočet, jak často se bude webová aplikace aktualizovat a plány na rozšiřování. Pro vývoj webových aplikací spojených s webovými servery a webovými protokoly bylo vytvořeno velké množstí skriptovacích jazyků. A jejich výběr je třeba pečlivě konzultovat. Rovněž existuje více možností implementace. Webové stránky lze exportovat z MS Wordu, i vytvářet po krátké chvíli studia jazyka HTML. Nejčastějším způsobem je vývoj na zakázku, nebo využitím služeb, které jsou poskytovány zdarma (například Google Sites,

Webnode, Joomla atd.), u kterých je však omezena míra úprav, funkcionalit, nebo vzhledu.

1.1.6 Údržba a rozvoj

Provoz webu zahrnuje mnoho důležitých činností, jako jsou úpravy obsahu, modifikace funkcionalit, doplňování obsahu, vylepšování, testování, analýza, statistika, přivádění nových zákazníků a mnoho dalších. Níže uvedeme nejzákladnější metody pro přirozené i cílené zvyšování návštěvnosti webových stránek:

SEO

Kromě přímého zadání adresy jsou dvě možnosti, jak uživatelé vstupují na naše stránky:

pomocí odkazů z jiných webů, nebo za pomocí vyhledávačů, či webových katalogů. Proto je nutné se zaměřit jak na budování sítě hypertextových odkazů, tak také na účinnou SEO optimalizaci.

„Optimalizace stránek pro vyhledávače. Zjednodušeně se jedná o konkrétní techniky zabývající se způsobem, jak umístit stránky na co nejlepší pozici ve vyhledávání“[7]

Fulltextové vyhledávače již od 90. let aktivně prohledávají webové stránky a vytváří vlastní databázi a z ní pomocí různých metod uživateli předkládají nejrelevantnější výsledky. Nyní jsou již neodmyslitelnou součástí našeho života a většina lidí dnes hledá informace tak, že využívá právě internetové vyhledávače. Prohledávání webu a webových stránek mají na starosti autonomní programy, tzv. weboví roboti, či weboví pavouci. Mají jediný úkol: prohledávat web a indexovat relevantní webové stránky, které jsou následně nabízeny uživatelům s ohledem na relevantnost k zadané keyword frázi. Může se zdát, že všechny vyhledávače fungují stejně. Toto je však mýtus, různé prohlížeče totiž přikládají různým částem webu jinou důležitost, stránky indexují různým způsobem. Obecně je však dobré robotům nabízet kvalitní obsah s dostatkem vnořených klíčových slov, dodržovat validní kód nebo používat URL adresy, které často obsahují slova z názvu stránek bez diakritiky a mezer .

Ze statistik vyplívá, že nejvíce uživatelů na stránky přistupuje z vyhledávačů [8] a jelikož je naším cílem přivést co nejvíce návštěvníků, musíme se při návrhu webových stránek

orientovat na keywords – slova nebo fráze zadávaná do formuláře vyhledávače, které systém porovnává s webovými dokumety ve své databázi.

Metadata

Ve velké míře uživateli neviditelná, slouží primárně pro vyhledávače a poskytují standardizované informace o webovém dokumentu obsahující například autora dokumentu, popis konkrétní stránky, použitá klíčová slova, popis obrázků atd. Ignorováním metadat se pak stránka pro vyhledávače stává neatraktivní a návštěvnost razantně klesá, použití metadat tedy razantním způsobem pomáhají indexaci.

Reklamy

Reklamy jsou výborné pro zvyšování návštěvnosti webové stránky a určitě se vyplatí v okamžiku, kdy jsou webové stránky nové a ještě nemají dostatek pravidelných návštěvníků, nebo ještě nejsou zaindexované vyhledávači. Nevýhodou je jejich cena a riziko rychlého opouštění stránek. V dnešní době jsou však reklamní systémy důmyslně propracováné a snaží se tyto nepříjemné faktory eliminovat na přijatelnou úroveň – cílí se na konrétní uživatele, kteří hledají určitý produkt právě odesláním releventních klíčových slov formulářem vyhledávače a lze také cílit na konkrétní geografické oblasti. Ještě je třeba zmínit, že neexistují pouze internetové reklamy, ale také reklamy v tiskové podobě, osobní prezentace a mnoho dalších forem. Reklamy, především internetové reklamy a jejich správné použití je však rozsáhlé téma, proto se jimi dále nebudeme zabývat.

Neustálý průzkum trhu, konkurence a aktualizace dat

Nejen pro zachování aktuálních informacích na webových stránkách, ale také pro zajištění častých návštěv ze strany robotů a pavouků, kteří přednostně indexují stránky, které jsou nejen kvalitně sestavené, ale také často navštěvované, je na ně odkazováno z více zdrojů, nebo častěji aktualizované.

Sledování návštěvnosti

Pomocí účinných nástrojů pro analýzu pohybu návštěvníků získáme důležité informace o chování návštěvníků a nejrelevantnějších klíčových slovech.

2 NÁVRH STUDENTSKÉHO WEBOVÉHO PORTÁLU

Návrh internetového portálu budeme demonstrovat na konkrétním objektu, na kolejích Harcov, vysokoškolských kolejích Technické univerzity v Liberci. Impulsem k volbě kolejí Harcov je absence kvalitního a hlavně koplexního zdroje návodů, informací o mimoškolních aktivitách a sportovního vyžití přímo pro studenty ubytovaných na harcovských kolejích. Aktuálně si sice student Technické univerzity v Liberci může vybrat z velkého množství velice kvalitních zdrojů, kde získá zajímavé informace o cekovém dění na liberecké Vysoké škole, ale problém je v tom, že se student musí pídit po každé informaci zvlášť a zvykat si na rozdílné rozhraní, nebo zdroje nejsou již delší dobu udržovány.

Cílem této části práce je konkrétní zadání (z pohledu zadavatele) internetového portálu pro studenty, kde přehledně naleznou informace o mimoškolních aktivitách, rady a návody a kde naleznou prostor pro vytváření vlastních aktivit.

2.1 Metodologie vývoje studentského portálu

Definice cíle webové aplikace

Výsledkem této části bude základní pohled na studentský portál a hlavní poslání portálu.

Analýza současného stavu informačních zdrojů na kolejích Harcov, profil uživatele Cílem této části bude analýza aktuálních možností studentů pro získávání informací týkajících se zkoumané problematiky v Liberci i na ostatních VŠ v republice a vytvoření profilu studenta.

Analýza potřeb uživatele

Výstupem této části bude průzkum hledanosti vybraných klíčových slov.

Definice funkcí portálu

Důležitou fází je sestavení strukturované architektury internetového portálu. K té nám poslouží tato část, kde si shrneme požadované funkce a následně je vhodně roztřídíme.

Webdesign

Cílem této rozsáhlejší fáze bude modelování a grafické výstupy webové aplikace. Jedná se o poslední a nejdůležitější fázi před samotným kódováním webové aplikace a musí zde být zohledněny poznatky ze všech předchozích kapitol.

Web development

Jelikož se tato práce zabývá návrhem, bude v kapitole o web developmentu navrženo poze několik metod, jak optimálně přistupovat ke kódování webové aplikace.

Údržba a rozvoj

Výsledkem kapitoly o dalším rozvoji naznačíme několik možností, kudy by se mohl ubírat další vývoj a údržba webového portálu.

2.1.1 Stanovení cíle portálu

Hlavním posláním studentského portálu je shromáždění zajímavých informací a návodů týkající se kolejí Harcov a Techniceké univerzity v Liberci. Kromě získávání informací portál nabídne díky seznamu volnočasových aktivit a sportovního vyžití inspiraci pro efektivnější trávení volného času. Rovněž by se mělo jednat o místo pro setkávání lidí podobných zájmů a kde bude přehledně zobrazeno aktuální dění na kolejích Harcov. Od uživatelů očekáváme akce, které budou mít podobu přidávání vlastních článků, psaní komentářů a hlasování v anketách a vájemného poskytování rad a tipů.

2.1.2 Analýza současných informačních zdrojů na VŠ kolejích Harcov

Aktuální možnosti studentů získávání informací v elektronické formě jsou v porovnání s ostatními vysokými školami v republice nadprůměrné. V současné době může student čerpat informace z těchto hlavních zdrojů:

Oficiální školní weby

Nachází se zde rozsáhlé množství studijních informací jak pro stávající studenty, i uchazeče, aktuality z dění na škole, administratvní informace, opatření jednotlivých fakult a další podobné informace o Univerzitě jako takové.

Patří sem oficiální web Technické univerzity v Liberci, weby jednotlivých fakult, zpravodaj Technické univerzity v Liberci a webové stránky Studentské Unie TUL.

Weby kolejí a menz

Zde jsou oficiální informace týkající se především dění na kolejích a v menzách, administrativní informace, vnitřní řády atd. Mimo jiné zde mají studenti i určité možnosti vzájemné komunikace.

Patří sem oficiální web Kolejí a menz, web kolejí Vesec, web Liane.

Neoficiální kolejní weby

Internetové stránky které se snaží studentům poskytnout unikátní informace z oblasti seznamování a vzájemné komunikace, informace pro studenty prvních ročníků a potenciální zájemce o studium na TUL.

Seznamky libereckých studentů, internetové stránky kolejních hospod, či TULipedie.

Neoficiální stránky pro studenty

Jedná se převážně o studentské projekty veřejně přístupné úložiště studijních materiálů, stránky jednotlivých zájmových klubů, sportovních oddílů.

Facebook

Facebook nabízí obrovské možnosti pro komunikaci, není tedy divu, že se vyskytuje spousta rozmanitých facebookových stránek a skupin.

Patří sem veškeré facebookové zdroje od oficiálních školních Facebooků, přes uzavřené kolejní skupiny, až po otevřené skupiny, kde si studenti vzájemně nabízí spolujízdy do Liberece a zpět nebo inzerují své věci k prodeji. Počet uživatelů a fanoušků těchto facebookových stránek a skupin se pohybuje až v řádech několika tisíc.

Po důkladném zkoumání zmíněných možností byly vybrány informační zdroje, které jsou v rámnci zkoumaného téma nejvhodnější. Jelikož tato práce hledá řešení pro zkvalitnění informační úrovně studentů především v oblasti mimoškolních aktivit a využití dostupných

služeb, které koleje Harcov nabízí, zaměříme se na detailnější zkoumání oficiálních a neoficiálních kolejních webů a neoficiálních studentských projektů. Facebook v žádném případě nesmíme opomenout, budeme se mu však věnovat až ve fázi dalšího rozvoje portálu.

Koleje a Menzy TU v Liberci http://koleje.tul.cz

Studenti zde mohou nalézt informace o novinkách z dění na kolejích z pohledu vedení KaM, údaje o provozních dobách kolejí, menz a ostatních provozů menz. Kromě veřejně přístupných informací zde lze přispívat do fóra a obsluhovat uživatelský účet.

Zajímavé asplekty, které by bylo vhodné použít:

Hledání pokojů konkrétních studentů a jejich telefonní spojení, provozní doby.

Kolej VESEC On-Line

http://www.vesec.tul.cz

Koleje Vesec aktuálně omezují ubytování studentů a postupně se blíží zániku. Nicméně kolejní web stále nabízí zajímavé funkce jako jsou komentáře k článkům, hlasování v anketách, diskuzní fórum, uživatelské články, online galerie.

Zajímavé asplekty, které by bylo vhodné použít:

Komentáře k článkům, ankety, uživatelské články, galerie.

Liane

http://liane.tul.cz

Internetové stránky věnované univerzitní síti liane. Studenti zde naleznou mnoho důležitých informací, návodů a výhodných nabídek.

Zajímavé asplekty, které by bylo vhodné použít:

Návody.

TULipedia

http://tulipedia.zal.cz

Internetové stránky nabízející studentům převážně prvních ročníků všeobecné informace o kolejích Harcov a volnočasových aktivitách. Web je vytvořen ve známém schématu Wikipedie.

zajímavé asplekty, které by bylo vhodné použít:

Informace o zájmových klubech a sportu; informace o blízkých barech.

Harcov - koleje Technické Univerzity v Liberci. Seznamka a inzerce http://seznamka-harcov.inventar.cz

Internetové stránky, které se věnují bezplatné inzerci pro studenty na kolejích. Bohužel stránky jsou delší dobu neudržované.

Zajímavé asplekty, které by bylo vhodné použít:

Inzerce.

NaKoleji.cz

http://www.nakoleji.cz

Internetový portál, který se našemu požadovanému výsledku podobá ze všech výše uvedených stránek nejvíce. Bohužel o webu téměř nikdo neví a poslední aktualizace byla provedena v roce 2010.

Zajímavé asplekty, které by bylo vhodné použít Inzerce.

2.1.3 Analýza informačních zdrojů podobného zaměření na ostatních VŠ v České republice

Při hledání konkurenčních školních webů byly použity seznamy škol a následně mechanické prohledávání v internetových vyhledávačích. Samozřejmě se nikdy nemůže jednat o kompletní seznam webů, některé mají omezený přístup pouze na přihlášení nebo nemusí být zahrnuty do výsledků hledání běžných internetových vyhledávačů. Každopádně aktuální seznam webů je pro potřeby analýzy dostačující. Z veřejných škol v ČR a jejich početných studentských webů byly vybrány tyto nejzajímavější webové stránky:

Studentský portál ČVUT

http://student.cvut.cz/

Portál student.cvut.cz je provozován Kariérním centrem ČVUT a Studentskou unií ČVUT (a jejími kluby) ve spolupráci s ostatními součástmi ČVUT. Studenti ČVUT zde naleznou základní informace o studiu na ČVUT, dozví se o zájmových klubech, kulturním vyžití apod.

Klady:

Zajímavý design, forum, kalendář akcí, FAQ.

Zápory:

Strohý text bez obrázků

international student club CTU in Prague http://www.isc.cvut.cz/

Mezinárodní studentský klub ČVUT, který je orientován převážně na cizince. Kromě rozsáhlého množství informací, nabízí také plnohodnotnou verzi v anglickém jazyce.

Cílem portálu je vytváření mezinárodní komunity na ČVUT v Praze, integrace zahraničních studentů do života v České republice a poskytování informací o dění na ČVUT.

Klady:

Výborný pro cizince, přehled akcí, zapojení dalších studentů.

Zápory:

Orientace hlavně na zahraniční studenty.

Studentská unie ČVUT

http://www.su.cvut.cz/

Klasický web studentské unie, který si vede téměř každá vysoká škola v ČR. Tyto weby se vyznačují množstvím článků, které píšou sami studenti, nebo administrátoři webu. Velice zajámavý je však přehledný seznam zájmových klubů.

Klady:

Seznam zájmových klubů.

Zápory:

Hlavním obsahem webu jsou články.

SUPORT.cz Zlínský studentský portál http://www.suport.cz/

Portál, který sdružuje studenty UTB ve Zlíně. Hlavním obsahem jsou převážně uživatelské články a reportáže, je zde však velký prostor pro studenty, kteří si po registraci sami mohou přidávat vlastní články. Mimo jiné také nabízí prostor pro inzerci, kde se vyskutují jak pracovní přáležitosti, tak také bazar zboží.

Klady:

Webdesign, studentské články, nástěnka s inzercí.

Zápory:

Hlavním obsahem webu jsou články.

Muniport

http://www.muniport.cz/

Cílem portálu je zvýšení komfortu studentů během studia na Masarykově univerzitě.

Z přehledného rozcestníku na hlavní stránce jsou dostupné veškeré služby, které Masarykova univerzita studentům nabízí. Portál zahrnuje rozmanité spektrum služeb, od projektů vznikajících na jednotlivých katedrách, přes akce pro studenty prvních ročníků až po návody, jak žádat o stipendia. Cílovou skupinou portálu jsou zejména studenti prvních ročníků a zájemci o studium.

Klady:

Přehledný rozcestník na úvodní stránce.

Zápory:

Vlastně se jedná o neatraktivní seznam odkazů.

2.1.4 Vytvoření profilu návštěvníka

Primární cílovou skupinou jsou studenti ubytovaní na harcovských kolejích v Liberci.

Kromě studentů ubytovaných na koleji by však portál měl nalézt využití i u studentů TUL, kteří sice dojíždí z velké vzdálenosti, ale nejsou ubytováni na kolejích a také pro místní studenty, kteří dojíždí do školy každý den z nedalekých měst. Portál by také měl sloužit jako pomocník pro studenty prvních ročníků, kteří zde naleznou spoustu informací, jak řešit prvotní problémy související s novým prostředím a maximálního rozšíření obzorů v tom, co všechno mají na harcovských kolejích k dispozici. Kromě studentů by portál mohl nalézt využití i u místních libereckých firem, které sami budou nabízet své služby studentům.

2.1.5 Analýza požadavků uživatele

2.1.5.1 Průzkum hledaností klíčových slov (keywords)

Po analýze možností studentů TUL a studentů na jiných školách provedeme analýzu hledaností klíčových slov. Jelikož je očekávaným výsledkem webová stránka s co možná nejvyšší návštěvnosti – samozřejmě hlavně z okruhu studentů a potenciálních studentů, bylo by dobré tyto informace znát. Vybereme proto co možná nejvyšší počet vhodných slovních spojení, které si pomocí návrháře klíčových od Skliku ještě rozšíříme. Po vytřídění dostaneme účinný nástroj jak dosáhnout co možná nejvyšší přirozené návštěvnosti (pouze z vyhledávačů).

Při tvorbě analýzy klíčových slov budou použity návrháře klíčových slov poskytované nejpoužívanějšími vyhledávači v ČR – Google a Seznam. Jelikož Seznam nabízí účinnější nástroje, přesnější výsledky a navíc hledaná klíčová slova ještě rozšíří o příbuzná slova přijde na řadu jako první. Sklik pracuje s průměrnou měsíční hledaností, která se v průběhu roku nepatrně liší. Primárně je tento nástroj určen inzerentům, kteří s jeho pomocí sestavují reklamní inzeráty. Po analýze hledaných slov v Skliku použijeme návrhář Google Adwords, který však neposkytuje tak přesné údaje, ale může nás informovat o markatních rozdílech v hledanosti určitých slovních spojení.

Získaná data tedy pochází ze statistik reklamních systémů Sklik vyhledávače Seznam.cz a GoogleAdwords. Je uvedena vždy měsíční hledanost ve službách Seznamu i Google.

Na základě analyzovaných webových stránek byla definována množina 52 základních klíčových slov, která byla za pomoci návrháře klíčových slov v Skliku rozšířena na celkový počet 980 slov a slovních spojení. Do dalších kroků analýzy byly zachovány klíčová slova a spojení, jejichž měsíční hledanost je vyšší než 5x za měsíc.

Množina hledaných slov

Vysoká škola Liberec, TUL, koleje liberec, Harcov, harcovské koleje, koleje Vesec, Vesec, klub liberec, liberec, menza, menza liberec, menza tul, internet na koleji, vysokoškolské koleje, studenti liberec, student, akce liberec, sport liberec, basketbal liberec, basketbalová liga, fotbal liberec, fotbalová liga, florbal liberec, florbalová liga, volejbalová liga, volejbal liberec, lanové centrum liberec, horolezecká stěna liberec, badminton liberec, beach volejbal liberec, tenis liberec, ktv, tělocvična liberec, tělocvična harcov, sauna harcov, posilovna harcov, futsal harcov, horolezení harcov, spinning harcov, zumba liberec, harcov aerobik, bosu liberec, yoga liberec, pilates liberec, klub harcov, hospody harcov, zájmové kroužky, otevírací doba, provozní doba, prodám, bazar

Výsledkem je 775 slovních spojení, která tvoří základ pro analýzu. Celková měsíční hledanost všech těchto výrazů je 171584.

Stanovení posuzovaných dimenzí

Dimenzí rozumíme určitou specifickou vlastnost produktů. Jedná se vlastně o výběr nejvhodnějších a nejhledanějších slovních spojení, se kterými bychom měli počítat při definici základního menu portálu, tvorbě obsahu, nadpisů atd. Z množiny klíčových slov jsme stanovili následující dimenze:

Kultura Bary Kluby Sport Harcov Technická univerzita v Liberci Tabulka 1 Posuzované dimenze

Zdroj: Jak se dělá a k čemu slouží klasifikační analýza klíčových slov | Vyhledávače.info [online].

vid.[2.4.2014]. Dostupné z: http://vyhledavace.info/clanky/246/klasifikacni-analyza-klicovych-slov

Detailnější pohled na měsíční hledanost v ilustrační dimenzi Kultura

V dimenzi Kultura byla zachována slovní spojení, která spadají do nejhledanějších kategorií: Dinopark, Divadlo, Galerie, Iq park, Kino, Knihovna, Muzeum, Obecné, Botanická zahrada, Zoo. Celková měsíční hledanost v dimenzi Kultura je 36511.

Obrázek 3 Hledanosti v dimenzi Kultura

Zdroj: Jak se dělá a k čemu slouží klasifikační analýza klíčových slov | Vyhledávače.info [online].

vid.[2.4.2014]. Dostupné z: http://vyhledavace.info/clanky/246/klasifikacni-analyza-klicovych-slov

2.1.6 Definice hlavních funkcí portálů

Díky předchozím krokům již nyní můžeme snadno definovat základní funkce, které by portál měl nabízet. Snažíme se o takové funkcionality, které jsou moderní, jedná se o silnou stránku konkurence případně eliminace slabých stránek konkurence. Přistupme nyní k definici všech funkcí, které budeme studentům nabízet a jejich vhodného roztřídění do základních skupin, které nám po zahrnutí dimenzí hledaných klíčových slov pomohou s návrhem architektury webu. Tato část by nám měla poskytnout kompletní pohled na pole působnosti, možnosti a očekávání, která by měl portál splňovat.

dinopark divadlo galerie iq park kino knihovnamuzeum obecné zahrada zoo 0

2000 4000 6000 8000 10000 12000 14000 16000 18000

Dimenze Kultura

Činnost

Měsíční hledanost

2.1.6.1 Volba funkcionalit portálu

Hlavní obsah portálu budou tvořit jednotlivé bloky, které budou odkazovat na samostatné podstránky. Tyto podstránky (dále označované jako články) budou tvořit 3 druhy textu (odstavec, tabulka, seznam s odrážkami), hlavní obrázek, nadpisy a podnadpisy, galerie a komentáře. Obsah budou moci přidávat uživatelé po přihlášení pomocí formulářových polí v administraci. Budou si moci vybírat pouze mezi těmito základními možnostmi.

Komentáře bude moci přidávat i nepřihlášený uživatel.

 Seznam plánovaných akcí na Harcově.

 Archiv akcí (rozumné množství).

 Kulturní tipy v Liberci.

 Klubovní činnosti pro studenty v Liberci / na Harcově.

 Sportovní vyžití v Liberci / na Harcově.

 Noční život v Liberci / na Harcově.

 Návody na nastavení kolejního internetu, tiskáren apod.

 Administrativa, otevírací doby provozů, studijních oddělení.

 Interaktivní kalendář s odkazy na harcovské akce (tabulka na měsíc, kde každé políčko představuje konkrétní den – řazeno dle dnů).

 Inzerce formou nástěnky (naprogramovat různé velikosti a barvy 'papírků' kderé se budou řadit na nástěnku o rozměrech X Y, uživatel pak vybare ideální velikost a barvu a sestaví si inzerát o určitém maximálním počtu znaků).

 Formulář pro kontaktování administrátora webu.

 Aktuální počet uživatelů online.

 Uživatelské účty (formuláře pro změnu hesla, kontaktních údajů).

 Možnost editace podstránek (pouze autor).

 Ankety.

 Rychlé tipy / rady náhodně umístěné ve zvláštním bloku na jednotlivých stránkách.

2.1.6.2 Struktura webové aplikace

Struktura vychází ze seznamu požadovaných funkcí. Stromovým způsobem zobrazuje kompletní uspořádání webu, úrovně podkategorií a jednoduché popisy jednotlivých stránek. Při sestavování struktury webu musíme zobrazit veškeré druhy stránek a podstránek, které se na webu budou vyskytovat.

 Homepage (Zobrazení Kalendáře akcí, Nejnovějších příspěvků - omezený počet, Nástěnky s inzercí – omezená výška, Hlavního menu).

 Akce (Zobrazen seznam plánovaných akcí od nejbližších po ty nejvzdálenější, pod seznamem budoucích akcí zobrazen archiv akcí, řazeno od nejnovějších po nejstarší).

◦ Kalendář akcí (Klikací tabulka znázorňující aktuální měsíc, jednotlivá políčka představující dny obsahují odkazy na konkrétní stránky s konkrétní akcí).

◦ Plánované akce (Seznam plánovaných akcí, řazeno od nejbližších po nejvzdálenější).

◦ Archiv akcí (Seznam uskutečněných akcí, řazeno od nejnovějších po nejstarší).

 Volný čas (Seznam všech souvisejících položek, řazeno od nejnovějších po nejstarší).

◦ Kulturní tipy (Seznam konkrétních položek, řazeno od nejnovějších po nejstarší).

◦ Sportovní vyžití (Seznam položek, řazeno od nejnovějších po nejstarší).

◦ Zájmové kluby (Seznam položek, řazeno od nejnovějších po nejstarší).

◦ Noční život (Seznam položek, řazeno od nejnovějších po nejstarší).

 Návody (Seznam položek, řazeno od nejnovějších po nejstarší).

◦ Rady a návody (Seznam položek, řazeno od nejnovějších po nejstarší)

◦ Otevírací doby (Seznam položek, řazeno od nejnovějších po nejstarší)

▪ Jednotlivé články (Obsahují pouze Logo, Popis tvořený názvem, textem, odrážkami a podnadpisy, Provozní dobu / Čas konání, Galerii, Komentáře)

 Kontakty (Kontaktní údaje na administrátora)

 Mapa stránek (Seznam odkazů na všechny stránky webu, pro případ že uživatel

nebude schopný běžným způsobem obsluhovat webovou stránku).

 Stránka s anketami (Ukončené a aktuální ankety s výsledky).

 Registrační formulář (Registrace uživatele).

 Administrace účtu (Editace uživatelských údajů zadaných při registraci).

 Formulář pro vkládání příspěvků (Vytvoří se vždy nová stránka 'článek' s detaily příspěvku. Políčka pro vkládání Loga, Názvu, Textu, Odrážek, Podnadpisů, Provozní doby / času konání, Adresy, Galerie a Komentáře).

 Formulář pro editaci příspěvků (Podobný formulář jako pro vkládání. Úprava povolena pouze autorům příspěvku).

 Formulář pro přidávání inzerátů (Výběr velikosti a vzhledu příspěvku, Nadpis a Text, přidávat mohou pouze registrovaní návštěvníci).

 Formulář pro editaci inzerátů (Podobný formulář jako pro vkládání. Úprava povolena pouze autorům inzerátu).

2.1.7 Webdesign

Po definici všech požadovaných funkcí portálu následuje fáze sestavení základního menu portálu, které vychází ze struktury webové aplikace. Při volbě názvů jednotlivých kategorií a podkategorií je nutné pracovat s hledaností klíčových slov a nevybírat hesla náhodně.

Použijeme klíčová slova s co možná nejvyšší hledaností a tím docílíme lepších pozic ve vyhledávačích. Navíc tak zajistíme, že uživatelé na první pohled naleznou, co hledají.

AKCE VOLNÝ ČAS NÁVODY INZERCE

Kalendář akc Kulturní tipy Rady a návody Plánované akce Sportovní vyžití Otevírací doby

Archiv akcí Zájmové kluby Noční život Tabulka 2 Struktura navigačního menu

Zdroj: WebML - struktura webové aplikace | Interval.cz [online]. vid.[2.4.2014]. Dostupné z:

http://interval.cz/clanky/webml-struktura-webove-aplikace

2.1.7.2 Případy užití

Oddělíme systém od okolí a definujeme jaké role budou uživatelé plnit a jakým způsobem budou se systémem komunikovat. Cílem je zachycení veškerých požadavků na systém, případů užití. Zobrazíme webový portál jako celek a jednotlivé role vykonávané uživateli.

Obrázek 4 Část diagramu případů užití

Zdroj: Diagram užití – Wikipedie[online]. vid.[2.4.2014]. http://cs.wikipedia.org/wiki/Diagram_u

%C5%BEit%C3%AD

2.1.7.2 Scénáře

Scénáře jsou něco jako příběhy fiktivních návštěvníků vytvořené na základě zjištěných informací o cílové skupině. Popisují jejich chování a akce, které návštěvník v určité roli vykoná. Scénáře mohou mít mnoho podob, níže uvedeme několik příkladů:

První návštěva

Student přijde poprvé na naše stránky buď pomocí vyhledávače, pomocí odkazu, nebo na předchozí doporučení. Pokud ho něco zaujme, tak začne pronikat architekturou hlouběji k článkům a dalším funkcím. Může přidat komentář, hlasovat v anketě, ale nejspíše ještě neprovede registraci, ani nepřidá vlastní článek.

Opakovaná návštěva

Pokud již uživatel návštěvu opakuje, má představu co zde nalezne. Vyhledávač již pravděpodobně nepoužije, přijde pomocí odkazu, nebo přímého zadání. Jelikož se opakovaně vrací, předpokládáme, že zde minule našel to, co potřeboval a odešel spokojen.

Už je seznámen s funkcionalitou a lze od něj očekávat konverzi - registraci a vytvoření vlastního článku. Nový článek se uloží do databáze a bude ve vybrané kategorii zobrazován. Článek následně může projít revizí administrátora. O editaci bude uživatel informován emailem.

Nabídka firmy

Společnosti nebo sdružení působící v okolí Liberce mohou náhodou, nebo cíleně narazit na tuto webovou aplikaci a rozhodnou se nabízet své služby studentům. Po registraci a vložení článku je jejich další návštěva méně pravděpodobná.

2.1.7.3 Rozvržení internetového portálu

Před tím, než přistoupíme k fázi vytvoření grafického layoutu, je dobré udělat si kostru, která nebude obsahovat estetické prvky. Tato kostra se označuje anglickým slovem Wireframe a jde o návrh definující funkci a obsah stránek webu. Jedná se pouze o mapu, kterou lze snadno upravovat. Při vytváření musíme dbát na metody, související s lidským myšlením a mají zajistit co nejvyšší odezvu od uživatele. Musíme dodržet pokyny výše,

Obrázek 5 Část wireframe úvodní strany

Zdroj: Website wireframe - Wikipedia, the free encyclopedia [online]. vid.[2.4.2014].

http://en.wikipedia.org/wiki/Website_wireframe

2.1.7.4 Grafický návrh úvodní stránky portálu

Cílem grafického návrhu je účelně propojit estetickou a funkční složku návrhu. Pro zachování přístupnosti je kladen důraz na vysokou přehlednost, jednoduchý a moderní design bez vyrušujících prvků, které by zbytečně odváděly pozornost. Naším cílem je návštěvníka zaujmout především obsahem, proto tak také musíme optimalizovat grafický návrh. Zobrazený návrh představuje možnou variantu vzhledu úvodní stránky. Vzhled dalších podstránek vychází z návrhu hlavní strany.

Obrázek 6 Část designu úvodní strany Zdroj: Autor

2.1.8 Web development

Vývoj nepředstavuje pouze vlastní programování, jeho další důležité složky jsou i analýza, testování a konečná integrace. Jelikož na návrh internetového portálu nahlížíme jako zadavatelé, nebudeme tyto kroky důkladně řešit, pouze sestavíme doporučené pokyny pro vývojáře.

2.1.8.1 Pokyny pro vývojáře

 Při vývoji používáme software s otevřeným zdrojovým kódem, čili Open Source.

 Jako databázový systém budeme používat MySQL, které je nejrozšířenější a je vhodné pro rychlé aplikace s nízkými režijními nároky na systémové prostředky.

 Skriptovým jazykem bude PHP, které je rovněž u nás nejrozšířenějším.

 Webové stránky jsou naplňované daty z databáze.

 Procházení dat je řízeno uživatelem.

 Zadávaná data do formulářových polí <form> budou ověřována. Validace dat bude probíhat jak na straně prohlížeče pomocí jazyka JavaScript, tak na straně serveru pomocí jazyka PHP.

 Přihlášení uživatelé budou sledováni pomocí správy seancí.

 Portál je vůči veřejnosti otevřený, i anonymní uživatel má k systému přístup a může psát komentáře a hlasovat v anketě.

 Pro přidávání vlastních článků se již uživatel musí přihlásit, přihlášení uživatelé navíc mohou své články editovat.

 Jestliže se uživatel stal právě členem, je automaticky přihlášen.

 Při vytváření článku si může zvolit kategorii, do které bude článek zařazen, zda se jedná o jednorázovou akci s konkrétním datem, nebo zda se má článek zobrazovat v rychlých tipech a pokud ano, vyplní se další políčka pro obsah samotného tipu.

 Po odeslání požadavku s daty k novému článku je na mail registrovaného autora zaslána zpráva o vložení a na obrazovce se objeví oznámení o chybném / úspěšném vložení.

Pro správné fungování systému musíme někdy využívat výsledky jiného předchozího požadavku (například přihlašovací údaje). Tyto výsledky budou ukládány na server za využití takzvaných seancí. Pomocí seancí můžeme eliminovat ukládání dat prohlížečem, kde se často pro tyto účely využívají takzvané soubory cookies – pojmenovaný soubor informací uložený v počítači. Seance jsou oproti tomu ukládány v prostřední vrstvě.

V jistém okamžiku (například odhlášením uživatele) se seance musí zrušit.

2.1.8.2 Podklady pro vývojáře HTML

HTML je označení značkovacího jazyka pro vytváření webových stránek. V nejnovější verzi 5, která vznikla v únoru 2014 je k dispozici mnoho nových sémantických prvků a došlo k opravě řady chyb.

Koncept jazyka HTML [9]

HTML kód je množina značek (tzv. tagů) a jejich vlastností (atributů). Mezi tagy se vkládá text a tím se určuje sémantika obsaženého textu. Názvy tagů a jejich atribury se uzavírají mezi úhlové závorky < a >. Součástí obsahu mezi jednotlivými tagy mohou být další vnořené prvky ohraničené tagy. Tagy jsou obvykle párové, přičemž koncová značka je totožná se značkou počáteční, pouze je před jejím názvem umístěno lomítko, aby se tak značky rozlišily. Kromě párových tagů existují i nepárové, které obsahují pouze název a atributy. Nepárové tagy jsou obvykle rovněž ukončeny lomítkem.

Pokyny pro psaní HTML kódu

 Pro formátování bude využíváno pouze kaskádových stylů, aby bylo dosaženo oddělení obsahu od formy a tím zajištěna snadná a ekonomická údržba.

 Veškerá autentizace bude probíhat pouze za pomoci šifrovaných hesel.

 Validace zadávaných formulářových dat bude probíhat pomocí JavaScriptu na straně prohlížeče a pomocí jazyka PHP ja straně serveru.

 V kódu se nesmí vyskytovat chyby, validní kód lze ověřit validátorem (např http://validator.w3.org)

 URL adresy budou přepisovány na tzv. SEO friendly URL, které vystihují aktuální stránku a pozici v hierarchii webové aplikace.

 Každý obrázek, nebo formulářové pole, které budou do dokumentu vloženy pomocí tagů mají definovanou také textovou alternativu pomocí atributu alt. Nese-li takový obrázek, nebo formulářové pole významné informační sdělení, musí textová alternativa takové sdělení co nejpřesněji vystihovat.

 Veškeré stránky internetového portálu budou ukládány do mapy stránek, seznamu popisující hierarchii webové aplikace, přitom každá položka tohoto seznamu bude vést na konkrétní stránku.

 Názvy hypertextových odkazů budou voleny vhodně tak, aby vystihovaly cílovou stránku.

 V záhlaví každé stránky je uvedena použitá znaková sada dokumentu, čímž se předchází chybnému zobrazení stránky.

 Výsledný výstup bude testován na nejpoužívanějších prohlížečích – Google Chrome, Mozilla Firefox, Opera, Safari a všechny verze Internet Explorer 7 a novější.

 Jednotlivé stránky nesmí být vytvářeny pomocí jazyka Adobe Flash, jelikož ten neumožňuje snadnou aktualizaci obsahu a vyhledávací systémy současných vyhledávačů tento obsah nedokáží rozpoznat.

 K efektivní funkci obrázků a odkazů musí být dostatečným způsobem vyplněna jejich popisová charakteristika v atributu title.

 Způsob formátování musí být konzistentní ve všech stránkách webové aplikace.

 K účelu předávání dat zadaných uživatelem se bude využívat metod jako jsou sessions, POST, GET apod.

 Při zadávání dat do formulářových polí je maximální množství dat zadáváno automaticky. Jedná se především o metadata, která uživatel nemusí vůbec vyplňovat, atributy title a alt a další.

 Formulářová pole budou mít optimální velikost, aby uživatelé viděli celý text.

 Pro zaujmutí návštěvníka budou důležité pasáže opticky zvýrazněny, například tagem strong.

 HTML kód musí být co nejjednodušší a obrázky ve správné velikosti a formátu, aby nedocházelo k dlouhým odezvám.

 Při vytváření obsahu je třeba využívat co nejvíce nejvyhledávanějších klíčových slov.

 Každá stránka musí obsahovat titulek.

 Stránky se nesmí duplikovat.

2.1.8.3 Podklady pro vývojáře PHP

Skriptovací jazyk PHP (nejnovější je verze 5.5) používá celá řada středních až velkých webových aplikací. Oproti ostatním, neméně zajímavým jazykům, nabízí některé lákavé vlastnosti: PHP je software s otevřeným zdrojovým kódem, díky čemuž je k dispozici zcela zdrarma a vývojářská komunita neustále pracuje na jeho údržbě a zdokonalování. Skripty PHP usnadňují integraci do klientské vrsty tím, že se dají vkládat do statických souborů HTML. PHP navíc nabízí rychlé provádění skriptů, je flexibilní vůči platformě i operačnímu systému a nabízí více než 50 knihoven funkcí.

Základy PHP [10]

Začátek a konec skriptu vymezují značky <?php a ?>, případně pouze <? a ?>. Prázdné (mezerové) znaky nemají na činnost kódu žádný vliv, pouze zlepšují jeho čitelnost pro vývojáře. Skript PHP tvoří posloupnost příkazů, které jsou ukončeny středníkem. Skript PHP se může nacházet na jakémkoli místě souboru HTML a může se libovolně střídat s fragmenty kódu HTML. Vykonávaný skript PHP se ve výsledné stránce plně nahradí svým výsledkem. Komentáře – Slouží jako popisné informace pro vývojáře a snadnější orientaci v kódu. Mohou být jednořádkové (// komentář), nebo víceřádkové (/* komentář na více řádků */). Řetězce – řetězcové literály zapisujeme do uvozovek ('') nebo apostrofů (').

Proměnné:

Proměné v jazyce PHP vymezuje znaménko dolaru a za ním název proměnné ($prom).

Proměnné není třeba nijak zvlášť deklarovat, jejich typ se implicitně definuje, nebo se automaticky předefinuje. V názvech proměnných se také rozlišuje velikost písmen (proměnná $prom a proměnná $Prom jsou dvě odlišné proměnné).

Podmínky a větvení:

Syntaxe řídících struktur v jazyce PHP je podobná ostatním vyšším programovacím jazykům (PHP je z hlediska vývoje nejvíce ovlivněno jazykem C). Podmínkové příkazy poskytují možnost větvení a řízení do různých příkazů, které se provedou při splnění, nebo nesplnění jisté podmínky. Příkazy pro větvení jsou v PHP dva, a sice příkaz if s nepovinnou klauzulí else a příkaz switch, který se zase zapisuje s klausulemi case.

Cykly:

Syntaxe cyklů v jazyce PHP je také obdobná jako u jiných vyšších programovacích jazyků.

Struktura cyklů umožňuje opakované provádění určitých příkazů, dokud je splněna určitá podmínka. V PHP jsou k dispozici čtyři, a to while, do...while, for a foreach.

Pole:

Pole jsou v jazyce PHP důmyslnější a flexibilnější než ve většině ostatních vyšších programovacích jazyků. Jedná se o uspořádanou množinu proměnných, označovaných jako prvky (elementy) pole. Pole mohou obsahovat jak textové řetězce, čísla, ale také složené hodnoty, nebo další pole a jedno pole může obsahovat hodnoty různých typů.

Funkce:

V PHP je k dispozice velké množství funkcí, které pracují s datovými a časovými údaji.

Příkladem můžeme jmenovat funkce pro datum a čas, celočíselné a reálné funkce nebo si jako uživatelé můžeme definovat vlastní, uživatelské funkce.

Pokyny k kódování PHP:

 Pro lehkopádný a snadno udržitelný kód budou skripty PHP pečlivě sestaveny do modulů.

 Skripty / moduly skriptů budou ukládány v adresáři do souboru s příponou .php.

 Ve skriptech budou k popisu využívány komentáře pro zachování možnosti budoucích úprav, aby ve výsledku nebylo méně nákladné znova naprogramovat, než upravit.

 Hesla uživatelů budou do databáze ukládána pouze v šifrované podobě, tak aby nedošlo k případnému úniku informací.

Algoritmus

Teoretický princip řešení programového jádra. Zobrazený diagram zobrazuje očekávané fungování webové aplikace.

Obrázek 7 Část programového algoritmu

Zdroj: N-gram - Wikipédia [online]. vid.[2.4.2014]. http://sk.wikipedia.org/wiki/N-gram

2.1.8.4 Podklady pro vývojáře MySQL

Relační databázový systém MySQL (aktuálně ve verzi5.6) je známý pro svou rychlost a je vhodný především pro aplikace, kde jsou operace načítání dat častější než aktualizace, tedy pro webové databázové aplikace. Systém MySQL se řadí k těm středně velkým databázovým systémům, má většinu funkcí velkých systémů a dokáže spravovat i velmi velké objemy dat. Rozdíl mezi MySQL a některými jinými systémy spočívá v tom, že mu chybí určitá podpora dotazování a má také omezené možnosti paralelního zpracování – k databázi MySQL mohou současně přistupovat desítky procesů prostřední vrstvy, ale již ne stovky. Tyto omezení mají obvykle jen velmi malé dopady na chod webové aplikace.

Základy databází [11]

Databázová tabulka:

Součást databáze, do níž se zapisují data. Tabulka je složena ze sloupců, neboli atributů, z nichž každý má svůj unikátní název. Vlastní data jsou v tabulce na jednotlivých řádcích, neboli záznamech, kde každý řádek obsahuje množinu hodnot. Všechny řádky dané entity mají stejné atributy a každý atribut musí mít datový typ, který se přiřazuje během návrhu databáze. V tabulce se také vyskytuje primární klíč, což je jedinečná hodnota, nebo množina hodnot, které jednoznačně identifikují každý řádek tabulky. Primární klíče se obvykle indexují a nabízí tak rychlý přístup k datům.

Správa databází a tabulek:

Množina SQL příkazů, které slouží pro správu databáze se označují jako jazyk pro definici dat (DDL). Pro vytvoření nové, prázdné databáze, která neobsahuje žádné tabulky slouží příkaz CREATE DATABASE, pro vytvoření tabulky zase příkaz CREATE TABLE. Při vytváření tablek také definujeme v kulatých závorkách seznam názvů, typů a modifikátorů jednotlivých atributů a za seznamem atributů zapisujeme seznam klíčů, který obsahuje i primární klíč.

Vkládání, aktualizace a odstraňování dat:

Příkazy jazyka SQL, pomocí nichž různými způsoby manipulujeme s daty v databázi označujeme jako jazyk pro manipulaci s daty (DML). Základní podmnožinou DML jsou příkazy pro vkládání (INSERT), výběr (SELECT), aktualizaci (UPDATE) a odstraňování (DELETE) dat. Tyto čtyři příkazy se obvykle rozšiřují o klauzule filtrující data, jako jsou například klauzule WHERE, ORDER BY, GROUP BY, HAVING nebo DISTINCT.

Dotazy se spojením tabulek:

Spojení tabulek představje techniku dotazování, při níž se kombinují řádky ze dvou nebo více tabulek na základě spojivací podmínky v klausuli WHERE a vypisují se jen ty řádky, které podmínce vyhovují.

Primární klíč:

Primární klíč je atribut nebo množina atributů, která jednoznačně identifikuje řádek v tabulce. Dva řádky se stejným primárním klíčem do tabulky nelze vložit. MySQL ukládá hodnotu atributů primárního klíče do indexů, ke kterým lze snadno a rychle přistupovat, což má za následek zvýšení rychlosti práce systému.

Základní funkce pro připojení k MySQL pomocí jazyka PHP:

připojení k databázovému systému (mysql_connect()), výběr konkrétní databáze (mysql_select_db()), spouštění SQL příkazů (mysql_querry()), načtení dat z výsledné množiny, při každém volání funkce vždy jeden řádek dat (mysql_fetch_row()), funkce pro zjištění počtu výsledných atributů (mysql_num_fields()) a nakonec ukončení databázového připojení (mysql_close())

Relační model databáze

Model využijeme k definici databáze serveru a k popisu vztahů mezi datovými objekty v systému.

Obrázek 8 Relační model databáze

Zdroj: Entity-relationship model – Wikipedie [online]. vid.[2.4.2014].

http://cs.wikipedia.org/wiki/Entity-relationship_model

Pokyny k kódování MySQL

 Pro lehkopádný a snadno udržitelný kód budou skripty PHP pečlivě sestaveny do modulů.

 Skripty / moduly skriptů budou ukládány v adresáři do souboru s příponou .php

 Ve skriptech budou k popisu využívány komentáře