Masarykova univerzita

Transcription

1 Masarykova univerzita Fakulta sociálních studií Webové prezentácie: Web design optikou nových technológií Web presentations: Web design through the lens of new technologies Bakalárska práca Branislav Jenčo Brno 2014

2 Čestné prehlásenie Prehlasujem, že som túto bakalársku prácu vypracoval samostatne s použitím prameňov a literatúry uvedenej v bibliografii. V Brne dňa

3 Poďakovanie Chcem sa poďakovať vedúcemu mojej bakalárskej práce Mgr. Leo Nitčemu za ústretovosť, výraznú pomoc a mnohé dobré rady. Ďakujem za výstižné pripomienky, zaujímavé nápady, relevantnú literatúru a trpezlivosť.

4 Anotácia Predložená praktická bakalárska práca sa zaoberá výrazovými prostriedkami web designu v kontexte vývoja technológií od vzniku systému World wide web až po súčasnosť. Skladá sa z dvoch častí teoretického ukotvenia a tvorby webového projektu. V teoretickej časti autor približuje historický vývoj webu, výrazové prostriedky web designu a súčasné trendy. Spoločnou významovou líniou týchto častí je vývoj technológií a ich vplyv na preskúmané oblasti. V praktickej časti práce sú opísané poznatky využité v praxi pre tvorbu webového projektu fulldome.cz. Samotný proces je rozfázovaný do niekoľkých častí. Prípravné fázy podkladov, určenia a prieskumu sa zaoberajú prvotnými krokmi pri tvorbe web stránky. V tejto časti je hlavnou úlohou web designéra ujasniť si všetky potrebné náležitosti projektu. Vo fázi produkcie sú všetky vstupy spracované do drátových modelov, grafického návrhu a nakoniec fungujúcej základnej verzie stránky. Fázy spustenia a optimalizácie predstavujú aspekty výberu hostingu, domény, zaistenia bezpečnosti pred útokmi a následnej úpravy stránky pre zobrazovanie na mobilných telefónoch. Cieľom autora je týmto spôsobom priblížiť poznatky z teoretickej časti na reálnom príklade z praxe. Kľúčové slová: tvorivá práca, web, design, hypertext, web 2.0, webové prezentácie, layout, typografia, grafika, animácia, video, virtuálna realita, redakčný systém

5 Annotation Submitted bachelor s thesis deals with the means of expression in web design in the context of technological development from the creation of the World wide web to present time. It is comprised of two parts the theoretical framework and the production of a web design project. The first part deals with the development of the web, web design s means of expression and current trends. The underlying connection of these chapters is the evolution of technologies and their impact on said areas. Explored topics are then used in a real work experience situation, the production of the fulldome.cz web site. The process itself is split into several phases. The preparatory phases of discovery and exploration deal with the first steps to take in the production of the site. Complete clarification of all aspects of the project is the main objective here. All the inputs are then processed in the production phase into wireframes, graphic designs and finally a first working version of the site. Launch and optimization phases then explore the problems of finding a web hosting, domain name, developing security measures and the adaptation to mobile phone screens. The goal of the author is to show the ideas described in the theoretical part in a real situation in this way. Keywords: creative work, web, design, hypertext, web 2.0, web presentations, layout, typography, graphics, animation, video, virtual reality, content management system

6 Obsah 1 Úvod Teoretická časť Užívateľ, divák, klient? Diskusia o pojmoch Internet ako hypermediálny systém vývoj, kontext, súčasnosť Definícia pojmov Rozdiel medzi slovami web a internet Hypertext Stručná história webu Vojna prehliadačov Webové štandardy a prístupnosť webu Dot-com bublina a vzostup sociálnych sietí Web Front-end a back-end Výrazové prostriedky web designu Kompozícia stránky layout Stránky sú dokumenty Rámce (Frames) Tabuľky ako prostriedky kompozície Kaskádové štýly (CSS) a jeho float systém Mriežkové systémy Mobilné telefóny a responzívny web design Typografia Textové prehliadače pevné formátovanie Prvé možnosti štýlovania textu Výmena za obrázok (image replacement) Nové možnosti úpravy textu - Kaskádové štýly CSS Webfonty Rastrová a vektorová grafika Rastrové (bitmapové) obrázky Vektorová grafika Ikony a piktogramy Responzívny web design a obrázky Dynamika a animácia... 25

7 Technológia Flash Technológia AJAX HTML5 a CSS Zvuk Video Streaming Stereoskopia Virtuálna realita Reklama Súčasné trendy vo web designe Flat design Content-first, mobile-first a minimalizmus Lineárna narácia, dlhé rolovanie stránky Konvergencia Praktická časť Metodika Podkladová fáza Fáza určenia Žáner webu Cieľová skupina Výber redakčného systému Charakteristika redakčného systému Administrácia Diskusia a komunita Fáza prieskumu Skúmané weby a portály Vizuálna podoba Prezentácia obsahu Metoda SEO analýzy portálu Analýza SWOT Fáza produkcie Nástroje a vývojové prostredie Vytvorenie drôtových modelov Výber a úprava šablóny... 46

8 3.5.4 Wordpress na lokálnom serveri Jazyková lokalizácia Prezentácia poskytovaných audiovizuálnych materiálov Fáza spustenia Porovnanie a výber hostingu Zabezpečenie a ochrana Google Analytics Fáza optimalizácie Zobrazenie na mobilných zariadeniach SEO analýza a tracking užívateľov Záver Prílohy Príloha 1 Zadanie projektu Príloha 2 Obrazová príloha Príloha 3 Plné znenie skrátených odkazov služby bit.ly Zoznam literatúry Menný register Celkový počet slov:

9 1 Úvod Bakalárska práca sa zaoberá webovými prezentáciami, ich výrazovými prostriedkami a technológiami, ktoré určujú ich vývoj. Cieľom autora je priblížiť tento typ produktu ako jeden zo základov vizuálnej a mediálnej komunikácie v súčasnosti dvojitým spôsobom: pomocou zasadenia jeho vizuálnych prvkov do historického kontextu vývoja technológií v teoretickej časti a prezentovaním procesu tvorby reálneho produktu webovej prezentácie v časti praktickej. V teoretickej časti bude preto postupne priblížený web ako hypermediálny systém prepojených dokumentov od jeho začiatkov po súčasnosť. Podrobne rozpísané budú výrazové prostriedky, pomocou ktorých web designéri tvoria webstránky v súčasnosti. Vizuálna komunikácia na internetových stránkach sa opiera o prostriedky, ktoré preberá z jej predchodcov najmä grafického designu, ale aj filmovej vedy a marketingu. Aspekty typografie, čitateľnosti či kompozície zohrávajú dôležitú úlohu na papieri aj na počítačových obrazovkách, a v práci je každému z nich venovaná kapitola. Na webe odpadá nutnosť riešiť tlač grafických produktov a z procesného hľadiska je tvorba rýchlejšia. Špecifiká webu ako hypertextového systému prístupného z obrovského množstva zariadení v rôznych podobách však pridávajú celému procesu tvorby webovej stránky na komplexnosti. Designér musí uvažovať o tom, ako poskytnúť ten istý obsah užívateľovi doma na obrazovke počítača s pevným pripojením, a zároveň na displeji malého telefónu na potenciálne pomalej mobilnej sieti. Výrazové prostriedky web designu preskúmané v teoretickej časti sú aplikované v časti praktickej, ktorá je zameraná na tvorbu mediálneho produktu interaktívneho webového projektu pre spoločnosť Fulldome Institute. Opísaný je postup i uvažovanie autora, jeho cieľom je pomocou príkladu z praxe upevniť v čitateľovi poznatky získané v teoretickej časti a priblížiť proces, ako vznikajú webové stránky, jedny z najpoužívanejších mediálnych produktov v súčasnosti. 9

10 2 Teoretická časť 2.1 Užívateľ, divák, klient? Diskusia o pojmoch Pre potreby jasnej komunikácie v nadchádzajúcej teoretickej, ale neskôr aj v praktickej časti, je nutné krátko venovať priestor diskusii o základnom pojme, s ktorým sa stretávame pri rozoberaní problematiky tvorby webových stránok. Tento základný pojem označuje človeka, ľudské indivíduum, na ktorého zvyky a potreby musíme pri tvorbe webových stránok dbať najviac, teda toho, ktorý produkty web designu konzumuje, ktorý ich používa, ktorý sa na ne díva, ktorý ich číta. Už z predchádzajúcej vety je zrejmé, že označiť jednotným pojmom tohto človeka nie je jednoduché. V rôznych kontextoch webu sa dajú použiť odlišné pojmy, ktoré označujú tú istú osobu. Pri blogu, novinovom portáli je to čitateľ, na stránke s videami je to divák, pri webovej aplikácii to môže byť užívateľ. Títo ľudia nemusia patriť do cieľovej skupiny danej stránky, no v každom prípade ide o množinu ľudí, ktorí stránku použijú k nejakému účelu. Problémovým pomenovaním týchto ľudí sa zaoberal aj Douglas van Duyne a jeho kolegovia v knihe Návrh a tvorba webov, v ktorej ako najlepší predkladajú pojem zákazník,. Podľa nich evokuje tradičnú formu vzťahu firma-zákazník, pričom spokojnosť zákazníka a hodnota značky patria medzi hlavné aspekty zákaznícky orientovaného návrhu webu tak, ako ho v knihe popisujú. (van Duyne, a iní, 2005 s. 20) Keďže webové stránky sú pre väčšinu ľudí hlavne vizuálne obrazy (Možnosti vizuálních studií, 7), v širšom poňatí je možné sa uspokojiť s pojmami pozorovateľ alebo divák, ako ich používa napríklad Jacques Aumont pri opise vnímania filmu či fotografie. Avšak tento divák nemá k pozorovanému dielu abstraktný vzťah, ktorý by bol čistý a odtrhnutý od skutočnosti. (Aumont, 2005 s. 6) Oproti filmu či fotografii sú webové stránky obohatené o prvky interaktivity, ktoré tento vzťah komplikujú a stierajú rozdiely medzi prijímateľom a tvorcom. V záujme reflektovania tohto faktu bude v nadchádzajúcom texte používané slovo užívateľ, nakoľko podľa názoru autora lepšie vystihuje interaktívnu podstatu každodenného prezerania webových stránok. Tento pojem bude tiež vhodnejší pre lepšie odlíšenie tohto procesu oproti konzumovaniu iných typov médií, poprípade môže slúžiť ako súhrnný pojem pre pojmy divák, čitateľ či zákazník, ktorý sa ale nemení od špecifického kontextu stránky. Na web môžeme totiž nahliadať ako na meta-médium, ktoré do svojho obsahu zakomponováva už známe média, od textu po video. (Levinson, 1999 s. 38) 10

11 2.2 Internet ako hypermediálny systém vývoj, kontext, súčasnosť Pojmom World wide web sa označuje systém prepojených hypertextových dokumentov a ďalších (hyper)mediálnych produktov, ktorý sídli na celosvetovej počítačovej sieti známej pod názvom internet. (Merriam-Webster, 2014) Na prehliadanie týchto dokumentov slúži webový prehliadač nainštalovaný na takmer každom zariadení pripojenom k internetu. Oproti tradičným médiam ako film alebo kniha neprezentuje obsah lineárne, ale postup prezentáciou je určený užívateľom. (Casteleyn, 2005 s. 27) Jeho definíciu však nemôže dostatočne obsiahnuť slovníkové heslo a preto sú nasledujúce riadky venované načrtnutiu jeho znakov, kontextu a histórie. František Kůst hovorí, že internetové stránky sú univerzálnou technickou konštrukciou schopné zobraziť takmer čokoľvek. Možnosť spojenia médií do celosvetovej siete berie ako ďalší stupeň vo vývoji média. (Kůst, 2007 s. 129) Definícia pojmov Rozdiel medzi slovami web a internet. Na tomto mieste treba spomenúť, že v každodennom používaní sa pojmy web a internet často zamieňajú, pretože bežný užívateľ je na internete len málo vystavený iným systémom ako web. Zatiaľ čo internet predstavuje elektronickú komunikačnú sieť spájajúcu počítačové siete a organizačné počítačové zariadenia po celom svete (Merriam-Webster, 2014), web je iba jeden spôsob, ako tieto počítače spolu komunikujú. Využívajú protokol HTTP, ktorý bol navrhnutý práve pre distributívne, kolaboratívne a hypermediálne informačné systémy. (Network Working Group, 1999) Medzi ďalšie protokoly sa zaraďujú napríklad IMAP a POP3, pomocou ktorých prebieha ová komunikácia Hypertext Ako bolo naznačené, web môžeme označiť ako systém prepojených hypertextových dokumentov a iných médií, skrátene hypermédií. Hypertextom nazývame text, ktorý obsahuje prepojenia, pomocou ktorých sa dostaneme na iné texty. 1 Tieto odkazujú na ďalšie texty, pričom sa vytvára decentralizovaná sieť hypertextových dokumentov. Médiom pre tvorbu a prezeranie hypertextu je počítačová obrazovka. Prístup k informáciám cez hypertext je 1 V tejto práci bude používané slovo text v jeho užšom význame ako textová informácia alebo dokument, nie v jeho širšom sémiotickom význame 11

12 nelineárny, dokumenty majú často multimediálny charakter, a je v stave neustálej postupnej zmeny. (Cicconi, 1999) 2 Ideu hypertextu však vystihol ešte v roku 1945 Vannevar Bush v článku As We May Think, kde predstavil hypotetické zariadenie Memex. Išlo o zariadenie, v ktorom človek uchováva všetky jeho knihy, záznamy a komunikácie, a ktoré je mechanizované s cieľom rýchlo a flexibilne poskytnúť potrebné informácie. (Bush, 1945) (Obr. 1) 3 Termín hypertext potom po prvýkrát použil o 20 rokov neskôr Theodore H. Nelson, ktorý ho definoval ako súbor písaného alebo obrazového materiálu prepojeného takým komplexným spôsobom, že by nebolo príhodné prezentovať alebo reprezentovať ho na papieri. (Nelson, 1965 s. 13) Definíciu rozvádza Sergio Cicconi, ktorý vo svojom článku Hypertextuality označuje tri základné rozdiely hypertextov od tradičných textov: multimedialita, dynamika a interaktivita. (Cicconi, 1999) Nelson a iní teoretici do začiatku deväťdesiatych rokov vytvorili niekoľko rozličných informačných systémov založených na hypertexte. Vôbec prvú demonštráciu funkčného hypermediálneho systému pod názvom NLS predviedol vynálezca a vizionár Doug Engelbart v roku (Casteleyn, 2005 s. 25) Počítačový vedec Tim Berners-Lee v osemdesiatych rokoch spojil ideu hypertextu s informačným systémom Enquire, a jeho niekoľkými ďalšími systémami, pričom vytvoril základ toho, čo dnes nazývame World wide web. (Berners-Lee, 2000 s ) Stručná história webu Prvý návrh hypertextového protokolu predstavil Tim Berners-Lee v roku 1989 ako systém, ktorý mal umožniť lepšie zdieľanie poznatkov medzi časticovými fyzikmi v ženevskom výskumnom ústave CERN. Už vtedy však dúfal, že jeho systém bude mať širšie využitie. (Berners-Lee, 1990) O rok neskôr vytvoril prvú stránku, prvý textový prehliadač a svoj návrh prezentoval v roku 1991, kedy bol web aj prvýkrát prakticky prístupný. 2 Asi najnázornejším príkladom takéhoto systému je známy portál Wikipedia ( 3 Kvôli veľkému počtu obrázkov v texte bola zvolená ich súhrnná prezentácia na konci dokumentu v prílohe 2 4 Sven Casteleyn však vo svojej dizertačnej práci upozorňuje, že web obsahuje iba obmedzenú funkcionalitu plnohodnotného hypermediálneho systému (Casteleyn, 2005 s. 31) 12

13 2.2.4 Vojna prehliadačov Popularita webu výrazne vzrástla po predstavení prvého grafického prehliadača Mosaic (Obr. 2), ktorý vydalo v roku 1993 americké Národné centrum pre superpočítačové aplikácie. Ako prvý totiž ponúkal plne grafické rozhranie a intuitívne ovládanie. Umožňoval zobrazenie obrázkov a užívatelia mohli na navigáciu po odkazoch použiť myš. Dostupný bol takmer na všetkých vtedajších operačných systémoch. Web sa stal prístupnejším a atraktívnejším. (Meyer, 2007 s. 1) Z tohto prehliadača vznikol o rok neskôr Netscape Navigator (Obr. 3), ktorý za krátky čas dominoval trhu. Dnešným vzdialeným príbuzným Mosaicu je prehliadač Mozilla Firefox. 5 (Škyřík, 2009 s. 23) (Obr. 4) Rastúcu popularitu webu zachytila aj firma Microsoft, ktorá vydala prvú verziu svojho prehliadača Internet Explorer. (Obr. 5) Jeho ďalšie verzie už boli predinštalované v operačnom systéme Windows a v druhej polovici 90-tych rokov už zvádzal Internet Explorer súboj s prehliadačom Netscape Navigator o podiel na trhu. Toto obdobie je známe ako vojna prehliadačov. Internet Explorer postupne získal prevahu, nakoľko rýchlejšie podporoval nové technológie. Dodnes patrí medzi najpoužívanejšie prehliadače. (Škyřík, 2009 s. 24) Webové štandardy a prístupnosť webu Ešte v roku 1994 založil Berners-Lee organizáciu World Wide Web Consortium (W3C) s primárnym cieľom dohliadnuť na vývoj a štandardizáciu webu. S týmto účelom vzniká v roku 1998 aj Web Standards Project, na ktorom pracovali vývojári webov aj prehliadačov. Snaha o udržanie štandardov na webe bola reakciou na tendencie výrobcov prehliadačov implementovať nové funkcie, ktoré v iných prehliadačoch nefungujú. Vďaka štandardizácií je web prístupnejší pre ľudí s postihnutím, vyhľadávače poskytujú lepšie výsledky a nenastáva fragmentácia užívateľov používajúcich iné prehliadače. (Web Standards Project Developer Education Committee, 2002) Práve prístupnosť webu (v angličtine accessibility) je jedným z hlavných aspektov tvorby webových stránok. Ide o filozofiu univerzálneho prístupu k informáciam. Podľa experta na webové štandardy Jeffreyho Zeldmana prístupnosť neznamená, že každý užívateľ musí vidieť to isté, ale to, aby sa k informáciam ľahko dostal. Prístupnosť je o obsahu 5 V skutočnosti sú však aj prvé verzie Internet Explorera založené na kóde z prehliadača Mosaic (Škyřík, 2009 s. 23) 13

14 a informáciach. Všetok obsah (text, obrázky a multimédia) musí byť prístupný užívateľovi. (Zeldman, 2003 s. 117) Jedným z pilierov prístupnosti je oddelenie štruktúry webu od prezentácie, jeho podoby. Toto oddelenie bude bližšie preskúmané na konci kapitoly Dot-com bublina a vzostup sociálnych sietí Obrovský boom webových stránok nafúkol tzv. dot-com bublinu. Akcie firiem, ktoré založili svoj biznis na webe, raketovo narastali, no v roku 2000 bublina praskla a mnohé internetové spoločnosti skrachovali. Medzi tie, ktoré prežili, patria aj dnešní giganti ako Google, Amazon a Yahoo. Nastúpili prvé sociálne siete ako Friendster (2002) a MySpace (2003), ktoré umožnili ľuďom tvoriť si vlastné profily, spájať sa so svojimi priateľmi či cudzími ľuďmi. V roku 2004 vznikol Facebook, ktorý sa do niekoľkých rokov stal dominantnou sociálnou sieťou. V polovici minulej dekády sú založené dnes známe portály ako Flickr na zdieľanie fotografií (2004), YouTube na zdieľanie videí (2005) a mikroblogovacia sieť Twitter (2006). (Curtis, Anthony, 2013) Web 2.0 Sociálne siete predstavovali iba jeden z prejavov posunu vo vnímaní a používaní webu, ktorý sa označuje ako Web 2.0. Prvýkrát tento pojem použila Darcy DiNucci v roku Presný význam tohto pojmu je nejasný a jeho interpretácie sa líšia. Tim O Reilly vo svojom článku What is Web 2.0 z roku 2005 udáva niekoľko charakteristických znakov, ktoré môžu konštituovať tento pojem. Web 2.0 ako koncept nemá hranice, ale má gravitačné jadro. To podľa neho tvorí: 1. web ako platforma 2. využitie kolektívnej inteligencie užívateľov 3. využitie obrovských množstiev dát 4. koniec cyklu vydávania verzií softwaru vnímanie webových aplikácia ako kontinuálnych služieb 5. jednoduché programovacie modely 6. softvér nadradený iba jednému zariadeniu 7. bohatý užívateľský zážitok (O'Reilly, 2005) Podľa Petra Škyříka môže konštituovať Web 2.0 aj nástup nového typu médií many-to-many ako ho definoval teoretik Vin Crosbie. Ten neberie televíziu či internet ako médium, ale ako nositeľa médií. V jeho ponímaní teda médium odpovedá skôr komunikačnému modelu. 14

15 (Škyřík, 2009 s. 75) Oproti interpersonálnej (one-to-one) a masmediálnej (one-to-many) komunikácii prináša internet tretí model typu many-to-many, ktorý by nebol možný bez využitia technológie. Medzi ďalšie charakteristiky Webu 2.0 zaraďuje Škyřík wiki a reputačné systémy, zmazanie rozdielu producent/konzument a umožnenie tzv. mashups. 6 (Škyřík, 2009 s ) Dôležitým prvkom Webu 2.0 je aj personalizácia, vďaka ktorej môžu užívatelia napríklad meniť celkový design (layout, farby či typografiu) webových aplikácií podľa vlastného uváženia. Sám tvorca webu Berners-Lee považuje pojem Web 2.0 za žargón, nakoľko v jeho vnímaní je takýto web od začiatku. (MacManus, 2006) 7 Vývoj od Webu 1.0 k Webu 2.0 (akokoľvek sú tieto pojmy problematické) by sa dal nazvať aj vývojom od jednoduchých statických stránok ku komplexným webových informačným systémom, ktoré ponúkajú aktuálne informácie i funkcionalitu. (Fiala, 2007 s. 17) Podľa Zoltána Fialu web zásadne zmenil to, ako pristupujeme a spracovávame informácie všeobecne. (Tamtiež) Asi najdôležitejším posunom na konci minulej dekády je výrazný a stále trvajúci nárast počtu užívateľov, ktorí na web pristupujú zo svojich mobilných zariadení. Nástup inteligentných telefónov výrazne ovplyvnil prvky vizuálnej komunikácie na webových stránkach. Tejto problematike bude venovaná časť kapitoly o výrazových prostriedkoch Front-end a back-end Ešte pred pristúpením k vizuálnym prvkom webu je treba načrtnúť odlíšenie pojmov frontend a back-end, ktoré spolu tvoria celý systém webovej stránky. Zatiaľ čo front-end predstavuje všetko, čo užívateľ vidí, čo je interaktívne, back-end predstavuje podliehajúci systém, ktorý riadi operácie na serveri. Hlavnými piliermi (no určite nie jedinými nástrojmi) vytvárania front-endu sú: 1. značkovací jazyk HTML, ktorý má na starosti štruktúru 2. štýlovací jazyk CSS, ktorý má na starosti podobu 3. skriptovací jazyk JavaScript, ktorý má na starosti pokročilú dynamiku a interakciu (Skillcrush, 2012) 6 Využitia existujúcich systémov a ich skombinovanie na vytvorenie nových produktov. (príklad môžeme vidieť pri spojení Google Maps so systémami služby Twitter) ( 7 Pre súčasné a budúce smerovanie webu sa niekedy používa termín Web 3.0, ktorý je však ešte kontroverznejší ako jeho predchodca. Jeho definície sú roztrieštené, a preto je tento pojem v práci úmyselne vynechaný 15

16 Back-end môže tvoriť obrovské množstvo rôznych nástrojov a jazykov, no vo väčšine prípadov ide o serverový skriptovací jazyk ako PHP, Python alebo Ruby, databázový jazyk MySQL 8 a mnoho ďalších. Táto práca sa primárne zameriava na front-end, a to jeho vizuálne prostriedky. Tieto technológie vo veľkej miere určujú podobu webu ako ho poznáme. Výrazové prostriedky opisované v nasledujúcej kapitole sú významne určené práve vývojom a dostupnosťou technológií. Tak, ako sa technológie a ľudské vnímanie obsahu na webe vyvíja, tak sa menia aj výrazové prostriedky tie staré sú opustené a nové, lepšie, prichádzajú na ich miesto. Tento jav sa vzťahuje nielen na softvérové technológie, ale aj na hardvérové limitácie rýchlosť internetového pripojenia, kvalita, rozlíšenie a veľkosť displejov zariadení, či ich výpočtový výkon. Z tohto dôvodu budú výrazové prostriedky opísané v kontexte vývoja týchto technológií. 2.3 Výrazové prostriedky web designu V nadchádzajúcej kapitole budú načrtnuté základné výrazové prostriedky web designu, od kompozície typografie až po 3D grafiku, pomocou priblíženia ich vývoja od začiatku webu. Web design ako časť vizuálnej komunikácie si požičiava prvky grafického, interakčného a industriálneho designu, informačnej architektúry, typografie i filmovej vedy. Ide o príklad remediácie, ktorú definuje americký teoretik nových médií Jay David Bolter ako tvorbu nových mediálnych foriem z tých starých. (Bolter, a iní, 2003) Kompozícia stránky layout Aj v médiu webových stránok hrá dôležitú úlohu kompozícia obrazu, nazývaná layout 9 rozloženie prvkov na stránke. V kompozícií ide hlavne o harmonické členenie plochy na podklade. (Aumont, 2005 s. 275) Aspekty ako zlatý rez, princípy Gestalt teórie a pod. hrajú vo web designe dôležitú úlohu. V kontexte tejto problematiky kompozícia úzko súvisí s informačnou architektúrou 10 a prístupnosťou webu. Nástroje na jej ovládanie sa postupne vyvíjali v súvislosti s dostupnými technológiami, ako je načrtnuté v nachádzajúcej časti. 8 Práve PHP a MySQL sú technologickým predpokladmi posunu k Webu 2.0, nakoľko umožňujú vytváranie dynamicky generovaných stránok, napríklad pomocou redakčných systémov. 9 Pojem prevzatý z novinovej grafiky 10 Definovanú ako štrukturálny návrh zdieľaných informačných prostredí, alebo tiež umenie a veda organizovania a označovania webových stránok, intranetov, online komunít a softvéru pre zlepšenie použiteľnosti. (Information Architecture Institute, 2013) 16

17 Stránky sú dokumenty World Wide Web začal svoju existenciu ako systém hypertextových dokumentov pre výskumníkov a to určovalo aj jeho podobu. Webové stránky neboli komplexnejšie ako klasické dokumenty, ktoré ľudia píšu na textových procesoroch. Designové prvky nedovoľovali ani prehliadače, ktoré boli čisto textové, neschopné zobrazovať grafiku. 11 (Obr. 6) Zatiaľ čo pri podobe písma mali autori v jazyku HTML niekoľko možností ako vytvoriť štruktúru a hierarchiu, celková podoba stránky, teda sadzba a rozloženie elementov, bola viac menej pevne daná. Išlo o jeden súvislý dokument Rámce (Frames) S nástupom grafických prehliadačov sa začali rozširovať možnosti štylizovania kompozície. Prehliadač Netscape Navigator vo svojej verzii 2.0 predstavil nový spôsob, ako pristupovať k layoutu na webe. Priniesol nástroj, vďaka ktorému mohli tvorcovia rozdeliť stránku na niekoľko rámcov, v ktorých sa načítavali iné HTML súbory niekoľko stránok tak bolo skombinovaných do jednej. (Ladd, 1996) Populárny vzor bola najmä kombinácia titulného rámca a rámca s navigáciou, ktoré ostávali na mieste, a rámca pre obsah/články, v ktorom sa užívateľ mohol tradične posúvať. (Obr. 7) Aj keď rámce dokážu znížiť záťaž na pripojenie (niektoré elementy na stránke sa nemusia sťahovať viackrát) prinášali zo sebou veľa problémov, ktoré boli čoraz citeľnejšie a nakoniec viedli k ich postupnému zavrhnutiu. 12 Medzi základnú kritiku patrilo narušenie estetického dojmu, rámce totiž často vniesli do designu pásy pre rolovanie. (ako ich vidieť na Obr. 7) Jakob Nielsen ich vo svojom článku Why Frames Suck (Most of the Time) z roku 1996 zhrnul do niekoľkých bodov: - narúšajú základnú filozofiu webu stránku ako nositeľa obsahu, jednoznačnej navigácie pod jedinečnou adresou - stále relatívne veľké percento ľudí používajúcich prehliadače, ktoré rámce nepodporujú - prehliadače si neporadia s vytlačením rámcových stránok - zhoršujú indexovanie stránok vo vyhľadávačoch (Nielsen, 1996) 11 Prvú webovú stránku vytvorenú Berners-Leeom je možné si prezrieť v emulovanom textovom prehliadači na adrese (príliš dlhé odkazy sú v tejto práci pre ich jednoduchšie použitie v tlačenej podobe skrátené pomocou služby bit.ly. Pre prípad ukončenia fungovania tejto služby sú na konci práce uvedené v plnom znení) 12 Do roku 2006 už ich nepoužíval takmer nikto (Krug, 2006 s. 12) 17

18 Tabuľky ako prostriedky kompozície Ďalším so spôsobov ako obísť pôvodné obmedzenia HTML súborov, bolo použitie tabuliek pre layout. Tagy pre tabuľky boli do HTML zahrnuté pre lepšie zobrazovanie tabuľkových informácií čo bolo prínosné pre vedcov. (Krug, 2006 s. 20) Vďaka možnosti úplne skryť hrany buniek však designéri získali nástroj, ako štruktúrovať obsah na obrazovke presnejšie, ako bolo dovtedy možné. Použitie tabuliek bolo v súlade so snahou rozdeliť webové stránky na jednotlivé sekcie, a tak zvýšiť prehľadnosť. Celá stránka bola jedna veľká tabuľka, ktorej bunky predstavovali napríklad titulný banner s logom, nápisom, či grafikou, centrálny obsah, bočné menu s navigáciou alebo archívom, a päta stránky s administratívnymi informáciami. Stránky však vyzerali staticky a hranato, pričom odporovali filozofii HTML ako štruktúrovacieho jazyka, nie prezentačného. Ich použite nahradili nástroje jazyka CSS. (Tamtiež) Kaskádové štýly (CSS) a jeho float systém Štylistický programovací jazyk CSS slúži ako nadstavba samotnej stránky, napísanej v HTML kóde. HTML je so súborom napísaným v CSS prepojené, a viacero stránok môže zdieľať jeden takýto súbor (poprípade môže viacero CSS súborov ovládať vzhľad jednej stránky). CSS symbolizuje snahu oddeliť prezentáciu, teda vizuálnu podobu webových stránok, od ich obsahu. Inými slovami, obsah stránky by nemal záležať na jeho podobe. Táto filozofia patrí medzi základné stavebné kamene moderného web designu, ako je spomínaná aj v iných častiach práce. Kombinácia HTML súboru pre obsah a CSS súboru, ktorý ovláda vzhľad prináša dve dôležité výhody: - jednoduché zachovanie estetickej konzistencie na rozdielnych stránkach jednej domény, či portálu CSS súbory ovplyvňujú webstránku v celej jej hĺbke a šírke 13 - rýchlejší redesign stránky pre zmenu podoby netreba meniť štruktúru Kaskádové štýly umožňujú veľmi precízne ovládanie layoutu a celkovej estetiky stránky vďaka súboru nástrojov, ktoré dokážu meniť pozíciu elementov na stránke v absolútnom meradle, alebo relatívne voči sebe. Kombináciou týchto nástrojov dokážu designéri nielen napodobniť staré rozloženia typické pre tabuľkový prístup, ale aj mnoho iných. 13 Možnosti tejto funkcie preskúmal projekt CSS Zen Garden, kde designéri vytvorili pomocou CSS desiatky rôznych podôb stránky z jednej HTML šablóny ( 18

19 Mriežkové systémy Jedným z najlepších príkladov použitia techník grafického designu vo web designe sú mriežky, ktoré pomáhajú efektívne rozložiť prvky na stránke. Elementy na papieri, alebo na stránke sú rozložené takým spôsobom, aby lícovali s touto mriežkou. (Obr. 8) Aj keď mriežku nevidíme, takto rozložené stránky a dokumenty sú omnoho príjemnejšie na pohľad. (Shillcock, 2013) (Obr. 9, 10, 11) Vzniklo niekoľko spôsobov ako mriežkové systémy efektívne využiť pomocou CSS, no ich popularita klesá od všeobecného rozšírenia inteligentných mobilných telefónov. (medzi populárne patril napríklad systém Mobilné telefóny a responzívny web design Smartfóny začali naberať na popularite po predstavení telefónu iphone firmou Apple v roku Veľmi rýchlo sa stali všeobecne rozšírenými, k čomu prispel aj štart ďalších operačných systémov ako Android a Windows Phone. Tento technologický posun sa označuje ako mobilná revolúcia. (Danova, 2014) Služby ako WAP umožňovali telefónom funkcionalitu podobnú webu už od roku (HCI Blog, 2004) (Obr. 12) Nové inteligentné telefóny však majú oproti tradičným mnohonásobne zvýšenú funkcionalitu chovajú sa prakticky ako počítače a jedným z prejavov toho je aj možnosť surfovať po tom istom webe ako štandardné počítače. Spolu so zvyšovaním výkonu týchto zariadení sa zlepšujú aj rýchlosti pripojenia cez mobilné siete a znižujú poplatky za pripojenie. Zároveň bývajú štandardne vybavené možnosťou pripojenia sa na sieť Wi-Fi. Tieto trendy mali za následok výrazné zvýšenie počtu prístupov na webové stránky z mobilných zariadení. Designéri a programátori si uvedomili, že ich doterajšie stránky prispôsobené na veľké displeje sú veľmi ťažko použiteľné u čoraz väčšieho percenta ich užívateľov. (Keizer, 2013) Často používanou náplasťou na tento problém boli oddelené stránky prispôsobené pre mobilné zariadenia zvyčajne s pevnou šírkou 320 obrazových bodov. 14 Tieto stránky mali viac-menej rovnaký obsah, avšak vzhľadovo boli prispôsobené pre malé displeje. Dodnes je pre niektoré typy stránok vhodné použiť toto riešenie problému napríklad u e-shopov, ktoré sú omnoho komplexnejšie. Ďalším spôsobom bolo využitie ekosystému jednotlivých operačných systémov a priame vytvorenie aplikácie, ktorá napodobňuje funkcionalitu 14 Čo bola šírka displeja prvej verzie populárneho telefónu iphone (Apple, 2010) 19

20 webovej stránky. 15 Špecificky pre webové aplikácie navrhuje Zoltán Fiala tzv. model adaptívnych webových aplikácií, založených na modulárnych komponentoch. Takto vytvorená webová aplikácia podáva personalizovaný obsah na webe, nezávislý od zariadenia, vďaka použitiu jednoduchých, znovupoužiteľných a prispôsobivých stavebných kameňov. (Fiala, 2007 s. 19) Najpopulárnejší prístup k problému je však tzv. responzívny (prispôsobivý) web design, ktorý vo svojej podstate zdieľa niektoré z týchto znakov. Jeho základnou filozofiou je, že jedna stránka sa má plynule prispôsobovať zariadeniu, na ktorom je prezeraná. Ako píše Ethan Marcotte, ktorý tento termín prvýkrát použil, stojí na troch pilieroch: 1. flexibilná kompozícia založená na mriežke 2. obrázky a multimédia prispôsobujúce sa zariadeniu 3. tzv. media queries príkazy v css kóde, ktoré upravujú, ako sa elementy na stránke chovajú podľa parametrov zariadenia, na ktorom je stránka zobrazená (napr. veľkosti displeja) (Marcotte, 2011 s. 9) Tieto tri prvky boli prítomné vo webdesigne už niekoľko rokov, no Marcotte ich spojil pod jeden jednoduchý termín a súbor pravidiel, podľa ktorých sa weboví grafici mohli riadiť. Responzívny web design umožňuje poskytovanie toho istého obsahu všetkým užívateľom, mení sa však spôsob a narácia, akým je podávaný. Pri surfovaní na mobilnom telefóne hrajú grafické prvky a reklama menšiu úlohu, prednosť získava na malom displeji podstata komunikovaného. Efekt tohto posunu je preskúmaný na konci tejto kapitoly. (Obr. 13a, 13b) Typografia Typograf Robert Bringhurst vo svojej knihe Elements of Typographic Style opisuje typografiu ako umenie obdariť ľudskú reč trvalou vizuálnou formou a tým zaistiť jej nezávislú existenciu. [...] Typografovou úlohou je interpretovať a komunikovať text. (Bringhurst, 1997 s. 11, 20) Webdesignér Oliver Reichenstein vydal v roku 2006 článok Web design is 95% typography, v ktorom ako jeden z prvých upozornil na podceňovanie vzhľadu a čitateľnosti textu na webe, médiu, kde väčšinu času strávia užívatelia práve čítaním. Vnímanie samotného písma a jeho rozloženia teda podľa neho zásadne určuje celkový komfort prehliadania webových stránok. (Reichenstein, 2006) 15 Existujú aj služby, ktoré prevedú stránku nakódovanú v štandardnom HTML a CSS do kódu pre jednotlivé mobilné operačné systémy (medzi najznámejšie patrí 20

21 Textové prehliadače pevné formátovanie Ako bolo spomenuté vyššie, web bol primárne určený práve na prezentáciu dokumentov a textovú komunikáciu. Na vizuálnu podobu sa najskôr nekládol dôraz. V začiatkoch jeho používania prakticky neexistovali spôsoby, ako podobu tohto textu meniť, a jeho vzhľad určoval systém, resp. prehliadač užívateľa. (ako vidieť na Obr. 6) Týmto spôsobom sa v čase textových prehliadačov zaisťovala čitateľnosť a kompatibilita. Jednou z mála dostupných funkcií bola možnosť špecifikovať tučne zvýraznené písmo a nadpisy, no len vo veľmi obmedzenej miere. (Meyer, 2007 s. 3) Prvé možnosti štýlovania textu V roku 1995 vydali vývojári prvého grafického prehliadača Mosaic jeho nástupcu, prehliadač Netscape Navigator. Pomocou špeciálnej značky v jazyku HTML dokázali designéri prvýkrát meniť podobu písma na stránke. (Obr. 14) Ešte v tom roku bola táto značka zahrnutá do oficiálnej špecifikácie jazyka HTML, a jej použitie sa rozšírilo aj medzi ostatné prehliadače. Pri výbere písma však boli tvorcovia stránok limitovaní kolekciou, ktorú mal užívateľ nainštalovanú na svojom počítači. 16 V prípade, že užívateľ nemal font, ktorý designér určil v HTML značke nainštalovaný, text sa mu zobrazil v jednom z fontov podobného typu, ktoré sú prednastavené v každom operačnom systéme. (W3Schools, 2014) Obmedzenie na niekoľko predinštalovaných fontov u užívateľov malo za následok, že na stránkach bolo možné až donedávna vidieť stále tie isté písma. Medzi najpoužívanejšie patria dodnes Verdana či Times New Roman. Táto limitácia mala veľký vplyv na podobu a použiteľnosť webových stránok. Je to najmä z toho dôvodu, že webdesignéri sa nechceli s takýmto úzkym výberom písma uspokojiť, a preto sa snažili nájsť spôsoby, ako túto limitáciu obísť, niekedy aj za cenu zníženia užívateľskej prístupnosti. (Maria, 2009) Výmena za obrázok (image replacement) Jedným zo spôsobov bolo použitie technológie Flash od spoločnosti Macromedia, ktorej je v inej časti tejto práce venovaná samostatná kapitola. Interaktívne animácie vytvorené vo Flashi a zabudované do webovej stránky, niesli všetky informácie o fontoch využitých pri ich tvorbe priamo v sebe. Užívateľom sa tak zobrazil text v písme, v akom autor zamýšľal, ale 16 Čo znamenalo, že išlo z veľkej miery o úzky výber písiem, ktoré boli nainštalované v systéme spolu s operačným systémom. Kolekcie písiem sa navyše medzi operačnými systémami Windows a Mac len sčasti prekrývajú 21

22 použitie tejto technológie prinášalo mnoho iných problémov, ako prezentujem v ďalšej kapitole. Druhým spôsobom obídenia limitácie použitých fontov bolo použitie obrázkov namiesto textu. Takto zvýraznené boli najmä nadpisy a titulky. Designér pri tomto postupe vymyslí podobu nadpisu, ktorú vytvorí v grafickom programe. Výsledným súborom je rastrový obraz, ktorý následne vloží na stránke priamo na miesto, kde by bol daný text. (Bowman, 2003) Tento prístup však prináša ďalšie problémy: - obrázky majú pevnú veľkosť a preto sa pri použití lupy v prehliadači nemení ich veľkosť ako u ostatného textu, čo spôsobuje rozpad layoutu stránky - text sa nedá označiť a skopírovať, čo odporuje zvyku užívateľov - čítačky textu pre nevidomých takýto text ignorujú Najznámejšie riešenie posledného problému vymyslel vývojár Todd Fahrner v roku 2003, kedy navrhol, aby text, ktorý je nahradzovaný obrázkom, nebol vymazaný, ale jeho pozícia posunutá mimo okno prehliadača. Týmto spôsobom je skrytý bežným užívateľom, ale nie čítačkám textu. (Zeldman, 2003b) Nové možnosti úpravy textu - Kaskádové štýly CSS Už spomínaná technológia CSS výrazne zasiahla aj do webovej typografie, pretože priniesla funkcionalitu podobnú značke predstavenej v prehliadači Netscape Navigator. CSS však postupne výrazne rozšírilo svoje možnosti a dnes je v drvivej väčšine prípadov hlavným nástrojom, ako meniť podobu textu na stránke. Už v roku 1998 obsahovali CSS nástroje pre použitie písma, ktoré nie je nainštalované na počítači užívateľa prehliadač si ich stiahne pri načítavaní stránky. (W3C, 2011) Tieto funkcie však začali byť využívané masovo až v posledných desiatich rokoch. Umožňujú využiť takmer akékoľvek fonty pri tvorbe webových stránok, vďaka čomu sa výrazne zvýšil záujem o webovú typografiu medzi designérmi. Nástup smartfónov a prispôsobujúceho sa web designu ovplyvnil aj spôsob, akým autori pristupujú k formátovaniu textu. Kedysi rozšírené určovanie veľkosti písma v obrazových bodoch je už zastaralé, pretože nesplňuje kritéria prispôsobivosti zariadeniu. Veľkosť textov sa dnes určuje relatívne k ostatným prvkom na stránke, alebo k prednastavenej štandardnej veľkosti písma v prehliadači. Vďaka tomu sa písmo prispôsobuje nielen veľkosti obrazovky zariadenia spolu s ostatnými elementmi, ale aj zmenám pri použití nástroja lupa v okne prehliadača. (Obr. 15a, 15b) 22

23 Webfonty Problematika použitia ľubovoľného fontu na webe sa definitívne vyriešila príchodom tzv. web fontov. Použite takmer akéhokoľvek zdigitalizovaného fontu na webe si dnes žiada iba jeho prevedenie do správneho formátu, uloženie na serveri a jeho špecifikovanie v jazyku CSS. Prehliadač si stiahne vždy len tie znaky, ktoré potrebuje. Umožnené je tak použitie mnohých klasických zdigitalizovaných písiem. (Obr. 16, 17) Tento spôsob prináša jeden problém súvisiaci s autorskými právami keďže si prehliadač jednotlivé fonty sťahuje, existuje možnosť uložiť si ich na počítači, a to aj v prípade, že ide inak o platený font. Kvôli tomu niektorí tvorcovia písma zakazovali použite tohto spôsobu zobrazovania pri ich písmach. (Coyier, 2008) Rastrová a vektorová grafika Rastrové (bitmapové) obrázky V prvých rokoch po spustení World Wide Web neboli obrázky a grafika súčasťou stránok, tak ako ich poznáme dnes. V období textových prehliadačov nemali význam. Jeden z prvých obrázkov, nahratých na webe, bola fotografia ženskej skupiny Les Horribles Cernettes, zloženej zo zamestnankýň ústavu CERN. Výskumník Silvano de Gennaro spomína, že ešte v čase, keď takmer nevedel, čo to World Wide Web je, fotku naskenoval a poslal na ftp server Tima Berners-Leeho. (Gennaro, Nedatované) (Obr. 18) Tieto a podobné obrázky však boli oddelené od dokumentov tvoriacich väčšinu webu (ako v tomto prípade mohli byť prístupné cez protokol FTP). Na internetovej diskusnej skupine www-talk (ktorej účastníkom bol aj Tim Berners-Lee) prebiehala debata o možnostiach vkladania multimédií do webových stránok. (W3C, 1998) Vo februári 1993 v nej Marc Andreesen navrhol HTML značku img, ktorá vloží špecifikovaný obrázok do textu na mieste, kde sa táto značka nachádza. Napriek niekoľkým námietkam bol tento nástroj implementovaný do už spomínaného prehliadača Mosaic a čoskoro sa rozšíril aj medzi ostatné. Dnes je pevnou súčasťou webových stránok. (Andreesen, 1993) V súčasnosti môžeme grafiku využiť nielen pomocou img značky, ale pomocou CSS aj ako pozadie ktoréhokoľvek prvku na stránke. S myšlienkou použitia na webe boli v nasledujúcich rokoch vytvorené formáty obrázkov GIF a PNG, ktoré v súlade s HTML výrazne rozširovali možnosti prezentačných prostriedkov na webe. Umožňovali ukladať obrázky v malej veľkosti, no zároveň zanechali niekoľko funkcií vhodných pre web, ako možnosť priehľadnosti (u PNG) a krátkych animácií (u GIF). (Tůma, 2007 s. 116) 23

24 Jedným z najrozšírenejších typov obrázkov na webe sú fotografie. Špeciálne kompozične upravené galérie umožňujú užívateľom pohodlné prehliadanie fotografií na celej obrazovke počítača. Špecifickým typom fotografií sú panorámy, ktoré v sebe obsahujú vizuálnu informáciu plného 360 stupňového zorného poľa. Intuitívne zobrazenie takýchto fotografií na webe predstavuje komplikovanejší problém, nakoľko je treba zaistiť jednoduché posúvanie výrezu, na ktorý sa užívateľ pozerá, pomocou myši, klávesnice, či dotykových príkazov. Konkrétne implementácie takéhoto zobrazenia sa opierajú buď o technológiu Flash, alebo o pokročilé spôsoby v rámci HTML verzie 5. Druhý spôsob umožňuje ich pohodlnejšie zobrazenie bez inštalovania zásuvných modulov do webového prehliadača. ( či Vektorová grafika Svoje miesto na webe si našli aj obrázky a prvky vytvorené pomocou vektorov. Táto grafika má obrovskú výhodu v ešte menšej veľkosti a v nekonečnej možnosti škálovania obrázku, bez straty detailov. Vektorová grafika tak svojou podstatou nemá ten problém ako rastrové obrázky na modernom webe ako vyriešiť načítavanie obrázkov rôznych rozlíšení pre rozdielne zariadenia o ktorom autor píše ďalej. Medzi najpopulárnejšie implementácie tohto štýlu zobrazovania patrí otvorený formát.svg, ktorý je široko podporovaný grafickými aplikáciami a hlavne aj takmer všetkými prehliadačmi. Stretnúť sa s ním dá na wikipedia.org, kde sú v tomto formáte vytvorené mapy, grafy a rôzne diagramy. (Obr. 19) Vektorovo vytvorené obrázky sa nehodia na fotografie a detailné obrázky, no sú ideálne pre ikony, symboly a grafy. (Tůma, 2007 s. 27) Ikony a piktogramy V súvislosti s vektorovou grafikou treba zmieniť použite ikon 18 a piktogramov na webe. Aj keď podľa niektorých autorov majú zmysel viac v počítačových programoch ako na webe, kde je veľké percento užívateľov nováčikov (ktorí nie sú detailne oboznámení s webovou aplikáciou), ich použitie môže byť prínosné, najmä v kontexte responzívneho designu, pretože šetria miesto. (Goodwin, 2009 s. 584) Vhodné sú tiež pre viacjazyčné stránky, kde je vhodná jasná komunikácia bez použitia jazyka. (Obr. 20, 21) 17 Ďaľším so spôsobov, ako využiť na stránkach vektorovú grafiku, sú tzv. ikonové fonty. Technicky ide o písma, ktoré obsahujú namiesto písmen grafické znaky a symboly. Keďže fonty sú vo svojej podstate vektorové, tieto grafické prvky majú všetky výhody vektorovej grafiky, avšak sú obmedzené na jednofarebné použitie 18 Myslené v užšom zmysle ako obrázok alebo symbol na obrazovke počítača, ktorý reprezentuje nejaký príkaz (Dictionary.com, 2014) 24

25 Responzívny web design a obrázky Mobilná revolúcia priniesla pre web designérov nové problémy nielen v oblasti layoutu, ale aj pri zobrazovaní obrázkov. Ako píše tvorca filozofie Ethan Marcotte, flexibilné multimédia teda aj obrázky sú jedným z pilierov responzívneho web designu. Pre užívateľa je najprijateľnejšie, keď sa mu v telefóne zobrazí malá verzia fotografie v titulke článku, pretože sa rýchlejšie načíta na pomalom mobilnom pripojení a detaily na malom displeji nie sú až tak potrebné. Pri zobrazení toho istého obrázku na stolnom počítači zas očakáva kvalitnú fotografiu vo vysokom rozlíšení, rýchlosť pripojenia býva omnoho vyššia, a preto si môže dovoliť stiahnuť väčší obrázok. V súčasnosti však neexistuje dobre implementovaný spôsob, akým určiť zdrojový obrázok v závislosti od zariadenia, prípadne displeja, ktoré užívateľ používa. Podobne, ako sa v začiatkoch webu debatovalo o použití značky img, tak sa dnes na diskusných skupinách debatuje o tomto probléme. V posledných dvoch rokoch vznikli dva rozdielne prístupy, ktoré spolu súťažili o širšiu podporu, no ani jeden sa nepresadil. V súčasnosti sa preto pracuje na návrhu, ktorý spája prvky oboch. (Responsive Images Community Group, 2014) Dynamika a animácia Animácia a dynamická spätná väzba patria medzi základné prvky tzv. afordancie pri návrhu digitálnych rozhraní. Afordancie sú vnímané a reálne vlastností objektov, ktoré určujú ako by mohol byť objekt používaný. (Norman, 1988 s. 9) Práve vďaka animáciám, ktoré poskytujú interaktívnu spätnú väzbu k prechádzaniu stránky, sú užívatelia intenzívnejšie vtiahnutí do tohto procesu Technológia Flash Technológia Flash pôvodne vytvorená firmou Macromedia umožňuje vložiť na webové stránky uzavretú oblasť, v ktorej môže byť zobrazené rozhranie poskytujúce omnoho dynamickejší a interaktívnejší obsah. V tejto oblasti sa môže nachádzať čokoľvek, čo grafik v programe Flash vytvoril, od jednoduchého navigačného menu, až po 3D hru. V programe Flash sú animácie vytvárané podľa jednoduchého princípu kľúčových snímkov a interaktivita je ovládaná skritpovacím jazykom ActionScript, ktorý je podobný JavaScriptu využívaného štandardne na webových stránkach. Dôležitým aspektom tejto technológie je, že na jej zobrazenie je nutné mať nainštalovaný plugin do webového prehliadača. 25

26 Obľuba Flashu bola veľmi vysoká v časoch obmedzenej interaktivity a dynamiky na štandardnom webe. Niektorí tvorcovia používali Flash ako výhradný spôsob vytvorenia stránky iným slovom, celá stránka bola jedna veľká interaktívna flashová animácia. Takéto riešenie však prináša mnoho problémov: - text na takejto stránke nevidia internetové vyhľadávače, čo negatívne vplýva na tzv. SEO 19 - bez nainštalovaného pluginu je stránka nepoužiteľná - flashové prvky neprečítajú čítačky pre nevidomých - podobne ako rámce narúša štruktúru a filozofiu webu (Eberhardt, 2011 s. 5) Takéto využívanie Flashu si vyžiadalo mnoho kritiky a negatívne reakcie majú za následok, že dnes sa využíva len na špecializované účely, ako hry a video. 20 Popularita tejto technológie ešte výraznejšie klesla od nástupu smartfónov, pretože jej podpora je na mobilných zariadeniach veľmi obmedzená. Napriek tomu existuje niekoľko nadstavieb Flashu, ktoré umožňujú jednoduchšiu tvorbu interaktívnych aplikácií, ako napr. Flex, a táto technológia stále umožňuje vytvoriť veľmi imerzívne multimediálne prezentácie. ( S konkurenčnou technológiou Silverlight prišla firma Microsoft v roku 2008, jej použitie je však tiež obmedzené. (Eberhardt, 2011 s. 8) Technológia AJAX Dôležitou technológiou, ktorá výrazne zasiahla do podoby stránok bolo asynchronné využitie JavaScriptu a jazyka XML, tzv. AJAX. Tento nástroj umožňuje dynamicky meniť obsah stránky bez toho, aby ju musel prehliadač znova načítavať, a to či už na príkaz užívateľa, periodicky v čase, alebo po nejakom príkaze zo servera. Vytvárajú sa tak hladké prechody a prezeranie webových stránok viac pripomína klasické programy. (Škyřík, 87) HTML5 a CSS3 Namiesto Flashu sa designéri začali obracať ku tradičným webových technológiam ako HTML, CSS, ktoré boli medzitým modernizované a v ich špecifikáciach môžeme nájsť nové prvky, ktoré prinášajú estetické a interaktívne možnosti podobné Flashu. HTML5 a CSS3, 19 Tzv Search Engine Optimization súbor spôsobov, ako zaistiť lepšiu vyhľadateľnosť stránky v najpopulárnejších internetových vyhľadávačoch. (Slawski, a iní, 2012) S postupom k inteligentnejším vyhľadávacím nástrojom jeho dôležitosť klesá, no stále ide o aspekt webového designu, na ktorý treba myslieť. V tejto práci nebude SEO bližšie skúmané, nakoľko to nedovoľuje rozsah ani zameranie témy. 20 Napríklad prehrávač videí na serveri YouTube 26

27 najnovšie verzie týchto jazykov, umožňujú v spolupráci s JavaScriptom nielen pokročilé možnosti animovania elementov na stránke ( ale aj pohodlné vytváranie hier, vkladanie videa a audia, vektorovej grafiky a 3D prvkov. (Eberhardt, 2011 s. 10) Zvuk Medzi základné afordancie interakčných systémov patrí nepochybne aj zvuk. Na webe môžeme jeho využitie badať najmä v čase širokého využívania technológie Flash, kedy bola jeho implementácia najjednoduchšia. Zvuk na webe môže zvýšiť prístupnosť pre ľudí so zrakových postihnutím a zvyšuje emocionálny vplyv webových stránok. Pri prílišnom používaní sa však stáva otravujúcim a neprehľadným užívateľ nevie, kedy zvukové signály nastanú. (Mills, 2013) Z týchto dôvodov je využívaný len na špecifické účely a v tejto, vizuálne zameranej práci, nebude bližšie skúmaný Video Plnohodnotná integrácia záznamu pohyblivých obrázkov videa, či filmu na webe bola komplikovanejšia najmä kvôli omnoho väčšej veľkosti digitálnych videosúborov. Užívatelia boli zo začiatku obmedzení na manuálne sťahovanie videí pomocou textových odkazov, podobne ako to bolo najprv s obrázkami. Názornejší prístup predstavovali obrazové odkazy, ktoré zobrazovali náhľad z videa. Tento prístup sa dnes využíva pri videách nahratých na servery ako YouTube, ktoré sú vložené do stránky autora. Pri kliknutí na tento náhľad sa však priamo spustí video integrované do stránky. (Obr. 23) Prvé videá na webových stránkach boli na ne umiestnené práve vďaka technológiam ako Flash a Java. 21 Užívateľ si musel nainštalovať plugin do prehliadača, a samotné videá boli zobrazované v špecifikovanej oblasti tejto technológie. 22 Server na zdieľanie videa YouTube, ktorý vznikol v roku 2006, však mohutne prispel k spopularizovaniu videa priamo na webe v takej forme, v akej sme zvyknutí. Dnes je takmer samozrejmé, že video sa dá spustiť hneď a netreba čakať, kým sa celé načíta. YouTube a jeho konkurenti umožňujú okrem toho 21 Tzv. Java Applety fungovali podobne ako technológia Flash, kde pomocou pluginu mohli byť na stránke zobrazené interaktívne prvky vytvorené v jazyku Java (tento jazyk nemá nič spoločné so skriptovacím jazykom JavaScript) 22 Ešte skoršou implementáciou boli videá vo formáte mpeg, ktoré sa na stránke prehrávali pomocou prehrávača médií Media Player, nainštalovanom na systémoch Windows (Obr. 22) 27

28 vkladať videá do akejkoľvek stránky, v prehrávači, na aký sme zvyknutí z pôvodného portálu. (Google, 2014) To prispelo ku familirizácií užívateľov k tomuto typu mediálnej komunikácie na webe. Kvôli výraznému rozšíreniu jednoduchého nahrávania a zdieľania videa vo vysokom rozlíšení vďaka smartfónom, digitálnym fotoaparátom a nových technológiam ako Google Glass sa stáva video čoraz výraznejším aspektom každodenného používania webu Streaming Tak ako zvyšovanie rýchlostí pripojenia umožnilo ľuďom pohodlne sledovať video na webe, tak postupom času umožnilo aj tzv. streaming. Ide o proces, kedy ľudia sledujú video na internete v živom prenose. (Ozer, 2011) Video je zvyčajne obohatené chatovacím oknom, v ktorom môžu komunikovať nielen tvorcovia a diváci ale aj diváci medzi sebou Stereoskopia Okrem tradičného videa a filmu na webe môžeme v súčasnosti pozorovať aj deviácie od tohto podania, experimenty, ktoré vychádzajú z trendov vo filmovom priemysle alebo z funkcionalít nových technológií. 3D stereoskopické video s použitím okuliarov je už bežné aj na serveri YouTube. 23 (Bruce, 2011) Omnoho komplikovanejší je typ videa, ktoré bolo nasnímané niekoľkými kamerami s cieľom poskytnúť 360-stupňový pohľad dookola pre každú snímku videa. Je teda na užívateľovi, na čo sa bude pozerať pri jeho prehrávaní. Ide o už spomínaný spôsob zobrazovania panoramatických fotiek, avšak aplikovaný na pohyblivé obrázky. 24 Tento spôsob podávania obsahu patrí medzi rozvíjajúce sa technológie, ktoré majú presah na webe a začínajú sa objavovať ich implementácie. Video väčšinou obsiahne celú obrazovku počítača a užívateľ môže použiť klávesové šipky alebo myš na plynulú zmenu pohľadu. 25 (Hill, 2012) Virtuálna realita Vizualizácia trojrozmerných objektov a prostredí na webe patrí medzi najmenej používané vizuálne prvky. Vyplýva to z jej náročnosti na výkon počítača, rýchlosť pripojenia a tiež relatívne obmedzenú použiteľnosť pre masové nasadenie. 3D si však našlo niekoľko špecializovaných oblastí, v ktorých na webe môže veľmi dobre fungovať. Či už ide o architektonické, inžinierske prezentácie, webové hry, alebo edukačné aplikácie. 23 Napríklad na 24 Medzi zaujímavosti patria aj plne stereoskopické webstránky, ktoré využívajú možností 3D okuliarov na bežné surfovanie (napríklad

29 Poskytovanie 3D obsahu v prehliadačoch patrí medzi najkomplikovanejšie problémy pre ich tvorcov a aj preto sa užívatelia museli donedávna uspokojiť takmer výlučne s použitím pluginov. Technológia Flash patrila medzi prvé možnosti, ako zobraziť 3D vizualizácie na webe, no za cenu objemného toku dát a výkonu procesora. Zobrazenie 3D na webe sa priamo snaží riešiť súborový formát VRML a jeho nástupca X3D. Tieto nástroje podporované konzorciom W3C sú vytvorené pre čo najlepšie zobrazenie práve na webových stránkach. (Web3D Consortium, 2014) Aj keď 3D grafika v týchto formátoch na webe nedosiahla masovú popularitu, v súčasnosti je využívaná jej implementácia, ktorá odstraňuje potrebu inštalovania pluginov do prehliadača. Technológia WebGL je vytvára 3D grafiku pomocou spomínaného jazyka JavaScript, používaného na väčšine webových stránok. Umožňuje nielen zobrazovanie grafiky priamo na webových stránkach bez použitia pluginu, ale aj jej rýchle vykresľovanie pomocou priameho využitia hardvéru počítača. 26 Donedávna bola prekážkou jeho využitia slabá podpora prehliadačov, no v súčasnosti WebGL zobrazia prakticky všetky masové prehliadače, a mnohé mobilné. 27 (Mozilla Foundation, 2014) Reklama Nakoniec je nutné spomenúť aj vizuálne prvky reklamnej komunikácie, s ktorými sa užívatelia stretávajú, nakoľko mnohé webové služby a aplikácie sú financované práve z príjmov z reklamy. Najčastejším prejavom reklamy na stránke sú bannery. Bannerom môžeme označiť vertikálne alebo horizontálne orientovaný obdĺžnik, ktorý zobrazuje reklamu buď ako statický obrázok, alebo ako dynamickú animáciu. (Investopedia, 2014) Veľkosti bannerov sú do istej miery štandardizované (ako môžeme vidieť napríklad na no s príchodom responzívneho designu začína prevládať individuálny prístup k reklame na webe, ktorá sa prispôsobuje zariadeniu. (Taintor, 2013) Špeciálnym typom týchto bannerov sú tzv. zavádzajúce bannery, ktoré sú koncipované ako tradičné navigačné prvky. Užívateľa tak trikom navedú kliknúť na reklamu. (Obr. 24) Jedným z najviac obťažujúcich typov reklamy sú tzv. pop-up reklamy, ktoré zakryjú časť prezeranej stránky na upútanie pozornosti. (Obr. 25) Design sa tak stáva nástrojom reklamného boja o užívateľa. 26 Jednoduché riešenia zobrazovania 3D modelov na webe poskytuje viacero spoločností, napríklad či 27 Mnoho príkladov využitia WebGL prezentuje spoločnosť Google na stránke Google Experiments 29

30 2.4 Súčasné trendy vo web designe Flat design Princíp tzv. flat (plochého) designu patrí medzi hlavné prúdy dnešného estetického prístupu nielen k designovaniu webových stránok, ale digitálnych výstupov a rozhraní všeobecne. Ide o jeden z výsledkov snahy zbaviť digitálne rozhrania často nepotrebnej prílišnej podobnosti k svojím reálnym fyzickým predchodcom, iným slovom, od skeuomorfizmu. (Obr. 26) Vzhľad a navigácia www stránok sú často spojené s princípmi fungovania mesta (virtuálne mestá) alebo s fungovaním technických prístrojov (sady ovládacích panelov a pod.). (Kůst, 2007 s. 130) V článku z roku 2007 takto opisuje vizuálnu estetiku webových stránok František Kúst. Digitálny skeuomorfizmus patril v tom období medzi najvýraznejšie prístupy ku návrhu digitálnych rozhraní, najlepšie to môžeme vidieť na pôvodnom vzhľade operačného systému ios na telefónoch od firmy Apple. (Obr. 27, 28, 29) Skeuomorf sa dá všeobecne definovať ako ornament alebo prvok na objekte okopírovaný z formy daného objektu vyrobeného z iného materiálu alebo inou technikou. (Dictionary.com, 2014) Väčšinou ide o designový prvok staršieho typu objektu, ktorý slúži na ten istý účel. Z tejto definície vyplýva, že keď nový materiál prinesie nové vlastnosti, predtým funkčné elementy sa stanú ozdobnými. (Gross, a iní, 2013 s. 53) Digitálne skeuomorfy vznikli preto, aby užívateľom poskytli spojenie s objektami v reálnom svete, na ktorý sú zvyknutí. Využívajú tak vizuálnu transláciu a metaforu či metonymiu ako nástroje pre komunikovanie kľúčových vizuálnych bodov v digitálnom designe. (Pannafino, 2012 s. 30) Na webových stránkach (podobne ako na obrázkoch z operačného systému ios) môžeme znaky skeuomorfizmu vidieť v zaoblených rohoch, farebných prechodoch a tieňoch evokujúcich reálne svetelné podmienky a na vizuálnych elementoch, ktoré sa podobajú svojím reálnym predchodcom. Dnes sú tieto prvky vnímané zväčša ako nepotrebné, ktoré zaberajú miesto na obrazovke, pretože užívatelia si z veľkej miery zvykli na používanie digitálnych rozhraní. (Payne, 2013) Nutnosť spojenia s reálnym svetom teda postupne odpadá. Medzi najlepšie príklady tohto vývoja patria zmeny podoby operačných systémov Windows vo verzii 8, a mobilný ios vo verzii 7. (Obr. 30, 31 a 32) Content-first, mobile-first a minimalizmus Flat design úzko súvisí aj s prístupom, ktorému autori hovoria content-first, alebo mobilefirst. Vďaka responzívnemu designu (ako bol opísaný v kapitole o kompozícii) je surfovanie 30

31 na mobilných telefónoch pohodlnejšie a rýchlejšie, no okrem toho svojou povahou zmenil celkové vnímanie obsahu na stránke. Na obrazovke telefónu nie je miesta nazvyš, a preto sa grafici musia dobre rozhodnúť, na čo obrazové body využijú. Hlavnú úlohu teda zohráva obsah zredukovaný do svojej najmenšej možnej podoby. (Wroblewski, 2010) Vizuálna komunikácia nie je obohacovaná nepotrebnými prvkami. Táto filozofia content-first (obsah na prvom mieste) hovorí, že obsah na stránke je prvoradý, elementy a kompozícia stránky by sa mala prispôsobovať jemu, a nie naopak. (Boulton, 2011) Prístup mobile-first (mobil na prvom mieste) môžeme nazvať len logickým postupom v tomto myšlienkovom prúde. Designéri si uvedomili, že navrhovanie stránky v prvom rade pre mobily im pomáha redukovať nepotrebné ornamenty. Približnú kompozíciu stránky potom iba upravia pre potreby veľkých obrazoviek počítačov. (Wroblewski, 2010b) Jedným z efektov tohto prístupu je spopularizovanie jednostĺpcovej kompozície menších stránok s jednoduchou navigáciou pomocou rolovania kolieskom myši. Jej podoba vychádza z užšej šírky displeja na telefóne, potreba rolovania vychádza z dotykového ovládania. (napríklad Všetky tieto prístupy k vizuálnej podobe webových stránok sú ovplyvnené designovým princípom minimalizmu, ktorý sa výrazne prejavuje vo viacerých oblastiach vizuálnej komunikácie, nielen webdesigne. Minimalizmus výstižne opísal známy architekt Ludwig Mies van der Rohe ako menej je viac a to sa vzťahuje aj na elementy, ornamenty, efekty na webových stránkach. (Chapman, 2010) (Obr. 33) Lineárna narácia, dlhé rolovanie stránky V predchádzajúcej časti spomínaná populárna jednostĺpcová kompozícia stránok umožňuje lepšie ovládať vizuálnu naráciu, ktorá sa stáva takmer lineárnou užívateľ sa môže posúvať prakticky len hore alebo dole. Do istej miery to potlačuje nelineárnu filozofiu webu, ako bol vytvorený. Technika tzv. parallaxného rolovania navyše umožňuje dynamicky meniť obsah na stránke práve podľa toho, ako sa užívateľ na stránke pohybuje. Pomocou nej sa tak dajú konštruovať veľmi efektné interaktívne zážitky. 28 (napríklad alebo 28 Kvôli prílišnému používaniu tohto efektu, ktoré spomaľuje načítavanie stránok a berie užívateľom kontrolu nad pohybom na stránke, si parallaxné rolovanie vyslúžilo medzi designérmi mnoho kritiky. (Hardison, 2013) 31

32 V súvislosti s popularitou jednostĺpcových stránok treba spomenúť aj fakt, že sa stráca význam ohybu stránky, teda časti stránky, ktorú užívateľ vidí v prvom momente po jej načítaní. Termín vychádza z tradičného novinového publikovania, kde označuje ohyb titulnej strany a hral dôležitú rolu aj vo web designe. (Pannafino, 2012 s. 60) (Obr. 34) Podľa niektorých designérov je však rolovanie, aj vďaka mobilným telefónom a tabletom, užívateľom omnoho prirodzenejšie ako kedysi. Priestor nad ohybom stráca svoj význam. (Donelly, 2010) Medzi ďalší zaujímavý interaktívny prvok súvisiaci s rolovaním patria nekonečné stránky. Používajú sa najmä pri zobrazovaní zoznamov, položiek v e-shope a podobne. Po priblížení ku koncu stránky začne stránka sama načítavať ďalšiu časť zoznamu bez toho, aby užívateľ prešiel na ďalšiu stránku (v aktuálnej iterácií fungujú týmto spôsobom napríklad stránky sociálnych sietí Facebook a Twitter). Pri tomto type stránok, sa všeobecne ujalo tzv. plávajúce menu, ktoré ostáva na obrazovke pri rolovaní a poskytuje tak vždy prístup k jej ďalším sekciám Konvergencia World wide web je nielen hypermédiom, v ktorom konvergujú prvky tradičných médií. Podľa názoru autora môžeme konvergenciu pozorovať aj v rámci jeho výrazových prostriedkov, ako boli opísané v tejto kapitole od textu až po virtuálnu realitu. Medzi najlepšie príklady patria: využitie videa ako súčasti layoutu stránky (napríklad využitie animácie tým istým spôsobom, spomínané spojenie 3D, videa a stereoskopie pri panoramatických videách, kinetická typografia, poprípade interaktívne webové filmy. ( 32

33 3 Praktická časť 3.1 Metodika V praktickej časti bakalárskej práce je cieľom autora priblížiť proces tvorby mediálneho produktu webovej prezentácie spoločnosti Fulldome Institute a Digitárium Brno. Príprava a realizácia projektu sa voľne riadila postupom opisovaným v knihe Návrh a tvorba webů a v záujme zachovania prehľadnosti ho bude reflektovať aj členenie tejto sekcie. V prvej, podkladovej fáze je okomentované zadanie práce od klientskej spoločnosti, ktoré slúži ako základný dokument pri príprave tohto projektu. Príloha 1 tejto práce obsahuje jeho plné znenie. S ohľadom na tradičné postupy je na jeho základe načrtnutý celý postup práce. Príprava podobného projektu je však vysoko iteratívnym procesom, a ako bude na konci tejto časti zrejmé, niektoré návrhy a požiadavky zo zadania sa z rozličných dôvodov po konzultáciach neprepracovali do konečnej verzie projektu. Fáza určenia sa zaoberá prvými krokmi v procese prípravy webového projektu tohto typu a jej obsah vychádza priamo zo zadania. Je v nej opísaný proces určenia žánru webu, jeho cieľovej skupiny a od toho sa odvíjajúca problematika konkrétneho typu obsahu, ktorý bude na ňom prístupný. V tejto časti sa riešia otázky výberu redakčného systému pre dynamické možnosti vytvárania obsahu klientom, a tým pádom aj otázky administratívy webu či už ide o prispievateľov, alebo návštevníkov rovnako ako aj otázky integrácie so sociálnymi sieťami, jazykových mutácií a mediálneho zamerania webu. V tretej fáze bolo hlavnou úlohou autora preskúmať web pre podobne zamerané stránky, či už v českom alebo celosvetovom kontexte. Analyzované boli z hľadiska vizuálu i prístupnosti, preskúmaný bol ich potenciál, konkurencieschopnosť a SEO. Špeciálna pozornosť bola venovaná spôsobu prezentácie audiovizuálneho obsahu, ktorý bol charakterom podobný budúcemu obsahu nášho projektu. Na konci kapitoly je vypracovaná SWOT analýza, ktorá slúži ako ďalší podklad k samotnej produkcii webovej prezentácie. Obsahom fáze produkcie už je samotný proces tvorby stránky použité technológie, vytváranie drôtového modelu (wireframe), navigačného systému a efektívneho rozloženia elementov na stránke. V rámci redakčného systému je vyriešená otázka vizuálnej šablóny a základných pluginov zásuvných modulov, rozširujúcich funkcionalitu webu. 33

34 Piata fáza sa zaoberá spustením webu. Po vytvorení základu stránky sú teda preskúmané a porovnané dostupné webhostingy v českom kontexte. Nasleduje diskusia o problematike domény a priestor je venovaný významnej otázke ochrany stránky pred napadnutím, a rovnako aj možnostiam sledovania návštevnosti a iných dát užívateľov pomocou služby Google Analytics alebo iných zásuvných modulov. Po spustení základnej verzie stránky je obsahom poslednej fázy jej optimalizácia. Autor sa tu zameria na upravenie stránky pre mobilné zariadenia, SEO analýzu, sledovania užívateľov pre zlepšenie užívateľskej prístupnosti a ďalším doplňujúcim aspektom v procese tvorby webovej prezentácie. Ako bolo uvedené, design webovej prezentácie je iteratívny proces, ktorý sa v každej z týchto fáz mení podľa aktuálnych potrieb zákazníka a objavujúcich sa skutočností. Proces návrhu na diagrame dobre opísali autori spomínanej knihy Návrh a tvorba webů. Konečná podoba webovej prezentácie je kombináciou pôvodného zadania, limitácií a nápadov vzišlých z prieskumu, meniacich sa potrieb zákazníka a možností tvorcu projektu. (Obr. 35) 3.2 Podkladová fáza Na začiatku celého projektu stálo získanie samotnej zákazky od spoločnosti Fulldome Institute. Táto firma sa zaoberá tvorbou audiovizuálnych materiálov v špeciálnom formáte pomocou viacerých záznamových prístrojov. Výsledný produkt predstavuje video vo vysokom rozlíšení, ktoré je možné namapovať na kupolu v digitáriách, planetáriách a zábavných parkoch. Na obohatenie zážitku je toto video skombinované s počítačovo vytvoreným 3D prostredím. Ako vyplýva zo zadania, požiadavkou na autora bolo vytvorenie webových stránok projektu, kde budú uvedené informácie o náplni, jednotlivých aktivitách a výstupoch. Súčasťou tohto procesu je aj spracovanie daných audiovizuálnych materiálov pre jednoduchú a rýchlu prezentáciu pre potenciálnych klientov spoločnosti teda hlavne majiteľov a prevádzkarov digitárií. Úprava 3D grafiky, ktorá rovnako patrí medzi výstupy spoločnosti, je tiež zahrnutá v požiadavkách. Pokiaľ ide o samotnú webovú prezentáciu, úlohou autora práce bolo vytvoriť nielen grafický návrh, ale postarať sa o jeho implementovanie v rámci vybraného redakčného systému, zaistenie jednoduchého ovládania pre prispievateľov a administrátorov obsahu, či optimalizácia stránky z pohľadu SEO. Počas prvotných konzultácií však vyšlo najavo, že web 34

35 by mal v budúcnosti obsahovať aj príspevky náučného charakteru, ktoré budú obsahovať informácie o vytváraní konkrétnych audiovizuálnych diel pre ďalšie produkčné spoločnosti a jednotlivcov. Táto skutočnosť ovplyvnila celkové zameranie stránky a jej podobu, aj keď nebola v pôvodnom zadaní. 3.3 Fáza určenia Po získaní zákazky a preštudovaní zadania slúži táto fáza na ujasnenie základných charakteristík webu, ktoré budú určovať jeho výslednú štruktúru i podobu. Prvý dôležitý krok je určenie žánru Žáner webu Každý web portál je de facto vďaka povahe svojho nosiča a charakteru jeho obsahu možné zaradiť, podobne ako film, literárne dielo alebo obrazový materiál, do niekoľkých rôznych druhov žánrov. Tieto žánre, i keď dnes už trochu zastarané, poskytujú dobrý prehľad rôznych typov webov, s akými sa môžeme stretnúť, a do veľkej miery určujú designové vzory, s ktorými sa pri ich návrhu pracuje. Medzi tieto žánre patria: - vlastný elektronický obchod - mozaiky správ - verejná konferencia - otvorená verejná správa - neziskové weby ako siete pomoci - základné informačné weby - hodnotné firemné weby - vzdelávacie fóra - podnetné umenie a zábava - fungujúce webové aplikácie - sprístupnenie intranetov (van Duyne, a iní, 2005 s. 115) Keďže web je navrhovaný pre produkčnú filmovú spoločnosť, ktorá vytvára špecifický druh audiovizuálnych materiálov vo zvláštnych formátoch, je z tohto pohľadu okrem predstavenia spoločnosti nutné zamerať web aj na zaujímavú prezentáciu produktov. Z uvedených webových žánrov teda patrí hlavne do skupiny hodnotných firemných webov. Keďže však okrem prezentácie firmy je v pláne na tejto stránke poskytovať aj náučné materiály 35

36 vzťahujúce sa k náplni audiovizuálnej činnosti, sčasti bude patriť do žánru Vzdelávacích fór či Podnetného umenia a zábavy. Toto určenie bude sprevádzať celý proces Cieľová skupina Ako hovoria autori citovanej knihy, firemné weby musia spĺňať potreby mnohých cieľových skupín. Firemné weby angažujú, predávajú a podporujú zákazníkov a partnerov. (Tamtiež) Odrážať dvojité zameranie webu teda musia aj zvolené cieľové skupiny. V prípade tohto projektu bolo nutné zohľadniť dve skupiny: - primárna majitelia a prevádzkovatelia planetárií, digitárií a zábavných parkov (teda potenciálni zákazníci) - sekundárna vývojári a produkčné spoločnosti snažiace sa produkovať obsah na rovnakej platforme (teda potenciálni spolupracovníci a partneri) Dôležitou súčasťou problematiky cieľových skupín sú aj jazykové mutácie stránky. V zadaní sú požadované verzie v českom a v anglickom jazyku. Je to najmä z dôvodu koncepcie produktov spoločnosti, ktoré majú byť dostupné v mnohých jazykových verziách. Česká lokalizácia je zrejmá, nakoľko ide o lokálny projekt (a ako vyplynie z výsledkov prieskumu, jeden z mála projektov tohto typu). Anglická verzia bude slúžiť ako vstupná brána pre zákazníkov z iných častí sveta, ktorí budú tvoriť potenciálne veľkú časť klientely spoločnosti z dôvodu omnoho väčšieho trhu. V budúcnosti budú podľa potreby doplnené ďalšie jazykové mutácie, ktoré nebude z administračného hľadiska zložité implementovať vďaka funkcionalite redakčného systému. Práve jeho výber je ďalšou dôležitou časťou tejto fázy Výber redakčného systému Statické webstránky, kde autori píšu text priamo do kódu HTML, sú v súčasnosti vhodné len pre úzku skupinu žánrov. Ako bolo opísané v teoretickej časti, od posunu k Webu 2.0 sa väčšina webu stala dynamickým, a omnoho prístupnejším pre ľudí, ktorí neovládajú deklaratívne jazyky používané na webe. Redakčné systémy (Content management systems CMS) umožňujú jednoduchú administráciu webstránky, kde môžu príspevky, stránky a média vkladať sami majitelia, bez nutnosti volať programátora. Je to možné vďaka využitiu dynamického serverového jazyka PHP a databázového systému MySQL, v ktorom sú uložené všetky údaje na stránke. Medzi tri najpopulárnejšie systémy patrí Drupal, Joomla a Wordpress. (Rackspace Support, 2014) Výber redakčného systému stránky závisí na mnohých faktoroch: 36

37 - flexibilita (robustnosť) - jednoduchosť používania - zameranie (žáner) stránky - možnosť použiť vizuálne šablóny - cena - ekosystém zásuvných modulov pluginov - SEO optimalizácia - rýchle bezpečnostné aktualizácie Systémy Drupal, Joomla aj Wordpress patria medzi open-source projekty, ktoré sú k dispozícií plne zdarma. Všetky tri majú okolo seba širokú komunitu vývojárov a užívateľov a podrobnú dokumentáciu. Umožňujú využitie zásuvných modulov, vizuálnych šablón a poskytujú dobré možnosti SEO optimalizácie. Hlavnými kritériami pre výber sa preto stala jednoduchosť administrácie. Autor práce chcel zároveň použiť čo najjednoduchší systém, ktorý poskytuje tie najpotrebnejšie nástroje bez nadbytočných funkcionalít. Drupal je zo všetkých suverénne najrobustnejší a na jeho základe je možné efektívne vytvoriť takmer akúkoľvek stránku. Z tohto dôvodu je však aj najkomplikovanejší, a to nielen v príprave, ale aj v samotnej administratíve určenej pre klientov, ktorá je z tejto trojice najmenej intuitívna. (Obr. 36) O čosi menej robustný systém Joomla poskytuje stále veľkú flexibilitu, jeho veľkou nevýhodou je však nutná oddelená inštalácia češtiny. Pri aktualizáciách teda môže nastať problém pre administrátorov a prispievateľov. Jej užívateľské rozhranie je na polceste medzi systémom Drupal a Wordpress. (Obr. 37) Wordpress je v absolútnych číslach najpoužívanejší redakčný systém. Prvotne iba blogovacia platforma, dnes sa používa takmer na akomkoľvek type stránok. Jeho základná funkcionalita sa nevyrovná ostatným dvom uvedeným systémom, rozširujú ju však tisícky stiahnuteľných zásuvných modulov. (Street, 2013) Veľký výber pluginov je dôležitý aj vzhľadom k povahe webovej prezentácie špecifických audiovizuálnych médií. V súlade s kritériami projektu je dôležitá natívna dostupnosť v českom jazyku a najmä jednoduchosť používania. Všeobecná rozšírenosť má za následok horšiu bezpečnostnú situáciu, z troch systémov je najviac zraniteľný. Odpoveďou na tento problém je však opäť množstvo dostupných zásuvných modulov a veľmi rýchly proces bezpečnostných aktualizácií. Všetky tieto dôvody a dobrá znalosť tohto systému autorom práce mali za následok výber práve redakčného systému Wordpress. (Obr. 38) 37

38 3.3.4 Charakteristika redakčného systému Primárne použitie tohto systému pre blogy určuje aj funkcionalitu. Klienti majú k dispozícií niekoľko možností vytvárania štruktúry a vzhľadu. O vzhľad sa starajú stiahnuteľné šablóny, ktoré je možné jednoducho aktivovať a deaktivovať. Šablóny určujú farby, layout, druhy menu, animácie, a celkovú kompozíciu stránky. Zadarmo alebo platené, často poskytujú široké možnosti personalizácie pomocou vizuálneho rozhrania. So znalosťou kódu HTML a CSS je možné šablóny upravovať ľubovoľne. Stránka v redakčnom systéme Wordpress pozostáva väčšinou z navigačného menu, a špeciálnych položiek nazvaných príspevky a stránky. Položky navigačného menu sú automaticky generované podľa obsahu. Príspevky slúžia najmä pre publikovanie aktualít a noviniek v zmysle blogovacej služby. Existuje viacero možností ich zobrazenia, podľa rôznych kritérií, no spravidla je na najvyššom mieste najnovší príspevok. Zhromaždené bývajú v sekcii Domov, alebo Aktuality, či Novinky. Stránky sú naopak statické časti portálu, ktoré existujú nezávisle na príspevkoch. Používajú sa na publikovanie nemenných informácií, u firemných webov napríklad kontaktov. Príspevky a stránky je možné vytvárať a editovať pomocou rozšíreného textového editora priamo v systéme. Akékoľvek média obrázky, videá či animácie je možné jednoducho uložiť do systému pomocou drag n drop rozhrania. Pre jeho vloženie do príspevku či stránky je potom nutné iba ho nájsť v knižnici médií Administrácia Redakčný systém Wordpress umožňuje jednoduché nastavenie prístupových práv pre klientov, ktorí budú mať na starosti jednotlivé časti webovej stránky a tiež pre iných prispievateľov. Podľa potreby tiež umožňuje registráciu nových užívateľov, pričom administrátori majú plnú kontrolu nad ich privilégiami. Po konzultácií bolo vytvorených niekoľko typov účtov, konkrétne: - šéfredaktor - redaktor - spolupracovník - administrátor - shop manager - zákazník 38

39 Z hľadiska privilégií sú najmocnejší administrátori, ktorí môžu plne spravovať stránku. Ďalšie účty majú nastavené privilégia, ktoré im umožňujú vykonávať potrebné úkony. Posledné dva účty boli vytvorené zásuvným modulom pre e-komerciu WooCommerce, nakoľko v budúcnosti ráta spoločnosť s prevádzkou vlastného e-shopu na týchto stránkach. Rozloženie privilégií týchto účtov odráža primárny charakter webu aj jeho komunitný presah Diskusia a komunita Zapojenie návštevníkov do procesu tvorby stránky patrí medzi ďalšie princípy Webu 2.0. Participácia na obsahu stránky diskusie a komentáre, sú významnou súčasťou mnohých úspešných webov, naprieč rôznymi žánrami. Možnosť ovplyvniť obsah stránky výrazne zvyšuje hodnotu a zaujímavosť stránky pre užívateľa. Špecificky u firemne založených stránok potláča nedôveru k webu ako výhradnému nástroju reklamy a PR danej spoločnosti, pretože sa tak narúša absolútna (aj keď často iba iluzórna) kontrola tvorcov stránky nad jej obsahom. Práve kvôli tomu však môže otvorená diskusia užívateľov na firemných stránkach narušiť jednotnosť toho, čo web komunikuje. Diskusie nie sú z tohto dôvodu obsiahnuté medzi požiadavkami v zadaní projektu. Keďže stránka má mať primárne prezentačný charakter, obsah diskusií by mohol narušiť vnímanie firemnej značky. Riešením, ako zachovať jednotnosť prezentácie a zároveň umožniť otvorenú diskusiu, bola integrácia so sociálnymi sieťami. Odkazy na stránke vedúce na účty spoločnosti na Facebooku a Twitteri poskytnú užívateľom rýchlu možnosť vyjadriť sa, pričom predstavujú hodnotný komunikačný kanál. Diskutovanie na sociálnych sieťach je pre užívateľov zároveň jednoduchšie, nakoľko už sú do nich zapojení, a odpadá tak nutnosť ďalšej registrácie. Sekundárny charakter webu blog určený pre tvorcov a vývojárov podobných audiovizuálnych zážitkov si zas naopak otvorenú participáciu na obsahu žiada. Riešením integrovaných do stránky by v tomto prípade boli komentáre pod blogovými príspevkami, ktoré sú dostupné k použitiu v redakčnom systéme Wordpress. 3.4 Fáza prieskumu V procese tvorby webového projektu je táto fáza dôležitou najmä kvôli konfrontácii zadania práce, teda myšlienok a požiadaviek budúcich vlastníkov webu, s reálnymi možnosťami a podmienkami. Nástrojom tejto konfrontácie je prieskum na webe, s cieľom nájsť stránky podobného zamerania, s podobným obsahom a zistiť, aké technológie a výrazové prostriedky 39

40 používajú, ako bývajú riešené otázky optimalizácie, SEO, či integrovania sociálnych sietí. V prípade portálu určeného pre firemnú prezentáciu takýto prieskum tiež poskytuje informácie o množstve a kvalite konkurencie na trhu, či už v lokálnom, alebo zahraničnom meradle. Poznatky v tejto časti prispeli k vytvoreniu SWOT analýzy webového projektu Skúmané weby a portály Pre potreby prieskumu bolo vybratých šesť stránok, kritériom bola najmä pozícia vo výsledkoch vyhľadávania a príbuznosť obsahu, či zamerania stránky. Päť stránok je zahraničných, jedna česká. Skúmané portály sú taktiež firemné stránky tieto stránky sú podobné zameraním, a aj obsahom ich cieľom je prezentácia spoločnosti, a zároveň zaujímavá prezentácia jej produktov. Zahraničné - AirPano ( - SlicedTomato ( - Sky-Skan ( Videos ( - Helhed360 ( České - Future Technology ( Vizuálna podoba Všetky zo skúmaných stránok uplatňovali tradičný prístup k rozloženiu elementov na stránke. Vrchná časť obsahuje prakticky univerzálne logo spoločnosti, poprípade doplnené grafikou (Future Technology), alebo sloganom (Sliced Tomato). Pod touto časťou (poprípade ako súčasť hlavičky) je umiestnené horizontálne menu. Medzi položkami nechýba nikdy kontakt na firmu, jej predstavenie a sekcia zameraná na prezentáciu audiovizuálnych materiálov, poprípade priamo e-shop s ponukou. Na českej Future Technology sa k materiálom môžeme dostať cez domovskú stránku. Farebná paleta je rôznorodá, od tmavých tónov u českého portálu až po žiarivú žltú u Helhed360. Domovská stránka býva venovaná veľkým obrázkom prevzatým z produktov spoločnosti s cieľom upútať návštevníka. Niektoré zo spoločností navyše ponúkajú služby v oblasti techniky a hardvéru, čo reflektuje aj úvodná stránka. Často je využitý prvok tzv. kolotoča (carousel), ktorý postupne mení obrázky na domovskej stránke. 40

41 Celková vizuálna podoba je podriadená náplni produktov spoločnosti a prezentácií týchto audiovizuálnych materiálov. (Obr ) Prezentácia obsahu Audiovizuálne produkty sú na týchto stránkach prezentované v zásade dvomi spôsobmi: - interaktívne pri tomto riešení sa spustí náhľadové video vo fulldome formáte v špeciálnom prehrávači, v rámci ktorého môže užívateľ v reálnom čase meniť svoj uhol pohľadu. Týmto spôsobom je emulovaný zážitok z digitária. Portál 360 Videos navyše umožňuje výber z niekoľkých typov projekcie. - neinteraktívne toto riešenie predstavuje klasické ploché video, uložené na serveri YouTube alebo Vimeo, ktoré je potom vložené do stránky. Pôvodné video je zobrazené buď celé v kruhovom formáte za cenu deformácie obrazu, alebo je zobrazené iba ako výrez tohto videa, ktorý emuluje zážitok z planetária, avšak bez možnosti s týmto výrezom pohnúť Metoda SEO analýzy portálu Optimalizácia stránky pre vyhľadávače zahŕňa viacero krokov, medzi ktoré patrí napríklad správne definovanie kľúčových slov, popisu a názvu stránky v hlavičke HTML súboru, množstvo spätných odkazov, ktoré spájajú stránku s ďalšími v sieti, ale úlohu hrá aj rýchlosť načítavania a kód neobsahujúci zastarané a zbytočné funkcie. (Slawski, a iní, 2012) Pre SEO analýzu skúmaných webov boli použité tri rôzne online analyzátory, dva české a jeden zahraničný. Použitie viacerých služieb umožňuje skontrolovať výsledky, ktoré namerali medzi sebou. Okrem celkového hodnotenia spriemerovaného z troch analyzátorov, vybral autor tri ukazatele, ktoré sú relevantné k projektu: kľúčové slová, Google PageRank (číslo od 1 do 10 vypočítané špeciálnym algoritmom od spoločnosti Google, ktoré vychádza z viacerých kritérií, najmä však z počtu spätných odkazov), a prispôsobenie stránky mobilným zariadeniam. Využité SEO analyzátory: 1. SEO Analyzátor ( 2. SEO Průvodce ( 3. SEO Site Checkup ( ) 41

42 Výsledky: 360 Videos (priemerné skóre 57%) - Kľúčové slová: 360, video, 360 video, 360, 360 videos, panorama, hd, gopro, interaktives, bewegtes video, wien, grad, iphone, ipad, wien, österreich - Google Page Rank: 4/10 - Prispôsobenie pre mobilné zariadenia: žiadne AirPano (priemerné skóre 60%) - Kľúčové slová: aerial, photography, spherical panorama, virtual tour, panorama, helicopter, RC helicopter, VR360, photography, photo, air, 360, 3D tour, high resolution quality, place, landscape, citiscape, city, hundred best places, 100 best places around the world, airpano.com - Google Page Rank: 5/10 - Prispôsobenie pre mobilné zariadenia: žiadne SlicedTomato (priemerné skóre 59%) - Kľúčové slová: video production, video editing, hd video, full dome video production - Google Page Rank: 2/10 - Prispôsobenie pre mobilné zariadenia: žiadne SkySkan (priemerné skóre 45%) - Kľúčové slová: žiadne - Google Page Rank: 6/10 - Prispôsobenie pre mobilné zariadenia: žiadne Helhed366 (priemerné skóre 38%) - Kľúčové slová: žiadne - Google Page Rank: 6/10 - Prispôsobenie pre mobilné zariadenia: responzívny web design Future Technology(priemerné skóre 48%) - Kľúčové slová: FutureTechnology.cz - Google Page Rank: 1/10 - Prispôsobenie pre mobilné zariadenia: žiadne 42

43 3.4.5 Analýza SWOT Na základe zistení z prieskumu bola vypracovaná SWOT analýza webového projektu, ktorá bola predložená klientom. Základom SWOT analýzy je identifikovať interné silné a slabé stránky projektu spolu s potenciálnymi externými príležitosťami a hrozbami. Jednotlivé body hodnotnej SWOT analýzy by mali byť čo najviac prepojené, slabosť môže znamenať príležitosť a naopak. (Community Toolbox, 2013) Strengths (silné stránky) - úzke zameranie projektu jednoduchý výber vizuálnej podoby pre dve cieľové skupiny, ktorá je podriadená prezentácii audiovizuálneho obsahu - správne využitie kľúčových slov - možnosť experimentácie s prezentáciou obsahu - korešpondujúca voľba domény (digitarium.cz, digitariumbrno.cz, fulldome.cz) Weaknesses (slabé stránky) - úzke zameranie projektu obmedzený potenciál pre spätné odkazy a získanie väčšieho počtu návštevníkov - prezentácia tohto typu obsahu na webe nemá zaužívanú podobu, čo môže zavádzať užívateľov zvyknutých len na jednu z nich (interaktívne/neinteraktívne) Opportunities (Príležitosti) - málo rozšírené prispôsobenie pre mobilné zariadenia u ostatných projektov pridaná hodnota - nízka saturácia českého trhu Threats (Hrozby) - vyššia saturácia zahraničného trhu 3.5 Fáza produkcie Aj keď je táto fáza asi najobsiahlejšou časťou práce na webovom projekte, jej náročnosť závisí výrazne od správnej prípravy v predchádzajúcich fázach. Na jej začiatku je nutné opísať použité nástroje, ktoré autor použil pri tvorbe prezentácie spoločnosti. Nasledovať bude už samotný postup navrhnutia vizuálnej podoby a budovania stránky pomocou redakčného systému. 43

44 3.5.1 Nástroje a vývojové prostredie Použité nástroje určujú nielen kvalitu práce, ale aj jej časovú náročnosť. Pri ich výbere sa dá riadiť množstvom kritérií, no neprekvapí, že tým hlavným je oboznámenosť tvorcu s nástrojom. Učenie použitia nových technológií je totiž časovo náročné a je vhodné sa mu pri komerčných projektoch vyhnúť. Design - papier a pero vytvorenie prvotných drôtových modelov - Adobe Illustrator program na tvorbu vektorovej grafiky Začínať návrh webového projektu mimo počítača, na papieri, je dané čisto autorovou preferenciou, v ktorej však nie je osamotený. S perom a papierom sa designér nemusí cítiť zviazaný limitáciami rastrovej grafiky. Po prvotných návrhoch je však vhodné rýchlo presunúť proces do počítača, pre rýchlejšiu iteráciu. Program Adobe Illustrator je určený pre vektorovú grafiku, ako logá, symboly, ale aj plagáty a iné grafické prvky. Pri návrhu webu je mnohokrát uprednostňovaná jeho známejšia obdoba Adobe Photoshop, určená pre rastrovú grafiku. Je však názorom autora, že Illustrator umožňuje omnoho rýchlejšie vytváranie jednoduchých prototypov, ktoré môžu byť skonzultované s klientom. Z tohto dôvodu bol použitý práve tento program. Stavba stránky Výber redakčného systému bol opísaný už v predošlej kapitole, autor sa obmedzí na jeho konkrétne využitie. Statické stránky písané v kóde HTML, spolu s CSS, poprípade skriptami v JavaScripte, je možné hneď po uložení jednoducho otvoriť vo webovom prehliadači. Situácia sa komplikuje pri vývoji stránky, ktorá používa redakčný systém. Tento sa spolieha na serverové technológie ako PHP (v PHP súboroch sú zakomponované časti HTML kódu) a databázový systémy (konkrétne MySQL). Stránka sa korektne zobrazí iba ak je umiestnená na serveri. Jedným z riešení vývoja v takomto prípade je priame nahrávanie súborov na server vybraného hostingu. Toto riešenie prináša so sebou dva problémy: nedokončená stránka je takto hneď dostupná komukoľvek na internete a editácia súborov priamo na serveri býva zdĺhavá (pretože sa musia zakaždým znova odosielať). Lepším spôsobom, ktorý využil aj autor práce, je tzv. lokálny server. Ide o program, ktorý priamo v počítači vytvorí virtuálne prostredie servera podobné tomu na vzdialenom hostingu, kde bude stránka nakoniec uložená. (Johnson, 2012) Týmto spôsobom je zaistená 44

45 nielen funkčnosť redakčného systému, ale zjednodušuje sa aj proces výstavby, pretože všetky súbory sú na disku počítača. Po dokončení prác stačí hotovú súborovú štruktúru a databázu vložiť na hostingový server. Programom využitým k tomuto účelu bol WAMP, ktorý patrí do rodiny open-source programov tohto typu poskytovaných zdarma. Ekvivalentný MAMP je dostupný pre počítače od firmy Apple a LAMP zas pre operačné systémy založené na Linuxe. Na platforme Windows, ktorú využíva autor práce, existuje ešte program xampp, ktorý však poskytuje prakticky rovnakú funkcionalitu. (Tamtiež) V otázke výberu medzi týmito dvoma programami zohrali rolu skúsenosti autora s prvý menovaným. Pre úpravy samotných súborov bol zvolený pokročilý textový editor Sublime Text. Komunikáciu so súborovým systémom na vzdialenom serveri cez protokol FTP zaisťoval program FileZilla Vytvorenie drôtových modelov 29 Prvým krokom vizuálneho návrhu bolo vytvorenie drôtových modelov štruktúry a navigácie stránky. Na konzultáciu bolo pripravených niekoľko rôznych návrhov, ktoré vychádzali z požiadaviek uvedených v zadaní. Nakoniec boli vybrané dva, ktoré sa ďalej rozpracovávali v počítači. (Obr ) V tejto prvotnej fáze bolo preskúmaných niekoľko podôb navigačného systému, v podobe horizontálneho i vertikálneho menu. Návrh na obr. 48 predstavuje moderné jednostĺpcové riešenie, od ktorého bolo upustené pre zrýchlenie nahrávania stránky. Prezentovaný audiovizuálny obsah by totiž v jednostránkovej verzii bol načítavaný hneď po vstupe na ňu. Rovnako bolo upustené od použitia piktogramov v menu namiesto slovných položiek, ako je vidieť na obr. 47. Tento nápad vzišiel z požiadavky viacjazyčného webu. Do fázy návrhu v programe Illustrator sa prepracovali teda dva návrhy, jeden s bočnou a jeden s horizontálnou navigáciou. Druhý menovaný bol preskúmaný aj z hľadiska využitia podpoložiek menu, ktoré by sa objavili po prejdení myšou. (Obr. 49, 50) Oba hrubé návrhy boli znova prezentované klientovi. Nakoniec bola vybraná podoba s vertikálnou navigáciou. (Obr. 51) Treba podotknúť, že kvôli zameraniu stránky nebolo pri tvorbe rozloženia elementov nutné vytvárať priestor pre reklamu. 29 Drôtové modely (wireframes) sú jednoduché reprezentácie estetického rozloženia elementov na stránke, ktoré je možné vytvoriť rýchlo a v mnohých obmenách. Sú základom rýchleho iteratívneho procesu vytvárania prototypov. (Lim, 2012) 45

46 3.5.3 Výber a úprava šablóny Po vytvorení drôtových modelov stránky sa začalo hľadanie vhodnej vizuálnej šablóny pre redakčný systém. Jedným z hlavných kritérií jej výberu boli možnosti zaujímavej prezentácie produktov spoločnosti, vhodná farebná paleta, rozloženie korešpondujúce s drôtovými modelmi a jednoduchosť jej úprav. Po prieskume, vybratí niekoľkých možností a následnej konzultácii bola schválená platená šablóna Flashlight. (k nahliadnutiu na Ústredným motívom tejto témy (pôvodne určenej pre fotografické portfólia) je meniace sa pozadie, do ktorého je možné nahrať akékoľvek fotky. Pre náš projekt predstavoval tento prvok efektnú a údernú prezentáciu statických fotografií v kruhovom formáte, plynule sa meniacich na pozadí. Logo, menu a samotný obsah stránky sú menšej veľkosti a dávajú tak priestor vizuálnemu zážitku. Z dôvodu navodenia pocitu návštevy planetária bola navyše vybratá tmavá farebná paleta Wordpress na lokálnom serveri Po ujasnení vizuálnej stránky pristúpil autor priamo k stavbe stránky na lokálnom serveri pomocou programu WAMP. Systém Wordpress v českej verzii po stiahnutí a presunutí do správnych adresárov umožňuje jednoduchú konfiguráciu. Po jeho úspešnej inštalácií bolo možné na serveri spustiť redakčný systém i jeho administráciu, zatiaľ bez obsahu a s prednastavenou šablónou. (Obr. 52) Ako prvé bolo nutné vytvoriť štruktúru, teda jednotlivé požadované stránky, medzi ktoré patrili: - Domů novinky a aktuality - O společnosti so základnými informáciami o firme - Náš tým informácie o zamestnancoch a spolupracovníkoch - Interaktivní náhledy zobrazenie interaktívnych videí - Digitalizované modely interaktívne 3D modely - Filmy prezentácia audiovizuálnych materiálov, do budúcnosti e-shop - Kontakt kontaktné informácie (Po konzultáciach bola spod sekcie O společnosti vyňatá sekcia Renderovacia farma, kde môžu užívatelia nájsť informácie o ďalších službách, ktoré firma poskytuje.) (Obr.53) 46

47 Ďalším krokom bolo vytvorenie užívateľských profilov podľa už prezentovaného kľúča, priradenie týchto účtov prvým klientom a naplnenie stránky dostupným obsahom a médiami (fotky, grafika a videá). Nasledovalo inštalovanie základných zásuvných modulov určených najmä pre zrýchlenie chodu stránky, integráciou máp od spoločnosti Google a online zálohovanie. Autor práce potom nainštaloval a nakonfiguroval vybranú vizuálnu šablónu. Jemné úpravy sa týkali zvýraznenia položiek v menu či odstránenie nepotrebného bočného panelu. Slabou stránkou šablóny je neexistencia prispôsobenia pre mobilné zariadenia. S ohľadom na čo najrýchlejšie spustenie základnej verzie stránky bol tento problém riešený v poslednej fáze. Z dôvodu nedostupnosti materiálu zatiaľ nie je v čase písania práce na stránke implementovaná blogová sekcia určená pre produkčné spoločnosti a záujemcov o tvorbu podobného AV materiálu, ako firma ponúka. To isté platí aj o pripravovanom e-shope Jazyková lokalizácia Dôležitou požiadavkou v zadaní bolo dvojjazyčné riešenie. Po prieskume možností sa autor rozhodol využiť špecifickej funkcionality vybraného redakčného systému pod názvom Síť webů, ktorá umožňuje spravovať pod jednou administráciou viacero stránok. (Wordpress, 2014) Existujúci portál bol pomocou zásuvného modulu naklonovaný a naplnený obsahom určeným pre anglickú verziu. Toto riešenie má výhodu relatívne jednoduchej administrácie, i keď je nutné upravovať anglickú a českú verziu zvlášť. (Obr. 54 a 55) Prezentácia poskytovaných audiovizuálnych materiálov Otázka prezentácie produktov spoločnosti na webe patrila medzi základné piliere uvedené v zadaní projektu. Navrhnuté riešenie pozostávalo zo štyroch častí: 1. pozadie stránky využitie animovanej slideshow, v ktorej sú premietané zhotovené fotky v kruhovom formáte (Obr. 56) 2. neinteraktívne videá obdoba prvého bodu, neinteraktívne videá v kruhovom formáte, uložené na serveri YouTube, integrované do stránky 3. interaktívne 3D modely vo formáte VRML vložené v stránke pomocou služby p3d.in 4. interaktívne kupolové video plnohodnotné video s možnosťou otáčať pohľadom, evokujúce návštevu digitária (Obr. 57) 47

48 3.6 Fáza spustenia Po výstavbe stránky a schválení jej podoby zadávateľom projektu nastal čas premiestniť stránku z lokálneho servera na vhodný webhosting. Tomu predchádzal výber domény, teda adresy webovej prezentácie spoločnosti. Po preskúmaní možných názvov domén bola ako primárna vybraná a následne kúpená nakoľko názov tejto domény reflektuje audiovizuálne produkty i názov spoločnosti. Sekundárne bola kúpená doména Tieto dve domény budú môcť v budúcnosti kooperovať v rámci Fulldome Institute Porovnanie a výber hostingu Pomoc pri výbere webhostingu poskytol server hostingy.cz, na ktorom je možné nájsť prehľadné tabuľky dostupných hostingových služieb a ich možností v českom kontexte. Požiadaviek pre vhodný hosting bolo niekoľko: - nízka cena - podpora technológií PHP, MySQL, Apache a.htaccess (potrebné pre fungovanie systému Wordpress) - neobmedzený úložný priestor (potrebný kvôli charakteru nahrávaného AV obsahu) Všetky tieto kritéria najlepšie splnil webhosting od spoločnosti WEDOS, ktorý podporuje všetky potrebné technológie, poskytuje dostatok priestoru a hlavne vyšiel ako najlacnejší Zabezpečenie a ochrana Ako bolo už spomínané, Wordpress je najrozšírenejším redakčným systémov a to znamená, že sa najčastejšie stáva terčom útočníkov snažiacich sa nelegálne získať dáta. Medzi základné povinnosti patrí teda aj nutné zabezpečenie stránok proti tým najbežnejším útokom. Typy útokov - získavanie informácií o verzii systému, o užívateľoch, súborovej štruktúre - útok na užívateľov útočenie hrubou silou 30 na heslá, podvodné získanie údajov - útok na aplikáciu využitie chýb v systéme - útok na server útočenie hrubou silou na administratívne aplikácie servera 30 Pri útoku hrubou silou sa škodlivý algoritmus snaží nájsť potrebné heslo pre login jednoduchým opakovaným skúšaním rôznych výrazov (Wordpress, 2014) 48

49 Základným spôsobom ako sa chrániť proti týmto útokom, je udržiavanie systému, šablóny a všetkých zásuvných modulov v aktualizovanom stave. Dôležitú úlohu zohráva tiež správna inštruktáž klientov, ktorí budú administráciu používať, najmä pokiaľ ide o heslá, a chránenie dôležitých informácií o serveri. V neposlednom rade existuje množstvo zásuvných modulov, ktoré ochraňujú stránku pred niektorými z týchto hrozieb. Po preskúmaní ich vzájomnej kompatibility boli aktivované v systéme Google Analytics Spustením stránky sa začína obdobie jej údržby a optimalizácie. Pre detailné sledovanie návštevnosti a pohybu užívateľov po stránkach projektu bola implementovaná široko používaná služba Google Analytics. Pomocou tejto služby je možné spoznať správanie potenciálnych zákazníkov. Jej súčasťou je množstvo modulov zameraných na reklamu, obchodovanie, vizualizácie prechodu stránkami a iné aspekty webu. (Google, 2014) Inštalácia tejto služby si vyžadovala registráciu účtu a vloženie špeciálneho kódu na stránku. Po prihlásení sa do účtu je možné sledovať štatistiky zhromažďované touto službou. (Obr. 58) 3.7 Fáza optimalizácie V poslednej časti, ktorá je počas písania tejto práce ešte stále v štádiu vývoja, je riešené prispôsobovanie stránky projektu mobilným zariadeniam a krátko je načrtnutá jej nutná SEO optimalizácia Zobrazenie na mobilných zariadeniach Ako bolo spomínané, nedostatkom vybranej vizuálnej šablóny je jej neprispôsobivosť veľkosti zariadeniu. V rámci optimalizácie bolo teda nutné siahnuť po nejakom riešení, ako poskytnúť obsah na stránke pre všetky typy zariadení. Autor preskúmal možnosti vytvorenia oddelenej mobilnej verzie stránky, rovnako ako aj možnosti využitia špeciálnych zásuvných modulov, ktoré dokážu z danej webovej prezentácie nielen vytvoriť mobilnú verziu, ale sú schopné túto mobilnú verziu exportovať ako aplikáciu pre mobilné operačné systémy a postarať sa aj o ich registráciu v obchodoch AppStore a Google Play. Vybrané však bolo riešenie prispôsobivého (responzívneho) designu zasiahnutím do kódu šablóny. Na aktivovanie prispôsobovania použil autor media queries príkazy, tak ako boli opísané v teoretickej časti. Hlavné menu sa pri menších veľkostiach displejov presunie do stredu stránky, nad hlavný obsah. Jeho položky sú vycentrované v strede. Zároveň je v týchto 49

50 prípadoch skryté animované pozadie, ktoré by na telefónoch zbytočne zavadzalo a predlžovalo načítavanie stránky. Odkazy na sociálne siete sa presunuli do hornej časti hlavného obsahu stránku. (Obr. 59) SEO analýza a tracking užívateľov Počas písania tejto práce prebieha SEO analýza portálu a skúmajú sa možnosti pokročilej analýzy pohybu užívateľov po webe pomocou sledovania presného pohybu myši. Tieto dáta môžu poskytnúť cenné informácie pre potenciálne úpravy navigačného systému, layoutu stránky i prezentácie audiovizuálneho obsahu. Ako je možné vidieť, proces tvorby webového portálu zahŕňa obrovské množstvo krokov, ktoré je nutné dôkladne dodržiavať. Len vďaka dobre príprave môže produkčná fáza prebehnúť bez väčších komplikácií a najmä v časovom horizonte podľa vôle klienta. V rámci jednotlivých fáz je sled krokov voľbou web designéra, no postupnosť jednotlivých fáz je viacmenej pevne daná, pretože každá z nich nadväzuje na tú predošlú. 50

51 4 Záver Ako bolo v tejto práci ukázané, web design zastrešuje rozsiahly objem rôznorodej problematiky. Ide o amalgám grafického a interakčného designu, typografie, informačnej architektúry, filmovej vedy, marketingu, žurnalistiky, masmediálnej komunikácie a informatiky. Ak by mal autor zreflektovať tvorbu popísaného mediálneho produktu byť tvorcom webových prezentácií znamená mať znalosti zo všetkých týchto disciplín a nebáť sa neustále učiť nové veci. Proces tvorby webstránky je komplikovaný a jeho kroky sa často opakujú. Vyplýva to už z uvedených zmien v požiadavkách klienta, ktoré sa neustále vyvíjajú. Ide o fakt, s ktorým treba počítať. Rýchla a jasná komunikácia je jediným nástrojom, ako sa vyvarovať zbytočnej práce a nákladov. Interdisciplinárny charakter web designu dovoľuje možnosti spojenia starých médií do inovatívnych celkov. Tieto média, zdigitalizované pre potreby použitia v modernej dobe, slúžia ako odrazový mostík pre nové typy obsahu, ako je možné vidieť aj na príklade spoločnosti Fulldome. Práve z týchto dôvodov by sa autor práce chcel touto problematikou zaoberať aj v diplomovej práci na magisterskom štúdiu. V bakalárskej práci bolo cieľom autora priblížiť vývoj tvorby webových prezentácií v kontexte technológií a následne opísať postup práce na konkrétnom zadaní webového projektu. V teoretickej časti boli vysvetlené nielen základné pojmy problematiky vytvárania obsahu na webe, ale je predložená aj stručná história webu ako hypermediálneho systému, ktorý výrazne zasiahol do globálne mediálnej krajiny a do každodenného života. Ťažiskom tejto sekcie sú predostreté typy výrazových prostriedkov vizuálnej komunikácie na webe v kontexte technologického vývoja. Na konci teoretickej časti sú preskúmané súčasné trendy vzťahujúce sa k predstaveným výrazovým prostriedkom. Praktická časť bola venovaná webovému projektu, ktorý zadala autorovi spoločnosť Fulldome Institute. V súlade s postupom práce prezentovanom v knihe Návrh a tvorba webů boli opísané jednotlivé fázy procesu prípravy tohto projektu, ktorých výsledkom je webová prezentácia vytvorená za pomoci systému Wordpress na adrese fulldome.cz. 51

52 5 Prílohy 5.1 Príloha 1 Zadanie projektu Zadávací dokumentace na Službu Návrh a tvorba web portálu a zpracování obrazového a audio-visuálního materiálu Digitárium Brno a FD Institut s.r.o. vypisuje výběrové řízení na službu: Návrh projektu web portálu a jeho realizaci Zadavatelem zakázky je: FullDdome Institute s.r.o. a DigitariumBrno.cz (Inc.) Ludmily Konečné 11, Brno IČO: DIČ: CZ Zodpovědná osoba: Mgr. Karel Frimmel, pověřený řízením projektu Tel k.frimmel@gmail.com Vymezení předmětu zakázky Předmětem zakázky je služba: Návrh projektu web portálu a zpracování audiovisuálních (dále jen AV) datových podkladů pro prezentaci na tomto portálu. Rozsah zakázky Specifikace Požadavkem je vytvoření webových stránek projektu v českém a anglickém jazyce, kde budou uvedeny informace o náplni projektu, jeho jednotlivých aktivitách a výstupech. Nedílnou a klíčovou součástí portálu je zpracování nestandardních typů AV formátů a jejich přizpůsobení pro prezentaci na portálu a to s ohledem na různé způsoby přístupu uživatelů (návštěvníků) k těmto informacím (tzn. PC, tablet, mobil atp.) 52

53 Úprava a návrh řešení prezentace nestandardních AV podkladů 10 Originální grafický návrh prezentace 1 Převedení CGI podkladů do VRML 2 Vytvoření administračního rozhraní 1 Naplnění obsahem 10 Úprava administrace pro snadnou práci s AV podklady Administrační prostředí pro stránky v menu 1 Vytvoření šablon pro mapy 1 Naprogramování vložení informací přes přístupová hesla 1 Úprava obrázku (odstranění vad obrazu, korekce expozice, retuš, volba) 60 Propojení dat s šablonami 1 Funkční odkazy na dokumenty 1 Redakční systém 1 Příprava k SEO 1 Prezentace Webhosting + portal 2 Měsíční správa do V rámci své nabídky předloží tvůrce návrh časového harmonogramu, který bude zahrnovat následující body: - grafické návrhy - návrh řešení portálu - návrh řešení prezentace a úpravy AV prvků - testování - zahájení zkušebního provozu 53

54 - školení osob určených zadavatelem - zahájení ostrého provozu Koncepce projektu Projekt je pojat jako zadání produktové mediální práce, jejímž výsledkem je projekt i vlastní produkt v podobě web portálu a to dle parametrů zadavatele. Způsob dodání a předání Dodání webu bude provedeno do a to předvedením funkčnosti jednotlivých prvků portálu, výše jmenovaných a vlastní prezentací formou PowerPoint v prostorách zadavatele (tzn.: Digitárium, Kraví hora, Brno). Termín realizace a způsob plnění Termín realizace služby je dán konečným termínem a je nabídnut uchazeči jako podklad pro diplomovou práci. Uchazeč se zavazuje dodat služby v odpovídající kvalitě a požadavcích stanovených zadavatelem. Změny termínů si zadavatel vyhrazuje. Ke splnění služby dojde předáním předmětu plnění zakázky se všemi náležitostmi podle rozsahu zakázky uvedenými ve smlouvě a převzetím zadavatele. Kritéria pro hodnocení - Výjimečnost grafického návrhu portálu - Způsob technické řešení portálu a jeho modularita - Bezpečnostní prvky portálu (bezpečnost ochrana proti napadení) - Analytické prvky portálu (SEO atp.) - Způsob prezentace AV dat - Uživatelské rozhraní - Mutace portálu pro tablety a mobily a s tím související prezentace AV dat Podmínky odstoupení od smlouvy - Zhotovitel nesplní požadavky kladené objednatelem (technické parametry projektu). - Zhotovitel nedodrží dohodnutý harmonogram. 54

55 - Zadavatel si vyhrazuje právo upřesnit podmínky zakázky. Případné dotazy k zadávací dokumentaci je možné vznést písemně nebo em. Dotazy musí být zadavateli doručeny nejpozději 5 dnů před uplynutím lhůty pro podání nabídek. - Zadavatel má právo odmítnout všechny předložené nabídky a neuzavřít smlouvu. - Zadavatel si vyhrazuje právo zrušit projekt bez uvedené důvodu. V Brně dne Mgr. Karel Frimmel pověřený řízením projektu 55

56 5.2 Príloha 2 Obrazová príloha (Obrazová príloha sa skladá z dvoch častí. V prvej sú poskytnuté obrázky z textu, spolu s krátkym popisom. V druhej časti sú uvedené ich plné zdroje.) Obr. 1 Hypotetické zariadenie Memex Vannevara Busha Obr. 2 Prvý grafický prehliadač Mosaic od NCSA 56

57 Obr. 3 Podoba prehliadača Netscape Navigator 57

58 Obr. 4 Populárny prehliadač Mozilla Firefox Obr. 5 Prvý prehliadač spoločnosti Microsoft Internet Explorer 58

59 Obr. 6 Podoba prvých textových prehliadačov Obr. 7 Použitie rámcov (frames) pre layout 59

60 Obr. 8 Postup navrhovania mriežkových systémov 60

61 Obr. 9, 10, 11 Využitie mriežok vo web designe 61

62 Obr. 12 Technológia WAP v mobilných telefónoch 62

63 Obr. 13a, 13b Tá istá stránka, ktorej podoba sa mení podľa veľkosti okna 63

64 Obr. 14 Príklady štýlovania textu pomocou HTML značky font 64

65 Obr. 15a, 15b Responzívna typografia 65

66 Obr. 16, 17 Príklady využitia webfontov 66

67 Obr. 18 Jedna z prvých fotografií nahraných na webe Obr. 19 Využite vektorových máp vo formáte.svg 67

68 Obr. 20, 21 Použitie ikon v navigačných systémoch stránok 68

69 Obr. 22 Prehrávač Windows Media Player vložený do webstránky Obr. 23 Dnešné použitie vložených videá zo servera YouTube na stránkach denníka SME 69

70 Obr. 24 Zavádzajúci reklamný banner Obr. 25 Obťažujúce pop-up reklamy 70

71 Obr. 26 Príklad moderného použitia flat designu 71

72 Obr. 27, 28, 29 Skeuomorfizmus v operačnom systéme ios 6 72

73 Obr. 30 Plochá (flat) estetika operačného systému Windows 8 73

74 Obr. 32 Porovnanie estetiky operačných systémov ios 6 a 7 74

75 Obr. 33 Minimalistický design ios 7 Obr. 33 Príklad minimalizmu na webových stránkach 75

76 Obr. 34 Filozofia designu nad ohybom stránky Obr. 35 Cyklický model procesu tvorby webových prezentácií 76

77 Obr. 36 Rozhranie systému Drupal 77

78 Obr. 37 Rozhranie systému Joomla Obr. 38 Rozhranie systému Wordpress 78

79 79

80 80

81 Obr Užívateľské rozhranie preskúmaných stránok s podobným zameraním 81

82 Obr Prvotné drôtové modely webového projektu 82

83 Obr. 48 Drôtový model jednostĺpcového riešenia 83

84 84

85 Obr Drôtové modely vytvorené v programe Adobe Illustrator Obr. 52 Prednastavená šablóna systému Wordpress 85

86 Obr. 53 Web Fulldome bez šablóny Obr. 54 Česká jazyková lokalizácia 86

87 Obr. 55 Anglická jazyková lokalizácia Obr. 56 Premietanie obrázkov na pozadí 87

88 Obr. 57 Interaktívne kupolové video Obr. 58 Nástenka služby Google Analytics 88

89 Obr. 59 Stránka prispôsobená mobilným zariadeniam 89