Sem vložte zadání Vaší práce

Sem vložte zadání Vaší práce.

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství

Bakalářská práce

Webový portál integrující zprávy a zajímavosti z oblasti IT Vojtěch Záhorský

Vedoucí práce: Mgr. Monika Součková

16. května 2013

Poděkování Rád bych poděkoval vedoucí své práce Mgr. Monice Součkové za ochotu, trpělivost a drahocenné rady, které jsem od ní dostal. Dále bych rád poděkoval mému spolužákovi Tomášovi Malinkovičovi za doporučení Open-Source Wordpress. Díky němu jsem objevil sílu, která se v tomto zdánlivě jednoduchém systému skrývá. Můj obrovský dík také náleží mým rodičům za podporu a možnost vystudovat ČVUT v Praze.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně a že jsem uvedl veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle § 60 odst. 1 autorského zákona.

V Praze dne 16. května 2013

.....................

České vysoké učení technické v Praze Fakulta informačních technologií c 2013 Vojtěch Záhorský. Všechna práva vyhrazena.

Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.

Odkaz na tuto práci Záhorský, Vojtěch. Webový portál integrující zprávy a zajímavosti z oblasti IT. Bakalářská práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2013.

Abstract The goal of this bachelor thesis is design, implementation and testing of web portal integrating news and events in IT. Another important part is a project plan which consists of timetable, work breakdown structure, overview of risk and overview of resources. Keywords Web portal, Open-Source, Project plan, Wireframe

Abstrakt Cílem této bakalářské práce je navrhnout, vytvořit a otestovat webový portál integrující novinky a zajímavosti z oblasti IT. Další důležitou částí této práce je projektový plán, který se skládá z časového harmonogramu, wbs, přehledu rizik a přehledu zdrojů. Klíčová slova Webový portál, Open-Source, Projektový plán, Wireframe

ix

Obsah Odkaz na tuto práci . . . . . . . . . . . . . . . . . . . . . . viii Úvod

1

1 Motivace a záměr

3

2 Analýza konkurenčních 2.1 Root.cz . . . . . . . 2.2 Ictmanazer.cz . . . . 2.3 Computerworld.cz . . 2.4 TyInternety.cz . . . . 2.5 Závěr . . . . . . . . .

portálů . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

3 Funkce a cílová skupina portálu 3.1 Cílová skupina . . . . . . . . . . . . . . . . 3.2 Detailní popis částí portálu . . . . . . . . 3.2.1 Články a rozhovory . . . . . . . . . 3.2.2 Diskuzní fórum . . . . . . . . . . . 3.2.3 Kalendář akcí . . . . . . . . . . . . 3.2.4 Komenáře pod články a rozhovory . 3.3 Návrh uživatelského rozhraní . . . . . . . . 3.3.1 Články a rozhovory . . . . . . . . . 3.3.2 Diskuzní fórum . . . . . . . . . . . 3.3.3 Kalendář akcí . . . . . . . . . . . . 3.3.4 Tvorba událostí . . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

5 5 5 6 6 7

. . . . . . . . . . .

9 9 9 9 10 10 11 11 12 12 13 13

4 Projektový plán 15 4.1 Časový harmonogram . . . . . . . . . . . . . . . . . . . . . . 15 xi

4.2 4.3 4.4

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

16 16 17 17 17 18 19 19 20

5 Výběr vhodných technologií 5.1 Implementace na zakázku . . . . . . . 5.2 Použití a úprava Open-Source systému 5.2.1 Joomla . . . . . . . . . . . . . . 5.2.2 Wordpress . . . . . . . . . . . . 5.2.3 Závěr . . . . . . . . . . . . . . . 5.3 Hledání vhodných modulů . . . . . . . 5.3.1 Modul diskuzní fórum . . . . . 5.3.2 Modul kalendář akcí . . . . . . 5.3.3 Vzhled portálu . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

23 23 24 25 25 26 26 26 28 30

. . . . . . . . . . . .

33 33 33 36 37 37 39 39 40 41 41 42 42

4.5

Ganttovy grafy . . . . . . . . . . . . WBS (work breakdown structure) . . Přehled rizik . . . . . . . . . . . . . . 4.4.1 Nenalezení vhodné šablony . . 4.4.2 Nenalezení vhodných modulů 4.4.3 Obsazená doména . . . . . . . Přehled lidských a SW zdrojů . . . . 4.5.1 Lidské zdroje . . . . . . . . . 4.5.2 Softwarové zdroje . . . . . . .

6 Implementace portálu 6.1 Instalace Open-Source systému . . . . 6.1.1 Kroky před instalací . . . . . . 6.2 Instalace modulu diskuzní fórum . . . 6.3 Instalace modulu kalendář akcí . . . . 6.4 Instalace modulu přihlašovací formulář 6.5 Nasazení šablony . . . . . . . . . . . . 6.6 Tvorba obsahu . . . . . . . . . . . . . 6.6.1 Tvorba podstránek . . . . . . . 6.6.2 Tvorba menu . . . . . . . . . . 6.7 Úprava hlavní šablony . . . . . . . . . 6.7.1 Úprava rozvržení . . . . . . . . 6.7.2 Tvorba vlastních pod-šablon . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

7 Testování 45 7.1 Testování modulů . . . . . . . . . . . . . . . . . . . . . . . . 45 7.2 Vkládání příspěvků do fóra . . . . . . . . . . . . . . . . . . . 45 7.3 Vkládání akcí do kalendáře . . . . . . . . . . . . . . . . . . . 45 Závěr

47 xii

Literatura

49

A Ganttovy grafy

51

B Work breakdown structure

53

C Seznam použitých zkratek

55

D Obsah přiloženého CD

57

xiii

Seznam obrázků 3.1 3.2 3.3 3.4

Wireframe Wireframe Wireframe Wireframe

1 2 3 4

-

články a rozhovory . . . . diskuzní fórum . . . . . . kalendář akcí . . . . . . . vkládání akcí do kalendáře

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

11 12 13 14

6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9 6.10 6.11 6.12

Vytvoření konfiguračního souboru Vyplněná údajů o databázi . . . . Základní nastavení . . . . . . . . Instalace Mingle Forum . . . . . Standardní přihlašovací formulář Sexy Login . . . . . . . . . . . . Instalace Montezuma . . . . . . . Tvorba menu . . . . . . . . . . . Tvorba pod-šablon . . . . . . . . Tvorba pod-šablon . . . . . . . . Tvorba pod-šablon . . . . . . . . Inicializace pod-šablony . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

35 36 37 38 38 39 40 41 42 43 44 44

7.1 7.2

Náhled akce v kalendáři . . . . . . . . . . . . . . . . . . . . . . Detail akce . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46 46

A.1 Ganttovy grafy . . . . . . . . . . . . . . . . . . . . . . . . . . .

52

B.1 WBS (work breakdown structure) . . . . . . . . . . . . . . . . .

54

xv

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

Úvod Cíle mé bakalářské práce jsou tři. Hlavním cílem je vytvořit webový portál integrující zprávy a akce z oblasti IT. Neméně důležitou část však tvoří projektový plán, jehož úkolem je dodržování naplánovaných termínů a celková orientace při implementaci portálu. Třetím cílem je dokázat, že portál s administračním rozhraním a všemi popsanými funkcemi je možné vytvořit za minimální náklady v řádech stovek Korun českých. Práce by tak měla sloužit jako inspirace a návod pro ty, kteří chtějí vytvořit portál užitečný pro ostatní a nemají dostatek finančních prostředků pro implementaci portálů na zakázku. Bakalářská práce je rozdělena do osmi kapitol. V první kapitole je zachycen záměr této práce. Čtenář se dozví, co portál obsahuje, z jakého důvodu vlastně vzniká a čeho chci jeho tvorbou dosáhnout. Ve druhé kapitole provádím analýzu konkurenčních portálu, podrobně zde rozeberu čtyři servery a popíšu jejich hlavní výhody a nevýhody. Třetí kapitola popisuje, z jakých částí se portál skládá. Do první části budou pravidelně vkládány články od IT expertů, do druhé přepisy tématických rozhovorů s IT experty, třetí a troufám si říct nejdůležitější část, obsahuje kalendář akcí. Události do tohoto kalendáře můžou vkládat jak registrovaní uživatelé, tak administrátor. Cílem je integrovat veškeré události typu přednášky, workshopy a semináře z oblasti IT do této stránky. Čtvrtou částí je diskuzní fórum, ve kterém je ponechán prostor pro vyjádření vlastních názorů čtenářů a návštěvníků portálu. Projektový plán je znázorněn ve čtvrté kapitole. Tento plán slouží pro udržení kontroly nad návrhem a implementací portálu samotného. V páté kapitole se věnuji výběru vhodných technologií. Rozebírám výhody a nevýhody jak implementace na zakázku, tak použití Open-Source systému. Hlouběji jsem zanalyzoval přední Open-Source systémy Wordpress 1

Úvod [22] a Joomla [7], dle jejich parametrů jsem následně vybral vítěze, na kterém byl portál postaven. K vybranému systému bylo také nutné najít vhodné moduly a šablonu. Nejdůležitější částí této práce je kapitola sedmá, ve které je popsána implementace portálu. Podrobně popisuji postup instalace Wordpressu, potřebných modulů a šablony. Dále je zde seznam kroků, které jsem učinil při úpravě šablony. V osmé a tedy poslední kapitole jsou zachyceny výsledky testování, které proběhly před spuštěním portálu.

2

Kapitola

Motivace a záměr Hlavním záměrem této bakalářské práce je vytvořit webový portál integrující články, rozhovory a akce z oblasti IT. Portál bude rozdělen na tři části. První část bude shromažďovat články napsané specialisty z různých oborů IT, a dále také rozhovory s top manažery a předními vývojaři největších českých i zahraničních IT firem. Ve druhé části bude ponechán prostor k vyjádření vlastních názorů čtenářů. K tomu poslouží diskuzní fórum se všemi standardními funkcemi jako vytváření nových vláken, mázání nevhodných komenářů předem stanovenými moderátory atd. To vše bude obohacené o kalendář akcí, do kterého budou moci přispívat jak administrátoři, tak registrovaní uživatelé. Stálí i noví návštěvníci tak budou mít přehled o nadcházejících přednáškách, workshopech1 a dalších zajímavých událostech z oblasti IT. Důvodem tohoto záměru je absence serveru, na kterém by byly zachyceny jak články od IT expertů, tak nadcházející události z IT. Na tento problém jsem narazil již několikrát, když jsem hledal místo, na kterém by byl přehled přednášek a workshopů, které bych rád navštěvoval. S tímto problémem se potýká také řada mých spolužáků, kteří mají zájem dozvědět se „něco víc“ a kvůli absenci kalendáře akcí řadu přednášek zmeškali. To, že by portál uvítala řada dalších lidí, především mých spolužáků, studentů IT a dalších, mě nejvíce motivuje k vytvoření portálu tohoto typu. Neméně důležitý je také fakt, že chci demonstrovat vytvoření portálu za minimální náklady. Docílím toho využitím již hotových komponent. Čte1

Workshop může být diskuze, semináře, který probíhá aktivní formou zúčastněných. Jeho cílem je poskytnout účastníkům lepší porozumění nad danou problematikou. Např. zorganizování simulovaného kulatého stolu atp. [23]

3

1

1. Motivace a záměr náři se seznámí s možnostmi softwaru Open-Source2 , ke kterému lze velmi snadno získat řadu pokročilých modulů a šablon. Svou bakalářskou prací tedy chci dokázat, že se základními znalostmi PHP, HTML a CSS lze vytvořit portál s výše popsanými funkcemi za maximálně 1000 Kč. V další kapitole si hlouběji zanalyzujeme konkurenční portály. Analýza poslouží k tomu, abychom byli schopni navrhnout lepší strukturu a funkce portálu.

2

Open-Source je takový software, k němuž zákazník dostane od jeho tvůrce zdrojový kód a může jej dále upravovat. Jednotlivé definice termínu "open source"se liší zvláště v podmínkách pro další distribuci softwaru. [13]

4

Kapitola

Analýza konkurenčních portálů Při průzkumu zpravodajských portálů vyšlo najevo, že jen jediný z analyzovaných obsahuje jak kalendář akcí, tak články a rozhovory zároveň. Zde je seznam nejznámějších portálů spolu s popisem a částmi, které obsahují a naopak s částmi, které chybí.

2.1

Root.cz

Portál přinášející denní zpravodajství ze světa Linuxu, Unixu, otevřeného software (Open Source) a svobodného software (Free Software). Nalezete zde: • tipy, triky, • nejpopulárnější část tohoto serveru – seriály a tutoriály. Naopak zde chybí: • kalendář akcí

2.2

Ictmanazer.cz

Citace: ICT manažer je nezávislý odborný web, určený primárně pro vedoucí pracovníky IT oddělení a decision makery, který má za cíl objektivně informovat o trendech a novinkách v oblasti podnikového ICT a nabízet informace potřebné pro zefektivnění vašeho byznysu. Nalezete zde: • analýzy a studie od renomovaných analytických agentur, 5

2

2. Analýza konkurenčních portálů • aktuální zpravodajství ze světa ICT, • analýzy situace na trhu, • ekonomická témata spojená s provozem podnikové infrastruktury. Naopak zde chybí: • kalendář akcí

2.3

Computerworld.cz

Comptureworld je jedno z mála online zpravodajství, který je vydáváno také v tištěné formě. Společnost IDG - international data group, která je vydavatelem portálu pak provozuje další servery jako Businessworld, CFOworld, PCworld a další. Na Computerworld naleznete: • články o internetu a komunikaci, • články o vývoji software, • aktuality o inovacích v hardware. Chybí zde: • kalendář akcí

2.4

TyInternety.cz

Portál přinášející články především o startupech3 (začínající projekty), virálech a marketingu na internetu. Zajímavou částí jsou videorozhovory z nejrůznějšími typy osobností, od zakladatelů úspěšných firem po couche v Silicon Valley. Portál Tyinternety.cz je jediným, který obsahuje jak články, tak kalendář akcí. Avšak ani tento server není z našeho hlediska zcela ideální, jelikož články a rozhovory zde zachycené se zabývají vyhrazeným tématům - startupům a internetu. Na portálu najdeme mnoho rozhovorů se zakladateli internetových agentur, ale např. články o nových hardwarových technologiích se zde v podstatě nevyskutují. Nalezete zde: • články o startupech a virálech, 3

Startup je firma, která přichází s inovátorskými myšlenkami a obrovskými plány a ambicemi [15]

6

2.5. Závěr • viderozhovory, • kalendář akcí. Naopak zde chybí: • články o hardware, síťových zařízeních a další.

2.5

Závěr

Provedli jsme analýzu konkurenčních serverů, známe tedy jejich výhody i nedostatky a nyní můžeme definovat funkce portálu student-it.cz.

7

Kapitola

Funkce a cílová skupina portálu 3.1

Cílová skupina

Primární cílovou skupinou portálu budou studenti informatiky. Nezáleží na tom, jestli budou studovat v Praze, Brně, Liberci nebo v jiných českých městech, důležité je, že ve věku studia vysoké školy potřebují znát maximální množství informací pro to, aby se rozhodli, jakým směrem se v budoucnu budou ubírat. Zda-li chtějí pracovat jako IT manažeři, vývojáři webů, nebo třeba CRM konzultanti. Právě to bude cílem portálu student-it.cz - přinést studentům informace, aktuality a tipy ze všech oborů IT a pomoci jim vybrat správný obor. Portál by dále mohl pomoci studentům středních škol při výběru vysoké školy. Bude zřejmé, že portál vznikl na Fakultě informačních technologií ČVUT, což by mohl být silný argument při výběru této fakulty.

3.2 3.2.1

Detailní popis částí portálu Články a rozhovory

Část bude dále rozdělena na dvě sekce – 1) články, 2) rozhovory. Obě části budou spravované pouze administrátorem, ten jako jediný bude moci mazat/přidávat/upravovat příspěvky. 3.2.1.1

Články

Do této sekce budou vkládány články napsané významnými osobnostmi ze světa IT. Tyto články by měly pojednávat o nejnovějších trendech a aktulitách s hlavním zájmem udržet publikum v kroku a nechat jej nahlédnout do 9

3

3. Funkce a cílová skupina portálu zákulisí velkých společností. Budu tedy oslovovat manažery, přední vývojáře, ale i šéfy největších českých IT firem. Pojem „IT firma“ se může zdát příliš obecný, konkrétně budou oslovovány firmy výrabějící Hardware (např. HP, Dell, Sony a další), firmy poskytující konzultační služby jako PriceWaterhouseCoopers, Accenture. Nebudou však také vynechány segmenty jako internetový marketing nebo vývoj mobilních aplikací. 3.2.1.2

Rozhovory

Cílovou skupinou budou, jak tomu bylo u článků, přední české a zahraniční IT firmy. Rozhovory budou opět na téma aktuální trendy v programování, využívání cloudových technologií, rozdíl bude v tom, že téma bude pevně zvolené, zodpovědná osoba povede rozhovor s vybranou osobností, bude jí pokládat otázky a přepis rozhovoru pak bude uveden přímo na portálu.

3.2.2

Diskuzní fórum

Jako u všech diskuzních fór bude hlavním cílem vymezit prostor čtenářům a návštěvníkům k vyjádření svého názoru, popřípadě k rozdmýchání diskuze nad určitým problémem, trendem, programovací/řídící metodikou a podobně. Do diskuzního fóra budou moci přispívat všichni registrovaní uživatelé, a dále zde bude vyhrazena uživatelské skupina „Moderátoři“. Ti se budou starat o bezproblémový průběh diskuzí a dále jim bude udělena pravomoc mazání hrubých, urážejících a dalších nežádoucích příspěvků.

3.2.3

Kalendář akcí

Kalendář akcí bude opět sloužit k informovanosti návštěvníků o nejrůznějších akcích IT komunity. Pod pojmem akce jsou myšleny přednášky významných osobnostích, vědců nebo inovátorů, dále workshopy, webináře4 a další. Užitečnou vlastností kalendáře akcí bude možnost vytváření kategorií akcí. Administrátor tak bude moci nadefinovat kategorii přednášek, kategorii workshopů, ale také kategorii „Deadline“. Jelikož budou hlavní cílovou skupinou studenti informatiky, může být v kategorii Deadline např. termín odevzdávání bakalářské práce, státní závěrečné zkoušky a další důležité datumy. Jednotlivé kategorie se budou lišit barvou, na první pohled tak bude zřejmé, do jaké kategorie akce náleží. 4

Jedná se o poměrně nové pojem, ktery spojuje slova web a seminář. Je tedy zřejmé, že se jedná o seminář, který probíhá v reálném čase na webu [19]

10

3.3. Návrh uživatelského rozhraní

Obrázek 3.1: Wireframe 1 - články a rozhovory

3.2.4

Komenáře pod články a rozhovory

Další užitečnou funkcí portálu bude možnost komentovat vydané články a rozhovory. Čtenář tak jednoduše vyjádří názor k danému tématu, na tento názor bude zase reagovat jiný čtenář a to celé povede ke smysluplné debatě. Přispívat budou moci jak registrovaní uživatelé, tak náhodní návštěvníci portálu.

3.3

Návrh uživatelského rozhraní

K jednotlivým částem je také potřeba navrhnout uživatelské rozhraní. K tomu poslouží program Pencil 5 , ve kterém lze velmi snadno načrtnout wireframy6 . Jelikož je portál rozdělen na 3 části, bude návrh obsahovat 3 wireframy pro tyto části a dále 1 wireframe, která bude znázorňovat vkládání akcí do kalendáře. Níže si tedy ukážeme a popíšeme jednotlivé wireframy. 11

3. Funkce a cílová skupina portálu

Obrázek 3.2: Wireframe 2 - diskuzní fórum

3.3.1

Články a rozhovory

Nejvyšší prioritu má přehlednost webu, struktura je tedy velmi jednoduchá. Vlevo bude menu, vpravo hlavní navigace - menu, vlevo uprostřed obsah a pravý sloupec bude vyhrazen pro přihlašovací formulář/archív článků. Přihlašovací formulář nemusí být nutně v pravém sloupci, je možné jej skrýt, popřípadě zobrazit pouze nadpis a vytvořit formulář tzv. „vyskakovací“.

3.3.2

Diskuzní fórum

Rozvržení stránky zůstává stejné, mění se pouze obsah. Z wireframu je zřejmé, že diskuzní fórum bude rozdělené podle různých kategorií, které se pak budou dále štěpit na podkategorie. Pro lepší přehlednost bude dále uvedeno, kolik témat daná kategorie obsahuje, kolik příspěvků bylo k těmto tématům uveřejněno. Návštěvník se tak ihned zorientuje, které téma je nejdiskutovanější, nebo kde je naopak potřeba vznést námitky a rozvířit diskuzi. 12

3.3. Návrh uživatelského rozhraní

Obrázek 3.3: Wireframe 3 - kalendář akcí

3.3.3

Kalendář akcí

Kalendář akcí je opět rozvržen maximálně jednoduše pomocí tabulky. V hlaviče tabulky bude den a v buňkách pod dny pak jednotlivé datumy. Kalendář bude roztažený na celou šíři stránek, nebude tak problém zanést více akcí do jednoho určitého dne.

3.3.4

Tvorba událostí

Událost lze jednoduše vytvořit kliknutím na určitý den. Nutno podotknout, že k vytvoření události musí být uživatel zaregistrován a přihlášen do administračního rozhraní, do kterého lze vstoupit kliknutím na odkaz „Přidat události“ v levém horním rohu. Po kliknutí na buňku tabulky vyskočí Ajaxové okno, do kterého vyplníme název události, datum, do jaké kategorie akce spadá, místo konání, popis a popřípadě další libovolné parametry. Popis je vhodné vyplnit podrobně, může zde být odkaz na oficiální webové stránky plánované akce, program a další náležitosti. V další kapitole vytvoříme projektový plán, který bude obsahovat harmonogram, přehled rizik a další části potřebné k udržení projektu pod kontrolou. 5 6

Jednoduchý ale efektivní nástroj pro tvorbu wireframů [14] Zjednodušený model či návrh, který definuje obsah a funkce webových stránek.

13

3. Funkce a cílová skupina portálu

Obrázek 3.4: Wireframe 4 - vkládání akcí do kalendáře

14

Kapitola

Projektový plán Před zahájením implementace je nutné vytvořit projektový plán. Ten se skládá z následujících částí: časový harmonogram, Ganttovy grafy7 , WBS (work breakdown structure) [18], přehled rizik a jejich případné mitigace, přehled potřebných lidských a softwarových zdrojů.

4.1

Časový harmonogram

Jednotlivé činnosti jsou pro zachování lepšího pořádku a přehledu rozděleny do jednotlivých kategorií. Začátek implementace je naplánován na 8.1.2013. Návrh user interface • Tvorba wireframů: 8.1. - 10.1.2013 Nalezení software • Open-Source – Testování Joomla: 11.1.2013 – Testování Wordpress: 14.1.2013 • Nalezení modulů – Modul diskuzní fórum : 15. - 16.1.2013 – Modul kalendář akcí: 17. - 18.1.2013 7

A work breakdown structure (WBS) is a model of the work to be performed in a project organized in a hierarchical structure. The WBS is an important tool which helps you keep an overview of the project [5]

15

4

4. Projektový plán • Nalezení šablony: 21. - 22.1.2013 Instalace • Instalace Open-Source: 23.1.2013 • Instalace modulů – Instalace diskuzního fóra: 24.1.2013 – Instalace kalendáře akcí: 25.1.2013 – Instalace modulu Sexy Login: 28.1.2013 • Nasazení šablony: 29.1.2013 Tvorba obsahu • Tvorba menu: 30.1.2013 • Tvorba podstránek: 31.1.2013 • Úprava rozvržení: 1.2. - 5.2.2013 • Tvorba pod-šablon: 6.2. - 8.2.2013 Testování • Testování modulů – Vkládání příspěvků do fóra: 11.2.2013 – Vkládání akcí do kalendáře: 12.2.2013

4.2

Ganttovy grafy

Pro lepší orientaci jsem vytvořil pomocí free nástroje GanttProject Ganttovy grafy. Lze z nich snadno vyčíst, jaké činnosti na sebe navazují, kolik zaberou času a podobně. Jelikož je graf rozsáhlý a písmo v náhledu nemusí být čitelné, umístil jsem celé schéma do přílohy A.

4.3

WBS (work breakdown structure)

WBS lze přeložit jako hierarchická struktura činností. Jednotlivé elementy jsou rozkládány na menší a menší, dokud nevzniknou jednotlivé pracovní balíky. Tyto pracovní balíky jsou pak použity v Ganttových grafech. V našem případě vypadá WBS takto: B 16

4.4. Přehled rizik

4.4

Přehled rizik

Rizika v našem případě můžeme rozdělit na obecná a specifická. Mezi obecná řadíme ta, která se vyskytují u všech projektů. Jmenujme například nedodržení termínů, využití více zdrojů než bylo původně alokováno a další. Těmito riziky se zabývat nebudeme, naopak si podrobně rozepíšeme rizika specifická pro náš projekt. U každého rizika odhadneme pravděpodobnost, s jakou může nastat, škody, které může napáchat a dále také určíme, zda-li se riziku můžeme vyhnout, popř. jak napravit jeho dopad.

4.4.1

Nenalezení vhodné šablony

Při hledání šablony může nastat situace, kdy se nám nepovede nalézt takovou šablonu, která bude splňovat všechny naše kritéria. 4.4.1.1

Pravděpodobnost rizika

Pravděpodobnost toho, že nenajdeme potřebnou šablonu je mizivá. Jen na oficiální stránkach wordpress.org se nachází 1759 šablon, šance, že žádná z nich nebude splňovat naše nenáročná kritéria je blížíce se nule. 4.4.1.2

Řešení dopadu rizika

Pokud se opravdu stane, že nenajdem vhodnou šablonu, bude nutné navrhnout vlastní design stránek, ten následně nakódovat a zasadit do šablonovacího systému Wordpress.

4.4.2

Nenalezení vhodných modulů

Při hledání modulů může nastat situace, kdy nenajdem vhodný modul dle našich kritérií. 4.4.2.1

Pravděpodobnost rizika

Stejně jako u hledání vhodné šablony je pravděpodobnost toho, že nenajdeme vhodný modul mizivá. Při zadání dotazu „event calendar“ na oficiálních stránkách wordpress.org je nalezeno 16 modulů a při dotazu „forum“ dokonce více jak 1000 modulů. Pravděpodobnost toho, že si z těchto modulů nevybereme takový, který by odpovídal našim požadavkům je tedy opět blízká nule. 17

4. Projektový plán 4.4.2.2

Řešení dopadu rizika

V případě, že bychom nenašli vhodný modul, nabízejí se dvě řešení. Úprava stavajícího Může se stát, že modul, který jsme našli, splňuje většinu funkcionalit, které potřebujeme, ovšem dílčí funkce zde chybí. V takovém případě budeme postupovat tak, že daný modul patřičně upravíme. Naprogramování nového Pokud nenajdeme modul, který by alespoň z části splňoval naše kritéria, bude nutné modul naprogramovat vlastními silami. K tomu bude třeba znalost PHP a MySQL, a dále také API wordpressu [21].

4.4.3

Obsazená doména

Na počátku jsme zvolili doménu vhodnou pro daný portál - student-it.cz. Může však nastat situace, že tuto domény již obsadil někdo před námi.

4.4.3.1

Pravděpodobnost rizika

Vzhledem k tomu, že již bylo registrováno více jako 145 miliónu domén8 , a slova „student“ a „it“ v požadované doméně obsažená jsou velmi častá, pravděpodobnost, že bude daná doména obsazená je středně vysoká. Jedná se pouze o hrubý odhad a vzhledem k varibialitě trhu s doménami není možné přesné číslo spočítat.

4.4.3.2

Řešení dopadu rizika

V případě, že bude doména student-it.cz obsazená, budeme muset najít jinou volnou doménu. Jedním z hlavních kritérií je to, aby obsahovala slovo „it“. Nástroj pro odhalení obsazenosti domény je k dispozici u každé společnosti poskytující webhosting, použijeme proto například nástroj společnosti Wedos a.s. ([20]), kam stačí zadat název domény a kliknout na tlačítko „Ověřit“. 8

18

K 15. květnu eviduje registr domén 145,254,307 zaregistrovaných domén [9]

4.5. Přehled lidských a SW zdrojů

4.5 4.5.1

Přehled lidských a SW zdrojů Lidské zdroje

Níže jsou sepsány veškeré lidské zdroje uváděné v MD’s (man day = 8 hodin práce člověka) potřebné k vykonání dané činnosti. Návrh user interface • Tvorba wireframů: 3MD’s Celkem: 3MD’s Hledání vhodné softwaru • Hledání open source systému – Testování Joomla: 1MD – Testování Drupal: 1MD – Testování Wordpress: 1MD • Hledání modulů – Hledání a testování modulu pro diskuzní fórum: 1.5MD – Hledání a testování modulu pro calendar akcí: 1.5MD – Hledání vhodné šablony: 1MD Celkem: 7MD’s Instalace • Instalace Open source: 0.5MD • Instalace modulů – Instalace diskuzního fóra: 1MD – Instalace kalendáře akcí: 1MD – Nasazení šablony: 0.5MD Celkem: 3MD’s Tvorba obsahu • Úprava hlavní šablony: 2MD 19

4. Projektový plán • Tvorba menu: 1MD • Tvorba pod-šablon: 3MD’s Celkem: 6MD’s Testování • Testování modulů – Vkládání příspěvků do diskuzního fóra: 1MD – Vkládní akcí do kalendáře: 1MD – Vkládání rozhovorů: 0.5MD – Vkládání článků: 0.5MD Celkem: 3MD’s Počet MD’s potřebný k analýze, nasazení a testování webového portálu: 22MD’s Standardní projektová rezerva: 20% = 5MD’s Celkový počet MD’s: 27MD’s

4.5.2

Softwarové zdroje

K instalaci a provozování webového portálu jsou tedy zapotřebí následující technologie: • Open-Source Wordpress, jehož provoz vyžaduje: • Apache server, • MySQL, • PHP. Tyto technologie lze pořídit dvěma způsoby: 1. Pronájem vlastního serveru, 2. Pronájem webhostingu. 20

4.5. Přehled lidských a SW zdrojů Pronájem vlastního serveru + instalace libovolných technologií + vysoká zátěž (desítky až stovky tisíc uživatelů/den) - vysoká cena (cca 500Kč/měsíc a více) - nutnost vlastní konfigurace a správy serveru Pronájem webhostingu + nízká cena (cca 30 - 150Kč/měsíc) + kvalitní podpora a správa - technologie určené dodavatelem - nižší zátěž (tisíce uživatelů/den) Pro naše účely postačí standardní balíček webhostingu společnosti Wedos, a.s. za minimální cenu 30Kč/měsíc [8]. Parametry: • MySQL: 5.5 • PHP: 5.3, 5.4 • neomezený počet emailových schránek • průměrná návštěvnost: tisíce uživatelů/den

21

Kapitola

Výběr vhodných technologií Webový portál student-it.cz lze vytvořit různými metodami: 1. implementací na zakázku, 2. použitím a úpravou Open-Source systému. U obou způsobů rozebereme výhody i nevýhody a nakonec vybereme optimální řešení.

5.1

Implementace na zakázku

U této možnosti jsem postupoval následujícím způsobem: vybral jsem 2 různé firmy, zabývající se vývojem webů na zakázku, poslal jim požadované funkce a části portálu. Firmy vypracovaly nabídky, které vypadaly takto (firmy si nepřály zveřejnit svůj název): Cenová nabídka pražské firmy: • Grafický návrh 3 podstran - 5 000,• Kódování HTML a CSS - 3 000,• Implementace požadovaných modulů - 8 000,Celkem - 16 000,- (bez DPH). Cenová nabídka ostravské firmy • Grafický návrh + kódování - 6 000,23

5

5. Výběr vhodných technologií • Nasazení na firemní CMS (obsahuje funkce diskuzní fórum, vkládání článků) - 5 000,• Implementace modulu kalendář akcí - 8 000,Celkem - 19 000,- (bez DPH). Výhody: • splnění požadavků na míru, • kvalitní řešení s ohledem na zkušenosti firem. Nevýhody: • vysoká cena

5.2

Použití a úprava Open-Source systému

Další možností je použití Open-Source systému. Open-Source (česky otevřený zdroj) je systém, který běží pod licencí GPL 9 a lze ho tedy zdarma stáhnout, upravovat a používat. Na jeho vývoji se podílí tisíce lidí na celém světě. Výhodou je právě nulový náklad za tento systém, rozsáhlá komunita uživatelů a vývojářů, kteří dokáží poradit téměř s jakýmkoliv problémem. Dalším obrovským plusem je řada modulů a šablon dostupných zcela zdarma. Open-Source systémů je k dispozici několik typů, ať už CMS (content management system) pro jednoduchou správu webu, nebo ecommerce (řešení pro eshopy) nebo např. classifieds scripts (systémy na míru pro realitní kanceláře, autobazary a další). Pro naše účely bude vhodný právě CMS - content management system. Zbývá už tedy vybrat ideální řešení. Vybírat můžeme z desítek až stovek takových systému, jmenujme např. Drupal, Joomla, Wordpress, Concrete, Lepton, Composite a spoustu dalších. Dle hodnocení, referencí uživatelů [12], [16] a vlastních zkušeností jsem do užšího výběru zařadil systémy Wordpress [21] a Joomla [7]. Právě z těchto kandidátů vybereme výherce, na kterém postavíme portál student-it.cz. 9

GNU GPL (GNU General Public License) je softwarová licence řešící především otázku přístupnosti a distribuce zdrojových kódů softwaru. Je koncipována tak, že autor je povinen zpřístupnit zdrojové kódy programu, pokud se rozhodne své dílo (re)distribuovat [6]

24

5.2. Použití a úprava Open-Source systému

5.2.1

Joomla

Joomla patří k nejrozšířenějším CMS. Její výhodou je obrovská modulárnost. V praxi to vypadá tak, že z obyčejného webu můžete pomocí modulů dostupných pro Joomlu vytvořit plnohodotný firemní web s kalendářem, poptávkovým formulářem, diskuzním fórem a řadou dalších věcí. Jedním z největších modulů je Virtuemart, na kterém lze postavit internetový obchod. Moduly pro Joomlu vyvíjejí jak dobrovolníci, tak firmy. Lze je proto stánout jednak zdarma, jednak placené. Od placených modulů můžeme obecně očekávat vyšší kvalitu a to právě díky firmě, která za vývojem stojí. Joomla je postavená, tak jako většina Open-Source systémů na technologich PHP a MySQL, což přináší jak výhody, tak nevýhody. PHP ovládá téměř každý programátor, a je proto velmi jednoduché vyvinout nebo poupravit část Joomly. To však bohužel přináší hlavní nevýhodu - Joomlu často upravují lidé, kteří programují velmi krátce a dopouštějí se často školáckých chyb. Takovéto chyby pak stály za jednou z největších „děr“, která se u Joomly objevila a kvůli které bylo napadnuto tisíce webů na ní postavených. Hacker mohl jednoduše nahrát na FTP libovolný počet souborů, obsahující skripty na úpravu uživatelských rolí. Nastavit libovolnému uživateli administrátorská práva pak bylo otázkou minuty. Uživatel s právy administrátora pak mohl dále upravovat stránky a vkládat další skripty. U jednoho z webů byl dokonce zaznamenán masivní DDoS útok, kvůli kterému dokonce poskytovatel hostingu omezil funkčnost tohoto webu. Výhody: • Modulárnost • Rozsáhlá podpora stávajících uživatelů • Šablony zdarma • Moduly zdarma Nevýhody: • Bezpečnostní „díry“ způsobující napadnutelnost hackery • Pro naše účely příliš mohutné řešení

5.2.2

Wordpress

Wordpress je CMS oblíbený především u bloggerů. Za tímto účelem také tento systém vzniknul. Jeho posláním je umožnit uživateli jednoduché vkládání příspěvků (postů), které lze archivovat, tagovat nebo třeba vkládat 25

5. Výběr vhodných technologií do rubrik. S postupem času se z Wordpressu vyvinul systém s podobnými možnostmi, jako Joomla, jelikož spoustu freelancerů a firem začla taktéž vyvíjet moduly všeho druhu. Kromě internetového obchodu tak na Wordpressu můžete vytvořit diskuzní fórum, kalendář akcí, integrované vkládání postů Google+ a další. Oproti Joomle je Wordpress velmi čistě napsaný, díky intuitivní administrační verzi velmi snadno ovladatelný. Výhody: • čistý kód • rychlé jádro (optimalizovaný kód) • intuitivní a snadné ovládání • moduly zdarma • šablony zdarma Nevýhody: • z našeho pohledu žádné nejsou

5.2.3

Závěr

Ikdyž Joomla byla zpočátku favoritem, ukázalo se v průběhu testování a hlubší analýzy, že se jedná o příliš robustní a nekonzistentní řešení. Wordpress je především díky své jednoduchosti jednoznačně vhodnější systém a proto jsem se rozhodl pro něj.

5.3

Hledání vhodných modulů

Dalším krokem při tvorbě webového prtálu bude nalezení vhodných modulů. Jelikož jsem v předchozím kroku vybral Open-Source Wordpress, budu hledat moduly právě pro tento systém.

5.3.1

Modul diskuzní fórum

Hledání modulů pro Wordpress je velmi snadné. Do vyhledávače v sekci „Plugins“ ([24]) stačí napsat přibližný název nebo funkcionalitu modulu a ihned se zobrazí několik jednotek až tisíc výsledků. Po napsání slova “Forum” je nalezeno přes 1000 modulů, stačí tedy vybrat ten správný. Jako první ukazatel nám poslouží hodnocení daného modulu. Vyšší známka v 26

5.3. Hledání vhodných modulů hodnocení (na stupnici 0 - 5 hvězdiček) logicky znamená vyšší kvalitu modulu, jelikož na známkování se podílejí uživatelé, kteří jej používali/používají. Na první stránce mě zaujalo hned několik modulů: • Mingle Forum [10], • Vanilla Forums [17] • Bublaa embeddable forums [4]. Podrobněji si je rozebereme. 5.3.1.1

Mingle Forum

Jako první pozitivní věc vidím precizní a podrobný popis modulu. K dispozici je demoverze, na které lze popsané funkce otestovat, požadavky, jazyky, do kterých je Mingle Forum přeloženo a další podstatné parametry. Zajímavá jsou také data, Mingle forum stáhlo již 308 760 uživatelů a průměrná známka je 3,9 hvězdiček. Mezi funkce, které mě zaujali nejvíce patří: • propracovaná kontrola proti spamu, • zamknutí určitého fóra, • možnost psaní soukromých zpráv mezi uživateli, • desítky dalších. 5.3.1.2

Vanilla Forums

Modul Vanilla Forums se těší o poznání menší oblíbenosti než Mingle Forum - stáhlo jej zatím řádově méně uživatelů – „pouze“ 45 975 a hodnocení má o 4 desetinná místa horší - 3,5. Co se týče popisu, autoři uvádějí spíše obecnější údaje, např. kolik vývojářů na modulu pracuje, jaké novinky obsahuje a podobně. Obrovskou nevýhodou je fakt, že modul není zdarma, nýbrž placený. Plná verze s parametry: • shlédnutí 1M+ stránek, • denní zálohy, • ssl šifrování. stojí 549 dollarů (v přepočtu téměř 10 000,-) měsíčně, což je pro naše účely zcela nepřijatelné. 27

5. Výběr vhodných technologií 5.3.1.3

Bublaa Embeddable Forums

Popis modulu je stejně jako u Vanilla Forums opět velmi precizní. Funkce jsou rozděleny do několika hlavních kategorií, jako například interface, moderování fóra, sociální sítě a další. Dále máme možnost vyzkoušet všechny funkce fóra na ukázkové demoverzi. Mezi nejpoužitelnější funkce můžeme zařadit: • optimalizované pro prohlížeče smartphonů s OS Android a iOS, • možnost sdílet témata a příspěvky na Google+, Facebooku a Twitteru • blokování uživatelů. 5.3.1.4

Závěr

Posledním krokem bude vybrat vítěze z výše uvedených kandidátů. Modul Vanilla Forums absolutně nepřipadá v úvahu kvůli extrémně vysokým nákladům na jeho provoz. Bublaa Embeddable Forums vypadají použitelně, v jeho neprospěch však hraje poměrně nízky počet stažení - 9 311. Jasným vítězem se tak stává Mingle Forum, u kterého jsem nenašel téměř žádné nevýhody. Nespočet funkcí, vysoké hodnocení a statisíce stažení jsou naopak velmi silným argumentem, proč si tento modul vybrat.

5.3.2

Modul kalendář akcí

Stejně jako u modulu pro diskuzní fórum budeme nyní hledat modul pro kalendář akcí. Do vyhledávače v sekci extensions napíšeme: „Event calendar“. Dostupných modulů je zde o poznání méně - 16, ovšem i ty k našemu výběru postačí. Naším hlavním kritériem je možnost vytváření akcí registrovanými uživateli. Po této selekci zbývají už jen 2 moduly: • All-in-One Event Calendar [2], • Ajax Event Calendar [3]. 5.3.2.1

All-in-One Event Calendar

Opravdu profesionální modul, o čemž svědčí hned několik faktů - počet stažení: 378 208, průměrné hodnocení 4,3, plný počet hvězdiček udělilo dokonce 290 uživatelů. Funkce modulu jsou rozděleny podle uživatelských rolí - klasických návštěvníků stránek a majitelů stránek. Uživatelé mohou například: 28

5.3. Hledání vhodných modulů • filtrovat události podle tagů a kategorií, • jednoduše sdílet kalendář s Google Calendar, Apple Calendar a dalšími. Majitelům stránek je umožněno: • importovat ostatní kalendáře, • vytvářet různé administrátorské role. Jako hlavní výhodu vidím 6 různých způsobů zobrazení kalendáře. Jednak je možné zobrazit události klasickým způsobem, tj. v mřížce ať už po týdnech nebo měsících, další možností je zobrazení obrázků přiřazených k události spolu s jejím nadpisem, což udělá z klasického kalendáře doslova grafickou bombu. 5.3.2.2

Ajax Event Calendar

Tento modul patří podobně jako předchozí ke špičče ve své kategorii. Své o tom může říct 223 uživatelů, kteří ohodnotili modul 5 hvězdičkami. Průměrná známka se tak vyšplhala na neuvěřitelných 4,7 a počet stáhnutí na 178 920. Popis je opět precizní a podrobný, můžeme tak snadno vyčíst, jakými funkcemi se modul pyšní. Pro utvoření dokonalé představy slouží jednak demoverze, na které lze funkčnost otestovat a jednak showreelové video, které ve zhruba 1 minutě představí hlavní funkce modulu. Jako hlavní výhody můžeme jmenovat: • zařazení událostí do různých kategorií, • možnost vytvoření události registrovaným uživatelem, • překlad do 23 světových jazyků, • a mnoho dalších. 5.3.2.3

Závěr

Díky své jednoduchosti a vysokému hodnocení jsem vybral modul Ajax Event Calendar. 29

5. Výběr vhodných technologií

5.3.3

Vzhled portálu

Nyní stojíme před rozhodnotím, zda-li vybrat Wordpress šablonu nebo vytvořit design na míru. Použití již hotové šablony má oproti vlastní grafice řadu výhod. V případě vlastního designu je nutné nejprve oslovit webdesignera, který má s tvorbou grafiky na míru zkušenost. Spolupráce většinou probíhá tak, že mu zadáme bližší specifikace jako např. barvy, rozvržení apod., poté nám grafik vyhotoví první návrh, který připomínkujeme, dostaneme druhou opravenou verzi a tento cyklus se několikrát (záleží na schopnosti grafika a náročnosti klienta) opakuje. V momentě, kdy je grafický návrh podle našich představ, jej musíme nakódovat do HTML a CSS. Výsledný kód pak navíc musíme zasadit do šablonovacího systému Wordepressu. Takto vytvořený design stránek je pak řádově náročnější jak časově, tak finančně (vezmeme-li v potaz, že standardní grafický návrh stojí řádově tisíce korun, kodérské práce jsou účtovány ve stovkách na hodinu, o zasazení kódu do šablonovacího systému nemluvě. Všechny tyto starosti jsou při použití šablony odpadají, ušetříme tak hodiny práce, tisíce korun a to při dosažení stejného, ne-li lepšího výsledku. Šablony jsou totiž často responsivní (zobrazitelné nejen na pc, ale také na smartphonech a tabletech), mají validní kód, precizní zpracování grafickýh prvků a další výhody. 5.3.3.1

Hledání šablony

Open-Source jsme vybraly, moduly také, před samotnou implementací už tedy zbývá pouze nalezení vhodné šablony. Podobně jako u hledání modulů bude díky propracovanému systému oficiálních webových stránek www.wordpress.org nalezení šablony poměrně snadné. V sekci Themes se nachází 1750 různých šablon. Našimi kritérii jsou rozvržení a použíté barvy. Konkrétně potřebujeme, aby šablona byla modrá, popř. modro-bílá, vlevo nahoře se nacházelo logo, vpravo nahoře menu a obsah bylo možné rozvrhnout buď do jednoho hlavního nebo dvou sloupců. Tomuto kritériu vyhovují dvě šablony: • Annotum Base [1] • Montezuma [11]. Obě si opět podrobněji rozebereme. 5.3.3.2

Annotum Base

Šablona splňuje naše požadavky, totiž modro-bílou barvu a možnost editace rozvržení. Zbylé vlastnosti jsou ale spíše k neprospěchu, průměrné hodno30

5.3. Hledání vhodných modulů cení je 2,9 přičemž jej hodnotilo 23 uživatelů. Další nevýhodou je statický design a celkem odbytý popis, ze kterého nevyčteme příliš mnoho podstatných věcí. 5.3.3.3

Montezuma

Šablona Montezuma se tváří o poznání lépe. Jednak splňuje naše kritéria a jednak se pyšní responsivním designem, který zajišťují technologie HTML5 a CSS3. O kvalitě svědčí jednak vysoké hodnocení 4.5 hvezdiček, a jednak počet stažení přes 148 000. Další výhodou je automaticky generované submenu, možnost upravovat CSS styly přímo z administračního rozhraní Wordpressu, možnost měnit ikonky horního topmenu a další. 5.3.3.4

Závěr

Z kandidátů výše je jasným vítězem šablona Montezuma. Vítězství si zasloužila jednak precizním designem a jednak velkým množstvím nadstandardních funkcí. Nyní už nás čeká samotná implementace portálu.

31

Kapitola

Implementace portálu Dostáváme se k nejdůležitější části této práce - implementaci portálu. Nejprve bude nutné nainstalovat open-source systém, tedy Wordpress, který jsme vybrali. Dále proběhne instalace jednotlivých modulů a nakonec nasadíme vybranou šablonu. Všechny tři kroky jsou podrobně sepsané v následujícíh třech kapitolách.

6.1

Instalace Open-Source systému

K instalaci Wordpressu budou potřeba následující technologie: • PHP 5.2.4. a vyšší • MySQL 5.0 a vyšší K tomu, abychom tyto technologie mohli provozovat, potřebujeme Apache server, a samozřejmě internetové připojení. Apache server spolu s PHP a MySQL poskytují snad všechny webhostingové společnosti. Díky dlouholeté spokojenosti se službami využijeme firmu Wedos a.s.

6.1.1

Kroky před instalací

Krok za krokem projdeme instalaci systému od registrace domény po vytvoření databáze. 6.1.1.1

Registrace domény

Nejprve je nutné zaregistrovat požadovanou doménu. To uděláme na stránce: http://hosting.wedos.com/cs/domeny.html. * obrazek Po vyplnění domény 33

6

6. Implementace portálu a stisknutí tlačítka “Ověřit” zjistíme, zda-li je doména volná. Pokud ano, klikneme na tlačítko “Objednat”. Objednávkový proces je klasický, stačí vyplnit uživatelské jméno, heslo, fakturační údaje atd. Jakmile objednávku dokončíme a zaplatíme požadovanou částku, můžeme přejít na objednání hostingu samotného. 6.1.1.2

Objednání hostingu

Na stránce: https://hosting.wedos.com/cs/webhosting/order.html?step=1 vybereme, k jaké doméně chceme hosting objednat (zde vyberem výše registrovanou doménu), zvolíme typ hostingu, kde bude stačit základní verze v ceně 25 Kč/měsíc. Opět projdeme objednávkovým procesem a zaplatíme. 6.1.1.3

Založení ftp účtu

Pro založení ftp účtu musíme nejprve do záložky “Webhosting”, poté kliknout na danou doménu a v levém sloupci na “Nový účet”. Zde máme možnost vyplnit koncovku uživatelského jména a zadání kořenové adresy, do které má daný účet práva vstoupit. Tato funkcionalita poslouží v případě, že vytváříme různým uživatelům různé ftp účty, přičemž každý může editovat soubory pouze v dané složce. Po vyplnění těchto údajů přijde na email souhrn přístupových ftp údajů spolu se serverem, uživatelským jménem a vygenerovaným heslem. Poté se již můžeme pomocí protokolu ftp přihlásit. 6.1.1.4

Vytvoření MySQL databáze

Podobně jako u zákládání FTP účtu musíme jít do záložky “Webhosting”, kliknout na danou domény a v levém sloupci na “Nová databáze”. Vyplníme název, selectbox s typem ponecháme na výchozí hodnotě a stiskneme tlačítko vytvořit. Na email přijde souhrn informací o vytvořené databázi, tedy server, uživatelské jméno, název databáze a vygenerované heslo. Na adrese https://pma.wedos.net/ pak snadno zkontrolujeme platnost zaslaných údajů. 6.1.1.5

Instalace Wordpress

Pro instalaci Wordpressu je nutné systém nejprve stáhnout a to na adrese: http://wordpress.org/download/. V pravém horním rohu nalezneme tlačítko Download Wordpress X.X.X, kde X.X.X je označení aktuální verze. Při tvorbě této práce je aktuální verze 3.5.1. Po stistknutí tlačítka je stažen .zip balíček velikosti cca 5 MB. Tento balíček je nutné rozbalit a jeho 34

6.1. Instalace Open-Source systému

Obrázek 6.1: Vytvoření konfiguračního souboru

obsah uploadovat na ftp daného hostingu. Protokol ftp podporuje několik klientů, jmenujme např. TotalCommander pro Microsoft Windows nebo FileZille často využívaná na Mac OS. Ve FileZille je nutné otevřít “Site manager” a vyplnit přístupové údaje, které jsme obrdželi emailem. Po připojení uploadujeme veškerý obsah zip balíčku na server. Instalace samotného Wordpressu se pak provádí přes internetový prohlížeč. Do adresního řádku zadáme adresu serveru a jsme provedeni instalací, která je rozdělena do několika kroků: • vytvoření konfiguračního souboru, • vyplnění údajů o databázi, • základní nastavení (název stránek, uživatelské jméno administrátora, . . . ), • závěrečná stránka s oznámením o úspěchu/neúspěchu.

6.1.1.6

Vytvoření konfiguračního souboru

Tento krok je velmi jednoduchý, protože se o něj Wordpress postará sám. Na základě aktuálního nastavení hostingu a na něm běžícího PHP, Apache a MySQL vytvoří konfigurační soubor se všemi důležitými údaji. Pro lepší ilustraci přikládám snímek tohoto kroku, soubor se vytvoří jednoduše kliknutím na tlačítko: “Create a Configuration File”. 35

6. Implementace portálu

Obrázek 6.2: Vyplněná údajů o databázi

6.1.1.7

Vyplnění údajů o databázi

Dalším krokem bude vyplnění přístupových údajů k databázi MySQL. Tyto údaje najdem v emailu, který nám Wedos zaslal po vytvoření databáze. Pro lepší znázornění opět náhled stránky. 6.1.1.8

Základní nastavení

V základním nastavení je nutné vyplnit údaje jako název stránek, který se použije jako title, uživatelské jméno a heslo administrátora stránek a email. Náhled: 6.1.1.9

Úspěšná instalace

V případě vyplnění všech potřebných údajů je Wordpress úspěšně nainstalován a můžeme se pustit do instalace jednodlivých modulů.

6.2

Instalace modulu diskuzní fórum

Instalace modulů je ve Wordpressu velmi jednoduchá. Po přihlášení do administrační sekce (domena.cz/wp-admin) jdeme do sekce Pluginy > Instalce pluginů a do vyhledávacího políčka zadáme název modulu (pluginu), který 36

6.3. Instalace modulu kalendář akcí

Obrázek 6.3: Základní nastavení chceme nainstalovat. Wordpress zobrazí všechny výsledky, které odpovídají našemu dotazu, v tomto případě tedy: “Mingle Forum”. Přehled nalezených pluginů pak vypadá takto: Po kliknutí na odkaz: “Instalovat” se plugin automaticky nainstaluje a je možné jej libovolně upravovat. Nastavení a úprava modulů a šablony bude podrobně popsána v sekci Úprava modulů.

6.3

Instalace modulu kalendář akcí

Modul kalendář akcí nainstalujeme obdobným způsobem. Do vyhledávacího pole napíšeme: “All-in-One event calendar” a stiskneme “Instalovat”.

6.4

Instalace modulu přihlašovací formulář

Standardně se do Wordpressu přihlašuje přes administrační sekci, v části domena.cz/wp-admin, náhled vypadá takto: Jelikož ale potřebujeme, aby byl portál jednoduše ovladatelný pro každého uživatele, potřebujeme zain37

6. Implementace portálu

Obrázek 6.4: Instalace Mingle Forum

Obrázek 6.5: Standardní přihlašovací formulář

38

6.5. Nasazení šablony

Obrázek 6.6: Sexy Login

tegrovat přihlašovací formulář přímo do stránky. K tomuto účelu poslouží modul “Sexy Login”. Nainstalujeme jej velmi jednoduše, v sekci Pluginy stačí do vyhledávacího pole napsat “sexy login” a výsledek se nachází hned prvním místě. Stiskneme tlačítko “Instalovat” a modul je nainstalovaný. Aby se mohl přihlásit každý návštěvník, je nutné upravit implicitní nastavení. Nejprve tedy půjdeme do sekce Nastavení > Obecné, kde zaškrtneme checkbox “Zaregistrovat se může každý”. Dále půjdeme do Pluginy > Přehled pluginů a u pluginu Sexy Login > Nastavení zaškrtneme checkbox Enable Registration Form. Po této úpravě bude formulář rozdělene na dvě části - přihlášení a registrace.

6.5

Nasazení šablony

Instalace šablony probíhá podobně jako u modulů. Do vyhledávácího políčka v sekci Vzhled > Šablony a v záložce Instalace šablony napíšeme název vybrané šablony, v tomto případě Montezuma. Po nalezení vhodného výsledku klikneme na Instalovat a šablona je nainstalována.

6.6

Tvorba obsahu

Poté, co jsme nainstalovali Wordpress, potřebné moduly a šablonu zbývá vytvořit obsah v podobě menu a jednotlivých podstránek. 39

6. Implementace portálu

Obrázek 6.7: Instalace Montezuma

6.6.1

Tvorba podstránek

Tvorba jednotlivých podstránek bude velmi jednoduchá. Poslouží k tomu sekce Stránky, kde je vše potřebné.

6.6.1.1

Diskuzní fórum

V záložce Stránky > Vytvoři stránku vyplníme název stránky a do obsahového pole vložíme text: “[mingleforum]”. Ten označuje, že na dané stránce chceme vygenerovat diskuzní fórum. Většina modulů se ve Wordpressu volá právě vložením názvu modulu do hranatých závorek v obsahu dané stránky.

6.6.1.2

Kalendář akcí

U kalendáře akcí postupujeme stejně s jediným rozdílem - do obsahové stránky napíšeme: “[calendar]”, tím zavoláme modul Ajax Event Calendar. 40

6.7. Úprava hlavní šablony

Obrázek 6.8: Tvorba menu 6.6.1.3

Články a rozhovory

Pro sekce články a rozhovory prozatím vytvoříme prázdné stránky, kterým přiřadíme pouze nadpis. Jednotlivé články a rozhovory budou do Wordpressu vkládány jako klasické příspěvky. Tyto příspěvky budou řazeny do dvou kategorií (články, rozhovory), a abychom byli schopni vypsat příspěvky z daných kategorií v daných sekcích, budeme muset tuto funkčnost naprogramovat. Podrobně bude tato úprava rozepsána v kapitole Úprava šablony.

6.6.2

Tvorba menu

Šablona Montezuma má předpřipravené dvě pozice pro menu - vpravo nahoře a vpravo uprostřed stránky. Podle wireframů potřebujeme menu vpravo nahoře, v záložce Vzhled > Menu toto snadno zajistíme. Klikneme na plus v pravé horní části, tím vytvoříme nové menu, které libovolně pojmenujeme. V levé části v záložce “Umístění v šabloně” vybereme u menu 1 ze selectboxu námi vytvořené menu. Ze záložky “Stránky” zaškrtneme všechny předem vytvořené stránky a stiskneme tlačítko “Přidat do menu”. V pravé části pak jednoduše uspořádám stránky do požadované hierarchie. Výsledek pak bude vypadat takto:

6.7

Úprava hlavní šablony

V šabloně potřebujeme upravit dvě části, jednak rozvržení, jednak vzhled samotný. 41

6. Implementace portálu

Obrázek 6.9: Tvorba pod-šablon

6.7.1

Úprava rozvržení

Implicitně je šablona nastavena tak, obsahuje dva sloupce - široký obsah a užší pravý sloupec. Rozvržení tedy můžeme upravovat jen do jisté míry. Lze toho docílit uzpůsobením tzv. widgetů. V sekci Vzhled > Widgety lze jednoduše pomocí drag-and-drop přetáhnout dostupné moduly do pravého sloupce. Toto rozvržení pak zůstává napříč celého webu, což je v našem případě nežádoucí. Našim cílem je na stránkách Články, Rozhovory umístit do pravého sloupce archív článků, a stránky s diskuzním fórem a kalendářem akcí roztáhnout po celé šíři stránek. Abychom toho docílili, musíme vytvořit tzv. pod-šablony, ve kterých nadefinujeme vlastní rozvržení.

6.7.2

Tvorba vlastních pod-šablon

Na dvou typových příkladech si ukážeme, jakým způsobem lze vytváře podšablony. Pro lepší názornost přiložím u obou typů zdrojový kód, u kterého popíšu nejdůležitější řádky. 6.7.2.1

Tvorba vlastních pod-šablon

Důležitých je hned několik částí: 1. řádek 2 - /* Template Name: Forum */ - identifikace šablony, 2. řádek 3 a 29 zajišťují vypsání hlavičky a patičky, 3. řádek 7 - uvozovací div s třídou col12, která má definovanou šířiku 960px a zajišťuje tak, roztažení obsahu na celou šíři stránky, 42

6.7. Úprava hlavní šablony

Obrázek 6.10: Tvorba pod-šablon 4. řádky 15, 16 vypisují obsah dané stránky. Šablona pro kalendář akcí bude vypadat stejně, jediná odlišnost bude v názvu šablony. 6.7.2.2

Podšablony pro články a rozhovory

Opět si rozebereme nejdůležitější části zdrojového kódu: 1. řádek 7 - Obsahuje uvozovací div s třídou col8, která má šíři stanovenou na 640 pixelů, bude tedy možné rozdělit stránku do dvou sloupců. 2. řádek 8 - Tento řádek je klíčový, jelikož volá funkci getCategoryPosts(), která vrátí příspěvky kategorie dle id poslané parametrem (v tomto případě id=6 - články). Funkci bylo nutné naprogramovat a její kód vypadá následovně. Funkce obsahuje klíčový řádek 402, ve kterém se volá knihovní funkce get_posts, který vrátí příspěvky dle zadaného parametru. 3. řádky 12 - 37 se starají o klasický výpis příspěvků - o vypsání nadpisu, data přidání, úryvek a další. 43

6. Implementace portálu

Obrázek 6.11: Tvorba pod-šablon

Obrázek 6.12: Inicializace pod-šablony

4. řádky 39 - 41 vypisují pravý sloupec s widgety, v našem případě je v pravém sloupci jediný widget - archív příspěvků. Každou takto vytvořenou šablonu pak musíme uložit jako php soubor do složky: wp-content/themes/montezuma/SABLONA.php, kde SABLONA je název dané podšablony. Například tedy: wp-content/themes/montezuma/forum.php. Jakmile máme podšablony vytvořené a uložené, stačí jít do administračního rozhraní do detailu stránky, které chceme podšablonu přiřadit. V pravé části vidíme záložku Vlastni stránky > Šablona stránky a zvolit danou podšablonu.

44

Kapitola

Testování Abychom ověřili, že Wordpress a jednotlivé moduly jsou správně nainstalované, musíme portál otestovat. Jelikož jak Wordpress, tak moduly byly již při vývoji dostatečně testovány, bude stačit vytvořit několik testovacích příspěvků do diskuzního fóra a do kalendáře akcí.

7.1

Testování modulů

Nyní otestujeme funkčnost jednotlivých modulů, tedy vkládání událostí do kalendáře akcí a poté vkládání příspěvků do diskuzního fóra.

7.2

Vkládání příspěvků do fóra

Nejprve je nutné se registrovat pomocí formuláře vpravo. Po vyplnění uživatelského jméno a emailu obdržíme heslo, pomocí kterého se přihlásíme. Poté už si vybereme fórum, do kterého chceme položit vložit svůj dotaz. Pro testovací účely jsem vybral Fórum Internetový marketing > SEO a vložil zde dotaz ohledně budování zpětných odkazů. Vše proběhlo bez problémů.

7.3

Vkládání akcí do kalendáře

Pro vložení akce je nutné být přihlášen. Použijeme uživatelské jméno z minulého kroku a v sekci Kalendář klikneme na tlačítko Přidat události. Poté, co jsme přesměrování do administrační sekce a vyplníme všechny požadované údaje o dané události. Výsledek pak vypadá takto: Kritické části byly otestovány a nyní můžeme portál bez obav spustit. Lze jej navštívit na adrese: http://www.student-it.cz. 45

7

7. Testování

Obrázek 7.1: Náhled akce v kalendáři

Obrázek 7.2: Detail akce

46

Závěr Cílem mé práce bylo navrhnout, implementovat a otestovat webový portál. K tomu jsem měl za úkol sestavit projektový plán a mým osobním cílem pak bylo dokázat, že portál lze vytvořit za řádově stovky Korun českých při základních znalostech PHP, HTML a CSS. Všechny cíle se mi podařilo splnit. Nejdříve jsem na základě analýzy konkurenčních serverů navrhl funkce portálu, poté nakreslil wireframy, dále jsem pomocí testování vybral vhodné technologie, na kterých lze portál postavit. Bylo zapotřebí najít Open-Source systém, po zvažování všech pro a proti zvítězil Wordpress, ke kterému bylo vcelku snadné nainstalovat potřebné moduly. Zde jsem opět srovnával jednotlivé varianty a rozhodl se pro Mingle Forum, Ajax Event Calendar a Sexy Login. Podle nakreslených wireframů jsem pak našel vhodnou šablonu s názvem Montezuma. Dalším krokem byla instalace jednotlivých komponent. Díky intuitivnímu ovládání systému Wordpress zde nevznikly žádné problémy, a tak jsem mohl snadno přejít k tvorbě obsahu a úpravě šablony. Zde bylo nutné upravit rozvržení jednotlivých podstran. Poté, co jsem portál dovedl do požadované podoby, zbývalo už jen testování obou modulů, které díky preciznímu výběru dopadlo bez problémů. Co se týče časového plánu, nedodržel jsem sice původně plánovaných 22 pracovních dnů, ale ze standardní 20% rezervy zbyl jeden volný den, výsledek byl tedy hotov za 26 pracovních dnů. Můj osobní cíl byl taktéž splněn, jelikož jediný náklad spojený s vytvořením portálu byl pronájem webhostingu a domény, za které jsem zaplatil 510 Kč a vešel se tak do limitu 1000 Kč. Závěrem bych chtěl říct, že tato bakalářská práce pro mě byla velkým přínosem. Naučil jsem se pracovat s novými nástroji, především pak s ná47

Závěr strojem Pencil, jehož efektivita a jednoduchost mě opravdu nadchly. Dále jsem si osvojil rychlou orientaci mezi jednotlivými Open-Source systémy a naučil se posuzovat jejich kvalitu. Tyto znalosti se budou v budoucnu velmi hodit, jelikož budu schopný vybrat různé systémy pro různé typy projektů, což bude značná konkurenční výhoda proti ostatním absolventům IT. Na druhou stranu věřím, že portál splní účel, s jakým byl vytvořen a totiž informovat návštěvníky o aktuálních trendech v oblasti IT.

48

Literatura [1] Annotum Base. [online], [cit. 2013-05-16]. Dostupné z: http:// wordpress.org/extend/themes/annotum-base [2] All-in-one. [online], [cit. 2013-05-16]. Dostupné z: http://wordpress. org/extend/plugins/all-in-one-event-calendar/ [3] Ajax Event. [online], [cit. 2013-05-16]. Dostupné z: http:// wordpress.org/extend/plugins/ajax-event-calendar/ [4] Bubla embeddable forums. [online], [cit. 2013-05-16]. Dostupné z: http://wordpress.org/extend/plugins/ bublaa-embeddable-forums/ [5] Gantt charts. [online], [cit. 2013-05-16]. Dostupné z: http://www. mindtools.com/pages/article/newPPM_03.htm [6] GNU GPL. [online], [cit. 2013-05-16]. Dostupné z: http://www. abclinuxu.cz/slovnik/gnu-gpl [7] Joomla. [online], [cit. 2013-05-16]. Dostupné z: http://joomla.org/ [8] Webhosting. [online], [cit. 2013-05-16]. Dostupné z: http://hosting. wedos.com/cs/webhosting.html [9] Internet Statistics. [online], [cit. 2013-05-16]. Dostupné z: http://www. whois.sc/internet-statistics/ [10] Mingle forum. [online], [cit. 2013-05-16]. Dostupné z: http:// wordpress.org/extend/plugins/mingle-forum/ 49

Literatura [11] Montezuma. [online], [cit. 2013-05-16]. Dostupné wordpress.org/extend/themes/montezuma

z:

http://

[12] Joomla 2.5.6. [online], [cit. 2013-05-16]. Dostupné z: http: //www.opensourcecms.com/scripts/details.php?scriptid= 39&name=Joomla [13] Open Source. [online], [cit. 2013-05-15]. Dostupné z: http://www. abclinuxu.cz/slovnik/open-source [14] Pencil. [online], [cit. 2013-05-16]. Dostupné z: http://pencil.evolus. vn/ [15] Startup. [online], [cit. 2013-05-16]. Dostupné z: http://startup. lupa.cz/clanky/startupy-vsude-kolem/ [16] WordPress 3.4.1. [online], [cit. 2013-05-16]. Dostupné z: http://www.opensourcecms.com/scripts/details.php?scriptid= 88&name=WordPress [17] Vanilla forum. [online], [cit. 2013-05-16]. Dostupné z: http:// wordpress.org/extend/plugins/vanilla-forums/ [18] WBS (work breakdown structure). [online], [cit. 2013-05-16]. Dostupné z: https://help.sap.com/saphelp_45b/helpdata/en/4c/ 225bd746e611d189470000e829fbbd/content.htm [19] Webinar. [online], [cit. 2013-05-16]. Dostupné z: http://startup. lupa.cz/clanky/startupy-vsude-kolem/ [20] Domény. [online], [cit. 2013-05-15]. Dostupné z: http://hosting. wedos.com/cs/domeny.html [21] Wordpress Api. [online], [cit. 2013-05-15]. Dostupné z: http://codex. wordpress.org/WordPress_APIs [22] Wordpress. [online], [cit. 2013-05-16]. Dostupné z: http://wordpress. org/ [23] Workshop. [online], [cit. 2013-05-15]. Dostupné z: http://www.itbiz. cz/slovnik/human-resources-hr/workshop [24] Plugins. [online], [cit. 2013-05-15]. Dostupné z: http://wordpress. org/extend/plugins/

50

Příloha

Ganttovy grafy

51

A

A. Ganttovy grafy

52

Obrázek A.1: Ganttovy grafy

Příloha

Work breakdown structure

53

B

B. Work breakdown structure

54 Obrázek B.1: WBS (work breakdown structure)

Příloha

Seznam použitých zkratek IT informační technologie HTML hypertext markup language CSS cascading style sheets ICT informační a komunikační technologie CRM Customer Relationship Management WBS work breakdown structure MD man day MySQL my structured query language CMS content management system MB mega byte

55

C

Příloha

Obsah přiloženého CD

readme.txt ................................ stručný popis obsahu CD src portal.zip.................................zdrojová forma práce thesis....................zdrojová forma práce ve formátu LATEX text.....................................................text práce BP_Vojtech_Zahorsky_2013.pdf ...... text práce ve formátu PDF 57

D