}w!"#$%&'()+,-./012345<ya

Transcription

1 MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY }w!"#$%&'()+,-./012345<ya Analýza a návrh webové stránky hudební skupiny BAKALÁŘSKÁ PRÁCE Roman Studený Brno, 2009

2 Prehlásenie Prehlasujem, že táto bakalářská práce je mojím pôvodným autorským dielom, ktoré som vypracoval samostatne. Všetky zdroje, pramene a literatúru, ktoré som pri vypracovaní používal alebo z nich čerpal, v práci riadne citujem s uvedením úplného odkazu na príslušný zdroj. Vedúci práce: prof. RNDr. Jiří Hřebíček, CSc. ii

3 Pod akovanie Ďakujem vedúcemu práce prof. RNDr. Jiří Hřebíčkovi, CSc., za vedenie mojej bakalárskej práce a užitočné rady, Lukášovi Antalovovi za vždy pohotovú pomoc pri tvorbe praktickej časti a tiež mojej rodine a priatel ke za morálnu podporu v t ažkých chvíl ach. iii

4 Zhrnutie Bakalárska práca analyzuje existujúce webové stránky hudobných skupín, ktoré zahŕňa v analýze český hudobných portálov známych interpretov. Zároveň prehl adne informuje o potrebách hudobných skupín čo sa týka ich prezentovania sa v sieti Internet. Na základe dosiahnutých výsledkov tejto analýzy, požiadaviek hudobnej skupiny a efektívne spracovaným návrhom, so zameraním na prístupnost webu, implementuje tieto poznatky pri tvorbe dynamických webových stránok hudobnej skupiny 3mimo. Celý projekt webových stránok využíva možnosti a princípy Web 2.0 a Web 3.0 a zároveň sa opiera o vlastnosti prístupného webu. Tieto vlastnosti sa uplatňujú či už zo strany návštevníka (fanúšika skupiny) webovej stránky, alebo jednoduchosti správy obsahu webovej stránky administrátorom (členom hudobnej skupiny). iv

5 Kl účové slová Web 2.0, Web 3.0, XHTML, PHP, MySQL, RSS v

6 Obsah 1 Úvod Charakistika Web 2.0 a Web Web Web Charakteristické prvky Long tail Mashup Multimediálne weby Perpetual Beta RSS Sociálne siete Tag Cloud Wiki systémy Analýza webových stránok Prvky a spôsob porovnávania Zhrnutie a hodnotenie Návrh webových stránok 3mimo Prípady užitia systému Dátový model Prístupnost webu Implementácia návrhu Použité technológie Apache CSS MySQL PHP WAMP HTML/XHTML Flash JavaScript Webové portály a knižnice AddThis FCKeditor Thickbox YouTube Grafický rozhranie a funkčné rozdelenie Správa a údržba webu Špecifické požiadavky na systém Koncepcia systému Ovládanie systému vi

7 5.3.4 Budúce rozšírenie systému Testovanie systému a použitý software Záver Bibliografia A Tabul ky porovnávaných skupín a interpretov B SQL dotaz na vytvorenie dátovej štruktúry C Priložené CD médium vii

8 Kapitola 1 Úvod Žijeme v 21. Storočí a pojem WWW - World Wide Web je známy pre široké vrstvy l udí od predškolákov po tých najstarších. Je tomu tak aj v moderných krajinách Európy, ktorými sú určite aj Slovenská a Česká republika. Každý sa chce prezentovat, každý chce byt na webe. A nie je tomu inak ani na svetovej či domácej hudobnej scéne. Časy, ked sa informácie o hudobných skupinách získavali len vel mi t ažko z rôznych hudobných časopisov, vylepovali sa plagáty, vystrihovali články a skladby sa nahrávali z rádií na kazety sú dávno preč. Dnešné hudobné webové stránky využívajú najmodernejšie dostupné technológie na tvorbu webových stránok. V mojej práci sa snažím o dosiahnutie dostupného, užívatel sky príjemného a administrátorsky jednoduchého webového rozhrania, ktoré by spĺňalo všetky požiadavky začínajúcej, alebo aj úspešnej hudobnej skupiny. Hlavným ciel om tejto práce je predovšetkým vytvorit užívatel sky atraktívny, dizajnovo moderný a čo najviac prístupný webový portál, ktorý bude možné v budúcnosti jednoducho rozširovat a spravovat. Analýza českých hudobných webov bola aplikovaná na vzorku ôsmych webových stránok, medzi ktorými sú väčšinou poprední českí hudobní interpreti a skupiny. Medzi porovnávané prvky patrila z vel kej časti prístupnost a kontrola validácie podl a štandardov konzorcia W3C, ale tiež z hl adiska multimediálnych prvkov. Na tvorbu stránok boli použité dnes vel mi rozšírené technológie webových stránok a to konkrétne webový server Apache, skriptovací a programovací jazyk PHP, SQL relačný databázový server MySQL, kaskádové štýly CSS, v menšej miere skriptovací a programovací jazyk JavaScript a technológia Flash. V dnešnej dobe sa určite vel a hovorí, ale aj deje okolo sociálnych webových portáloch. Preto nesmieme zabúdat ani na užívatel ov týchto portálov a umožnit im odkazovat sa a zdiel at vytvorené stránky pomocou integrovaných bookmarkingových služieb a služieb na zdiel anie odkazov ako je napríklad v tejto práci použitá služba AddThis. 1

9 Kapitola 2 Charakistika Web 2.0 a Web Web 2.0 Pojem Web 2.0 [3] vel a odborníkov považuje za neopodstatnený a prikladá mu reklamný charakter. Pritom zmeny odohrávajúce sa v dnešnom internete pokladajú za akúsi prirodzenú a postupnú evolúciu, či vývoj webu. Čo by vlastne mal predstavovat Web 2.0 môže pekne demonštrovat Obrázok 2.1. Obrázok 2.1: Tag Cloud - Web 2.0 (zdroj: ) Ako prvý kto sa pokúsil objasnit tento vývoj a definoval výraz Web 2.0 bol Tim O Reilly [2]. Tento výraz bol povodne určený ako názov konferencie v roku Neskôr v roku 2005 O Reilly napísal obsiahli článok What Is Web 2.0 : Design Patterns and Business Models for the Next Generation of Software. V tomto obsiahlom článku O Reilly pdefinuje rôzne charaktery a špecifiká Webu 2.0. V skratke sa pokúsil v stručnej definícií vyjadrit čo to vlastne Web 2.0 je: Web 2.0 je revolúcia podnikania v počítačovom priemysle spôsobená presunom k chápania webu ako platformy a pokus porozumiet pravidlám vedúcim k úspechu na tejto novej platforme. Kl účovým medzi týmito pravidlami je toto: tvorte aplikácie, ktoré budú vd aka siet ovému efektu s pribúdajúcim počtom užívatel ov stále lepšie. (Čo som inde nazval - zapriahnutím kolektívnej inteligencie). V praxi sa však často výraz Web 2.0 často používa ako pomenovanie niečoho, čo vlastne vôbec nevyjadruje a len málokedy, ak vôbec, nájdeme webové stránky, ktoré by splňovali 2

10 2.2. WEB 3.0 všetky kritéria kladené na Web Web 3.0 Sémantický web, vízia Tima Brnersa-Leeho, je často skloňovaný výraz ako náhrada za Web 3.0. Podl a tejto vízie stránky Web 3.0 už nebudú holou zbierkou odstavcov, obrázkov a odkazov, ale budú vel mi jednoducho strojovo čitatel né a úplne zmenia spôsob akým v dnešnej dobe s webom zachádzame. Už dnes však existujú dve vel mi dôležité technológie pre rozvoj sémantického webu. Prvý z nich je značkovací jazyk (XML extensible Markup Language) [16], ktorý dovol uje každému vytvorit svoje vlastné značky(tags). Týmito značkami môžeme jednoducho popísat časti textu a celkovo l ubovol ný obsah ktorý je medzi týmito značkami uzatvorený. Nasledujúci príklad demonštruje zápis adresy. <adresa> <ulica>česká 1</ulica> <mesto>brno</mesto> <psč>602 00</psč> </adresa> Ďalšou technológiou je štandard konzorcia W3C, RDF (Resource Description Framework) [16], ktorý špecifikuje model pre reprezentáciu dát. Je to základ na spracovanie metadát, ktorý vyjadruje sémantiku reprezentujúcu súborom trojíc tzv. elementárnu vetu. Táto veta tvorená štruktúrou podmet prísudok predmet prirodzeným spôsobom popisuje väčšinu strojovo spracovaných údajov. Nasledujúci príklad demonštruje priradenie dátumu vytvorenia 16. August 1999 stránke pomocou štandardu RDF. <rdf:rdf xmlns:rdf=" xmlns:exterms=" <rdf:description rdf:about=" <exterms:creation-date>august 16, 1999</exterms:creation-date> </rdf:description> </rdf:rdf> Nakol ko vízia sémantického webu je stále len hudba budúcnosti, už dnes existujú prvky, ktoré sú strojovo l ahko spracovatel né. Takýmito prvkami sú práve mikroformáty [1], pomocou ktorých môžeme l ahko doplnit do HTML ( Oddiel ) kódu webových stránok atribúty, ktoré sú rovnako l ahko čitatel né pre človeka a aj stroj.dobrým príkladom využitia mikroformátov je používanie tzv. hcard pre zápis adresy. Ďalej môžeme spomenút hcalendar pre označovanie udalostí, hresume pre písanie životopisu a iné. Avšak len s t ažkost ou možno dnes presne definovat, čo všetko budú vlastne zahŕňajú prvky tejto d alšej etapy vývoja Internetu. 3

11 2.3. CHARAKTERISTICKÉ PRVKY 2.3 Charakteristické prvky Medzi charakteristické prvky nových etáp vývoja webu akými sú Web 2.0 a Web 3.0 nesporne nesú webové stránky zamerané na multimédiá akými sú napríklad fotografia (Flickr), video (YouTube), alebo audio (Last.fm). V zdiel aní informácií a l udského poznania dominujú wiki systémy. Facebook, My Space a iné sociálne zamerané siete sú dnes vo vel kom rozmachu. Internet mení ekonomiku a vzniká fenomén Long tail. Rozsiahle využitie kvalitných webových aplikácií a ich API v podaní Mashupov, oblaky odkazov Tag cloud, neustály vývoj Perpetual Beta aplikácií a získavanie noviniek pomocou RSS, to všetko je dnešný internet Long tail Výraz The Long Tail [8] je ekonomického charakteru, ktorý zaviedol a špecifikoval Chris Anderson vo svojej knihe The Long Tail: Why the Future of Business Is Sellinf Less of More, ktorú vydal v roku 2004 a poukazuje v nej ako Internet mení a ovplyvňuje svetovú ekonomiku. Táto zmena sa týka zmeny záujmu od globálnych masových produktov k okrajovým produktom určeným pre menšinu. Internet umožňuje predajcom poskytovat ovel a väčšiu škálu produktov ako klasický predaj a pritom zahrnút do neho aj produkty o ktoré je malý záujem. Príkladom tohto modelu predaja je napríklad americká spoločnost Amazon. Tento ekonomický model je charakteristický svojim tvarom dlhého chvosta, v ktorom je definované, že približne 80% obratu tvorí asi len 20% všetkých ponúkaných produktov. Nasledujúci Obrázok 2.2 demonštruje toto rozdelenie. Obrázok 2.2: Long Tail 4

12 2.3. CHARAKTERISTICKÉ PRVKY Mashup Mashupy [9] sú jedným z velkých fenoménov webu 2.0. Pri ich stručnej charakteristike, nazvali by sme ich aplikáciami, ktoré kombinujú výstupy z viacerých dátových zdrojov do jednej novej cetrálnej aplikácie, kde sú tieto dáta zobrazené. Tieto mashupy je možné kombinovat z viacerých možných zdrojov. Medzi najpopulárnejšie mashupy patria hlavne tie, ktoré sú postavené na mapách a k ich popularite ešte vel mi prispieva skutočnost, že prepojenie s inými systémami je jednoduché. Ako najpopulárnejšie sa javí Google Maps, a jeho API ktoré pracuje pomocou JavaScriptu ( Oddiel ), a pomocou tohto užívatel ského rozhrania a mnoho podrobných on-line návodov je možné jednoducho využívat množstvo utilít na manipuláciu s mapami celého sveta. Pri pohl ade na český internet mapový portál rovnako smeruje k rovnakému ciel u poskytovat kvalitné užívatel ské rozhranie (API), avšak kvalita a podpora nie je ani zd aleka taká vel ká. Ako príklad mashupu podporujúce API mapových portálov existuje projekt wikimapia 1. Jedná sa o geografickú wikipédiu, ktorá zobrazuje na mapách jednotlivé turistické, alebo inak zaujímavé lokality. K týmto lokalitám prirad uje fotografie a popisy miest z wikipédie Multimediálne weby Bezpochyby nástupom novej etapy vývoja Internetu je aj príchod multimediálnych súborov a multimédií ako takých do tejto celosvetovej siete. Už dávno to nie je len súbor statických stránok plných textu a strohých informácií. Multimédiá na internete by sa dali stručne rozdelit na fotografie, video, zahŕňajúce on-line televízie a hudbu. Kvalitných webových portálov zaoberajúcich sa zdiel aním, archivovaním, alebo rôznymi formami prezentácie fotografií je nespočetne vel a. Vyzdvihnút určite musíme asi najznámejší portál na zdiel anie a on-line organizáciu fotografií Flickr 2. Pre umelecky založených užívatel ov všetkých druhov je to napríklad tiež známy sociálne založený portál deviantart 3. Ked sa povie video na internete automaticky to v mnohých l ud och evokuje výraz You- Tube. Pritom prvé video bolo na YouTube 4 nahraté 23. Apríla v roku Odvtedy sa tento portál stal jednou z najnavštevovanejších stránok na svete hned vedl a Yahoo! 5, či Googla 6. Tento portál poskytuje vel mi jednoduché zdiel anie videí na webových stránkach, či osobných blogoch, čo využívajú mnohý programátori webových stránok. Samozrejmost ou sú tiež živé on-line vysielania a prepracované archívy starších relácií takmer všetkých kvalitnejších televíznych staníc, čo mnohých l udí úplne oslobodzuje od sledovania televízie ako takej. 1. < 2. < 3. < 4. < 5. < 6. < 5

13 2.3. CHARAKTERISTICKÉ PRVKY Podobná situácia on-line produkcie je tiež zastúpená vo svete rádia, pričom vzniká stále viac a viac čisto internetových rádií. Ako revolučný sa však zdá byt portál Last.fm 7, ktorý spočiatku fungoval ako externý plugin do mp3 prehrávačov, ktorý odosielal a zhromažd oval informácie o tom, čo práve počúvate, spracovával tieto štatistiky a poskytoval ich priatel om na webovom portáli. Dnes sa dajú počúvat tieto skladby on-line pomocou flashovej rádio aplikácie, pričom princíp zostáva rovnaký Perpetual Beta Termín perpetual beta [4] bol definovaný už v článku pána O Reillyho o webe 2.0 ako softvér, ktorý nikdy neprekročí fázu vývoja. PPočas života takejto aplikácie prebiehajú v každej iterácií drobné zmeny. Jedná sa v podstate o nedokončený výrobok, pri ktorom nikdy nie je presne určené, ktorým smerom budú d alšie kroky smerovat. Tento spôsob vývoja svojich aplikácií s obl ubou využívajú vel ké spoločnosti akými sú napríklad Google RSS RSS (Really Simple Syndication) [12] je formát na združovanie a publikovanie noviniek a obsahu, akými sú novinky stránok a to hlavne vel kých spravodajských serverov. Ale nie je to len o novinkách, naopak všetko čo možno rozdelit do jednotlivých položiek možno zhromažd ovat a publikovat cez RSS. Programy nazývané RSS-aware, ktoré sú obl úbené v Blogových komunitách je možno využit na to, aby ste boli vždy včas informovaný o novom príspevku na vašom obl úbenom Blogu. Názov RSS je zastrešujúci hned pre niekol ko verzií. Pôvodná verzia RSS 0.90 bola navrhnutá firmou Netscape ako vzor pre budovanie webových portálov združujúcich titulky z hlavných spravodajských serverov. Verziu 0.91 už prebrala spoločnost Userland Software, ktorá ju využila ako základ svoje weblogingový výrobky a iných online apklikácií. Táto spoločnost vyvinula d alšie verzie 0.92, 0.93, 094 a nakoniec 2.0, všetky na základe štandardu XML. Avšak verziu 1.0 vyvíjala nekomerčná združenie RSS-DEV Working Group na základe štandardu RDF Sociálne siete Fenoménom dnešnej doby sú určíte sociálne siete, o čom jasne hovoria čísla a štatistiky. Momentálne prežíva obrovský boom sociálna siet, ktorá nesie názov Facebook. Práve tento portál má podl a štatistík 8 viac ako 200 miliónov registrovaných užívatel ov a s toho asi 100 miliónov, ktorý sa prihlásia do tejto siete aspoň raz za deň. Okrem Facebooku samozrejme existujú nespočetné množstvá obdobných sietí. Medzi najznámejšie patria napríklad Hi5, Classmates Online, Unister Linkedln, Reunion, či MySpace, ktorý bol spustený už v roku 2003 a stal sa priekopníkom, medzi sociálnymi siet ami. 7. < 8. < 6

14 2.3. CHARAKTERISTICKÉ PRVKY Každá sociálna siet je väčšinou niečím špecifická, aby si dokázala získat a zaujat určitú skupinu užívatel ov. Napríklad portál Last.fm, ktorý l udí spája hudbou, Facebook ohromným množstvom aplikácií, statusov, či jednoduchost ou a prehladnost ou. Unister združuje priatel ov a bývalých spolužiakov. Okrem celosvetových sociálnych sietí, môžeme poukázat aj na domáce, české siete, akými sú napríklad Spolužáci.cz, Libimseti.cz, alebo Lídé.cz. Vd aka kvalitným jazykovým modifikáciám a podporám tých celosvetových je prerazit vo vel kej miere takmer nemožne. Ako rozšírená forma odkazovania na zaujímavosti a odkazov medzi l ud mi využívajúce sociálne siete vznikol takzvaný Social Bookmarking, pomocou ktorého jednoducho pošlete svojmu známemu odkaz na webovú stránku, ktorá vás zaujala. Existuje vel ké množstvo Social Bookmarking nástrojov napríklad AddThis, alebo Add to Any, ktoré určite užívatelia sociálnych sietí ocenia na každej webovej stránke Tag Cloud V doslovnom preklade mrak odkazov nazývaný Tag Cloud [13] môže byt využívaný efektívne a poskytnút skutočný prínos pre webovú stránku. Prvý krát sa tento mrak objavil na portály pre zdiel anie fotografií Flickr a bol vytvorený jeho spoluzakladatel om a dizajnérom Stewartom Butterfieldom. Tieto mraky boli spopularizované medzi inými tiež portálmi akými sú delicious 9 či Technorati 10. Tag to vlastné združená skupina odkazov, ktoré sa môžu v mnohom líšit. Mnohé odlišnosti sú len typografického charakteru, akými sú farba, druh zvoleného písma a pod. Väčší dôraz a podstata sa kladie na ich spracovanie, umiestnenie a zvolenie tých správnych odkazov. Tieto mraky oblakov môžu rovnako vo vel kej miere zasiahnut do SEO optimalizácie, ktorá je dost zameraná na vel ké množstvá odkazov. Grafický príklad mraku oblakov, ktorý reprezentuje termíny vzt ahujúce sa k Web 2.0 zobrazuje Obrázok Wiki systémy História wiki [15] systémov začala s WikiWikiWebom, čo bola prvá stránka nazývaná wiki. Jej tvorcom bol Ward Cunningham, ktorý bol sčasti tiež inšpirovaný programom HyperCard od spoločnosti Apple, tento systém začal vyvýjat v roku 1994 a úspešne ho spustil v roku Názov Wiki vznikol na základe rýchleho kyvadlového autobusu s názvom Wiki Wiki Shuttle, ktorý premáva na medzinárodnom letisku v Honolulu. V havajskom jazyku znamená slovo wiki rýchlo. Začiatkom nového milénia sa stále viac wiki systémy rozšírili v rôznych spoločnostiach ako vel mi užitočný nástroj na zdiel anie informácií a pri spolupráci na projektoch. Dnes niektoré spoločnosti používajú tento systém ako svoju jedinú firemnú siet, alebo tiež ako náhradu za statické intranety. Rovnako ich niektoré školy a univerzity využívajú pri výučbe. 9. < 10. < 7

15 2.3. CHARAKTERISTICKÉ PRVKY Hlavná charakteristika týchto systémov je jednoduchost zdiel ania informácií. Vo väčšine systémov sa prispievatel nemusí vôbec registrovat aby mohol vytvárat, upravovat a zdiel at články s ostatnými. Vo wiki systémoch môže byt stránka reprezentovaná rôznymi spôsobmi. Štandardný HTML ( Oddiel ) kód, ktorý je prezentovaný pomocou prehliadača, a užívatel ovi je povolené editovat ho. Iným sofistikovanejším spôsobom editácie je možnost využit zjednodušený značkovací jazyk známy ako wikitext, ktorého syntax môže byt v rôznych systémoch odlišná. Avšak najmodernejšie systémy používajú tzv. WY- SIWYG(What You See Is What You Get Čo vidíš to dostaneš) editáciu, ktorá zobrazuje príspevok v identickej forme v akej bude prezentovaný po jeho uložení. Hlavná výhoda vol ne editovatel ných wiki systémov je zároveň aj ich najväčšia nevýhoda a to hlavne z hl adiska aktuálnosti a správnosti informácií. Vel mi jednoducho môžu byt zneužité ako zdroj šírenia zavádzajúcich informácií, preto mnohí nepovažujú tento zdroj tvorený spoluprácou jednotlivcov bez jednej centrálnej autority za plnohodnotný a smerodajný. 8

16 Kapitola 3 Analýza webových stránok Základom analýzy je podrobné preskúmanie trhu a konkurencie. Nazbierané prvky je potrebné dôkladne preskúmat a ohodnotit a pokúsit sa v tomto projekte chybám, ktoré sú výsledkom analýzy vyvarovat. Analýza stručne stanovuje hodnotiace kritéria ktoré sú následné vyhodnotené. 3.1 Prvky a spôsob porovnávania Ako objekt porovnávania bolo zvolených osem českých hudobných webov. Výber skupín, okrem skupiny -123min., bol smerovaný k popredným českým umelcom, často tiež oceňovaných na českej hudobnej scéne. Konkrétne to boli webové stránky skupín Kabát, Lucie, Olympic, Wohnout a už spomínaný -123min. Zo sólových interpretov Karel Gott, Lucie Bílá a Michal David. Pri týchto weboch boli objektom hodnotenia dopredu určené kritéria, ktoré boli zamerané hlavne na kompatibilitu a prístupnost. Vzhl adom k tomu bola kontrolovaná validácia použitého značkovacieho jazyka a kaskádového štýlu. Ako d alšími hodnotiacim prvkami prístupnosti boli zvolené prístupnost stránky bez dostupného prehrávača Flash (Oddiel 5.1.7) animácií, čitatel nost pri vypnutom automatickom načítaní obrázkov v danom internetovom prehliadači, funkčnost s vypnutou podporou JavaScriptu (Oddiel 5.1.8) a kompatibilita s prehliadačom Microsoft Internet Explorer verzie 6. Okrem vyššie uvedených kritérií bola tiež zist ované zastúpenie multimédií. Konkrétne dostupnost fotogalérií či video galérií a použitých technológií pri ich prezentovaní. Ako posledné boli porovnávané možnosti nakupovat on-line a spôsob takéhoto nákupu, jazykové variácie stránok, či možnosti odoberania noviniek na om, alebo pomocou RSS (Oddiel 2.3.5). Tiež bola zist ovaná prítomnost automaticky spustenej hudby pri načítaní stránok. 3.2 Zhrnutie a hodnotenie Bezchybnou validáciou značkovacieho jazyka neprešla ani jedna porovnávaná stránka a validácia kaskádových štýlov len dve, čo sa dá pokladat za vel mi neuspokojivý výsledok. Validácia je vel mi vhodná pri bezproblémovom zobrazovaní webu na rôznych platformách. Takmer všetky webové stránky boli plne funkčné pri neprítomnosti Flash(Oddiel 5.1.7) prehrávača. Výnimkou boli webové stránky Lucie Bílé, ktoré sú plne závislé na tejto tech- 9

17 3.2. ZHRNUTIE A HODNOTENIE nológií. Rovnako stránky Karla Gotta pri tomto obmedzení poskytujú len obmedzené informácie. Ako najnevhodnejšie sa s tohto hl adiska javia stránky skupiny Wohnout, ktorých jediná navigácia je bez Flash prehrávača nefunkčná. Podl a pravidiel o prístupnosti webu, by mali byt obsah stránok čitatel ný aj po zakázaní obrázkov prehliadačom. Weby troch skupín toto pravidla nedodržujú. Funkčnost bez povoleného skriptovacieho jazyka JavaScript(Oddiel 5.1.8) je pri troch weboch plne obmedzujúca a pri jednom je obmedzená funkčnost fotogalérie. Pri všetkých porovnávaných weboch obstála kompatibilita a bezchybné zobrazovanie stránok v už dnes minimálne používanom prehliadači Internet Explorer verzie 6, ktorý je však stále základnou súčast ou inštalácie systému Microsoft Windows XP. Tento výsledok sa dá opodstatnit tým, že väčšina porovnávaných webových stránok vzniklo pred niekol kými rokmi. Ako najpopulárnejšie sa zdajú byt fotogalérie založené na skriptovacom jazyku JavaScriptm, ktorých je pät. Zo zvyšných sú to dva weby používajúce na zobrazovanie fotografií HTML (Oddiel 5.1.6) a jeden web Flash technológiu. Videá koncertov a videoklipov v podobe video galérií boli len v dvoch prípadoch riešené na úkor vlastného webového priestoru. Jeden web odkazuje na stránku YouTube (Oddiel ), d alší na stránky svojho vydavatel a. V štyroch zvyšných prípadoch video nie je video v žiadnej forme na webe uložené ani nie je na neho odkazované. Vzhl adom na malé množstvá predaja CD nosičov a iných predmetov sú na väčšine webov len jednoduché objednávkové formuláre, alebo odkazy na prepracované on-line obchody svojich vydavatel ov. Každá hudobná skupina by mala byt schopná nejakým spôsobom poskytovat svojím fanúšikom čerstvé informácie o novinkách, koncertoch a ostatných zmenách. Túto možnost dnes ponúkajú stále viac obl úbené RSS čítačky, ktoré dokážu jednoducho spracovávat nové informácie poskytované určitým RSS kanálom. S testovanej skupiny však len jeden web obsahoval RSS kanál pre odoberanie noviniek a len tri zo všetkých ponúkali možnost odoberanie noviniek pomocou tzv. pridaním sa do mailing listu, pomocou ktorého sú vám na zadanú ovú adresu doručované novinky o dianí v skupine. Ako neadekvátny a vo vel a prípadoch rušivý element sa považuje hudba na pozadí webovej stránky, ktorá začne hrat bez upozornenia. Táto vlastnost bola pozorovaná v troch prípadoch a v jednom prípade nebolo možné hudbu pozadia vôbec stlmit alebo vypnút (neprítomná navigácia pre ovládanie prehrávanej hudby), čo sa dá pokladat za vysoko nevyhovujúce. Na základe tejto analýzy je vhodné vyvarovat sa vyššie spomenutých chýb a hlavným ciel om je vytvorit čo najprístupnejší web pre čo najširšiu možnú škálu užívatel ov. Názornejšie výsledky analýzy obsahujú tabul ky, ktoré obsahuje príloha [Tabul ky porovnávaných skupín a interpretov]. 10

18 Kapitola 4 Návrh webových stránok 3mimo 4.1 Prípady užitia systému Dôležitou súčast ou návrhu každého projektu je zber požiadavkou a stanovenie prípadov užitia systém. Požiadavky tvoria zo zásady funkcie, ktoré budú kladené na celý systém. Tieto funkcie sú väčšinou špecifické pre každého aktéra. Graficky sa tieto prípady použitia systému vyjadrujú pomocou UseCase diagramov, ktorý pre tento projek znázorňuje Obrázok 4.1. UseCase diagramy však reprezentujú len najzákladnejší prehl ad prípadov použitia, alebo sád prípadov použitia systému. Každý spôsob (prípad) použitia opisuje práve jeden spôsob využitia systému z hl adiska jedného používatel a (aktéra). Súbor všetkých prípadov použitia potom reprezentuje všetky používatel ské funkcie, ktoré budúci systém ponúkne. Aktéri v takýchto diagramoch môžu dedit funkcie, čo tvorí tento diagram prehl adnejší. V tomto projekte vystupujú traja základný aktéri, ktorými sú: nezaregistrovaný užívatel, registrovaný užívatel a administrátor. Pre lepšiu demonštráciu vystupovania jednotlivých aktérov je pridaný aktér užívatel, ktorý disponuje všetkými základnými prípadmi užitia systému a teda všetci ostatní aktéri dedia jeho vlastnosti. 4.2 Dátový model Štruktúra ukladania dát a ich vzt ahy v databáze sú graficky prezentované pomocou entitne relačného modelu (ERD) a zobrazuje ich Obrázok 4.2. V projekte sú dáta rozdelené do šestnástich tabuliek. Tabul ka album obsahuje informácie o albumoch pridaných do diskografie skupiny a priradené skladby sú uložené v tabul ke song. V tabul ke article sú uložené informácie o ponúkaných produktoch z on-line obchodu, pričom doplnkové informácie akými sú číslo účtu pri predaji a kontaktný mail sú uložené v tabul ke setting. Informácie o registrovaných užívatel och a administrátoroch, ktorí sa líšia len v hodnote jedného atribútu, sú uložené v tabul ke authuser. Informácie o koncertoch sú obsiahnuté v tabul ke concert. Príspevky do guestbooku sú uložené v tabul ke forum. Fotogalérie sú uložené v tabul ke gallery a fyzické cesty a popisy k fotkám v tabul ke photo. Ankety sú tvorené otázkou, ktorá je vždy uložená v tabul ke poll_answer a niekol kými odpoved ami priradenými k ankete, ktoré sú uložené v tabul ke poll_question. Do tabul ky ip sa ukladajú IP adresy užívatel ov, ktorí už hlasovali do aktuálnej ankety. Novinky okolo diania skupiny sa ukladajú do tabul ky news. Kontaktné informácie, história 11

19 4.3. PRÍSTUPNOSŤ WEBU Obrázok 4.1: Diagram prípadov užitia (Use case diagram) skupiny a profily jednotlivých členov skupiny sa ukladajú do tabul ky page. URL adresy k YouTube videám a komentáre k nim sú uložené v tabul ke video. Mrak odkazov a počet kliknutí na určité odkazy sú uložené v tabul ke tagcloud. Skript na vytvorenie tejto dátovej štruktúry obsahuje príloha [SQL dotaz na vytvorenie dátovej štruktúry]. 4.3 Prístupnost webu Pri zhodnotení analýzy je zjavné, že všetky testované a porovnávané webové stránky mali jednu spoločnú vlastnost, zahŕňali minimum z pravidiel pre prístupný web. Tento projekt naopak snaží skombinovat, čo najviac vlastností prístupného webu a zároveň zostat graficky atraktívny pre užívatel ov. Ako zdroj informácií pre tvorbu prístupného webu bol zvolený návod vytvorený pá- 12

20 4.3. PRÍSTUPNOSŤ WEBU Obrázok 4.2: Entitne relačný diagram (ERD) nom Davidom Špinarom, ktorý vychádzal pri tvorbe z pravidiel tvorby prístupného webu pre účely novely Zákona č. 365/2000 zb., o informačných systémoch verejnej správy. Tieto pravidlá tiež vychádzajú z pravidiel odporúčaných konzorciom W3C, Web Content Accessibility Guidelines 1.0 (WCAG 1.0).Nasleduje vlastnosti prístupného webe sú obsiahnuté v tomto projekte: Každý netextový prvok, ktorý ma nejaký informačný význam, má uvedenú tiež svoju netextovú alternatívu. Nesprávne definovaný prvok <img src="pic/rss.gif" style="border:none;" /> Správne definovaný prvok 13

21 4.3. PRÍSTUPNOSŤ WEBU <img src="pic/rss.gif" style="border:none;" alt="rss - new s" /> Informácie zobrazované pomocou skriptov, objektov, appletov, kaskádových štýlov obrázkov a iných doplnkov na strane užívatel a sú dostupné aj bez ktoréhokol vek s týchto doplnkov. Prístupnost webu je takmer plnohodnotná aj pri vypnutej podpore JavaScriptu (Oddiel 5.1.8). Obmedzujúcim prvkom zostávajú len možnosti používania služby AddThis (Oddiel ) na zdiel anie odkazov na sociálnych siet ach. Hlavná grafická navigácia zostáva funkčná rovnako aj po zakázaní jazyka JavaScript v internetovom prehliadači. Na dosiahnutie funkčnosti boli použité kaskádové štýly. Menu preto nie je tvorené dvoma obrázkami ako by tomu bolo pri použití jazyk JavaScript, ale celé menu tvoria položky menu v zozname. <ul id="menu"> <li class="news"><a href="news">news</a></li> <li class="discography"><a href="discography">discography</a></li>... </ul> A len jeden grafický súbor, ktorého pozície sú definované v príslušnom súbore menu.css (Oddiel 5.1.2). Okrem hlavnej horizontálnej navigácie je v l avej časti webových stránok druhé menu rozšírené o niektoré navigačné prvky, preto je navigácia plne dostupná aj po zakázaní zobrazovania obrázkov. Obrázok 4.3: Grafické menu pomocou css Na stránke nie sú použité žiadne ovládacie prvky, ktoré využívajú technológiu Flash (Oddiel 5.1.7), alebo skriptovací jazyk JavaScript. Informácie zobrazované farbou sú dostupné aj bez farebného rozlíšenia. Farby popredia a pozadia sú dostatočne kontrastné. Na pozadí je vzor, ktorý však zásadne neznižuje čitatel nost. Kontrasty textu a pozadia sú podl a metodiky W3C 1 dostatočné a použité sú farby # (pozadie), #DCDCDC (text) a #FFCC66 (odkazy). Predpisy určujúce vel kost písma nepoužívajú absolútne jednotky. V kaskádových štýloch sú vel kosti písma definované vždy percentuálne. 1. < 14

22 4.3. PRÍSTUPNOSŤ WEBU Predpisy určujúce typ písma obsahujú všeobecnú rodinu písiem. Stránky používajú definovanú rodinu písiem Trebuchet MS, Helvetica, sans-serif. Obsah webovej stránky sa mení, iba v prípade, že užívatel aktivuje nejaký ovládací prvok. Na webovej stránke nič nebliká rýchlejšie ako raz za sekundu. Obmedzujúcim faktorom môže byt animácia Flash. Webová stránka nezakazuje zobrazovanie scrollbarov stránok a rámov. Obsah ani kód webovej stránky nepredpokladá ani nevyžaduje konkrétny spôsob použitia ani konkrétne vstupné či ovládacie zariadenia. Navigačné a obsahové informácie sú na webovej stránke zretel ne oddelené. Navigácia je zrozumitel ná a je konzistentná na všetkých webových stránkach. Stránky odkazujú na prehl adnú mapu webu (sitemap). Obsah ani kód webovej stránky nepredpokladá, že užívatel už navštívil inú stránku webu. Označenie každého odkazu výstižne popisuje jeho ciel aj bez okolitého kontextu a zároveň odkazy s rovnakým názvom majú rovnaký ciel. Odkazy obsahujú atribút title. Kód webových stránok odpovedá jednej zo zverejnených finálnych špecifikácií jazyka HTML, alebo XHTML (Oddiel 5.1.6). Neobsahuje syntaktické chyby, ktoré je správca webových stránok schopný odstránit. Celé stránky zodpovedajú validácií podl a štandardu HTML 1.0 Transitional a validáciu je možné overit kliknutím na validačný odkaz umiestnený v l avej časti stránky pod menu. Rovnakým spôsobom je možné overit validáciu webu podl a štandardu CSS 2.1 (Oddiel 5.1.2). V metaznačkách je uvedené použitie konkrétnej znaková sady dokumentu. V tomto projekte je využitá znaková sada UTF-8. 15

23 Kapitola 5 Implementácia návrhu 5.1 Použité technológie Nakol ko sa jedná o dynamické webové stránky, na zobrazovanie v internetovom prehliadači je použitý rozšírený hypertextový značkovací jazyk XHTML ( Oddiel ). Grafické a zobrazovacie prvky sú štandardne definované v kaskádových štýloch CSS ( Oddiel 5.1.2). Celý projekt je postavený na dnes už osvedčenom modeli, ktorý je tvorený trojicou webový server Apache ( Oddiel ), skriptovací programovací jazyk PHP ( Oddiel ) a databázový systém MySQL ( Oddiel ). Táto trojica nezávisle vytvorených programov je dostupná v rôznych softwarových balíkov. Pre tento projekt bol zvolený balík WAMP ( Oddiel ), ktorý plne postačuje na vývoj dynamických webových stránok na lokálnom web servery Apache Názov apache vznikol z anglického spojenia A patchy server (záplatovaný server) a v znaku nesie indiánsky symbol vtáčieho pera. Apache HTTP server pôsobí ako testovací webový server použitý pre tento projekt pričom jeho hlavnou úlohou nie je len spracovávanie požiadavkou, ktoré užívatelia odosielajú prostredníctvom svojich webových prehliadačoch, ale tiež zobrazovanie výsledkov pripravených pomocou kódu umiestneného vo vyžiadaných súboroch. Apache je vel mi výkonný nástroj a je schopný splnit takmer všetky požiadavky pre správcov webu. Podl a serveru Netcraft 1 sa servery apache zastupujú takmer polovičný podiel aktívnych webových serverov, čo predstavuje viac ako 106 miliónov. Táto popularita je nepochybne ovplyvňovaná flexibilitou, výkonom a samozrejme aj cenou. Tento server je vol ne dostupný s Open source licenciou. Okrem bežného použitia je možné Apache využit aj ako server pre podnikový intranet. Pri tvorbe tohto projektu bola použitá stabilná verzia Apache 2.2.8, ktorá je obsiahnutá v balíku WAMP CSS Cascading Style Sheets (CSS) - kaskádové štýly vznikli zásluhou súčasného šéfa technologického oddelení v spoločnosti Opera Software pána Hakon Wium Lieho a Berta Bosa ktorý 1. < 16

24 5.1. POUŽITÉ TECHNOLÓGIE uviedli CCS v roku CSS je vlastne akási kolekcia metód určených pre grafickú úpravu webových stránok. Kaskádové sa im hovorí pretože sa na seba môžu vrstvit definície štýlov, ale vždy platí iba tá posledná definovaná metóda. Hlavná výhoda použitia je, že prezentačné informácie celých webových stránok môžu byt uložené na jednom mieste a zároveň môžu byt jednoducho upravované bez potreby zasiahnut do zdrojového kódu jednotlivých stránok. Zlá kompatibilita medzi škálou webových prehliadačov je bezpochyby najväčšia nevýhoda. Hlavne pri stále používanom prehliadači Microsoft Internet Explorer verzie 6 je nutné pre správne zobrazenie implementovat rôzne triky na dosiahnutie konzistentného formátu. Konzorcium W3C uviedla prvú špecifikáciu v decembri V roku 1998 sa CSS 2.0 stala W3C Recommndation a ako posledná verzia CSS 2.1, ktorá bola použitá pri tvorbe tohto projektu, bola vydaná v apríli V súčasnosti je vo vývoji verzia 3.0, ktorá prinesie vel a zaujímavých zmien MySQL MySQL je svetovo najpopulárnejší open source relačný databázový systém typu DBMS (database managment system), ktorý má viac ako 100 miliónov stiahnutých distribúcií. Vd aka vynikajúcej rýchlosti, spol ahlivosti a jednoduchosti použitia sa MySQL stal preferovanou vol bou pre web, Web 2.0, Saas, ISV, či telekomunikačné spoločnosti, pretože odstraňuje hlavné problémy spojené s časovými prestojmi, údržbou a správou moderných on-line aplikácií. Dnes používajú tento databázový systém mnohé najväčšie a najrýchlejšie sa rozrastajúce organizácie, akými sú napríklad Yahoo!, Google, YouTube, Nokia, Adobe a Wikipedia. V súčasnosti MySQL vlastní, vyvíja a podporuje spoločnost Sun Microsystems, jeden z najväčších prispievatel ov do Open source. Pôvodne však tento databázový software vznikol a bol vyvíjaný vo Švédsku dvoma Švédmi a Fínom (David Axmark, Allan Larsson a Michael Widenius), ktorí spolu pracovali od roku V tomto projekte bola pri testovaní využívaná verzia MySQL b, ktorá je súčast ou balíka WAMP. Ako typ úložiska dát bol zvolený systém InnoDB, ktorý má na rozdiel od najpoužívanejšieho systému MyISAM podporu transakcií. SQL dotaz na vytvorenie potrebnej dátovej štruktúry obsahuje príloha [SQL dotaz na vytvorenie dátovej štruktúry] PHP PHP[11] je vol ne šíritel ný a vel mi populárny Open source skriptovací programovací jazyk. Tento jazyk umožňuje procedurálne, alebo objektovo orientované programovanie. Je tiež vel mi vhodný na programovanie aplikácií, ktoré prebiehajú na strane servera. Takýto model sa nazýva model klient server. Jeho hlavné využitie je uplatnené pri tvorbe interaktívnych dynamických webových stránok. Ako konkurencia pre tento jazyk je ASP, ktorý je vyvinutý spoločnost ou Microsoft. Skript spracováva požiadavku klienta na serveri, na rozdiel napríklad od jazyka JavaSc- 17

25 5.1. POUŽITÉ TECHNOLÓGIE ript, ktorý sa spracuje na strane klienta. Skripty spracované na strane servera sú vhodnejšie pri tvorbe bezpečných aplikácií. História PHP siaha do roku 1994, ked Rasmus Lerdorf pre osobnú potrebu navrhol niekol ko skriptov v jazyku Pearl, neskôr prepísaných do jazyka C. Pôvodný názov bol teda utvorený skratkou z Personal Home Page Tools. Dnes je táto skratka tvorená rekurzívnym akronymom PHP: Hypertext Preprocessor. Prvé verzie vychádzali spojením s programom Froms Interpreter a názvom PHP/FI. Avšak v roku 1997 izraelský vývojári Andi Gutmanson a Zeev Suraski, pri vyvíjaní e-commerce aplikácie, vytvorili verziu PHP 3.0. Neskôr založili spoločnost Zend Technologies, ktorá sa podiel a na vývoji tohto jazyka až do dnes. Jadro bolo niekol kokrát vylepšované a dnešná verzia PHP 5.0 je hlavne objektovo orientovaná. V tomto projekte bola pri písaní skriptov využitá[14][10] aktuálna verzia PHP 5.2.6, ktorá je súčast ou balíka WAMP WAMP Aplikácia WAMP je balík nezávisle vytvorených programov, ktorých interakciou je možné získat efektívny nástroj na tvorbu dynamického webu na platforme Windows. Názov je odvodený od slova Windows a základných komponentov tohto balíka, ktorými sú Apache, MySQL a PHP (alebo tiež Pearl alebo Python). Medzi d alšie užitočne nástroje, ktoré môžu byt zahrnuté, je napríklad phpmyadmin, ktorý poskytuje grafické rozhranie pre databázový systém MySQL. Medzi ekvivalenty na rôznych platformách existujú balíky LAMP (Linux), MAMP (Mac), SAMP (Solaris) a FAMP (FreeBSD). Pre účely tohto projektu bol použitý balík WampServer Version HTML/XHTML XHTML (odvodené za anglického názvu Extensible HyperText Markup Language - rozšírený hypertexový značkovací jazyk) je značkovací jazyk, ktorý je predovšetkým určený na vytváranie a následné prezentovanie štruktúry webových stránok. XHTML je nasledovníkom jazyka HTML [6], ktorý využíva a súčasne aj je dokumentom XML. Prvý krát bol jazyk HTML definovaný a vytvorený pánom Tim Berners-Leem v roku Táto verzia obsahovala len základné funkcie akými boli vkladat do textu obrázky, hypertextové odkazy a vytvárat niekol ko logických úrovní a niekol ko druhov zvýraznení textu. Táto prvá verzia sa označila ako HTML 0.9. Avšak požiadavky užívatel ov webu sa zvyšovali a tvorcovia prehliadačov začali pridávat do HTML nové prvky. Tak vzniklo niekol ko verzií HTML jazyka, ktorá skončila definovaním súčasnej verzie HTML Po ukončení tejto vývojovej verzie vznikla XTHML, ktorá sa používa dodnes na vytváranie web stránok. Jazyk používa tagy na definovanie a rozdelovanie textov, nadpisov odstavcov a pod. V podstate existujú tri verzií tohto jazyka. XHTML 1.0 Strict tvorí čisto štrukturálne značkovanie, ktoré neobsahuje značky spojené s formátovaním vzhl adu. XHTML 1.0 Transiti- 18

26 5.1. POUŽITÉ TECHNOLÓGIE onal povol uje atribúty pre formátovanie textu a odkazov v elementu body a niektoré d alšie atribúty. XHTML 1.0 Frameset sa uplatní v prípade použitia rámcov pre rozdelenie okna prehliadača na dve alebo viac častí. Web stránky vytvárame v jazyku XHTML 1.0 Strict, nakol ko je najvhodnejšou verziou pre formátovanie dokumentu bez dodatočných prvkov, ako napríklad grafických. Na zobrazenie grafického vzhl adu používame jazyk kaskádových štýlov CSS. V tomto projekte je použitá verzia XHTML 1.0 Transitional doplnená už vyššie spomínanými kaskádovými štýlmi Flash Technológia Flash [5] je dnes určite určité synonymum vtedy, ked chceme nejakým spôsobom pomenovat animácie na internete. Jednoducho povedané to je vlastne skupina snímkou, ktoré sa medzi sebou vymieňajú podobne ako pri animovaných GIF obrázkoch. Hlavný rozdiel je v tom, že Flash využíva vektorovú grafiku, na rozdiel od rastrovej. Vektorová grafika je vd aka menším pamät ovým požiadavkám vhodná pre použitie na internete. Ako problém, ktorý sa však skôr týkal minulosti, sú väčšie požiadavky na procesor pri vykresl ovaní. Počiatky tejto technológie siahajú do roku 1994, kedy Flash nebol taký, aký ho poznáme dnes. Pôvodne sa jednalo o program SmartSketch, ktorý nebol založený na C++, ale na Jave, od ktorej sa neskôr ustúpilo, nakol ko plne nevyhovovala požiadavkám. Neskôr s nástupom plug-in modulov bol SmartSketch premenovaný na FutureSplash Animator, ktorý bol v roku 1996 kúpený spoločnost ou Macromedia a vznikol Macromedia Flash 1.0. V roku 2005 spoločnost Adobe odkúpila Macromediu s celým ich portfóliom produktov a dnes existuje Flash vo verzií 10.0, ktorý vystupuje na trhu pod názvom Adobe Flash CS4. Počas vývoja prešla táto technológia množstvom inovácií a dnes je považovaná ako vel mi silný nastroj pri tvorbe webu. Obsiahnutý je tiež vlastný skriptovací jazyk, ktorého názov je ActionScript, pomocou ktorého je práca s databázami, či XML súbormi vel mi jednoduchá. Táto technológia a jej používanie má nesporne mnoho výhod, ale zároveň existuje jej najväčšie obmedzenie, akým je nutnost mat nainštalovaný prehrávač Flash animácií. Preto využitie Flashu nie je najvhodnejšou vol bou pri tvorbe prístupného webu. Medzi výhody však nesporne patrí možnost jednoducho využívat video a hudobné prvky, čo prezentuje webové stránky ako užívatel sky vel mi prít ažlivé. Použitie tejto technológie v tomto projekte sa uplatňuje v minimálne. Hlavné vyžitie je pri prezentácií video súborov pomocou webového portálu YouTube a rovnako v hornej grafickej časti stránky (Obrázok 5.1) JavaScript Tento multiplatformový, objektovo orientovaný skriptovací jazyk vznikol v roku 1995 ako doplnok k jazykom HTML a Java. Autorom toho jazyka, ktorého pôvodný názov bol LiveScript je Brendan Erich [7], ktorý pracoval pre spoločnost Netscape. Tento jazyk bol v začiat- 19

27 5.1. POUŽITÉ TECHNOLÓGIE koch jeho vzniku odsudzovaný pre jeho bezpečnostné nedostatky, malý počet výkonných vývojových nástrojov, ladiacich nástrojov a nezmysluplných chybových správ. JavaScript sa obvykle spúšt a až po načítaní webovej stránky na strane klienta, na rozdiel od programovacích jazykov akými sú PHP, či ASP, ktoré sú spúšt ané na strane servera pred stiahnutím webovej stránky užívatel om. JavaScript umožňuje tvorbu vel mi efektívnych grafických navigácií, prvkov, či webových aplikácií vykonávaných na strane užívatel a. Vo vel kej miere, a rovnako aj v tomto projekte, sa využíva tento skriptovací jazyk pri validácií dát vyplnených do formulárov ešte pred odoslaním na stranu servera. Väčšina internetových prehliadačov však umožňuje podporu tohto jazyka vypnút, preto musí byt validácia dát overovaná aj na strane servera, aby sa zabránilo nežiaducim bezpečnostným dieram, alebo situáciám. Možnosti JavaScriptu sú v tomto projekte využité tiež pri editácií obsahu pomocou editora FCKeditor Webové portály a knižnice Určite je jeden z hlavných prvokov Web 2.0 a Web 3.0 budovat efektívne, užívatel sky jednoduché stránky, využívat a prepájat kvalitné dostupné portály a knižnice hotových kódov. Môžeme si položit otázku Načo vytvárat vlastné rozhranie pre prácu s video súbormi na webovej stránke?. Existujú mnohé portály na profesionálnej úrovni, ktoré sa zaoberajú videom na Internete. Navyše poskytujú zadarmo využit ich služby na vlastných webových stránkach, alebo blogoch. Rovnako je k dispozícií množstvo JavaScript knižníc na prehliadanie obrázkov vo vygenerovaných galeriách pomocou ktorých dosiahneme profesionálnych výsledkov za vel mi krátky čas AddThis AddThis 2 patrí v súčasnosti medzi najpoužívanejší a najrozšírenejší servis na takzvaný social bookmarking. Jednoducho pomáha webovým stránkam a blogom rozširovat ich obsah na webe tým, že každý návštevník môže zdiel at obsah stránky na svojej obl úbenej sociálnej destinácií. Táto služba vznikla v roku 2006 a v súčasnosti je použitá viac ako 20 miliárd krát mesačne po celom svete vo vyše dvadsiatich jazykoch. V projekte je možnost zdiel at obsah všetkých webových stránok pomocou tejto služby, pričom funkčné tlačidlo je umiestnené v pravej časti webových stránok FCKeditor FFCKeditor je jeden z takzvaných WYSIWYG (What You See Is What You Get Čo vidíš to dostaneš) editorov, ktoré sú súčast ou každého kvalitného systému na správu obsahu webových stránok. Celý editor je postavený na výkonnom a rozšíritel nom aplikačnom programovacom rozhraní (API), ktoré využíva skriptovací jazyk JavaScript, ktorého podpora je 2. < 20

28 5.2. GRAFICKÝ ROZHRANIE A FUNKČNÉ ROZDELENIE nutnou podmienkou pre prácu s FCKeditorom. Prednost ou tohto editora je hlavne schopnost generovat XHTML kód, ktorý nemá problémy s validáciou podl a štandardov konzorcia W3C, čo je prínosom pre tvorbu prístupného webu. Medzi d alšie nesporné výhodou patrí jednoduchá inštalácia a integrácia do projektu, alebo efektívna práca s obrázkami v prepracovanom prostredí. Výhody použitia tohto editora sú v tomto projekte uplatnené predovšetkým pri správe obsahu stránok administrátorom, ale tiež umožňuje registrovaným užívatel om efektívnejšie prispievat do guestbooku (knihy návštev) Thickbox ThickBox je webové užívatel ské rozhranie (UI User Interface) zobrazované v dialógovom okne, ktorého funkcie sú napísané v jazyku JavaScript s využitím možností Open source knižnice jquery 3. Hlavnou funkciou je zobrazovanie jednotlivých obrázkov, viacerých obrázkov, vloženého obsahu, iframe obsah alebo obsah doručený prostredníctvom technológie AJAX. V tomto projekte bolo vyššie spomenuté rozhranie použité na efektívnejšie zobrazovanie obrázkov v sekcií fotogalérie YouTube Spoločnost YouTube bola založená v roku 2005 a takmer okamžite sa stala jednou z najpolulárnejších portálov na sledovanie videí on-line. Chad Hurley a Steve Chen sa stali prvými členmi manažérskeho týmu YouTube a v súčasnosti pracujú ako generálny riaditel a technologický riaditel spoločnosti. Necelý rok po založení, v roku 2006, bola spoločnost kúpená a doteraz patrí spoločnosti Google Inc. YouTube umožňuje užívatel om jednoducho nahrávat a zdiel at videoklipy naprieč celým Internetom prostredníctvom webových stránok, mobilných zariadení, blogov a ov. Taktiež je jednoduché zdiel at tieto videá na vlastných webových stránkach, či blogoch, čo je využité aj v tomto projekte v sekcií video galéria. 5.2 Grafický rozhranie a funkčné rozdelenie Dizajn webových stránok je určite prvá vec, ktorá musí užívatel a pri vstupe na stránku zaujat. Preto je potrebné vytvorit zaujímavý dizajn, ktorý dokáže niečím prekvapit, a zároveň neodradit užívatel a od nasledujúcej návštevy. Mal by byt prehl adný a ovládacie prvky by mali byt vždy dostupné natol ko, aby sa návštevník vždy vedel zorientovat a nájst informácie, ktoré potrebuje. Použitý grafický dizajn stránok vznikol skombinovaním jednoduchého návrhu hudobnej skupiny, ktorý boli spojený s funkčnými požiadavkami prístupnosti webu do čo najvyš- 3. < 21

29 5.2. GRAFICKÝ ROZHRANIE A FUNK C NÉ ROZDELENIE šej možnej miery. Horná c ast webových stránok je priestor urc ený pre kreativitu skupiny, alebo dizajnéra. Celé stránky sa funkc ne delia na šest c astí, pric om každá táto c ast je špecificky definovaná. Graficky toto rozdelenie zobrazuje Obrázok 5.1. Obrázok 5.1: Grafické znázornenie hlavných c astí stránky Horná grafická c ast vymedzuje miesto pre kreativitu skupiny a jej obsahovat môže tvorit grafickú koláž, alebo Flash animáciu (Oddiel 5.1.7). Táto c ast môže zostat rovnaká pri zobrazení každej stránky webu, alebo môže byt v každej sekcii rozdielna. Rozhodnutie sa necháva na administrátorovi stránky. Grafické menu je c ast urc ená pre základnú (nie úplnú) navigáciu na webovom portáli. Funkc nost tejto navigácie je z hl adiska dostupnosti obmedzená na povolenú funkciu nac ítania obrázkov v internetovom prehliadac i. Bližšie o prístupnosti tejto c asti obsahuje Oddiel 4.3. L avá c ast je pri nac ítaní l ubovol nej stránky tvorená prihlasovacím formulárom a odkazom na registrac ný formulár. Po úspešnom prihlásení sa tento formulár zmenení na uvítaciu správu a obsahuje odkaz na odhlásenie práve prihláseného užívatel a. D alej l avá c ast webu obsahuje (úplnú) vertikálnu navigáciu do ktorá sa po prihlásení registrovaného užívatel a rozšíri o položku, ktorá odkazuje na nastavenia osobného profilu. Po prihlásení užívatel a, 22

30 5.3. SPRÁVA A ÚDRŽBA WEBU ktorý vystupuje ako administrátor sa navigácia rozšíri o položku ktorá odkazuje na správu registrovaných užívatel ov. Ako posledné sú v tejto časti umiestnené grafické ikony odkazujúce na validačné stránky značkovacieho jazyka XHTML (Oddiel 5.1.6) verzie 1.0 a kaskádových štýlov CSS (Oddiel 5.1.2) verzie 2.1. Hlavná čast je určená na predovšetkým na prezentáciu vlastného obsahu stránok. Ako prvý sa vždy zobrazí nadpis konkrétnej sekcie. V prípade, že je prihlásený administrátor sa zobrazia prvky na správu a editáciu obsahu webových stránok. Tieto prvky sú vždy zretel ne vyznačené v červenom rámčeku s označením ADMIN. Zvyšok tvorí obsah stránok, ktorý môže byt v prípade prihláseného administrátora doplnený editačnými ikonami. Pravá čast je priestor určený na doplnkové informácie. Ako prvá je tu situovaný grafický odkaz pre sociálne bookmarky a zdiel anie zaujímavých odkazov. Ako druhý prvok je to zoznam fotogalérií, ktorý ul ahčuje navigáciu medzi všetkými galériami (zobrazuje sa zoznam všetkých, okrem aktuálne otvorenej). Avšak tento prvok je zobrazený len v prípade, že sa užívatel nachádza na stránkach zobrazujúcich fotogalérie. V opačnom prípade nasleduje jednoduchá anketa. Ako posledný prvok pravej časti je mračno odkazov. Päta stránky obsahuje odkazy na RSS (Oddiel 2.3.5) kanály v podobe grafických ikon, autora realizovaného projektu, copyright a rok realizácie. 5.3 Správa a údržba webu V dnešnej dobre existuje množstvom kvalitných komerčných, ale aj nekomerčných (Open source) systémov na správu obsahu webových stránok (d alej len CMS - Content management system). Medzi najpopulárnejšie určite patria systémy ako sú Joomla!, CMS Made Simple, Drupal, WordPress a iné. Zložitost týchto systémom a ich modifikácie pre požiadavky tohto projektu by boli príliš náročné, preto vhodná cesta bola vytvorit vlastný na mieru vytvorený CMS, ktorý je zameraný predovšetkým na potreby hudobnej skupiny Špecifické požiadavky na systém Požiadavky na systém sú na rozdiel od bežných CMS špecifické v tom, že okrem jednoduchých a základných úkonov, ktorými sú pridávanie noviniek, správa registrovaných užívatel ov, osobného profilu, správa diskusného fóra (mazanie nevhodných príspevkov) a iných, systém vyžadoval radu špecifických úkonov administrácie. Tieto úkony, ktoré systém umožňuje, sú charakteristické pre hudobné skupiny: Vytvorenie albumu v diskografii hudobnej skupiny Pridanie a editácia skladby do albumu Pridanie a editácia textu skladby Pridanie a editácia audio súborov ukážky skladby a celej skladby Priradenie a editácia priradenia videoklipu ku skladbe 23

31 5.3. SPRÁVA A ÚDRŽBA WEBU Pridanie a editácia koncertu, alebo inej hudobne akcie (systém generuje RSS kanál) Pridanie a editácia videoklipu uloženého na portály YouTube Správa jednoduchého obchodu Koncepcia systému Hlavným ciel om bolo vytvorenie užívatel sky jednoduchého (user fiendly) systému, s ktorým sa bude budúcemu administrátorovi stránky jednoducho pracovat. Taktiež sa počíta s budúcim rozširovaním systému. Vstup do systému je realizovaný prihlásením administrátora. Ten vstupuje do systému cez prihlasovací formulár (umiestneným v prvej časti stránky), ktorým slúži tiež na prihlasovanie registrovaných užívatel ov. Väčšina systémov používa vlastné administrátorské rozhranie, ktoré funguje nezávisle od vlastnej webovej stránky. V tomto systéme je administrátorské prostredie identické s vlastnou webovou stránkou, avšak po úspešnom prihlásení a overení, že užívatel je administrátor (užívatel má nastavený atribút issuperuser na hodnotu yes ). Príklad porovnania webového prostredia bežnej webovej stránky a tej istej stránky po prihlásení administrátora demonštruje Obrázok Ovládanie systému Pri vytváraní systému bolo hlavným ciel om vytvorit čo najintuitívnejšie ovládanie. Preto ako demonštruje Obrázok 5.2 sa ovládacie prvky pre administrátora zobrazujú v hlavnej časti stránky vždy ako prvé pred samotným obsahom. Tieto prvky sú vždy uzatvorené červeným rámčekom s označeným ADMIN pomocou XHTML kódu (Oddiel 5.1.6). <fieldset> <legend>admin</legend>...ovládacie prvky a vysvetlivky... </fieldset> Existujúci obsah sa upravuje hlavne pomocou editačných ikon, ktoré sú vždy charakteristické pre danú sekciu, ktorá je upravovaná. Funkcie týchto ikon sú vždy jasne vysvetlené vo vyššie spomínanom červenom rámčeku. Samotný editačný proces webových stránok prebieha na samostatných webové stránky, ktoré obsahujú vždy iba HTML <input/>, <textarea></textarea> polia, ktorých obsah sa posiela systému na spracovanie. Pri zložitejších príspevkoch, v ktorých musí byt umožnené text formátovat je namiesto prvku <textarea></textarea> použitý editor FCKeditor. V prípade nevhodného vyplnenia, alebo nevyplnenia povinného údaju, je administrátor upozornený výstražnou správou, ktorá je generovaná pomocou príslušného validačného skriptu napísaného v jazyku JavaScript. Systém (konkrétny PHP skript) následne spracuje odoslané dáta a uloží ich do príslušnej tabul ky (alebo tabuliek) databázy MySQL. V prípade, že pri spracovaní sa vyskytnú chyby vypíše sa príslušná výnimka, alebo chybová správa. 24

32 5.3. SPRÁVA A ÚDRŽBA WEBU Budúce rozšírenie systému Pri práci na projekte webových stránok sa po analýze a návrhu stránok vždy nahromadí množstvo nápadov a vylepšení, ktoré prvá verzie projektu neobsiahne. Rovnako je pravdepodobné, že v prípade rozrastania sa hudobnej skupiny vznikne záujem o nové funkcie kladené na systém. Počas práce boli zhrnuté niektoré možnosti neskoršieho rozšírenia. Rozšírenie o d alšie jazykové verzie systému Pridanie on-line rádia, alebo prehrávača využívajúceho technológiu Flash Upravenie systému o d alšie vlastnosti prístupného webu Rozšírenie knihy návštev možnost ou reagovat na príspevky Vytvorenie pokročilejšieho on-line obchodu s využitím nákupného košíka, poprípade možnost platieb platobnými kartami Pokročilá SEO optimalizácia Testovanie systému a použitý software Systém bol testovaný sústavne počas práce ňom, v podstate je systém v životnom cykle perpetual beta. a teda sa stále vylepšoval a odstraňovali sa chyby. Systém bol testovaný priamo členmi hudobnej skupiny 3mimo, ktorý svojimi pripomienkami napomáhali a stále pomáhajú k vyladeniu a zlepšeniu celého systému. Celý systém bol vyvíjaný na dvoch počítačoch: Desktop s matičnou doskou Asus M2N-SLI Deluxe, procesror AMD Athlon 64 X , 4 GB RAM, Raid 5 (3x500GB), grafická karta ATI 2600 XT, operačný systém Microsoft Vista Business 32bit, SP1 Notebook Asus A6000, procesor AMD Sempron 2800+, 1,12 GB RAM, 40GB Hard Drive, integrovaná grafická karta SiS, operačný systém Microsoft Windows XP Professional 32bit, SP3 Na obidvoch počítačoch bol nainštalovaný rovnaký software: Balík WampServer, verzia 2.0, ktorý obsahuje Apache Server 2.2.8, PHP a My- SQL b (testovanie a vývoj systému) CorelDRAW X3, verzia 13.0 (grafický bávrh) PSPad, verzia (editácia PHP súborov) Visual Paradigm, verzia 6.0 (tvorba UseCase a ERD riagramov) 25

33 5.3. SPRÁVA A ÚDRŽBA WEBU Obrázok 5.2: Porovnanie webovej stránky a administrátorského prostredia 26