Informačný systém na správu webového obsahu (CMS) pre športové kluby

Transcription

1 Bankovní institut vysoká škola Praha zahraničná vysoká škola Banská Bystrica Katedra kvantitatívnych metód a informatiky Informačný systém na správu webového obsahu (CMS) pre športové kluby Information Content Management System (CMS) for sports clubs Diplomová práca Autor: Študijný odbor: Bc. Patrik Michnáč, MBA Informačné technológie a management Vedúci práce: doc. RNDr. Juraj Pančík, CSc. Banská Bystrica marec 2014

2 VYHLÁSENIE Vyhlasujem, ţe som diplomovú prácu vypracoval samostatne a s pouţitím uvedenej literatúry. Svojím podpisom potvrdzujem, ţe odovzdaná elektronická verzia práce je identická s jej tlačenou verziou a som oboznámený so skutočnosťou, ţe sa práca bude archivovať v kniţnici BIVŠ a ďalej bude sprístupnená tretím osobám prostredníctvom internej databázy elektronických vysokoškolských prác. V Martine dňa Patrik Michnáč

3 POĎAKOVANIE Ďakujem doc. RNDr. Jurajovi Pančíkovi, CSc., za ochotu, cenné rady a usmernenie pri písaní diplomovej práce. V Martine dňa

4 ANOTÁCIA MICHNÁČ, Patrik: Informačný systém na správu webového obsahu (CMS) pre športové kluby. [Diplomová práca]. Bankovní institut vysoká škola Praha, zahraničná vysoká škola Banská Bystrica. Katedra kvantitatívnych metód a informatiky. Vedúci práce: doc. RNDr. Juraj Pančík, CSc. Rok obhajoby: Počet strán: 103. Predmetom práce sú webové stránky športových klubov, na ktorých demonštrujem praktické pouţitie naprogramovaného CMS. Hlavným cieľom diplomovej práce je vytvorenie funkčného Content Management System (spravovanie obsahovej náplne webovej stránky), teda vytvorenie redakčného systému pre špecifický segment trhu športové organizácie, špeciálne hokejové kluby. Ďalším cieľom je vytvorenie základnej teoretickej rešerše z literárnych zdrojov, ktorá zahrnuje súčasné technológie pouţiteľné na tvorbu webových stránok, špeciálne na tvorbu Content Management System, teda na tvorbu redakčného systému. Kľúčové slová: CMS, webová aplikácia, webová stránka, PHP, JavaScript, MySQL. Ajax, webový server

5 ANNOTATION MICHNÁČ, Patrik: Information Content Management System (CMS) for sports clubs. [Diploma thesis]. Banking Institute Prague, Branch of the university Banská Bystrica. Department of Quantitative Methods and Computer Science. Supervisor: doc. RNDr. Juraj Pančík, CSc. Year of vindication: Number of pages: 103. The main objective of the thesis is to create a functional Content Management System. Creation of the content management system for a specific market segment sports organizations, especially hockey clubs. Another objective is to create a basic theoretical research from literature sources, including existing technologies useful for creating websites specifically for creating Content Management System, thus creating the content management system. Keywords: CMS, web application, web page, PHP, JavaScript, MySQL. Ajax, web server

6 OBSAH ANOTÁCIA... 4 ANNOTATION... 5 OBSAH... 6 PREDHOVOR... 9 ÚVOD VYMEDZENIE POJMOV PREDMETNEJ OBLASTI WWW, W3C HTML DHTML HTML XHTML HTTP, HTTPS CSS XML JAVASCRIPT jquery AJAX PHP APACHE MYSQL LAMP, WAMP COOKIES RSS CGI WEBOVÝ DIZAJN Twitter Bootstrap Framework FLASH Ruby on Rails MICROSOFT SILVERLIGHT WYSIWYG SEO OPTIMALIZÁCIA GOOGLE ADWORDS GOOGLE ANALYTICS SLEDOVANIE NÁVŠTEVNOSTI... 29

7 1.20 PAGERANK GOOGLE SITEMAPS NÁVRH ŠPORTOVÉHO CMS SEKCIE GRAFICKÉ VYHOTOVENIE MENU RÝCHLE INFORMÁCIE PIPELINE ZÁPASY ZAMRZNUTÉ OKAMIHY TOP ČLÁNKY A REKLAMNÉ BANNERY SEKCIA NAJNOVŠIE ČLÁNKY SEKCIA KONKRÉTNEHO ČLÁNKU SEKCIA KALENDÁR SEKCIA BLAHOŽELÁME SEKCIA VIDEÁ SEKCIA PREHĽAD SÚŤAŽÍ SZĽH (SLOVENSKÉHO ZVÄZU ĽADOVÉHO HOKEJA) SEKCIA LINKY SEKCIA ZABAVTE SA FLASH COUNTDOWN ROZPIS ZÁPASOV, NAJBLIŽŠÍ A POSLEDNÝ ZÁPAS AKTUALITY ANKETA ZÁPASY, AUTOBUS, PRENÁJOM TABUĽKY A ŠTATISTIKY REGISTRÁCIA A PRIHLÁSENIE UML CASE nástroje Diagram aktivít REKLAMNÉ BANNERY BURZA HRÁČI (ZOZNAM) NAPÍŠTE NÁM ROZPIS ĽADOVEJ PLOCHY ADMINISTRÁTORSKÁ ZÓNA Administrátorská zóna ako nevyhnutná súčasť každého CMS Intranet je rozdelený na štyri sekcie REALIZAČNÁ ČASŤ... 77

8 3.1 HISTÓRIA CMS SOFTVÉR POTREBNÝ NA PROGRAMOVANIE Editor HTML (PSPad) Total Commander ako FTP klient Adobe Fireworks CS OPEN SOURCE ALTERNATÍVA WordPress Joomla! DISKUSIA ZÁVER ZOZNAM BIBLIOGRAFICKÝCH ODKAZOV A POUŽITEJ LITERATÚRY ZOZNAM SKRATIEK ZOZNAM OBRÁZKOV ZOZNAM PRÍLOH PRÍLOHY... 92

9 PREDHOVOR Celá genéza vzniku sa historicky traduje pribliţne do obdobia spred ôsmich rokov. Martinský hokejový v tom čase klub získal nového generálneho manaţéra Jaroslava Laifera, ktorý povaţoval webovú stránku za veľkú prioritu a v rebríčku svojich manaţérskych hodnôt ju kládol na prvé miesto. Išlo mu o to, aby mal marketingový aj informačný nástroj na komunikáciu s verejnosťou. Pred ôsmimi rokmi nebol na trhu systém, ktorý by bol vhodný na tvorbu obsahu webovej stránky pouţívateľsky príjemným spôsobom, teda takým spôsobom, aby aj počítačový laik dokázal prispievať na webovú stránku článkami a informáciami. Preto ma pán Laifer oslovil, aby sme sa pokúsili o vytvorenie stránky, ktorá by bola špecifickou hokejovou stránkou s tým, ţe to nebude stránka statická, ale ţe bude spĺňať aj moţnosti redakčného systému, a teda to bude stránka, ktorej obsah bude moţné dynamicky a jednoducho meniť viacerými pouţívateľmi, ktorí nie sú počítačovými programátormi. Začiatky moţno charakterizovať tým, ţe sme krok za krokom začali vytvárať jednotlivé moduly (sekcie) na stránke na základe predchádzajúcej vzájomnej stručnej analýzy potrieb. Celý vývoj sa v podstate aţ do dnešného dňa neskončil, jednotlivé moduly sa dorábajú, rozširujú sa ich moţnosti alebo sa pridávajú nové. Vzhľadom na neustály vývoj a aj vzhľadom na to, ţe pán Laifer prešiel ako generálny manaţér viacerými klubmi, tento Content Management System (CMS) sa rozšíril aj na ostatné hokejové kluby. Pretoţe pán Laifer ako spoluautor tohto CMS si tento systém obľúbil, implementoval ho do všetkých hokejových klubov, v ktorých pôsobil ako generálny manaţér. V súčasnosti je generálnym manaţérom hokejového klubu ŠHK Piešťany, kde sme tento CMS takisto implementovali. Ja v ňom predstavujem programátora a pán Laifer človeka, ktorý mi poskytuje inšpirácie a nápady, ako tento CMS zlepšiť. Tento systém je vzhľadom na mnoţstvo modulov taký variabilný, ţe napokon bol pouţitý (o čom svedčia aj jednotlivé referencie) aj v kluboch, ktoré priamo s hokejom nesúvisia. Špecifické hokejové moduly moţno totiţ vypnúť, a tak vyuţiť CMS aj v iných, nehokejových kluboch, dokonca bol pouţitý aj pre domov dôchodcov v Sučanoch. Práve pre všetky tieto uvedené dôvody som sa rozhodol napísať diplomovú prácu o svojom CMS. Som na ňom priamo zainteresovaný, mám k nemu osobný vzťah, prešiel som celou históriou jeho vývoja a som v podstate jeho jediným autorom z hľadiska programovania.

10 S Patrikom Michnáčom som sa prvýkrát stretol počas svojho pôsobenia v sezóne 2004/2005, vtedy v prvoligovom klube MHC Martin, kde som pracoval ako generálny manažér. Naša spolupráca sa začala vytvorením evidenčných programov na zjednodušenie fungovania organizácie klubu, najmä programu Club s manager a programu na plánovanie obsadenosti ľadovej plochy. Po následnom vytvorení klubovej webovej stránky obidva uvedené programy dokázali komunikovať s webom a boli z nich použité dáta na plneniu aktuálnych údajov o príchodoch a odchodoch hráčov, ich štatistikách, obsadenosti ľadovej plochy, termínoch stretnutí či odchodoch klubového autobusu na jednotlivé akcie a pod. Toto všetko pri tvorbe webu predchádzala dôkladná analýza toho, na čo vlastne má klubová webová stránka slúžiť. Z môjho pohľadu to bolo predovšetkým v tom, aby sa všetky potrebné informácie o chode klubu preniesli on-line na web, a nahradili tak existenciu všakovakých násteniek na chodbách v útrobách zimného štadióna. Po mojom odchode do Piešťan, kde som začal pôsobiť takisto vo funkcii generálneho manažéra v ŠHK 37 Piešťany, sa mi podarilo presadiť tvorbu špeciálneho klubového webu, ktorý sme s Patrikom Michnáčom vytvorili na podobnej platforme, akú mal pôvodný web MHC. Z mojej strany to bola úloha konzultanta, zo strany Patrika Michnáča to bolo kompletné vytvorenie a nastavenie stránky pre potreby klubu a možnosť napĺňania jej obsahu pomocou intranetu viacerými administrátormi na rôznych úrovniach prístupov. V Piešťanoch si členovia klubu zvykli na to, že na stránke mali a majú vždy aktuálne informácie nielen o prvom tíme, ale aj o všetkých ostatných vekových kategóriách. Web nezabúda ani na marketingové využitie svojho obsahu propagáciou partnerov a zviditeľnenie ich aktivít v súčinnosti s klubom. Samotní fanúšikovia s obľubou navštevujú bohatú fotogalériu, ktorá je plnená najmä fotografiami dvorného klubového fotografa Ladislava Duračku; ten je dnes už neodmysliteľnou súčasťou dokumentovania klubového života. Klubový web na tejto platforme je udržiavaný denne pomocou spomenutého intranetu, ako aj podporných programov. Začiatočnou analýzou pri tvorbe webu sa predišlo potrebe zásadných zásahov do štruktúry webu a jeho inovácia za posledné obdobie je zúžená len na mimoriadne informačné požiadavky doby. V prípade potreby v rámci zmien dokáže Patrik Michnáč okamžite implementovať a zakomponovať naše klubové požiadavky.

11 Nadčasovosť tohto webu a jeho využívateľnosť zo strany spotrebiteľov predovšetkým fanúšikov a členov klubu dokazuje aj to, že vedenie hokejového klubu ŠHK 37 Piešťany po postupe do Tipsport Extraligy odmietlo byť súčasťou centrálneho webového extraligového systému, pretože jeho náplň a najmä spôsob ovládania nebol z jeho strany taký komfortný pre používateľa, ktorý sa chce aktívne podieľať na tvorbe a plnení stránky a nechce byť len pasívnym konzumentom toho, čo mu ponúkne centrálny administrátor. Nové trendy vo využívaní webu na tabletoch či smartfónoch nás nútia k tomu, aby sme aktívny klubový web v najbližšom čase prekomponovali a prepracovali. Hokejový klub má záujem o inováciu webu, aby bol stále tým, čím bol od začiatku svojej existencie informačnou tabuľou fungovania klubu a pomocníkom pri organizovaní jeho chodu. Verím, že aj v tejto etape inovácie nám bude veľkým pomocníkom autor súčasného webu Patrik Michnáč, ktorý už na novej platforme aktívne pracuje. Jaro Laifer GM ŠHK 37 Piešťany

12 ÚVOD Predmetom práce je webová stránka hokejového klubu HK 37 Piešťany, na ktorej demonštrujem praktické pouţitie naprogramovaného CMS. Hlavným cieľom diplomovej práce je vytvorenie funkčného Content Management System (spravovanie obsahovej náplne webovej stránky), teda vytvorenie redakčného systému pre špecifický segment trhu športové organizácie, špeciálne hokejové kluby. Ďalším cieľom je vytvorenie základnej teoretickej rešerše z literárnych zdrojov, ktorá zahrnuje súčasné technológie pouţiteľné na tvorbu webových stránok, špeciálne na tvorbu Content Management System, teda na tvorbu redakčného systému. Metodika práce bude zaloţená na vytvorení literárnej rešerše o teoretických základoch a opise jednotlivých technológií, o tom, akým spôsobom som analyticky riešil potrebu hokejového klubu a na základe tejto potreby, ako aj na základe rozhovorov s manaţmentom klubu som definoval jednotlivé moduly, ktoré som potom programoval. Ďalšou metódou je metóda porovnávania mojej stránky s inými, konkurenčnými stránkami. Štruktúra tejto diplomovej práce zahrnuje vymedzenie pojmov predmetnej oblasti, ktorá je v súčasnosti pouţiteľná na tvorbu redakčného systému. Okrem toho definujem jednotlivé technológie, ktoré som si na tvorbu redakčného systému zvolil. Práca vo svojej praktickej časti opisuje jednotlivé funkčné moduly redakčného systému a ich vyuţitie. V závere sú uvedené referencie klubov, ktoré Content Management System dnes vyuţívajú. Zároveň uvádzam svoju polemiku o tom, aké výhody a nevýhody tento systém má a aké sú trendy a predikcie jeho vývoja v budúcnosti. Pri písaní svoje práce som čerpal prevaţne z odbornej počítačovej literatúry a pri písaní teoretických častí aj z odborných internetových stránok.

13 1 VYMEDZENIE POJMOV PREDMETNEJ OBLASTI V tejto časti opisujem technológie vyuţívané v súčasnosti na tvorbu webových aplikácií. Vzhľadom na ich obrovské mnoţstvo a neuveriteľný vývoj v tejto oblasti som sa zameral na kľúčové technológie, ktoré práve dnes z hľadiska pouţívania, rozšírenosti a obľuby medzi programátormi prevaţujú. Táto časť by mala poskytnúť teoretický základ toho, čo v súčasnosti moţno vyuţiť pri programovaní redakčného systému. Objasňujem tu základné pojmy ako nevyhnutný predpoklad na pochopenie fungovania webových aplikácií, medzi ktoré patrí aj môj redakčný systém. 1.1 WWW, W3C WWW (World Wide Web, niekedy označovaný aj ako W3) navrhol v roku 1989 Tim Berners-Lee. Projekt je zaloţený na troch základných myšlienkach: navigácii pomocou hypertextu, podpore multimédií a integrácii uţ existujúcich sluţieb internetu 1. Podstatou hypertextu je, ţe ktorékoľvek slovo (resp. úsek textu) môţe byť označené ako odkaz na iný hypertextový dokument, v ktorom sú uvedené podrobnejšie informácie týkajúce sa tohto slova. Aktiváciou daného odkazu (nastavím sa naň šípkami a stlačím kláves Enter, resp. kliknem naň myšou) sa dostanem do vybratého dokumentu. V ňom sú spravidla ďalšie odkazy, takţe naznačený proces môţem reťaziť. Web je jedna zo sluţieb internetu, vďaka nej môţeme na svojich monitoroch vidieť textový a obrazový obsah internetu. Tento obsah je uloţený v špeciálnych počítačoch, tzv. serveroch, ku ktorým sa pripojujeme cez webový prehliadač pomocou WWW adresy. WWW je internetový protokol, ktorý nášmu počítaču hovorí, ţe budeme vyuţívať webovú sluţbu Internetu (DOMES, 2012 s. 26). 1.2 HTML HTML alebo HyperText Markup Language (hypertextový značkový jazyk) je značkový jazyk určený na vytváranie webových stránok a iných informácií zobraziteľných vo webovom 1 Internet je celosvetový systém prepojených počítačových sietí. 13

14 prehliadači (HOLČÍK, 2003 s. 6). Pouţíva sa teda na zobrazenie konečného grafického výstupu v prehliadači webových stránok. Pôvodne predstavoval veľmi zjednodušenú podmnoţinu jazyka SGML, ktorý sa pouţíva v organizáciách s komplexnými publikačnými poţiadavkami, ale neskôr sa stal samostatným štandardom (ISO/IEC 15445:2000). Špecifikáciu HTML udrţiava World Wide Web Consortium (W3C), čo je nezávislá organizácia, ktorej cieľom je ďalší rozvoj internetu. Aktuálna verzia je HTML 5.00, ale W3C plánuje nahradiť HTML jazykom XHTML 2, implementáciou jazyka XML 3, ktorá zjednoduší prácu prehliadačov aj tvorcov webových stránok. HTML umoţňuje vytvárať dokumenty obsahujúce text, hypertextové odkazy, multimediálny a iný obsah, formuláre, skripty a metainformácie prehliadateľné v tzv. webovom prehliadači. HTML je textový jazyk, umoţňuje čítanie a upravovanie priamo v textovom editore. Existujú aj špecializované programy na grafické WYSIWYG 4 editovanie stránok HTML, napríklad Macromedia Dreamweaver alebo Microsoft FrontPage. Ďalšou moţnosťou vytvárania stránky v jazyku HTML je dynamická (alebo aktívna) tvorba obsahu programom beţiacim na strane servera, napríklad PHP 5 alebo ASP, ktorý na poţiadanie vygeneruje stránku a pošle ju pouţívateľovi DHTML Dynamický HTML je protikladom statického HTML, ktorý sa raz načítal do stránky a potom sa s ním uţ nič nedalo robiť. Dynamický HTML umoţňuje obsah stránky meniť aj po načítaní. Klasicky sú to rôzne animácie, zmeny farieb, automatické písanie textu, zmeny animácie, zmeny textu, preblikávanie, vyskakovanie okien a pod. Je to rovnaké ako JavaScripty. Microsoft k JavaScriptu dopísal pár vecí a nazval to JScript. 2 Extensible Hypertext Markup Language rozšíriteľný hypertextový značkový jazyk. 3 extensible Markup Language značkovací jazyk podobný jazyku HTML, no oveľa flexibilnejší a voľnejší (ide o semištruktúrovanú databázu), umoţňuje vyuţívať a šíriť obsah článkov na internete. 4 What you see is what you get ( čo vidíš, to dostaneš ), označenie pre softvér, ktorý dokáţe vytvárať webové stránky vizuálnou formou. 5 Programovací jazyk pouţívaný pri tvorbe dynamických webových stránok. 14

15 1.2.2 HTML5 Väčšina pouţívateľov si neuvedomuje skutočnú silu nachádzajúcu sa v prehliadačoch, ktoré dnes pouţívajú. HTML5 poskytuje napr. moţnosť voľného kreslenia na stránke alebo sieťovú komunikáciu v reálnom čase a mnoho ďalších zlepšení. HTML5 je relatívne novým jazykom. Dosiaľ sa neustále vyvíja a predpokladá sa, ţe sa bude vyvíjať najbliţších 10 rokov (LUBBERS, 2011 s. 17). HTML5 je v informatike špecifikácia jazyka HTML, ktorá je dnes v štádiu návrhu organizácií W3C. Podľa súčasného plánu by mala byť konečná špecifikácia HTML 5.0 schválená do konca roku 2014 a verzia HTML 5.1 v roku HTML5 umoţňuje okrem iného prehrávať multimédiá priamo vo webovom prehliadači a vytvárať v ňom aplikácie, ktoré fungujú aj bez pripojenia k internetu XHTML XHTML je novšia norma jazyka HTML. HTML sa dlho nevyvíjal, zostal vo verzii HTML 4.01, kým nevznikol XHTML. To X na začiatku XHTML znamená extensible rozšíriteľný (v skutočnosti však ide o zúţenie). Podstatné je, ţe podpora XHTML je v súčasných prehliadačoch úplne rovnaká ako podpora HTML. Hoci sa predpokladalo, ţe v budúcnosti bude podpora XHTML lepšia ako podpora HTML, na základe skúseností s historickým vývojom prehliadačov nie je dôvod domnievať sa, ţe sa tak naozaj stane (ZELDMAN, 2004 s. 19). 1.3 HTTP, HTTPS HTTP je internetový protokol pôvodne určený na výmenu hypertextových dokumentov medzi serverom a prehliadačom (tzv. sluţba WWW). Súčasná verzia HTTP však uţ dokáţe prenášať akékoľvek súbory a pouţíva sa aj na mnohé iné funkcie (napr. spúšťanie vzdialených aplikácií). K HTTP existuje i jeho zabezpečený (šifrovaný) variant HTTPS. HTTP funguje na princípe otázka odpoveď, jednotlivé otázky nie sú z pohľadu servera rozoznateľné. Preto sa HTTP nazýva aj bezstavový protokol. To bolo výhodné v čase jednoduchých internetových prezentácií, ale pri programovaní zloţitejších webových aplikácií to spôsobuje problémy, lebo HTTP napr. neumoţňuje uloţenie obsahu košíka v internetovom obchode. Musí sa to obchádzať rôznymi metódami, napr. vyuţitím cookies. HTTPS je šifrovaným variantom internetového protokolu HTTP na prenos webových stránok (z angl. HyperText Transfer Protocol Secure). Protokol HTTPS umoţňuje chránený 15

16 prístup k webovému serveru tým, ţe kaţdú prenášanú komunikáciu šifruje algoritmom SSL 6 alebo TLS 7. Je to dôleţité pri prenášaní citlivých informácií (napr. čísla kreditnej karty). HTTPS sa pouţíva aj na autorizáciu prístupu k webu. Na zvýšenie bezpečnosti vyţaduje prehliadač komunikujúci cez HTTPS tzv. certifikát. Ten môţe byť buď podpísaný tzv. certifikačnou autoritou zaisťujúcou pravosť certifikátu, alebo si ho vlastník servera môţe vydať sám. V takomto prípade prehliadač zobrazí pouţívateľovi varovanie. 1.4 CSS Ide o súbor metód na grafickú úpravu webových stránok. Skratka pochádza z angl. Cascading Style Sheets, čo znamená kaskádové štýly. Kaskádové sú preto, lebo sa na seba môţu vrstviť definície štýlu, ale platí len tá posledná. Uţ existuje aj návrh CSS 2, zlepšené a zloţitejšie formy štýlov, ktoré však v najrozšírenejšom prehliadači Internet Explorer veľmi nefungujú. Základom šablóny štýlov je pravidlo, ktoré sa skladá z niekoľkých častí. Pravidlo hovorí, ako bude prvok, ktorému je štýl určený, vyzerať. Jedno takéto pravidlo sa skladá: 1. zo selektora alebo viacerých selektorov, 2. z deklarácie jednej alebo viacerých vlastností (DOMES, 2011 s. 17). Kaskádové štýly uľahčujú prácu pri tvorbe webových stránok. Pomocou nich moţno nastaviť, definovať veľkosť textu, farbu pozadia a pod. Slovo uľahčujú som pouţil preto, lebo pri starom HTML sa muselo definovať kaţdé jedno písmo, kaţdé pozadie vo frame, pozadie tabuliek. Posledné, čo som menoval, sú odsudzované tagy 8 a niektorí ľudia by ich zakopali pod zem. Samozrejme, ich účel na niečo bol a história ich zakopala sama. Boli dobré, kým nebolo nič iné. Keď sa zjavili CSS, ľudia sa začali zaujímať o túto technológiu a začala sa rozširovať, čo umoţnilo jej rozsiahle vyuţívanie. Moderný web, ktorý chcete určite mať, by nemal obsahovať v štruktúre stránky (layoutu) tagy <table>, <frame> alebo <iframe>. Samozrejme, ak tabuľky nepouţijete na ukladanie dát. To je ich skutočné poslanie. Štruktúra stránky by mala mať decentný vzhľad a mala by byť veľmi prehľadná. Takýto výsledok sa dosiahne len kaskádovými štýlmi, ak počítame s prehľadným a rozumným kódom. 6 Vrstva bezpečných socketov. 7 Protokol na šifrovanie dát. 8 Značka pouţívaná v HTML, ktorá označuje typ elementu webovej stránky. 16

17 Štruktúrovanie stránky sa dnes robí pomocou elementov <div> a <span>. Ich cieľom je vzdialiť od seba štruktúru stránky, resp. jej obsah a kód a napokon jej vzhľad. Vzhľad by nemal byť definovaný nikde inde ako v CSS. Ak to tak nie je, stránku nemoţno pokladať za plnohodnotnú, CSS štruktúrovanú stránku. Všetko v CSS je jednoduché a čo všetko umoţňuje, nie je iba definícia 2 elementov, ale aj úprava tagov. Napríklad prečo by sa <form> malo posúvať o riadok. V CSS sa to vyrieši zrušením margin a padding. To však pomocou HTML neurobíme. Kaskádové štýly zapisujeme do jednotlivých vlastných súborov s príponou.css, alebo ich definujeme priamo v (X)HTML dokumente, ktorý práve tvoríme. Pri definícii v dokumente by sa štýly mali nachádzať v hlavičke webu <head>. Jednou moţnosťou je ešte priama definícia v tagu, ale to je vlastne to, od čoho sa CSS pokúša vzdialiť. 1.5 XML XML je skratka z angl. extensible Markup Language, čo znamená rozšíriteľný značkovací jazyk. V skutočnosti je XML tzv. metajazyk, nadradený značkovací jazyk, v rámci ktorého moţno vytvárať vlastné jazyky (definované pomocou DTD opisu). Takým jazykom je napríklad XHTML, kombinácia XML a HTML. XML je zaujímavý tým, ţe neobsahuje nijaké konkrétne značky (elementy), ktokoľvek si teda môţe vymyslieť vlastné značky, napr. <farba>zelená</farba>. To umoţňuje veľmi dobre definovať presnú štruktúru kaţdého XML dokumentu podľa aktuálnej potreby. XML je tak akýmsi predelom medzi databázovou štruktúrou a textovým dokumentom. XML na rozdiel od známejšieho jazyka HTML vôbec neobsahuje informácie o spôsobe zobrazenia, čím dochádza k úplnému oddeleniu formy od obsahu. Zásluhou toho je XML oveľa flexibilnejší, umoţňuje vlastnú voľbu zobrazenia kaţdej aplikácie, ktorá s XML dokumentom pracuje. Ak je napriek tomu potrebný jednotný vzhľad, moţno ho definovať pomocou špeciálnych stylesheetov (kaskádové štýly alebo XSL), ktoré sú pripojené v záhlaví XML dokumentu. XML sa dnes pouţíva predovšetkým na ľahkú výmenu informácií (napr. výmenu faktúr) a komunikáciu nezávislú od konkrétnej aplikácie či platformy. Hlavnou výhodou XML na rozdiel od iných formátov pouţívaných na prenos informácií je jeho nezávislosť, štandardizácia, pomerne malá veľkosť, podpora národných kódovaní a jednoduchý prevod na iné formáty. XML je veľmi jednoduchý. Jeho výkon podporujú sesterské technológie ako XSLT, XPath, XLink či XPointer (CASTRO, 2001 s. 15). 17

18 1.6 JavaScript JavaScript 9 je zároveň veľmi jednoduchým a veľmi komplikovaným jazykom, ktorý sa dá naučiť za pár minút, ale pre jeho úplné zvládnutie sú potrebné roky praxe (ZAKAS, 2009 s. 11). JavaScript je programovací jazyk, ktorý sa pouţíva na internetových stránkach. Zapisuje sa priamo do HTML kódu, čo je výhodou, pretoţe je to jednoduché (RESIG, 2006 s. 5). JavaScript je klientsky skript, čo znamená, ţe sa program odosiela so stránkou na klienta (do prehliadača) a aţ tam sa vykonáva. (Protikladom klientskych skriptov sú serverové skripty, ktoré sú vykonávané na serveri a na klienta idú uţ len výsledky.) jquery jquery je kniţnica s otvoreným zdrojovým kódom určená pre jazyk JavaScript, ktorá zjednodušuje interakciu medzi dokumentom HTML, presnejšie povedané objektovým modelom dokumentu (model DOM 10 ), a jazykom JavaScript (SHARP, 2010 s. 16). jquery je JavaScriptový framework, ktorý umoţňuje ľahko vyhľadávať elementy DOMu, modifikovať ich aj vytvárať nové. Na vyhľadávanie stačí poznať CSS, no náročnejší pouţívatelia môţu vyuţiť i XPath. Rovnako aj vytváranie nových HTML elementov je jednoduché, stačí zadať HTML kód a jquery sám vytvorí patričnú štruktúru DOMu. JavaScriptový framework jquery výrazne uľahčuje prácu s DOMom. Medzi jeho mnohé výhody patrí ľahké pouţitie, zaujímavé funkcie, kvalitne spracovaná dokumentácia vrátane tutoriálov a nie na poslednom mieste aj ohľaduplnosť vo vzťahu k okolitému prostrediu na rozdiel od agresívnejších frameworkov, ako je Prototype alebo mootools, sa striktne drţí vo svojom vlastnom mennom priestore a nemodifikuje nič, čo mu nepatrí. Framework jquery je silný a elegantný nástroj na prácu s DOMom. Je úplne dostatočný pre malé a stredne veľké projekty, vo veľmi veľkých aplikáciách nie vţdy celkom vyhovuje, ale čo mu chýba vo flexibilite, to doháňa jednoduchosťou a prehľadnosťou. 9 Skriptovací jazyk určený na tvorbu dynamických webových stránok. 10 Document Object Model objektový model dokumentuje API (Aplication Programming Interface aplikačné programové rozhranie). 18

19 1.7 AJAX AJAX (Asynchronous JavaScript and XML) 11 je označenie technológie slúţiacej na vývoj moderných interaktívnych webových aplikácií, ktoré menia obsah stránky bez toho, aby ju bolo potrebné znova načítať (LACKO, 2008 s. 32). AJAX nie je novou technológiou, ale vlastne kombináciou JavaScriptu, XML a skriptovacieho jazyka na strane servera. AJAX sa pouţíva na tvorbu interaktívnych webových aplikácií. Bez AJAXu by pouţívateľ webovej aplikácie musel čakať na odpoveď od servera. V aplikácii vyuţívajúcej AJAX sa odošle poţiadavka na pozadí prehliadača (asynchrónne), kým pouţívateľ môţe aplikáciu ďalej pouţívať. Jeden zo základných princípov je vyuţitie skriptu pracujúceho na strane servera a prebratie od neho vrátených dát. AJAX však má aj určité nevýhody, predovšetkým pri nevhodnom vyuţití výrazne zniţuje pouţiteľnosť stránok. Preto treba podobne ako pri iných technológiách AJAX aplikáciu dobre premyslieť a pred zavedením aj dôkladne otestovať na pouţívateľoch. 1.8 PHP PHP je voľne šíriteľný populárny, open source 12 skriptovací programovací jazyk, ktorý umoţňuje procedurálne alebo objektovo orientované programovanie. Je vhodný predovšetkým na programovanie aplikácií klient server na strane servera. Vyuţíva sa najmä na programovanie interaktívnych dynamických webových stránok a aplikácií. Jednoducho moţno povedať, ţe skript napísaný v PHP je uloţený na strane servera a klient, ktorý ho volá, dostane ako odpoveď klasickú statickú (X)HTML stránku. Znamená to, ţe skript spracuje poţiadavku klienta na serveri (na rozdiel napr. od JavaScriptu, ktorý sa spracuje na strane klienta). Toto riešenie má v porovnaní s PHP výhodu v tom, ţe sa stránka nemusí opätovne načítavať, ale hlavnou nevýhodou takýchto riešení sú moţnosti pouţitia, no najmä (ne)bezpečnosť, keďţe útočník dokáţe pozmeniť skript na strane klienta, aby vykonal nebezpečný kód, čo je pri PHP značne náročnejšie útočník by sa musel dostať na server. Na začiatku tohto výkonného programovacieho jazyka stál Rasmus Lerdorf. Bolo to v roku 1994, keď si Rasmus vo voľnom čase vytvoril v Perl jednoduchý systém na evidovanie prístupov k jeho stránkam. Spúšťanie Perl však zaťaţovalo server, a tak autor prepísal systém do jazyka C. Vzhľadom na rýchlo šíriacu sa popularitu doplnil autor program o dokumentáciu 11 AJAX Asynchronous JavaScript and XML. 12 Otvorený zdroj, označuje programy, ktoré poskytujú svoj zdrojový kód zdarma. 19

20 a uvoľnil ho pod názvom Personal Home Page Tools, neskôr Personal Home Page Construction Kit (KOSEK, 1999 s. 29). 1.9 Apache Apache je softwarový server, teda program, ktorý beţí na hardvérovom stroji pripojenom do internetu a zaisťuje obsluhu prehliadačov jednotlivých návštevníkov (posiela im jednotlivé stránky). Medzi výhody Apache patrí najmä dostupnosť pre všetky hlavné platformy (Windows, Linux atď.) a aj skutočnosť, ţe Apache je vyvíjaný ako open source, a je teda úplne zadarmo. Prvým webovým serverom bol server NCSA, do ktorého rôzni nadšenci začali pridávať softvérové záplaty (angl. a patch), aby sa zlepšil výkon a funkčnosť, čím sa aj podarilo zaplátať bezpečnostné diery. Postupne sa z týchto záplat zrodil nový webový server s názvom Apache. Prečo je Apache taký úspešný? Apache nezrazil na kolená ani Microsoft so svojím webovým serverom IIS, a to uţ niečo znamená. Jedna z mnohých odpovedí by mohla znieť, ţe je zadarmo, ale to je aj IIS, ďalej, ţe je k dispozícii zdrojový kód, moţnosť podieľať sa na vývoji atď. V súčasnosti Apache medzi servermi priamo kraľuje, jeho viac ako 50 % podiel medzi webovými servermi je toho dôkazom (štatistika vebových serverov: V štandardnej konfigurácii podporuje niekoľko základných vlastností, ktoré sú nevyhnutné pre bezproblémové fungovanie webového servera. Ak je z nejakých dôvodov potrebné nejakú vlastnosť pridať, moţno to urobiť pomocou modulov. Zoznam dostupných modulov je na stránke Apache ako webový server je perfektný na vytváranie dynamických stránok. Moţno si vybrať z niekoľkých spôsobov. Prvou moţnosťou je pouţitie klasických CGI skriptov a pomocou nich sprístupnenie dát, ktoré moţno vyťahovať z obyčajného textového súboru alebo z tabuľky databázového servera. Tento spôsob je vhodný, ak prevaţuje operácia s dátami nad tlačou HTML kódu, ktorý chceme na svojich stránkach prezentovať. V opačnom prípade je dobré pouţiť napr. PHP (Professional Home Page), čo je programovací jazyk, ktorým sa kód zapisuje priamo do HTML stránky. Kombináciou vhodných skriptov a modulov sa veľmi rýchlo a efektívne dá vytvoriť napr. katalógový vyhľadávací server, ako je Yahoo! Na tvorbu CGI skriptov sa najčastejšie pouţíva programovací jazyk C, C++, Perl, PHP, Python. Nie je aţ také dôleţité, aký jazyk sa 20

21 pouţije, veľmi dôleţité je však dbať na bezpečnosť našich aplikácií. Na tvorbu aplikácií je vhodné pouţívať také jazyky, ktoré moţno skompilovať, ako je napr. C++, Python atď., aby v prípade, ţe sa na náš server dostane nejaký votrelec (hacker), nemal moţnosť vidieť zdrojové kódy našich CGI skriptov. Za Apache hovorí aj podpora rôznych programovacích jazykov, ktoré nemusíme mať na svojom počítači vôbec nainštalované. Stačí, ak si nahráme príslušný modul, ktorý podporuje práve ten náš programovací jazyk. Napríklad ak chceme pouţívať PHP, nemusíme sťahovať celú inštaláciu PHP, ale stačí si stiahnuť modul pre PHP, ktorý je podstatne menší ako samotná distribúcia, pričom funkčnosť je úplne rovnaká MySQL MySQL je slobodný a otvorený viacuţívateľský, viacvláknový SQL databázový relačný server (GILMORE, 2011 s. 7). MySQL je populárny databázový systém, podporuje viaceré platformy, ako je Linux, Windows či Solaris, a je implementovaný vo viacerých programovacích jazykoch ako PHP, C++ či Perl. Databázový systém je relačný, typu DBMS (Database Management System). Kaţdá databáza je v MySQL tvorená z jednej alebo viacerých tabuliek, ktoré majú riadky a stĺpce. V riadkoch sa rozoznávajú jednotlivé záznamy, stĺpce uvádzajú dátový typ jednotlivých záznamov, pracuje sa s nimi ako s poľami. Práca s MySQL databázou sa realizuje pomocou tzv. dopytov, ktoré vychádzajú z programovacieho jazyka SQL (Structured Query Language) 13. Pre pochopenie MySQL je potrebné ešte objasniť pojem databáza. Databáza je usporiadaná mnoţina dát, ktorá je normálne uloţená v jednom alebo niekoľkých dátových súboroch. Dáta sú štruktúrované v tabuľkách, s moţnými referenciami medzi tabuľkami. Existencia týchto relácií medzi tabuľkami viedla k pojmu relačná databáza (KOFLER, 2007 s. 8) LAMP, WAMP Skratka LAMP vznikla zoskupením prvých písmen slov Linux, Apache, MySQL a PHP. Toto softvérové riešenie je základom jedného z najrozšírenejších webových serverov. Táto softvérová kombinácia je známa najmä vývojárom webových aplikácií. Niekedy sa namiesto skratky LAMP moţno stretnúť s podobnou skratkou WAMP, ktorá znamená, ţe uvedené tri aplikácie boli inštalované v operačnom systéme Windows. Trojkombináciu 13 Počítačový jazyk, ktorý sa pouţíva na prístup do relačných databáz. 21

22 Apache + MySQL + PHP môţeme totiţ bez výraznejších rozdielov pouţiť vo viacerých moderných operačných systémoch Cookies Cookies sú krátke, pomocné informácie v tvare reťazca meno = hodnota. Je to malý textový súbor obsahujúci informácie o pouţívateľovi, ktorý sa prihlásil na server. Pomocou nich si môţe server uchovať informácie o svojich predchádzajúcich kontaktoch s klientom, prípadne si ich klient ukladá a neskôr ich vyuţíva. Boli navrhnuté s cieľom umoţniť serveru vytvoriť profil klienta tak, aby server mohol reagovať individuálne na rôznych klientov. Mechanizmus cookies umoţňuje serveru získať mnohé informácie o návykoch pouţívateľa klientskeho programu (prehliadača), ktoré môţu byť nielen uţitočné, ale aj zneuţité (reklama, narušenie súkromia) RSS Technológia RSS v podstate znamená skutočne jednoduché publikovanie. V zásade ide o spôsob, akým moţno na webových stránkach publikovať nové príspevky (HOLZNER, 2007 s. 10). Podstatnou výhodou RSS je, ţe si sami zvolíme zdroj poţadovaných informácií. RSS technológia je zaloţená na jazyku XML. Typická RSS je vlastne len súbor vo formáte XML, ktorý obsahuje aspoň jednu správu. Pri CMS sa očakáva, ţe všetky nové príspevky a články bude automaticky prenášať aj do RSS systému, čím umoţňuje pravidelnému návštevníkovi stránky to, ţe nemusí navštevovať stránku, aby sa dozvedel, čo je nové, ale nechá si automaticky zasielať nové príspevky do svojho počítača CGI CGI alebo Common Gateway Interface (rozhranie zaisťujúce komunikáciu s externými aplikáciami) je jednou z moţností, ako zaviesť dynamiku do webových stránok. V zásade je to predpis pre program spustený na serveri, ako má čítať dáta od webového servera a ako mu má dáta posielať. Výsledkom je, ţe keď sa odkazujeme na link s CGI programom (zvyčajne sa nazýva CGI skript), nenatiahne sa do webu klienta tento skript, ale výstup získaný jeho spustením. Klasickým príkladom sú počítadlá prístupu na webové stránky, gateway k rôznym slovníkom a databázam alebo napríklad obmieňajúce sa reklamy na stránkach. 22

23 CGI skript je teda externý program, ktorý je na poţiadavku pouţívateľa spustený webovým serverom ako samostatný proces. CGI skripty sú často vytvárané v skriptovacom jazyku Perl alebo v niektorom shelle operačného systému Unix. Z programovacích jazykov sa pouţíva napríklad jazyk C alebo C++, Visual Basic. CGI skripty preberajú dáta zadané pouţívateľom, spracujú ich a ako výsledok vytvárajú spravidla HTML stránky. Tieto dynamicky vytvorené stránky potom webový server posiela späť klientovi WEBOVÝ DIZAJN Webový dizajn (web design alebo webdesign, grafické navrhovanie internetových stránok) je súhrnom výsledných spracovaní návrhov a poţiadaviek na koncepciu, funkčné riešenie a vzhľad webovej lokality, ktorý má byť funkčne spôsobilý na zobrazenie a interpretáciu webovými prehliadačmi alebo inými grafickými pouţívateľskými rozhraniami. Podľa Jakoba Neilsena návštevníci webových stránok nečítajú, ale skenujú. Čitateľ najskôr vníma stránku ako zhluk farieb a tvarov, aţ potom zaregistruje informácie obsiahnuté v grafike, zachytí význam nadpisu a napokon začne vnímať aj jednotlivé slová a vety (ŘÍHOŠEK, 2002 s. 25). Princíp jednoduchosti hovorí, ţe veci majú byť také jednoduché, ako sa dá, o čom svedčí citát Antoine de Saint Exupéryho: Dokonalosť nie je dosiahnutá vtedy, keď nie je čo pridať, ale vtedy, keď nie je čo odobrať. Pri hľadaní informácií o grafickom dizajne webových stránok som v jednej publikácii našiel nasledujúce citácie. Nezáleží na tom, aké krásne sú vaše stránky či koľko zvončekov a píšťaliek na nich máte. Veľmi kvalitné stránky sú dôležité, ale väčšina ľudí si dnes viac cení použiteľnosť ako dobrý vzhľad a eleganciu (ANDERSON, 2011 s. 12). Stránky nemusia dobre vyzerať, stačí, keď sa dobre a jednoducho používajú (ANDERSON, 2011 s. 13). V obidvoch prípadoch sa hovorí o tom, ţe oveľa dôleţitejší je obsah ako samotný dizajn. Ja s tým však nesúhlasím, naopak, kladiem dizajn na prvé miesto, ešte pred samotný obsah a všetko ostatné. Myslím si, ţe návštevníka webovej stránky zaujme predovšetkým práve dizajn. Ten je podstatným a rozhodujúcim faktorom, či na stránke zostane, alebo nie. 23

24 Twitter Bootstrap Framework Twitter Bootstrap je jednoduché a úplne flexibilné riešenie na vytvorenie webového pouţívateľského rozhrania vrátane moţných interakcií zo strany pouţívateľa a systému, ktorý vyuţíva technológie, ako je HTML, CSS, JavaScript. Jednoducho ide o súbor pripravených prvkov (nástrojov) na ľahké a efektívne zavedenie do webových systémov, ktorým sa tak radikálne uľahčí ich vývoj a potenciálne dôjde k značnému zrýchleniu vývoja. Výhodou tohto frameworku je ľahké spracovanie akéhokoľvek pouţívateľského rozhrania vo webovej aplikácii. V závere práce sa v časti diskusia zamýšľam nad pouţitím tejto technológie v najbliţšom čase. Neustály tlak na responsive design ma núti zamyslieť sa nad tým, či práve Twitter Bootstrap nepouţijem ako ďalšiu vývojovú fázu webovej stránky. Responsive design nie je iba módnou záleţitosťou. Ide o sprístupnenie obsahu webu všetkým pouţívateľom bez ohľadu na to, na akom zariadení si zvolenú stránku otvárajú. Responsive design je predovšetkým na to, aby zohľadnil ergonomické poţiadavky mobilných zariadení FLASH 5 Macromedia Flash je produktom americkej firmy Macromedia, ktorá sa uţ preslávila produktmi, ako je Macromedia Director či Macromedia Dream. Produkt je zaloţený na vektorovej grafike. Jeho najväčšou prednosťou je grafika nakreslená priamo v ňom, ale nespôsobujú mu problémy ani importované grafické súbory, no za cenu zbytočnej veľkosti (ADOBE CREATIVE TEAM, 2009 s. 389). Celý princíp spočíva v tom, ţe niečo uţ vytvorené si tento program uloţí do jedného súboru s koncovkou swf. A tu vzniká otázka, či náš obľúbený browser (prehliadač internetových stránok) dokáţe tento formát prečítať. Preto bol na kaţdú vytvorenú stránku pod týmto programom pridaný špeciálny HTML kód, ktorý v prípade, ţe nie je nainštalovaný plugin, ho automaticky nainštaluje. To však nie je problémom, pretoţe niektoré browsery, napr. Internet Explorer, uţ pri inštalácii tento plugin nainštalujú. Potom beţí tento súbor a prejavuje sa ako normálna HTML stránka s tým, ţe sú do nej pridané rôzne prvky, ktoré sa dajú vytvárať vo Flash. Najväčšou výhodou týchto súborov je veľká interaktivita a najmä moţnosť importovania rôznych zvukov pri maximálnej kompresii, ako sme na to zvyknutí pri súboroch MP3. Hlavnou nevýhodou tohto programu je to, ţe uţ vytvorené stránky alebo projekty sú 24

25 veľmi náročné na systém. Macromedia Flash 5 je štandardom doručovania dynamického obsahu do rôznych prehliadačov na rôznych platformách (CHUN, 2001 s. 16) Ruby on Rails Ruby on Rails je framework v jazyku Ruby na pohodlné a rýchle vytváranie moderných webových aplikácií (HANSSON). Umoţňuje ľahkú komunikáciu s databázami. Je charakteristický oddelením aplikačnej logiky od pouţívateľského rozhrania, opätovnou pouţiteľnosťou kódu, prehľadnou štruktúrou kódu aplikácie a (podľa programátorov, ktorí ho pouţívajú) zábavným programovaním MICROSOFT SILVERLIGHT Nový Silverlight spoločnosti Microsoft je priamym konkurentom Flash. Podobne ako Flash umoţňuje vytvárať interaktívny obsah, ktorý sa realizuje u klienta, a podporuje dynamické grafiky, médiá a animácie, ktoré značne presahujú moţnosti obyčajného HTML. Podobne ako Flash aj Silverlight sa rozmiestňuje pomocou odľahčeného zásuvného modulu (lightweight plug-in) prehliadača a podporuje širokú paletu rôznych prehliadačov a operačných systémov. Momentálne má Flash pred Silverlightom náskok, pretoţe je v širokom meradle akceptovaný. Silverlight má však niekoľko architektonických funkcií, ktoré Flash nemá najvýznamnejšia je skutočnosť, ţe je zaloţený na zredukovanej verzii spoločného runtime jazykov (common language runtime, CLR).NET 14, a preto umoţňuje vývojárom písať kód u klienta v čistom C#. Silverlight je navrhnutý tak, aby dokázal prekonať limity HTML a umoţnil vytvárať graficky lepšie a interaktívne aplikácie. Silverlight nie je však vhodnou cestou na prekonanie bezpečnostného sandboxu prehliadača. Pre aplikáciu Silverlightu platia spravidla podobné reštrikcie ako pre obyčajné webové stránky. Napríklad aplikáciou Silverlightu je dovolené vytvárať súbory a pristupovať k nim, čo však platí len pre také súbory, ktoré sú uloţené v špeciálne vyhradenej oblasti nazývajúcej sa izolované úloţisko (isolated storage). Toto úloţisko funguje pojmovo podobne ako cookies v obyčajnej webovej stránke. Súbory sú oddelené podľa webov a aktuálneho pouţívateľa, ich veľkosť je značne obmedzená. 14 Mnoţina softvérových technológií firmy Microsoft. 25

26 WYSIWYG WYSIWYG je skratka zloţená z anglických slov what you see is what you get čo vidíš, to dostaneš. Je to softvér, ktorý dokáţe vytvárať webové stránky vizuálnou formou. Pojmom WYSIWYG sa spravidla označujú editory, v ktorých pouţívateľ priamo upravuje webovú stránku tak, ako bude vyzerať v beţnom internetovom prehliadači (podobne ako v programe MS Word, čo je v podstate takisto WYSIWYG editor). Výhody WYSIWYG editorov sú teda zrejmé, umoţňujú formátovať obsah stránok aj bez znalostí jazyka HTML. Práve preto sa WYSIWYG editory často pouţívajú v najrôznejších redakčných systémoch. Medzi ďalšie ich pozitíva patrí veľmi pohodlná práca. WYSIWYG editory majú však aj svoje nevýhody. Väčšina dostupných WYSIWYG editorov totiţ generuje veľmi zlý HTML kód, a to z hľadiska sémantiky alebo štruktúry (vývoj WYSIWYG editorov často zaostáva za vývojom prehliadačov). To môţe vyústiť napríklad aţ do problémov s prístupnosťou webu. Niektoré WYSIWYG editory majú problémy aj s kaskádovými štýlmi. Problémy často vznikajú i pri zloţitejších vizuálnych úpravách stránky, preto WYSIWYG editory nie sú veľmi vhodné na vytváranie celých webov a pouţívajú sa skôr tam, kde je potrebná len modifikácia textov (napr. úprava článkov). Medzi najznámejšie WYSIWYG editory patrí Microsoft FrontPage SEO OPTIMALIZÁCIA SEO je skratka anglických slov Search Engine Optimization, čo znamená optimalizácia pre vyhľadávače. Je to vlastne všeobecný postup na optimalizáciu konkrétnej webovej stránky pre vyhľadávače. SEO sa zaoberá optimalizáciou pre fulltextové vyhľadávanie, teda pre vyhľadávanie kľúčového slova alebo slov. Optimalizáciou sa v tejto súvislosti chápe vytvorenie alebo úprava štruktúry webových stránok tak, aby vyhľadávače zaindexovali (uloţili do svojej databázy) čo najviac kľúčových slov alebo fráz obsiahnutých na týchto stránkach. Situácia na internete je veľmi podobná reálnemu konkurenčnému prostrediu čím viac webových prezentácií internet obsahuje, tým náročnejšie je prinútiť návštevníka, aby navštívil práve našu webovú stránku. Je jedno, či ide o komerčný web alebo o neziskový server, naším cieľom vţdy (keď uţ vynaloţíme energiu, čas aj prostriedky na vznik nejakých stránok) je, aby boli tieto stránky navštevované podľa moţnosti v čo najväčšej miere. Dobré je uvedomiť si, kto sú tí ľudia, čo môţu navštíviť našu webovú stránku. Ich základné delenie môţe byť takéto: 26

27 náhodní návštevníci, návštevníci, ktorí našli našu oblasť činnosti alebo produkt v katalógu, návštevníci, ktorí sa k nám dostali cez našu (platenú alebo neplatenú) reklamu, návštevníci, ktorí pomocou vyhľadávača našli na našej webovej stránke nejakú vetu alebo výrobok, návštevníci, ktorí uţ poznajú adresu našej webovej stránky alebo ju majú uloţenú vo svojom prehliadači (DARIE, 2008 s. 80). SEO optimalizácia môţe priamo ovplyvniť štvrtú kategóriu návštevníkov, respektíve počet a kvalitu odpovedí na ich vyhľadávacie otázky. Zo štatistík prístupu na stránky vyplýva, ţe nejde o malý počet návštevníkov, ktorí na nájdenie nejakých stránok pouţívajú internetové vyhľadávače. Cieľom SEO je teda vo výsledkoch vyhľadávania posunúť na prvé miesta naše stránky, v ideálnom prípade hneď na prvú stránku a navyše pred konkurenčné webové stránky. Tak vzniká opodstatnený predpoklad, ţe takáto webová stránka bude navštevovaná viac ako stránky na niţších pozíciách. Závisí to od typu otázky, ktorú hľadajúci do vyhľadávača zadal, ale vo väčšine prípadov sa len veľmi málo pouţívateľov internetu prekliká na štvrtú a ďalšiu stránku výsledku. Treba poznamenať, ţe autori internetových prehliadačov preto logiku svojich vyhľadávačov konštruujú tak, ţe výsledky radia podľa kvality (nezamieňať s kvalitou stránok) zostupne. Ak teda vieme, ţe internet obsahuje obrovské mnoţstvo webových serverov, musíme nejako zvýšiť svoje šance v porovnaní s ostatnými. Existuje veľa spôsobov, ale investícia do optimalizácie stránok najmä pre vyhľadávače SEO býva z hľadiska počtu návštev a investovanej čiastky najlepšie vynaloţená. Všeobecne moţno povedať, ţe kaţdú webovú stránku moţno optimalizovať, ak ju však ešte nemáme, je ideálne na SEO pamätať uţ pri tvorbe webových stránok. Optimálna architektúra webu uľahčuje vyhľadávačom prechádzanie webovou stránkou a jej porozumenie. Preto je vytvorenie webovej stránky s architektúrou prispôsobenou vyhľadávačom hlavným faktorom prispievajúcim k dosiahnutiu a udrţaniu dobrej pozície vo vyhľadávačoch (KUBÍČEK, 2010 s. 28) Google AdWords Google AdWords znamená pozoruhodný reklamný nástroj, ktorý umoţňuje s relatívne nízkymi nákladmi dosiahnuť zaujímavé výsledky. Dobrý nápad a jasná formulácia ponuky vo 27

28 forme reklamného textu na Google potom niekedy dokáţu prilákať nových zákazníkov, ktorí by sa o nás inak nedozvedeli (BECK, 2009 s. 8). Základom fungovania reklamy cez AdWords je PPC. Ponúka však aj moţnosť platiť za zobrazení či dokonca pay per action, teda platbu za poţadovanú akciu. Najčastejšou, ale nie jedinou formou reklamy, ktorú inzerenti v Google AdWords vyuţívajú, je reklama formou sponzorovaných odkazov vo vyhľadávači Google. Pouţívateľ zadá do vyhľadávača výraz, ktorý chce na internete nájsť, a Google mu zobrazí mnoţstvo stránok týkajúcich sa tohto pojmu. Zoradí ich podľa relevantnosti, aktuálnosti a mnoţstva ďalších faktorov. Často tak nájde milióny odkazov. Beţný pouţívateľ však navštívi najmä odkazy zobrazené na prvej stránke vyhľadávania. Ak sa majiteľ stránky chce dostať na prvú stránku čo najrýchlejšie, vyuţije práve Google AdWords. Google AdWords zobrazuje svoje reklamné odkazy (nazýva ich sponzorované odkazy) oddelene od prirodzených odkazov. Umiestňuje ich zvyčajne na pravú stranu vedľa prirodzených odkazov alebo priamo nad prirodzené odkazy. V pravom stĺpci môţe byť maximálne osem sponzorovaných odkazov, nad prirodzenými odkazmi môţu byť maximálne tri sponzorované odkazy Google Analytics Google Analytics je bezplatná aplikácia, ktorá umoţní získať mnoho uţitočných informácií o návštevníkoch našej webovej stránky. Pomocou nej sme schopní zistiť, aké systémové prostriedky pouţívajú návštevníci stránky, ako sa správajú, odkiaľ prišli (vyhľadávač, katalóg, priamo, marketingová kampaň a pod.), aké slovo hľadali v internetovom vyhľadávači, z ktorých stránok najviac odchádzajú, ako dlho zostali na stránke atď. (FOX, 2011 s. 26). Pomocou tohto analytického nástroja dokáţeme zistiť aj úspešnosť a návratnosť realizovaných marketingových kampaní ( ové kampane, PPC reklama, bannerové kampane a pod.). Okrem toho Google Analytics poskytuje funkcionalitu ecommerce reţimu. Pomocou neho dokáţeme presne odpovedať na otázku, koľko finančných prostriedkov mi daná marketingová kampaň priniesla. ecommerce reţim Google Analytics sa pouţíva výlučne v internetových obchodoch. Tento reţim zistí mnoţstvo zarobených peňazí, resp. koľko zákazníkov prišlo z vyhľadávača Google alebo z realizovanej marketingovej kampane. V súčasnosti je naša stratégia vyhľadávania zároveň obchodnou stratégiou, pomocou ktorej sa nás potenciálni zákazníci usilujú nájsť. Internetové vyhľadávanie predstavuje vlastne 28

29 nové Zlaté stránky alebo podobné telefonické sluţby, inzertné noviny, katalógy a pod. (TONKIN, 2011 s. 43). Ak nevynaložíte čas a úsilie na meranie úspešnosti on-line marketingu pomocou služby Google Analytics, potom tento krok, čas a úsilie vynaloží vaša konkurencia (FOX, 2011 s. 25) Sledovanie návštevnosti Spravidla sa stretávame so štatistickým ukazovateľom počtu návštev na stránke za obdobie jedného dňa, mesiaca, roka a pod. Ďalšou významnou metrikou je však čas návštevníka strávený na stránke, a to v rámci jednej relácie (session) 15. Webová analytika umoţňuje zaznamenať obdobie, počas ktorého bol návštevník na jednotlivých stránkach nášho webu (KAUSHIK, 2010 s. 21) PageRank PageRank (aj Page Rank) 16 je pojem z oblasti optimalizácie pre vyhľadávače (SEO). Označuje sa ním prepracovaný algoritmus vyhľadávača Google, ktorý kaţdej webovej stránke s vlastným URL 17 pridáva číselné ohodnotenie vypovedajúce o jej kvalite v rámci štruktúry ostatných okolitých stránok (tzv. odkazové siete). Zdôrazňujeme, ţe PageRank sa týka kaţdej jednotlivej stránky, nie celej domény. PageRank vychádza z predpokladu, ţe o kvalite stránky vypovedá počet spätných odkazov z ostatných stránok. Ak tieto odkazy navyše pochádzajú z kvalitných stránok (ktoré majú vysoký PageRank), PageRank našej stránky sa tým ešte zvyšuje. Keď však odkazujúca stránka obsahuje viac odkazov, odovzdávaný (v skutočnosti sa PageRank neodovzdáva, odkazujúca stránka nič nestráca) PageRank se delí týmto počtom odkazov. Uvedené pravidlá sú len zjednodušeným pohľadom na PageRank, skutočnosť je o niečo komplikovanejšia. Predstavte si človeka, ktorý kliká na náhodne vybraté odkazy. PageRank určitej stránky je len matematickým modelom pravdepodobnosti, ţe takýto pouţívateľ túto stránku navštívi. 15 Session (relácia) predstavuje prostriedok na zachovanie a predaj pouţívateľských dát. V niektorých prípadoch je totiţ potrebné, aby sme mali k dispozícií silný a zároveň jednoduchý mechanizmus, ktorý nám umoţní pre kaţdého pouţívateľa uchovávať špecifické údaje. 16 Technológia radí internetové stránky podľa počtu odkazov, ktoré na ňu vedú z iných stránok. 17 Uniform Resource Locator, jednotný lokátor zdroja, adresa webovej stránky. 29

30 Google pouţíva PageRank nielen pri rozhodovaní, kde sa stránka umiestni vo výsledkoch vyhľadávania, ale určuje podľa nej aj frekvenciu indexácie a ochotu vyhľadávacieho robota prezerať podstránky daného webu. Podobne to robia aj ďalšie vyhľadávače so svojimi rankmi (napr. JyxoRank či S-rank Seznamu). Skutočný PageRank pouţívaný vyhľadávačom sa nedá zistiť (pre tvorcu webovej stránky by bolo jednoduchšie manipulovať s výsledkami vyhľadávania), dostupná je len jeho aproximácia nazývaná GTPR (toolbar PageRank). Zaujímavé je, ţe ani samotný Google uţ dnes nepouţíva len opísaný PageRank (niekedy označovaný ako klasický), ale s veľkou pravdepodobnosťou vyuţíva celý rad ďalších rankov niektoré z nich sú previazané aj s obsahom stránok. Pojem PageRank je podľa vyhľadávača Google odvodený od mena jedného z jeho tvorcov Larryho Pagea, ktorý ho spolu so Sergeyem Brinnem vymyslel, nejde teda o hodnotenie stránky, ako sa PageRank často mylne prekladá Google Sitemaps Google Sitemaps predstavuje pomerne jednoduchý spôsob na prilákanie Google na svoju webovú stránku. Tvorca webu len ponúkne vyhľadávaču informácie o zmenených alebo nových stránkach stačí vytvoriť súbor predpísaného formátu (sitemap súbor) a priebeţne ho aktualizovať a vyhľadávač uţ zabezpečí zvyšok. Sitemap je vlastne takým RSS pre Google. Sitemap Protocol je dialektom XML. Na vytvorenie súboru Sitemap existuje niekoľko spôsobov. Moţno pouţiť Sitemap Generator, ktorý však nie je univerzálny a vo väčšine prípadov ho treba upraviť; je to skript, ktorý je schopný generovať obsah Sitemap a poslať do Google informáciu o existencii Sitemap. Sitemap Generator vie vytvárať Sitemap napríklad z textových súborov so zoznamom URL, z access.log webového servera, prípadne po zadaní cesty k zloţke obsahujúcej statické súbory. 30

31 2 NÁVRH ŠPORTOVÉHO CMS Redakčný CMS 18 je program, ktorým sa zabezpečuje správa dokumentov, najčastejšie webového obsahu (niekedy sa nazýva aj systémom na spravovanie obsahu). Dnes sa týmto pojmom označuje spravidla systém, ktorý je dostupný cez webové rozhranie a umoţňuje jednoducho spravovať články, fotografie, hudbu alebo video a ďalší multimediálny obsah bez toho, aby menej pokročilý pouţívateľ musel poznať nejaký skriptovací jazyk typu PHP či ASP. Systém má spravidla dve časti pouţívateľskú (frontend) a správcovskú (backend). Podľa odbornosti pouţívateľa sa dá zabezpečiť prístup k jednej alebo druhej časti rozhrania, a tak umoţniť správu a úpravu našich stránok. Cieľom CMS je predovšetkým pouţívateľsky príjemným prostredím zabezpečiť zmenu obsahu webových stránok bez potreby vedieť programovať. Správa obsahu (CMS) umoţňuje meniť obsah webovej stránky rýchlo a efektívne na rozdiel od stránok statických, ktorých obsah je daný programátorom, pričom tento obsah sa v čase nemení, alebo len zriedkavo. Praktická časť konkrétne opisuje samotnú webovú stránku z pohľadu CMS, teda opíšem jednotlivé jej časti, ako ktorá časť funguje, a opíšem vlastne podstatu toho svojho CMS. Najskôr všeobecne môj CMS je primárne určený na pouţitie pre hokejové kluby, v širšom meradle na pouţitie pre športové kluby, pretoţe väčšina zákazníkov sú hokejové kluby, ako napr. ŠHK Piešťany, MHC Martin, MHK Martin, HC Nové Zámky, no máme aj športové kluby ako Športforiu, čo je klub, ktorý sa venuje triatlonu alebo paraglajdingu, alebo PK Martin, teda plavecký oddiel v Martine, alebo aj také kluby, ako je RCT Martin, t. j. cyklistický oddiel, alebo napr. klub, ktorý sa venuje squashu Športklub Viktoria, čiţe tento systém moţno pouţiť na rôzne športové aktivity, hoci teda prevaţná časť zákazníkov je z hokejovej oblasti športu. Content Management System, ktorý som vytvoril, je v prevádzke uţ moţno aj pribliţne 8 rokov, odvtedy prechádza nepretrţite vývojom a obmenami tak, aby bol v súlade s najnovšími technológiami, aby napredoval z pohľadu HTML kódu a nových trendov HTML5, aby napredoval z pohľadu CSS štýlov. 18 Content Management System. 31

32 2.1 Sekcie Celý Content Management System mojej stránky sa skladá z jednotlivých sekcií, ktoré budem postupne opisovať. Kaţdú sekciu moţno konfigurovať jednak z pohľadu toho, či bude alebo nebude vôbec zobrazená, čo znamená, ţe v konfigurácii stránky má pouţívateľ stránky, redaktor, ktorý danú stránku obhospodaruje, administrátor (teda správca, človek, ktorý sa stará o to, aby všetko fungovalo) stránky, moţnosť stránku konfigurovať tak, ţe jednotlivé sekcie zapne alebo vypne. Znamená to, ţe administrátor stránky môţe povedať, ţe si napríklad neţelá, aby sa na stránke zobrazovala upútavka na fotogalériu, alebo aby sa zobrazovali aktuality, aby sa zobrazovali najnovšie články, aby sa zobrazoval kalendár, aby sa zobrazovali videá, aby sa zobrazovala sekcia blahoţeláme, teda priestor, kde sa gratuluje oslávencom daného klubu, aby sa zobrazovala sekcia linky na iné stránky, sekcia partnerská, sekcia reklamných bannerov (banner je reklamný prúţok na internetovej stránke) a pod. Stránka má veľa samostatných funkčných blokov a administrátor stránky môţe jednoduchým spôsobom tieto bloky zapínať alebo vypínať (teda ich zobrazovanie). Rovnako dôleţitá je moţnosť jednotlivé bloky navzájom prehadzovať, čo znamená, ţe bloky na stránke sú voliteľne presúvané na to miesto, kde ich administrátor stránky chce mať. Môţe teda určiť, ţe napríklad sekcia kalendára bude v pravom treťom stĺpci úplne hore, alebo bude hneď za aktualitami. Jednotlivé sekcie majú svoj štandardizovaný rozmer, a preto ich moţno umiestňovať kdekoľvek na stránke, a to okrem sekcií, ktoré svojou šírkou zaberajú dvojnásobný rozmer stĺpca. Tieto sekcie, samozrejme, nemôţu byť umiestnené vedľa seba, lebo by boli širšie ako uţ spomenutých pixelov. Vzhľadom na dnešné rozlíšenie monitorov som sa rozhodol práve pre takúto šírku, aby som čo najviac zabezpečil kompatibilitu a zároveň maximálne vyuţil priestor na zobrazenie samotného obsahu. Snaţil som sa, aby tento rozmer bol deliteľný čo moţno najviac s ohľadom na flexibilné rozmiestnenie stĺpcov. Číslo je deliteľné číslami 520, 260, 208, 130, 104, 80, 65, 52, 40, 26, 20, 16, 13, 10, 8, 5, 4 a 2. Stránka má základný trojstĺpcový charakter, pričom hlavná obsahová časť zaberá šírku dvoch stĺpcov. Existujú sekcie, ktoré sú takisto dvojstĺpcové, pričom zvyčajne sa tieto sekcie zobrazujú na úvodnej stránke a následne sú nahradené priamo konkrétnym obsahom, konkrétnou stránkou, ktorú si návštevník stránky zvolil. Na úvodnej stránke sú to teda sekcie, ktoré hovoria o najnovších článkoch alebo obsahujú upútavku na fotogalériu, ale v okamihu, keď pouţívateľ klikne na konkrétny článok a zobrazí si ho, tak sa práve tieto dve sekcie 32

33 stratia, skryjú, a namiesto nich sa zobrazí konkrétny článok, na ktorý pouţívateľ klikol. Ostatné jednostĺpcové sekcie však zostanú zobrazené a sú administrátorom stránky voľne modifikovateľné z hľadiska ich umiestnenia. Niektoré sekcie sú jednak presúvateľné z miesta na miesto, jednak ich moţno zapnúť a vypnúť, okrem toho jestvujú sekcie dvojstĺpcové, ktoré moţno zapnúť alebo vypnúť, ale nemoţno ich presúvať, lebo svojím charakterom sa na iné miesto nezmestia, a potom existujú sekcie, ako je napr. sekcia flash alebo pipeline, ktorá je aţ trojstĺpcová, moţno ju vypnúť (vypína sa automaticky), keď nie je nijaká flashová informácia, ale nemoţno ju presunúť, pretoţe to nedovoľuje jej šírka. 2.2 Grafické vyhotovenie Pri opise svojho CMS začnem prvou časťou, ktorou je dizajn. Dizajn pokladám za najdôleţitejšiu časť stránky je totiţ dokázané, ţe keď človek otvorí webovú stránku, prvé, čo ho zaujme, je jej dizajn. Aţ na druhom mieste je samotný obsah stránky. To, či človek na stránke zostane a neodíde z nej, o tom práve rozhoduje to, aký dizajn daná stránka má. Ak ho tá stránka zaujme na prvý pohľad, jestvuje s veľkou pravdepodobnosťou šanca, ţe tento človek na stránke aj zostane a strávi na nej viac času. Z môjho pohľadu je teda dizajn veľmi dôleţitý a obsah stránky kladiem aţ na druhé miesto. Čo sa týka dizajnu pri programovaní webových stránok, ide o pomerne závaţnú a komplikovanú záleţitosť, a to jednak preto, ţe pouţívam systém CSS, teda systém, ktorý oddeľuje samotný obsah od dizajnu, a to preto, ţe toto práve umoţňuje veľmi jednoduchým spôsobom meniť dizajn stránky bez toho, aby sme museli príliš zasahovať do samotného zdrojového kódu, no na druhej strane jednoduchosť pouţitia CSS systému spôsobuje veľké problémy so samotnou kompatibilitou medzi rôznymi druhmi prehliadačov. Samozrejme, zo štatistík vyplýva, ţe najviac našich zákazníkov vyuţíva prehliadač Mozilla Firefox, na druhom mieste Internet Explorer, na treťom mieste Google Chrome a potom nasledujú ďalšie, menej známe prehliadače. Mojou prioritou je, aby Content Management System, ktorý som vytvoril, bol absolútne kompatibilný práve s troma najväčšími lídrami v tejto oblasti, čo nie je vôbec jednoduché, no práve preto, ţe dizajn je z môjho pohľadu veľmi dôleţitý, pokladám toto za svoju prioritu a snaţím sa programovať tak, aby naozaj môj CMS bol zobrazený na všetkých troch typoch prehliadačov vţdy rovnako. Aj nepatrná nezrovnalosť alebo malá chybička v zmysle toho, ţe niektoré okno je o jeden pixel posunuté tam, kde nemá byť, je viditeľná a pre mňa sú tieto veci neprijateľné a snaţím 33

34 sa, aby som programoval tak čisto, ako sa len dá, z pohľadu kódu, aby môj CMS bol skutočne kompatibilný pre všetky prehliadače. Obrázok 1 Grafika stránky Zdroj: vlastné spracovanie Čo sa týka dizajnu ďalej, celý CMS je koncipovaný na stred. Jeho šírka je určená na pixelov. Táto šírka zasa zodpovedá štatistikám, ktoré hovoria o tom, ţe uţ len mizivé percento pouţívateľov má dnes obrazovky s rozlíšením menším ako pixelov, teda nemá zmysel programovať stránku uţšiu z pohľadu horizontálneho rozlíšenia. Samozrejme, nemôţem si dovoliť ísť na stránku širšiu, na druhej strane nie všetci majú rozlíšenie, ktoré je väčšie ako 1 377, čo je dnes tzv. HD+ štandard. Preto som sa teda rozhodol, ţe pixelov horizontálne je pre toto obdobie ideálne. Stránka je teda zarovnaná na stred aj z toho dôvodu, ţe nosnou časťou grafiky hokejovej stránky je plné, plnohodnotné grafické pozadie, teda obrázok, ktorý kompletne vypĺňa pozadie hlavnej, nosnej stránky, teda všetko, čo je okolo stredového stĺpca hlavného obsahu stránky. Práve toto pozadie je kľúčové z pohľadu vzájomného zladenia graficky nosného stredu, teda hlavného obsahu, s celkovým dizajnom 34

35 stránky. Toto pozadie má pouţívateľ moţnosť meniť, je to štandardný obrázok, a spravidla ho moţno meniť manuálne, alebo sa zákazník môţe rozhodnúť, ţe ho bude meniť v pravidelných intervaloch automaticky. V prípade hokejových klubov sa práve toto pozadie vyuţíva napríklad na prezentáciu jednotlivých hráčov, a to tak, ţe sa v pravidelných intervaloch na tomto pozadí zobrazujú po stranách hlavnej stránky jednotliví hráči, ktorí sa tým vlastne predstavujú svojim fanúšikom. Tento priestor sa dá vyuţiť aj marketingovo, napr. prezentáciou a umiestňovaním reklám partnerov, alebo oznamovaním takých aktualít, ktoré sú skutočne výnimočné, alebo ich umiestnenie si vyţaduje zverejnenie na takomto lukratívnom mieste z pohľadu stránky. Znamená to, ţe ide o flashové jednoduché a stručné informácie, ktoré majú byť magnetom a ktoré majú prilákať zákazníka, aby zostal na stránke a dozvedel sa niečo viac. Toto pozadie hlavného, centrálneho stĺpca sa vyuţíva aj na logo hokejového klubu, na odkazy na sociálne siete, názov klubu a pod. Obrázok 2 Logo ŠHK 37 Piešťany Zdroj: vlastné spracovanie Čo sa týka dizajnu, rád by som ešte spomenul, ţe sa vţdy snaţím o zachovanie štandardu pouţitia maximálne dvoch základných farieb, a to vţdy farby studenej a jednej farby teplej. V prípade CMS, ktorý tu prezentujem, teda novovzniknutého extraligového klubu ŠHK 37 Piešťany, ide o farbu modrú (studená) a ţltú (teplá farba). Snaţím sa, aby môj CMS nebol farebne presýtený, mojím štandardom a heslom je heslo v jednoduchosti je krása. Čím menej farebnosti, čím jednoduchší dizajn, tým lepšie pre zákazníka z pohľadu čitateľnosti a orientovania sa na takomto rozsiahlom webovom portáli. 35

36 Z pohľadu dizajnu spomeniem ešte jednu dôleţitú vec hoci mám pevne stanovenú šírku stránky na pixelov, ale dĺţka (výška) stránky nie je fixne určená, je variabilná, a to v závislosti od toho, aký obsah sa v danej chvíli na stránke zobrazuje. Práve preto, ţe výška stránky je dynamická, je nevyhnutné zabezpečiť, aby pozadie stránky, ktoré je vlastne grafickým obrázkom, plynule prechádzalo do neutrálnej farby, ktorá vyplní dolnú časť stránky, a aby tento prechod medzi samotným pozadím a dolnou časťou stránky bol skutočne plynulý, čo je vecou programovania a spracovania obrázka v reálnom čase pomocou kniţníc na to určených. Je to potrebné preto, aby prechod medzi samotným dizajnom pozadia a dolnou časťou stránky bol plynulý a aby to bolo graficky pekné. To pokladám za veľmi dôleţité práve pre zachovanie čistého dizajnu celého redakčného systému. K dizajnu ešte toľko, ţe celou stránkou sa nesie jednotný typ písma, aby nepôsobil rušivo. Štandardne pouţívam typ Verdana, ktorý je určený na čítanie na monitoroch počítačov; je to písmo, ktoré je bezpätkové, teda ľahšie čitateľné z pohľadu pouţívateľa, nejde o písmo pre tlač, kde sa pouţíva písmo pätkové. Z ďalších vecí moţno ešte spomenúť aj to, ţe stránka obsahuje i systém na prehrávanie audiosúborov, riportov z jednotlivých zápasov, čo je síce veľmi malá súčasť stránky, ale jej úlohou je poskytnúť obsah záujemcom so zrakovým postihnutím, ktorí tak môţu získať zo stránky prípadné informácie. 2.3 Menu Druhá časť sa bude týkať navigácie, teda menu. Navigačné menu je neoddeliteľnou súčasťou kaţdej webovej stránky. Je to vlastne odrazový bod pre pouţívateľa, pre návštevníka stránky, ktorý hovorí o tom, kde pouţívateľ klikne, aby sa dostal ďalej na inú stránku. Je to nejaký strom, pričom strom má svoj kmeň, ktorý predstavuje úvodnú stránku, a z tohto kmeňa sa vytvárajú konáre a vetvy, čo sú vlastne jednotlivé sekcie, ktoré obsahujú ďalšie podstránky a to sú tie jednotlivé konáriky na konci veľkých konárov vychádzajúcich z kmeňa stromu. Obrázok 3 Navigačné menu Zdroj: vlastné spracovanie 36

37 Navigačné menu je rozdelené na viaceré sekcie. V mojom Content Management System sa nachádza štyri aţ päť základných navigačných miest, z ktorých sa zákazník môţe odraziť ďalej. Prvé zhora je navigačné menu, ktoré zabezpečuje odkazy na všetky ostatné extraligové kluby v rámci Tipsport Extraligy na Slovensku. Toto menu predstavuje len malé obrázky, logá jednotlivých klubov. Kliknutím na takýto obrázok sa pouţívateľ vlastne dostane na stránku klubu s týmto logom, teda na stránku hokejového klubu, ktorý je súčasťou extraligy. Toto menu je vlastne len takým systémom prepojenia mojej stránky so stránkami iných extraligových klubov. Je teda jedno, kde sa v danej chvíli ten návštevník stránky nachádza, teda či je na stránke košického, martinského alebo nitrianskeho hokejového klubu. Kaţdý z uvedených hokejových klubov má takéto navigačné menu ako prvé menu uvedené úplne hore na svojej stránke, čo práve umoţňuje veľmi rýchlo dostať sa na stránky ostatných hokejových klubov, ktoré sú súčasťou najvyššej hokejovej ligy u nás na Slovensku. Je to určitý spôsob affiliate, teda určitý spôsob vzájomného vymieňania si odkazov alebo partnerstva, čo moţno vzbudzuje určitú dôveru a vzájomný rešpekt, ktoré vznikajú po vzájomnej výmene kontaktov. Takţe toto menu je len na to, aby sa návštevník stránky veľmi rýchlo dostal na inú stránku extraligového hokejového klubu na Slovensku. Hneď pod týmto základným menu sa nachádza druhé menu v poradí, tzv. rýchle, horúce menu, ktoré si pouţívateľ môţe dynamicky meniť a konfigurovať podľa svojich potrieb. Toto menu spravidla obsahuje jednotlivé vypichnuté časti, ktoré umoţňujú návštevníkovi stránky veľmi rýchlo dostať sa na často pouţívané linky, na často pouţívaný obsah na webovej stránke. Sú to teda také navigačné časti, také navigačné menu, ktoré predpokladá, ţe zákazník (návštevník stránky) stránku často navštevuje. V mojom prípade je to napríklad rozpis ľadovej plochy, kontaktný formulár, odchody a príchody autobusov alebo registrácia na stránku pre potreby uverejnenia komentárov, tipovacej súťaţe, hokejovej burzy a pod. Teda je to také navigačné menu, ktoré umoţňuje jedným kliknutím získať potrebný obsah a nevyţaduje hľadať tento obsah v hlavnom menu. Tak sa teda dostávame k problematike hlavného menu. Hlavné navigačné menu je viacúrovňové, pričom hlavná úroveň obsahuje v tejto chvíli sekcie, ako je ÚVOD, KLUB, hlavnú časť SENIORI, čo znamená hokejový tím A muţstva, MLÁDEŢ, teda všetky hokejové druţstvá juniori, dorast, jednotlivé ročníky aţ po prípravku, samostatné menu ZIMNÝ ŠTADIÓN, samostatné menu ČLÁNKY, potom menu GALÉRIA, TURNAJE, FANÚŠIKOVSKÁ ZÓNA, ROZHOVORY. Aj toto menu si pouţívateľ stránky môţe definovať sám podľa vlastných poţiadaviek, môţe si menu vytvárať, 37

38 modifikovať, môţe presúvať jednotlivé časti z hlavnej nástrojovej lišty, z hlavného kmeňa tohto menu do inej úrovne tak, aby si vlastne vytvoril menu podľa svojich poţiadaviek. Znamená to napríklad, ţe hlavné menu KLUB obsahuje submenu (podmenu), menu druhej úrovne, ktoré obsahuje: HISTÓRIA KLUBU, HISTÓRIA HOKEJA V PIEŠŤANOCH, VEDENIE KLUBU, PARTNERI KLUBU, REKLAMNÍ PARTNERI KLUBU, PONUKA PRE PARTNEROV, REKLAMNÉ PLOCHY, RODIČOVSKÉ PRÍSPEVKY, LOGO, KONTAKT, NAPÍŠTE NÁM. Hlavné menu SENIORI zasa obsahuje menu HRÁČI, REALIZAČNÝ TÍM, ODCHODY A PRÍCHODY v novej sezóne, ROZPIS ZÁPASOV, PROGRAM KOMPLETNEJ EXTRALIGY, ŠTATISTIKA, TABUĽKA, ROZPIS TRÉNINGOV. Menu MLÁDEŢ obsahuje, ako som uţ spomenul, JUNIORI, DORASTENCI, 9. ROČNÍK, 8., 7., 6., 5., PRÍPRAVKA, RODIČOVSKÉ PRÍSPEVKY, ROZPIS TRÉNINGOV, ROZPIS ZÁPASOV a DOPRAVA. Teda v tomto menu si skôr rodičia nájdu potrebné informácie pre svoje deti. Menu ZIMNÝ ŠTADIÓN obsahuje menu ako: kde sa nachádza zimný štadión, teda zimný štadión všeobecne, jeho história, jeho fotografie, zázemie a pod., prenájom ľadovej plochy, verejné korčuľovanie, rozpis ľadovej plochy, vstupenky, permanentky atď. Menu ČLÁNKY obsahuje články zaradené do rôznych kategórií tak, aby si pouţívateľ stránky mohol veľmi rýchlo vybrať tú kategóriu, ktorá ho najviac zaujíma. Menu GALÉRIA obsahuje fotogalériu, videogalériu, Piešťanský týţdenník, odkazy na fotogalérie jednotlivých prispievateľov a fanúšikov klubu. Menu TURNAJE obsahuje turnaje, ktoré sa konajú na zimnom štadióne v Piešťanoch, Memoriál Ivana Hlinku, Turnaj Vlada Dzurillu, Majstrovstvá sveta do 18 rokov, divízia A a pod. FAN ZÓNA ako hlavné menu obsahuje odkaz na stránku Fanklubu, BURZA, TIPOVAČKA, PRAVIDLÁ ĽADOVÉHO HOKEJA a mnoţstvo ďalších informácií súvisiacich s fanúšikmi. Posledné menu sú ROZHOVORY. Kaţdý hráč má svoju sekciu, kde sa s ním urobí rozhovor a tento rozhovor je umiestnený práve do tejto sekcie. V tomto prípade je tu 6 hráčov, ktorí majú svoje rozhovory. Je to vlastne akoby taký osobný blog kaţdého z týchto hráčov. Takţe toto je hlavné navigačné menu ako základný odrazový mostík pre návštevníka stránky. Toto menu, ako som uţ spomenul, je viacúrovňové, základná úroveň je horizontálna, jednotlivé odkazy sú vedľa seba. Keď pouţívateľ klikne na hlavnú časť, menu sa mu rozvinie smerom nadol a zjaví sa druhá, prípadne ďalšia úroveň tak, aby navigačné menu bolo prehľadné. Preto je dôleţité, aby sa navigačné menu delilo na jednotlivé úrovne. 38

39 Ďalším navigačným menu je menu v pätičke stránky, teda na dolnej časti stránky, kde sa znova opakujú tie isté odkazy, ktoré sú dosiahnuteľné aj z hlavného menu. Ide o to, aby tento odkaz bol viditeľný aj na inom mieste. Sú to tie odkazy, ktoré sú pre stránku dôleţité, a to pri získavaní nových zákazníkov, spätnej väzby, komentárov a pod. Preto v dolnom menu nájdete odkazy na kontakt, napíšte nám, odkaz na domovskú stránku, odkaz na verejné korčuľovanie, prenájom ľadovej plochy, rozpis ľadovej plochy a pod., teda tie časti, ktoré by mali slúţiť aj na marketingové účely, a tak vytvárať určitý priestor na získavanie kontaktu pre potenciálnych zákazníkov. Navigačné menu je teda hlavná odrazová časť pre zákazníka, z ktorej sa dostane na tie časti stránky, ktoré chce otvoriť a čítať. 2.4 Rýchle informácie pipeline Samotný modul pipeline je z pohľadu funkčnosti veľmi jednoduchý. Ide o to, aby sa na stránku umiestnil modul, ktorého úlohou bude informovať návštevníkov stránky o tzv. horúcich veciach, aktivitách, činnostiach či udalostiach, ktoré majú flashový charakter. Je to tzv. jednovetová informácia, ktorá môţe posunúť návštevníka stránky na hlbší obsah, na článok, aktualitu alebo čokoľvek iné. Podstata takejto flashovej informácie spočíva predovšetkým v tom, aby ju návštevník stránky neprehliadol a aby čo najjednoduchšou a najzrozumiteľnejšou formou informovala o veľmi dôleţitej veci, ktorá sa v danej chvíli deje. Obrázok 4 Rýchle informácie pipeline Zdroj: vlastné spracovanie Táto sekcia sa skladá len z jedného jediného riadka grafického riadka, ktorý je umiestnený hneď pod hlavným menu, teda v hornej časti stránky, a to z uţ spomenutého dôvodu, aby to nebolo prehliadnuté pouţívateľom. Tento riadok neobsahuje nič iné, len v pravidelných intervaloch meniaci sa text, ktorý pouţívateľ zadal v časti Intranetu 19. Časť Intranetu je administrátorská časť stránky, ktorej sa budem venovať samostatne, teda budem sa zaoberať tým, ako sa pouţíva, ako sa napĺňa a aké časti má Intranet. Teraz opisujem samotný Content Management System a jeho funkčné celky (teda neopisujem Intranet), ktoré moja stránka obsahuje, ako fungujú a na čo vlastne sú. Teda opisujem prvý funkčný celok, ktorý sa nazýva flash pipeline flashová informácia alebo pipeline. Je to vlastne teda len 19 Intranet je privátna sieť ( malý internet ). 39

40 jednoriadková stručná informácia, ktorá napríklad hovorí o rozpise zápasov rozlosovania extraligy pre ŠHK 37 Piešťany. Znamená to horúcu novinku, ktorá sa na stránke zjavila. Alebo napríklad ide o informáciu: Predpredaj vstupeniek deň pred domácim zápasom je od 15. do 18. hodiny, v deň zápasu od 14. hodiny. Aj táto informácia je dôleţitá, aby návštevníci stránky vedeli, kedy si môţu na štadióne kúpiť lístky. Alebo je to informácia o tom, ţe dnes je verejné korčuľovanie od 16. hodiny. Takţe úlohou takejto flashovej informácie je vecne a stručne informovať návštevníka stránky o nejakej podstatnej udalosti, akcii, aktivite, ktorá sa v klube uskutočňuje. Tieto informácie sú spravidla dve aţ tri, nie je vhodné, aby ich bolo veľa, je skutočne dôleţité, aby tieto informácie boli predovšetkým stručné a vecné a aby neboli na stránke príliš dlho. Takáto informácia má zvyčajne ţivotnosť trvajúcu jeden deň, niekedy dokonca len niekoľko hodín. Ak ţiadne informácie v Intranete z pohľadu vlastníka stránky neboli zadané, táto sekcia sa automaticky prestane zobrazovať, teda netreba sa starať o zapnutie či vypnutie tejto sekcie z hľadiska konfigurácie stránky. V okamihu, keď pouţívateľ flashovú informáciu pridá, sekcia sa začne zobrazovať, ak nijaká flashová informácia v danej chvíli neexistuje, tak sa táto sekcia prestane zobrazovať na stránke. Táto sekcia je špecifická v tom, ţe je aţ trojstĺpcová a zasahuje celú šírku stránky, má rozmer pixelov a jej miesto je pevné, teda pouţívateľ ju nemôţe dynamicky meniť. V ďalšej časti budem opisovať sekciu zápasov, tzv. slider alebo posuvník so zápasmi, pričom tento posuvník je takisto sekciou, ktorá je pevná a nemoţno ju presunúť na iné miesto preto, lebo zaberá celú šírku stránky. 2.5 Zápasy Teraz opíšem sekciu zápasy. Táto sekcia je jednou z najdôleţitejších na stránke, v CMS, a to preto, lebo obsahuje veľmi dôleţitú časť stránky z pohľadu informovanosti. Ide o zoznam zápasov, ktoré boli odohraté v poslednom období, a zoznam zápasov, ktoré sa budú hrať v najbliţšom čase. Táto lišta je na šírku celej stránky, teda na šírku pixelov, je umiestnená hneď pod hlavným menu a pod pipeline sekciou, ktorú som uţ opísal v predchádzajúcej časti. Obrázok 5 Zápasová lišta Zdroj: vlastné spracovanie 40

41 Sekcia so zápasmi je rozdelená na 6 samostatných okien, pričom kaţdé okno reprezentuje jeden konkrétny zápas. Kaţdé toto okno (kaţdý zápas) je farebne odlíšené podľa toho, či ide o zápas odohratý, alebo o zápas, ktorý nás ešte čaká, ktorý sa má odohrať. Táto zápasová lišta má navigačné tlačidlá po obidvoch stranách, ktoré umoţňujú návštevníkovi stránky plynulý pohyb po zápasoch smerom doprava, teda na zápasy, ktoré nás čakajú, alebo smerom doľava, teda na zápasy, ktoré uţ boli odohraté. Pri načítaní stránky ako default sa táto lišta zobrazuje tak, ţe vţdy v strede sa nachádza posledný odohratý a najbliţší neodohratý zápas. Teda 3 zápasy z ľavej strany predstavujú zápasy odohraté a 3 zápasy z pravej strany predstavujú zápasy neodohraté. Kaţdý samostatný zápas, teda kaţdé samostatné okno obsahuje z informačného hľadiska stručne dátum konania zápasu, domáci tím, hosťovský tím a výsledok. Navyše je tam zobrazený symbol domčeka alebo symbol autobusu. Symbol domčeka predstavuje údaj o tom, ţe zápas je domáci, symbol autobusu prezentuje údaj o tom, ţe zápas sa hrá na pôde (štadióne) súpera. Všetky jednotlivé okná zápasov sú aktívne a kliknutím na dané políčko (dané okno) so zápasom sa zobrazí detail konkrétneho zápasu, teda návštevník stránky uvidí podrobný sumár z konkrétneho zápasu, na ktorý klikol. Takýto zápasový sumár obsahuje údaje o domácom tíme a o tíme hostí, celkový výsledok a výsledok po jednotlivých tretinách, ako aj dátum a čas konania zápasu. Potom nasledujú štatistické údaje o počte striel domáceho tímu, presilovkách a oslabeniach domáceho tímu, ako aj údaje o strelách, presilovkách a oslabeniach hosťovského tímu. Napokon nasleduje štatistika o góloch, o tom, kto gól dal, kto na gól prihral, informácia o počte divákov, zostavách domáceho a súperovho tímu, tréneroch jednotlivých tímov, rozhodcoch a stručný komentár k zápasu. Takýto zápasový sumár môţe byť okrem toho obohatený o linky, ktoré navedú návštevníka stránky na fotogalériu, prípadne videogalériu súvisiacu s týmto zápasom. Zápas je vlastne nosnou aktivitou daného hokejového klubu, je to vlastne to, čo je produktom tohto hokejového klubu, teda hokejové predstavenie, a preto táto lišta so zápasmi (zápasová lišta) a zápasový sumár sú jednými z najnavštevovanejších častí celého hokejového webu. 2.6 Zamrznuté okamihy Táto sekcia má rovnakú šírku ako sekcia najnovších článkov, teda zaberá 2/3 šírky celej stránky. Sekcia má zaujať svojím obsahom a upozorniť návštevníka stránky na mediálny 41

42 obsah webového portálu, v tomto prípade na fotografie. Ide o flashovú sekciu, ktorú som vytvoril ja sám (som autorom flashovej aplikácie). Flashové programovanie a flashovú technológiu opíšem v teórii. Túto časť som vytvoril špeciálne pre tento webový portál, pre svoj CMS. Obrázok 6 Zamrznuté okamihy Zdroj: vlastné spracovanie Úlohou tejto sekcie je efektívne, dynamickým spôsobom zobrazovať najnovšie fotografie, ktoré boli pridané do fotogalérie. Jej zmyslom a cieľom je upútať pozornosť návštevníka stránky a donútiť ho, aby na túto sekciu klikol a dostal sa ďalej na podstránku s fotogalériou, kde si má moţnosť prezrieť kompletnú fotodokumentáciu z jednotlivých zápasov. Táto sekcia (jej obsah, teda fotografie) je generovaná automaticky, a to tak, ţe administrátor stránky pridá na stránku napr fotografií zo zápasu, ktorý sa práve odohral, a webový portál automaticky zabezpečí, ţe náhodne vybraté fotografie z posledného pridaného súboru sa automaticky oreţú na primeranú veľkosť a uloţia na špeciálne miesto, odkiaľ ich moja flashová aplikácia vyberá a dynamicky ich zobrazuje práve v sekcii zamrznuté okamihy. Flashová aplikácia sama obrázky prevezme z daného adresára, sama ich rotuje (mení) v pravidelných intervaloch a celkovo dokresľuje jednotlivé fotografie efektmi, ktoré ešte zvýšia v tejto sekcii náboj zaujímavosti (v pozadí sa premieta dynamický text, prípadne logo klubu). Táto sekcia je navyše zaujímavá aj tým, ţe jednotlivé fotografie, ktoré sa dynamicky menia, sú orezané náhodne, teda návštevník stránky vidí vţdy len výrez z fotografie, ktorý predstavuje len časť skutočnej fotografie, čo niekedy poskytuje veľmi zaujímavý efekt nútiaci návštevníka stránky ďalej pokračovať tak, aby kliknutím na takto orezanú fotografiu získal kompletný obraz o celej fotografii (fotografie sú vlastne orezané automaticky, a teda nie vţdy 42

43 je jasné, aký obsah content tá fotografia má, čo daná fotografia obsahuje, pretoţe pouţívateľ alebo návštevník stránky vidia len jej časť). 2.7 Top články a reklamné bannery Táto sekcia svojimi rozmermi zaberá 2/3 šírky stránky a zobrazuje sa len na úvodnej stránke. Ide o sekciu skrytú, ktorá sa nezobrazuje na všetkých ďalších stránkach webového portálu. Sekcia najnovších článkov je dynamická aplikácia, ktorá pomocou Javascriptu (bude opísaný v teórii) a CSS štýlov mení dynamicky obsah tejto sekcie tak, ţe v pravidelných intervaloch mení upútavku na jednotlivé články, ktoré boli pridané v minulosti, pričom administrátor stránky môţe určiť, ktoré články sa v tejto sekcii budú zobrazovať, budú rotovať dookola, alebo môţe určiť, nech sa tam zobrazuje prvých n článkov. V mojom prípade sa v tejto chvíli na stránke nachádza 8 článkov, 8 stručných opisov článkov, ktoré sa nepretrţite točia dookola, a ich úlohou je upútať pozornosť návštevníka stránky tak, aby sa takýto článok stal pre neho neprehliadnuteľným. Obrázok 7 Top články a reklamné bannery Zdroj: vlastné spracovanie Tieto upútavky na najnovšie články môţu obsahovať aj upútavku na článok, ktorý bol na stránku umiestnený z historického hľadiska v staršom období, teda napr. aj článok umiestnený na stránku pred mesiacom, pretoţe administrátor stránky pokladá za dôleţité, aby takáto informácia a takýto článok boli neustále pred očami návštevníka, a preto môţe povedať, ţe aj článok, ktorý je mesiac starý, sa stále bude zobrazovať v týchto upútavkach (napr. článok, ktorý hovorí o darovaní 2 % alebo o nejakom sponzorstve znamená, ţe administrátor stránky chce, aby takýto článok bol dlhšie obdobie na úvodnej stránke, hoci je z časového hľadiska uţ starý, teda za ním nasledujú ďalšie články z hľadiska času novšie). Upútavka na najnovšie články má ešte jednu malú špecialitu, a tou je skutočnosť, ţe môţe obsahovať aj klasický reklamný banner. Znamená to, ţe okrem štandardnej 43

44 funkcionality zobrazenia posledných článkov, prípadne nejakých vybratých článkov môţe zobrazovať reklamný banner vo formáte plnohodnotného obrázka, teda je moţné vyuţiť túto sekciu aj na marketingové účely. Táto sekcia je umiestnená veľmi vysoko na stránke, a teda sa predpokladá, ţe ju pouţívateľ stránky neprehliadne. Je na úvodnej stránke, čo znamená, ţe je k dispozícii návštevníkovi stránky okamţite a nie je potrebné sa k tejto sekcii preklikať cez iné odkazy. Túto sekciu takisto pokladám za veľmi dôleţitú, pretoţe ako upútavka má veľký vplyv na čítanosť jednotlivých článkov. Štatisticky mám overené, ţe články umiestnené v tejto sekcii sú čítané desaťnásobne častejšie (čo sa týka ich počtu) ako článok, ktorý je štandardne umiestnený do zoznamu článkov. 2.8 Sekcia Najnovšie články Táto sekcia vedľa kalendára takisto zaberá 1/3 šírky stránky (zaradiť ju za sekciu najnovšie články, ale premenovať ju na sekciu vybratých článkov, jej cieľom je zobrazovať aj reklamné bannery, teda obrázky, a zobrazuje nielen najnovšie články, ale vybraté články, a tak by sme to snáď mohli aj nazvať, je to sekcia multiúčelová, pričom jedným jej zmyslom je zobrazovať reklamné bannery a druhým zmyslom je zobrazovať nie najnovšie články, ale vybraté články, a to vybraté z pohľadu hodnoty, akú daný článok pre administrátora stránky má, článok, ktorý si administrátor ţelá, aby bol neustále rotovaný, hoci môţe ísť o článok, ktorý bol napísaný uţ dávnejšie). 44

45 Obrázok 8 Najnovšie články Zdroj: vlastné spracovanie Sekcia najnovšie články reprezentuje posledných 10 pridaných článkov. Táto sekcia nemá moţnosť byť administrátorom stránky dynamicky modifikovaná. Jednoducho je to sekcia, kde sa na prvom mieste zobrazí posledný pridaný článok, a táto sekcia sa neustále posúva smerom nadol, pričom jedenásty článok vypadne a zjaví sa tam na prvom mieste prvý článok, teda posledný pridaný článok. Úlohou sekcie je dať návštevníkovi stránky k dispozícii veľmi rýchly odkaz na to, aby vedel, aký článok bol naposledy ako najnovší vloţený na stránku, a teda aby takýto článok neušiel jeho pozornosti. Sekcia najnovšie články sa teda automaticky generuje z článkov, jediné, čo je moţné v administrácii povedať, ţe sa bude, alebo nebude zobrazovať, ale inak nie je moţné meniť obsahovú časť tejto sekcie, lebo obsahová časť je dynamicky generovaná z článkov. Sekcia najnovšie články zobrazuje len nadpis článku. Je to vlastne len 10 riadkov, ktoré zobrazujú nadpisy posledných 10 článkov. Samozrejme, keď návštevník stránky klikne na ktorýkoľvek z nadpisov, automaticky sa dostane do časti, kde vidí uţ konkrétne ten daný článok, na nadpis ktorého klikol, a to so všetkými náleţitosťami, ktoré tento článok obsahuje. V navigačnom menu moţno aj zobraziť články podľa vybratej kategórie chronologicky a v prehľadnom zozname. V tomto zozname sa dá listovať (pohybovať sa dopredu a dozadu), pretoţe táto sekcia obsahuje stovky článkov. 45

46 Obrázok 9 Články Zdroj: vlastné spracovanie 2.9 Sekcia konkrétneho článku Sekcia konkrétneho článku je vlastne niečo podobné, ako keď som opisoval sekciu konkrétneho zápasu po kliknutí na kalendár alebo po kliknutí na okno so zápasom v uţ opísanej sekcii zápasov. Sekcia konkrétneho jedného článku, ktorý som si zvolil, respektíve na ktorý návštevník stránky klikol, obsahuje názov článku, stručnú informáciu o tom, či bol článok pridaný dnes (ak áno, tak sa v názve článku zobrazí grafický symbol s nápisom dnes), autora článku, dátum a čas, kedy bol článok vytvorený, štatistický počet jedinečných návštevníkov stránky, ktorí 46

47 túto stránku prečítali, počet komentárov, ktorými bol článok okomentovaný, ďalej podnadpis (hlavný nadpis je v článku zobrazený výrazným, veľkým písmom s podfarbením), ktorý bliţšie špecifikuje, o čo v článku ide. Okrem toho má článok svoj obrázok, svoj vlastný text, ako aj moţnosť vloţiť ďalšie obrázky. Moţno vidieť zdroj článku, ak je článok napr. prevzatý z inej webovej stránky alebo z kancelárie TASR (Tlačová agentúra Slovenskej republiky). Potom má článok základné tlačidlá na sociálne siete, teda na siete Facebook, prípadne Google +1, kde je moţné vyuţiť tlačidlo Like (páči sa mi) alebo kde moţno komentovať článok priamo na facebooku. Potom je tam navigačné tlačidlo Choď smerom nahor, ak je článok dlhý, alebo tlačidlo Späť, ktorým sa dá vrátiť na predchádzajúcu stránku, kde sme sa nachádzali predtým, neţ sme vošli na daný článok, ktorý v danej chvíli čítame. Nasleduje sekcia, ktorá sa viaţe ku konkrétnemu článku, a to je sekcia komentárov, kde je moţné, aby registrovaný návštevník stránky, ktorý je na stránke v danej chvíli prihlásený, komentoval daný článok, teda pridával diskusné príspevky k danému článku Sekcia Kalendár Táto sekcia svojím rozmerom zaberá 1/3 šírky stránky. Sekcia kalendár je jednou z najdôleţitejších sekcií, lebo poskytuje návštevníkovi stránky informácie o tom, ktoré zápasy sú na najbliţšie obdobie (mesiac, dni) naplánované. Sekcia kalendár vţdy zobrazuje aktívny mesiac, pričom navyše zahrnuje aj niekoľko dní z predchádzajúceho a nasledujúceho mesiaca. Sekcia kalendár slúţi na zobrazenie hracích dní farebnými symbolmi. Dni, v ktorých sa nehrá, sú označené sivou farbou, dni, keď hrá tím zápas na domácej pôde, sú označené ţltou farbou, a dni, keď tím hrá von, teda u súpera, sú označené modrou farbou. Táto farebná kombinácia označovania domácich zápasov a zápasov u hostí (teda ţltou a modrou farbou) je odvodená od klubových farieb. Na inom portáli rovnakého typu sú pouţité zasa iné farby. Toto všetko sa dá ľahkým spôsobom v konfigurácii navoliť. 47

48 Obrázok 10 Kalendár Zdroj: vlastné spracovanie Kalendár je kompletne tvorený programovaním v PHP a CSS. Je dynamický a pomocou malého javaskriptového kódu moţno prepínať mesiace nielen dopredu, ale aj späť dozadu. Zdrojom informácií pre kalendár je rozpis zápasov na celú sezónu, ktorý administrátor stránky vloţí do Intranetu. O Intranete budem písať v samostatnej časti tejto práce, pretoţe ide o veľmi rozsiahlu oblasť, ktorá si vyţaduje samostatný opis. Takţe sekcia kalendár ukazuje, čo nás v najbliţšom období čaká alebo čo sa v najbliţšej minulosti udialo. Kalendár má okrem toho ešte jednu malú funkciu, ktorou je to, ţe keď návštevník stránky sa svojou myšou (kurzorom) priblíţi (nemusí ani klikať, hovorí sa tomu hover) nad daný deň, zjaví sa mu nad týmto dňom stručné okno o tom, kto s kým vlastne v daný deň hrá, o ktorej hodine, a ak je to zápas, ktorý uţ bol odohratý, zobrazí sa aj jeho výsledok. Znamená to, ţe návštevník stránky jednoduchým pohybom myšou ponad kalendár získa rýchlu informáciu o tom, kedy náš tím (v tomto prípade ŠHK Piešťany) s ktorým tímom hrá a ak ide o zápas, ktorý bol uţ odohratý, aj to, s akým výsledkom sa skončil Sekcia Blahoţeláme Táto sekcia je tretinovou sekciou, svojou šírkou zaberá 1/3 stránky. Sekciu moţno v administrácii zapnúť alebo vypnúť, prípadne presunúť na ľubovoľné miesto na stránke. Sekcia blahoţeláme má podobnú funkcionalitu ako sekcia pipeline ak v danej chvíli neexistuje hráč alebo funkcionár klubu, ktorí v najbliţších dňoch budú oslavovať svoje narodeniny, táto sekcia sa vôbec nezobrazí. Inak platí pravidlo, ţe ak v najbliţšom týţdni 48

49 (teda v najbliţších 7 dňoch) existuje dátum, ktorý zodpovedá dátumu narodenia ktoréhokoľvek hráča alebo funkcionára daného hokejového klubu, jeho fotografia, meno a vek, ktorý oslavuje, sa zobrazia v tejto sekcii, pričom sa tam zobrazí aj údaj o tom, do ktorej vekovej kategórie daný hráč patrí, teda či je to hráč 4. ročníka, prípravky, junior, hráč seniorov alebo je to funkcionár, a vtedy sa zobrazí aj jeho funkcia (môţe to byť manaţér klubu, osoba, ktorá sa stará o ľadovú plochu a pod.). Obrázok 11 Blahoţeláme Zdroj: vlastné spracovanie Samozrejme, pre túto sekciu je dôleţité, aby boli všetci hráči a funkcionári nahratí v sekcii Intranetu (teda v časti stránky Intranet), kde je zoznam týchto osôb. V opačnom prípade (pri neexistujúcom zozname) sa sekcia nemôţe zobrazovať. Je teda veľmi dôleţité, aby administrátor stránky vytvoril takýto zoznam, pravidelne sa oň staral a aktualizoval ho vtedy má zmysel, aby sa táto sekcia zobrazovala. Je veľmi príjemné, keď sa na stránke hokejového klubu zobrazuje aj sekcia blahoţelaní, z čoho vyplýva, ţe klub na svojich jubilantov pamätá a blahoţelá im a ţe je preň dôleţité, aby takúto informáciu zverejnil, pretoţe je to také PR (public relations vzťahy s verejnosťou) klubu. Táto sekcia je len informatívna, ale má veľký význam z pohľadu medziľudských vzťahov a PR, ako aj z hľadiska aktivít klubu a z pohľadu rodičov (je príjemné, keď rodič vidí, ţe jeho jubilujúce dieťa je na klubovej stránke počas siedmich dní). 49

50 2.12 Sekcia Videá Sekcia upútavky na videá je tretinovou sekciou, zaberá 1/3 stránky. Táto sekcia ako jediná môţe byť zobrazená na stránke viackrát. Sekcia videá teda nie je limitovaná počtom zobrazení na úvodnej stránke. Ide o videá, ktoré sú umiestnené na známych videoportáloch, ako je You Tube, Voyo a pod. Administrátor stránky má moţnosť zapnúť alebo vypnúť sekciu videá na hlavnej, úvodnej stránke, pričom jednoduchým spôsobom len definuje video, ktoré chce do takejto sekcie vloţiť, teda jeho názov, a vloţí linku k tomuto videu. O všetko ostatné sa postará Content Management System, teda celá webová stránka, ktorá v takto definovanej sekcii videá zobrazí toto video na hlavnej stránke. Z hlavnej stránky sa potom toto video dá pustiť, zväčšiť na celú obrazovku, moţno pouţiť štandardné ovládacie prvky videoprehrávača, teda video posúvať, zastaviť, opäť spustiť, nastaviť hlasitosť alebo otvoriť video v jeho zdrojovej forme, čo znamená, ţe automaticky umoţňuje návštevníkovi stránky prekliknúť sa na stránku You Tube, Voyo a pod. Obrázok 12 Videogaléria Zdroj: vlastné spracovanie Sekcia videá je sekciou dynamickou a administrátor stránky môţe veľmi jednoduchým spôsobom kaţdý deň meniť obsah jednotlivých videoupútaviek na hlavnej stránke. 50

51 2.13 Sekcia Prehľad súťaţí SZĽH (Slovenského zväzu ľadového hokeja) Táto sekcia je tretinová, moţno ju umiestniť kdekoľvek na stránke, dá sa zapnúť a vypnúť (bude sa alebo sa nebude zobrazovať). Úlohou a cieľom tejto sekcie je poskytnúť rýchle navigačné odkazy návštevníkovi stránky tak, aby sa z tejto sekcie ďalej dostal na jednotlivé konkrétne stránky SZĽH. Slovenský zväz ľadového hokeja má svoju centrálnu stránku o celkovom dianí v oblasti hokeja na Slovensku, pričom táto mohutná stránka je rozčlenená na jednotlivé súťaţe, ktoré v rámci Slovenska prebiehajú. Vzhľadom na túto mohutnosť je zloţité preklikať sa na stránke SZĽH ku konkrétnemu tímu, ku konkrétnej súťaţi, ku konkrétnej vekovej kategórii, a tak získať štatistický prehľad o danej kategórii. Obrázok 13 Prehľad súťaţí SZĽH Zdroj: vlastné spracovanie Táto sekcia v mojom Content Management System má za úlohu vytvoriť jednotlivé linky, ktoré navedú návštevníka stránky práve na konkrétny klub v Piešťanoch, konkrétnu kategóriu a konkrétnu štatistiku prislúchajúcu tomuto danému klubu. Znamená to, ţe návštevník stránky získa rýchlu navigačnú linku na danú kategóriu, ktorú si chce pozrieť, ale hneď s tým, ţe ho to naviguje na tím ŠHK Piešťany. Teda v tejto sekcii je po sebe v poradí dôleţitosti linka na Tipsport extraligu, teda na seniorský A tím, potom nasleduje prvá hokejová liga, druhá hokejová liga, potom extraliga juniorov, extraliga dorastu, prvá liga juniorov, prvá liga dorastu atď. aţ po súťaţe starších ţiakov, mladších ţiakov a prípravky. Všetky uvedené linky navedú návštevníka stránky priamo na centrálnu stránku SZĽH, čím mu poskytujú rýchlu navigáciu, pričom návštevník stránky nie je nútený hľadať to, čo potrebuje, 51

52 na centrálnej stránke SZĽH manuálne, ale takýmto jednoduchým spôsobom sa veľmi rýchlo dostane k informáciám o svojom klube Sekcia Linky Aj táto sekcia je tretinová a moţno ju vypnúť a zapnúť. Ide o veľmi podobnú sekciu, ako je sekcia Prehľad súťaţí SZĽH. Sekcia linky neposkytuje v podstate nič iné, len moţnosť prekliknúť sa na iné stránky s tým rozdielom, ţe Prehľad súťaţí SZĽH poskytuje úzko špecializované linky viazané výlučne len na stránku SZĽH, ale sekcia Linky je sekciou všeobecnou. Tu je moţné, aby administrátor stránky sám nakonfiguroval túto sekciu ľubovoľnými odkazmi na rôzne stránky, ktoré sú z jeho pohľadu zaujímavé. Dôleţité je poznamenať, ţe v tomto prípade má administrátor stránky moţnosť kategorizovať jednotlivé odkazy do rôznych kategórií podľa zamerania. Je štandardné, ţe v tejto sekcii sa nachádzajú kategórie, ako je napr. Mesto, kde sú linky týkajúce sa mesta Piešťany, Trnavského samosprávneho kraja, alebo kategória Hokej na webe, ktorá obsahuje stránky ako hokej.sk, hokej.cz, hokejportál.sk, webhokej24.sk a pod. Potom existuje napr. kategória Médiá, ktorá priamo naviguje návštevníka stránky na denník Šport, Sme, denník Pravda, televíziu Markíza alebo JOJ, verejnoprávnu STV a pod. Okrem toho sú tu odkazy napr. na rôzne stránky, ktoré slúţia ako predajné miesta lístkov, ako je ticketportal, alebo sú tu komerčné odkazy, medzi ktoré patrí napr. ubytovanie v Piešťanoch, kúpele Piešťany, alebo Silverman výrobca dresov. 52

53 Obrázok 14 Linky (odkazy na iné stránky) Zdroj: vlastné spracovanie Ide teda o mnoţstvo odkazov na stránky, ktoré akýmkoľvek spôsobom súvisia s daným hokejovým klubom. Vzhľadom na rozsah týchto odkazov je, samozrejme, moţné ich kategorizovať. Cieľom je poskytnúť návštevníkovi stránky inšpiráciu, na čo všetko by sa mohol pozrieť. Tieto linky majú aj sekundárny význam z hľadiska optimalizácie webových vyhľadávačov, ako je Google, ako aj z pohľadu tzv. SEO optimalizácie, ktorú opisujem v teoretickej časti (konkrétne ide o výmenu odkazov, výmenu liniek, ktorá má za následok vznik väčšieho ranku väčšiu návštevnosť a väčšiu pozíciu vo vyhľadávačoch, napr. keď niekto hľadá informáciu a hokeji v Piešťanoch bez toho, aby poznal presný názov stránky) Sekcia Zabavte sa Táto sekcia je rovnako tretinová a moţno ju zapnúť a vypnúť. Ide o aplikáciu, ktorú som takisto programoval špeciálne pre športové stránky. Je to JavaScript v kombinácii s CSS a je to aplikácia, ktorá spĺňa len zábavnú funkciu. Táto aplikácia simuluje známu hru 15, pričom mojím cieľom bolo nepouţiť čísla, ale obrázok, ktorý nahrádza maticu 4 4. Zmyslom tejto sekcie je umoţniť hrať jednoduchú hru poskladať jednotlivé rozhádzané obrázky do skutočnej podoby celého obrázka. Celý obrázok je vlastne rozrezaný na 15 53

54 malých štvorcových častí, pričom 16. štvorček slúţi ako prázdne miesto, na ktoré sa presúvajú jednotlivé obrázkové štvorce tak, aby sa obrázok dal poskladať. Obrázok 15 Zabavte sa (hra 15) Zdroj: vlastné spracovanie Sekcia Zabavte sa je zaujímavá tým, ţe administrátor stránky môţe jednoduchým spôsobom tento obrázok meniť a návštevník stránky sa v rámci svojho krátkeho voľného času zabaví a môţe poskladať obrázok hráča, obrázok zo zápasu alebo napríklad logo daného klubu. Pretoţe klub ŠHK Piešťany práve v tejto sezóne zmenil svojho maskota a svoje logo, je táto sekcia ideálnym miestom na ich prezentáciu návštevníkovi stránky zaujímavou a zábavnou formou. Táto sekcia je umiestnená v dolnej časti stránky, pretoţe svojím obsahom nie je aţ taká dôleţitá, aby zaberala prvé miesta v hornej časti stránky Flash Countdown Ako som uţ v úvode spomenul, hlavným produktom hokejového klubu je hokejový zápas hokejové predstavenie. Všetko je teda zamerané na hokejový zápas, s čím súvisí aj 54

55 táto sekcia Flash Countdown. Úlohou tejto sekcie je upútať pozornosť návštevníka stránky graficky zaujímavou formou formou odpočítavania dní, hodín, minút a sekúnd do začiatku najbliţšieho zápasu. Obrázok 16 Flash Countdown Zdroj: vlastné spracovanie Táto sekcia je vlastne len samostatná flashová aplikácia, ktorá automaticky zo zoznamu zápasov generuje počet dní, hodín, minút a sekúnd do najbliţšieho zápasu grafickou formou, ktorou sa tento čas mení automaticky smerom nadol (zniţuje sa, ubúda), animuje sa tento čas, teda nie je to statická, ale dynamická aplikácia. Jej úloha je len informačná. Ide o určitý druh psychologického prvku, ktorý vypovedá o tom, kedy sa najbliţšie bude hrať Rozpis zápasov, najbliţší a posledný zápas Táto sekcia predstavuje jeden prvok, ktorý sa delí na 3 samostatné časti, pričom v jednom okamihu môţe byť zobrazená iba jedna z týchto 3 častí. Časti sú delené na nasledujúci zápas, posledný zápas a rozpis zápasov. Kaţdá z uvedených samostatných častí tejto sekcie zobrazuje údaje v súlade so svojím nadpisom. Prvá z častí zobrazuje logá tímov, ktoré budú hrať najbliţší zápas, teda logo domáceho tímu 1 (ŠHK Piešťany) a logo súpera (HK Poprad). Okrem toho je tu zobrazený dátum a čas tohto zápasu. V druhej časti je zobrazené v podstate to isté ide o súperov posledného odohratého zápasu ( ich logá), výsledok zápasu (aj po tretinách) a dátum odohratia zápasu. V poslednej časti tejto sekcie sa nachádza rozpis najbliţších 7 zápasov, ktoré sa uskutočnia. 55

56 Obrázok 17 Nasledujúci a posledný zápas Zdroj: vlastné spracovanie Všetky opísané 3 časti jednej sekcie majú aktívne odkazy, teda návštevník stránky môţe kliknúť na časť nasledujúci zápas alebo posledný zápas, prípadne na kaţdý zo 7 nasledujúcich zápasov, ktoré sa od tohto okamihu uskutočnia, čím sa dostane na konkrétny zápas, na ktorý klikol. V súvislosti s touto sekciou opíšem aj sekciu zoznam (rozpis) zápasov. Táto sekcia sa zobrazuje v hlavnom priestore (stĺpci) stránky, teda tam, kde sa zobrazujú články, kde sa zobrazuje hlavný obsah. Rozpis zápasov moţno selektovať na základe sezóny, pričom prednastavenie (default) zobrazuje vţdy aktuálnu sezónu. Tento rozpis zápasov sa ďalej delí podľa jednotlivých mesiacov od začiatku sezóny a prehľadným spôsobom zobrazuje všetky zápasy, ktoré sa uţ odohrali alebo sa ešte len budú hrať. V rozpise zápasov sa nachádza dátum zápasu, jednotliví súperi, pri odohratom zápase jeho výsledok, číslo hracieho kola, prípadne symboly, ktoré vyjadrujú, či sa k danému zápasu nachádza nejaký videozáznam alebo nejaká fotogaléria. Samozrejme, aj tu platí pravidlo, ţe kaţdý zápas je vlastne linkou, ktorá návštevníka stránky ďalej odkáţe na podrobnosti o danom zápase, na ktorý práve klikol. 56

57 Obrázok 18 Rozpis zápasov Zdroj: vlastné spracovanie 2.18 Aktuality Táto sekcia sa nachádza v pravej časti, v pravom stĺpci stránky. Jej primárnou úlohou je stručne informovať o dianí v klube, informovať o aktualitách, o novinkách, ktoré nemajú charakter článku ani svojím rozsahom a ani svojím zameraním. Tento priestor je určený na jasné, stručné informácie o dianí v klube jednou, dvoma alebo troma vetami. Samozrejme, aj takáto aktualita, ktorá má skôr charakter rešerše a výberu z toho, čo sa v danom klube odohráva, poskytuje moţnosť odkazu na článok, fotogalériu či zápas, teda na zdroj, ktorý podrobnejšie opíše danú aktualitu. 57

58 Obrázok 19 Aktuality Zdroj: vlastné spracovanie 2.19 Anketa Administrátor stránky má moţnosť vytvoriť jednu alebo aj viac Ankiet, ktoré sa zobrazujú na stránke v pravom stĺpci. Anketa zaberá 1/3 šírky stránky, túto sekciu moţno takisto vypnúť alebo zapnúť, pričom tu okrem toho jestvuje moţnosť nastaviť dátum začiatku a konca zobrazovania. Administrátor stránky môţe teda definovať koniec zobrazenia ankety, ktorá sa od daného dátumu sama prestane zobrazovať. Obrázok 20 Anketa Zdroj: vlastné spracovanie Ankety fungujú tak, ţe sa definujú v časti Intranetu spôsobom ako pri pridávaní nových článkov alebo čohokoľvek iného. Kaţdá anketa má svoju otázku a svoje odpovede. Počet 58

59 odpovedí nie je limitovaný a dajú sa pridávať podľa potreby pod seba. Anketa sa automaticky sama graficky zobrazuje na hlavnej stránke s tým, ţe pomocou posuvníka (pomocníka), ktorý predstavuje 100 %, sa graficky znázorní práve tá časť, ktorá reprezentuje aktuálny stav hlasovania. Súčasťou ankety je i zobrazenie celkového počtu respondentov, ktorí sa do ankety zapojili. Špecifickým vybavením ankety je aj zabezpečenie, ktoré zaistí, ţe IP adresa návštevníka stránky, ktorý sa rozhodne pre jednu z odpovedí a klikne na ňu, sa zapíše do databázy s tým, ţe ďalšie hlasovanie takéhoto návštevníka stránky z danej IP adresy je opäť moţné aţ o 24 hodín alebo aţ po určitom čase, ktorý administrátor stránky nastaví. Teda nie je moţné, aby respondent len beţným kliknutím zmenil charakter odpovede, čím by mohol zmariť výsledok ankety, ktorá by potom nereprezentovala názory návštevníkov stránky. Anketa je len akýmsi spríjemnením celej webovej stránky, ale často poskytuje aspoň pribliţnú predstavu o názoroch fanúšikov, najmä pri záleţitostiach týkajúcich sa práve ich (napr. najvhodnejšia hodina začiatku ligových stretnutí, tipy na majstra sveta, uprednostnenie investícií do veľkoplošnej obrazovky alebo do kvalitného osvetlenia). Anketa teda poskytuje návštevníkovi stránky moţnosť vyjadriť svoj názor Zápasy, Autobus, Prenájom Táto sekcia sa nachádza takisto na pravej strane stránky a je rozdelená na 3 časti, teda formou záloţiek (alebo stránok) na 3 rôzne podsekcie, a to Zápasy, Autobus a Prenájom. Úlohou tejto sekcie je informovať špecifickú skupinu návštevníkov stránky o podstatných skutočnostiach. Podsekcia Zápasy informuje predovšetkým rodičov o tom, ktoré zápasy sa v najbliţšom týţdni uskutočnia (domáce aj na súperovej pôde), pričom v tejto časti sú uvedené zoznamy všetkých mládeţníckych tímov. Ide o sekciu veľmi obľúbenú u rodičov, v ktorej sa presne dozvedia o odchode autobusu, ak sa zápas neuskutoční na domácej pôde, alebo o tom, kedy sa hrá domáci zápas. Táto podsekcia umoţňuje rýchlu orientáciu o tom, v ktorom dni ktorá mládeţnícka kategória hrá zápas či uţ doma, alebo von. Druhá špecifická záloţka sa nazýva Autobus. Ide o výňatok z prvej záloţky (Zápasy). Sú v nej zobrazené len zápasy, ktoré sa hrajú na súperovej pôde, pričom pri kaţdom jednom zápase sa nachádza stručný časový údaj o tom, kedy bude pristavený autobus a kedy moţno prísť na štadión a odísť na zápas, ktorý sa uskutoční von. 59

60 Tretia záloţka Prenájom uvádza špecifický rozpis prenájmu ľadovej plochy určený pre komerčných zákazníkov hokejového klubu. Hokejový klub je zisková organizácia, ktorá má svoje komerčné aktivity. Voľnú ľadovú plochu sa snaţí prenajať rôznym záujmovým skupinám. Tento priestor na stránke umoţňuje teda získať prehľad o tom, kto a v akom časovom intervale má rezervovanú ľadovú plochu. Obrázok 21 Zápasy, Autobus, Prenájom Zdroj: vlastné spracovanie 60

61 2.21 Tabuľky a štatistiky Táto sekcia má svojím dizajnom rovnaký charakter ako predchádzajúca sekcia a takisto sa skladá z troch záloţiek (podsekcií, podstránok). Prvá záloţka reprezentuje tabuľku najvyššej Tipsport extraligy, kde sú v poradí od 1 do 10 zoradené tímy tak, ako sú umiestnené v aktuálne prebiehajúcej súťaţi. Táto tabuľka sa preberá zo stránky SZĽH, teda zo stránky centrálnej štatistiky, a ide vlastne len o kópiu centrálnej štatistiky, ktorá je zobrazená priamo na stránke hokejového klubu, a preto nie je potrebné prechádzať na stránku SZĽH. Obrázok 22 Tabuľky a štatistiky Zdroj: vlastné spracovanie V druhej časti tejto sekcie sa nachádza podrobná štatistika daného hokejového klubu (v tomto prípade ŠHK Piešťany). Štatistika sa týka jednotlivých hráčov, ich menný zoznam je usporiadaný podľa úspešnosti od najúspešnejšieho hráča aţ po najslabšieho. Táto tabuľka zobrazuje počet odohratých zápasov, dosiahnutý počet gólov, asistencií, trestných minút a +/- skóre. Sekcia zobrazuje aj úspešnosť brankárov a ich zoznam pre daný klub. Ďalšia podsekcia zobrazuje štatistiku najúspešnejších hráčov v rámci celej Tipsport extraligy, teda je tu uvedených prvých 20 najúspešnejších hráčov tejto Tipsport extraligy. Návštevník stránky má tak moţnosť porovnať štatistiku vlastného muţstva (Piešťan) so štatistikou hráčov celej Tipsport extraligy. 61

62 2.22 Registrácia a prihlásenie Táto sekcia je veľmi podstatnou časťou celej stránky, pretoţe je vstupnou bránou návštevníka stránky dovnútra stránky a do sekcií, ktoré beţnému pouţívateľovi nie sú prístupné. Na stránke sa nachádza mnoho častí, ktoré sú prístupné len po zaregistrovaní a po prihlásení sa. Úlohou tejto sekcie je teda v prvom rade zaregistrovať návštevníka stránky a po registrácii mu umoţniť, aby sa svojím prihlasovacím menom a heslom prihlásil. Aţ potom má návštevník stránky moţnosť pridávať komentáre k článkom a zápasom, čo neprihlásenému pouţívateľovi nie je umoţnené. Okrem toho je tento priestor určený aj na vstup do sekcie Intranetu. Obrázok 23 Prihlasovací formulár Zdroj: vlastné spracovanie UML V tejto časti sa musím trošku venovať pojmom UML a CASE nástroje aby som zdôraznil ako mi nesmierna pomohli jednak pri tvorbe dátového modelu, teda domén, atribútov a ich vzájomných väzieb no tieţ pri návrhu samotnej logiky prihlasovania a registrácie návštevníkov stránky. Vyuţil som nástroje CASE a jazyk UML na modelovanie MySQL databázy v prostredí programu Enterprise Architect. Zakreslenie domén, atribútov, vzájomných väzieb mi pomohlo predísť moţným problémom pri programovaní. Dátový model mi poskytol jasnú 62

63 predstavu o tom, ako vzájomne jednotlivé domény súvisia. Povaţujem preto za dôleţité vysvetliť, čo je to jazyk UML a nástroje CASE. Modelovací jazyk UML (Unified Modeling Language) je výsledkom snaţenia analytikov a dizajnérov, ktorí v priebehu 80. a 90. rokov vytvárali metódy umoţňujúce opísať objektovo orientovanú analýzu a návrh (KANISOVÁ a kol., 2007, s. 11). Najaktuálnejšou verziou jazyka UML je UML 2.0. Jazyk sa pouţíva na vyjadrenie analytických a návrhových modelov pomocou grafických notácií a umoţňuje modelovať jednoduché aj zloţité aplikácie, pričom sa pouţíva rovnaká formálna syntax, ktorá umoţňuje výsledky práce vyuţívať aj s inými návrhármi. Výsledné modely sú pochopiteľné aj pre zadávateľa aplikácie, čo má za následok kvalitné poţiadavky pouţívateľov na vytváraný systém. UML je aj jazykom na vizualizáciu, špecifikáciu, stavbu a dokumentáciu softvérových systémov. Jazyk je navrhnutý tak, aby ho mohli implementovať všetky nástroje CASE. Jazyk UML neponúka nijaký druh metodiky modelovania, i keď určité aspekty metodiky môţeme nájsť v kaţdom z prvkov, z ktorých sa model UML skladá. Samotný jazyk však poskytuje iba vizuálnu syntax, ktorú môţeme vyuţiť pri zostavovaní svojich modelov (ARLOW a kol., 2008, s. 28) CASE nástroje CASE nástroje (Computer Aided Software Engineering nástroje na podporu analýzy a návrhu aplikácií) vychádzajú práve z modelovacieho jazyka UML. Tieto nástroje umoţňujú prepojenie jednotlivých techník UML, vyuţitie modelov medzi členmi tímu, teda tímovú prácu. Produkty CASE sú ideálnym nástrojom pre návrh informačných systémov, pretoţe umoţňujú v rámci jediného prostredia identifikovať dôleţité diagramy UML (ale aj procesné a dátové modely) potrebné na analýzu a návrh informačných systémov (KANISOVÁ a kol., 2007, s. 12) Diagram aktivít Okrem modelovania databázových domén som vyuţil jazyk UML aj na zakreslenie diagramu aktivít, ktorý opisujem na príklade v praktickej časti tejto práce. Diagram aktivít (Activity Diagram) zobrazuje postupnosť aktivít, ktorá znázorňuje správanie systému. Môţeme ho povaţovať za akúsi alternatívu stavového diagramu, čo má za následok podobnosť terminológie pouţitej pri obidvoch typoch diagramov. Diagram aktivít 63

64 moţno pouţiť na modelovanie obchodných procesov a pracovných postupov (ARLOW a kol., 2008, s. 286). Na sekcii prihlásenia demonštrujem aj pouţitie nástroja CASE, konkrétne pouţitie UML na modelovanie diagramu aktivít. Takýto diagram je základným predpokladom práce programátora. Sám zo svojich dlhoročných skúseností viem, ţe som musel veľakrát prerábať svoj zdrojový kód, pretoţe som nemal globálny pohľad na procesy, ktoré majú byť ošetrené pri riešení napríklad sekcie pouţívateľského prihlasovania na webovú stránku. Diagram aktivít mi pomohol nezabudnúť na ţiadnu moţnú udalosť a najmä hneď od začiatku sa stal môj kód oveľa prehľadnejším a čitateľnejším. Pomohol mi aj definovať si triedy, ktoré som ďalej uţ pouţíval globálne. Vzhľadom na rozsah práce som uviedol príklad Diagramu aktivít, ktorý pekne ilustruje, ako sa dá tento uţitočný modelovací jazyk UML vyuţiť. Obrázok 24 Diagram aktivít Zdroj: vlastné spracovanie 64

65 Existuje teda zoznam zaregistrovaných pouţívateľov, pričom kaţdý z nich má pridelené prístupové práva. Ak ide o beţného fanúšika, sú tieto práva najniţšie (právo komentovať články, právo prístupu do sekcií stránky, ktoré nie sú voľne prístupné neregistrovanému návštevníkovi). Ak ide o návštevníka stránky, ktorý má administrátorské práva, táto sekcia mu po prihlásení a zaregistrovaní umoţňuje dostať sa na Intranet, teda na časť stránky, ktorá je prístupná skutočne len úzkemu počtu osôb, a aktívne obsahovo ju napĺňať alebo meniť. Táto sekcia je teda vstupnou bránou nielen pre beţných návštevníkov stránky, ale aj pre administrátorov stránky, ktorí sa starajú o jej obsah, t. j. redaktorov, fotografov a pod. Obrázok 25 Registračný formulár Zdroj: vlastné spracovanie Ešte pár viet k sekcii Prihlásenie (Zaregistrujte sa). Ak chce návštevník stránky komentovať články a byť aktívnym prispievateľom, musí sa zaregistrovať. Pre registráciu sú nevyhnutné nasledujúce údaje: meno, priezvisko, ová (elektronická) adresa, potvrdzovací , t. j. , ktorý je skutočne reálny, pretoţe na tento dostane ten, čo sa chce zaregistrovať, kontrolnú správu, a jeho účet na stránke je aktívny aţ potom, keď na tento odpovie. Okrem toho je to prihlasovacie meno, ktoré si môţe ľubovoľne vybrať, heslo a overovací reťazec, teda ochrana proti robotom a proti automatickým skenerom. Overovací reťazec je riešený formou Captcha, čo sú rôzne písmená a číslice uloţené v rozličných pozíciách pod rôznymi uhlami a v rôznych veľkostiach, pričom je nevyhnutné 65

66 rozoznať tieto číslice a písmená len na základe ľudskej inteligencie. Existuje predpoklad, ţe beţný počítač si so svojou dedukciou s takýmto rozlíšením neporadí, a preto je tento formulár chránený pred automatickým vypĺňaním robotmi. Pri registrácii je dôleţitá aj kvalita hesla. Táto kvalita je kontrolovaná pomocou Ajax technológie, ktorá kontroluje počet znakov, kombináciu malých a veľkých písmen, prípadne numerických znakov. 66

67 Príklad 1: časť AJAX kódu overujúceho prihlásenie pouţívateľa <?php session_start(); require_once('ajax.functions.php'); require_once('../connect.php'); require_once('../config.php'); unset($_session[$_server['server_name']]['login_err']); unset($_session[$_server['server_name']]['user']); if (isset($_post['name']) && isset($_post['passwd']) && $_POST['kontrola']==='') { // ak su vyplnene udaje $query=sprintf("select * FROM CIS_UZIVATELIA WHERE UZ_LOGIN='%s' AND UZ_PASSW='".md5($_POST['passwd'])."'",smart_quote($_POST['name'])); if (!$result=mysql_query($query)) cap_err('chyba SELECT uzivatela pri logine.','login.php',$query); $row=mysql_fetch_array($result, MYSQL_ASSOC); $kolko=mysql_num_rows($result); if ($kolko>1) { // ak nie je len jeden $hlaska='chyba prihlásenia. Kontaktujte správcu.'; } else if ($kolko<1) { $hlaska='nesprávne prihlasovacie údaje.'; } else if ($row['uz_allow']!=='t') { $hlaska='užívateľský účet nie je povolený.'; } else { $query="update CIS_UZIVATELIA SET `UZ_LASTLOGIN`=UZ_THISLOGIN, UZ_THISLOGIN='".time()."' WHERE UZ_ID='".$row['UZ_ID']."'"; if (!$result=mysql_query($query)) cap_err('chyba UPDATE uzivatela pri logine.','login.php',$query); $_SESSION[$_SERVER['SERVER_NAME']]['user']=$row; if ($_POST['autologin']=='on') { SpravCookie($row); } } } else $hlaska="nesprávne vyplnené údaje."; $_SESSION[$_SERVER['SERVER_NAME']]['login_err']=$hlaska; header('location: /uvod#login');?> 67

68 2.23 Reklamné bannery Pretoţe ide o klasický komerčný klub, je potrebné na stránke vyhradiť priestor na reklamné bannery. Na tento cieľ sú určené dve samostatné sekcie. Jedna predstavuje svojím zobrazením pevné, statické bannery a druhá bannery, ktoré sú zásluhou JavaScriptu a CSS štýlov dynamické (zvyčajne veľa malých, zloţených z lôg firiem), menia sa na stránke, a to preto, ţe klub má často veľa sponzorov, a teda nie je moţné zobraziť všetky logá naraz a ani by to neprispievalo k peknému dizajnu stránky. Preto je sekcia reklamných bannerov riešená takouto dynamickou formou, pri ktorej sa jednotlivé logá firiem menia. Obrázok 26 Reklamní partneri Zdroj: vlastné spracovanie Táto sekcia s reklamnými partnermi je rozdelená na hlavných partnerov, kde sa zobrazujú logá s väčšou šírkou a výškou (vo väčšej veľkosti), a sekciu beţných partnerov, kde sú logá menšie. 68

69 Reklamná sekcia môţe pouţívať aj statické bannery, teda nejde len o logo firmy, ale o grafickú reprezentáciu nejakej reklamy. Tento reklamný priestor moţno vyuţiť ako reklamné miesto a predávať ho na stránke, získať nejaké finančné prostriedky z webovej stránky a z reklamnej činnosti Burza Burza je priestor na stránke, na ktorom moţno veľmi jednoduchým spôsobom zadať akýkoľvek inzerát týkajúci sa predaja alebo kúpy, prípadne inzerát týkajúci sa zamestnania, samozrejme, vţdy v súvislosti s hokejovým klubom. Beţne sa stáva, ţe rodičia dorastajúcich detí si potrebujú medzi sebou vymieňať hokejový výstroj staršie deti odovzdávajú pouţitý výstroj mladším deťom formou predaja a kúpy za veľmi výhodných podmienok. Úlohou tejto sekcie je teda vytvoriť na stránke priestor pre tých, čo majú záujem niečo ponúknuť, alebo pre tých, čo chcú niečo kúpiť. Jednoducho stačí zadať typ burzy (kúpa, predaj), uviesť mailovú adresu, telefonický kontakt a napísať text. Táto burza je prístupná pre všetkých a je zdarma. Obrázok 27 Burza Zdroj: vlastné spracovanie 2.25 Hráči (zoznam) Ďalšou samostatnou časťou stránky je časť venovaná hráčom. Táto sekcia je pomerne rozsiahla a jej úlohou je priblíţiť návštevníkovi stránky zoznam aktívnych, aktuálne pôsobiacich hráčov v klube, a to najskôr formou zoznamu. Riadkový zoznam hráčov obsahuje 69

70 meno hráča, jeho výšku, hmotnosť, dátum a miesto narodenia. Hráči sú kategorizovaní na brankárov, obrancov a útočníkov. Obrázok 28 Hráči (zoznam) Zdroj: vlastné spracovanie V tejto sekcii môţe návštevník stránky získať aj informáciu o realizačnom tíme, o tabuľke, štatistike, o rozpise zápasov týkajúcich sa daného zoznamu, na ktorom sa návštevník stránky práve nachádza. Stránka totiţ neobsahuje len zoznam hráčov A muţstva, teda nielen seniorských kategórií, ale aj zoznamy hráčov všetkých ostatných kategórií, teda aj juniorov, dorastencov a všetkých mládeţníckych kategórií. 70

71 Obrázok 29 Hráč (detail) Zdroj: vlastné spracovanie Okrem tohto zoznamu poskytuje táto sekcia aj detailný pohľad na konkrétneho hráča. Kaţdý riadok, ktorý reprezentuje jedného hráča, je riadkom aktívnym. Kliknutím na takýto riadok získa návštevník stránky detailný pohľad na konkrétneho hráča, teda jeho fotografiu, základné údaje o ňom, medzi ktoré patrí meno a priezvisko hráča, dátum a miesto narodenia, štátna príslušnosť, jeho výška, hmotnosť, hráčsky post a prípadne aj stručný opis jeho kariéry Napíšte nám Ďalšou dôleţitou časťou stránky je Kontaktný formulár s názvom Napíšte nám. Práve na tento formulár je zameraných niekoľko odkazov z rôznych častí stránky. Úlohou formulára je získať akékoľvek (pozitívne aj negatívne) názory, reakcie alebo referencie na samotnú stránku. Na tomto kontaktnom mieste môţe ktorýkoľvek návštevník stránky zanechať odkaz, ktorý sa dostane do mailového koša administrátora stránky a ten môţe vyuţiť tieto informácie na zdokonalenie stránky alebo na zabezpečenie väčšej informovanosti, prípadne na realizáciu toho, čo je predmetom samotnej správy vo formulári Napíšte nám. 71

72 Teda aj keď návštevník stránky napríklad nemá moţnosť v danej chvíli telefonovať, môţe priamo zo stránky kontaktovať klub, administrátora, a tak získať nejaké údaje alebo všeobecne poskytnúť komentár k niečomu. Obrázok 30 Napíšte nám Zdroj: vlastné spracovanie 2.27 Rozpis ľadovej plochy Rozpis ľadovej plochy je veľmi dôleţitou časťou hokejového CMS a podľa štatistík je to jedna z najnavštevovanejších stránok. Rozpis ľadovej plochy je vţdy dynamicky generovaný pre aktuálny, práve prebiehajúci týţdeň a pre týţdeň nasledujúci. Teda návštevník stránky vidí rozpis na 2 týţdne kategorizovaný podľa dní a hodín. Jednotlivé údaje sú v rozpise farebne odlíšené podľa toho, či ide o beţný tréning, komerčný čas alebo o zápas A muţstva. Tento rozpis ľadovej plochy je ďalej automaticky generovaný na verziu pre tlač, 72

73 pričom sa automaticky generuje jeho verzia v pdf, teda verzia Acrobat Reader tak, aby si návštevník stránky mohol rozpis ľadovej plochy vytlačiť. Obrázok 31 Rozpis ľadovej plochy Zdroj: vlastné spracovanie Veľmi dôleţité je, ţe Rozpis ľadovej plochy je na stránke vo formáte XML, teda vo formáte semištruktúrovaných dát, ktoré sú generované zo samostatnej desktopovej aplikácie s názvom Club's Manager. Túto aplikáciu som takisto vytvoril ja sám, pričom je primárne určená na sprístupňovanie informácií o hráčoch v rámci klubu. Ide o sieťovú aplikáciu, teda je nainštalovaná na serveri, a kaţdý počítač v rámci klubu má k tejto aplikácii prístup. Základom aplikácie je zoznam hráčov s ich identifikačnými údajmi, zdravotnými prehliadkami, zmluvami, prestupovými termínmi a pod. Jednou z častí aplikácie Club's Manager je aj sekcia, ktorá má na starosti rozpis ľadovej plochy. Keď administrátor klubu alebo manaţér klubu či mládeţe, jednoducho osoba, ktorá má v klube na starosti rozpis ľadovej plochy, tento rozpis pripraví v aplikácii Club's Manager, jednoduchým spôsobom stlačí tlačidlo exp na webovú stránku a vtedy sa rozpis ľadovej plochy pripraví do XML formátu a pomocou FTP protokolu presunie na webovú stránku, a tak je okamţite pripravený na zverejnenie na webovej stránke. To je dôleţité práve preto, ţe rozpis ľadovej plochy sa veľmi často dynamicky mení a bolo by veľmi ťaţké modifikovať ho priamo na webovej stránke. Keďţe existuje desktopová aplikácia, ktorá je na to priamo určená, tak som vyuţil moţnosť, ţe pomocou XML formátu tieto dáta len presúvam na webovú stránku, čím sa celý proces evidencie rozpisu ľadovej plochy podstatne zjednodušil, no predovšetkým nie je potrebné 73

74 zadávať tento rozpis osobitne do interného systému hokejového klubu a osobitne na webovú stránku. Jednoducho stačí ho zadať len raz do desktopovej aplikácie a jednoduchým presunom na webový server sa rozpis ľadovej plochy zobrazí na webovej stránke Administrátorská zóna Administrátorská zóna ako nevyhnutná súčasť kaţdého CMS Administrátorská zóna je nevyhnutnou súčasťou kaţdého CMS. Predstavuje vnútorný lokálny systém (určený len pre malé skupiny pouţívateľov, administrátorov). Ide vlastne o samostatnú plnohodnotnú webovú stránku, ktorá je však pre beţných návštevníkov nedostupná (skrytá). Keď sa návštevník stránky prihlási svojím menom a heslom, na základe toho, aké práva má pridelené, sa mu umoţní vstup do rôznych častí stránky. Beţný návštevník stránky pri svojej registrácii získava prednastavené najniţšie práva, teda môţe len komentovať články a zápasy a prispievať do diskusného fóra. Administrátor stránky má však prístup do administrátorskej zóny, ktorú vidí len on a niekoľko ďalších osôb, ktoré majú právo prispievať na stránku aktívne, teda vytvárať jej obsah. Administrátor má administrátorské (najvyššie) práva, a teda aj právo určovať ďalšiu skupinu ľudí, ktorí budú mať takisto prístup do tejto skrytej sekcie. Administrátor deleguje ďalšie práva práva redakčné, ktoré umoţňujú redaktorom napĺňať stránku obsahovo cez administrátorskú zónu. Beţný návštevník stránky má len najniţšie práva a dostane sa len na hlavnú stránku, teda nemá prístup do administrátorskej zóny. Administrátorská zóna je teda plnohodnotná webová stránka určená na napĺňanie obsahu hlavnej webovej stránky. Táto sekcia stránky sa svojím dizajnom nedá porovnať s hlavnou stránkou, čo však ani nie je jej účelom. Jej úlohou je poskytnúť pouţívateľsky príjemné rozhranie na napĺňanie hlavnej webovej stránky, a to tak, aby ten, čo obsah vytvára, nemusel byť programátorom a nepotreboval ani poznať základné pravidlá vytvárania webových stránok a aby intuitívnym spôsobom dokázal napĺňať obsah hlavnej webovej stránky Intranet je rozdelený na štyri sekcie V prvej sekcii sa nachádza základné, navigačné menu, ktoré je hlavnou podstatou stránky. V tomto menu sa dajú pridávať články, zápasy, hráči, editovať a modifikovať realizačné tímy jednotlivých druţstiev, pridávať aktuality pipeline alebo aktuality v sekcii na 74

75 pravej časti stránky (hlavné aktuality), pridávať a editovať anketu, fotogalérie, fotografie, modifikovať burzu (niektoré príspevky odstrániť). Ďalšou hlavnou časťou Intranetu je sekcia s názvom číselníky. Táto sekcia má menu (poloţky) ako sezóny, kategórie, typy zápasov, súťaţe, tímy, rozhodcovia. Ide v podstate o určitý spôsob kategorizácie jednotlivých prvkov, ktoré sa potom vyuţívajú ako vstupné políčka pre hlavné databázy. Číselník je určitá forma tabuliek databáz, ktoré uľahčujú napĺňanie hlavných databáz (napr. ak treba evidovať adresy tisícky ľudí bývajúcich v Martine a neustále by bolo potrebné nahadzovať poštové smerovacie číslo a mesto, bol by to veľmi neefektívny spôsob; oveľa efektívnejšie je mať niekde k dispozícii číselník poštových smerovacích čísel, zadať len kód a mesto sa automaticky vyberie z tohto číselníka). Pri článkoch je veľmi neefektívne neustále vypisovať sezónu 2012/2013, a preto je vhodné vloţiť si túto sezónu do číselníka sezón a pri zadávaní nového článku uţ len jednoducho vybrať zo zoznamu sezón tú, ktorá je potrebná. Číselník má aj ďalšiu dôleţitú vlastnosť odstraňuje chybovosť ľudského faktora. Ak teda potrebujem napríklad pri zápase jasne definovať, pre ktorú kategóriu zápas vytváram (seniori, juniori, dorast, 9. ročník atď.), je pri ručnom vypĺňaní väčší predpoklad vzniku omylov (počítač pokladá údaje zapísané rôznou formou za rozdielne, napr. 9. ročník, 9. Ročník, 9 ročník). Oveľa efektívnejšie je vytvoriť vekové kategórie, v ktorých sa údaj zadá správne, a potom sa pri zápasoch len vyberie. Číselník je teda určitá forma zjednodušenia na napĺňanie tabuliek, ktorá sa naplní jednorazovo. S číselníkmi sa pracuje len veľmi sporadicky, napr. pri sezónach sa nová sezóna pridá len raz do roka, pri tímoch sa prípadne pridá nový tím, pri rozhodcoch sa na začiatku sezóny naplní ich zoznam, prípadne sa niektorý z nich podľa potreby pridá či vymaţe. Tretiu časť predstavuje evidencia pouţívateľov a túto časť má na starosti hlavný administrátor, kde prideľuje práva ďalším osobám, ktoré majú do Intranetu prístup (redakčné práva), prípadne môţe modifikovať práva tým pouţívateľom stránky, ktorí sa zaregistrovali ako beţní návštevníci stránky s moţnosťou prispievať do fóra. Napríklad ak sa vyskytne registrovaný prispievateľ do fóra s vyjadrovaním, ktoré nie je v súlade s pravidlami slušného vyjadrovania sa, administrátor stránky môţe takéhoto pouţívateľa zablokovať, môţe mu odobrať právo alebo zakázať vytváranie pouţívateľského mena s jeho prihlasovacím menom a pod. Poslednou časťou Intranetu je veľmi dôleţitá štatistika. Ide o samostatnú sekciu, ktorá sa odvoláva na štatistiky v súvislosti s návštevnosťou hlavnej webovej stránky. Táto sekcia v sebe zahrnuje samostatnú webovú stránku, ktorá je určená len na získanie prehľadnej 75

76 štatistiky o návštevnosti stránky za jednotlivé obdobia (dni, týţdne, mesiace, roky), na získanie informácií o štatistických ukazovateľoch, ako je informácia o najčastejšie pouţívanom prehliadači, odkiaľ sa pouţívatelia na našu stránku dostali, či to bol Google, Zoznam, Java alebo to boli iné vyhľadávacie servery a pod. Štatistika je veľmi rozsiahla oblasť a vyţadovala by si samostatný opis. V praxi to vyzerá napríklad tak, ţe ak chcem do Intranetu pridať nový článok, zjaví sa zoznam existujúcich článkov. Kliknem na tlačidlo pridať článok, vypíšem všetky údaje, dátum pridania, dátum, kedy sa článok má publikovať, nadpis článku, jeho podnadpis, textovú časť článku, môţem priloţiť fotografiu, môţem označiť súvisiaci článok, súvisiacu fotogalériu, definujem, do ktorej kategórie daný článok patrí, k článku môţem priloţiť rôzne prílohy, ako sú pdf súbory, wordové dokumenty alebo dokumenty v Exceli, jednoducho článok má mnoho parametrizovaných políčok, ktoré sa dajú vyplniť, čím sa článok zaeviduje. Nie všetky časti sú však povinné. Takto by sme mohli opisovať kaţdú jednu časť, či uţ ide o zápasy, hráčov, realizačné tímy a pod. 76

77 3 REALIZAČNÁ ČASŤ Zdrojový kód ma viac ako riadkov napísaných v jazykoch PHP, HTML, AJAX, CSS, JavaScript a pod. Celkovo mi tvorba tohto projektu zabrala asi pol roka intenzívneho programovania, V dnešnej dobe sa uţ len starám o malé úpravy či zmeny vyplývajúce z legislatívnych zmien alebo vznikajúce na podnet zákazníka. 3.1 História CMS Keď bolo potrebné vytvoriť nejakú internetovú prezentáciu, vytvorila sa pomocou HTML jazyka štruktúra niekoľkých stránok. To si vyţadovalo dobré znalosti značkovacieho jazyka HTML a mnoho hodín venovaných všelijakým úpravám a optimalizáciám (existujú aj nástroje, ktoré umoţňujú vytvárať HTML stránky bez poznania kódu, výsledný kód je však veľmi neuhladený ). Ak sme sa rozhodli niečo zmeniť v štruktúre, bolo to veľmi ťaţké. Museli sme postupne prejsť všetky stránky a zmeniť to na nich. Kompletné prerobenie vzhľadu našej internetovej prezentácie sa tak v podstate rovnalo novému vytvoreniu. Potom sa zjavilo zlepšenie vo forme rámcov, keď bola stránka rozsekaná na menšie časti, čo umoţnilo sprístupniť časť strany (napr. ponuku) s niekoľkými stránkami. Skutočnú zmenu však znamenalo aţ masovejšie rozšírenie redakčných systémov. Redakčný systém je špeciálna internetová aplikácia navrhnutá tak, aby bolo spravovanie internetových stránok čo najjednoduchšie. Táto špeciálna štruktúra má navrhnutý vzhľad pomocou nejakej šablóny, do ktorej sa z databázy vkladá text. Pre kompletnú zmenu vzhľadu stránok stačí spravidla nahrať len novú šablónu a redakčný systém ostatné zabezpečí sám. Ďalšou výhodou je to, ţe stránky sa môţu začínať v minimalistickej verzii a postupne sa môţu pridávať nové funkcie. Najviac redakčných systémov je naprogramovaných v skriptovacom jazyku PHP a pre svoju činnosť potrebujú databázový server. Najpouţívanejšou kombináciou je tzv. LAMP riešenie, čo je skratka slov Linux, Apache (webový server), MySQL (databázový server) a PHP (skriptovací jazyk). Ak chceme vytvoriť nejakú internetovú prezentáciu, spravidla vyuţijeme sluţby špecializovanej firmy, ktorá sa nazýva hostingový provider. V nej moţno získať priestor na webovom serveri na umiestnenie prezentácie. Treba však povedať, ţe existujú aj systémy, ktoré pre svoje fungovanie nevyţadujú nijaký databázový systém. 77

78 Ak daná kombinácia funguje na serveri s operačným systémom Windows, hovoríme o riešení WAMP, analogicky MAMP je riešenie zaloţené na MacOS. Redakčné systémy moţno získať od komerčných firiem, ktoré ponúkajú aj príslušný servis vo forme podpory a úprav na mieru, sú však finančne náročné. Okrem toho nás aj inak limitujú. K dispozícii ale máme oblasť tzv. slobodného softvéru, ktorá ponúka celý rad skvelých produktov s dobrým zázemím a porovnateľnou kvalitou, akú majú komerčné produkty. Rovnako si môţeme dovoliť prakticky čokoľvek, pretoţe spravidla získame zdrojové kódy celého systému, a šikovný programátor so znalosťami PHP dokáţe všetko prepracovať podľa našich predstáv. 3.2 Softvér potrebný na programovanie Editor HTML (PSPad) Editor HTML je program, pomocou ktorého sa navrhujú a vytvárajú webové stránky. PSPad patrí medzi obľúbené nástroje mnohých programátorov, a to nielen preto, ţe je zadarmo a v slovenčine, ale aj preto, ţe je pomerne rýchly, čo v porovnaní s mnoţstvom funkcií, ktoré ponúka, vcelku prekvapuje. Je určený pre kaţdého, kto pracuje s textovými súbormi. Jeho funkcie moţno vyuţiť pri tvorbe internetových stránok, programovaní beţných aplikácií alebo len na pohodlnú úpravu konfiguračných súborov. Ide o editor, neposkytuje rozhranie pre vizuálnu tvorbu webových stránok ani neplní funkciu grafického návrhára vzhľadu aplikácií. Práca s PSPad je rovnako jednoduchá ako s Poznámkovým blokom. Na prvý pohľad viditeľnou pomôckou je farebné zvýraznenie riadka, na ktorom sa práve nachádzame, čo je osobitne výhodné pri úpravách neprehľadných súborov. Číslovanie riadkov je vhodné pri odhaľovaní rôznych chýb v kóde. Existuje celý rad programov, ktoré toto umoţňujú, ale pri vymenovávaní ďalších funkcií uţ konkurentov ubúda. Koľko beţných editorov umoţňuje zotriediť riadky textu a jeho preskupenie aj podľa stĺpcov? Vyhľadávanie a náhrada textu sú tu obohatené o prácu so súbormi definovanými beţnými pravidlami. Moţno tak naraz zmeniť určité výrazy v rôznych súboroch. Orientáciu uľahčuje napríklad vkladanie záloţiek do textu. Webového programátora bude zaujímať moţnosť zobrazenia náhľadu stránky pri rôznych rozlíšeniach, zobrazenie okrajov tabuliek, nástroje na preformátovanie HTML kódu, úpravy veľkosti znakov a podobné pomôcky na prácu s kaskádovými štýlmi. PSPad je schopný previesť textové súbory na HTML dokumenty, z označených výrazov tvoriť 78

79 premenné v PHP alebo JavaScripte, ale aj odstraňovať tagy. Vstavaný nástroj Tidy je schopný očistiť HTML dokument od zbytočných značiek a skontrolovať správnosť jeho zápisu. V PSPad moţno s najväčšou pravdepodobnosťou nájsť takmer všetko, čo sa očakáva od programátorského editora. Tento editor však nedokáţe skrývať určité časti kódu, ale obsahuje uţitočného Prieskumníka kódu. Pouţívateľské konvertory (napr. text na morzeovku), úpravy SQL, podpora FTP 20, prevod medzi číselnými sústavami alebo prepočet matematických výrazov sú len niektoré z mnohých uţitočných funkcií. Samozrejme, aj v PSPad sa občas nájdu menšie chyby, napr. vyskytol sa problém so zalamovaním riadkov. Časté vydávanie nových verzií svedčí o neustálom záujme o tento program Total Commander ako FTP klient Total Commander patrí svojím zameraním do skupiny súborových manaţérov, teda programov, ktoré sú určené na správu priečinkov v počítači, ale plní perfektnú úlohu aj ako FTP klient 21. Pomocou Total Commandera sa dá kompletne spravovať FTP účet, moţno ním uploadovať dáta na FTP, spravovať zloţky a ich atribúty a má aj mnohé iné funkcie. Jednoduchý FTP klient Total Commandera je vlastne často hlavným dôvodom jeho pouţívania. Okrem uploadu/downloadu (uloţenia/sťahovania) súborov na vzdialený server zabezpečí editáciu súborov na FTP Adobe Fireworks CS5 So softvérom Adobe Fireworks moţno vytvárať pôsobivú a vysoko optimalizovanú grafiku pre web a prakticky kaţdé zariadenie od smartfónu, informačných kioskov aţ po vstavané displeje. Dajú sa vytvárať webové stránky, pouţívateľské rozhrania a multimediálne prototypy, ktoré moţno upraviť vo vektorovom aj v bitmapovom (bitmapový obrázok sa do súboru ukladá ako sústava jednotlivých bodov pixelov, ktoré ho tvoria) reţime. S vylepšenou súpravou nástrojov moţno vytvárať a optimalizovať obrázky pre webové stránky rýchlejšie a presnejšie ako predtým. Kompletné webové stránky sa navrhnú v kvalitnom grafickom prostredí a potom sa jedným krokom exportujú štandardné rozvrhnutia zaloţené na štýloch CSS vrátane externých zoznamov štýlov. Niektoré špecifické typy rezov umoţňujú integráciu grafík popredia a pozadia a vyuţitie opakujúcich sa obrazov. 20 File transfer protocol prenosový protokol súborov na internete. 21 Program, pomocou ktorého moţno kopírovať súbory na internet alebo z neho. 79

80 3.3 OPEN SOURCE ALTERNATÍVA WordPress WordPress je redakčný systém vyvíjaný ako open source projekt. Celý zdrojový kód je opísaný v dokumentácii, a tak umoţňuje programátorovi zapojiť sa do jeho vývoja, upravovať jeho časti, prispôsobiť si ho podľa svojich predstáv a pouţiť ho takmer na čokoľvek. Túto moţnosť aj vyuţívajú stovky ľudí, čím sa podieľajú na vývoji WordPress. Dostáva sa tak pred komerčné produkty, ktoré vytvára len niekoľko jedincov, a nie široká verejnosť. WordPress vznikol v roku Na začiatku obsahoval len veľmi málo kódu, ktorý pouţívalo pár nadšencov. Odvtedy prešiel mnohými zmenami a stal sa najpouţívanejším publikačným nástrojom pre blogy na celom svete (pouţíva ho niekoľko tisíc blogerov a kaţdý deň je zobrazovaný miliónmi čitateľov). WordPress sa vyvinul z potreby elegantného, dobre štruktúrovaného osobného publikačného systému, ktorý je postavený na PHP a MySQL a licencovaný GPL. Je nástupcom b2/cafelog. WordPress je pomerne mladý softvér, ale jeho vývoj a korene siahajú aţ do roku Ide o veľmi vyspelý a stabilný produkt zameriavajúci sa na pouţívateľa a webové štandardy, čím sa odlišuje od iných nevyspelých publikačných systémov. V roku 2005 bola vydaná nová verzia 1.5 WordPress, ktorá zaznamenala viac ako stiahnutí, čo odštartovalo hostingovú sluţbu wordpress.com; na nej si moţno vytvoriť osobný blog bez nevyhnutnosti čokoľvek inštalovať a nastavovať (stačí sa len zaregistrovať a vyuţívať WordPress a písanie článkov). Vzhľadom na veľkú popularitu je tento systém často napádaný ľuďmi, ktorí sa snaţia vyuţiť nedokonalosť zdrojového kódu. Autori sa však usilujú tieto nedokonalosti rýchlo napraviť. Dynamické generovanie stránok so sebou prináša náročnejšiu potrebu na zdroje. Môţe sa teda stať, ţe pri veľkej záťaţi nebude stránka dostupná (McNULTY, 2009 s. 25) Joomla! Joomla! je moderný redakčný systém na publikovanie informácií na internete (webových prezentácií), a to takým spôsobom, ţe pre skvelú webovú prezentáciu nepotrebujeme nijakú alebo len minimálnu znalosť programovania. Joomla! nám umoţňuje mať na svojej webovej stránke napríklad fotogalériu, fórum, internetový obchod VirtueMart atď. a všetko toto jednoducho editovať v prostredí slovenčiny. Medzi jeho prednosti patrí predovšetkým ľahká inštalácia a následné spravovanie, výborná dostupnosť dokumentácie a veľké mnoţstvo dostupných modulov a šablón. Umoţňuje teda 80

81 mať webové stránky s profesionálnym vzhľadom a spracovaním. Správa systému sa ľahko realizuje cez náš webový prehliadač z akéhokoľvek počítača pripojeného na internet. Vlastný program sa inštaluje pomocou FTP klienta do hlavného adresára nášho webu. Je to voľný (free) softvér šírený pod licenciou GNU GPL. Program vydaný pod touto licenciou moţno pouţívať na ľubovoľné účely, moţno ho kopírovať, distribuovať ďalším pouţívateľom, meniť alebo vylepšovať podľa vlastných poţiadaviek. V obidvoch prípadoch ide o mohutné nástroje, ktoré predstavujú skutočne komplexné riešenia na tvorbu webového obsahu pre pouţívateľov s takmer nijakými alebo len minimálnymi počítačovými vedomosťami z oblasti tvorby webových stránok. Ale ani s jedným z nich nemoţno zabezpečiť plnohodnotný redakčný systém pre takú špecifickú oblasť, akou je hokejový klub. Existuje mnoţstvo modulov, ktoré nie je moţné nahradiť nijakým modulom zo súpravy nástrojov WordPress či Joomla! a musia sa naprogramovať špeciálne pre potreby konkrétneho zákazníka. Aj toto bol jeden z faktorov, prečo bolo potrebné ubrať sa cestou vlastného redakčného systému a nepouţiť nijaký voľne dostupný nástroj. 3.4 Diskusia Medzi výhody opísaného redakčného Content Management System patrí jeho vysoká modularita, teda moţno ho jednoduchým spôsobom modulovať, vypínať alebo zapínať jednotlivé moduly (sekcie) presne podľa poţiadaviek pouţívateľa. Systém je veľmi jednoduchý a modulárny aj z pohľadu grafických zmien, je veľmi ľahké prispôsobiť ho akémukoľvek pouţívateľovi, akémukoľvek športovému klubu. Veľmi jednoducho sa dá zmeniť aj konkrétny dizajn tak, aby farebne (aj logom) vyhovoval danému klubu. Je teda veľmi ľahko modifikovateľný a šíriteľný, kopírovateľný pre rôzne ďalšie kluby. Jeho nespornou výhodou je kompletný Intranet, teda kompletný redakčný systém na úpravu a napĺňanie obsahu stránky, čo znamená, ţe umoţňuje veľmi jednoduchým spôsobom napĺňať svoj obsah pouţívateľmi, ktorí nie sú programátormi. Ďalšou výhodou je, ţe kompletne spravuje pouţívateľov, teda je jednoduché konfigurovať prístupové práva jednotlivým beţným pouţívateľom, ale aj redaktorom a administrátorom stránky. Výhodou takéhoto redakčného systému je aj to, ţe má rozhranie, ktoré umoţňuje napĺňať stránku aj osobami, ktoré majú základné počítačové vedomosti, ešte jednoduchším spôsobom ako cez redakčný systém (pomocou FTP protokolu sú schopní napĺňať sekcie stránky, ako je fotogaléria, videogaléria). Napríklad fotogalériu moţno napĺňať tak, ţe sa fotografie len skopírujú na dané 81

82 miesto cez FTP protokol a stránka kompletne zabezpečí ich zobrazenie v prehliadači, čo neuveriteľne šetrí čas práve osobám, ktoré majú na starosti fotogalériu. Nespornou nevýhodou je skutočnosť, ţe stránku programuje jedna osoba, čo znamená, ţe nie je jednoduché urobiť zmenu na stránke bez toho, aby som ju nevykonal ja sám. Predstavitelia športových klubov sú teda naviazaní na mňa, pretoţe som jediným programátorom, ktorý tento systém vytvoril a ktorý je schopný tieto zmeny realizovať. Ďalšou nevýhodou je preto aj môj osobný nedostatok času na to, aby som sa venoval len tejto stránke. Zároveň počet klubov, ktoré tento systém pouţívajú, stále nie je dostatočný na to, aby pokryl moje osobné náklady, čo je dôvodom toho, ţe sa rozvoju redakčného systému tejto stránky pravdepodobne nevenujem do takej miery, ako by to bolo potrebné. Ďalší rozvoj systému v súčasnosti funguje v podstate len na základe iniciatív, poţiadaviek a nápadov zo strany pouţívateľov. Ak spoločne zistíme, ţe navrhovaná skutočnosť je vhodná a zaujímavá, naprogramujeme daný modul na zákazku, pričom jeho následná implementácia je veľmi jednoduchá aj na ostatné stránky, a teda ho môţu vyuţívať aj ostatní pouţívatelia rovnakého redakčného systému. Čo sa týka technologických trendov, miera ţivotaschopnosti tohto systému v budúcnosti je pomerne sporná vzhľadom na to, ţe vývoj v oblasti informačných technológií je neuveriteľný a tempo rastu je obrovské. Problémom je, ţe technológie, ktorými sa dnes programujú webové stránky, sú veľmi rozsiahle. Mnoţstvo technológií potrebných pre programátora je nesmierne veľké. V súčasnosti existujú firmy, ktoré programujú redakčné systémy tak, ţe napríklad jeden programátor sa venuje len dizajnu, druhý sa venuje len PHP, ďalší má na starosti len databázu, iný sa stará o CSS štýly, a teda stránku len štýluje, ďalší má na starosti Flash, a teda dbá o dynamický obsah, iný má napríklad na starosti zasa server a stará sa o Apache a SQL a pod. Kaţdý z nich má teda na starosti určitú časť technológie, ktorej sa venuje, ktorej rozumie do detailov. Problémom pre mňa je, ţe musím zachytiť kaţdú z týchto technológií a porozumieť jej, no vzhľadom na to, ţe vývoj ide veľmi rýchlo dopredu a kaţdá jednotlivá technológia sa rozvíja rýchlym tempom, moje kapacity nestačia na to, aby som kaţdú danú technológiu dokázal do detailov sledovať, sledovať jej vývoj a učiť sa nové trendy. Zároveň nie som schopný naprogramovať redakčný systém, kým nebudem jednotlivým technológiám rozumieť aspoň do takej miery, aby mi to stačilo na vytvorenie takéhoto redakčného systému. Je teda ťaţké predpovedať, kam vývoj bude smerovať, pretoţe napríklad len jedna jediná technológia, ako je napr. HTML, DHTML a HTML5, sa vyvíja takým úţasným tempom, ţe sa v tejto chvíli nedá povedať, ktorá z uvedených technológií 82

83 napokon bude na trhu úspešná a do akej miery budem schopný si ju osvojiť, do akej miery budem v súlade s pokrokom tak, aby ten môj redakčný systém nebol zastaraný a bol stále konkurencieschopný a zostal pripravený a prístupný novým trendom, novým prehliadačom a novým výkonným počítačom, ktoré prichádzajú na trh. Dnes sa totiţ webový prehliadač nestáva len statickým nástrojom na zobrazenie obsahu, ale vecou, ktorá umoţňuje skutočnú interakciu s pouţívateľom, a preto sa mení aj spôsob, ktorým sa webové stránky v súčasnosti tvoria. Pouţívateľ má teda k dispozícii plnohodnotný interaktívny nástroj, pomocou ktorého je schopný dynamicky zasahovať do obsahu webovej stránky, čo pomerne radikálne mení aj spôsob chápania a programovania takéhoto redakčného systému. Na tomto mieste by som sa rád vrátil k pojmu Twitter Bootstrap, ktorý som v teoretickej časti opísal. Začal som sa tomuto frameworku venovať a za relatívne krátky čas som bol schopný začať tvoriť graficky príťaţlivé webové stránky podporujúce responsible dizajn. Dnes na základe analýz Google Analytics takmer 40 % návštevníkov hokejovej stránky prichádza cez mobily alebo tablety. Z tohto pohľadu je pre mňa responsible dizajn veľmi dôleţitý. Ak sa nájdu finančné prostriedky a najmä čas, potom sa rád pustím do kompletnej prestavby dizajnu stránky za pomoci Twitter Bootstrap frameworku. 83

84 ZÁVER Problematika vývoja webových aplikácií je značne rozsiahla téma. Prudký vývoj v tejto oblasti a neustále vznikajúce nové poţiadavky je ťaţké vôbec sledovať a nie ešte aj naučiť sa a aktívne vyuţívať. Nové nároky a poţiadavky úzko súvisia s vývojom technológií dotykových mobilných telefónov a tabletov a celkovej dostupnosti Internetu. Hlavným cieľom tejto práce bolo vytvorenie funkčného CMS. Môţem konštatovať, ţe tento cieľ bol splnený a dokonca pouţitý a reálne nasadený v niekoľkých športových kluboch, ale aj v neziskových organizáciách, ktoré so športom nemajú nič spoločné. To svedčí o univerzálnosti jednotlivých sekcií a moţnosti ich viacnásobného vyuţitia. V prvej, teoretickej časti som sa snaţil zosumarizovať technológie, ktoré sa dnes pouţívajú pri tvorbe webových stránok. V druhej, návrhovej časti opisujem jednotlivé sekcie tak, ako sme ich postupne tvorili a analyzovali ich funkčné poţiadavky. V tretej, realizačnej časti konkrétne opisujem tvorbu CMS, pričom sa venujem aj nástrojom potrebným na samotný vývoj, programovanie. V časti o diskusii uvaţujem nad ďalším vývojom, smerovaním a celkovým zmyslom takejto aplikácie. Myslím si, ţe práca ako celok poskytuje základný obraz o šírke a rozsahu problematiky tvorby webových stránok. Práca nedokáţe pokryť všetky dnes dostupné technológie a uţ pri jej písaní som sa stretol s článkami a novinkami na poli informačných technológii, ktoré ukazujú, ţe niektoré mnou pouţité technológie sú uţ zastarané. Z uvedeného vyplýva, ţe ţivotný cyklus takejto aplikácie je nanajvýš niekoľko rokov a je potrebné uţ dnes myslieť na to, ako a akým smerom sa bude uberať ďalší vývoj môjho CMS. Na záver si dovoľujem uviesť, ţe sa domnievam, ţe hlavný cieľ, ako aj jednotlivé čiastkové ciele tejto práce sa podarilo naplniť.

85 ZOZNAM BIBLIOGRAFICKÝCH ODKAZOV A POUŢITEJ LITERATÚRY ADOBE CREATIVE TEAM Adobe Flash CS4 Professional. Brno : Computer Press, a. s., s ISBN ANDERSON, S. P Přitažlivý interaktivní design. Brno : Computer Press, a. s., s ISBN ARLOW, J. a NEUSTADT, I UML2 a unifikovaný proces vývoje aplikací. Brno : Computer Press, a. s., ISBN BECK, A Google AdWords. Praha : Grada Publishing, a. s., s ISBN BERNARD, B Adobe Flex co je a co není. [Online] [Dátum: ] CASTRO, E XML pro World Wide Web. Praha : SoftPress, s. r. o., s ISBN DARIE, C., SIROVICH, J SEO v PHP Programujeme profesionálně. Brno : Computer Press, a. s., s ISBN DOMES, M tipů a triků pro CSS. Brno : Computer Press, a. s., s ISBN Tvorba WWW stránek pro úplné začátečníky. Brno : Computer Press, a. s., s ISBN FOX, V Marketing ve věku společnosti Google. Brno : Computer Press, a. s., s ISBN GÁLA, L., POUR, J., TOMAN, P Podniková informatika. Praha : Grada Publishing, spol. s r. o., ISBN GILMORE, W. J Velká kniha PHP 5 a MySQL. Brno : ZONER software, a. s., s ISBN X. HANSSON, D. Začínáme s Rails. [Online] [Dátum: ] HOLČÍK, T., POŠMURA, V. a MACH, J tipů a triků pro WWW stránky. Brno : Computer Press, a. s., s ISBN

86 HOLZNER, S., ŠINDELÁŘ, J RSS Automatické doručování obsahu vašich WWW stránek. Brno : Computer Press, a. s., s ISBN CHUN, R Macromedia Flash 5 pro pokročilé. Brno : Computer Press, a. s., s ISBN KANISOVÁ, H. a MULLER, M UML zrozumitelne. Brno : Computer Press, a. s., ISBN KAUSHIK, A Webová analytika 2.0. Kompletní průvodce analýzami návštěvnosti. Brno : Computer Press, a. s., s ISBN KOFLER, M Mistrovství v MySQL 5. Brno : Computer Press, a. s., s ISBN KOSEK, J PHP tvorba interaktivních internetových aplikací. Praha : Grada Publishing, spol. s r. o., s ISBN KUBÍČEK, M Velký průvodce SEO: Jak dosáhnout nejlepších pozic ve vyhledávačích. Brno : Computer Press, a. s., ISBN LACKO, L Ajax Hotová řešení. Brno : Computer Press, a. s., s ISBN LUBBERS, P., ALBERS, B., SALIM, F HTML 5 Programujeme moderní webové aplikace. Brno : Computer Press, a. s., s ISBN McNULTY, S WordPress efektivní publikování na webu. Brno : ZONER software, a. s., s ISBN MILLER, M Internetový marketing s YouTube. Brno : Computer Press, a. s., s ISBN PETRO, J Výkladový slovník internetu. Brno : CP Books, a. s., s ISBN X. POTOČEK, T Přehled webových technologií. Webtworba.howto.cz. [Online] [Dátum: ] RESIG, J JavaScript a Ajax Moderní programování webových aplikací. Brno : Computer Press, a. s., s ISBN

87 ROLNÝ, M typů pro vyuţití sociálních sítí. Web71. [Online] [Dátum: ] ŘÍHOŠEK, T Webová grafika 2 Text, typografie, textové efekty. Brno : Computer Press, a. s., s. 72. ISBN SHARP, J JQuery Kuchařka programátora. Brno : Computer Press, a. s., s ISBN STARŠÍ, J. & TÓTH, I Teória a didaktika ľadového hokeja II. Vysokoškolské učební texty TONKIN, S., WHITMORE, C., CUTRONI, J Výkonnostní marketing s Google Analytics. Brno : Computer Press, a. s., s ISBN ZAKAS, N. Z JavaScript pro webové vývojáře. Brno : Computer Press, a. s., s ISBN ZELDMAN, J Tvorba webů podle standardů: XHTML, CSS, DOM, ECMAScript a dalších. Brno : Computer Press, a. s., ISBN

88 ZOZNAM SKRATIEK ActiveX ASP byte CASE CGI CSS DHTML DOMÉNA FTP Google GPL GTPR technológia firmy Microsoft umoţňujúca atraktívnejšie navrhovanie webových stránok aktívne serverové stránky jednotka informácie Computer Aided Software Engineering Common Gateway Interface Cascading Style Sheets (kaskádové štýly) dynamický HTML základný stavebný prvok, z ktorého sa skladá internetová adresa File transfer protocol internetový vyhľadávač General Public License Google toolbar PageRank HOMEPAGE domovská stránka HTML HTTP HTTPS JAVA LAMP MacOS Perl PHP PPC RSS SEO HyperText Markup Language (hypertextový značkový jazyk) Hypertext Transfer Protocol (hypertextový prenosový protokol) Hypertext Transfer Protocol Secure (zabezpečený HTTP) programovací jazyk Linux, Apache, MySQL, PHP Macintosh operating system Practical Extraction and Report Language Hypertext Preprocessor pay per click Really Simple Syndication Search engine optimization

89 SQL SSL TLS UML URL WAMP W3 W3C WEBSITE WWW XHTML XML Structured Query Language Secure Sockets Layer Transport Layer Security Unified Modeling Language Uniform Resource Locator, jednotný lokátor zdroja Windows, Apache, MySQL, PHP skratka pre WWW World Wide Web Consortium anglické označenie pre internetové stránky World Wide Web, internet Extensible Hypertext Markup Language extensible Markup Language

90 ZOZNAM OBRÁZKOV OBRÁZOK 1 GRAFIKA STRÁNKY OBRÁZOK 2 LOGO ŠHK 37 PIEŠŤANY OBRÁZOK 3 NAVIGAČNÉ MENU OBRÁZOK 4 RÝCHLE INFORMÁCIE PIPELINE OBRÁZOK 5 ZÁPASOVÁ LIŠTA OBRÁZOK 6 ZAMRZNUTÉ OKAMIHY OBRÁZOK 7 TOP ČLÁNKY A REKLAMNÉ BANNERY OBRÁZOK 8 NAJNOVŠIE ČLÁNKY OBRÁZOK 9 ČLÁNKY OBRÁZOK 10 KALENDÁR OBRÁZOK 11 BLAHOŽELÁME OBRÁZOK 12 VIDEOGALÉRIA OBRÁZOK 13 PREHĽAD SÚŤAŽÍ SZĽH OBRÁZOK 14 LINKY (ODKAZY NA INÉ STRÁNKY) OBRÁZOK 15 ZABAVTE SA (HRA 15) OBRÁZOK 16 FLASH COUNTDOWN OBRÁZOK 17 NASLEDUJÚCI A POSLEDNÝ ZÁPAS OBRÁZOK 18 ROZPIS ZÁPASOV OBRÁZOK 19 AKTUALITY OBRÁZOK 20 ANKETA OBRÁZOK 21 ZÁPASY, AUTOBUS, PRENÁJOM OBRÁZOK 22 TABUĽKY A ŠTATISTIKY OBRÁZOK 23 PRIHLASOVACÍ FORMULÁR OBRÁZOK 24 DIAGRAM AKTIVÍT OBRÁZOK 26 REGISTRAČNÝ FORMULÁR OBRÁZOK 27 REKLAMNÍ PARTNERI OBRÁZOK 28 BURZA OBRÁZOK 29 HRÁČI (ZOZNAM) OBRÁZOK 30 HRÁČ (DETAIL) OBRÁZOK 31 NAPÍŠTE NÁM OBRÁZOK 32 ROZPIS ĽADOVEJ PLOCHY... 73

91 ZOZNAM PRÍLOH PRÍLOHA 1 INTERNETOVÁ STRÁNKA ŠHK 37 PIEŠŤANY PRÍLOHA 2 INTERNETOVÁ STRÁNKA ŠPORTCENTRUM VICTORIA PRÍLOHA 3 INTERNETOVÁ STRÁNKA DOM DÔCHODCOV SUČANY (VYUŽITIE CMS AJ PRE NEZISKOVÚ ORGANIZÁCIU) PRÍLOHA 4 INTERNETOVÁ STRÁNKA DOM DÔCHODCOV SUČANY (VYUŽITIE CMS AJ PRE NEZISKOVÚ ORGANIZÁCIU) PRÍLOHA 5 ADMINISTRÁTORSKÁ ZÓNA (ČLÁNOK) PRÍLOHA 6 ADMINISTRÁTORSKÁ ZÓNA (HRÁČ) PRÍLOHA 7 DÁTOVÝ MODEL... 97

92 PRÍLOHY Príloha 1 Internetová stránka ŠHK 37 Piešťany Zdroj: vlastné spracovanie

93 Príloha 2 Internetová stránka Športcentrum Victoria Zdroj: vlastné spracovanie

94 Príloha 3 Internetová stránka Dom dôchodcov Sučany (vyuţitie CMS aj pre neziskovú organizáciu) Zdroj: vlastné spracovanie Príloha 4 Internetová stránka Dom dôchodcov Sučany (vyuţitie CMS aj pre neziskovú organizáciu) Zdroj: vlastné spracovanie

95 Príloha 5 Administrátorská zóna (článok) Zdroj: vlastné spracovanie

96 Príloha 6 Administrátorská zóna (hráč) Zdroj: vlastné spracovanie