eské vysoké u£ení technické v Praze Fakulta elektrotechnická Katedra po£íta£ové gra ky a interakce
Bakalá°ská práce Art blog
Matyá² Havel
Vedoucí práce: Ing. Tomá² Kadlec
Studijní program: Softwarové technologie a management, Bakalá°ský Obor: Web a multimédia 8. £ervna 2009
iv
v
Pod¥kování Cht¥l bych pod¥kovat vedoucímu své bakalá°ské práce Ing. Tomá²i Kadlecovi za jeho odborné rady ohledn¥ implementace a za £as, který mi v¥noval.
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 10. 6. 2009
.............................................................
viii
Abstract The goal of bachelor's work is to summarize available application for presentation work of art on the Internet and design application in which users without knowledge of HTML code will be able to create their own web presentation. It is necessary to use modern technologies Web 2.0, which will attract visitors. Application would be used by artists, who want to present themselfs or their work of art, communicate or compete with other artists on the Internet.
Abstrakt Cílem této bakalá°ské práce je zhodnotit dostupné aplikace pro prezentaci um¥leckých d¥l na Internetu a navrhnout postup vytvo°ení aplikace, ve které bude uºivatel neznalý HTML kódu schopen vytvo°it svoji vlastní webovou prezentaci. Do aplikace je t°eba zakomponovat moderní technologie Web 2.0, které upoutají náv²t¥vníky. Aplikace by m¥la slouºit um¥lc·m, kte°í cht¥jí prezentovat sebe £i svá díla, komunikovat nebo sout¥ºit s ostatními um¥lci prost°ednictvím Internetu.
ix
x
Obsah 1 Úvod
1
2 Popis problému, speci kace cíle
3
2.1
Poºadavky uºivatel·
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2
Uºivatelské role . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
2.3
Poºadavky na aplikaci
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
2.3.1
Optimalizace pro vyhledáva£e . . . . . . . . . . . . . . . . . . . . .
4
2.3.2
Vyhledávání um¥lc·
. . . . . . . . . . . . . . . . . . . . . . . . . .
4
2.3.3
Tagy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
2.3.4
Vodoznak
5
2.3.5
Hitparády . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
2.3.6
Shrnutí poºadavk· . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3 Analýza a návrh °e²ení 3.1
7
Analýza podobných aplikací . . . . . . . . . . . . . . . . . . . . . . . . . .
7
3.1.1
. . . . . . . . . . . . . . . . . . . . . . . . . . .
7
3.1.1.1
blogger.com . . . . . . . . . . . . . . . . . . . . . . . . . .
7
3.1.1.2
blog.cz
8
3.1.2
Blogovací systémy
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Systémy pro publikaci um¥leckých d¥l 3.1.2.1
3.2
3
. . . . . . . . . . . . . . . .
9
deviantart.com . . . . . . . . . . . . . . . . . . . . . . . .
9
Návrh °e²ení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
3.2.1
11
Uºivatelské role . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2.1.1
Administrátor
. . . . . . . . . . . . . . . . . . . . . . . .
3.2.1.2
Um¥lec
11
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
3.2.1.3
P°ihlá²ený uºivatel . . . . . . . . . . . . . . . . . . . . . .
13
3.2.2
Model databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
3.2.3
Zend Framework
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
17
3.2.4
Optimalizace pro vyhledáva£e . . . . . . . . . . . . . . . . . . . . .
18
3.2.5
Vodoznak
18
3.2.6
Ochrana proti robot·m
3.2.7
WYSIWYG editory
3.2.8
Gra cký návrh
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
. . . . . . . . . . . . . . . . . . . . . . . . . .
19
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
4 Implementace
23
4.1
Zend Framework
Adresá°ová struktura . . . . . . . . . . . . . . . . . . . . . . . . . .
23
4.2
Galerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
4.2.1
25
4.1.1
Kategorie
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
23
xii
OBSAH
4.3
4.4
4.5
4.6
4.2.2
Vkládání díla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
4.2.3
Zobrazení díla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
Náv²t¥vní kniha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
4.3.1
Vkládání p°ísp¥vk· . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
4.3.2
Zobrazení p°ísp¥vk·
27
4.3.3
Administrace náv²t¥vní knihy . . . . . . . . . . . . . . . . . . . . .
27
Správa obsahu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
4.4.1
Nastavení Texyly . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
4.4.2
Správa statických stránek
28
4.4.3
Správa novinek . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vodoznak
4.8
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.5.1
Nahrávání vodoznaku
4.5.2
P°idání vodoznaku k dílu
. . . . . . . . . . . . . . . . . . . . . . . . .
Tagy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
4.6.1
Vkládání tag· . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
4.6.2
Zobrazení tag·
31
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
4.6.3.1
Vyhledávání pomocí tag·
Vyhledávání podobných um¥lc· . . . . . . . . . . . . . . .
31
4.6.3.2
Vyhledávání um¥lc· pomocí tag· . . . . . . . . . . . . . .
32
Hitparády . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
32
4.7.1
Plánování hitparád . . . . . . . . . . . . . . . . . . . . . . . . . . .
32
4.7.2
P°ihlá²ení díla do hitparády . . . . . . . . . . . . . . . . . . . . . .
33
4.7.3
Hlasování v hitparád¥
. . . . . . . . . . . . . . . . . . . . . . . . .
33
Optimalizace pro vyhledáva£e . . . . . . . . . . . . . . . . . . . . . . . . .
33
4.8.1
Pro lová webová stránka . . . . . . . . . . . . . . . . . . . . . . . .
34
4.8.2
Hlavní webová stránka . . . . . . . . . . . . . . . . . . . . . . . . .
34
35
Návrh testování . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
5.1.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
5.1.1.1
Osoba 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
5.1.1.2
Osoba 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
5.1.1.3
Osoba 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
5.1.2
5.2
29 30
5 Testování 5.1
29 29
. . . . . . . . . . . . . . . . . . . . . . .
4.6.3
4.7
. . . . . . . . . . . . . . . . . . . . . . . . . .
Testované osoby
Zadání úkol·
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
5.1.2.1
Zadání pro osobu 1
. . . . . . . . . . . . . . . . . . . . .
36
5.1.2.2
Zadání pro osobu 2
. . . . . . . . . . . . . . . . . . . . .
37
5.1.2.3
Zadání pro osobu 3
. . . . . . . . . . . . . . . . . . . . .
37
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
37
Výsledky testování
6 Záv¥r
39
Literatura
41
A Instala£ní a uºivatelská p°íru£ka A.1
Instala£ní p°íru£ka
A.2
Uºivatelská p°íru£ka
43
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
B Obsah p°iloºeného CD
45
Seznam obrázk· 3.1
Use Case diagram - Administrátor
. . . . . . . . . . . . . . . . . . . . . .
3.2
Use Case diagram - Um¥lec
3.3
Use Case diagram - Náv²t¥vník
. . . . . . . . . . . . . . . . . . . . . . . .
13
3.4
Schéma databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
3.5
Schéma databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
3.6
Pr·b¥h poºadavku
17
3.7
Rozvºení stránky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
3.8
Administra£ní menu
20
3.9
Rozvrºení pro lové stránky
. . . . . . . . . . . . . . . . . . . . . . . . . .
21
4.1
Adresá°ová struktura aplikace . . . . . . . . . . . . . . . . . . . . . . . . .
24
4.2
Typy umíst¥ní vodoznaku
30
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
xiii
11 12
xiv
SEZNAM OBRÁZK
Kapitola 1
Úvod D·vodem volby tématu své bakalá°ské práce je poptávka po webových aplikacích podobného typu. Tento typ aplikace se vyzna£uje malým mnoºstvím statických webových stránek, galerií, náv²t¥vní knihou a systémem pro ukládání novinek. Uºivatelé, kte°í vyºadují tyto aplikace, nejsou zku²ení v tvorb¥ HTML stránek. Z toho d·vodu by bylo vhodné vytvo°it administra£ní rozhraní, které bude p°ehledné a jednoduché. Toto rozhraní bude slouºit k napln¥ní obsahu webové stránky um¥lce. Cílovou skupinou této aplikace jsou um¥lci, kte°í prezentují sebe £i svá díla prost°ednictvím Internetu. Aplikace je primárn¥ ur£ena pro um¥lce, kte°í se zabývají gra ckou tvorbou, ale i pro ty z jiných obor· um¥ní. Vyuºijí ji nejen fotografové, gra ci, ale nap°íklad i hudebníci. Galerie neslouºí pouze pro vystavení um¥leckých d¥l, ale m·ºe být pouºita pro zve°ejn¥ní fotogra í z r·zných akcí. Dal²í funkcí, kterou by aplikace m¥la podporovat, je p°idávání tag· k um¥lc·m. Tagy lze vyuºívat pro vyhledávání daného um¥lce nebo podobných um¥lc·, coº je zajímavé pro náv²t¥vníky t¥chto webových stránek. Náv²t¥vník m·ºe prohlíºet ve²keré tagy °azené podle popularity. Tagy se zobrazují v takzvaném tag cloudu, coº je seznam ve²kerých pouºitých výraz·, ve kterém jsou zvýrazn¥ny ty nejpouºívan¥j²í. Um¥lec má moºnost p°idat tag sám ke svému pro lu, ale zárove¬ být ozna£en ostatními uºivateli. V aplikaci budou k dispozici hitparády, do kterých um¥lec p°idává svá díla. Ostatní uºivatelé mohou tato díla hodnotit a komentovat. Podle hodnocení v hitparádách se um¥lci budou °adit p°i vyhledávání. Pro správu hitparád budu vyuºívat plánování úloh, které hitparádu spustí a ukon£í. Jakmile je hitparáda spu²t¥na, bude povoleno p°ihla²ování d¥l a hlasování. Náv²t¥vník, který si vytvo°í v této aplikaci pro l, má moºnost p°idání um¥lce do oblíbených. Jakmile um¥lec p°idá do aplikace dílo, novinku nebo mu bude zanechán vzkaz v náv²t¥vní knize, bude na tuto událost náv²t¥vník upozorn¥n. Tím se u²et°í £as náv²t¥vníka, který by procházel webové stránky v²ech svých oblíbených um¥lc· a hledal novinky. Dal²í d·leºitou sou£ástí aplikace bude optimalizace pro vyhledáva£e. Mým úkolem bude upravit strukturu HTML stránky tak, aby mohla být zaindexována do vyhledáva£·. Z toho plyne n¥kolik omezení pro um¥lce, kte°í si svoji webovou stránku sami vytvá°í. Náv²t¥vní kniha umoºní um¥lci komunikovat s náv²t¥vníky jeho webové stránky. Um¥lec m·ºe navrhnout, kdo je oprávn¥ný v náv²t¥vní knize zanechávat vzkazy. Problémem takto dostupných diskuzí jsou roboti, kte°í do nich vkládají reklamy, £i jiný neºádoucí obsah. 1
2
KAPITOLA 1.
ÚVOD
P°i umis´ování d¥l do galerie má um¥lec moºnost p°idat k dílu vodoznak, který znehodnotí dílo pro dal²í distribuci. Toto je velmi d·leºitá funkce pro autory, kte°í si nep°ejí, aby jejich dílo bylo kopírováno. Vodoznak je umíst¥n do rohu nebo p°es celé dílo. Um¥lec bude mít moºnost nahrát sv·j vlastní vodoznak a ten následn¥ spojit s nahraným dílem.
Kapitola 2
Popis problému, speci kace cíle Mým úkolem je vytvo°it aplikaci, která umoºní uºivatel·m vytvá°et webovou prezentaci skrze webové rozhraní. Ovládání této aplikace musí být intuitivní a jednoduché, aby byla pouºitelná pro ²ir²í ve°ejnost. Problémem podobného typu aplikací je fakt, ºe jiº existuje velké mnoºství takovýchto webových stránek, na kterých si mohou uºivatelé vytvo°it ú£et a spravovat obsah své prezentace. Aby byla tato aplikace pro uºivatele atraktivn¥j²í, je t°eba p°idat i nové funkce. Jednou z t¥chto funkcí je tagování um¥lc· nebo hitparády, ve kterých jsou vystavena díla od r·zných um¥lc· a náv²t¥vníci je hodnotí. Z programátorského hlediska je výhodné pouºít MVC framework, který mi usnadní práci a urychlí dokon£ení této aplikace. MVC frameworky se vyzna£ují tím, ºe odd¥lují aplika£ní a prezenta£ní logiku. To je výhodné pro p°ehlednost zdrojového kódu. Je t°eba vybrat takový framework, který mi bude umoº¬ovat naprogramovat ve²keré poºadované funkce.
2.1
Poºadavky uºivatel·
Aplikace bude primárn¥ ur£ena pro uºivatele, kte°í nemají vlastní webové stránky a cht¥jí prezentovat sebe £i svá díla. Uºivatelé nejsou zku²ení s tvorbou webových stránek. Uºivatelé budou editovat statické webové stránky pomocí editoru, který p°evede text do HTML kódu. Z toho musím vycházet p°i návrhu aplikace. Nemohu p°edpokládat, ºe uºivatel zná HTML kód nebo umí psát validní kód. P°edpokládám, ºe je schopný strukturovat text pomocí editoru, který bude p°ehledný a jednoduchý. K tvorb¥ webové stránky si uºivatel vysta£í s vkládáním obrázk·, odkaz·, nadpis·, tabulek, zarovnáním £i zvýrazn¥ním £ástí textu. Galerii je t°eba vytvo°it p°ehlednou. Obrázky se budou t°ídit do kategorií, které vytvá°í um¥lec. Kategorie mohou mít své podkategorie. Obrázky budou moci být komentovány a hodnoceny. Náv²t¥vníci webových stránek budou moci zanechávat vzkazy um¥lci. Ten bude oprávn¥n jejich vzkazy mazat nebo zakázat danému náv²t¥vníkovi vkládání dal²ích p°ísp¥vk·. Na zanechané vzkazy bude moci odpovídat jak um¥lec tak náv²t¥vník. Majitel náv²t¥vní knihy bude oprávn¥n nep°ihlá²eným uºivatel·m zakázat vkládání vzkaz·. 3
4
KAPITOLA 2.
POPIS PROBLÉMU, SPECIFIKACE CÍLE
Systém novinek bude vyuºívat stejný editor jako pro editaci statických webových stránek. Novinky se budou °adit podle data, poslední p°idaná novinka bude vid¥t jako první. Na stránce um¥lce bude viditelný seznam naposledy vloºených novinek u nichº je ukázka, aby m¥l náv²t¥vník p°edstavu, o £em daná novinka je. Dohledatelné budou ve²keré novinky.
2.2
Uºivatelské role
•
Um¥lec - v aplikaci má vytvo°ené vlastní webové stránky
•
P°ihlá²ený uºivatel - náv²t¥vník, který má v aplikaci vytvo°ený ú£et
•
Administrátor - spravuje aplikaci
2.3
Poºadavky na aplikaci
Funkce mé aplikace pokryjí poºadavky uºivatel·. Je t°eba aplikaci zabezpe£it proti uºivatel·m, kte°í by cht¥li aplikaci po²kodit nebo plnit závadným obsahem, který se m·ºe vyskytnout na webové stránce um¥lce. Aplikace musí být navrºena takovým zp·sobem, aby byla p°ipravená na zm¥nu.
2.3.1 Optimalizace pro vyhledáva£e Optimalizace pro vyhledáva£e je velmi d·leºitou sou£ástí kaºdé webové prezentace. Bez optimalizace nemusí být webová stránka zaindexována do vyhledáva£e v·bec nebo se neobjeví na prvních místech. S optimalizací souvisí mnoho úkol·. Webová stránka se vytvo°í tak, aby byla dob°e £itelná pro robota, který ji prohledává. Volí se vhodná klí£ová slova pro kaºdou webovou stránku. Slova se následn¥ vkládají do titulku, nadpis· a textu webové stránky. S optimalizací také souvisí tvorba kvalitních zp¥tných odkaz·. Podle po£tu zp¥tných odkazu dostává webová stránka hodnocení a podle tohoto hodnocení je °azena p°i vyhledávání.
2.3.2 Vyhledávání um¥lc· Vyhledávání je d·leºitou sou£ástí aplikace. Mám zájem, aby na webových stránkách náv²t¥vník strávil co nejvíce £asu. Toho bude docíleno kvalitním a zajímavým obsahem, který budou plnit um¥lci. Mým úkolem bude p°ilákat náv²t¥vníky k t¥mto um¥lc·m. Jak jsem jiº psal vý²e, aplikace je tvo°ena pro více obor· um¥ní. Nemohu p°edpokládat, ºe náv²t¥vníka zajímají v²ichni um¥lci. Z toho d·vodu je t°eba um¥lce kategorizovat a náv²t¥vníkovi nabídnout pro n¥j zajímavé um¥lce. Vyhledávání bude moºné pomocí jména um¥lce nebo pomocí kategorie, do které um¥lec spadá.
2.3.
POADAVKY NA APLIKACI
5
2.3.3 Tagy Tagování (ozna£ování) pat°í mezi populární funkce podobných aplikací. Tagy se ozna£ují um¥lci a ti jsou pomocí tag· nalezeni. Uºivatele mohu podle tag· t°ídit do skupin, ve kterých se vyskytují podobní um¥lci. Náv²t¥vník webových stránek si zobrazí tag cloud, ve kterém jsou zvýrazn¥ny nejpouºívan¥j²í tagy. Vyhledají se um¥lci, kte°í byli tímto tagem ozna£eni a se°adí se. azení souvisí s po£tem ozna£ení daného um¥lce. P°i prohlíºení webové stránky um¥lce zobrazím i podobné um¥lce. Jestliºe náv²t¥vníka zajímá tvorba jednoho um¥lce, pak by ho mohla zajímat i tvorba podobných um¥lc·. Tímto zp·sobem doporu£ím um¥lce i náv²t¥vník·m, kte°í o n¥m nev¥dí, ale zajímají se o jeho tvorbu.
2.3.4 Vodoznak Dopl¬kem vkládání um¥leckých d¥l je vodoznak, který p°ekrývá £ást díla. Um¥lec p°ikládá k dílu sv·j vlastní vodoznak nebo pouºívá n¥které z p°edp°ipravených. Um¥lec tímto zamezuje kopírování svých d¥l, které by mohl pouºívat n¥kdo jiný neº autor a vydávat je za své. Pokud je dílo zkopírováno, je velmi t¥ºké z n¥j vodoznak odstranit. P°i prohlíºení obrázk· je vodoznak ru²ivým elementem, proto vodoznak podporuje pr·hlednost a je moºno ho umístit do více pozic. Tyto pozice si volí sám um¥lec. Um¥lec nahraje více svých vodoznak· a ke kaºdému vkládanému dílu vkládá ten, který zapadne do barevného rozloºení díla.
2.3.5 Hitparády Hitparády zvy²ují zájem o webové stránky. Um¥lci p°ihla²ují svá díla do hitparád, ve kterých náv²t¥vníci hlasují a komentují tato díla. Hitparády za£ínají a kon£í podle zvoleného data. Spu²t¥ní a ukon£ení hitparády se vykonává automaticky. Sout¥ºiví um¥lci jist¥ ocení tuto funkci, protoºe mohou porovnat svá díla s ostatními um¥lci. Pro náv²t¥vníka webových stránek jsou hitparády zpest°ením. Zde má náv²t¥vník moºnost rozhodovat o tom, zda bude um¥lec zobrazen v nejlep²ích um¥lcích. Zakládání hitparád má na starost administrátor, který volí název hitparády a rozhoduje, kdy hitparáda za£ne a kdy skon£í. Administrátor bu¤ hitparády plánuje, nebo je spou²tí a ukon£uje ru£n¥. Tuto funkci zajistí plánova£ úloh, který bude sou£ástí aplikace. Díla budou moci být p°idána do více hitparád a v kaºdé této hitparád¥ si dílo vede své vlastní hodnocení. Po ukon£ení hitparády je hlasování ukon£eno a jiº nem·ºe být zm¥n¥n výsledek hlasování. Uºivatel má moºnost z hitparády svoje dílo odhlásit.
2.3.6 Shrnutí poºadavk· •
Um¥lec
m¥ní obsah svých webových stránek pomocí systému na správu obsahu p°idává novinky
6
KAPITOLA 2.
•
nahrává své vlastní vodoznaky spravuje náv²t¥vní knihu, ur£uje, kdo je oprávn¥n zanechávat vzkazy ke svému pro lu p°idává tagy ke svému pro lu m·ºe nahrát fotogra i, která bude zobrazena p°i vyhledávání
p°idává um¥lce do svých oblíbených hodnotí a komentuje díla um¥lc· p°idává k um¥lc·m tagy m·ºe nahlásit závadný obsah na webové stránce um¥lce
Administrátor
•
edituje svoji galerii, díla t°ídí do kategorií
P°ihlá²ený uºivatel
•
POPIS PROBLÉMU, SPECIFIKACE CÍLE
zakládá hitparády a ur£uje dobu jejich trvání zakazuje um¥lce, kte°í mají na svých webových stránkách závadný obsah
Obecn¥
zajistit optimalizaci pro vyhledáva£e
Kapitola 3
Analýza a návrh °e²ení V této kapitole analyzuji webové stránky, které mají spole£nou funkci s mojí aplikací a t¥mito funkcemi se inspiruji.
3.1
Analýza podobných aplikací
Abych dostal p°ehled o tom, jaké sluºby jsou poskytovány webovými portály, zaloºil jsem si n¥kolik ú£t·. Vybíral jsem takové servery, které by mohly být vyuºity pro prezentaci um¥leckých d¥l. Blogovací systémy jsou jednou z variant, kde mám moºnost zaloºit si zdarma ú£et, publikovat díla a plnit svoji webovou stránku obsahem. Druhou variantou jsou systémy pro publikací um¥leckých d¥l.
3.1.1 Blogovací systémy Blogy slouºí jako internetový zápisník, kam autor umis´uje £lánky. Blogy se d¥lí na remní a osobní. Firemní blogy edituje v¥t²í po£et editor·. Osobní blogy zpravidla edituje jeho vlastník. Více podrobností na [3]. Vybral jsem si 2 blogovací systémy, na kterých jsem si vytvo°il ú£et. Cílem mého blogu je p°ehledn¥ uve°ejnit um¥lecká díla a naplnit sv·j blog obsahem. První ú£et jsem si zaloºil na serveru www.blogger.com a druhý na www.blog.cz.
3.1.1.1 blogger.com Aplikace blogger je poskytována rmou Google a je velmi kvalitní. K dispozici mám velké mnoºství nastavitelných funkcí. Poda°ilo se mi uzp·sobit webovou stránku podle mých p°edstav a publikovat svá díla. Obsah blogu lze upravovat v¥t²ím po£tem autor·, coº je vhodné nap°íklad pro hudební skupiny. Vzhled blogu si vybírám z ²iroké ²kály p°edp°ipravených ²ablon. Tuto ²ablonu si upravuji podle svých p°edstav. Pro uºivatele se znalostí CSS styl· je moºné upravit p°ímo CSS soubor. Mén¥ zku²ení uºivatelé upravují styl a barvy písma pomocí jednoduchého editoru. patnou vlastností u p°edp°ipravených ²ablon je ²í°ka webové stránky, která je velmi úzká. 7
8
KAPITOLA 3.
ANALÝZA A NÁVRH EENÍ
Rozloºení stránky si volím taktéº sám. Do záhlaví, zápatí a pravého menu vkládám mini aplikace, které vybírám ze seznamu. Aplikace Blogger má t¥chto mini aplikací velké mnoºství. Tyto aplikace nevytvá°í pouze Blogger, ale je zde i velké mnoºství mini aplikací od jiných autor·. Jednou z t¥chto mini aplikací je i AdSense. AdSense je program, který je provozován sluºbou Google a slouºí pro vkládání reklam na stránku. Reklamy jsou vybírány tak, aby m¥ly co nejvíce spole£né s webovou stránkou, na které jsou zobrazeny. Jako uºivatel aplikace Blogger tyto reklamy umístím na sv·j blog a mohu vyd¥lávat peníze za kaºdé zobrazení. Pro psaní £lánk· slouºí webový editor, který mi umoº¬uje formátovat text bez znalosti HTML kódu. V tomto editoru mám k dispozici n¥kolik typ· a velikostí písma, zarovnání textu, £íslovaný seznam a seznam s odráºkami, vkládání odkaz·, obrázk· a videí. Zku²en¥j²í uºivatelé mají moºnost psát p°ímo HTML kód nebo tento vygenerovaný kód upravit. Nepoda°ilo se mi omezit délku p°ísp¥vku na úvodní stránce mého blogu. Svoji úvodní stránku jsem si p°edstavoval tak, ºe na ni bude ur£itý po£et p°ísp¥vk·, které nebudou vypsány celé, ale bude k p°e£tení pouze ukázka p°ísp¥vku a celý p°ísp¥vek se zobrazí aº po kliknutí. P°ísp¥vky nemusím rovnou publikovat, ale mohu je uloºit jako koncept. U kaºdého p°ísp¥vku nastavuji, zda náv²t¥vníci tento p°ísp¥vek mohou komentovat. Komentování povoluji pouze ur£itým náv²t¥vník·m. Na výb¥r mám n¥kolik moºností, mohou komentovat anonymní uºivatelé, registrovaní uºivatelé, uºivatelé s ú£tem na Google nebo mohou komentovat pouze £lenové tohoto blogu. Komentá°e moderuji, coº znamená, ºe ovliv¬uji, jestli vloºený komentá° na webové stránce uve°ejním nebo smaºu. P°i nahrávání obrázk· si volím jejich zarovnání. Na výb¥r jsou 4 moºnosti. Bez zarovnání, obtékání zprava £i zleva nebo ºádné obtékání. Volím si také velikost obrázku. Na výb¥r jsou 3 moºnosti. Obrázek je malý, st°ední nebo velký. Tyto velikosti ovliv¬ují pouze náhled obrázku. P°i kliknutí na obrázek v p°ísp¥vku je obrázek otev°en ve velikosti v jaké byl nahrán. Zam¥°il jsem se také na strukturu webové stránky. V titulku kaºdé webové stránky je název uºivatele, který je autorem blogu. Nechám-li si zobrazit celý p°ísp¥vek, pak se do titulku webové stránky p°idá název p°ísp¥vku. Nadpis H1 je pouºit na webové stránce pouze jednou a je v n¥m jméno autora blogu. Pro jméno aktuálního p°ísp¥vku je pouºit nadpis H3. URL adresa blogu je http://<jmeno autora>.blogspot.com. Webová stránka £lánku obsahuje v URL adrese titulek tohoto £lánku, rok a m¥síc uve°ejn¥ní. Adresa p°ísp¥vku vypadá následn¥ http://<jmeno>.blogspot.com/
/<m¥síc>/.html. Aplikace blogger nabízí mnoho nastavitelných funkcí. T¥chto funkcí je opravdu mnoho, ale p°esto k jejich nastavení není zapot°ebí velká zku²enost s podobnými aplikacemi. S tímto blogovacím systém jsem velice spokojen.
3.1.1.2 blog.cz Aplikace je poskytována rmou Jyxo s.r.o. V této aplikace je vytvo°eno více neº 800 tisíc blog·. Zpo£átku je pouºívání této aplikace náro£né, ale po osvojení b¥ºných postup· poskytuje velké mnoºství funkcí. Velmi dob°e je propracovaná práv¥ galerie obrázk·.
3.1.
ANALÝZA PODOBNÝCH APLIKACÍ
9
Vzhled si volím z n¥kolika p°ednastavených ²ablon. Do t¥chto ²ablon zasahuji pomocí formulá°e, do kterého zadávám ²í°ku stránky, barvu pozadí, fonty a jiné uºite£né v¥ci. Stejn¥ jako u aplikace Blogger i tady p°idávám mini aplikace do menu. Není zde ov²em k dispozici tak ²iroký výb¥r. Do záhlaví ani do zápatí nelze mini aplikace vloºit, ale tyto 2 £ásti webové stránky upravujeme pomocí webového editoru. Jednou mini aplikací je i galerie, která mi umoºní obrázky t°ídit do adresá°· a podadresá°·. Náv²t¥vník si tyto adresá°e m·ºe p°edstavit jako souborový systém. K zobrazení obrázk· se pouºívá ashová animace. Zobrazený obrázek má malou velikost, ale lze zv¥t²it. P°íjemnou funkcí, která lze umístit na webovou stránku je drobe£ková navigace. Omezením této aplikace je vkládání reklam na webovou stránku bez moºnosti jejich odstran¥ní. P°i psaní p°ísp¥vk· mám k dispozici webový editor. S tímto editorem mohu pouºívat tu£né písmo i kurzívu, horní a spodní index, zarovnání textu, £íslovaný seznam a seznam s odráºkami, p°idat odkaz, obrázek, video, tabulku nebo emotikony. P°ísp¥vek mohu psát p°ímo v HTML kódu nebo upravit editorem vygenerovaný kód. Jestliºe v úprav¥ HTML kódu napí²i nevalidní kód, je tento HTML kód upraven do validní podoby. Co se tý£e vkládání £lánk·, tak tato aplikace nemá p°íli² v¥cí, které by se jí daly vytknout. Jediná v¥c, která není dob°e vy°e²ena, je vkládání obrázk· do £lánku. Obrázek musím nahrát v takové velikosti, v jaké ho chci zobrazit. Obrázek ²ir²í neº blok p°ísp¥vku se zmen²í na velikost tohoto bloku. P°íjemné je, ºe si mohu na úvodní stránce vypsat pouze ukázku p°ísp¥vku. To zajistím p°i psaní £lánku v editoru vodorovnou £arou. Co je nad vodorovnou £arou slouºí i jako náhled a bude se zobrazovat na úvodní stránce. Ke kaºdému p°ísp¥vku mohu p°ipojit anketu, kterou si sám vytvo°ím. V titulku stránky i v nadpisu H1 se na kaºdé webové stránce zobrazuje název blogu, který zvolím v nastavení. K titulku se p°i zobrazení p°ísp¥vku p°idává i jeho název. P°i zobrazení detailu £lánku je titulek v nadpisu H2. URL adresa blogu je ve tvaru http://<jmeno blogu>.blog.cz. Kaºdý p°ísp¥vek obsahuje v URL adrese sv·j název, rok a m¥síc svého vytvo°ení. Tento blogovací systém m¥ zaujal hlavn¥ svojí galerií, která je p°ehledná a obrázky lze jednodu²e t°ídit do kategorií. Blog bych nepouºíval z d·vodu vkládání reklam na ve²keré webové stránky.
3.1.2 Systémy pro publikaci um¥leckých d¥l Systém· pro publikaci um¥leckých d¥l je velké mnoºství. Vybral jsem si jeden takový systém, zaloºil si na n¥m ú£et a testoval jeho funkce.
3.1.2.1 deviantart.com Tento systém obsahuje velké mnoºství funkcí, n¥které z t¥chto funkcí jsou zpoplatn¥né. Na úvodní stránce se zobrazují naposledy p°idaná um¥lecká díla. Díla se zde t°ídí do p°edp°ipravených kategorií. Sv·j pro l mohu upravovat pomocí mini aplikací.
10
KAPITOLA 3.
ANALÝZA A NÁVRH EENÍ
Na své úvodní stránce si mohu do dvou sloupc· p°idat mini aplikace. Mezi zajímavé aplikace pat°í seznam nejnov¥j²ích d¥l nebo pr·zkum ve°ejného mín¥ní, který je zpoplatn¥n. Dále je k dispozici zpoplatn¥né fórum. Zpoplatn¥n není systém pro psaní novinek, coº je p°íjemné. Tyto novinky t°ídím do p°edp°ipravených kategorií. Novinku mohu psát jako £istý text nebo odkázat na URL adresu novinky. Díla v galerii mohu uspo°ádat do kategorií, které si sám vytvá°ím. Takto je m·ºe vid¥t i náv²t¥vník mého pro lu. P°i vkládání díla vybírám kategorii, do které bude toto dílo za°azeno. Je zde velké mnoºství kategorií pro výb¥r. K dílu mohu p°idat komentá°, ve kterém mohu pouºít HTML tagy pro zvýrazn¥ní textu. Dílo nahrávám ve velikosti, jakou zvolím. Na výb¥r mám ze t°í moºností. Originální velikost, ²í°ka 600px nebo ²í°ka 400px. Kaºdé dílo m·ºe být okomentováno náv²t¥vníkem stránky. K dílu dále vypisuji klí£ová slova, která ho charakterizují. Mohu k nahrávanému dílu p°ipojit i vodoznak. Vodoznak je moºno p°idat i k nahranému dílu zp¥tn¥. Nemohu nahrát sv·j vlastní vodoznak a musím pouºít p°edvolený vodoznak se znakem DeviantART. Pro publikování um¥leckých d¥l mám na výb¥r z n¥kolika licencí Creative Commons. Tato organizace poskytuje n¥kolik licencí, pod kterými mohu jako autor své dílo prezentovat. Existují 4 základní vlastnosti, které se kombinují. Dal²í podrobnosti na [4].
•
Attributtion: Umoº¬uje ostatním rozmnoºovat, roz²i°ovat, vystavovat a sd¥lovat dílo a z n¥j odvozená díla pouze p°i uvedení autora
•
Noncommercial: Umoº¬uje ostatním rozmnoºovat, roz²i°ovat, vystavovat a sd¥lovat dílo a z n¥j odvozená díla pouze pro nevýd¥le£né ú£ely
•
No Derivative Works: Umoº¬uje ostatním rozmnoºovat, roz²i°ovat, vystavovat a sd¥lovat pouze dílo v p·vodní podob¥, nikoli díla z n¥j odvozená
•
Share Alike: Umoº¬uje ostatním roz²i°ovat odvozená díla pouze za podmínek identické licence
Jako uºivatel mám moºnost p°idat si jiného um¥lce do sledování. Najdu uºivatele, který m¥ zajímá a na výb¥r mám oblasti, o kterých chci být informován. Sledovat mohu p°idávání jeho novinek, um¥leckých d¥l a jiných aktivit. Jiného um¥lce mohu ozna£it jako svého p°ítele, mohu zakládat sociální skupiny nebo se stát £lenem jiº vytvo°ených. Ostatní um¥lce si mohu p°idat do svých oblíbených. Na aktivitu svého oblíbeného um¥lce jsem upozorn¥n pomocí zpráv. Tyto zprávy se d¥lí na n¥kolik kategorií. D·leºité jsou p°edev²ím vloºená um¥lecká díla a novinky. Nadpis H1 je na pro lové webové stránce pouºit pro klí£ové slovo deviantART a pro jméno uºivatele. Nadpis H2 se pouºívá pro nadpisy kategorií, do kterých mám moºnost nahlíºet. Titulek stránky je také tvo°en t¥mito klí£ovými slovy. URL adresa pro lu je ve tvaru http://<jméno uºivatele>.deviantart.com. Tento systém je velice populární a jako um¥lec bych ho rozhodn¥ pouºíval. Obsahuje mnoho uºite£ných funkcí, které jsou zpoplatn¥né. Zpoplatn¥ní d·leºitých sou£ástí je nep°íjemné, ale díla lze publikovat i bez t¥chto funkcí.
3.2.
3.2
NÁVRH EENÍ
11
Návrh °e²ení
V této £ásti se soust°edím na strukturu aplikace. Popisuji uºivatelské role a strukturu databáze. V dal²ích £ástech této sekce se zabývám d·leºitými funkcemi aplikace.
3.2.1 Uºivatelské role Tato aplikace obsahuje 3 uºivatelské role. První z rolí je administrátor, který se stará o chod aplikace. Druhou rolí je um¥lec, který je pro aplikace nejd·leºit¥j²í. Um¥lec vytvá°í obsah aplikace, vkládá díla, texty a p°ihla²uje svá díla do hitparád. Poslední rolí je p°ihlá²ený uºivatel. P°ihlá²eným uºivatelem se rozumí uºivatel, který má v aplikaci vytvo°ený ú£et. Náv²t¥vník bez vytvo°eného ú£tu pouze obsah stránek prohlíºí.
3.2.1.1 Administrátor
Obrázek 3.1: Use Case diagram - Administrátor
Na obrázku 3.1 je zobrazen Use Case diagram pro administrátora systému. Hlavní úlohou administrátora je plánování hitparád. Tyto hitparády se plánují od daného dne a kon£í daným dnem. Hitparády je moºno aktivovat i deaktivovat bez plánování. Administrátor maºe ú£ty um¥lc·, kte°í mají na svých stránkách závadný obsah. Jakýkoli náv²t¥vník m·ºe upozornit administrátora na závadný obsah na um¥lcov¥ stránce.
3.2.1.2 Um¥lec Na obrázku 3.2 je zobrazen Use Case diagram pro um¥lce. Um¥lec plní aplikaci obsahem a vytvá°í svou vlastní webovou prezentaci.
12
KAPITOLA 3.
ANALÝZA A NÁVRH EENÍ
Obrázek 3.2: Use Case diagram - Um¥lec
Náv²t¥vní kniha slouºí pro vkládání vzkaz· od náv²t¥vník·. Jestliºe si um¥lec nep°eje, aby náv²t¥vní kniha byla na jeho webových stránkách, m·ºe ji zakázat. Pokud je náv²t¥vní kniha povolena, um¥lec rozhoduje, kdo je oprávn¥n zanechávat vzkazy. Vzkazy má moºnost mazat a náv²t¥vník·m, kte°í obt¥ºují, zakázat vkládání vzkaz·. Um¥lecká díla um¥lec vkládá do galerie. Stejn¥ jako u náv²t¥vní knihy m·ºe galerii zakázat. Pokud je povolena, pak do galerie vkládá díla, která t°ídí do kategorií. Kategorie slouºí k zp°ehledn¥ní galerie. K nahrávaným díl·m má moºnost p°idat vodoznak, který nahrává sám nebo pouºije p°edvolený. Vytvá°ení statických stránek je nedílnou sou£ástí této aplikace. Um¥lec si vytvá°í statické stránky, které plní informacemi pro náv²t¥vníky. Ur£uje po°adí odkaz· statických stránek. Ke statickým stránkám um¥lec p°idává obrázky. Po£et statických stránek je omezen. Systém pro úprava novinek je podobný s úpravou statických stránek. Novinky jsou zobrazeny v jiné £ásti webové stránky a je jich neomezen¥ velké mnoºství. Kaºdá novinka obsahuje náhled, aby m¥l náv²t¥vník p°edstavu o obsahu novinky. Novinky jsou zp¥tn¥ dohledatelné. Um¥lec má moºnost p°idat své dílo do hitparády. Díla je moºno p°ihla²ovat ode dne vyhlá²ení hitparády. Dílo dostává hlasy od náv²t¥vník· nebo od jiných um¥lc·. Jestliºe je p°ihlá²eno jedno dílo do více hitparád, kaºdé dílo je hodnoceno zvlá²´. Bodové hodnocení se pohybuje v rozmezí 1 - 5, kde 1 je nejhor²í a 5 nejlep²í. Dílo p°ihlá²ené do hitparády je moºno komentovat.
3.2.
NÁVRH EENÍ
13
Um¥lec hodnotí díla jiných um¥lc· p°ihlá²ených do hitparád. Pro kaºdé dílo hlasuje pouze jednou a nemá povoleno hlasovat pro svá vlastní díla. Tagy jsou d·leºité pro vyhledávání a provázání podobných um¥lc·. Kaºdý um¥lec si ke svému pro lu p°idá ur£itý po£et tag·, které popisují jeho tvorbu. Tyto tagy má moºnost m¥nit. Um¥lec p°idává tagy k jiným um¥lc·m. Tagy, které byly um¥lci p°id¥leny, nemohou být smazány. Um¥lec má moºnost p°idat si jakéhokoli um¥lce do svých oblíbených a sledovat tak jeho aktivitu. Po p°ihlá²ení je upozorn¥n na aktivitu svých oblíbených um¥lc·. Ve²keré nastavení um¥lec provádí p°es administra£ní rozhraní. Pro lová webová stránka slouºí pouze k zobrazení obsahu.
3.2.1.3 P°ihlá²ený uºivatel
Obrázek 3.3: Use Case diagram - Náv²t¥vník
Na obrázku 3.3 je zobrazen Use Case diagram pro p°ihlá²eného uºivatele. P°ihlá²ený uºivatel nemá svou pro lovou webovou stránku. Um¥lce si p°idává do svých oblíbených a vºdy po p°ihlá²ení vidí nové události u oblíbených um¥lc·. Stejn¥ jako um¥lec smí hlasovat v hitparádách a komentovat díla. Dal²í v¥c, která je spole£ná s um¥lcem, je tagování. Náv²t¥vník smí tagovat um¥lce.
3.2.2 Model databáze V této £ásti se zabývám návrhem databáze pro aplikaci. Na obrázku 3.4 je zobrazena £ást databáze pomocí Chenovy notace. Tato £ást obsahuje na sob¥ závislé tabulky. Na obrázku 3.5 jsou zobrazeny tabulky, které nejsou provázány s ostatními tabulkami. Návrh tabulky jsem provedl tak, aby nemusela být v pr·b¥hu programování upravena její struktura.
14
KAPITOLA 3.
ANALÝZA A NÁVRH EENÍ
Obrázek 3.4: Schéma databáze
3.2.
NÁVRH EENÍ
15
Tabulka artists slouºí k ukládání informací o um¥lci. Sloupec artname obsahuje jméno um¥lce ve tvaru, ve kterém jej um¥lec zadal. Tento sloupec je unikátní. Password obsahuje uloºené heslo, které je p°evedeno ha²ovací funkcí sha1. Ve sloupci slug je uloºeno jméno um¥lce p°evedené do vhodné podoby pro URL adresu, tento sloupec je unikátní. Sloupec email je také unikátní, ukládá se do n¥j emailová adresa um¥lce. Tabulka artists_favourite je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Sloupce isGuestbookAllowed, isOnlyLogedUserAllowed, isPhotoGalleryAllowed a isLightBoxAllowed jsou typu enum, do kterého je moºno vkládat hodnoty 0 nebo 1. Sloupce title_of_guestbook, title_of_photo_gallery a title_of_news jsou typu varchar, do t¥chto sloupc· se ukládají nadpisy pro dané webové stránky. Um¥lec má tedy moºnost pojmenovat svoji galerii, náv²t¥vní knihu a novinky. Tabulka artists_favourite je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Sloupec id_artist_visitor odkazuje na um¥lce, který si p°idal um¥lce do svých oblíbených. Tabulka tags je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Id_artist je reference na um¥lce, kterému byl p°id¥len tag. Sloupce id_artist_visitor a id_user odkazují na autora tagu, tyto sloupce mají nastavenou výchozí hodnotu na 0, vypl¬ují se v závislosti na autorovi tagu. Tím m·ºe být um¥lec nebo náv²t¥vník. Tabulka guestbook je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Do této tabulky se vkládají záznamy pro náv²t¥vní knihu. V náv²t¥vní knize je moºno na vzkazy reagovat. Pomocí sloupce id_parent, který m·ºe nabývat hodnoty null, se odkazuje na p°edka vzkazu jestliºe existuje. Sloupce author_artist a author_user mají p°ednastavenou hodnotu 0. Vkládají se do nich data o autorovi vzkazu. Jestliºe je autor vzkazu p°ihlá²eným uºivatelem, je sloupec name vypln¥n podle jména uºivatele. Tabulka guestbook_banned je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Do této tabulky jsou ukládány údaje o uºivatelích, kte°í nemají povoleno zanechávat vzkazy v náv²t¥vní knize. Sloupce banned_artist a banned_user mají výchozí hodnotu nastavenou na 0. Vkládají se do nich data o uºivateli, který není oprávn¥n zanechávat vkazy. Tabulka cms je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. V této tabulce je uloºen obsah statických webových stránek um¥lce. Sloupec title obsahuje název webové stránky. Sloupec slug obsahuje název webové stránky p°evedený do vhodné podoby pro URL adresu, tento sloupec je jedine£ný pro daného um¥lce. Sloupec text ukládá obsah webové stránky. Pomocí sloupce arrange se °adí odkazy webových stránek. Tabulka cms_homepage je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Tato tabulka obsahuje text úvodní webové stránky um¥lce. Tabulka cms_images je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Tabulka obsahuje obrázky, které se pouºívají pro statické webové stránky. Sloupec title obsahuje titulek obrázku. Sloupec name obsahuje p·vodní jméno obrázku. Sloupec size uvádí velikost obrázku na serveru. Tabulka news je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Tabulka slouºí pro ukládání novinek. Sloupec title obsahuje titulek novinky. Sloupec slug obsahuje p°evedený titulek do vhodné podoby pro URL adresu. Ve sloupci text je uloºen obsah novinky. Sloupec preview obsahuje náhled novinky.
16
KAPITOLA 3.
ANALÝZA A NÁVRH EENÍ
Tabulka gallery_images je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Tabulka obsahuje záznamy o vloºených obrázcích pro galerii. Sloupec title obsahuje titulek obrázku. Sloupec name obsahuje p·vodní jméno souboru. Sloupec size je sou£tem velikosti náhledu a normálního obrázku. Sloupec description obsahuje popis obrázku. Tabulka gallery_categories je závislá na tabulce artists, se kterou je spojena p°es cizí klí£ id_artist. Sloupec name obsahuje jméno kategorie. Sloupec slug p°evedené jméno kategorie do vhodné podoby pro URL adresu. Tabulka gallery_categories_join_images je závislá na tabulce gallery_images a gallery_catogories, se kterou je spojena p°es cizí klí£ id_image a id_category. Z tohoto schématu vyplývá, ºe obrázek m·ºe být p°id¥len do více kategorií. Tabulka charts obsahuje záznamy o hitparádách. Sloupec name obsahuje název hitparády. Sloupec slug obsahuje p°evedený název hitparády do vhodné podoby pro URL adresu. Sloupec description popisuje danou hitparádu. Sloupec date_from de nuje £as, kdy bude hitparáda spu²t¥na. Sloupec date_to de nuje £as, kdy bude hitparáda ukon£ena. Sloupec is_active ur£uje zda je hitparáda aktivní. Tabulka gallery_votes je závislá na tabulce charts, se kterou je spojena p°es cizí klí£ id_chart. Tabulka ukládá informace o hlasování pro fotogra i v hitparád¥. Sloupec id_image je cizím klí£em odkazující na tabulku gallery_images. Sloupce id_artist a id_user odkazují na autora hlasu. Sloupec value je typu enum a nabývá hodnot 1, 2, 3, 4 nebo 5. Tabulka charts_join_images slouºí pro spojení tabulek charts a gallery_images pomocí cizích klí£· id_chart a id_image. Tabulka users slouºí pro uloºení informace o registrovaných náv²t¥vnících. Sloupec name obsahuje jméno uºivatele. Sloupec slug obsahuje p°evedené jméno do vhodné podoby pro URL adresu. Sloupec password slouºí pro uloºení hesla, které je p°evedeno ha²ovací funkcí sha1. Tabulka users_favourite slouºí pro spojení tabulek users a artists pomocí cizích klí£· id_user a id_artist.
Obrázek 3.5: Schéma databáze
Na obrázku 3.5 jsou zobrazeny tabulky na sob¥ nezávislé. Tabulka reports slouºí pro nahlá²ení závadného obsahu. Sloupec id_artist odkazuje na um¥lce, který je nahlá²en. Sloupec reason vyplní náv²t¥vník, který závadný obsah objevil. Tabulka cancelled obsahuje zru²ené ú£ty um¥lc·. Sloupec date_added obsahuje datum, kdy byl ú£et smazán. Sloupec email obsahuje emailovou adresu pomocí které byl ú£et vytvo°en. Sloupec name obsahuje um¥lcovo jméno.
3.2.
17
NÁVRH EENÍ
Tabulka banned obsahuje ú£ty smazané administrátorem. Sloupec email obsahuje emailovou adresu pomocí které byl ú£et vytvo°en. Sloupec slug obsahuje um¥lcovo jméno upravené pro URL adresu. Sloupec date_added ur£uje, kdy byl ú£et smazán. Tabulka admin obsahuje p°ihla²ovací údaje pro administrátora. Sloupec admin_name obsahuje jméno pod kterým se administrátor p°ihla²uje. Sloupec password obsahuje heslo, které je upraveno ha²ovací funkcí sha1. Tabulka access obsahuje informace o p°ihlá²ení uºivatel·. Sloupce id_user a id_artist odkazují na uºivatele, který se p°ihla²uje. Sloupec address obsahuje IP adresu, ze které se uºivatel p°ihla²uje.
3.2.3 Zend Framework Zend Framework je MVC frameworkem pro programovací jazyk PHP. Tento framework má velké mnoºství výhod a z toho d·vodu jsem si ho vybral. Server, na kterém je implementovaná aplikace b¥ºí, musí podporovat p°episování URL. Mezi výhody frameworku Zend pat°í t°ídy pro jednoduchou práci s databází, autorizací, autentizací, p°episování URL adres a jiné. Jednodu²e mohu pracovat s formulá°i a valida£ními t°ídami. Zend disponuje ²ablonami, ve kterých si vytvo°ím strukturu stránky a tuto strukturu následn¥ plním obsahem.
Obrázek 3.6: Pr·b¥h poºadavku
Na obrázku 3.6 je zjednodu²ený pr·b¥h poºadavku, který je zpracován. Jakmile klient ode²le poºadavek na server, je tento poºadavek p°esm¥rován na soubor bootstrap, coº mohu zajistit pomocí souboru htaccess. Bootstrap se ve v¥t²in¥ p°ípad· pojmenovává index.php a je to soubor, na který jsou sm¥rovány ve²keré poºadavky. Tento soubor pomocí cest sm¥ruje poºadavek na daný modul, kontroler a akci. Tyto cesty lze upravit pomocí souboru, do kterého se zadávají statické £i dynamické cesty pomocí regulárních výraz·. Podle nastavení vyuºívá akce ur£ité rozvrºení pro zobrazení obsahu. Rozvrºení webové stránky skládám pomocí soubor·, které jsou p°i°azeny ke kaºdé akci. Takto vygenerovaná odpov¥¤ se odesílá klientovi. Na obrázku 3.7 je ukázka, jak by mohl vypadat 3 sloupcový layout stránky. Hlavi£ka, pati£ka, levé a pravé menu jsou generovány pomocí odpovídajících soubor·. Obsah t¥chto soubor· m·ºe být generován dynamicky. Hlavní obsah stránky je generován v závislosti na akci, která zpracovává poºadavek. K dispozici jsou t°ídy pro generování formulá°·. Formulá° se skládá z element·, které se postupn¥ vkládají a p°i°azují se k nim validátory. Validace probíhá p°i zpracování formulá°e. Zpracování probíhá v dané akci kontroleru.
18
KAPITOLA 3.
ANALÝZA A NÁVRH EENÍ
Obrázek 3.7: Rozvºení stránky
Pro spojení s databází sta£í do kon gura£ního souboru nastavit základní p°ístupové údaje. Kaºdé tabulce v databázi je p°i°azena t°ída, která zaji²´uje komunikaci s touto tabulkou. Pomocí instance této t°ídy následn¥ vkládám, upravuji a maºu záznamy v tabulce.
3.2.4 Optimalizace pro vyhledáva£e Optimalizace pro vyhledáva£e je d·leºitá pro zaindexování stránky ve vyhledáva£ích. Kaºdý vyhledáva£ má vlastní algoritmus, podle kterého hodnotí webové stránky. Algoritmus pro hodnocení webové stránky je tajný a £asto se m¥ní. Existuje velké mnoºství publikací, které se touto problematikou zabývají. Více o optimalizaci pro vyhledáva£e je moºné se do£íst v knize [1], ze které jsem £erpal. Prvním krokem optimalizace je ur£ení klí£ových slov. Tato slova musí vystihovat danou webovou stránku a musí být vybrána tak, aby nem¥la p°íli² velké zastoupení vzhledem ke konkuren£ním webovým stránkám. Jakmile ur£ím klí£ová slova, umístím je do vhodných HTML tag· na webovou stránku. Mezi tyto d·leºité tagy pat°í titulek stránky, nadpisy a zvýrazn¥ní textu. Je vhodné zvolit i správné názvy odkaz· a URL adresu stránky, která bude i lépe £itelná pro náv²t¥vníka. Vyhledáva£e by m¥ly být schopny vyhledat webovou stránku um¥lce podle jeho jména, eventuáln¥ jeho jména a statických stránek £i novinek. Ve²ke°í um¥lci s pro lovou webovou stránkou musí být nalezeni robotem, který nav²tíví hlavní webovou stránku, z toho d·vodu je t°eba, aby na tyto pro ly existovaly odkazy. Vyhledáva£e hodnotí webovou stránku také podle odkaz·, které na tuto webovou stránku odkazují. Hodnocení záleºí na po£tu t¥chto odkaz· a také na jejich kvalit¥. Kvalita se ur£uje podle názvu odkazu a hodnocení webové stránky, na které je odkaz umíst¥n.
3.2.5 Vodoznak Je t°eba aby kaºdý um¥lec mohl nahrát sv·j vlastní vodoznak. Jako vodoznak m·ºe být pouºit podpis um¥lce, vlastní logo £i jiný obrázek. Vlastní obrázek nemusí být pr·h-
3.2.
NÁVRH EENÍ
19
ledný, ale je moºné nahrát obrázek, který má danou barvu pozadí, nap°íklad bílou £i £ernou. Jestliºe um¥lec sv·j vlastní vodoznak nevlastní, pak jsou mu k dispozici p°ednastavené. Vodoznak je moºné umístit do n¥kolika pozic. Nej£ast¥j²í umíst¥ní je ve spodních rozích nebo p°es celou fotogra i. Pozice vodoznaku se volí p°i nahrávání fotogra e.
3.2.6 Ochrana proti robot·m Roboti, kte°í zanechávají na webových stránkách reklamy £i jiný neºádoucí obsah jsou negativním faktorem, který je t°eba omezit. Tito roboti zkou²í odesílat formulá°e, které naleznou na webové stránce. Ochránit je t°eba ve²keré formulá°e, které jsou p°ístupné pro nep°ihlá²ené uºivatele. Jednou z moºností je opisování dynamicky generovaných text·, které jsou p°idány ke kaºdému formulá°i. Jestliºe chce náv²t¥vník odeslat formulá°, musí tento text správn¥ opsat, jinak nastane chyba a formulá° není odeslán. Toto opisování ov²em znep°íjem¬uje náv²t¥vníkovi prohlíºení webových stránek, tudíº není nejvhodn¥j²í. Odli²né °e²ení jsem na²el na webových stránkách Jakuba Vrány, více na [2]. Toto °e²ení spo£ívá v p°idání jednoho elementu navíc, který je schován p°ed náv²t¥vníkem webové stránky, ale pro robota z·stává viditelný, proto se ho snaºí odeslat. Jakmile je tento element odeslán, pak p°i zpracování formulá°e poznám, ºe byl formulá° odeslán robotem. Tímto elementem m·ºe být nap°íklad odesílací tla£ítko. Toto °e²ení je vhodné v tom, ºe neobt¥ºuji náv²t¥vníka a omezím spam.
3.2.7 WYSIWYG editory WYSIWYG je zkratka anglického spojení What you see is what you get, p°eloºeno do £e²tiny Co vidí², to dostane². Tyto editory slouºí pro generování HTML kódu z textového editoru, ve kterém upravuji styl textu. Problémem takovýchto editor· je ve struktu°e HTML kódu, který generují. Kód je plný zbyte£ných element· nebo jsou ²patn¥ strukturované a tato struktura není vhodná pro vyhledáva£e. Více informací na [6]. Mezi tyto známé editory pat°í nap°íklad Microsoft FrontPage nebo Macromedia Dreamweaver. Pro moji aplikaci se tyto editory nehodí a je t°eba nalézt editor, který bude umoº¬ovat editaci p°ímo p°es webové rozhraní. Webové editory, které se hodí pro moji aplikaci, jsou stejné jako u aplikací blogger.com a blog.cz. Poºadavky, které mám na webový editor vycházejí z poºadavk· uºivatel· na systém. Uºivatel musí být schopen vytvá°et nadpisy, libovoln¥ formátovat text, vkládat a zarovnávat obrázky. Existuje n¥kolik vhodných webových editor·. O t¥chto editorech je moºné získat více informací na [5]. Prvním takovým editorem je TinyMCE. V tomto editoru je mnoho moºností, jak formátovat text. Editor p°ipomíná textové editory Microsoft Word nebo Open O ce. Tento editor je pro moji aplikaci vhodný a je distribuován pod komer£ní licencí nebo licencí LGPL. Dal²í zajímavý editor se jmenuje FCKeditor. Tento webový editor je podobný editoru TinyMCE, ve v¥t²in¥ funkcí se shoduje, vzhled je podobný jako v textových editorech.
20
KAPITOLA 3.
ANALÝZA A NÁVRH EENÍ
Stejn¥ jako u TinyMCE p°ímo vidíme, jak bude formátovaný text vypadat. Editor je distribuován pod komer£ní licencí nebo licencí LGPL. Odli²ným editorem od zmi¬ovaných dvou je webový editor WYMeditor, který umoº¬uje stejné formátování, ale editor se mi zdá p°ehledn¥j²í. Nelze p°ímo nahrávat obrázky, ale musí se na n¥ odkazovat pomocí URL adresy. Nahrávání obrázk· bych mohl °e²it i mimo editor. P°edchozí editory jsou velmi výkonné, ale vybral jsem si editor Texyla, který obsahuje ve²keré funkce, které po webovém editoru poºaduji. Tento editor pomocí JavaScriptu vkládá do textového pole speciální znaky. Tyto speciální znaky jsou Texy! syntaxe, která p°evádí speciální znaky do HTML kódu, který je validní a je vytvá°en podle zvoleného typu výstupu. Texy! i Texyla jsou jednodu²e nastavitelné, dal²í výhodou Texyly je multijazy£nost. K dispozici jsou mutace v £e²tin¥, sloven²tin¥ a angli£tin¥. P°idání dal²ích jazyk· není sloºité. Texyla je distribuována pod licencí BSD nebo GPL.
3.2.8 Gra cký návrh Gra cký návrh je pro aplikaci d·leºitý z hlediska uºivatelského p°ístupu. Uºivatel nesmí být zmaten velkým mnoºstvím odkaz· £i jiného nepot°ebného obsahu. Aplikace se skládá ze 4 gra ckých rozhraní, z nichº 2 jsou podobné. Administra£ní rozhraní pro um¥lce a administrátora systému má podobný vzhled. Stejn¥ tomu tak je u pro lové webové stránky um¥lce a hlavní webové stránky, kde budou vypsány hitparády nebo jiné informace o aplikaci. Administra£ní rozhraní musí být p°edev²ím jednoduché a p°ehledné. Není t°eba vkládat zbyte£né gra cké prvky, které by znep°ehlednily webovou stránku. Posta£í menu obsahující podmenu, aby se editování webových stránek dalo kategorizovat. Návrh menu je vid¥t na obrázku 3.8. Hlavní menu má r·zné barvy, aby se od sebe daly r·zné podkategorie dob°e odli²it a odkazy v podmenu mají stejnou barvu jako jejich p°edch·dce, aby uºivatel vºdy v¥d¥l, v jakém menu se vyskytuje.
Obrázek 3.8: Administra£ní menu
Kaºdý um¥lec, který si zaloºí v této aplikaci pro l, vytvá°í obsah své webové prezentace. Vzhled webové stránky kaºdého um¥lce je stejný, to uleh£í orientaci náv²t¥vníka p°i prohlíºení více webových stránek od r·zných um¥lc·. U v¥t²iny blog· je tomu jinak a kaºdý majitel blogu má moºnost zvolit si vzhled webové stránky z p°edvolených ²ablon nebo si vytvo°it svoji vlastní ²ablonu. Na obrázku 3.9 je návrh struktury webové stránky um¥lce, u které jsem zvolil 3 sloupcovou ²ablonu. Hlavi£ka je stejná pro v²echny um¥lce. V hlavi£ce stránky jsou odkazy na hlavní webovou stránku aplikace, formulá° pro p°ihlá²ení a vyhledávání um¥lc·. Jestliºe um¥lec vloºí do aplikace svou pro lovou fotogra i, je tato fotogra e zobrazena v levém
3.2.
21
NÁVRH EENÍ
horním rohu. Pod touto fotogra í jsou umíst¥ny odkazy na statické stránky, které um¥lec vytvo°il. Pravé menu slouºí pro zobrazení posledn¥ p°idaných novinek. Do tohoto menu se zobrazují i jiné informace o um¥lci, nap°íklad jeho tagy £i podobní um¥lci. Obsahová £ást je umíst¥na uprost°ed webové stránky a její ²í°ka je omezena. Omezena musí být p°edev²ím maximální ²í°ka, protoºe pokud by byla zobrazena webová stránka ve velkém rozli²ení, pak by byl text v této £ásti ²patn¥ £itelný.
Obrázek 3.9: Rozvrºení pro lové stránky
Hlavní webová stránka aplikace je navrºena s jednosloupcovou ²ablonou. Hlavi£ka této ²ablony je stejná jako u webové stránky um¥lce. Obsahová £ást je na kaºdé stránce jiná. e²ením je bu¤ vytvo°it n¥kolik ²ablon a ty napl¬ovat, nebo kaºdá webová stránka bude vytvo°ena základní spole£nou ²ablonou.
22
KAPITOLA 3.
ANALÝZA A NÁVRH EENÍ
Kapitola 4
Implementace V této £ásti mé práce se zabývám implementací aplikace. Jako programovací jazyk jsem zvolil PHP, aplikace je postavena na frameworku Zend, který je jedním z nejznám¥j²ích PHP framework·. Pro webhosting jsem zvolil rmu eský Webhosting s.r.o., která nabízí velké mnoºství sluºeb a velkou kapacitu úloºného prostoru. Jako webový server je pouºit Apache HTTPD 2.2.11, který podporuje mod_rewrite pomocí souboru htaccess, bez kterého by nebylo moºné pouºít Zend Framework. Dal²í pot°ebnou sluºbou je plánování úloh, tato sluºba bude vyuºita pro plánování hitparád.
4.1
Zend Framework
Tento framework jsem si vybral díky jeho jednoduchosti a kvalit¥, je vyuºíván velkou komunitou lidí, proto je jednoduché získat radu ohledn¥ implementace ur£itých £ástí aplikace. Má aplikace vyuºívá Zend Framework ve verzi 1.6. Implementaci aplikace mám zjednodu²enou díky tomuto frameworku, ve kterém je jiº velké mnoºství pouºitelných funkcí vytvo°eno.
4.1.1 Adresá°ová struktura Adresá°ová struktura je zobrazena na obrázku 4.1. Jsou zde zobrazeny pouze nejd·leºit¥j²í adresá°e, bez kterých bych se neobe²el. Tato adresá°ová struktura je doporu£ena a díky podpo°e htaccess mohu m¥nit p°ístupnost t¥chto adresá°·. V mé aplikace je soubor htaccess nastaven tak, aby sm¥roval ve²keré poºadavky, které nejsou pro sloºku public, na soubor index.php. Ko°enový adresá° obsahuje 3 podadresá°e a 2 soubory. Adresá° application obsahuje ve²kerou logiku aplikace. Adresá° library obsahuje knihovny frameworku Zend a knihovny, které jsem sám vytvo°il. Tyto dva adresá°e nejsou p°ístupné pro webového klienta. Ve°ejným adresá°em je public, který obsahuje ve²keré soubory, které jsou vyºadovány webovým klientem. Tento adresá° obsahuje CSS styly, JavaScriptové soubory a obrázky. Nejd·leºit¥j²ím souborem je index.php, který je volán p°i kaºdém poºadavku. Tento soubor na£ítá knihovny frameworku a ur£uje, která akce bude volána. Druhý soubor tohoto adresá°e je htaccess, který zaji²´uje volání souboru index.php. 23
24
KAPITOLA 4.
IMPLEMENTACE
Obrázek 4.1: Adresá°ová struktura aplikace
Adresá° application obsahuje 2 podadresá°e. Adresá° models obsahuje t°ídy pro práci s databázovými tabulkami. Kaºdou tabulku zpracovává jedna t°ída, která d¥dí výchozí model pro tabulku. Výchozí model d¥dí t°ídu Zend_Db_Table_Abstract a obsahuje metody, které se vyuºívají u v¥t²iny databázových tabulek. P°ístupové údaje do databáze jsou v souboru con g.ini. Adresá° modules obsahuje 4 podadresá°e, které na obrázku nejsou zobrazeny. Aplikace obsahuje 4 moduly a kaºdý modul má své vlastní kontrolery, formulá°e a ²ablony. V adresá°i controllers jsou t°ídy kontroler·. Kaºdá tato t°ída d¥dí výchozí t°ídu pro daný modul. Tato výchozí t°ída d¥dí t°ídu Zend_Controller_Action a její funkce init je vykonána p°i kaºdém poºadavku na daný modul, proto je vhodné do ní umístit nap°íklad ov¥°ení identity uºivatele. Kaºdá t°ída kontroleru má také svoji init funkci, která je volána p°i kaºdém poºadavku na daný kontroler. Tento adresá° také obsahuje pomocné t°ídy, které se vyuºívají ve více funkcích. Adresá° forms obsahuje t°ídy pro práci s formulá°i, kaºdá tato t°ída d¥dí t°ídu Zend_Form. V konstruktoru této t°ídy se pomocí funkcí vkládají elementy do formulá°e a zárove¬ k t¥mto element·m p°idávají ltry a validátory. Tímto mohu omezit délku °et¥zce nebo £íselný rozsah. Validace se mi hodí nap°íklad pro emailovou adresu. V adresá°i layouts jsou ²ablony pro daný modul. Kaºdý soubor ²ablony obsahuje statický HTML kód a funkce pro vloºení dynamicky generovaného obsahu. ablonu mohu skládat z více soubor·. Kaºdá akce, která je zobrazena, má sv·j vlastní soubor, který naplním obsahem a vloºím do ²ablony. Adresá° views obsahuje podadresá°e, kaºdý podadresá° pat°í k jednomu kontroleru a tento podadresá° obsahuje soubory pro kaºdou akci. Tento soubor se vkládá do ²ablony webové stránky. Do sloºky views ukládám také soubory s £ástmi webové stránky nebo ²ablony email·, které se odesílají uºivatel·m.
4.2.
4.2
GALERIE
25
Galerie
Galerie je velmi d·leºitou £ástí mé aplikace. Do galerie um¥lec ukládá svá díla, která t°ídí do kategorií. K díl·m má um¥lec moºnost p°idat vodoznak.
4.2.1 Kategorie Kategorie slouºí k zp°ehledn¥ní galerie. Um¥lec m·ºe své dílo umístit do jedné kategorie. P°i návrhu jsem zvolil moºnost p°idání fotogra e do více kategorií a je k tomu i p°ipravena databázová struktura, ale p°i implementaci jsem se rozhodl pro omezení jedné fotogra e na jednu kategorie kv·li p°ehlednosti. Kategorie m·ºe obsahovat podkategorie. Celkov¥ m·ºe mít ko°enová kategorie 3 stupn¥ potomk·. Toto £íslo se edituje pomocí kon gura£ního souboru. Databázová tabulka categories obsahuje sloupec id_parent a jestliºe tento sloupec má hodnotu null, pak je tato kategorie ko°enová, jinak je v tomto sloupci id rodi£ovské kategorie. Pro ve²keré zpracování kategorií a podkategorií vyuºívám rekurzi, tudíº se stupn¥ potomk· mohou libovoln¥ m¥nit. Kategorie slouºí jako ltr. Jestliºe náv²t¥vník otev°e galerii, jsou mu zobrazeny ve²kerá díla °azená podle data p°idání. Pokud není zobrazen detail kategorie, jsou vypsány ve²keré ko°enové kategorie. Kaºdá kategorie má svoji vlastní URL adresu, která je jedine£ná pro daného um¥lce. P°i otev°ení kategorie se vypí²í potomci této kategorie a zobrazí se díla, která pat°í do této kategorie nebo do jejich potomk·.
4.2.2 Vkládání díla Díla vkládá um¥lec pomocí administra£ního rozhraní. Ke kaºdému dílu je nutné p°idat titulek, voliteln¥ se vkládá popis díla, kategorie a vodoznak. U vkládaného souboru se ov¥°uje velikost a MIME typ, velikost je omezena na 2MB a typ souboru m·ºe být pouze obrázek. Díla ukládám ve dvou velikostech - náhled a plná velikost. Maximální ²í°ka a vý²ka se nastavuje v kon gura£ním souboru. Kaºdý um¥lec má sv·j vlastní adresá° pro nahrávání obrázk· a to z toho d·vodu, aby v ºádném adresá°i nebylo velké mnoºství soubor·. Díla ukládám pomocí takzvaného Action Helperu. Je to t°ída, která je volána z akce v kontroleru a vyuºívá se vícekrát. V této pomocné t°íd¥ se dílo uloºí do adresá°e na serveru a je k n¥mu eventuáln¥ p°idán vodoznak. Jestliºe je dílo ²ir²í nebo vy²²í neº maximáln¥ dovolená, pak jsou vypo£teny jeho nové rozm¥ry. Ke zm¥n¥ velikosti vyuºívám funkci imagecopyresampled. Ve²kerá díla jsou nahrána ve formátu jpeg pomocí funkce imagejpeg a kvalita je nastavena na výchozí hodnotu 75%. Jméno souboru na serveru je závislé na id díla v databázi. P°i manipulaci s dílem jako je nap°íklad úprava záznamu v tabulce nebo smazání tohoto záznamu ov¥°uji identitu um¥lce. K tomu slouºí funkce isAuthor, která se d¥dí z výchozího modelu tabulky. Do této funkce vstupují 3 parametry, pot°ebuji znát id um¥lce, id díla a jméno sloupce, který obsahuje id um¥lce.
26
KAPITOLA 4.
IMPLEMENTACE
4.2.3 Zobrazení díla Na jedné webové stránce je zobrazeno 6 d¥l, stránkování je °e²eno pomocí t°ídy Zend_Paginator. Do konstruktoru této t°ídy vloºím pole, které chci stránkovat, nastavím po£et poloºek na stránku a vytvo°ím soubor, který generuje klouzavé stránkování. Vytvo°il jsem 2 moºnosti, jak mohou um¥lci zobrazovat svá díla v galerii. První moºností je zobrazení pomocí aplikace LightBox, která je voln¥ ke staºení. K zobrazení vyuºívá JavaScript a dílo je moºné zobrazit ve velké velikosti. Druhou moºností je zobrazení detailu díla na samostatné stránce. Velikost tohoto díla je zmen²ena, aby se dílo ve²lo na webovou stránku. Jestliºe je v zobrazené kategorii více d¥l a um¥lec pouºívá k zobrazení aplikaci LightBox, pak musím náv²t¥vníkovi umoºnit projít ve²kerá díla v kategorie bez toho aniº by musel procházet mezi stránkami dané kategorie. Aby mohl náv²t¥vník v aplikaci LightBox plynule procházet na dal²í díla, musí být v odkazu díla atribut rel s parametrem lightbox[roadtrip]. P°i zpracování poºadavku si do ²ablony po²lu pole ve²kerých d¥l v dané kategorii. Díla, která mají mít na dané webové stránce zobrazeny s náhledem, p°idám do seznamu a díla, která nemají být zobrazeny s náhledem, vypí²i s prázdným odkazem, aby nebyly vid¥t na webové stránce, ale LightBox je vid¥l. Pokud um¥lec pouºívá klasické zobrazení d¥l, je t°eba zajistit podobnou funkci jako u LightBoxu. Vzhledem k tomu, ºe je dílo zobrazováno na webové stránce, musím v¥d¥t z jaké kategorie jej náv²t¥vník otev°el. Z toho d·vodu si p°i kaºdém otev°ení kategorie zaznamenávám tuto kategorii do session a p°i zobrazení detailu díla vím, která díla zobrazovat p°i prohlíºení. U kaºdého detailu díla je zobrazeno dílo, které zobrazenému dílu p°edchází a následuje. U p°edchozího i následujícího díla je zobrazena ²ipka vlevo nebo vpravo, to uºivateli nazna£uje, ºe m·ºe mezi díly p°echázet pomocí ²ipek na klávesnici. Tato funkce je zaji²t¥na pomocí JavaScriptu.
4.3
Náv²t¥vní kniha
Náv²t¥vní kniha slouºí um¥lci pro komunikaci s náv²t¥vníky. Náv²t¥vníci mohou reagovat na £innosti um¥lce a um¥lec má tak ur£itou zp¥tnou vazbu. Um¥lec má moºnost nastavit, kdo je oprávn¥n zanechávat vzkazy v jeho náv²t¥vní knize. Bu¤ mohou p°ísp¥vky vkládat p°ihlá²ení i nep°ihlá²ení uºivatelé, nebo vzkazy vkládají pouze p°ihlá²ení uºivatelé. Náv²t¥vní kniha m·ºe být samoz°ejm¥ zakázána celá.
4.3.1 Vkládání p°ísp¥vk· Jestliºe je náv²t¥vní kniha povolena, smí v ní náv²t¥vníci zanechávat vzkazy. P°i vkládání vzkazu musí být vypln¥no jméno, p°edm¥t a text vzkazu. Pokud je uºivatel p°ihlá²en, jméno se vyplní automaticky. Pro vkládání vzkaz· není k dispozici ºádný editor. Jediný zp·sob formátování textu je od°ádkování. Na jakýkoli vzkaz je moºné odpov¥d¥t. V tabulce se záznamy o náv²t¥vní knize je sloupec id_parent, který sloºí pro ur£ení rodi£ovského vzkazu, jestliºe má tento sloupec
4.4.
SPRÁVA OBSAHU
27
hodnotu null, pak je vzkaz ko°enový. Formulá°, který slouºí pro odesílání vzkaz·, obsahuje skrytý element id_parent. Jestliºe chce uºivatel odpov¥d¥t na ur£itý vzkaz, pak pomocí JavaScriptu tento element naplním a p°i odeslání formulá°e vím, ºe se jedná o odpov¥¤. Do formulá°e pro odesílání vzkaz· jsem umístil jeden element navíc, který by m¥l odhalit vkládání robotem. Element je typu submit a je schovaný pomocí CSS styl·. Uºivatel tento element neode²le, ale robot ano. Proto jakmile odhalím odeslání tohoto elementu p°i zpracování, data odeslané ve formulá°i neukládám do databáze.
4.3.2 Zobrazení p°ísp¥vk· Ve²keré vzkazy se zobrazují pod sebe a jsou °azené podle data p°idání. Jestliºe má vzkaz odpov¥¤, pak je tato odpov¥¤ zobrazena ve stejném bloku jako p·vodní vzkaz, ale má 90 procentní ²í°ku oproti svému p°edch·dci. Kaºdý p°ísp¥vek m·ºe mít libovolné mnoºství odpov¥dí. Stránkování je °e²eno op¥t pomocí t°ídy Zend_Paginator. Na jedné stránce je zobrazeno 6 ko°enových p°ísp¥vk· a jsou zde zobrazeny ve²keré reakce na ko°enové vzkazy. Op¥t jsem pouºil klouzavé stránkování. U kaºdého jména, které pat°í k p°ihlá²enému uºivateli, je zobrazena ikonka, která ur£uje o jakého uºivatele se jedná. Nep°ihlá²ený uºivatel nemá ºádnou ikonku. V náv²t¥vní knize rozli²uji 3 typy p°ihlá²ených uºivatel·. Je to autor pro lu, tudíº správce náv²t¥vní knihy, pak je tu um¥lec, který nav²tívil tuto náv²t¥vní knihu a v neposlední °ad¥ p°ihlá²ený uºivatel bez pro lové stránky.
4.3.3 Administrace náv²t¥vní knihy Ve²kerá správa náv²t¥vní knihy probíhá p°es administra£ní rozhraní. Um¥lec má právo zakázat ur£itému náv²t¥vníkovi vkládání vzkaz·, ale zákaz m·ºe prob¥hnout aº poté co daný náv²t¥vník vloºí vzkaz. Jestliºe náv²t¥vník do náv²t¥vní knihy vkládá vadný obsah, pak smí um¥lec tento obsah bu¤ smazat, nebo tohoto náv²t¥vníka zakázat. Jakmile je uºivatel zakázán, není oprávn¥n vkládat do dané náv²t¥vní knihy vzkazy. Vzkazy se v administra£ním rozhraní zobrazují stejn¥ jako na pro lové webové stránce um¥lce, aby m¥l um¥lec moºnost odpovídat na vzkazy p°ímo ze svého administra£ního rozhraní. U kaºdého um¥lce se vede seznam zakázaných náv²t¥vník·, um¥lec smí tyto uºivatele op¥t povolit a tito náv²t¥vníci budou moci op¥t zanechávat vzkazy. Jestliºe je smazán vzkaz, jsou automaticky smazány i ve²ke°í jeho potomci. To zajistím pouºitím rekurze.
4.4
Správa obsahu
Správa obsahu je dal²í d·leºitou £ástí mé aplikace. Kaºdý um¥lec si vytvá°í své vlastní statické webové stránky. Do správy obsahu zahrnuji jak tyto statické webové stránky, tak i novinky, které p°idává. Jak jsem popsal vý²e, zvolil jsem Texylu jako editor pro
28
KAPITOLA 4.
IMPLEMENTACE
formátování textu. Pro uºivatele je tento editor p°ehledný a poskytuje n¥kolik moºností vzhledu. Texyla podporuje vkládání obrázk· i ostatních soubor·, ale vkládání obrázk· není vhodné pro moji aplikaci. Z toho d·vodu jsem se rozhodl vkládání obrázk· vy°e²it jinak neº pomocí Texyly. Zvolil jsem jednoduchou cestu a nahrávání obrázk· probíhá podobn¥ jako nahrávání do galerie. Vyuºívá se stejný Action Helper a pro tyto obrázky je vyhrazena speciální tabulka v databázi. P°i vkládání £i editaci obsahu vidí um¥lec ve²keré pouºitelné obrázky. P°i kliknutí na daný obrázek se tento obrázek vloºí do textového pole. Maximální velikost obrázk· se nastavuje pomocí kon gura£ního souboru con g.ini.
4.4.1 Nastavení Texyly V návrhu aplikace jsem popisoval, jak Texyla vytvá°í Texy! syntaxi a pomáhá tak uºivateli formátovat text. Je nutné nastavit jak Texylu, tak zpracování Texy! syntaxe. Vytvo°il jsem 2 r·zná nastavení, která se li²í pouze pouºitím nadpisu H1. Pro úvodní webovou stránku pro lu jsem povolil vkládání nadpisu H1 aº H3, aby si mohl um¥lec vytvo°it nadpis podle svého uváºení. Nadpis H1 u ostatních statických stránek a novinek je p°evzat z titulku. Li²tu Texyly nastavuji p°ímo na webové stránce, na které je zobrazena. Nastavení se upravuje pomocí p°íkazu v JavaScriptu, ve kterém ur£ím, jaké formátovací zna£ky bude mít uºivatel k dispozici. Jazyk se také nastavuje v tomto nastavení, navíc se musí nahrát soubor s danou jazykovou mutací. P°i kliknutí na danou zna£ku se p°idá odpovídající kód do textového pole. Do databázové tabulky se ukládá Texy! syntaxe, která je na výstupu p°evedena do HTML kódu. Aby se na výstupu do HTML kódu neobjevovaly elementy, které jsem nepovolil vkládat pomocí Texyly, je pot°eba nastavit i výstup Texy! syntaxe. Kon gura£ní soubory nabízejí velké mnoºství omezení pro výstup. Jedním tímto omezením je p°idávání atributu rel s parametrem nofollow k odkaz·m. Tento parametr vyhledávajícímu robotu °ekne, ºe nemá následovat tento odkaz. Nakonec jsem se rozhodl pro nep°idávání toho atributu k odkaz·m. P°i editaci je zakázáno p°ímé editování HTML kódu.
4.4.2 Správa statických stránek Statické webové stránky se umis´ují do levého menu hned pod pro lovou fotogra i um¥lce. Po£et t¥chto stránek je omezen. Nastavení tohoto po£tu se op¥t provádí v kon gura£ním souboru a je nastaven na 10 statických stránek. Statické webové stránky rozd¥luji na 2 druhy. První je úvodní webová stránka um¥lce, která se zobrazuje pouze na domovské stránce um¥lce a pak jsou to ostatní webové stránky. Kaºdý druh ukládám do jiné tabulky. U domovské stránky nepot°ebuji sloupce pro °azení, titulek a jiné informace. Text domovské stránky by mohl být p°i°azen jako jeden sloupec k záznamu o um¥lci, ale rozhodl jsem se pro °e²ení, kdy bude domovská stránka v jiné tabulce. azení stránek probíhá pomocí sloupce arrange, do kterého jsou zadávány £íselné hodnoty. P°i p°idání nového záznamu se mu p°id¥lí £íslo o jedno v¥t²í neº má poslední
4.5.
VODOZNAK
29
záznam. Pokud chci zam¥nit po°adí 2 záznam·, pak pouze zam¥ním jejich hodnoty ve sloupci arrange. Odkazy na webové stránky jsou °azeny hned pod odkazy na náv²t¥vní knihu a galerii. URL adresa statické webové stránky by m¥la být jednodu²e £itelná pro náv²t¥vníka, proto je ve tvaru /artist//.html. Jméno um¥lce i titulek jsou ve tvaru, který je vhodný pro URL adresu. Pomocí t¥chto dvou parametr· mohu najít záznam um¥lce i jemu odpovídající webovou stránku. Na webové stránce by nem¥lo být více nadpis· H1, proto je nadpis H1 generován z titulku webové stránky. Titulek webové stránky je vloºen i do elementu title ve struktu°e webové stránky. Toto omezení neplatí pro úvodní stránky, kde um¥lec smí pouºívat nadpis H1.
4.4.3 Správa novinek Novinky se umis´ují do pravého horního menu. Jsou zde umíst¥ny poslední 3 p°idané novinky a jejich náhled. V tomto menu je také odkaz na ve²keré novinky, které byly p°idány a °adí se podle data. Novinky stejn¥ jako statické webové stránky vyuºívají editor Texyla pro formátování textu a stejn¥ jako u statických stránek je zakázáno formátování pomocí HTML kódu. Seznam obrázk· je stejný jako se vyuºívá pro statické webové stránky a po£et vloºených obrázk· není omezen. U kaºdé novinky je moºné vyplnit náhled, který je volitelný a jeho maximální délka je 280 znak·. Jestliºe je náhled vypln¥n, pak je zobrazen. Jestliºe vypln¥n není, tak jako náhled pouºiji £ást textu novinky. Text o°íznu na 280 znaku a naleznu v n¥m poslední mezeru a jako náhled se pouºije text do poslední mezery.
4.5
Vodoznak
Vodoznak se p°idává k nahrávaným díl·m, aby znemoºnil jednoduché kopírování tohoto díla. Jestliºe um¥lec neumí sám p°idávat vodoznak ke svým díl·m, umoºní mu to má aplikace. Um¥lec má moºnost p°idat si aº 3 vlastní vodoznaky.
4.5.1 Nahrávání vodoznaku Maximální velikost vodoznaku je stejná jako u plné velikosti um¥leckého díla, aby mohl vodoznak p°ekrýt celé dílo v plné kvalit¥. Toto nastavení se op¥t upravuje v kon gura£ním souboru. Existují 3 typy vodoznak·, které je moºno nahrát. První 2 typy mají barevné pozadí. Zvolil jsem 2 protikladné pozadí, aby se vodoznak hodil jak na tmavý obrázek tak na sv¥tlý. Um¥lec si p°i nahrávání vodoznaku vybere, která barva bude pr·hledná a tato barva se p°i nahrávání zpr·hlední. Na výb¥r je £erná a bílá barva pozadí. T°etím typem je nahrání pr·hledného vodoznaku ve formátu png, u toho vodoznaku se jiº ºádná barva nezpr·hlední.
30
KAPITOLA 4.
IMPLEMENTACE
Nahrání vodoznaku s barevným pozadím není problém, ale problém nastává s pr·hledným vodoznakem ve formátu png. V PHP mám k dispozici GD knihovnu. V této knihovn¥ je velké mnoºství funkcí pro práci s obrázky. Abych byl schopný uloºit pr·hledný png obrázek na server, musím si nejd°íve vytvo°it prázdný obdélník. Tento obdélník má £erné pozadí, toto pozadí ud¥lám pr·hledným pomocí funkce imagecolortransparent, která mi zpr·hlední £ernou barvu. Pomocí funkce imagealphablending p°epnu obdélník do non-blending módu, ve kterém se kopíruje i informace o pr·hlednosti. Aby se informace o pr·hlednosti uloºila do výsledného obrázku je t°eba pomocí funkce imagesavealpha nastavit ukládání pr·hlednosti. Jakmile je toto nastaveno, sta£í tento prázdný obdélník spojit s vodoznakem, který nahrává um¥lec pomocí funkce imagecopyresampled. Jestliºe si uºivatel nenahraje sv·j vlastní vodoznak, pak má p°edvolené 3 typy vodoznak· s logem aplikace. P°i ukládání vodoznaku se neukládá ºádný záznam do databáze, ale pouze se ov¥°uje existence souboru. Vodoznaky jsou ukládány do adresá°e watermark ve tvaru _.png.
4.5.2 P°idání vodoznaku k dílu Na obrázku 4.2 jsou vid¥t 3 moºnosti, kam m·ºe um¥lec umístit vodoznak. Nej£ast¥j²í umíst¥ní je do pravého spodního rohu nebo p°es celé dílo. P°idal jsem na výb¥r je²t¥ levý spodní roh. Umíst¥ní p°es celé dílo se vypo£ítává v závislosti na pom¥ru stran díla a vodoznaku. Vodoznak vºdy zakrývá celou ²í°ku nebo vý²ku. Vodoznak je vycentrován na stran¥, kterou nepokrývá celou. Umíst¥ní do spodních roh· se vypo£ítává vzhledem k ²í°ce díla, ke které má být p°idán vodoznak. Vodoznak se vkládá na polovinu ²í°ky díla. Vodoznak je zmen²en na polovinu díla s p·vodním pom¥rem stran a umíst¥n do levého nebo pravého rohu. V p°ípad¥ v¥t²í vý²ky vodoznaku neº díla se vodoznak p°izp·sobí vý²ce díla a je s p·vodním pom¥rem stran zmen²en na vý²ku díla.
Obrázek 4.2: Typy umíst¥ní vodoznaku
4.6
Tagy
V aplikaci jsou tagy vyuºity n¥kolika funkcemi. Podle tag· mohu um¥lce spojovat a poskytnout tak náv²t¥vníkovi podobné um¥lce. Kaºdý um¥lec by m¥l mít ke svému pro lu p°i°azeny takové tagy, které vystihují jeho tvorbu. Toto jsem nemohl zajistit p°ímo, ale vytvo°il jsem n¥kolik omezení, které by m¥ly pomoci s tímto problémem.
4.6.
TAGY
31
4.6.1 Vkládání tag· Um¥lce mohou ozna£it tagem pouze p°ihlá²ení uºivatelé. V aplikaci není povoleno, aby jeden náv²t¥vník mohl ozna£ovat um¥lce vícekrát stejným tagem a zvy²ovat tak po£et vloºení tohoto tagu, stejn¥ tak um¥lec nem·ºe p°idávat více stejných tag· ke svému pro lu. Pokud by mohly vkládat tagy i nep°ihlá²ení uºivatelé, pak by se toto omezení velice ²patn¥ aplikovalo. Vkládání tag· probíhá na webové stránce um¥lce. Jestliºe je uºivatel p°ihlá²ený, má v pravém menu odkaz na p°idání tagu. Po kliknutí na tento odkaz se objeví na webové stránce formulá° pro p°idání tagu. Kaºdý um¥lec má moºnost p°idat ke svému pro lu 5 tag·, které mají popsat jeho tvorbu. Tento po£et je omezen z toho d·vodu, aby um¥lec vybral 5 nejlep²ích tag·. Toto £íslo je nastavitelné v kon gura£ním souboru. P°i vkládání tagu se do databázové tabulky ukládá informace o um¥lci, ke kterému je tag p°idáván, uºivateli, který tag vloºil a samotný text tagu, který je typu VARCHAR a jeho maximální délka je aº 50 znak·.
4.6.2 Zobrazení tag· Populární zp·sob pro zobrazení tag· je takzvaný tag cloud, ve kterém jsou zobrazeny ve²keré pouºité tagy a jsou zvýrazn¥ny ty nejpopulárn¥j²í. Tento zp·sob jsem také zvolil. Zobrazení tag· probíhá na webové stránce k tomu ur£ené. Náv²t¥vník má moºnost zobrazit si tag cloud nebo tabulku tag· se°azených dle popularity. Pro zobrazení tag cloudu jsem zvolil umíst¥ní tag· do ne£íslovaného seznamu. Podle popularity tagu rozli²uji 11 styl· písma. Rozhodl jsem se pouze pro r·zné velikosti písma, jelikoº u n¥kterých tag cloud· se m¥ní i barva tagu, ale tato moºnost mi p°ipadala zbyte£ná. Velikost písma závisí na procentuálním zastoupení daného tagu vzhledem k ostatním. P°ihlá²ený náv²t¥vník má moºnost zobrazit si v tag cloudu tagy, které p°idal k um¥lc·m. Tagy si m·ºe zobrazit i °azené podle um¥lc·, ke kterým je p°idal.
4.6.3 Vyhledávání pomocí tag· Pomocí tag· mohu um¥lce vyhledávat, to m·ºe být zajímavé pro náv²t¥vníky, kte°í se zajímají o ur£itý obor v um¥ní. Náv²t¥vník·m mohu nabídnout i seznam podobných um¥lc· a díky tomu stráví na webových stránkách del²í £as. Toto je výhodné i pro ostatní um¥lce, kte°í tak mohou p°ijít k novým obdivovatel·m.
4.6.3.1 Vyhledávání podobných um¥lc· Vyhledávání podobných um¥lc· probíhá na pro lové webové stránce um¥lce. Podobní um¥lci se zobrazují v pravém menu pod sebe a vedle jejich pro lové fotogra e se zobrazují 4 jejich nejpopulárn¥j²í tagy. Vyhledávání probíhá tím zp·sobem, ºe se vybere 10 nejpouºívan¥j²ích tag· um¥lce. Tyto tagy se procházejí a pro kaºdý tag jsou vyhledáni 4 um¥lci, kte°í mají nejv¥t²í
32
KAPITOLA 4.
IMPLEMENTACE
po£et vloºení tohoto tagu. Takto získám celkem aº 40 um¥lc· uloºených v poli, které náhodn¥ zamíchám a na um¥lcovu webovou stránku vypí²i pouze 4 první. Kdyby toto pole nebylo zamícháno, pak by mezi podobnými um¥lci byli p°eváºn¥ ti stejní. Jestliºe se um¥lci budou m¥nit, pak bude seznam podobných um¥lc· ºiv¥j²í a upoutá pozornost náv²t¥vníka.
4.6.3.2 Vyhledávání um¥lc· pomocí tag· Vyhledávání pomocí tag· probíhá ve t°ech krocích. V prvním kroku se vezme tag tak, jak ho náv²t¥vník napsal do vyhledávání a výsledky tohoto hledání jsou °azeny podle po£tu tag· u vyhledaného um¥lce. V druhém kroku je hledaný výraz rozd¥len pomocí mezery na pole a toto pole je procházeno. Pro kaºdé slovo je nalezen um¥lec nejd°íve tak, ºe je vyhledáno stejné slovo a následn¥ jsou vyhledána podobná slova. Podobná slova vyhledávám pomocí výrazu LIKE. Ve t°etím kroku je vyhledán celý podobný výraz, jestliºe byl hledaný výraz pouze jedno slovo.
4.7
Hitparády
Hitparády by m¥ly p°ilákat v¥t²í po£et náv²t¥vník·, kte°í na webových stránkách stráví více £asu. Náv²t¥vníci hodnotí díla p°ihlá²ená do hitparády a um¥lec tímto zp·sobem získává ohodnocení, podle kterého se m·ºe objevit v nejlépe hodnocených um¥lcích.
4.7.1 Plánování hitparád Plánování hitparád probíhá v administra£ním rozhraní pro aplikaci. Skript se spou²tí p°es http protokol a je nastaven tak, aby se pou²t¥l kaºdý den minutu po p·lnoci, protoºe hitparády jsou plánovány na celé dny. Administrátor plánuje hitparády vºdy nejblíºe na p°í²tí den. P°i zakládání hitparády se vkládá jméno hitparády, popis hitparády, datum za£átku a konce hitparády. Záznam v tabulce má sloupec is_active, který nabývá hodnoty 0 nebo 1. Výchozí hodnota je 0, coº znamená, ºe hitparáda není aktivní. Jakmile prob¥hne skript, který má aktivovat hitparádu, je tento sloupec nastaven na hodnotu 1, coº znamená, ºe hitparáda je aktivní. Jestliºe administrátor nechce £ekat na spu²t¥ní hitparády, pak m·ºe hitparádu spustit manuáln¥. Jakmile je hitparáda po datu jejího trvání, pak je deaktivována, tedy sloupec is_active je nastaven op¥t na hodnotu 0. Administrátor má op¥t moºnost hitparádu deaktivovat manuáln¥. Jestliºe je hitparáda deaktivována, není moºno díla do hitparády p°ihla²ovat, ani pro díla hlasovat.
4.8.
OPTIMALIZACE PRO VYHLEDÁVAE
33
4.7.2 P°ihlá²ení díla do hitparády Um¥lec smí své dílo p°ihlásit do hitparády pouze za p°edpokladu, ºe je hitparáda aktivní. Hitparády £ekající na aktivaci jsou vypsány v administra£ním rozhraní um¥lce s datem jejich aktivace. Po aktivaci hitparády má um¥lec moºnost p°ihlásit své dílo do hitparády. Na výb¥r má ve²kerá díla, která vloºil do galerie. Dílo smí z hitparády op¥t odhlásit, ale ztratí ve²keré body, které získal a ve²keré komentá°e budou smazány. Po smazání díla z hitparády m·ºe do této hitparády p°ihlásit jiné dílo a op¥t získávat body. V administra£ním rozhraní um¥lce je seznam ve²kerých hitparád, ve kterých má um¥lec p°ihlá²ené své dílo. V tomto seznamu je také po£et bod·, které získal a po£et hlas·. P°i otev°ení detailu hitparády um¥lec vidí i ve²keré reakce na své dílo.
4.7.3 Hlasování v hitparád¥ Náv²t¥vník, který otev°e webovou stránku hitparád, uvidí 2 seznamy. V prvním jsou aktivní hitparády a ve druhém jsou ty, které jiº skon£ily. Do deaktivovaných hitparád nelze vkládat nová díla ani hlasovat pro dané dílo. Náv²t¥vník si m·ºe deaktivované hitparády pouze prohlíºet a pokud je p°ihlá²ený, tak smí k díl·m p°idávat komentá°e. V seznamu aktivních hitparád jsou vypsány ve²keré hitparády, které mají ve sloupci is_active hodnotu 1 a je v nich p°ihlá²eno alespo¬ jedno dílo. ádného náv²t¥vníka nezajímá prázdná hitparáda. P°i zobrazení detailu hitparády vidí náv²t¥vník seznam p°ihlá²ených d¥l a jejich hodnocení. Na jedné webové stránce je zobrazeno aº 15 d¥l a stránkování je op¥t zaji²t¥no t°ídou Zend_Paginator. Díla jsou °azena podle dosavadního hodnocení. P°i zobrazení detailu díla se zobrazí toto dílo ve v¥t²ím rozli²ení, vypí²e se popis tohoto díla a zobrazí se komentá°e k tomuto dílu. P°ihlá²ení uºivatelé mohou zanechat u díla komentá° a mohou hlasovat. Hlasovat mohou pouze p°ihlá²ení uºivatelé, kte°í je²t¥ pro toto dílo nehlasovali, nejsou autory díla a hitparáda musí být aktivní. Uºivatelé hlasují v rozmezí 1 aº 5 body, kde 1 bod je nejmén¥ a 5 bod· nejvíce. Body jsou reprezentovány hv¥zdi£kami a nabývají £íselných hodnot s desetinnými £ísly.
4.8
Optimalizace pro vyhledáva£e
U webových aplikací je d·leºité, aby je bylo moºné nalézt pomocí vyhledáva£· jakým je t°eba Google. Zam¥°il jsem se obzvlá²t¥ na pro lovou webovou stránku um¥lce, aby mohl být um¥lec nalezen pomocí svého jména nebo obsahu jeho stránky. Naopak není vhodné, aby byly pomocí vyhledáva£e nalezeny webové stránky s administrací. Na webové stránky s administrací, které nemají být indexovány vyhledáva£em umístím meta tag se jménem robots a obsahem noindex, nofollow. Parametr noindex °ekne vyhledáva£i, ºe tyto stránky nemá zahrnovat p°i vyhledávání a parametr nofollow vyhledáva£i °ekne, ºe nemá procházet odkazy, které na této webové stránce nalezne.
34
KAPITOLA 4.
IMPLEMENTACE
4.8.1 Pro lová webová stránka U kaºdé optimalizace webové stránky je d·leºité zam¥°it se na klí£ová slova. Jelikoº nevím, jací um¥lci si zde zaloºí pro l, nemohu tyto slova volit pevn¥. Pro lová webová stránka se skládá ze t°í sloupc·, u kterého se m¥ní obsah prost°edního sloupce na kaºdé webové stránce. Z toho d·vodu se zam¥°uji na klí£ová slova, která souvisí s obsahem prost°edního sloupce. Z°ejm¥ nejd·leºit¥j²ím tagem webové stránky pro vyhledáva£e je titulek stránky, proto do n¥ho vkládám na kaºdé stránce jméno um¥lce. Úvodní webovou stránku si um¥lec vytvá°í sám a má povoleno pouºívat nadpis H1, takºe nadpis H1 na této stránce neovliv¬uji. Na úvodní webové stránce do titulku vkládám krom¥ jména i 3 nejpopulárn¥j²í tagy, pak záleºí na n¥m, co vloºí do nadpisu úvodní webové stránky. Statické webové stránky mají v titulku jméno um¥lce a název webové stránky. Název této stránky se vkládá zárove¬ do nadpisu H1 a URL adresu. V URL adrese je název webové stránky upravený, aby byl vhodný pro URL adresu. Webové stránky novinek mají v titulku jméno um¥lce a název novinek, který si ur£í sám um¥lec, výchozí pojmenování je news. Jestliºe je otev°ena novinka, pak má v titulku p°edchozí informace a navíc název novinky. Název novinky také vkládám do nadpisu H1, který v p°ípad¥ novinky nem·ºe um¥lec editovat. Název novinky je rovn¥º v URL adrese webové stránky, název je samoz°ejm¥ p°eveden do podoby vhodné pro URL adresu. U webové stránky galerie se do titulku vkládá jméno um¥lce a název galerie tak, jak jej zadal um¥lec. Název galerie je také vloºen do nadpisu H1. V galerii existují kategorie a kaºdá kategorie má sv·j název. Jestliºe je otev°ena webová stránka kategorie, pak je název kategorie vloºen do titulku a do nadpisu H1 webové stránky.
4.8.2 Hlavní webová stránka Hlavní webová stránka slouºí pro vyhledávání um¥lc·, zobrazení hitparád a vytvá°ení uºivatelských ú£t·. Vzhledem k velké obsazenosti domén jsem zvolil doménu www.artsite.org, která byla volná. Tudíº první klí£ové slovo, které jsem zvolil je artsite. Webová aplikace má spole£né v¥ci s um¥ním, um¥lci, hitparádami, um¥lci si zde mohou editovat novinky, galerii a náv²t¥vní knihu. Z toho d·vodu dal²ími klí£ovými slovy jsou práv¥ tato slova. Kaºdá hlavní webová stránka, kterou je moºno otev°ít má v titulku, nadpisu H1 a v URL adrese klí£ová slova, která tuto webovou stránku vystihují. Ve v¥t²in¥ p°ípad· na um¥lcov¥ pro lové webové stránce sta£ilo správn¥ pojmenovat kontroler, který obsluhuje n¥kolik akcí a tento název byl zanesen p°ímo do URL adresy, ale v p°ípad¥ hlavních webových stránek mi p°ipadalo zbyte£né °e²it URL adresu vytvá°ením v¥t²ího mnoºství kontroler·, které by obsahovaly pouze jednu akci, a proto jsem se rozhodl vyuºít statického sm¥rování a webové stránky, které nepot°ebují sv·j vlastní kontroler, jsou p°esm¥rovány na jiný kontroler a mají v n¥m vytvo°enou svoji akci.
Kapitola 5
Testování V této kapitole se zabývám testováním implementované aplikace. D·raz kladu na uºivatelské rozhraní, jelikoº je t°eba aby uºivatel vºdy v¥d¥l, co práv¥ nastavuje. Snaºil jsem se vytvá°et p°ehledné administra£ní rozhraní, které by bylo intuitivní a jednoduché. Otestovat je t°eba jak ovládání aplikace tak i funk£nost. Vzhledem k tomu, ºe jsem aplikaci vytvá°el sám, tak nemohu sebe brát jako testovanou osobu co se tý£e ovládání aplikace. Osobn¥ jsem testoval pouze funk£nost aplikace p°i tvorb¥ poºadovaných funkcí a po dokon£ení celé aplikace, proto se v této kapitole budu zabývat pouze uºivatelským rozhraním. Pro lová webová stránka není p°íli² sloºitá, ale p°esto je t°eba otestovat, jak náv²t¥vník bude reagovat na vloºený obsah od um¥lce. V¥t²í problém s p°ehledností je u administra£ního rozhraní um¥lce. Je zde 6 záloºek a kaºdá záloºka má po otev°ení je²t¥ n¥kolik záloºek ve svém podmenu. Nejrozsáhlej²í podmenu má záloºka pro práci s galerií. P°i implementaci aplikace jsem se snaºil vºít do situace uºivatele této aplikace, a proto jsem do administra£ního rozhraní vkládal nápov¥dy ohledn¥ nastavení. Testování ukáºe, zda to bylo uºite£né.
5.1
Návrh testování
Testování bude probíhat na po£íta£ích testovaných osob a testované osoby budou pouºívat sv·j b¥ºn¥ pouºívaný prohlíºe£. Vhodné by bylo, aby kaºdá testovaná osoba pouºívala jiný prohlíºe£ a alespo¬ jedna osoba m¥la odli²né rozli²ení na svém monitoru. Testovaným osobám zadám úkoly, které souvisí s p°ihlá²enými uºivateli. Testovaným osobám nesmím po zadání úkolu nijak radit s vkládáním obsahu nebo nastavením svého pro lu.
5.1.1 Testované osoby Testování bylo provedeno na 3 osobách. Moºnosti výb¥ru testovaných osob nebyly optimální, a proto jsem byl nucen vybrat testované osoby z mého okolí. 35
36
KAPITOLA 5.
TESTOVÁNÍ
5.1.1.1 Osoba 1 První testovanou osobou je student vysoké ²koly. Jeho dovednosti s po£íta£em jsou pr·m¥rné, nevlastní blog £i jinou webovou stránku. Po£íta£ vyuºívá pro vypracování ²kolních prací a prohlíºení webových stránek. Pouºívá webový prohlíºe£ Firefox ve verzi 3.0.10. Rozli²ení jeho monitoru je 1024x768.
5.1.1.2 Osoba 2 Druhou testovanou osobou je taktéº student vysoké ²koly. Stejn¥ jako první osoba má pr·m¥rné zku²enosti s po£íta£em, nevlastní blog ani jinou webovou stránku. Po£íta£ £asto vyuºívá pro rýsování v programu AutoCad. Pouºívá webový prohlíºe£ Chrome ve verzi 2.0.172.28. Rozli²ení jeho monitoru je 1280x800.
5.1.1.3 Osoba 3 T°etí testovanou osobou je student vysoké ²koly. Zku²enosti s po£íta£em jsou nadpr·m¥rné, nevlastní blog ani jinou webovou stránku. Na svém po£íta£i ob£as rýsuje v programu AutoCad, vytvá°í prezentace v programu PowerPoint a zná systémy pro publikaci um¥leckých d¥l. Pouºívá webový prohlíºe£ Chrome ve verzi 2.0.172.28. Rozli²ení jeho monitoru je 1280x800.
5.1.2 Zadání úkol· Kaºdá testovaná osoba dostane r·zné úkoly, které má v aplikaci provést. Pot°eba je zam¥°it se na úkoly pro um¥lce, kte°í jsou pro aplikaci nejd·leºit¥j²í. Cílem t¥chto úkol· je objevit nejasné ovládání aplikace.
5.1.2.1 Zadání pro osobu 1 •
zaloºit ú£et um¥lce (náv²t¥vník se nachází na úvodní webové stránce aplikace)
•
zm¥nit si heslo k ú£tu
•
vloºit pro lovou fotogra i
•
vytvo°it úvodní webovou stránku se svojí fotogra í a p°idat jednu statickou webovou stránku
•
vytvo°it novinku a p°idat do ní obrázek, který bude obtékat z jedné strany, vytvo°it zde ne£íslovaný seznam
•
zm¥nit pojmenování náv²t¥vní knihy a novinek, zakázat galerii
•
p°idat jiného um¥lce do svých oblíbených
•
p°idat jinému um¥lcovi do náv²t¥vní knihy vzkaz
•
ohodnotit dílo v hitparád¥ a p°idat k n¥mu vzkaz
5.2.
VÝSLEDKY TESTOVÁNÍ
37
5.1.2.2 Zadání pro osobu 2 •
zaloºit ú£et um¥lce (náv²t¥vník se nachází na úvodní webové stránce aplikace)
•
zm¥nit si heslo k ú£tu
•
vloºit pro lovou fotogra i
•
vloºit ke svému pro lu tag
•
vloºit sv·j vlastní vodoznak
•
vytvo°it n¥kolik kategorií v galerii a p°idat do r·zných kategorií fotogra e
•
nastavit náv²t¥vní knihu tak, aby do ní mohli p°ispívat pouze p°ihlá²ení uºivatelé
•
zakázat ur£itému uºivateli vkládání vzkaz· do náv²t¥vní knihy
•
smazat vzkaz od uºivatele
•
odpov¥d¥t na vzkaz uºivatele
•
p°ihlásit fotogra i do hitparády
5.1.2.3 Zadání pro osobu 3 •
zaloºit ú£et náv²t¥vníka (náv²t¥vník se nachází na úvodní webové stránce aplikace)
•
zm¥nit si heslo k ú£tu
•
p°idat si um¥lce do svých oblíbených
•
p°idat k um¥lci tag
•
ohlásit závadný obsah um¥lce
•
vyhledat um¥lce pomocí tagu nebo jména
•
vyhledat nejlépe ohodnoceného um¥lce
•
hlasovat v hitparád¥ a u díla zanechat vzkaz
5.2
Výsledky testování
Testování prob¥hlo relativn¥ rychle bez v¥t²ích problém·. Na druhou stranu bylo toto testování d·leºité pro malé detaily, ze kterých byly testované osoby zmatené. Prvním problémem po zaloºení ú£tu um¥lce bylo to, ºe testovaná osoba neznala adresu administra£ního rozhraní. V e-mailu sice tato adresa byla napsána, ale testovaná osoba si tento e-mail ne£etla a pouze si zkopírovala uºivatelské jméno a heslo. Po p°ihlá²ení tato osoba nev¥d¥la, jak p°ejít do administrace a zm¥nit si heslo. Nakonec si v²imla odkazu v pravém rohu a do administrace se jiº dostala.
38
KAPITOLA 5.
TESTOVÁNÍ
Dal²ím problémem bylo nahrání díla. Testovaná osoba toto dílo pouze vybrala ze souborového systému a následn¥ odeslala formulá°. Povinné poloºky jsou ozna£eny hv¥zdi£kou, ale testovaná osoba nevyplnila titulek obrázku, proto se dílo neuloºilo. Jelikoº se chybová hlá²ka vypsala £ern¥ pod polí£ko titulku, testovaná osoba nezaznamenala tuto chybu a p°e²la na výpis ve²kerých obrázk· a tam ºádné nové dílo nebylo. Z toho d·vodu jsem upravil barvu chybových hlá²ek na syt¥ £ervenou barvu, která je velmi výrazná. Problém také nastal p°i vytvá°ení webové stránky, kdy testovaná osoba p°esn¥ nev¥d¥la, jak formátovat text. Toto bylo zavin¥no neznalostí Texy! syntaxe. Testovaná osoba si na tuto syntaxi v pr·b¥hu vytvá°ení webové stránky zvykla, jelikoº pouºívala tla£ítko náhledu, které okamºit¥ zobrazí, jak bude výstupní text vypadat. Problémem s nalezením n¥kterých poloºek menu byl nejspí² zavin¥n pojmenováním. Z toho d·vodu jsem u n¥kterých podmenu zvolil del²í a výstiºn¥j²í pojmenování. P°i nastavení náv²t¥vní knihy testovaná osoba nejprve hledala toto nastavení p°ímo v záloºce náv²t¥vní knihy, ale na druhý pokus uº p°ímo zvolila záloºku nastavení, kde toto nastavení na²la. S ú£tem náv²t¥vníka testovaná osoba ºádné problémy nem¥la. P°i p°idávání tagu k um¥lci trvalo del²í dobu nalezení odkazu na p°idání tagu, ale to není tak velká chyba, protoºe podobné odkazy by nem¥ly být p°íli² výrazné.
Kapitola 6
Záv¥r Implementací aplikace jsem splnil cíle, které jsem si ur£il. Povedlo se mi implementovat ve²keré d·leºité £ásti aplikace a tím vytvo°it pouºitelnou aplikaci pro prezentaci um¥leckých d¥l. Uºivatel, který si zaloºí v aplikaci pro l, je schopen vytvo°it si celkovou webovou prezentaci s minimální zku²eností s podobnými aplikacemi. S frameworkem Zend jsem byl velice spokojen, jelikoº mi tento framework u²et°il velké mnoºství £asu a p°i implementaci jsem m¥l moºnost pouºít p°edp°ipravené funkce, které tento framework nabízí. Tento framework se stále vyvíjí, a proto je vhodný i pro dal²í roz²í°ení aplikace. P°i implementaci jsem se rozhodl pro pouºití webového editoru Texyla, který je z mého pohledu velice jednoduchý. Na základ¥ testování bych ale v budoucnu volil jiný editor, který by byl z uºivatelského hlediska více p°ív¥tiv¥j²í a výsledný formát by se zobrazoval p°ímo tak, jak jsou na to uºivatelé zvyklí z jiných editor·. P°i dal²ím vývoji této aplikace bych se zam¥°il na jazykové mutace, aby aplikace byla p°ístupná pro ²ir²í spole£nost. Dal²ím roz²í°ením webové stránky um¥lce by mohly být mini aplikace, které jsou vid¥t nap°íklad u blogovacích systém·. P°íkladem by mohl být nap°íklad pr·zkum ve°ejného mín¥ní, který by si vytvá°el um¥lec. Dal²í mini aplikací by mohlo být rozesílání e-mail· od um¥lce svým fanou²k·m, fanou²ci by se p°ihla²ovali k odebírání novinek. V budoucnu by také bylo vhodné zam¥°it se více na ú£et p°ihlá²eného náv²t¥vníka, aby bylo více d·vod· si tento ú£et vytvo°it. Uºivatelé by mohli p°ipojit pár informací o sob¥, vloºit pro lovou fotogra i nebo jiné informace.
39
40
KAPITOLA 6.
ZÁV
R
Literatura [1] G. Couzin and J. Grappone. SEO - Optimalizace pro vyhledáva£e. Zoner Press, Nové Sady 18, Brno, CZ, 2007. [2] J. Vrána. Ochrana proti spamu.
http://php.vrana.cz/ochrana-formularu-proti-spamu.php. [3] Blogovací systémy.
http://cs.wikipedia.org/wiki/Blog. [4] Creative commons licence.
http://cs.wikipedia.org/wiki/Creative_Commons. [5] Online wysiwyg editory.
http://www.nabito.net/online-wysiwyg-editory/. [6] Wysiwyg editory.
http://cs.wikipedia.org/wiki/WYSIWYG.
41
42
LITERATURA
P°íloha A
Instala£ní a uºivatelská p°íru£ka A.1
Instala£ní p°íru£ka
Apache HTTPD server, na kterém má být aplikace spu²t¥na, musí podporovat mod_rewrite a musí na n¥m být nastaven SMTP server. Dále musí být dostupná knihovna PDO MySQL. Pro fungování plánování úloh je t°eba sm¥rovat poºadavek p°es HTTP protokol na skript /cron.php. V souboru /application/con g.ini je t°eba nastavit p°ístup do databáze a to poloºky db.con g.host, db.con g.username, db.con g.password a db.con g.dbname. Struktura SQL databáze je na p°iloºeném CD. V souboru /application/con g.ini je t°eba také nastavit poloºku settings.baseUrl, která je p°ednastavena na "/artsite". Toto nastavení znamená, ºe aplikace je umíst¥na ve sloºce artsite, která je v ko°enovém adresá°i pro dokumenty.
A.2
Uºivatelská p°íru£ka
Pro vytvo°ení ú£tu sta£í následovat odkaz na webových stránkách aplikace. Je t°eba vyplnit jméno a e-mailovou adresu, na kterou budou zaslány p°ístupové údaje. Po p°ihlá²ení k ú£tu um¥lce lze editovat webové stránky p°es webové rozhraní na adrese /admin. V tomto rozhraní jsou záloºky náv²t¥vní kniha, galerie, novinky, správa obsahu, nastavení a oblíbení. Kaºdá tato záloºka má své vlastní záloºky. Záloºky jsou pojmenovány podle funkcí. Jestliºe je webová stránka s nastavením sloºit¥j²í, je zde polí£ko s nápov¥dou. Jestliºe je vytvo°en ú£et p°ihlá²eného náv²t¥vníka, pak má své nastavení na adrese /home. Na této webové stránce má moºnost zm¥nit si heslo nebo kontrolovat aktivitu svých oblíbených um¥lc·. Vytvá°ení ú£t· náv²t¥vník· a um¥lc· probíhá pomocí webového rozhraní. P°ístupové údaje k ú£tu jsou po zaloºení ú£tu poslány na zadaný e-mail. Ú£et pro administrátora systému se vkládá p°ímo do databáze. Je t°eba nastavit uºivatelské jméno a heslo, které musí být p°evedeno pomocí funkce sha1. P°ístup do administra£ního rozhraní je na adrese /artistadmin.
43
44
PÍLOHA A.
INSTALANÍ A UIVATELSKÁ PÍRUKA
P°íloha B
Obsah p°iloºeného CD Na p°iloºeném CD jsou 2 adresá°e s aplikací. Adresá° artblog-linux slouºí pro spu²t¥ní aplikace na linuxovém souborovém systému a adresá° artblog-windows slouºí pro spu²t¥ní aplikace na souborovém systému, který vyuºívá Windows. V adresá°i text jsou ve²keré soubory a obrázky týkající se textové £ásti mé práce. V souboru sql.txt je SQL p°íkaz pro vytvo°ení databáze.
45
