Mikrokomunitní server

České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačové grafiky a interakce

Bakalářská práce

Mikrokomunitní server

pro prezentaci výtvarných a literárních děl Kristýna Dudová

Vedoucí práce: doc. Ing. Jelínek Ivan, CSc

Studijní program: Softwarové technologie a management, Bakalářský Obor: Web a multimédia 8. června 2009

iv

v

Poděkování Ráda bych tímto poděkovala panu doc.Ing. Ivanu Jelínkovi, CSc. za vedení mé bakalářské práce.

vi

vii

Prohlášení Prohlašuji, že jsem 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 11. 6. 2009

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

viii

Abstract This Bachelor thesis is focused on the development of a system applicable for creation of a microcommunity website designed for presentation of visual arts and literary works. The core part of this thesis describing the whole execution of this system is preceded by a brief introduction explaining the community and community websites, together with researches of several systems applicable for creating community websites. Next chapters provide a design of the own original system followed by its implementation and testing procedure, comprising the methods and results of testing.

Abstrakt Tato práce se zabývá tvorbou systému vhodného k vytvoření mikrokomunitního webu pro prezentaci výtvarných a literárních děl. Samotné realizaci předchází pár slov o tom, co je to komunita a komunitní web spolu s rešerší několika systémů vhodných k tvorbě komunitního webu. Následuje návrh vlastního systému a jeho implementace a poté popis a výsledky testování.

ix

x

Obsah 1 Úvod 1.1 Struktura práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 1

2 Cíl práce 2.1 Popis aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3 3

3 Komunity a Komunitní weby 3.1 Komunita . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2 Komunitní weby . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.3 Nástroje k tvorbě komunitních webů . . . . . . . . . . . . . . . . . . . . . . .

5 5 5 5

4 Analýza a návrh řešení 4.1 Katalog požadavků . . . . . . 4.1.1 Nefunkční požadavky . 4.1.2 Funkční požadavky . . 4.2 Datový model . . . . . . . . . 4.3 Uživatelské role . . . . . . . . 4.4 Grafické rozhraní . . . . . . . 4.5 Technologie . . . . . . . . . . 5 Realizace 5.1 Architektura . . . . . . . . . 5.1.1 Model-view-controller 5.1.2 Struktura aplikace . . 5.2 Bezpečnost . . . . . . . . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

6 Testování 6.1 Optimalizace pro prohlížeče . . . . . . . 6.2 Validita . . . . . . . . . . . . . . . . . . 6.3 Datová velikost a rychlost načítání . . . 6.4 Konzistence odkazů . . . . . . . . . . . . 6.5 Přístupnost . . . . . . . . . . . . . . . . 6.6 Použitelnost . . . . . . . . . . . . . . . . 6.6.1 Seznam účastníků usability testu 6.6.2 Průběh testu . . . . . . . . . . . 6.6.3 Zhodnocení testu . . . . . . . . .

xi

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

. . . .

. . . . . . . . .

. . . . . . .

9 9 9 10 12 17 19 20

. . . .

23 23 23 25 26

. . . . . . . . .

27 27 28 28 29 29 29 30 30 32

xii

OBSAH

6.7

Optimalizace pro vyhledávače . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

7 Závěr

35

Literatura

37

A Seznam použitých zkratek

41

B Uživatelské rozhraní

43

C Instalační manuál

49

D Obsah přiloženého CD D.1 Obsah CD . . . . . . . . . . . D.2 Obsah archivu src.zip . . . . . D.3 Obsah složky tex . . . . . . . D.4 Rozdělení zdrojových souborů

51 51 51 51 52

. . . . . . . . . . . . . . . . . . do složek

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

Seznam obrázků 4.1 4.2 4.3 4.4 4.5

Datový model fóra . . . . Datový model hlavní části Datový model počítadla . Datové modely . . . . . . Návrh rozložení stránky .

5.1 5.2

Znázornění model-view-controller architektury . . . . . . . . . . . . . . . . . . 24 Adresářový strom - složky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

B.1 B.2 B.3 B.4 B.5 B.6 B.7 B.8 B.9 B.10 B.11

Uživatelské Uživatelské Uživatelské Uživatelské Uživatelské Uživatelské Uživatelské Uživatelské Uživatelské Uživatelské Uživatelské

rozhraní rozhraní rozhraní rozhraní rozhraní rozhraní rozhraní rozhraní rozhraní rozhraní rozhraní

-

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

úvodní stránka . . . . . . . . . . galerie . . . . . . . . . . . . . . fórum . . . . . . . . . . . . . . . text . . . . . . . . . . . . . . . . výpis členů . . . . . . . . . . . . profil uživatele . . . . . . . . . . správa . . . . . . . . . . . . . . editace informací v uživatelském editace profilové fotky . . . . . . registrační formulář . . . . . . . nápověda . . . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . profilu . . . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

13 14 15 15 21

43 44 44 45 45 46 46 47 47 48 48

C.1 Obsah přiloženého CD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

xiii

xiv

SEZNAM OBRÁZKŮ

Seznam tabulek 6.1 6.2 6.3

Datová velikost stránky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Rychlosti načtení stránky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Účastníci usability testu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

xv

xvi

SEZNAM TABULEK

Kapitola 1

Úvod V několika posledních letech se na internetu velmi rozmáhá trend komunitních serverů. Mnoho z nich je zaměřeno na hledání přátel a seznamování, jiné na sdílení fotografií, hudby nebo videí a některé na sdružování lidí podobných zájmů. Komunitních serverů je v současnosti na internetu velké množství a kromě jiného se od sebe liší velikostí. Můžeme nalézt obrovské komunitní portály, které zaštiťují nepřeberné množství komunitních sítí, do kterých se může jejich uživatel začlenit a stejně tak můžeme nalézt malé komunitní servery, s pouze jednou samostatnou komunitu a hrstkou jejích členů. Kromě vytváření komunit jako takových se komunitní servery snaží hlavně zefektivňovat komunikaci, spojovat menšiny, seznamovat jednotlivce, sdílet data, také však vyměňovat znalosti nebo zkušenosti z nějaké konkrétní oblasti. Jako takové se hlavně snaží působit na mladé lidi, seznámené s používáním webových technologií a mladí lidé je také obvykle vytvářejí. Toto téma jsem si zvolila, protože mám již delší dobu v úmyslu založit komunitní web. V minulosti jsem byla součástí skupiny, která se pokusila vytvořit webové stránky s galerií pro sebe a své přátele, avšak neměli jsme dostatečné schopnosti a znalosti a příliš jsme neuspěli. Vypracováním této práce bych chtěla ověřit, zda již takové znalosti mám a případně je ještě zdokonalit a prohloubit.

1.1

Struktura práce

Tato práce o šesti kapitolách pojednává o analýze, návrhu, implementaci a následném testování webové aplikace určené k provozu komunitního webu. Následující (tedy druhá kapitola) stručně vysvětlí, co jsou to komunity a komunitní weby a podá přehled nástrojů, které se dají k tvorbě komunitních webu použít, nebo jsou k ní přímo určeny. Ve třetí kapitole, nazvané Analýza a návrh, je uveden seznam požadavků na vytvářenou aplikaci, krátký popis každé z technologií, které budou k implementaci aplikace použity a zdůvodnění, proč byla vybrána právě tato technologie, následuje návrh struktury databáze a popis uživatelských rolí a nakonec návrh uživatelského rozhraní.

1

2

KAPITOLA 1. ÚVOD

Čtvrtá kapitola se zabývá vlastní implementací aplikace. Představí její architekturu a adresářovou strukturu souborů se zdrojovými kódy. Detailněji představí některé zajímavé nebo důležité části kódu, vysvětlí kroky provedené ke zvýšení bezpečnosti aplikace a krátce popíše programy použité při vývoji aplikace. V páté kapitole jsou vypsány metody testování hotové aplikace a výsledky těchto testů. Závěrem je popsáno, jak práce splnila dané cíle spolu s nástinem možností rozvíjení aplikace do budoucna.

Kapitola 2

Cíl práce Cílem tohoto projektu je navrhnout a implementovat webovou aplikaci umožňující běh komunitního webu zaměřeného především na výtvarnou a literární tvorbu jeho uživatelů (tedy s galerií, kam mohou uživatelé přidávat obrázky a s možností nahrávat texty), ale i obsahující obvyklé části komunitních webů nabízející širší možnosti interakce mezi uživateli, jako je diskusní fórum, uživatelské profily, soukromé zprávy, status a další.

2.1

Popis aplikace

Úvodní stránka webu bude obsahovat uvítání pro příchozí návštěvníky a krátký popis obsahu a účelu webu. Dále zde budou informace o aktuálním dění na webu, tedy nejnovější přidané obrázky a texty, nově registrovaní uživatelé a nástěnka sloužící k upozorňování na důležité události, kam bude každý registrovaný uživatel moci přispívat. Galerie obrázků bude obsahovat náhledy obrázků s možností jejich filtrace podle kategorií, do kterých je autor zařadil a také podle autora. Zobrazené obrázky bude možno řadit podle data jejich přidání do galerie, nebo podle toho, jak je jiní uživatelé webu ohodnotili. Kliknutím na náhled se uživatel dostane na stránku s obrázkem v plné velikosti, kde budou také zobrazeny informace o obrázku (název, autor, kategorie kam autor obrázek zařadil, datum přidání do galerie, hodnocení) spolu s autorovým popisem obrázku a komentáři od ostatních uživatelů. Řešení zobrazování textů je podobné jako u obrázků. Místo náhledů, jak tomu je u obrázků, se zobrazí název textu, jeho autor, jakého je text žánru a autorův komentář. Možnosti řazení a filtrování zobrazených textů jsou stejné jako u obrázků. Po kliknutí na název textu se uživatel dostane na stránku s plným zněním textu, kde budou také zobrazeny informace o textu, autorův popis textu a komentáře (stejně jako tomu bylo u obrázků). Každý uživatel bude mít svůj profil, kde se budou zobrazovat informace týkající se daného uživatele. U každého uživatele bude zobrazena jeho přezdívka, avatar, statistiky jeho aktivity a informace které on sám může nebo nemusí vyplnit - pohlaví, věk, bydliště, zájmy, popis své osoby a fotka. Pokud je uživatel autorem obrázků nebo textů, také ty budou zobrazeny na jeho profilu. A stejně jako u obrázků a u textů, i u profilů budou zobrazeny komentáře ostatních uživatelů.

3

4

KAPITOLA 2. CÍL PRÁCE

Fórum bude rozděleno do sekcí podle tématu a do těchto sekcí budou zařazeny diskuse, čímž se i při větším množství diskusí zachová přehlednost. U názvu každé diskuse bude symbol znázorňující, zda je diskuse dostupná a pokud je, zda v ní přibyly nějaké příspěvky od poslední návštěvy, nebo ne. Kliknutím na název diskuse se uživatel dostane na stránku této diskuse. Zde budou zobrazeny informace o diskusi (název, správce, datum založení, počet příspěvků), vypsán topic diskuse a jednotlivé příspěvky k této diskusi. Odkazy budou stejně jako diskuse rozděleny do sekcí podle zaměření stránky na kterou odkaz vede. Další součástí aplikace bude prostor nazvaný správa, kam budou mít přístup pouze přihlášení uživatelé. Odtud budou moci editovat své profily, měnit profilové obrázky a avatary, měnit heslo, ale také přidávat obrázky do galerie a texty. Mimo to se zde budou zobrazovat soukromé zprávy přijaté od ostatních uživatelů a upozornění, pokud byl k jejich obrázku, textu či profilu přidán komentář.

Kapitola 3

Komunity a Komunitní weby 3.1

Komunita

Komunita je společenství živých bytostí sdílejících určitou oblast, u lidí potom tato oblast nemusí být vymezena jen prostorem, ve kterém žijí, ale také jejich zájmy, cíli, vyznáním, potřebami nebo jakýmikoliv jinými podmínkami jejich života. Členem komunity se stává každý, kdo má zájem se na aktivitách komunity podílet, může jí být prospěšný a je stávajícími členy komunity přijat. Členové komunity mají pocit sounáležitosti s ostatními členy a jsou ochotni vynaložit úsilí, aby pomohli sobě navzájem nebo komunitě jako celku.[21][46][37][35][36]

3.2

Komunitní weby

Za komunitní lze označit takové weby, kde uživatelé nejen mají možnost mezi sebou komunikovat, ale také tvoří většinu obsahu webu. Tyto weby začaly být v poslední době velmi populární a mnohé vznikají jako komerční projekty za účelem výdělku, ať už z reklam nebo placených účtů. V takovémto případě se jedná většinou o makrokomunity, tedy komunity bez konkrétní cílové skupiny. Takovéto makrokomunity mají podobu sociálních sítí, jejich cílem je obsáhnout co největší množství uživatelů a tito uživatelé pak v rámci komunity vytvářejí sítě na základě místa bydliště, zájmů a podobně. U makrokomunitních webů je velmi důležitá přívětivost a přitažlivost uživatelského rozhraní a rozmanitost funkcí, ale také reklama. Oproti tomu mikrokomunitní weby se týkají určitého tématu, může to být sport, film, nebo cokoliv jiného. Na takovýto web přicházejí lidé kvůli jeho tématu, nemusí mít proto perfektní uživatelské rozhraní nebo řadu úžasných funkcí. Mikrokomunitní weby obvykle nebývají jedinečné funkcemi, které nabízejí, jedná se o standardní nástroje jako fórum nebo galerie, co mikrokomunitní web dělá jedinečným já jeho téma a lidé, co se na něm vyskytují.[1][8][46][38]

3.3

Nástroje k tvorbě komunitních webů

Pokud nechceme komunitní web sami programovat, je možné k jeho vytvoření použít některý ze systémů pro správu obsahu(CMS z anglického content management system), přesněji

5

6

KAPITOLA 3. KOMUNITY A KOMUNITNÍ WEBY

pro správu webového obsahu (WCM z anglického web content management). Pomocí těchto systémů může kdokoliv bez znalostí webových technologií, nebo jen s minimálními znalostmi (záleží na zvoleném systému) vytvořit a spravovat i dynamickou webovou prezentaci. Mnoho CMS je zaměřeno na vytváření konkrétního typu stránek - blogů, galerií, fór. Velké množství je určeno pro firmy, kde použití CMS pomáhá předejít řadě problémům spojených s nárůstem jak množství digitálního obsahu, tak i množství lidí, kteří jej vytvářejí. Následuje seznam nejpopulárnějších zdarma dostupných CMS vhodných k tvorbě komunitních webů.

Dolphin (http://www.boonex.com) Dolphin je software australské společnosti BoonEx využívající technologie PHP a AJAX. Umožňuje vytvořit libovolný typ komunitního webu s mnoha funkcemi - blogy, přizpůsobitelné profily, video chat, fórum, sdílení fotek, přehrávač hudby, ankety, vytváření skupin a další. Podle licence, při používání Dolphin zdarma, je třeba zobrazovat na každé stránce logo s odkazem na BoonEx. [16][15]

Drupal (http://drupal.org) Drupal, vznikl v roce 2000 v Belgii jako studentský projekt a dnes je k němu k dispozici přes dva tisíce modulů a stovky témat vzhledu, díky čemuž je vhodný k použití pro téměř jakýkoliv i velmi složitý web. Je naprogramován v PHP a využívá databázi MySQL nebo PostgreSQL. Pro komunitní weby je zvláště dobrá vlastnost, že k jakémukoliv obsahu je možné přidávat komentáře. Tento systém má v České republice velmi širokou uživatelskou základnu.[17][18][4][7]

Mambo (http://mambo-foundation.org) Mambo, dříve nazýván Mambo Open Source neboli MOS,vzniklo v roce 2002 jako komerční produkt a dnes spíše stagnuje. Aplikace je implementována v jazyce PHP a využívá databázi MySQL.[27][28][26][39]

Joomla! (http://www.joomla.org) Joomla vznikla v roce 2005 na základě projektu Mambo. Je naprogramována v jazyce PHP (přehledněji než Mambo)a využívá databázi MySQL. K základní instalaci existuje přes čtyři tisíce rozšíření umožňující vytvořit (mimo jiné) plnohodnotný komunitní web. Nevýhodou je, že využívá předdefinované uživatelské role. Joomla má narozdíl od Mamba velmi aktivní komunitu uživatelů a vývojářů.[24][23][45][3]

3.3. NÁSTROJE K TVORBĚ KOMUNITNÍCH WEBŮ

7

e107 (http://e107.org) E107 vznikl v roce 2002 ze systémů litestep.net a ls2k.org s cílem dosažení větší modulárnosti. Je naprogramován v PHP a využívá databázi MySQL. Opět existuje množství modulů pro vytvoření téměř čehokoliv. Nemá v České republice tak širokou uživatelskou základnu jako Drupal nebo Joomla!, ale existují lokalizace do českého jazyka.[19][20]

XOOPS (http://www.xoops.org) XOOPS je zkratka z anglického "eXtensible Object Oriented Portal System"(rozšiřitelný objektově orientovaný portálový systém). Tento systém je implementovaný v jazyce PHP s důrazem na objektově orientované programování a využívá databáze MySQL. XOOPS využívá modulů, kterých je dnes dostupných kolem pěti set. Podle slov jeho tvůrců, je ideální pro vytváření malých i velkých komunitních webů, portálů společností, blogů a dalších.[42][43][44]

Typo3 (http://typo3.org) Typo3 je bohatý přizpůsobitelný systém implementovaný v PHP. Nevýhodou je nutnost učit se s tímto systémem zacházet, pro zvládnutí složitého uživatelského rozhraní a jazyka TypoScript se odhaduje zhruba měsíc, ale poté nabízí širokou škálu funkcí zejména pro firemní portály, ale i pro komunity i jednotlivce.[32][5][2][33]

BuddyPress (http://buddypress.org) BuddyPress je rozšíření redakčního systému WordPress pro vytváření sociálních sítí. Přidává k funkcionalitě WordPressu (články, blog, komentáře) možnost vytvoření fór, uživatelský profilů, fotogalerií, skupin, posílání osobních vzkazů a přidávání uživatelů do přátel.[13][9][6]

Bitweaver (http://www.bitweaver.org) Bitweaver je cms a framework určený především pro tvorbu webů velkých komunit a společností. Je odvozen od systému TikiWiki a přestože je modulární, již v základní instalaci obsahuje funkce jako fórum nebo galerie.[11][12]

8

KAPITOLA 3. KOMUNITY A KOMUNITNÍ WEBY

Ning (http://www.ning.com) Ning je síť sociálních sítí veřejně spuštěná v roce 2005. Po registraci si každý uživatel pár kliknutími může vytvořit svůj vlastní komunitní web sestávající se z fóra, galerie, videí, novinek a dalších. Dalšími pár kliknutími potom může upravit jeho strukturu a vzhled s překvapivou volností. Výsledné stránky jsou na snadnost a rychlost jejich vytvoření přehledné a snadno použitelné se širokou funkcionalitou. Kromě tenkého proužku nahoře (značícího, že stránka je součástí sítě ning) obsahují reklamu jen uprostřed pravého sloupce.[29][30]

Kapitola 4

Analýza a návrh řešení 4.1

Katalog požadavků

Katalog požadavků definuje funkce, které bude aplikace poskytovat a jaká omezení jsou na ni kladena.

4.1.1

Nefunkční požadavky

Na aplikaci jsou kladena následující omezení. Požadavky na systém • Aplikace bude funkční na serveru apache v linuxu • Aplikace bude využívat databázi MySQL • Applikace bude zvládat minimálně desítky současně připojených uživatelů Bezpečnost • Aplikace bude chráněná proti standardním útokům. • Formuláře budou chráněny před odesláním robotem. • Osobní údaje, které je nutné vyplnit, se nebudou veřejně zobrazovat. Použitelnost a přístupnost • Aplikace bude použitelná v nejrozšířenějších prohlížečích • Aplikace bude optimalizovaná pro rozlišení minimálně 1024x768 • Aplikace bude použitelná v rozlišení minimálně 800x600

9

10

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

• Kód bude validní • Aplikace bude splňovat pravidla přístupnosti dle novely Zákona č. 365/2000 Sb. http://www.pravidlapristupnosti.cz

4.1.2

Funkční požadavky

V systému budou implementovány následující funkce.

Uživatelé • Registrace uživatelů • Přihlášení/odhlášení uživatelů • Mazání uživatelů • Změna uživatelských rolí • Banování uživatelů (na určitou dobu) • Posílání soukromých zpráv uživatelům • Změna hesla

Obrázky • Nahrávání obrázků spolu s komentářem autora • Zařazení obrázků do sekcí podle techniky a tématu • Přidávání komentářů k obrázkům • Úprava obrázku a komentáře autora • Mazání obrázků • Hodnocení obrázků • Zobrazení hodnocení pouze těm uživatelům, kteří už hodnotili • Počet zobrazení obrázku • Řazení obrázků podle data přidání, nebo podle hodnocení • Filtrování obrázků podle tématu a/nebo techniky a/nebo autora

4.1. KATALOG POŽADAVKŮ

11

Texty • Přidávání textů spolu s komentářem autora • Zařazení textů do sekcí podle žánru • Přidávání komentářů k textům • Úprava textu a komentáře autora • Hodnocení textů • Zobrazení hodnocení pouze těm uživatelům, kteří už hodnotili • Počet zobrazení textu • Řazení textů podle data přidání, nebo podle hodnocení • Filtrování textů podle žánru a/nebo autora

Uživatelské profily • Vyplnění uživatelského profilu • Editace uživatelského profilu • Zobrazení statistiky o uživateli (počet příspěvků do fór, počet komentářů k tvorbě, poslední přihlášení, datum registrace, počet spravovaných fór) • Přidávání komentářů k uživatelskému profilu • Vyhledávání uživatelů podle zájmů • Počet zobrazení profilu • Změna profilového obrázku a avataru

Odkazy • Přidávání odkazů • Zařazování odkazů do kategorií • Mazání odkazů

12


Fóra • Vytváření topiců fóra • Rozdělení topiců do sekcí • Editace topiců fóra • Mazání topiců diskuse • Přispívání do diskuse • Nastavení práv pro přispívání a čtení diskuse • Editace příspěvků diskuse • Mazání příspěvků • Zvýraznění diskusí s nepřečtenými příspěvky Ostatní • Nástěnka na hlavní stránce • Zobrazení aktivních uživatelů • Zobrazení nejnovějších děl • Zobrazení nejnovějších příspěvků ve fóru • Upozornění na komentáře k tvorbě nebo profilu

4.2

Datový model

Datový model celého systému byl rozdělen na několik částí pro větší přehlednost. Následuje popis jednotlivých částí.

Fórum Na obrázku 4.2 je zobrazen datový model týkající se fóra. Uživatel (user) může napsat příspěvek (f_post). Příspěvek má ve sloupci USER_ID hodnotu ID uživatele, který jej poslal. Každý příspěvek patří do topicu (f_topic), ve sloupci TOPIC_ID má hodnotu ID topicu, do kterého patří. Topicy jsou vytvářeny uživateli, ve sloupci USER_ID mají ID uživatele, který je vytvořil. Každý topic patří do sekce (f_sekce), ve sloupci SEKCE_ID je ID sekce, do které topic patří. Tabulka f_naposled slouží k uchování času poslední návštěvy diskuse uživatelem, aby mohly být zvýrazněny diskuse s příspěvky, které uživatel ještě nečetl. V TOPIC_ID se uchovává ID topicu, tedy celé diskuse a v USER_ID ID uživatele, ve sloupci CAS čas, kdy uživatel diskusi navštívil.

4.2. DATOVÝ MODEL

13

Obrázek 4.1: Datový model fóra

14


Obrázek 4.2: Datový model hlavní části

4.2. DATOVÝ MODEL

15

Obrázek 4.3: Datový model počítadla

(a) Datový model odkazů

(b) Datový model - tabulka ’nejnovejsi’

Obrázek 4.4: Datové modely

16


Obrázky, texty, komentáře Obrázek 4.2 zobrazuje hlavní část aplikace, tedy galerii obrázků a texty. Tabulka obr představuje obrázek, tabulka text představuje text. Obrázek (a stejně tak i text) má autora, tedy uživatele, který obrázek nahrál. ID tohoto uživatele je ve sloupci USER_ID. Každému obrázku je přiřazeno téma (tabulka tema) , jehož ID je ve sloupci TEMA_ID a technika (tabulka tech), jejíž ID je ve sloupci TECH_ID. Textu je přiřazen žánr (tabulka zanr), jehož ID je ve sloupci ZANR_ID. Ve sloupci DATUM je datum nahrání obrázku nebo textu, ve sloupci VIEWS je počet jeho shlédnutí, ve sloupci HOD celkové hodnocení a ve sloupci POC kolikrát byl obrázek nebo text hodnocen. Obrázek, text a uživatelský profil mohou být komentovány. Tyto komentáře se ukládají do tabulky koment, avšak tato tabulka slouží i k ukládání osobních zpráv a příspěvků na nástěnku. Jestli se jedná o komentář k obrázku, k textu, k profilu, soukromou zprávu, nebo příspěvek na nástěnku, je rozlišeno hodnotou ve sloupci VEC. Tento systém umožňuje snadné přidání dalších komentovatelných objektů. Ve sloupci VEC_ID se potom nachází ID toho, co je komentováno. Tedy, když je ve sloupci VEC_ID hodnota text a ve sloupci ID hodnota dvě, znamená to, že komentář náleží textu s ID dvě. Komentář má také odesílatele a adresáta. ID uživatele, který komentář napsal, se nachází ve sloupci USER_ID. ID uživatele, pro kterého je komentář určen, se nachází ve sloupci ADRESAT. Adresát je do tabulky ukládán za účelem jednoduššího vypsání všech komentářů určených pro jednoho uživatele, což se využívá ve Správě, kde se vypisují všechny komentáře, které uživatel dostal a ještě nečetl. Jestli užiavtel komentář četl nebo ne, je rozlišeno hodnotou ve sloupci PRECTENE. Podobná tabulce koment je tabulka hodnoceni. V této tabulce se uchovává ID uživatele, který hodnotil ve sloupci USER_ID (nikdo nemůže hodnotit dvakrát), zda se jedná o obrázek nebo text ve sloupci DILO_TYP a ID daného díla ve sloupci DILO_ID. Samotná hodnota hodnocení, tedy počet bodů, je ve sloupci HOD.

Zobrazení U obrázků, textů i uživatelských profilů se počítá počet zobrazení, a to jednou za den na jednu IP adresu. Na obrázku 4.2 se nachází tabulka zobrazeni, ve které se uchovává IP adresa (sloupec IP) a co bylo z této adresy zobrazeno, systémem stejným jako u hodnocení a komentářů, tedy sloupec VEC rozlišuje, zda šlo o obrázek, text, nebo uživatelský profil a ve sloupci VEC_ID je ID zobrazeného díla nebo profilu. Tato tabulka se každý den vyprázdní.

Odkazy Uživatel bude mít možnost přidávat odkazy na jiné stránky. Na obrázku 4.4(a) vidíme tabulku odkaz, v jejímž sloupci USER_ID je uloženo ID uživatele, který odkaz přidal a ve sloupci TYP_ID je jeden z typů (tabulka typ) do kterých jsou odkazy rozděleny podle obsahu odkazované stránky.

4.3. UŽIVATELSKÉ ROLE

17

Nejnovější události Z tabulky nejnovejsi (4.4(b)) se vypisují informace o nejnovějších událostech pro přihlášené uživatele. Uchovávají se v ní pouze informace pro vypsání této novinky a vytvoření odkazu. V sloupci VEC se rozliší, zdali se nová událost odehrála ve fóru (tedy někdo přidal nový příspěvek), nebo jestli se zaregistroval nový uživatel, nebo byl přidán nový obrázek nebo text. Ve sloupci VEC_ID je potom ID daného fóra, nového obrázku, textu nebo uživatele k vytvoření uživatele. Ve sloupci NAZEV je název dané události, ve sloupci CAS je čas kdy k události došlo a ve sloupci NICK je přezdívka uživatele, který ji vykonal. Tato tabulka se každý den vyprazdňuje.

4.3

Uživatelské role

V aplikaci se budou vyskytovat tyto uživatelské role. Role jsou seřazeny podle pravomocí od nejnižších po nejvyšší. Pravomoci každé role zahrnují i pravomoci role s nižšími pravomocemi. • Nepřihlášený uživatel • Přihlášený uživatel • Správce • Administrátor Jednoduše lze pravomoci uživatelů vyjádřit takto: • Nepřihlášení uživatelé mohou obsah pouze prohlížet (kromě obsahu, který je soukromý, což jsou veškeré komentáře a fóra tak označená). • Přihlášení uživatelé mohou obsah vytvářet. Dále mohou editovat obsah a mazat příspěvky k obsahu, jehož jsou správci (uživatel se stává správcem obsahu když jej vytvoří, tedy když nahraje obrázek nebo založí diskusi, stává se jejím správcem). • Správce, jak již název role napovídá, je správcem veškerého obsahu, může tedy editovat obsah, který vytvořil jiný uživatel (editovat cizí text) a mazat příspěvky k obsahu, který vytvořili jiní (mazat komentáře k obrázku, který není jeho). • Administrátor má právo obsah mazat a měnit uživatelské role. Následuje přesnější vymezení pravomocí uživatelských rolí:

18


Nepřihlášený uživatel • přihlásit • registrovat • prohlížet obrázky • prohlížet texty • prohlížet uživatelské profily • prohlížet odkazy • prohlížet statické stránky • prohlížet fóra s příslušným nastavením práv • zaslat si na email nové heslo v případě zapomenutí starého

Přihlášený uživatel • prohlížet komentáře k obrázkům, textům a uživatelským profilům • prohlížet příspěvky na nástěnce • nahrávat obrázky a texty • editovat a mazat své obrázky a texty • editovat svůj profil • změnit své heslo • přidávat odkazy • přispívat na nástěnku • vytvářet diskuse (a stát se tak jejich správcem) • upravovat diskuse, které spravuje • nastavovat práva diskusím, které spravuje • číst a přispívat do diskusí s příslušným nastavením práv • mazat příspěvky v diskusích, které spravuje • editovat vlastní příspěvky • zasílat soukromé zprávy • zobrazovat soukromé zprávy, které si vyměnil s určitým uživatelem

4.4. GRAFICKÉ ROZHRANÍ

19

• hodnotit díla, která ještě nehodnotil • zobrazit celkové hodnocení děl, která již hodnotil • zobrazit právě přihlášené uživatele • zobrazit kdo právě přispěl do kterého fóra • odhlásit se

Správce • mazat kterýkoliv komentář • mazat kterýkoliv příspěvek v kterékoliv diskusi • mazat příspěvky na nástěnce • editovat kterýkoliv obrázek • editovat kterýkoliv text • editovat profil uživatele s menšími právy • měnit uživateli login a nick • banovat uživatele

Administrátor • mazat obrázky • mazat texty • mazat fóra • mazat odkazy • mazat uživatele • měnit role uživatelů

4.4

Grafické rozhraní

Grafické rozhraní je u komunitních webů velmi důležité. Musí být dostatečně přitažlivé, aby návštěvníky neodrazovalo, ale také musí být dobře uzpůsobeno jednotlivým funkcím webu, aby se v nich uživatel dokázal dobře orientovat a snadno je používat.Nemělo by však odvádět pozornost od samotného obsahu webu, ale spíše jej podtrhovat a dotvářet. Je také nutné nezapomínat na návštěvníky se zrakovým postižením.

20


Pro jaké rozlišení optimalizovat? V dnešní době je využívána široká škála rozlišení a je nemožné udělat design perfektní pro všechny. Někteří uživatelé budou ochuzeni, zpravidla to bývají ti s nejmenšími, nebo naopak s největšími rozlišeními. Webové stránky optimalizované pro rozlišení 800x600 se v rozlišeních 1680x1050 a větších zobrazí jako úzký pruh a většinu monitoru bude zabírat prázdné pozadí. Webové stránky optimalizované pro rozlišení větší zase nutí uživatele s rozlišením 800x600 scrollovat do boku, což je velmi nepřirozené. Dnešní standart je rozlišení 1024x768, je tedy nutné, aby se minimálně při této velikosti okna prohlížeče stránky zobrazovaly správně. Optimalizovat i pro rozlišení 800x600? Toto rozlišení používá dnes ještě 3 – 10% uživatelů a je pravděpodobné, že jejich počet bude klesat. Pokud by byly stránky dostatečně úzké, aby se vešly do tohoto rozlišení (zmenšením obrázků, snížením množství informací na stránce a jejich přesunutí na stránku jinou, což by zvýšilo počet stránek, které uživatel musí navštívit, aby se k určité informaci dostal), zbývajících 90% uživatelů by bylo ochuzeno. Stránky proto budou optimalizovány pro rozlišení 1024x768, avšak budou použitelné i v rozlišení 800x600.

Rozložení stránky Každá stránka bude mít stejné záhlaví a zápatí, měnit se bude pouze hlavní část. Levá část záhlaví je vyhrazena pro obrázek nebo logo a pravá pro přihlašovací formulář nebo informace o přihlášeném uživateli. Vzhledem k malému počtu položek, není třeba vymezovat pro menu celý sloupec na boku, ale vejde se horizontálně pod záhlaví stránky. Stránky budou optimalizovány 1024x768, proto pro co největší pohodlí uživatelů s rozlišením menším bude pravý sloupec vyhrazen seznamu aktivních uživatelů a diskusí, který se zobrazuje pouze přihlášeným uživatelům a ani pro přihlášené není nezbytně nutné mít jej stále na očích pro plnohodnotné využití stránek. Uživatel s rozlišením menším než 1024x768 bude tedy muset scrollovat do boku pouze tehdy, když se bude chtít na tento seznam podívat.

4.5

Technologie

Tato podkapitola se zabývá výběrem technologií k implementaci aplikace. K rozhodování došlo jen u technologie pro logiku na straně serveru, ostatní volby byly jednoznačné. Logika na straně serveru Pro implementaci logiky na straně serveru připadají v úvahu dva kandidáti - PHP a Java Enterprise Edition. PHP (rekurzivní zkratka z anglického PHP: Hypertext Preprocessor, „PHP: Hypertextový preprocesor“, původně Personal Home Page) je skriptovací jazyk především pro tvorbu webových prezentací ale i desktopových aplikací, velmi oblíbený pro svou jednoduchost a svobodnou licenci.[41]

4.5. TECHNOLOGIE

21

Obrázek 4.5: Návrh rozložení stránky

Java EE je platforma pro vývoj serverových aplikací v jazyce Java s důrazem na celou řadu standardů, modulárnost a rozdělení na vrstvy. Java EE je velmi propracovaná technologie, používaná především pro tvorbu rozsáhlých a náročných aplikací.[34] Nakonec bylo vybráno PHP, protože je jednodušší, vhodné na menší projekt a hostingy s jeho podporou jsou cenově dostupnější. Java se více hodí na větší aplikace, u kterých se plně projeví její výhody oproti PHP. Logika na straně klienta Pro implementaci logiky na straně klienta bude použit objektově orientovaný skriptovací jazyk JavaScript. Struktura stránky K definování struktury stránek bude použito XHTML (eXtensible Hypertext Markup Language – „rozšiřitelný hypertextový značkovací jazyk“) , značkovací jazyk pro tvorbu hypertextových dokumentů založený na XML (eXtensible Markup Language – „rozšiřitelný značkovací jazyk“), měl být nástupcem HTML (Hypertext Markup Language – „hypertextový značkovací jazyk“), ale nyní je spíše jeho alternativou. Vzhled stránky K definování vzhledu stránky bude použit jazyk CSS (Cascading Style Sheets - „kaskádové styly“), který byl navržen k tomuto účelu a jeho hlavním smyslem je oddělit obsah stránky od vzhledu.

22


Kapitola 5

Realizace 5.1

Architektura

Architektura aplikace je obecné schéma definující strukturu aplikace, rozdělení na větší logické celky. Definuje pro každý celek funkci, kterou v systému zastává a způsoby interakce s ostatními celky.

5.1.1

Model-view-controller

Model-view-controller[10][40] je architektura v poslední době velmi oblíbená zvláště pro tvorbu prezentačně orientovaných systémů. Jejím principem je rozdělení aplikace na tři nezávislé logické části: Model, View a Controller tak, aby změnou jedné z nich byly ostatní části postiženy minimálně.

Model Model reprezentuje data, zapouzdřuje datovou logiku aplikace. Většinou bývá realizován třídami. Přistupuje k databázi.

View View reprezentuje grafické rozhraní aplikace. Prezentuje data z modelu.

Controller Controller to vše kontroluje, přijímá události od uživatele, zpracovává je a na jejich základě vyvolává metody modelu a vybírá view, ve kterém se následně data z modelu zobrazí. Na obrázku 5.1.1 jsou znázorněny vztahy mezi jednotlivými částmi. Uživatel zadá požadavek controlleru (může být přítomen dispatcher, který vybere příslušný controller pro zpracování požadavku), ten se dotáže modelu o data nebo provede potřebné změny dat (podle toho, jaký byl požadavek), poté vybere příslušný view a ten spolu s daty zobrazí uživateli.

23

24

KAPITOLA 5. REALIZACE

Obrázek 5.1: Znázornění model-view-controller architektury

5.1. ARCHITEKTURA

5.1.2

25

Struktura aplikace

Zdrojové soubory aplikace jsou rozděleny do několika složek 5.2. • css - obsahuje soubor style.css s kaskádovým stylem a obrázky, které tento styl využívá • ctrl - obsahuje soubory se zdrojovým kódem části zastávající funkci controlleru • model - obsahuje soubory se zdrojovým kódem části zastávající funkci modelu • script - obsahuje soubor s javascriptem a php skripty určené pro cron • view - obsahuje soubory se zdrojovým kódem části zastávající funkci view Ve složkách user a img nejsou zdrojové soubory, tyto složky slouží k ukládání obrázků nahraných uživatelem buď na svůj profil (user), nebo do galerie (img).

Obrázek 5.2: Adresářový strom - složky Soubor index.php je dispatcherem celé aplikace. Na základě hodnoty parametru action v požadavku GET zavolá příslušný controller ze složky ctrl a ten zavolá příslušný view ze složky view. Pokud má action hodnotu, kterou dispatcher nezná, zavolá stránku s chybou. Pokud nedostane hodnotu parametru action, zavolá controler index.php ze složky ctrl a načte se stránka index.html.phpze složky view, což je úvodní stránka.

$allowed = array ("galerie","reg","profil","dilo","odkazy","forum", "clenove","info","bytosti","upload","edit","sprava","topic","recover"); if(in_array($_GET[’action’],$allowed,true)) require_once("ctrl/".$_GET[’action’].".php"); else { $err = "Stránka nenalezena"; require_once(’view/chyba.html.php’); }

26

5.2

KAPITOLA 5. REALIZACE

Bezpečnost

Komunitní weby jsou místem navštěvovaným mnoha lidmi a o mnoha z nich uchovávají citlivé informace. Proto je třeba věnovat pozornost bezpečnosti těchto dat, ale i zamezit poškození vzhledu či funkčnosti webu.

SQL Injection SQL Injection je forma útoku mířená na databázovou vrstvu.Útočník může nechráněným vstupem předat databázi vlastní SQL dotaz nebo změnit původní. PHP (s databází MySQL) má ochranu v podobě funkce mysql_real_escape_string($vstup), která, použitá na data od uživatele před provedením SQL dotazu, escapuje (= převede potenciálně nebezpečný znak na sekvenci bezpečných znaků stejného významu) tato data a tím zabrání jakékoliv manipulaci s SQL dotazy. Dále, ne jen z hlediska vytížení databáze, ale i z hlediska bezpečnosti je dobré, nevybírat z databáze všechna data (SELECT *), ale jen ta, která budeme potřebovat. Všechny zde popsané způsoby byly při implementaci aplikace použity.

XSS (Cross-site scripting) Tato metoda útoků také využívá neošetřování uživatelských vstupů a to k vložení vlastního JavaScriptu. Tento JavaScript může poškozovat vzhled stránky, ihned ji přesměrovávat na jinou, takže se vůbec nezobrazí, nebo může útočníkovi sloužit k získání citlivých informací. Ochranou je převádět některé speciální znaky na HTML entity (např. < na <), což v PHP umožňuje funkce htmlspecialchars() a bylo použito v této aplikaci.

XSRF/CSRF (Cross-Site Request Forgery) Tento způsob útoku se uplatňuje u stránek, kde se v cookie uchovává informace o tom, že je uživatel přihlášen. Takovémuto uživateli se dá potom podstrčit odkaz, který provádí nějakou akci (akce je udána parametry v adrese). Protože je uživatel přihlášen, má právo k provedení této akce a akce se provede. O něco složitější, ale možné je provedení téhož avšak s parametry v metodě post namísto get. Ne příliš účinnou ochranou je kontrola refereru, i ten se dá podvrhnout. Další možností je při přihlášení uživatele vygenerovat náhodný řetěz, uložit jej uživateli do sešny a přidávat ke všem odkazům a action formulářů, u kterých je nebezpečí, že budou použity pro XSRF. Před provedením akce se ověří, jestli řetězec v adrese odpovídá tomu v sešně uživatele a pokud ne, tak se akce neprovede. Pro úspěšný útok teď musí uživatel znát i tento řetězec. I to je samozřejmě možné, proto je vhodné řetězec měnit. V aplikaci byla implementována kontrola těchto řetězců před provedením nevratných akcí, avšak řetězec zůstává stejný po celou dobu jeho přihlášení.

Kapitola 6

Testování Během implementace byla každá nově vytvořená funkce systému testována (jestli se správně provede při zadání správných dat a jestli odmítne chybná data) a také bylo průběžně prováděno regresní testování (regresní chyba obvykle nastává po změně programu, kdy některá z funkcionalit co dříve fungovaly, fungovat přestane). Po dokončení aplikace bylo provedeno white box testování (tester vybírá vstupní data pro testování na základě znalosti implementace programu)a black box testování (tester neví nic o implementaci programu) a nalezené chyby byly opraveny. Za účelem dalšího testování a získání názorů od uživatelů byl systém nasazen na adrese http://dryas.shy.cz (obrázky uživatelského rozhraní najdete v příloze B), veškeré další testování proběhlo zde.

6.1

Optimalizace pro prohlížeče

Stránky byly testovány na platformě Windows v těchto prohlížečích: • Internet Explorer 6, 7, 8 • Firefox 3 • Opera 7, 8, 9 • Chrome 1, Chromium 2 • Safari 3 A na platformě Linux v těchto prohlížečích: • Firefox 3 • Opera 7, 8, 9 • Epiphany 2 • Iceweasel 3

27

28

KAPITOLA 6. TESTOVÁNÍ

Ve všech těchto prohlížečích se stránky zobrazovaly stejně (až na nepodstatné detaily), jediný problém nastal u Internet Exploreru 6 a to s vykreslováním průhledných obrázků ve formátu PNG, kde místo průhledného pozadí zobrazí pozadí šedé. Tento problém je však pouze estetický a funkčnost aplikace nijak neovlivní.

6.2

Validita

Validita stránek byla prověřena validátorem konsorcia W3C. Všechny stránky byly HTML validátorem validovány podle normy XHTML 1.0 Strict bez chyb i bez varování. V souboru s kaskádovými styly nenalezl CSS validátor žádné chyby. Konsorcium W3C http://www.w3.org HTML validátor http://validator.w3.org CSS validátor http://jigsaw.w3.org/css-validator

6.3

Datová velikost a rychlost načítání

K testování tohoto aspektu webové aplikace byl použit Automatický audit Dobrého webu. Výsledky jsou zaznamenány v tabulkách 6.2 a 6.1

Velikost stránky

HTML kód CSS styly(modem) Obrázky(modem) Multimédia Skripty Rámce Celkem

velikost (B) 7 828 14 813 15 768 0 14 794 0 43 203

Tabulka 6.1: Datová velikost stránky

Rychlosti načtení stránky Uživatelé jsou obvykle ochotni počkat patnáct sekund na načtení stránky, a pokud se do té doby stránka nenačte, tak odcházejí. Výsledky testu uvádějí, že testovaná stránka se na lince s rychlostí 56 kb/s načítala 6 sekund, což je přijatelný výsledek. Automatický audit http://nastroje.dobryweb.cz/automaticky-audit Dobrý web http://www.dobryweb.cz

6.4. KONZISTENCE ODKAZŮ

Linka 9600 b/s (modem) 14,4 kb/s (modem) 56 kb/s (modem) 128 kb/s (ADSL) 256 kb/s (ADSL) 512 kb/s (ADSL)

29

Čas načtení (sekundy) 36,00 24,69 6,17 2,70 1,35 0,68

Tabulka 6.2: Rychlosti načtení stránky

6.4

Konzistence odkazů

Pro ověření konzistence odkazů byla použita webová aplikace konsorcia W3C Link Checker . Testování jedné stránky trvalo 28 - 50 sekund a nebyly nalezeny žádné odkazy vedoucí na neexistující stránku. Link Checker http://validator.w3.org/checklink

6.5

Přístupnost

Nástroj Luminosity Colour Contrast Ratio Analyser byl použit pro ověření, zda li je mezi barvou písma a barvou pozadí dostatečný kontrast. Test pro zvolené barvy skončil s výsledkem AAA - velmi dobrý kontrast. Pomocí nástroje Colorfilter, který převádí webovou prezentaci do jiné barevnosti tak, aby simuloval různé druhy barvosleposti, bylo ověřeno, že všechny informace na stránkách jsou čitelné při všech nabízených simulování vad vnímání barev. Luminosity Colour Contrast Ratio Analyser http://juicystudio.com/services/luminositycontrastratio.php Colorfilter http://colorfilter.wickline.org

6.6

Použitelnost

Pro ověření použitelnosti webové aplikace byl proveden usability test. Členové internetových komunit bývají většinou lidé ve věku mezi deseti a třiceti lety, ale v závislosti na tématu konkrétní komunity se mohou více vyskytovat i jiné věkové kategorie. Protože ke komunitnímu webu na internetu se může dostat kdokoli, není na účastníky testu kladen jiný požadavek, než aby dokázali používat libovolný prohlížeč k prohlížení internetových stránek. Test byl prováděn vždy na počítači daného účastníka za použití prohlížeče, který on sám běžně používá.

30


Účastník Věk Vzdělání Znalost práce na počítači Zkušenost s vytvářením www stránek Čas strávený na internetu (hodin/týden) Člen komunitních webů (počet) Potíže se zrakem

A 48 Vyšší Uživatelská Ne 7 0 ne

B 21 Střední Skvělá Ano 70 5 ne

C 17 Základní Uživatelská Ne 20 2 ne

Tabulka 6.3: Účastníci usability testu

6.6.1

Seznam účastníků usability testu

Údaje v tabulce 6.3 byly získány z dotazníku, který každý z účastníků vyplnil před testem.

6.6.2

Průběh testu

Účastník si otevře v prohlížeči hlavní stránku. Pokud je aktivní a chce stránku prozkoumávat, je pouze sledován. Pokud neví, co by dělal, dostává pokyny. • Registrovat se • Přihlásit se • Změnit si heslo • Vyplnit svůj profil • Změnit si avatar nebo fotku • Založit fórum • Napsat, editovat a smazat příspěvek • Hodnotit text nebo obrázek • Napsat soukromou zprávu

A A dostala úkol se zaregistrovat a nejdříve prošla uvítací text, pak ji zaujaly nápisy ’registrován’ u nově registrovaných členů. Pochopila, že ty jí k registraci nepomohou. Po chvíli si všimla, že ještě něco je v pravém horním rohu. Formulářové políčko login ji navedlo k odkazu na registraci. Registrační formulář vyplnila správně a odeslala, ale nevšimla si hlášky

6.6. POUŽITELNOST

31

o úspěšném provedení registrace a chtěla opravovat chyby. Když jí bylo řečeno, že je zaregistrovaná, tak se chystala přihlásit, vyplnila login, ale neznala heslo, nemohla najít vyplněné heslo v registračním formuláři, pak jí došlo, že bylo posláno na email. Po přihlášení si chtěla změnit heslo. Bez váhání klikla na odkaz správa a poté na odkaz změnit heslo. Heslo úspěšně změnila, ale až pak si všimla nápisu nabádajícího k používání silných hesel a vysvětlujícího, jaké takové heslo je. Nevšimla si hlášky o úspěšném provedení akce a chtěla formulář vyplňovat znova. Poté si prohlížela stránku s výpisem členů, a všimla si, že ostatní mají různé avatary a ona má otazník. Rozhodla se avatar změnit. Opět klikla na správu, ale nevěděla, který odkaz tam vybrat (nevěděla, že ty malé obrázky u jména se nazývají avatary). Klikla tedy na odkaz nahrát obrázek. Byla zmatená z formuláře, který se zobrazil a tak klikla na záložku obrázky. Tam viděla náhledy obrázků z galerie a myslela, že z těchto obrázků ma vybírat. Bylo jí řečeno že obrázku se říká avatar a ať to zkusí znova. Tak opět klikla na správu a poté na odkaz změnit avatar a avatar úspěšně změnila (všimla si i hlášky). Poté jí bylo řečeno ať napíše něco do fóra, což bez problémů provedla. Podařilo se jí i svůj příspěvek upravit. Poté jí bylo řečeno, ať vytvoří novou diskusi. Nejdříve myslela, že se to bude dělat přes správu, ale pak si všimla odkazu v sekci fórum. Diskusi bez problémů vytvořila a napsala do ní příspěvek. Bylo jí řečeno, ať jej smaže, což se pokusila udělat tak, že jej dala editovat a smazala jeho obsah. Vypsala se červená hláška o tom, že příspěvek nemůže mít prázdný obsah. Zkusila tedy editovat celou diskusi, tam také nenašla možnost jak smazat příspěvek. Nakonec našla křížek v rohu příspěvku a kliknutím na něj příspěvek smazala. Bylo jí řečeno, aby ohodnotila obrázek. Otevřela tedy náhodný obrázek, chvíli hledala u komentářů a pak nahoře našla tlačítko hodnotit a okamžitě na něj klikla (aniž by si všimla políčka vedle, kde má vybrat jak vlastně obrázek hodnotí). Na závěr zkoušela poslat soukromou zprávu. Nejprve hledala ve formuláři na filtrování textů žánr soukromé. Když ho tam nenašla, šla hledat do fóra. Tam také nenašla způsob, jak poslat soukromou zprávu. Zkusila správu a tam vyplnila formulář na odeslání soukromé zprávy, avšak adresáta nevybrala v poli adresát pod polem na text zprávy, ale v poli jiného formuláře v bočním menu, sloužícím k filtrování soukromých zpráv. Na omyl byla upozorněna. Zprávu odeslala a poté si ji zobrazila pomocí formuláře na filtrování.

B B má s komunitními weby již bohaté zkušenosti. Když byl tedy požádán, aby se zaregistroval, po krátkém prohlédnutí menu se podíval do pravého horního rohu, kde u přihlašovacího formuláře čekal odkaz na registraci a skutečně jej tam našel. B se podařilo splnit všechny úkoly, které mu byly dány, aniž by potřeboval pomoc. Zde budou vypsány pouze úkony, u kterých okamžitě nevěděl co dělat nebo kam kliknout. První taková situace nastala při editaci profilu. Očekával, že k editaci profilu povede odkaz odněkud z jeho profilu, později jej ale našel ve správě. Další taková situace nastala, když měl přidat text. Hledal odkaz na přidání textu vpravo nahoře na stránce s výpisem textů, ale když jej tam neviděl, tak se podíval do správy. Narozdíl od účastníka A nebylo účastníkovi B jasné, co očekávat pod odkazem správa.

32


C Když byla C požádána, aby se zaregistrovala, nejprve klikla do menu na záložku členové, ale vzápětí si všimla odkazu registrace v pravém horním rohu. Registrace i přihlášení proběhly v pořádku, stejně přidávání, mazání i editace komentářů. Problém nastal při akcích, které se vykonávají přes odkaz ve správě. Říkala, že vůbec neví, co si pod pojmem správa představit a podívat se tam byla až poslední možnost. Navrhla, aby správa byla přejmenována na Nastavení. Když zjistila, jaké akce lze ze správy provádět, neměla již s nimi žádný problém. Když byla požádána, aby ohodnotila dílo, otevřela obrázek, téměř okamžitě uviděla tlačítko hodnotit a hned na něj klikla. Obrázek se ohodnotil, ale ona o tom nevěděla a ptala se, jak má vybrat to hodnocení.

6.6.3

Zhodnocení testu

Uživatelé běžně se pohybující na internetu a zejména na komunitních webech nemají s používáním tohoto webu větší obtíže, protože většina ovládacích prvků je umístěna tam, kde je očekávají a ostatní si snadno zapamatují. Přesto by se dalo užívání webu těmto uživatelům zpříjemnit a to následujícími změnami: • Přidání odkazu na editaci profilu přímo na profil uživatele • Přidání odkazu na na nahrávání obrázku/textu na stránku s výpisem obrázků/textů • Hlášky o úspěšném provedení akce udělat výraznější • Přidat hlášku o úspěšném hodnocení obrázku • První hodnota ve formuláři pro hodnocení obrázků by neměla být platné hodnocení, aby když uživatel rovnou klikne hodnotit, nebyla tato hodnota započítána. Stejně tak u odesílání soukromých zpráv. Uživatelé, kteří se běžně nepohybují na komunitních webech, to mají o něco složitější, protože se musí nejprve naučit, kde co najdou a co se jak jmenuje. Kromě snahy o co největší intuitivnost uživatelského rozhraní lze těmto uživatelům pohyb na webu zjednodušit popisem nacházejícím se na každé stránce, umožňující uživateli provést nějakou akci, který stručně vysvětlí, kde se uživatel nachází a co zde může dělat. Pomůže také kvalitní a přehledná nápověda. Zvláštností je sekce správa, která je přístupná pouze registrovaným uživatelům, kteří odtud mohou spravovat svůj profil, přidávat obrázky, posílat soukromé zprávy apod. Uživatel neznalý komunitních webů bez váhání volil tuto sekci, pokud chtěl změnit heslo nebo avatar, tedy věděl přibližně co v této sekci hledat. Uživatel zvyklý na užívání komunitních webů si této sekce nevšímal, protože nevěděl, co by v ní mohlo být. Místo toho hledal odkaz s nápisem "Můj účet". Slovo správa jistě výstižně neshrnuje všechny možnosti , které tato sekce nabízí. Řešením by možná bylo rozdělit tuto sekci na Můj účet, který by sloužil k editaci profilu, hesel a podobně, a na Soukromé zprávy, odkud by uživatel spravoval svou soukromou korespondenci s ostatními uživateli. Lepším řešením by však bylo, nalézt takové slovo, které by jasně vypovídalo o obsahu této sekce.

6.7. OPTIMALIZACE PRO VYHLEDÁVAČE

6.7

33

Optimalizace pro vyhledávače

Aplikace byla testována nástrojem pro analýzu zdrojového kódu na stránkách SEO Servisu a dosáhla ohodnocení 89 % s chybou "Stránka obsahuje velice málo slov"a varováním "Stránka obsahuje málo odstavců". Tyto nedostatky jsou způsobeny neúplností obsahu stránky a budou časem odstraněny. SEO Servis http://seo-servis.cz

34


Kapitola 7

Závěr V rámci této práce bylo zevrubně analyzováno deset systémů umožňujících vytvořit komunitní web a to z hlediska možností, které nabízejí, uživatelské základny a funkcí, které by pro komunitní web mohly být výhodné či nevýhodné. Hlubší analýza těchto systémů by byla časově velmi náročná a nad rámec této práce. Dále byl navržen a implementován systém, který umožňuje vytvoření komunitního webu zaměřeného na prezentaci grafických a literárních děl, ale splňující i jiné potřeby komunity, tedy hlavně interakci mezi jednotlivými uživateli (fórum, komentáře, soukromé zprávy). V průběhu implementace, ale hlavně po jejím dokončení byl systém testován a to jak z hlediska splnění požadavků, správné funkce všech částí, bezpečnosti a validity, ale i uživatelské přívětivosti.komunitní Pro testování se skutečnými uživateli byl vytvořen komunitní web na adrese http://dryas.shy.cz a na něj přizváno několik uživatelů. Testy s uživateli objevily nejen několik slabých míst, která bude třeba opravit, ale přinesly mnoho cenných nápadů na rozvoj systému do budoucna. Provedením rešerše, analýzou a návrhem a následnou implementací a testováním vytvořeného mikrokomunitního webu bylo splněno zadání této práce. Prvním krokem v následujícím vývoji systému bezesporu bude odstranění všech nedostatků objevených při testech s uživateli. Ale i poté je zde velký prostor pro vylepšování a rozšiřování funkcionality. Pokud bude komunita uživatelů úspěšně růst a nebude již možné zvládat údržbu obsahu webu, bude třeba implementovat širší škálu uživatelských funkcí, jejich pravomocí a zodpovědností (na což je v současném systému ponechán prostor), jistě bude zváženo, zda neomezit registrace jen na pozvané nebo nepodmínit schválením. Pokud nebude stačit kapacita na nahrávané obrázky, nebo budou-li uživatelé přidávat díla nedostatečné kvality či jinak nevhodná bude třeba počet obrázků na uživatele omezit, nebo zavést schvalování obrázků i textů. Může nastat mnoho jiných situací, které si dnes nedokáži představit, ale které bude třeba řešit. Pak jsou tady také rozšíření a vylepšení, která nejsou nutná, avšak mohly by přispět ke komfortu uživatelů nebo pomoci lépe plnit funkci komunitního webu. Mezi taková patří pamatování si starých statusů uživatelů a jejich vypisování na uživatelském profilu. U přidávání textů by jistě bylo užitečné WYSIWYG rozhraní pro úpravu vzhledu samotného textu. Pokud komunita bude pořádat srazy nebo nějaké akce, přišla by vhod sekce se seznamem těchto srazů, jejich popisem, seznamem účastníků a každý z účastníků by zde mohl napsat své zážitky nebo zhodnocení celé akce a nahrát své fotky.

35

36

KAPITOLA 7. ZÁVĚR

Literatura [1] D. Antoš. Radosti a strasti komunitních serverů, 2007. http://www.lupa.cz/clanky/radosti-a-strasti-komunitnich-serveru. [2] J. Bednařík. TYPO3 - bednarik.org. http://www.bednarik.org/. [3] K. Benák. Mambo/joomla výhody a nevýhody, 2005. http://www.abclinuxu.cz/blog/benyho/2005/11/mambo-joomla-vyhody-a-nevyhody. [4] B. Borek. Drupal - seznamte se, 2006. http://interval.cz/clanky/drupal-seznamte-se/. [5] L. Jelínek. Redakční systém TYPO3, 2007. http://www.linuxexpres.cz/software/redakcni-system-typo3. [6] J. Kouba. Znáte buddypress?, 2008. http://www.radime.cz/pocitace/wordpress/znate-buddypress/. [7] P. Krčmář. Drupal - představení redakčního systému, 2008. http://www.linuxexpres.cz/software/drupal-predstaveni-redakcniho-systemu. [8] T. Kubina. Komunitní weby, 2008. http://www.fg.cz/cs/prectete-si/clanky/19.shtml. [9] J. Sova. Sesterský projekt wordpressu - buddypress, 2009. http://www.samples.cz/clanky/sestersky-projekt-wordpressu-buddypress/. [10] J. Tichý. Diplomová práce - programová podpora tvorby webových aplikací, 2004. http://www.jantichy.cz/diplomka/pozadavky/architektura. [11] Bitweaver - web application framework and cms. http://www.bitweaver.org/. [12] Wikipedie - bitweaver. http://cs.wikipedia.org/wiki/Bitweaver. [13] Buddypress.org - a wordpress mu based social network platform. http://buddypress.org/.

37

38

LITERATURA

[14] CSTUG - CSTEX Users Group - hlavní stránka. http://www.cstug.cz/. [15] Dolphin - crunchbase. http://www.crunchbase.com/product/boonex-dolphin-smart-community-builder. [16] Dolphin - boonex. http://www.boonex.com/products/dolphin/. [17] Drupal - official website. http://drupal.org/. [18] Drupal - český portál. http://www.drupal.cz/. [19] Home of the e107 website system. http://e107.org. [20] e107 - česká podpora. http://www.e107.cz. [21] infed.org - community, 2002. http://www.infed.org/community/community.htm. [22] K336 Info - pokyny pro psaní bakalářských prací. https://info336.felk.cvut.cz/clanek.php?id=504. [23] Which one to choose: Mambo or joomla? http://www.siteground.com/joomla_mambo.htm. [24] Joomla! http://www.joomla.org/. [25] LATEX - online manuál. http://www.cstug.cz/latex/lm/frames.html. [26] Mambodrom. http://www.mambodrom.cz/. [27] Mambo foundation. http://mambo-foundation.org/. [28] Mambo server. http://www.mamboserver.com/. [29] Ning lets you discover and create new social networks. http://www.ning.com/. [30] Wikipedia - ning. http://en.wikipedia.org/wiki/Ning.

LITERATURA

[31] Opensource cMS. http://opensourcecms.com/. [32] TYPO3 - main developer resource. http://typo3.org/. [33] Wikipedia - TYPO3. http://en.wikipedia.org/wiki/TYPO3. [34] Wikipedia - java platform, enterprise edition. http://en.wikipedia.org/wiki/Java_Platform,_Enterprise_Edition. [35] Wikipedie - komunita. http://cs.wikipedia.org/wiki/Komunita. [36] Vikipedio - homa komunumo. http://eo.wikipedia.org/wiki/Homa_komunumo. [37] Wikipedia - community. http://en.wikipedia.org/wiki/Community. [38] Wikipedie - komunitní server, 2007. http://cs.wikipedia.org/wiki/Komunitní_server. [39] Wikipedia - mambo (software). http://en.wikipedia.org/wiki/Mambo_(software). [40] Wikipedie - model-view-controller. http://cs.wikipedia.org/wiki/Model-view-controller. [41] Wikipedie - php. http://cs.wikipedia.org/wiki/PHP. [42] Official xoops website. http://www.xoops.org/. [43] Xoops - česká podpora. http://xoops.zpc.cz. [44] Wikipedia - xoops. http://en.wikipedia.org/wiki/Xoops. [45] V. Zicha. Joomla! - Úvod do redakčních systémů, 2006. http://programujte.com/index.php?akce=clanek&cl= 2006073001-joomla-uvod-do-redakcnich-systemu. [46] M. Štverák. Bakalářská práce - virtuální komunity, 2007. http://mena.cz/stverak_bakalarska_prace.pdf.

39

40

LITERATURA

Příloha A

Seznam použitých zkratek AJAX Asynchronní JavaScript a XML CMS Content management system - Systém pro správu obsahu CSS Cascading Style Sheets - Kaskádové styly CSRF Cross-site request forgery (také XSRF) HTML Hypertext Markup Language – Hypertextový značkovací jazyk IP Internetový protokol MVC Model-view-controller PHP PHP: Hypertext Preprocessor - „PHP: Hypertextový preprocesor“ (rekurzivní zkratka) PHP Personal Home Page - Osobní stránka SEO Search Engine Optimization - Optimalizace pro vyhledávače SQL Structured Query Language - Strukturovaný dotazovací jazyk WCM Web content management - Správa webového obsahu WYSIWYG What you see is what you get - Co vidíš, to dostaneš XHTML eXtensible Hypertext Markup Language – Rozšiřitelný hypertextový značkovací jazyk XML eXtensible Markup Language – Rozšiřitelný značkovací jazyk XOOPS eXtensible Object Oriented Portal System - Rozšiřitelný objektově orientovaný portálový systém XSS Cross-site scripting XSRF Cross-site request forgery (také CSRF)

41

42

PŘÍLOHA A. SEZNAM POUŽITÝCH ZKRATEK

Příloha B

Uživatelské rozhraní Za účelem testování v prostředí komunity, na kterou je tento systém zaměřen, byly vytvořeny stránky na adrese http://dryas.shy.cz. Následuje několik obrázků představujících vzhled těchto stránek.

Obrázek B.1: Uživatelské rozhraní - úvodní stránka

43

44

PŘÍLOHA B. UŽIVATELSKÉ ROZHRANÍ

Obrázek B.2: Uživatelské rozhraní - galerie

Obrázek B.3: Uživatelské rozhraní - fórum

45

Obrázek B.4: Uživatelské rozhraní - text

Obrázek B.5: Uživatelské rozhraní - výpis členů

46


Obrázek B.6: Uživatelské rozhraní - profil uživatele

Obrázek B.7: Uživatelské rozhraní - správa

47

Obrázek B.8: Uživatelské rozhraní - editace informací v uživatelském profilu

Obrázek B.9: Uživatelské rozhraní - editace profilové fotky

48


Obrázek B.10: Uživatelské rozhraní - registrační formulář

Obrázek B.11: Uživatelské rozhraní - nápověda

Příloha C

Instalační manuál Všechny soubory potřebné k instalaci aplikace (včetně testovacích dat a tohoto manuálu) se nacházejí na přiloženém CD v archivu src.zip, jak je znázorněno na obrázku C. • Obsah složky src nakopírujte na server • Vytvořte databázi a importujte do ní soubor tabulky.sql (vytvoří se tabulky nutné pro běh aplikace) • V souboru src/vars.php je nutné vyplnit údaje pro připojení k databázi a emailovou adresu, ze které se budou posílat emaily při registraci a zapomenutí hesla • Pokud chcete aplikaci testovat, můžete do databáze importovat soubor data.sql (naplní tabulky testovacími daty) Pokud jste importovali soubor sql-data.sql, byli v databázi vytvořeni tři uživatelé:

Administrátor • login: administrator • heslo: administrator

Správce • login: spravce • heslo: spravce

Uživatel se základními právy • login: obycejny • heslo: obycejny

49

50

PŘÍLOHA C. INSTALAČNÍ MANUÁL

Obrázek C.1: Obsah přiloženého CD

Příloha D

Obsah přiloženého CD Obsah přiloženého CD je jednoduše znázorněn stromovou strukturou na obrázku C. Následuje podrobnější popis obsahu CD.

D.1

Obsah CD

• archiv src.zip - zdrojové soubory aplikace a soubory k její instalaci a testování • složka text - zdrojové soubory textu práce • soubor text.pdf - text práce ve formátu pdf • soubor readme.txt - tento soubor

D.2

Obsah archivu src.zip

• složka src - zdrojové soubory aplikace • složka testovaci_obrazky - obrázky určené k testování aplikace • soubor tabulky.sql - inportován do databáze vytvoří tabulky potřebné k běhu aplikace • soubor data.sql - naplní tabulky v databázi testovacími daty • soubor install.txt - instalační manuál

D.3

Obsah složky tex

• složka figures - obrázky použité v textu práce • soubor Makefile - soubor určující postup utility make při překladu • soubor k336_thesis_macros.sty - makra pro formátování práce

51

52

PŘÍLOHA D. OBSAH PŘILOŽENÉHO CD

• soubor reference.bib - soubor se seznamem použité literatury • soubor hyphen.tex - soubor definující dělení slov • soubory s příponou.tex - vlastní text práce

D.4

Rozdělení zdrojových souborů do složek

• složka css - obsahuje soubor s kaskádovým stylem a obrázky pro styl použité • složka ctrl - zdrojové soubory zajišťující řídící logiku • složka model - zdrojové soubory s reprezentací dat a pro komunikaci s databází • složka img - složka pro obrázky nahrávané uživateli do galerie • složka user - složka pro obrázky nahrávané uživateli jako avatar nebo profilový obrázek • složka view- zdrojové soubory tvořící uživatelské rozhraní • složka script - soubory s javascriptem pro kontrolu formulářů a skripty do cronu pro pravidelné vymazávání tabulek "zobrazeni"a "nejnovejsi"

Mikrokomunitní server

Recommend Documents