České vysoké učení technické v Praze Fakulta elektrotechnická. Bakalářská práce. Open Web Builder. Tomáš Ryvola. Vedoucí práce: Ing

České vysoké učení technické v Praze Fakulta elektrotechnická

Bakalářská práce

Open Web Builder

Tomáš Ryvola

Vedoucí práce: Ing. David Toth

Studijní program: Elektrotechnika a informatika (bakalářský), strukturovaný Obor: Výpočetní technika červenec 2009

iv

Poděkování Rád bych poděkoval vedoucímu mé bakalářské práce, panu Ing. Davidu Tothovi za jeho ochotu, poskytnutí informací a připomínek během tvorby této práce.

v

vi

Prohlášení Prohlašuji, že jsem svou bakalářskou práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu §60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon).

V Praze dne 9.7.2009

…….................................... vii

viii

Abstract The work deal with searching main deficiencies of actual application for online creation web pages without necessity web technologies knowledge. The solutions are consequently according to the analysis and proposal implemented to the application for online web creation.

Abstrakt Práce se zabývá hledáním hlavních nedostatků současných aplikací pro online tvorbu internetových stránek bez nutnosti znalostí webových technologií. Řešení jsou následně dle analýzy a návrhu implementovány do nástroje pro podporu online tvorby webu.

ix

x

Obsah 1 Úvod

1

1.1 Motivace ...................................................................................................................... 1 2 Popis řešeného problému a vymezení cílů BP

3

2.1 Cíl projektu .................................................................................................................. 3 2.2 Struktura projektu ........................................................................................................ 3 2.2.1 Rešerše existujících implementací .................................................................... 3 2.2.2 Možnosti vylepšení webbuilderů ...................................................................... 3 2.2.3 Analýza ............................................................................................................. 3 2.2.4 Návrh ................................................................................................................ 4 2.2.5 Implementace .................................................................................................... 4 2.2.6 Testování ........................................................................................................... 4 3 Rešeršní zpracování existujících implementací

5

3.1 Kritéria pro srovnání implementací ............................................................................. 5 3.1.1 Jednoduchost .................................................................................................... 5 3.1.2 Intuitivita .......................................................................................................... 5 3.1.3 Zpracování nápovědy ....................................................................................... 5 3.1.4 Statistiky ........................................................................................................... 5 3.1.5 Editace CSS, rozsáhlejší změna designu, nabídka designů .............................. 5 3.1.6 Vložení vlastního HTML .................................................................................. 6 3.1.7 Provoz na vlastní doméně ................................................................................. 6 3.1.8 Rozšiřitelnost .................................................................................................... 6 3.2 Vlastní porovnání ........................................................................................................ 6 3.2.1 Estránky ............................................................................................................ 6 3.2.2 Webnode ........................................................................................................... 8 3.2.3 Weby Google (Google sites) ........................................................................... 10 3.2.4 Weebly ............................................................................................................ 12 3.2.5 Jimdo .............................................................................................................. 13 3.2.6 Synthasite ........................................................................................................ 15 3.3 Další implementace nezařazené do hlavní rešerše .................................................... 16 3.4 Srovnávací tabulka .................................................................................................... 17 3.5 Závěr porovnání ........................................................................................................ 17 xi

4 Návrh vylepšení webbuilderu

19

4.1 Současný stav ............................................................................................................ 19 4.2 Možnosti řešení nedostatků ....................................................................................... 19 4.2.1 Malý výběr kvalitních designů ....................................................................... 19 4.2.2 Zbytečně složitá a neintuitivní aplikace ......................................................... 20 4.2.3 Špatně realizovaná nápověda .......................................................................... 21 5 Analýza a návrh řešení

23

5.1 Návrh iterací .............................................................................................................. 23 5.2 Katalog požadavků .................................................................................................... 24 5.2.1 Vlastnosti systému .......................................................................................... 24 5.2.2 Funkce systému .............................................................................................. 24 5.3 Uživatelské role ......................................................................................................... 25 5.3.1 Super uživatel (admin) .................................................................................... 25 5.3.2 Registrovaný uživatel ..................................................................................... 25 5.3.3 Běžný uživatel (návštěvník) ........................................................................... 25 5.4 Zvolené technologie a komponenty .......................................................................... 25 5.4.1 PHP ................................................................................................................. 25 5.4.2 MySQL ........................................................................................................... 26 5.4.3 JavaScript ........................................................................................................ 26 5.4.4 XML ................................................................................................................ 26 5.4.5 AJAX .............................................................................................................. 26 5.4.6 HTML ............................................................................................................. 26 5.4.7 CSS ................................................................................................................. 27 5.4.8 Webový server Apache ................................................................................... 27 5.4.9 PHP framework Nette ..................................................................................... 27 5.4.10 Databázová vrstva Dibi ................................................................................ 27 5.4.11 JavaScript framework jQuery ....................................................................... 27 5.5 Architektura aplikace ................................................................................................. 28 5.6 Modularita ................................................................................................................. 29 5.6.1 Komponenta .................................................................................................... 30 5.6.2 Modulový interface ......................................................................................... 30 5.7 HTML-CSS blok ....................................................................................................... 32 5.7.1 Správa bloků ................................................................................................... 32

xii

5.7.2 Vizualizace bloků ............................................................................................ 32 5.8 Bezpečnost ................................................................................................................. 33 5.8.1 Autentizace a autorizace uživatelů .................................................................. 34 5.8.2 Kontrola uživatelského vstupu ....................................................................... 34 5.8.3 Ochrana session .............................................................................................. 35 5.9 Datový model ............................................................................................................ 36 6 Realizace

37

6.1 Zajímavosti realizace ................................................................................................. 37 6.1.1 Využití moderních technologií ........................................................................ 37 6.1.2 Modulový interface ......................................................................................... 38 6.1.3 Vizualizace HTML-CSS bloků ....................................................................... 39 6.2 Použité programy ...................................................................................................... 41 6.2.1 Eclipse PDT .................................................................................................... 41 6.2.2 DokuWiki ........................................................................................................ 41 6.2.3 MySQL Workbench ........................................................................................ 41 7 Testování

43

7.1 Testování funkčnosti .................................................................................................. 43 7.2 Kompatibilita s prohlížeči ......................................................................................... 43 7.3 Uživatelské testování ................................................................................................. 44 8 Závěr

45

8.1 Zhodnocení práce ...................................................................................................... 45 8.2 Možnosti rozšíření ..................................................................................................... 45 8.3 Využití práce .............................................................................................................. 45 9 Literatura

47

10 Seznam použitých zkratek

49

11 Obsah přiloženého CD

51

12 Instalační příručka

53

12.1 Požadavky na server ................................................................................................ 53 12.2 Vlastní instalace ....................................................................................................... 53 12.3 Konfigurace aplikace ............................................................................................... 53

xiii

xiv

Seznam obrázků Obrázek 3.2.1.1: eStránky.cz - Ovládací centrum - Výběr designu............................................7 Obrázek 3.2.2.1: Webnode builder - ostatní zdroje obsahu........................................................9 Obrázek 3.2.2.2: Webnode builder - rozdělení stránky na bloky................................................9 Obrázek 3.2.3.1: Weby Google - jednoduché ovládání.............................................................11 Obrázek 3.2.4.1: Weebly - štítková nápověda...........................................................................12 Obrázek 3.2.5.1: Jimdo - editace elementu...............................................................................14 Obrázek 3.2.6.1: SynthaSite - vkladaní elementů.....................................................................15 Obrázek 5.5.1: Architektura Model–View–Controller [10]......................................................28 Obrázek 5.5.2: Architektura Model–View–Presenter v Nette Framework [10]........................28 Obrázek 5.6.2.1: Use Case diagram - správa modulů...............................................................30 Obrázek 5.6.2.2: Class diagram modulového rozhraní.............................................................31 Obrázek 5.7.1.1: Use Case Diagram - správa HCB..................................................................32 Obrázek 5.7.2.1: Ukázka HCB..................................................................................................33 Obrázek 5.7.2.2: Ukázka vizualizace HCB...............................................................................33 Obrázek 5.9.1: Datový model...................................................................................................36 Obrázek 6.1.3.1: jQuery – ColorPicker [15].............................................................................39 Obrázek 6.1.3.2: jQuery - Simple ColorPicker [14].................................................................40

xv

xvi

Seznam tabulek Tabulka 1: Srovnávací tabulka implementací...........................................................................17 Tabulka 7.3.1: Uživatelské testování – osoby...........................................................................43

xvii

xviii

KAPITOLA 1 ÚVOD

1

1 Úvod Tvorbou webů se zabývám již několik let. Za tuto dobu mě oslovilo mnoho lidí s tím, že by si rádi vytvořili vlastní web. Chtěli poradit nástroj, který je jednoduchý a nevyžaduje znalosti webových technologií. Při poohlédnutí po programu (v té době zcela desktopovém) jsem byl nabídkou a úrovní dost zklamán. Přišla tedy prvotní myšlenka k vytvoření aplikace pro tvorbu webů bez znalosti webových technologií. Při výběru tématu mé bakalářské práce jsem se poohlížel po čistě webovém projektu, který by byl nějakým způsobem užitečný. Myšlenka vytvoření aplikace pro podporu tvorby webu bez nutných znalostí se mě stále držela. Od doby, kdy jsem poprvé zauvažoval nad možnou realizací, jsem vyzkoušel několik dalších aplikací, které se postupem času lepšily. Avšak několik nedostatků stále přetrvávalo. To mě přesvědčilo o realizaci aplikace v rámci této práce.

1.1 Motivace Internet je mocné médium a za poslední dobu se jeho využití rozrůstá do mnoha směrů. Stále více aplikací je přetvářeno nebo rovnou vytvářeno pro web. Je to především stále se zvětšujícím počtem uživatelů, kteří web navštěvují. Proto také je tento projekt čistě webový. Snahou práce je nabídnout uživatelům Internetu možnost si vytvořit vlastní web a to online a bez nutných znalostí. Práce se stává užitečnou ve dvou směrech. První je vyhledání hlavních nedostatků existujících implementací a následný návrh možností jejich řešení. Vše je řešeno v obecných rovinách a je tedy možné tyto návrhy uchopit a následně využít. Druhý směr právě přenáší obecné možnosti do praktické implementace dle analýzy a návrhu.

2

KAPITOLA 1 ÚVOD

KAPITOLA 2 POPIS ŘEŠENÉHO PROBLÉMU A VYMEZENÍ CÍLŮ BP

3

2 Popis řešeného problému a vymezení cílů BP 2.1 Cíl projektu Cílem projektu je nabídnout řešení hlavních nedostatků současných webbuilderů, navrhnout a následně vytvořit online aplikaci, která bude částí řešení problému v oblasti nástroje pro podporu tvorby webu. Jedná se především o vizualizaci bloků, ze kterých je možné skládat webovou stránku. Tyto bloky jsou založené na spojení HTML a CSS. A nabídnou webovým grafikům/koderům vstup do sféry webbuilderů a tím rozšíření nabídky o kvalitní webdesigny. Vytvořené bloky zároveň bude možné navzájem vnořovat a nastavovat jim určité vlastnosti jednoduchým vizuálním způsobem. Také jejich manipulace při tvorbě webové stránky bude jednoduchá ve stylu „táhni a pusť“. Aplikace nabídne vhodně řešenou nápovědu, která bude uživateli nápomocná vždy tím nejlepším způsobem.

2.2 Struktura projektu Celý projekt je rozdělen na několik stěžejních částí. Ty jsou řazeny tak, aby na sebe vzájemně navazovaly. Vzhledem k tomu, že byl projekt vyvíjen iteračně, tak je v částech analýza, návrh, implementace a testování vždy celkové shrnutí a ukázáno vždy to nejdůležitější.

2.2.1

Rešerše existujících implementací

V této části se práce zaměřuje na webbuildery, které již běží. Srovnává jejich možnosti a zároveň vystihuje jednotlivé nedostatky.

2.2.2

Možnosti vylepšení webbuilderů

Předchozí rešeršní část odkrývá několik nedostatků existujících implementací. Zde jsou navrhnuty možnosti jejich řešení. Zatím vše jen z obecného hlediska.

2.2.3

Analýza

V analytické části práce se stanovují požadavky na aplikaci. Také se zde řeší výběr vhodných technologií a implementačního prostředí.

4

2.2.4

KAPITOLA 2 POPIS ŘEŠENÉHO PROBLÉMU A VYMEZENÍ CÍLŮ BP

Návrh

Návrh je zaměřen na řešení architektury, databáze a uživatelského prostředí aplikace.

2.2.5

Implementace

Tato část pojednává o realizaci jednotlivých částí aplikace.

2.2.6

Testování

V kapitole najdeme informace o možnostech testování, které byly provedeny.

KAPITOLA 3 REŠERŠNÍ ZPRACOVÁNÍ EXISTUJÍCÍCH IMPLEMENTACÍ

5

3 Rešeršní zpracování existujících implementací Před vlastním zahájením práce jsem se rozhodl udělat průzkum již funkčních webbuilderů na Internetu. Vzhledem k tomu, že výsledkem mé práce by měl být online webbuilder, veškerá porovnávaná řešení jsou aplikace běžící na webovém serveru a k využití jejich služeb je potřeba pouze běžný prohlížeč. Do výběru jsem zahrnul velké hráče na poli online tvorby webů a menší aplikace, které dle mého názoru mají do této problematiky co přinést.

3.1 Kritéria pro srovnání implementací Především se zaměřuji na jednoduchost, intuitivnost, zpracování nápovědy, nabídku designů a následnou možnost úpravy nabízených grafických návrhů. Tyto vlastnosti mají tedy nejvyšší prioritu v následující rešerši.

3.1.1

Jednoduchost

Aplikace zaměřené na uživatele, kteří nejsou vývojáři webů by neměly být zbytečně složité a měly by nabízet jednoduchou cestu k výsledku.

3.1.2

Intuitivita

Uživatel by měl bez velkého přemýšlení vědět, co má udělat. Uživatelské prostředí by ho nemělo svazovat, ale naopak „napovídat“ jak dále.

3.1.3

Zpracování nápovědy

Pokud se uživatel dostane do situace, kdy si není něčím jistý nebo neví, jak dále pokračovat. Aplikace by mu měla nabídnout kvalitní, přehlednou a přesně mířenou nápovědu.

3.1.4

Statistiky

Existuje celá řada externích nástrojů pro různá měření. Ale vzhledem k technické zdatnosti cílové skupiny uživatelů jsou lepší statistiky, které jsou součástí aplikace.

3.1.5

Editace CSS, rozsáhlejší změna designu, nabídka designů

Vlastnosti spjaté s designem webu, které jsou pro uživatele velmi důležité. Neboť velká část uživatelů hodnotí web právě podle vzhledu.

6

3.1.6


Vložení vlastního HTML

Vlastnost, která lehce souvisí s rozšiřitelností aplikace. Pomocí vloženého HTML lze v některých případech docílit výsledku, kterého běžně pomocí aplikace docílit nelze.

3.1.7

Provoz na vlastní doméně

Ne každý uživatel má zájem o provoz webu na doméně 3.řádu a tedy

nabídka

provozu

na vlastní doméně je pro něj velmi důležitá. Důvodů může být hned několik: jednodušší pro návštěvníky na zapamatování, název domény spjatý s názvem firmy, obsahu webu apod.

3.1.8

Rozšiřitelnost

Aplikace sama o sobě nemusí nabízet veškeré služby, ale pokud nabízí možnost rozšíření např. od třetích stran, stává se pro uživatele zajímavější .

3.2 Vlastní porovnání Do porovnání

zařazuji

6

předem

vybraných

aplikací

pro

online

tvorbu

webu.

Dvě české aplikace eStránky a Webnode. Dále lokalizovanou verzi Google Sites pro české uživatele nazvanou Weby Google a tři zahraniční aplikace Weebly, Jimdo a SynthaSite. Jazyková verze aplikace není důležitá pro toto porovnání. Jde především o nabízené služby a jak k nim jednotlivé aplikace přistupují.

3.2.1

Estránky

Adresa: http://www.estranky.cz Služba eStránky patří mezi první aplikace, které v ČR nabídly online tvorbu webu bez nutnosti znalostí HTML. Po krátké registraci je připravený průvodce pro nastavení základních vlastností webu jako je titulek stránky, meta tagy description a keywords, menu a výběr designu. Průvodce je velmi krátký a nastavují se v něm jen základní parametry webu. V některých částech chybí nápověda a pro některé uživatele může být problém s pochopením nastavení.


7

Obrázek 3.2.1.1: eStránky.cz - Ovládací centrum - Výběr designu

Velký nedostatek vidím v nemožnosti si prohlédnout nabízený design ve větším rozměru než v náhledu (Obrázek 3.2.1.1). Tedy nezbývá než některý zvolit a prohlédnout si ho až na stránce. Ovládací centrum nabízí již kompletní nastavení webu. Je tedy možné přidávat stránky, položky do menu, fotografie do fotogalerie, která je součástí webu (je možné vypnout), prohlížet statistiky a další.

Shrnutí Aplikace eStránky.cz je velmi jednoduchá avšak scházejí jí možnosti moderního webu s využitím AJAXu a jiných technologií. Ty umožňují velmi intuitivní tvorbu webu. I tak je možné vytvořit web velmi snadno za pár minut. Není třeba ovládat terminologii v rámci vývoje webů.

8


Klady (+)

+ jednoduché ovládání + editace xHTML + možnost vlastního CSS + možnost měnit url (SEO friendly) příspěvků + výběr wysiwyg editoru + statistiky

Zápory (-)

- malý výběr designů - globální titulek a meta tagy bez možnosti vlastní editace - nízká přehlednost administrace - málo modulů - nedostatky v layoutu

3.2.2

Webnode

Adresa: http://www.webnode.cz Česká služba Webnode, která ve své podobě spatřila světlo světa teprve v nedávné době nasadila pomyslnou laťku hodně vysoko. Služba, která využívá veškeré moderní technologie je oblíbená nejen mezi českými uživateli, ale i ve světě. A to především díky široké nabídce možností se zachováním jednoduchosti. Webnode nabízí i ve své základní verzi ZDARMA pokročilý komplexní nástroj pro správu jednoduchého i rozsáhlého webu. Využívá nejen vlastních nástrojů, ale i další online služby od Google Gadgets přes YourMinis po SpringWidgets jak je vidět na obrázku 3.2.2.1. Webnode přichází nejen s klasickým WYSIWYG editorem pro správu webové stránky, ale nabízí vizuální metodu pro správu celého webu. Tedy vše se stává díky vizuálnosti Webnode builderu jednodušší.


9

Obrázek 3.2.2.1: Webnode builder - ostatní zdroje obsahu

Nástroj Webnode builder rozděluje stránky na jednotlivé bloky, kterým lze separátně nastavovat vlastnosti. Tedy je možné si vše nastavit dle vlastních priorit. Tyto bloky lze jednoduchým „chycením a táhnutím“ přenést na jiné místo stránky.

Obrázek 3.2.2.2: Webnode builder - rozdělení stránky na bloky

Shrnutí Služba Webnode patří k špičce mezi aplikacemi pro online tvorbu webů. Použití AJAXu ve správě webu umožňuje snadnou a intuitivní práci při tvorbě webu.

10


Klady (+) + jednoduchá registrace + kompatibilita + intuitivní a jednoduché ovládání + vizuální metoda pro správu celého webu + široký výběr gadgetů a widgetů + možnost vytvoření e-shopu + online platební brány + možnost provozovat na vlastní doméně + individuální nastavení meta tagů a url Zápory (-) - chybějící FTP - omezení velikosti souborů při nahrávání do builderu - malý počet designů - vyšší cena placených programů

3.2.3

Weby Google (Google sites)

Adresa: http://sites.google.com Na pole online tvorby webů vkročil i gigant jménem Google. Se svojí službou Google Page Creator (již není přístupné pro nové uživatele) nastínil svou vizi. Následník Google Sites, nedávno lokalizovaný i pro Českou republiku s názvem Weby Google, nabízí trochu odlišnější přístup. Jedná se o tvorbu webu ve stylu Wiki systémů. K přístupu do služby Weby Google je nutné mít Google účet. Po příhlášení je k dispozici krátké nastavení nutné pro vytvoření webu, kde se již nastavuje, zda se jedná o volně přístupný web nebo uzavřený web. Tato služba se tedy hodí i pro využití k intranetovým webům. Nabídka designů je velmi úzká, ale vzhledem k určení této služby to není nic překvapujícího. Veškeré části jsou navrženy velmi jednoduše a prakticky – prostě jak je u Googlu zvykem.


11

Obrázek 3.2.3.1: Weby Google - jednoduché ovládání

Shrnutí Aplikace Weby Google není klasický webbuilder typu Webnode a eStránky. Je koncipován na jinou cílovou skupinu, která nevyžaduje exlusivní design a každodenní psaní článků ala blog. Pro tvorbu jednodušších znalostních bází, intranetových portálů nebo statických prezentací se však pro méně náročné uživatele jeví jako ideální volba. Klady (+) + využití Google Gadgets + napojení na Google Apps + jednoduché ovládání + možnost provozovat na vlastní doméně + individuální url Zápory (-) - chybějící FTP - malý počet designů

12

KAPITOLA 3 REŠERŠNÍ ZPRACOVÁNÍ EXISTUJÍCÍCH IMPLEMENTACÍ - pouze dvousloupcový design - omezení vkládání vlastního HTML/skriptů - nemožnost skriptů třetích stran

3.2.4

Weebly

Adresa: http://www.weebly.com/ Do rešerše zahrnuji i zahraniční aplikace pro online tvorbu webů. Jednou z nich je plně AJAXová Weebly, která nabízí vytvoření webu ve svém velmi přívětivém, jednoduchém a intuitivním rozhraní. Vytvářený web je rozdělen do elementů, které lze v určitých mezích upravovat jednoduchým kliknutím na vybraný element a zadáním potřebných údajů. Smazání celého elementu jednoduchým kliknutím na křížek v pravém horním rohu tak, jak je to zvykem u desktopových aplikací. V celé aplikaci je výborně vytvořena nápověda, která se zobrazuje buď připevněným štítkem k elementu nebo přímo v elementu s návodem jak na to.

Obrázek 3.2.4.1: Weebly - štítková nápověda Veškeré vkládání a přesouvání elementů probíhá jednoduchým „táhni a pusť“, které je pro aplikace tohoto typu velice efektivní a jednoduché. Do stránek se přidávají elementy z administrační nabídky, která není široká, ale obsahuje


13

veškeré základní elementy a hlavně možnost vložení vlastního HTML. Bohužel v této aplikaci není možné nijak více upravovat design kromě změny hlavičkového obrázku a písma.

Shrnutí Aplikace Weebly nepřináší tak širokou paletu možností jako např. český Webnode ač se tyto dvě aplikace hodně podobají. Ale zpracování administačního rozhraní je velmi jednoduché a intuitivní. Tím se tato aplikace řadí mezi nejlepší z testovaných online web builderů. Klady (+) + jednoduchá a intuitivní administrace + dobře zpracováná nápověda + možnost provozovat na vlastní doméně + vkládání vlastního HTML + statistiky Zápory (-) - chybějící FTP - malý počet designů - pouze jedno a dvousloupcový design - globální meta tagy description a keywords - nemožnost editovat url - nemožnost editovat CSS

3.2.5

Jimdo

Adresa: http://www.jimdo.com/ Další ze zahraničních zástupců v tomto rešeršním zpracovaní online web builderů je Jimdo. Tato aplikace po zaregistrování vytvoří „skoro“ kompletní web se základními sekcemi webu, což může určitá část uživatelů ocenit a využít této nabídky jen k přepsání textů a úpravě designu. Každopádně je možné veškeré sekce kompletně změnit. Web je rozdělen do elementů, které lze editovat a měnit jim pořadí v rámci nadřazeného

14


elementu, kterým v tomto případě je layout webu. Nikoliv však pouhým přetáhnutím, ale pomocí ikonek u každého elementu.

Obrázek 3.2.5.1: Jimdo - editace elementu

Shrnutí Aplikace, která nabízí celkem široké možnosti, bohužel kvůli ne zcela intuitivnímu a přehlednému rozhraní, může být dosti uživatelů odrazeno. Nabízí však rozdělení do elementů, které nelze přesouvat tak jako například v builderu Weebly, ale má určitě lepší možnosti než český zástupce eStránky. Klady (+) + možnost vkládat vlastní HTML + možnost vložit element – formulář + separátní meta tagy description a keywords + kvalitní nabízené designy + statistiky Zápory (-) - chybějící FTP


15

- nepřehledné rozhraní - malý počet designů - nemožnost editovat url - nemožnost editovat CSS

3.2.6

Synthasite

Adresa: http://www.synthasite.com Aplikace Synthasite nabízí přehledné rozhraní pro správu celého webu. Web je rozdělen do elementů, které lze metodou „táhni a pusť“ vkládat a přesouvat. V nabídce najdeme elementy od běžného textu přes widgety, aplikace třetích stran až možnost vložení vlastního HTML.

Obrázek 3.2.6.1: SynthaSite vkladaní elementů

Jednotlivým stránkám lze nastavovat separátně meta tagy description a keywords, také titulek stránky a ikonu.

Shrnutí Tato aplikace patří mezi ty, které web rozdělují na elementy, jimiž lze manipulovat dle libosti uživatele. Každý tento element lze do určité míry editovat.

16


Klady (+) + možnost vkládat vlastní HTML + možnost provozu na vlastní doméně + široká nabídka widgetů + nabídka aplikací třetích stran + separátní meta tagy description a keywords + separátní titulky + statistiky Zápory (-) - chybějící FTP - malý počet designů - nemožnost editovat CSS

3.3 Další implementace nezařazené do hlavní rešerše Existuje řada dalších hotových řešení online aplikací pro tvorbu webu, které jsem nezařadil do detailní rešerše. Ve většině případů se jedná o aplikace podobné jedné z rešeršovaných. 1. www.freewebs.com Plně AJAXová aplikace ve stylu Weebly, která web rozděluje do bloků, kterým lze nastavit určité vlastnosti. Také je možné bloky vkládat do jiných bloků. 2. www.byznysweb.cz Webbuilder postavený na redakčním systému Flox. Aplikace je placená a pro testování byla využita zkušební doba. Ve srovnání s ostatními je nabídka jednoduchých grafických šablon široká. A navíc provozovatel nabízí kvalitní design na zakázku. 3. www.webareal.cz Tato aplikace přistupuje k online tvorbě webu ve stylu redakčního systému.

Nabízí

jednoduché a přehledné uživatelské rozhraní. Jedná se o placenou aplikaci a pro testování


17

byla zvolena 30ti denní zkušební doba. Je zde možnost zřízení eshopu. 4. www.webgarden.cz Nepříliš přehledná aplikace, která nabízí přednastavené rozložení bloků na vytvořeném webu. Tak jako většina nabízí pouze několik designů u kterých lze editovat CSS. Web lze také provozovat na vlastní doméně.

3.4 Srovnávací tabulka eStránky Webnode Weby Google Weebly Jimdo SynthaSite Jednoduchost ( 1 – 10 )*

8

6

8

9

5

6

Intuitivnost ( 1 – 10 )*

5

7

7

8

5

6

Nápověda ( 1 – 10 )*

5

6

4

7

4

4

Statistiky ( ANO/NE )

ANO

ANO

ANO

ANO

ANO

ANO

Editace CSS ( ANO/NE )

ANO**

ANO

NE

NE

NE

NE

8

1

4

6

5

Rozsáhlejší změna designu ( 1 – 10 )*

4

Vlastní HTML ( ANO/NE )

ANO**

ANO

ANO***

ANO

ANO

ANO

Provoz na vlastní doméně ( ANO/NE )

ANO

ANO

ANO

ANO

ANO

ANO

FTP přístup ( ANO/NE )

ANO**

NE

NE

NE

NE

NE

6

3

6

7

6

Nabídka designů ( 1 – 10 )*

5

* hodnocení 1 až 10, kde 1 je nejhorší a 10 nejlepší | ** placená verze | *** omezeně

Tabulka 1: Srovnávací tabulka implementací

3.5 Závěr porovnání Po detailnějším vyzkoušení několika online webbuilderů musím konstatovat, že ani jeden mě nepřesvědčil o své dokonalosti. Jasnou cestou pro tvorbu online webu je použití moderních technologií s tím, že nemá smysl se ohlížet na část uživatelů, kteří nemají dostatečné prostředky pro využití. Tito uživatelé tvoří procentuálně velmi malé množství. Například díky využití AJAXu v aplikaci Webnode nebo Weebly se online tvorba dostává zase více dopředu a nabízí uživatelům mnohem jednodušší, intuitivní a hlavně více přizpůsobitelné možnosti vytvoření webu online. Na první pozice testovaných vlastností řadím jednoduchost, intuitivnost a dobrou nápovědu. Všechny spolu souvisí a kvalitní zpracování každé zvlášť vytváří silný prvek. Z testovaných implementací mě nejvíce zaujala aplikace Weebly, která tyto vlastnosti měla na vysoké úrovni.

18


Další nutností každého webbuilderu by mělo být rozdělení do elementů, se kterými lze libovolně manipulovat pomocí přichycení, táhnutí a puštění. Ne každá z testovaných aplikací toto splňovala, bohužel. Právě tyto nedostatky ale dostávají moderní buildery dopředu, což je dobře. Velkou rezervu vidím v nabídce designů a následné úpravě v online aplikaci. Testované webbuildery neměly širokou nabídku kvalitních designů. Jednalo se o vesměs jednoduché designy. V aplikacích jako je Webnode byla možnost další úpravy reálná avšak ne pro každého jednoduchá, či vůbec možná.

KAPITOLA 4 NÁVRH VYLEPŠENÍ WEBBUILDERU

19

4 Návrh vylepšení webbuilderu Tato kapitola pojednává o nedostatcích současných implementací a navrhuje možnosti jejich řešení.

4.1 Současný stav V současné době existuje na trhu několik více či méně kvalitních aplikací pro online tvorbu webu, které však mají určité nedostatky. Mezi ty hlavní, kterými se bude zabývat tento projekt patří: Malý výběr kvalitních designů Většina webbuilderů nenabízí širokou paletu grafických šablon a následnou možnost šablonu jakkoliv upravit. Zbytečně složitá a neintuitivní aplikace Tyto aplikace slouží především pro uživatele, kteří mají malé nebo vůbec žádné zkušenosti s tvorbou webů. Proto by aplikace k nim měla být přívětivá a nabídnout jim jednoduché a intuitivní ovládání. Špatně realizovaná nápověda Pro uživatele je v některých momentech nápověda nesmírně důležitá. Její správné zpracování má velký vliv na používání aplikace.

4.2 Možnosti řešení nedostatků 4.2.1

Malý výběr kvalitních designů

Všechny testované aplikace se shodovaly v tom, že nabídka designů závisela čistě na provozovateli. Běžný uživatel měl tedy na výběr pouze šablony, které byly vloženy do systému ze strany administrátora. To lze řešit větší otevřeností systému a nabídnout možnost vkládání šablon třetí straně. Musí ale být pevně stanovené rozhraní, které tuto funkčnost bude podporovat. Nabízejí se dvě varianty řešení: Využití známého šablonovacího systému

20


U tohoto řešení není nutné vymýšlet a specifikovat využitelné elementy pro šablony. Vše je již připravené a ve většině případů i s dokumentací. V této variantě bych navrhoval nejrozšířenější systém SMARTY (http://www.smarty.net), který nabízí mnoho možností. Výhodou tohoto řešení je velká základna potenciálních grafiků/kodérů, kteří jsou schopni vytvořit design vyhovující systému. Možnost rozšíření nabídky je tedy velká. Bohužel toto řešení není zcela optimální. V souvislosti s designem ve webbuilderu jde ruku v ruce i následná úprava šablony dle požadavků uživatele. Proto je ještě nutné vytvořit rozšíření, které by to umožňovalo. Využití HTML-CSS bloků Spojení HTML a CSS v jeden blok přináší velkou možnost využití v šablonách systémů. Blok je tvořen některým z HTML elementů, kterému je definována vlastnost skrze CSS. To přináší nepřeberné množství možností. Dalším rozšířením je úrovňové zanořování. Tedy jeden blok může obsahovat několik dalších. Šablona se tedy skládá z několika definovaných bloků. Systém musí obstarávat jejich vizualizaci a následnou úpravu. Tím uživatel získává skvělý nástroj na přizpůsobení dle svých požadavků. V této práci se nadále zabývám touto variantou. Více o HTML-CSS blocích v dalších kapitolách.

4.2.2

Zbytečně složitá a neintuitivní aplikace

Použitelnost není problematika jen u webbuilderů, ale u aplikací obecně. Je důležité se ještě před započetím prací zaměřit na rozvržení jednotlivých částí vytvářené práce. Každý krok či funkcionalita musí být nejen dobře programátorsky zvládnutá, ale také správně navržená z uživatelského pohledu. Jsem na Internetu aktivní a vývojem pro web se zabývám několik let. Za tu dobu jsem vyzkoušel mnoho různých aplikací. U většiny z nich je problém, že není vytvořená žádná počáteční analýza a návrh. Programátor nemá tedy z čeho vycházet a vše vzniká za běhu. To způsobuje, že řešení nejsou zcela optimální. Dobrý programátor nemusí být vždy dobrým návrhářem na uživatelské rozhraní. Je tedy nutné tuto činnost přenechat odborníkovi na danou oblast. Tím se rapidně zvedne intuitivnost celé aplikace.


21

Rozdělení částí na menší bloky Pro zjednodušení a větší intuitivnost se doporučuje rozdělit části aplikace, které by mohly způsobovat uživateli problémy, na menší bloky. To se týká především komponent typu registrace do systému, zadávání dat apod. Jasné možnosti výběru Uživatel v každém okamžiku musí přesně vědět, jaké má další možnosti. To lze docílit zachováním stejného systému rozhodování a označením funkčních částí v celé aplikaci stejně. Také je nutné možnosti pro uživatele graficky zvýraznit. Vizuální rozdělení Stránka by měla být vizuálně rozdělena do logických bloků. Měla by být použita vizuální hierarchie pro rozlišení důležitých a méně důležitých prvků.

4.2.3

Špatně realizovaná nápověda

U každé aplikace hrozí určité riziko „uváznutí“ uživatele. Je tím myšlena situace, kdy uživatel se o něco snaží a neví jak dále. V tu chvíli je pro něj nesmírně důležitá dobře zpracovaná nápověda. Typově jsem rozdělil nápovědu na tři druhy: Globální ●

Je vázána k celé aplikaci

●

Obsahuje kompletní informace.

●

Zobrazení ve vlastní sekci (nápověda)

Obecná (stránková) ●

Je vázána k aktuálně zobrazené stránce.

●

Obsahuje obecnější informace.

●

Zobrazuje se jednou.

Elementová

22

KAPITOLA 4 NÁVRH VYLEPŠENÍ WEBBUILDERU ●

Zobrazení se vztahuje k určitému elementu navštívené stránky.

●

Obsahuje informace o konkrétní části.

●

Definuje se přímo k elementu.

Možností realizace jednotlivých nápověd je mnoho. Využitím moderních technologií a kvalitního grafického zpracování lze docílit správného efektu. Každá aplikace by měla mít zpracované všechny tři druhy. Tím je nabídnuto uživateli maximum pro jeho řešení případného problému.

KAPITOLA 5 ANALÝZA A NÁVRH ŘEŠENÍ

23

5 Analýza a návrh řešení 5.1 Návrh iterací Vzhledem k tomu, že práce se zabývá jen částí aplikace, bylo navrženo 6 kratších iterací. Ty pokrývají veškeré požadavky na tuto práci. 1. Skelet aplikace ●

propojení použitých frameworků

●

vytvoření databáze

●

nastavení spojení s databází

●

vytvoření konfiguračního souboru aplikace

2. Modulový interface ●

návrh rozhraní

●

instalace modulů

●

odinstalace modulů

3. Proces založení webu pomocí webbuilderu ●

registrace do systému

●

nastavení základních parametrů webu

●

výběr šablony

4. Vizualizace HTML-CSS bloků ●

definice HTML-CSS bloku

●

zobrazení bloku

●

změna vlastností

●

přesouvání bloku

5. Vytváření/editace stránek a menu ●

systém správy stránek

●

systém správy menu

6. Práce se šablonou ●

práce s HTML-CSS bloky

●

změna velikosti bloku

●

změna barvy bloku

●

změna vlastností textu v bloku

24


5.2 Katalog požadavků 5.2.1

Vlastnosti systému

1. Použitelnost ●

intuitivní ovládání

●

jednoduché ovládání

●

nepodstatnost znalostí uživatele

●

interaktivní nápověda

●

dodržení pravidel přístupnosti

●

pěkný design

2. Spolehlivost ●

udržení výkonnostní úrovně během používání

●

případná chyba s nízkou závažností

●

reakce na akci, žádost nebo událost je přesná

●

reakce na případnou chybu

3. Výkon ●

reakce na akci, žádost nebo událost je s minimálním zpožděním

●

dostupnost je vázána na použitý server a jeho připojení k lince

●

využití minimálních prostředků pro akci, žádost nebo událost

4. Podpora

5.2.2

●

rozšiřitelnost pomocí modulů

●

kompatibilita se servery využívající stejné technologie

●

možnost základní konfigurace

Funkce systému

●

registrace uživatele

●

správa webů

●

správa stránek

●

správa menu

●

správa šablony (designu)

●

systém pro nápovědu

●

modulový interface

●

vizualizace HTML-CSS bloku

KAPITOLA 5 ANALÝZA A NÁVRH ŘEŠENÍ ●

zabránění neoprávněným uživatelům v přístupu a nekalých činnostech

●

zabránění neoprávněnému přístupu k údajům osobního charakteru

25

5.3 Uživatelské role Aplikace rozděluje uživatele dle následujících rolí. Jsou seřazeny sestupně dle jejich práv v systému, od největších po nejmenší.

5.3.1

Super uživatel (admin)

Jedná se o administrátora celého systému, který má práva k přihlášení do administračního prostředí. Stará se o kompletní správu aplikace. Je možné vytvořit několik uživatelů s touto rolí.

5.3.2

Registrovaný uživatel

Stává se z běžného uživatele ( 5.3.3 ), který provede na frontendové části úspěšnou registraci. Následně je mu zpřístupněn jeho web na subdoméně a editační prostředí k správě svého webu.

5.3.3

Běžný uživatel (návštěvník)

Nemá žádná speciální práva, může pouze procházet frontendovou část aplikace. Pokud provede registraci, stává se z něj registrovaný uživatel ( 5.3.2 ).

5.4 Zvolené technologie a komponenty Při výběru vhodných technologií jsem přihlížel k mým dosavadním zkušenostem s vývojem webových aplikací a bral jsem v potaz i co nejmenší nároky pro provoz.

5.4.1

PHP

Široce užívaný univerzální skriptovací jazyk (na straně serveru), který je zejména vhodný pro vývoj webových aplikací a může být začleněn do HTML. Programovací jazyk PHP je nejrozšířenější a nejpodporovanější v oblasti webových technologií. Stále je aktivně vyvíjen a má obrovskou základnu uživatelů. Web: http://www.php.net/ Dokumentace: http://www.php.net/docs.php

26

5.4.2


MySQL

MySQL - (My Structured Query Language) je relační databáze typu DBMS (database managment system) a vychází z deklarativního programovacího jazyka SQL (Structured Query Language). Web: http://www.mysql.com/ Dokumentace: http://dev.mysql.com/doc/

5.4.3

JavaScript

JavaScript je multiplatformní, objektově orientovaný skriptovací jazyk, který se zpravidla používá jako interpretovaný programovací jazyk pro WWW stránky. [9]

5.4.4

XML

XML (eXtensible Markup Language, česky rozšiřitelný značkovací jazyk) je obecný značkovací jazyk, který byl vyvinut a standardizován konsorciem W3C. Umožňuje snadné vytváření konkrétních značkovacích jazyků pro různé účely a široké spektrum různých typů dat.

5.4.5

AJAX

AJAX - (Asynchronous JavaScript and XML) je obecné označení pro technologie vývoje webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovu načítání. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, ale vyžadují použití moderních webových prohlížečů. [9]

5.4.6

HTML

HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. [9] Jazyk je aplikací dříve vyvinutého rozsáhlého univerzálního značkovacího jazyka SGML (Standard Generalized Markup Language). Vývoj HTML byl ovlivněn vývojem webových prohlížečů, které zpětně ovlivňovaly definici jazyka. [9]


5.4.7

27

CSS

CSS je zkratka pro anglický název Cascading Style Sheets, česky tabulky kaskádových stylů. Je to jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. [9]

5.4.8

Webový server Apache

Apache HTTP Server - softwarový webový server s otevřeným kódem pro Linux, BSD, Microsoft Windows a další platformy. Web: http://httpd.apache.org/ Dokumentace: http://httpd.apache.org/docs/

5.4.9

PHP framework Nette

Nette Framework je výkonný, událostmi řízený a komponenty používající framework pro pohodlné a rychlé vytváření webových aplikací v PHP 5. Web: http://nettephp.com/cs/ Dokumentace: http://nettephp.com/cs/dokumentace Fórum: http://forum.nettephp.com/cs/

5.4.10

Databázová vrstva Dibi

Dibi v současné době podporuje mnoho významných databází: MySQL, PostgreSQL, SQLite, MS SQL, Oracle, Access a obecné PDO a ODBC. Web: http://dibiphp.com/cs/ Dokumentace: http://dibiphp.com/cs/dokumentace Fórum: http://forum.dibiphp.com/cs/

5.4.11

JavaScript framework jQuery

jQuery je rychlý a stručný JavaScriptový framework, který zjednodušuje procházení HTML dokumentu , manipulaci událostmi, oživení a Ajaxové interakce pro rychlý vývoj webu. Web: http://jquery.com/ Dokumentace: http://docs.jquery.com/

28


5.5 Architektura aplikace V poslední době se u webových aplikací využívá známého návrhového vzoru MVC (modelview-controller). Dle něj je rozdělena architektura do tří vrstev: datový model, uživatelské rozhraní a řídicí logika, jak je vidět na obrázku 5.5.1. Přičemž modifikace některé z nich má pouze minimální vliv na ostatní.

Obrázek 5.5.1: Architektura Model–View–Controller [10]

Architektura Open Web Builderu je dána vybraným PHP frameworkem Nette, jehož logika daleko lépe odpovídá nepříliš známému vzoru MVP, tedy Model-View-Presenter (obrázek 5.5.2).

Obrázek 5.5.2: Architektura Model–View–Presenter v Nette Framework [10]


29

Presenter v Nette Frameworku má podobnou roli jako kontroler v MVC. Vybírá pohled (view) a předává mu model, nebo data z modelu. Udržuje stav persistentních proměnných. A především zpracovává reakce uživatele. Ty se dají rozdělit na tři typy: ●

změna pohledu

●

změna stavu

●

příkaz modelu

5.6 Modularita Jednou z hlavních vlastností vytvářeného webbuilderu je snadná rozšířitelnost. Použitím vhodného frameworku, v tomto případě Nette, je možné aplikaci rozdělit do logických funkčních částí, modulů. Podle [5] je modul v Nette frameworku chápán jako balíček presenterů, komponent a šablon, ale i modelů, které dodávají presenteru data. Tuto práci jsem rozdělil na 3 moduly: Administrační modul Administrace pro správce systému. Umožňuje kontrolu nad celým systémem. Přístup do této části má pouze super uživatel. Uživatelský modul Uživatelská administrace, která je přístupná pouze registrovaným uživatelům. Po přihlášení zde mají možnost editovat svůj web. Frontendový modul Část systému, která je přístupná každému. Stará se o zobrazování uživateli vytvořených webů a také nabízí možnost registrace do systému. Tato práce vzniká jako část řešení a tedy další rozšíření se dá očekávat. Díky Nette to nebude žádný problém. Část z navrhovaného řešení 4.2.1 , tedy otevřenost pro kodéry/designéry se dá do budoucna vytvořit jako další modul. Ten bude zajišťovat kompletní správu šablon třetích stran.

30

5.6.1


Komponenta

Nette framework kromě modulů nabízí i možnost vytváření komponent. Což je část aplikace, kterou je možné opakovaně využívat. Sdružuje dohromady některé funkce, které spolu logicky souvisí a chceme je využívat na více místech aplikace. [5] Komponenta je tedy další možností pro rozšiřování systému. Není závislá přímo na modulu a je možné ji využít v různých částech aplikace.

5.6.2

Modulový interface

Modul a komponenta z Nette jsou čistě frameworkovou záležitostí. Proto je v aplikaci Open Web Builder vytvořeno rozhraní pro vlastní zásuvné moduly. To se stará o automatické načítání nainstalovaných pluginů do zvolených částí systému. V administraci je možno nainstalovaná rozšíření spravovat. UML Class diagram na obrázku 5.6.2.2 znázorňuje vytvořené třídy rozhraní a jejich provázanost. Část, která se stará o automatické načítání modulů do systému byla vytvořena jako model Modules. Správa přidaných rozšíření je zajištěna již klasickým presenterem ModulesPresenter, který je součástí modulu Admin.

Obrázek 5.6.2.1: Use Case diagram - správa modulů


Obrázek 5.6.2.2: Class diagram modulového rozhraní

31

32


5.7 HTML-CSS blok HTML-CSS blok (HCB) je základním stavebním kamenem v šablonách Open Web Builderu. Využívá spojení HTML entity a CSS vlastností. Každý blok má určený typ (z předem zadaných) a vlastnosti, které je možno následně editovat. Aby HCB mohl být využit se záměrem popsaným v kapitole 4.2.1 , je nutné vytvořit systém, který bude umožňovat sestavovat šablony z příslušných bloků. Zároveň musí umět vizuálně upravovat jednotlivé HCB, aby byla pro uživatele následná úprava webu jednodušší.

5.7.1

Správa bloků

Kompletní správa bloků se odehrává v administraci systému. Na obrázku 5.7.1.1 je možné vidět jaké akce může super uživatel s bloky dělat.

Obrázek 5.7.1.1: Use Case Diagram - správa HCB

5.7.2

Vizualizace bloků

Každý blok je definován typem a vlastnostmi. Dle nich je vytvořena vizualizace. Na obrázku 5.7.2.1 vidíme blok typu DIV a vyznačené vlastnosti width, height a border. Na dalším obrázku 5.7.2.2 je již navrhovaná vizualizace, která bude využita pro úpravu šablony webů registrovaných uživatelů. Jak je zřejmé, vlastnosti lze měnit posunováním či zadáním hodnoty.


33

Obrázek 5.7.2.1: Ukázka HCB

Obrázek 5.7.2.2: Ukázka vizualizace HCB

5.8 Bezpečnost V oblasti webových aplikací hrozí několik možných problémů bezpečnostního rázu na různých úrovních. A to od síťové úrovně až po aplikační. V této práci zmiňuji hlavně bezpečnost aplikační vrstvy. Použitý Nette Framework ( 5.4.9 ) klade velký důraz

34


na bezpečnost aplikací, dělá to zcela transparentně, nevyžaduje manuální nastavování. Open Web Builder tedy neřeší ošetření bezpečnostních děr, vše obstarává framework nad kterým je systém postavený.

5.8.1

Autentizace a autorizace uživatelů

Dle [10] se autentizací rozumí přihlašování uživatelů, tedy proces, při kterém se ověřuje, zda je uživatel opravdu tím, za koho se vydává. V drtivé většině aplikací se ověřuje uživatelské jméno a heslo. Naopak při autorizaci se zjišťuje, zda má již autentizovaný uživatel dostatečná oprávnění pro přístup k určitému souboru či pro provedení nějaké akce. Přihlašování uživatelů je oblast velmi úzce související s ochranou osobních údajů a zabezpečením aplikace. Jelikož PHP nenabízí žádnou standardní implementaci, jde také bohužel o oblast bezbřehé programátorské „kreativity“. Lze se setkat s odstrašujícími případy, kdy programátoři například ukládají hesla do cookies a nebo vytvářejí jiné sofistikované bezpečnostní díry. [10] Nette Framework se snaží tuto díru zacelit. A zároveň přihlašování zjednodušit až na naprosté minimum. Tím jsou dvě metody authenticate() (přihlásit) a signOut() (odhlásit), plus dotazovací metoda isAuthenticated() sdělující, zda je uživatel nyní přihlášen. [10]

5.8.2

Kontrola uživatelského vstupu

Uživatelské vstupy do systému i výstupy ze systému jsou kritickým místem každé aplikace. Většina úspěšných útoků totiž souvisí právě s vhodně formulovanými a zaslanými parametry [11]. Pro webovou aplikaci je ošetření těchto parametrů z hlediska celkové bezpečnosti velice důležité. Injection a SQL Injection Injection využívá špatného ošetření vstupu od uživatele při sestavování dotazů a parametrů do jiných systémů. Nejčastějším typem tohoto útoku je SQL Injection – špatná obsluha parametrů při tvorbě SQL dotazů. Cross Site Scripting (XSS) Při zpracování vstupů od uživatele, které jsou následně zobrazovány na webové stránce, je


35

nutné zajistit, aby při výstupu nebyla do HTML vložena získaná data přímo, ale jen jako prostý text. Musí se provést náhrada znaků za entity, např. & za & apod. O kompletní kontrolu vstupů a zamezení útoku se v našem případě stará Nette Framework ( 5.4.9 ) a databázová vrstva Dibi ( 5.4.10 ).

5.8.3

Ochrana session

Protokol HTTP je bezstavový. Což znamená, že každý dotaz na server je nezávislý a že si server nepamatuje stav komunikace. Takto by však nebylo možné implementovat žádnou jen trošku složitější aplikaci, např. internetový obchod, který si potřebuje uchovávat obsah nákupního košíku. Proto byl protokol HTTP rozšířen o tzv. HTTP cookies, krátké textové řetězce, které umožňují informace o stavu uchovávat. [10] Jelikož tyto řetězce jsou skutečně krátké a ukládají se na straně prohlížeče, nemusí být vždy možné nebo vhodné do nich celý stav zapisovat. Řešením jsou tzv. sessions (česky relace, sezení). Princip je ten, že informace o stavu se uchovávají na straně serveru, kde jsou dostupné pod jedinečným identifikátorem zvaným Session ID a ten jediný stačí uložit do HTTP cookie. [10] Server tedy předpokládá, že komunikuje stále s tímtéž uživatelem, dokud požadavky doprovází stejné Session ID. Úkolem bezpečnostních mechanismů je zajistit, aby tomu tak doopravdy bylo. [10] Když se někdy v devadesátých letech začalo diskutovat o bezpečnosti webových aplikací, vznikl mýtus, že cookies jsou samy o sobě nebezpečné a rádoby odborníci nabádali veřejnost, aby si je vypínala. Což samozřejmě ochromilo celou řadu webových aplikací. Aby mohly fungovat i bez cookies, začalo se Session ID přenášet také v URL. Což teprve zavdalo vzniku těch největších bezpečnostních děr. [10] Dnes už je situace zcela jiná. Uživatelé si cookies nevypínají a bezpečnost aplikací má vysokou prioritu. Velmi důležité je tedy nakonfigurovat server tak, aby Session ID přenášel pouze v cookie, znepřístupnil jej JavaScriptu a případné identifikátory v URL ignoroval. [10] Nette Framework tedy sám správně nakonfiguruje PHP direktivy, kontroluje neměnost vybraných HTTP hlaviček zasílaných prohlížečem, v kritických okamžicích, jako je třeba přihlášení uživatele, vygeneruje Sesssion ID nové atd. [10]

36


5.9 Datový model

Obrázek 5.9.1: Datový model


37

6 Realizace Aplikace je vytvořena nad PHP frameworkem Nette, který patří mezi nejnovější a nejvýkonnější na této platformě. Jeho využitím odpadá nepřeberné množství řešení bezpečnostních rizik. Zároveň nabízí velké množství funkcí a tím usnadňuje práci především při programování rutinních záležitostí. Mezi jeho přednosti patří především: ●

ladící nástroje

●

zabezpečení proti bezpečnostním dírám

●

výkon

●

vyzrálý a čistý objektový návrh využívající interfaces

●

rozdělení práce mezi HTML kodérem a programátorem

●

podpora nejnovějších technologií

●

možnosti doplňování se Zend Frameworkem

Autorizace

a autentizace

uživatelů

je

v aplikaci

řešena

pomocí

knihovny

Nette\Web\User. Ta zajišťuje přihlašování a odhlašování uživatelů, popisuje jejich identitu a ověřuje práva na základě rolí. Velkou zbraní Nette Framework je knihovna Nette\Forms pro práci s webovými formuláři. Přináší nejen zjednodušení vytváření formulářů, ale také kompletní zabezpečení a validaci.

6.1 Zajímavosti realizace 6.1.1

Využití moderních technologií

Vývoj webových aplikací se stále technologicky posouvá kupředu a nabízí nové možnosti použití. Těmi nejzásadnějšími jsou JavaScript ( 5.4.3 ) a AJAX ( 5.4.5 ), které jsou využívány v Open Web Builderu. Klasické psaní v rámci JS není efektivní a proto jsem použil jeden z nejlepších

38

KAPITOLA 6 REALIZACE

JavaScriptových frameworků jQuery ( 5.4.11 ), který má podporu přímo i v Nette Frameworku a vývoj je tedy mnohonásobně ulehčen.

6.1.2

Modulový interface

Pro snadné rozšíření aplikace bylo vytvořeno rozhraní zásuvných modulů. To se stará o automatické načítání modulů v systému a následné funkční vykonání. Načítání zajišťujě model Modules, který vybírá moduly z databáze a předává je základnímu presenteru

(BasePresenter)

v konkrétním

modulu,

který

o moduly

požádal.

BasePresenter následně moduly zpracovává a přiřazuje k příslušnému umístění v šabloně. Samotný zásuvný modul je tvořen aplikační a konfigurační částí. Aplikační část Vykonává určitou funkcionalitu, která je modulu přiřazena autorem. Ta je provedena, při zavedení pluginu v systému. Tedy vždy při volání metody installModules() v BasePresenteru jednoho z modulů. Konfigurační část Je použita pouze při vkládání modulu do systému. Jsou z ní předávány parametry, které aplikace zpracovává a ukládá pro následné použití. Tvoří ji XML soubor s touto strukturou: <moduleitem> Kdo je přihlášený WhoIsLogin admin_top <description>informace o uživateli <setup>parametr=>Přihlášen|text=>Jsem nový modul 0

Význam jednotlivých elementů: ●

name - Název modulu, který je uváděn v administraci.

●

class - Třída, kterou je modul obsluhován.


39

●

place - Název umístění modulu.

●

description - Popis modulu.

●

setup - Seznam parametrů, které lze konfigurovat.

●

order - Pořadí modulu v rámci umístění.

6.1.3

Vizualizace HTML-CSS bloků

Vizualizace HCB je jedním z nutných předpokladů pro následnou snadnou úpravu šablon v systému. Jak je vidět na obrázku 5.7.2.2 jedná se o změnu vlastností bloku. Model Hcb se stará o načítání bloků z databáze a vrací je komponentě Vhcb, která zajišťuje dle přiřazených vlastností vizualizaci. Ta je potřeba v modulu Users, který je určen pro registrované uživatele. K jednotlivým vlastnostem jsou přiřazeny příslušné metody, kterými je lze měnit v rámci vybraného bloku. Ke konečné vizualizaci je použito UI jQuery (http://jqueryui.com/). To nabízí několik variant ke každé vlastnosti. Pro ukázku uvádím řešení vlastnosti color. Vlastnost color U barvy

se nabízí

použití

kompletního

ColorPickeru

(obrázek

6.1.3.1)

(http://www.eyecon.ro/colorpicker/) nebo jednoduší varianty Simple Colorpickeru (obrázek 6.1.3.1)

Obrázek 6.1.3.1: jQuery – ColorPicker [15]

U Open Web Builderu sázím na jednoduchost a tedy pro vlastnost color byl zvolen Simple Color Picker. Není však problém a tuto metodu nahradit jinou využívající kompletní

40


ColorPicker. To bych, ale doporučoval ve verzi Open Web Builderu, který bude rozlišovat úroveň uživatelských znalostí. To však není součástí této práce.

Obrázek 6.1.3.2: jQuery - Simple ColorPicker [14]

V JavaScriptu je Simple Color Picker řešen takto:

function hexFromRGB (r, g, b) { var hex = [ r.toString(16), g.toString(16), b.toString(16) ]; $.each(hex, function (nr, val) { if (val.length == 1) { hex[nr] = '0' + val; } }); return hex.join('').toUpperCase(); } function refreshSwatch() { var red = $("#red").slider("value") ,green = $("#green").slider("value") ,blue = $("#blue").slider("value") ,hex = hexFromRGB(red, green, blue); $("#swatch").css("background-color", "#" + hex); } $(function() {

});

$("#red, #green, #blue").slider({ orientation: 'horizontal', range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); $("#red").slider("value", 255); $("#green").slider("value", 140); $("#blue").slider("value", 60);


41

6.2 Použité programy 6.2.1

Eclipse PDT

Pro vývoj aplikace v PHP existuje několik IDE. Bohužel ne všechny jsou zcela ideální. Já jsem si zvolil Eclipse PDT, které používám již dlouho a jsem s ním naprosto spokojený. Eclipse jako takové bylo primárně vytvořeno pro vývoj v jazyce Java. Rozšíření PDT do programu přidává možnosti k výkonému využití tohoto IDE pro jazyk PHP. Web: http://www.eclipse.org/pdt/

6.2.2

DokuWiki

Dokumentace projektu je vytvářena na systému wiki. Konkrétně jsem si vybral DokuWiki, která vychází z klasických wiki systémů a je upravena pro tvorbu dokumentace. Web: http://www.dokuwiki.org/

6.2.3 Dlouho

MySQL Workbench dobu

jsem

používal

pro

návrh

databáze

DB

Designer

(http://fabforce.net/dbdesigner4/) u kterého však byl zastaven vývoj a programátoři přešli k MySQL Workbench, který z DB Designera vychází a rozšiřuje ho o mnoho nových funkcí. Web: http://dev.mysql.com/workbench/

42



43

7 Testování Testování Open Web Builderu jsem rozdělil na tři části – Testování funkčnosti samotné aplikace, kompatibility s prohlížeči a uživatelské testování.

7.1 Testování funkčnosti V rámci iterativního vývoje probíhá testování v každé iteraci. Cílem je otestování funkčnosti vytvářené části aplikace a její správná integrace do systému. Dle zhodnocení výsledků jednotlivých testů je možné přizpůsobit návrh další iterace.

7.2 Kompatibilita s prohlížeči Na trhu je několik prohlížečů internetových stránek. Bohužel každý z nich přistupuje k interpretaci webu rozdílně. U vytvářených aplikací je tedy nutné provádět s nimi test kompatibility. Mezi nejrozšířenější prohlížeče patří: ●

Mozilla Firefox

●

Internet Explorer

●

Opera

●

Google Chrome

V každém prohlížeči musí být zachováno stejné zobrazení a hlavně funkční chování aplikace. Do testu kompatibility jsem zařadil tyto prohlížeče: ●

Mozilla Firefox 2.5

●

Internet Explorer 7.0

●

Google Chrome 2.0

●

Opera 9.1

44

KAPITOLA 7 TESTOVÁNÍ

Zajímavou službou pro další testování je BrowserShots (http://browsershots.org/). Zde je možné zadat adresu webu a vybrat všechny možné prohlížeče a různé operační systémy na kterých se má provést test. Výsledkem jsou snímky obrazovek vybraných programů, ze kterých je možné vizuálně zjistit chyby.

7.3 Uživatelské testování Nedílnou součástí každého testování by mělo být ověření použitelnosti aplikace. K tomu je velice vhodné právě uživatelské testování. Do testu jsem zařadil 5 osob různého věku, pohlaví a znalostí. Pro ně bylo připraveno jednotné zadání s úkoly. Během celého testu jsem pozoroval chování osob a zaznamenával poznámky. Osoba

Práce s Internetem

Tvorba webu

Muž 18let

Pokročilá úroveň

Pokročilé znalosti

Žena 22let


Bez znalostí

Žena 32let

Základní úroveň

Bez znalostí

Muž 35let


Základní znalosti

Muž 63let

Základní úroveň

Bez znalostí

Tabulka 7.3.1: Uživatelské testování – osoby

Uživatelé se základní úrovní práce s Internetem měli delší celkový čas testu. Bylo zřejmé, že v některých okamžicích si nebyli zcela jisti svým krokem. To samozřejmě vede k požadavku na menší úpravy aplikace (v rámci této práce již nejsou provedeny). U uživatelů s pokročilou úrovní tyto problémy již nebyly znatelné. V [12] je uvedena zmínka o prokázání, že prvních 5-8 uživatelů odhalí většinu chyb a další testovaní je již jen zopakují. V mém testu jsem využil pěti osob. To by na odhalení základních chyb mělo stačit. Myslím si však, že u této aplikace by bylo vhodné provést další test a to na větším počtu lidí s větší škálou úrovní jak s prací na Internetu tak i s tvorbou webu.

KAPITOLA 7 TESTOVÁNÍ

45

8 Závěr 8.1 Zhodnocení práce Do této práce jsem vstupoval s myšlenkou na vytvoření nástroje pro podporu online tvorby webu, který bude řešit část nedostatků současných implementací. Zároveň nebudou vyžadovány od uživatelů technologické znalosti z oblasti vývoje webu. V první etapě jsem provedl rešerši existujících implementací ze které vzešlo několik očekávaných problémů. Následně na to bylo navrhnuto jejich obecné řešení a část z nich byla implementována do aplikace. Pro snadnější úpravu grafických šablon jsem vytvořil systém pracující s tzv. HTML-CSS bloky. Ten umožňuje jejich vizualizaci a tím jednoduchou změnu vlastností jako je např. šířka, výška, okraj apod. Jedním z dalších cílů práce, bylo vytvořit systém, který bude rozšiřitelný pomocí modulů s automatickou integrací. To vše bylo úspěšně splněno.

8.2 Možnosti rozšíření Vzniklá aplikace Open Web Builder není kompletním řešením nedostatků existujících implementací. To ani nebylo cílem této práce. Byl vytvořen nástroj, který řeší část tohoto problému. Do budoucna je možné systém rozšiřovat. Díky architektuře, která vychází z použitého frameworku Nette, to půjde velmi snadno. Několikrát jsem v této práci zmiňoval vstup kodérů/designerů do systému, který není v rámci projektu řešen a byl by vhodným dalším rozšířením.

8.3 Využití práce Práce nabízí řešení určitých nedostatků na obecné rovině. To lze v podobném systému využít a zapracovat do aplikace již dle konkrétního programátora či návrháře. Vzniklý nástroj Open Web Builder, který je nyní veřejně dostupný na Internetu, je možné návštěvníky využít k vytvoření vlastní webové stránky.

46

KAPITOLA 8 ZÁVĚR

Vzhledem k tomu, že aplikaci nelze považovat za finální, chtěl bych nadále pokračovat na vývoji a vytvořit plnohodnotný nástroj.

KAPITOLA 9 LITERATURA

9 Literatura [1]

Sam Guckenheimer, Juan J.Perez, Efektivní softwarové projekty, Zoner Press, 2007

[2]

The World Wide Web Consortium (W3C) http://www.w3.org/

[3]

MySQL Documentation Team, MySQL 6.0 Reference Manual, 2009 http://dev.mysql.com/doc/

[4]

PHP Documentation Group, PHP Manual, 2009 http://www.php.net/docs.php

[5]

David Grudl, Nette Framework dokumentace, 2009. http://nettephp.com/cs/dokumentace

[6]

David Grudl, dibi API dokumentace, 2009. http://api.dibiphp.com/

[7]

J. Resig and the jQuery Team, jQuery User Guide, 2009. http://docs.jquery.com/

[8]

Smashingmagazine Team, Blog, 2009. http://www.smashingmagazine.com/

[9]

Otevřená encyklopedie Wikipedia http://www.wikipedia.org/

[10]

David Grudl, Seriál Začínáme s Nette framework, 2009 http://zdrojak.root.cz/serialy/zaciname-s-nette-framework/

[11]

The Open Web Application Security Project: AGuide to Building Secure Web Applications. The Open Web Application Security Project 2002. http://www.owasp.org/documentation/guide

47

48 [12]

KAPITOLA 9 LITERATURA Martin Snížek, H1.cz, Uživatelské testování – cesta k úspěšnějšímu webu, 2006 http://www.h1.cz/fol/2006/uzivatelske-testovani-6-rad

[13]

Steve Krug, Web design - nenuťte uživatele přemýšlet!, Computer Press, 2006

[14]

jQuery User Interface, Demos & Documentation http://jqueryui.com/demos/

[15]

Color Picker, jQuery plugin Documentation http://www.eyecon.ro/colorpicker/

KAPITOLA 10 SEZNAM POUŽITÝCH ZKRATEK

10 Seznam použitých zkratek API

Application Programming Interface

HTTP

Hypertext Transfer Protocol

SQL

Structured Query Language

MySQL

My Structured Query Language

IDE

Integrated Development Environment

HTML

HyperText Markup Language

AJAX

Asynchronous JavaScript and XML

CSS

Cascading Style Sheets

JS

Java Script

SEO

Search Engine Optimalization

WYSIWYG What you see is what you get FTP

File Transfer Protocol

URL

Uniform Resource Locator

HCB

HTML CSS Blok

XML

eXtensible Markup Language

PHP

Hypertext Preprocessor

MVC

Model View Controller

MVP

Model View Presenter

UML

Unified Modeling Language

XSS

Cross Site Scripting

DBMS

Database Managment systém

WWW

World Wide Web

49

50

KAPITOLA 10 SEZNAM POUŽITÝCH ZKRATEK

KAPITOLA 11 OBSAH PŘILOŽENÉHO CD

11 Obsah přiloženého CD

●

●

●

src/ - Zdrojové kódy aplikace ◦

app/ - Modely, komponenty, presentery, šablony aplikace

◦

images/ - Obrázky použité v aplikaci

◦

css/ - Soubory s kaskádovými styly

◦

libs/ - Knihovny, frameworky

text/ - Elektronická verze této práce ◦

ryvolt1_2009bach.odt

◦

ryvolt1_2009bach.doc

◦

ryvolt1_2009bach.pdf

README.TXT

51

52

KAPITOLA 11 OBSAH PŘILOŽENÉHO CD

KAPITOLA 12 INSTALAČNÍ PŘÍRUČKA

53

12 Instalační příručka Veškeré potřebné části k instalaci jsou na přiloženém CD v adresáři src/.

12.1 Požadavky na server Provoz aplikace je vázán na webový server, který musí splňovat určité požadavky: ●

PHP min. verze 5

●

MySQL min. verze 5

●

Apache webový server

K provozu je dále nutné nastavit serverový alias pro subdomény. To zajistí správný chod aplikace frontendového modulu, který má na starosti především uživatelské weby. Ty jsou umístěné na subdoménách.

12.2 Vlastní instalace 1. Nahrání zdrojových souborů na server 2. Vytvoření databáze 3. Spuštění SQL příkazu pro vytvoření struktury databáze 4. Spuštění SQL příkazu pro přidání defaultního super uživatele 5. Konfigurace aplikace

12.3 Konfigurace aplikace Aplikace obsahuje konfigurační soubor. Ten je umístěn v adresáři se config.ini Konfigurační soubor: [common] set.date-timezone = "Europe/Prague" [production < common] database.driver = mysql

app/ a jmenuje

54

KAPITOLA 12 INSTALAČNÍ PŘÍRUČKA

database.host = host database.username = username database.password = password database.database = database database.charset = charset [development < production] database.driver = mysql database.host = localhost database.username = root database.password = database.database = database database.charset = utf8 Jak je z obsahu souboru patrné, konfiguraci lze provést odděleně jak pro produkční (production) tak i pro vývojovou verzi (development).

České vysoké učení technické v Praze Fakulta elektrotechnická. Bakalářská práce. Open Web Builder. Tomáš Ryvola. Vedoucí práce: Ing

Recommend Documents